Feat: more ergonomics, more examples

packages/core/examples/borrowed.rs

@@ -7,6 +7,8 @@
 
 fn main() {}
 
+use std::borrow::Borrow;
+
 use dioxus_core::prelude::*;
 
 struct Props {
@@ -19,8 +21,8 @@ struct ListItem {
     age: u32,
 }
 
-fn app(ctx: Context, props: &Props) -> DomTree {
-    let (_f, setter) = use_state(&ctx, || 0);
+fn app<'a>(ctx: Context<'a>, props: &Props) -> DomTree {
+    let val = use_state(&ctx, || 0);
 
     ctx.render(dioxus::prelude::LazyNodes::new(move |c| {
         let mut root = builder::ElementBuilder::new(c, "div");
@@ -34,7 +36,7 @@ fn app(ctx: Context, props: &Props) -> DomTree {
                 // create the props with nothing but the fc<T>
                 fc_to_builder(ChildItem)
                     .item(child)
-                    .item_handler(setter)
+                    .item_handler(val.setter())
                     .build(),
             ));
         }
@@ -42,15 +44,6 @@ fn app(ctx: Context, props: &Props) -> DomTree {
     }))
 }
 
-type StateSetter<T> = dyn Fn(T);
-// struct StateSetter<T>(dyn Fn(T));
-
-// impl<T> PartialEq for StateSetter<T> {
-//     fn eq(&self, other: &Self) -> bool {
-//         self as *const _ == other as *const _
-//     }
-// }
-
 // props should derive a partialeq implementation automatically, but implement ptr compare for & fields
 #[derive(Props)]
 struct ChildProps<'a> {
@@ -58,153 +51,26 @@ struct ChildProps<'a> {
     item: &'a ListItem,
 
     // Even pass down handlers!
-    item_handler: &'a StateSetter<i32>,
+    item_handler: &'a dyn Fn(i32),
 }
 
 impl PartialEq for ChildProps<'_> {
     fn eq(&self, _other: &Self) -> bool {
-        // assume the dyn fn is never stable -
-        // wrap with use_callback if it's an issue for you
         false
     }
 }
 
-fn ChildItem(_ctx: Context, _props: &ChildProps) -> DomTree {
-    todo!()
-    //     ctx.render(rsx! {
-    //         div {
-    //             item: child,
-    //             handler: setter,
-    //             abc: 123,
-    //             onclick: props.item_handler,
-
-    //             h1 { "abcd123" }
-    //             h2 { "abcd123" }
-    //             div {
-    //                 "abcd123"
-    //                 h2 { }
-    //                 p { }
-    //             },
-    //         }
-    //     })
-}
-
-/*
-
-
-
-
-rsx! {
-    ChildItem {
-        // props
-        item: child, handler: setter,
-
-        // children
-        div { class:"abcd", abc: 123 },
-        div { class:"abcd", abc: 123 },
-
-        // Auto-text coercion
-        "eyo matie {abc}",
-
-        // Anything that accepts Into<VChild>
-        {},
-    }
-}
-
-// dreaming of this syntax
-#[derive(Properties)]
-struct ChildProps<'a> {
-    username:  &'a str,
-    item_handler: &'a dyn Fn(i32),
-}
-
-fn child_item(ctx: Context, props: &ChildProps) -> DomTree {
+fn ChildItem<'a>(ctx: Context<'a>, props: &ChildProps) -> DomTree {
     ctx.render(rsx! {
         div {
-            class: "abc123",
-            abc: 123,
-            onclick: props.item_handler,
-
-            h1 { "Hello, {props.username}!" },
-            h2 { "Welcome the RSX syntax" },
+            onclick: move |evt| (props.item_handler)(10)
+            h1 { "abcd123" }
+            h2 { "abcd123" }
             div {
-                h3 { "This is a subheader" }
-                button {
-                  onclick: props.handler,
-                  "This is a button"
-                  }
-                "This is child text"
-            },
+                "abcd123"
+                h2 { }
+                p { }
+            }
         }
     })
 }
-
-// This is also nice
-
-#[dioxus::component]
-static CHILD: FC = |ctx, username: &str, handler: &dyn Fn(i32)| {
-    ctx.render(rsx! {
-        div {
-            class: "abc123",
-            abc: 123,
-            onclick: handler,
-
-            h1 { "Hello, {username}!" },
-            h2 { "Welcome the RSX syntax" },
-            div {
-                h3 { "This is a subheader" }
-                button {
-                  onclick: props.handler,
-                  "This is a button"
-                  }
-                "This is child text"
-            },
-        }
-    })
-}
-Menlo, Monaco, 'Courier New', monospace
-
-
-
-struct Item {
-  name: String,
-  content: String,
-}
-
-#[dioxus::live_component]
-static CHILD: FC = |ctx, username: &str, handler: &dyn Fn(i32)| {
-      // return lazy nodes or
-      let ssr = ctx.suspend(async {
-        let data = fetch("https://google.com")
-                      .await?
-                      .json::<Item>()
-                      .await?;
-          rsx! {
-          div {
-            h1 { "Welcome: {data.name}" }
-            p { "Content: \n {data.content}" }
-          }
-          }
-      });
-
-    ctx.render(rsx! {
-        div {
-            class: "abc123",
-            abc: 123,
-            onclick: handler,
-
-            h1 { "Hello, {username}!" },
-            h2 { "Welcome the RSX syntax" },
-            div {
-                h3 { "This is a subheader" }
-                button {
-                  onclick: props.handler,
-                  "This is a button"
-                  }
-                {ssr}
-            },
-        }
-    })
-}
-
-*/

packages/core/examples/listener.rs

@@ -11,13 +11,13 @@ fn main() {
 }
 
 static Example: FC<()> = |ctx, props| {
-    let (name, set_name) = use_state(&ctx, || "...?");
+    let name = use_state(&ctx, || "...?");
 
     ctx.render(html! {
         <div>
             <h1> "Hello, {name}" </h1>
-            <button onclick={move |_| set_name("jack")}> "jack!" </button>
-            <button onclick={move |_| set_name("jill")}> "jill!" </button>
+            <button onclick={move |_| name.set("jack")}> "jack!" </button>
+            <button onclick={move |_| name.set("jill")}> "jill!" </button>
         </div>
     })
 };