wip: add deeply neste example

packages/web/examples/deep.rs

@@ -0,0 +1,63 @@
+use dioxus_web::{WebsysRenderer, dioxus::prelude::*};
+
+fn main() {
+    wasm_logger::init(wasm_logger::Config::new(log::Level::Debug));
+    console_error_panic_hook::set_once();
+
+    wasm_bindgen_futures::spawn_local(WebsysRenderer::start(CustomA))    
+}
+
+
+fn CustomA<'a>(ctx: Context<'a>, props: &'a ()) -> DomTree {
+    let (val, set_val) = use_state(&ctx, || "abcdef".to_string());
+    ctx.render(rsx!{
+        div {
+            "CustomA {val}"
+            button {
+                "Upper"
+                onclick: move |_| set_val(val.to_ascii_uppercase())
+            }
+            button {
+                "Lower"
+                onclick: move |_| set_val(val.to_ascii_lowercase())
+            }
+            CustomB {
+                val: val
+            }
+        }
+    })
+}
+
+
+#[derive(Debug, Props, PartialEq)]
+struct PropsB<'src> {
+    val: &'src str
+}
+
+fn CustomB<'a>(ctx: Context<'a>, props: &'a PropsB<'a>) -> DomTree {
+    let (first, last) = props.val.split_at(3);
+    ctx.render(rsx!{
+        div {
+            "CustomB {props.val}"
+            CustomC {
+                val: first
+            }
+            CustomC {
+                val: last
+            }
+        }
+    })
+}
+
+#[derive(Debug, Props, PartialEq)]
+struct PropsC<'src> {
+    val: &'src str
+}
+
+fn CustomC<'a>(ctx: Context<'a>, props: &'a PropsC<'a>) -> DomTree {
+    ctx.render(rsx!{
+        div {
+            "CustomC {props.val}"
+        }
+    })
+}

packages/web/examples/rsxt.rs

@@ -6,17 +6,26 @@ 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, ExampleProps { initial_name: "..?"}).run().await.unwrap()} );
+    
+    wasm_bindgen_futures::spawn_local(async {
+        WebsysRenderer::new_with_props(Example, ExampleProps { initial_name: "..?", blarg: Vec::new()})
+            .run()
+            .await
+            .unwrap()
+    });
 }
 
 #[derive(PartialEq, Props)]
 struct ExampleProps {
-    initial_name: &'static str
+    initial_name: &'static str,
+    blarg: Vec<String>
 }
 
 static Example: FC<ExampleProps> = |ctx, props| {
     let (name, set_name) = use_state(&ctx, move || props.initial_name);
 
+    let sub = props.blarg.last().unwrap();
+
     ctx.render(rsx! {
         div { 
             class: "py-12 px-4 text-center w-full max-w-2xl mx-auto"
@@ -28,36 +37,34 @@ static Example: FC<ExampleProps> = |ctx, props| {
                 class: "text-5xl mt-2 mb-6 leading-tight font-semibold font-heading"   
                 "Hello, {name}"
             }
-            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"
+            CustomButton { name: sub, set_name: Box::new(move || set_name("jack")) }
-                onmouseover: move |_| set_name("jack") 
+            // CustomButton { name: "Jack!", set_name: Box::new(move || set_name("jack")) }
-                "Jack!"
+            // CustomButton { name: "Jill!", set_name: Box::new(move || set_name("jill")) }
-            }
+            // CustomButton { name: "Reset!", set_name: Box::new(move || set_name(props.initial_name)) }
-            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"
-                onmouseover: move |_| set_name("jill")
-                "Jill!"
-            }
-            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"
-                onmouseover: move |_| set_name(props.initial_name)
-                "Reset!"
-            }
-            Child {
-                initial_name: "bill"
-            }
-            Child {
-                initial_name: "bob"
-            }
         }
     })
 };
 
-static Child: FC<ExampleProps> = |ctx, props| {
+#[derive(Props)]
+struct ButtonProps<'src> {
+    name: &'src String,
+    // name: &'src str,
+    set_name: Box< dyn Fn() + 'src>
+}
+impl PartialEq for ButtonProps<'_> {
+    fn eq(&self, other: &Self) -> bool {
+        false
+    }
+}
+
+fn CustomButton<'a>(ctx: Context<'a>, props: &'a ButtonProps<'a>) -> DomTree {
     ctx.render(rsx!{
-        div {
+        button {  
-            "Child name: {props.initial_name}"
+            class: "inline-block py-4 px-8 mr-6 leading-none text-white bg-indigo-600 hover:bg-indigo-900 font-semibold rounded shadow"
+            onmouseover: move |_| (props.set_name)()
+            "{props.name}"
         }
     })
-};
+}