wip: lots of changes to diffing

examples/reference/README.md

@@ -21,7 +21,6 @@ This folder holds a bunch of useful reference code. However, none of the code is
 | [NodeRef](./noderefs.rs)                            | How to handle futures with suspense |
 | [Signals](./signals.rs)                             | How to handle futures with suspense |
 | [ToString](./tostring.rs)                           | How to handle futures with suspense |
-| [Fiber](./fiber.rs)                                 | How to handle futures with suspense |
 | [Global CSS](./global_css.rs)                       | How to handle futures with suspense |
 | [State Management](./statemanagement.rs)            | How to handle futures with suspense |
 | [Testing](./testing.rs)                             | How to handle futures with suspense |

examples/reference/empty.rs

@@ -4,5 +4,7 @@
 //! This is a simple pattern that allows you to return no elements!
 
 fn main() {}
+
 use dioxus::prelude::*;
+
 static Example: FC<()> = |cx| cx.render(rsx! { Fragment {} });

examples/reference/fiber.rs

@@ -1,10 +0,0 @@
-use dioxus::prelude::*;
-fn main() {}
-
-static Example: FC<()> = |cx| {
-    cx.render(rsx! {
-        div {
-
-        }
-    })
-};

examples/reference/global_css.rs

@@ -1,10 +1,31 @@
+//! Examples: CSS
+//! -------------
+//!
+//! Originally taken from:
+//! - https://www.w3schools.com/html/tryit.asp?filename=tryhtml_css_internal
+//!
+//! Include global styles in your app!
+//!
+//! You can simply drop in a "style" tag and set the inner contents to your stylesheet.
+//! It's slightly more manual than React, but is less magical.
+//!
+//! A coming update with the assets system will make it possible to include global css from child components.
+
 use dioxus::prelude::*;
 fn main() {}
 
-static Example: FC<()> = |cx| {
-    cx.render(rsx! {
-        div {
+const STYLE: &str = r#"
+body {background-color: powderblue;}
+h1   {color: blue;}
+p    {color: red;}
+"#;
 
+const Example: FC<()> = |cx| {
+    cx.render(rsx! {
+        head { style { "{STYLE}" } }
+        body {
+            h1 {"This is a heading"}
+            p {"This is a paragraph"}
         }
     })
 };

examples/reference/iterators.rs

@@ -1,17 +1,38 @@
-use dioxus::prelude::*;
+//! Example: Iterators
+//! ------------------
+//!
+//! This example demonstrates how to use iterators with Dioxus.
+//! Iterators must be used through the curly braces item in element bodies.
+//! While you might be inclined to `.collect::<>` into Html, Dioxus prefers you provide an iterator that
+//! resolves to VNodes. It's more efficient and easier to write than having to `collect` everywhere.
+//!
+//! This also makes it easy to write "pull"-style iterators that don't have a known size.
+
 fn main() {}
 
+use dioxus::prelude::*;
 static Example: FC<()> = |cx| {
     let g = use_state(cx, || 0);
+
     let v = (0..10).map(|f| {
         rsx! {
             li {
-                onclick: move |_| g.set(10)
+                onclick: move |_| g.set(f)
+                "ID: {f}"
+                ul {
+                    {(0..10).map(|k| rsx!{
+                        li {
+                            "Sub iterator: {f}.{k}"
+                        }
+                    })}
+                }
             }
         }
     });
+
     cx.render(rsx! {
-        div {
+        h3 {"Selected: {g}"}
+        ul {
             {v}
         }
     })