Feat: introduce children for walking down the tree

packages/web/examples/context.rs

@@ -0,0 +1,66 @@
+
+use std::fmt::Display;
+
+use dioxus::{events::on::MouseEvent, prelude::*};
+use dioxus_core as dioxus;
+use dioxus_web::WebsysRenderer;
+
+fn main() {
+    wasm_logger::init(wasm_logger::Config::new(log::Level::Trace));
+    console_error_panic_hook::set_once();
+
+    wasm_bindgen_futures::spawn_local(async {
+        WebsysRenderer::new_with_props(Example, ())
+            .run()
+            .await
+            .unwrap()
+    });
+}
+
+
+#[derive(Debug)]
+struct CustomContext([&'static str; 3]);
+
+
+static Example: FC<()> = |ctx, props| {
+    ctx.create_context(|| CustomContext(["Jack", "Jill", "Bob"]));
+
+        let names = ctx.use_context::<CustomContext>();
+    // let name = names.0[props.id as usize];
+
+    ctx.render(rsx! {
+        div {
+            class: "py-12 px-4 text-center w-full max-w-2xl mx-auto"
+            span {
+                class: "text-sm font-semibold"
+                "Dioxus Example: Jack and Jill"
+            }
+            h2 {
+                class: "text-5xl mt-2 mb-6 leading-tight font-semibold font-heading"
+                "Hello"
+            }
+
+            CustomButton { id: 0 }
+            CustomButton { id: 1 }
+            CustomButton { id: 2 }
+        }
+    })
+};
+
+
+#[derive(Props, PartialEq)]
+struct ButtonProps {
+    id: u8,
+}
+
+fn CustomButton<'b, 'a,>(ctx: Context<'a>, props: &'b ButtonProps) -> DomTree {
+    let names = ctx.use_context::<CustomContext>();
+    let name = names.0[props.id as usize];
+
+    ctx.render(rsx!{
+        button {  
+            class: "inline-block py-4 px-8 mr-6 leading-none text-white bg-indigo-600 hover:bg-indigo-900 font-semibold rounded shadow"
+            "{name}"
+        }
+    })
+}

packages/web/examples/derive.rs

@@ -0,0 +1,4 @@
+use dioxus::{events::on::MouseEvent, prelude::*};
+use dioxus_core as dioxus;
+use dioxus_web::WebsysRenderer;
+fn main() {}

packages/web/examples/todomvcsingle.rs

@@ -1,68 +1,24 @@
+#![allow(non_snake_case)]
 use dioxus_core::prelude::*;
 use dioxus_web::WebsysRenderer;
 
 static APP_STYLE: &'static str = include_str!("./todomvc/style.css");
 
-fn main() {
-    wasm_bindgen_futures::spawn_local(WebsysRenderer::start(App));
-}
-// =======================
-// state-related items
-// =======================
 pub static TODOS: AtomFamily<uuid::Uuid, TodoItem> = atom_family(|_| {});
 pub static FILTER: Atom<FilterState> = atom(|_| FilterState::All);
 pub static SHOW_ALL_TODOS: selector<bool> = selector(|g| g.getter(|f| false));
 
-#[derive(PartialEq)]
-pub enum FilterState {
-    All,
-    Active,
-    Completed,
-}
-
-#[derive(Debug, PartialEq, Clone)]
-pub struct TodoItem {
-    pub id: uuid::Uuid,
-    pub checked: bool,
-    pub contents: String,
-}
-
-impl RecoilContext<()> {
-    pub fn add_todo(&self, contents: String) {}
-    pub fn remove_todo(&self, id: &uuid::Uuid) {}
-    pub fn select_all_todos(&self) {}
-    pub fn toggle_todo(&self, id: &uuid::Uuid) {}
-    pub fn clear_completed(&self) {}
-    pub fn set_filter(&self, filter: &FilterState) {}
-}
-
-// =======================
-// Components
-// =======================
-pub fn App(ctx: Context, props: &()) -> DomTree {
-    ctx.render(rsx! {
-        div {
-            id: "app"
-            style { "{APP_STYLE}" }
-
-            // list
-            TodoList {}
-
-            // footer
-            footer {
-                class: "info"
-                p {"Double-click to edit a todo"}
-                p {
-                    "Created by "
-                    a { "jkelleyrtp", href: "http://github.com/jkelleyrtp/" }
-                }
-                p {
-                    "Part of "
-                    a { "TodoMVC", href: "http://todomvc.com" }
-                }
+fn main() {
+    wasm_bindgen_futures::spawn_local(WebsysRenderer::start(|ctx, props| {
+        ctx.render(rsx! {
+            div {
+                id: "app",
+                style { "{APP_STYLE}" }
+                TodoList {}
+                Footer {}
             }
-        }
-    })
+        })
+    }));
 }
 
 pub fn TodoList(ctx: Context, props: &()) -> DomTree {
@@ -125,11 +81,11 @@ pub fn TodoEntry(ctx: Context, props: &TodoEntryProps) -> DomTree {
                 type: "checkbox"
                 "{todo.checked}"
             }
-            {is_editing.then(|| rsx!(
+           {is_editing.then(|| rsx!(
                 input {
                     value: "{contents}"
                 }
-            ))}
+           ))}
         }
     ))
 }
@@ -175,6 +131,46 @@ pub fn FilterToggles(ctx: Context, props: &()) -> DomTree {
     })
 }
 
+pub fn Footer(ctx: Context, props: &()) -> DomTree {
+    ctx.render(rsx! {
+        footer {
+            class: "info"
+            p {"Double-click to edit a todo"}
+            p {
+                "Created by "
+                a { "jkelleyrtp", href: "http://github.com/jkelleyrtp/" }
+            }
+            p {
+                "Part of "
+                a { "TodoMVC", href: "http://todomvc.com" }
+            }
+        }
+    })
+}
+
+#[derive(PartialEq)]
+pub enum FilterState {
+    All,
+    Active,
+    Completed,
+}
+
+#[derive(Debug, PartialEq, Clone)]
+pub struct TodoItem {
+    pub id: uuid::Uuid,
+    pub checked: bool,
+    pub contents: String,
+}
+
+impl RecoilContext<()> {
+    pub fn add_todo(&self, contents: String) {}
+    pub fn remove_todo(&self, id: &uuid::Uuid) {}
+    pub fn select_all_todos(&self) {}
+    pub fn toggle_todo(&self, id: &uuid::Uuid) {}
+    pub fn clear_completed(&self) {}
+    pub fn set_filter(&self, filter: &FilterState) {}
+}
+
 pub use recoil::*;
 mod recoil {
     use dioxus_core::context::Context;