Feat: more ergonomics, more examples

packages/web/examples/deep.rs

@@ -10,27 +10,27 @@ fn main() {
 use components::CustomB;
 
 fn CustomA<'a>(ctx: Context<'a>, props: &'a ()) -> DomTree {
-    let (val, set_val) = use_state(&ctx, || "abcdef".to_string());
+    let val = use_state(&ctx, || "abcdef".to_string());
+
     ctx.render(rsx! {
         div {
             class: "m-8"
             "CustomA {val}"
             button {
                 "Upper"
-                onclick: move |_| set_val(val.to_ascii_uppercase())
+                onclick: move |_| val.set(val.to_ascii_uppercase())
             }
             button {
                 "Lower"
-                onclick: move |_| set_val(val.to_ascii_lowercase())
+                onclick: move |_| val.set(val.to_ascii_lowercase())
             }
             CustomB {
-                val: val
+                val: val.as_ref()
             }
         }
     })
 }
 
-
 mod components {
     use super::*;
 

packages/web/examples/infer.rs

@@ -12,11 +12,10 @@ fn main() {
 
 // this is a component
 static Example: FC<()> = |ctx, _props| {
-    let (event, set_event) = use_state(&ctx, || None);
-    let event = format!("{:#?}", event);
+    let event = use_state(&ctx, || None);
 
     let handler = move |evt: MouseEvent| {
-        set_event(Some(evt));
+        event.set(Some(evt));
     };
 
     log::info!("hello world");
@@ -36,9 +35,9 @@ static Example: FC<()> = |ctx, _props| {
             pre {
                 onmousemove: {handler}
                 id: "json"
-                "{event}"
+                "Hello world"
             }
-            Example2 { name: event }
+            Example2 { name: "Blah".into() }
         }
     })
 };

packages/web/examples/jackjill.rs

@@ -10,19 +10,11 @@ fn main() {
 }
 
 static Example: FC<()> = |ctx, props| {
-    let (name, set_name) = use_state(&ctx, || "...?");
+    let name = use_state(&ctx, || "...?");
 
     log::debug!("Running component....");
 
     ctx.render(html! {
-    // <div>
-    //     <h1> "Hello, {name}" </h1>
-    //     <button onclick={move |_| set_name("jack")}> "jack!" </button>
-    //     <button
-    //         onclick={move |_| set_name("jill")}
-    //         onclick={move |_| set_name("jill")}
-    //     > "jill!" </button>
-    // </div>
             <div>
                 <section class="py-12 px-4 text-center">
                     <div class="w-full max-w-2xl mx-auto">
@@ -40,15 +32,14 @@ static Example: FC<()> = |ctx, props| {
                         <div>
                             <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"
-                                // onclick={move |_| log::debug!("set jack")}>
-                                onclick={move |_| set_name("jack")}>
+                                onclick={move |_| name.set("jack")}>
                                 "Jack!"
                                 </button>
 
                                 <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"
-                                    onclick={move |_| set_name("jill")}
-                                    onclick={move |_| set_name("jill")}>
+                                    onclick={move |_| name.set("jill")}
+                                    onclick={move |_| name.set("jill")}>
                                     "Jill!"
                                 </button>
                         </div>
@@ -57,9 +48,3 @@ static Example: FC<()> = |ctx, props| {
             </div>
         })
 };
-
-// <div>
-//     <h1> "Hello, {name}" </h1>
-//     <button onclick={move |_| set_name("jack   .")}> "jack!" </button>
-//     <button onclick={move |_| set_name("jill   .")}> "jill!" </button>
-// </div>

packages/web/examples/list.rs

@@ -0,0 +1,97 @@
+use std::collections::HashMap;
+
+use dioxus::prelude::*;
+use dioxus_core as dioxus;
+use dioxus_web::WebsysRenderer;
+
+fn main() {
+    wasm_logger::init(wasm_logger::Config::new(log::Level::Debug));
+    console_error_panic_hook::set_once();
+    wasm_bindgen_futures::spawn_local(async move {
+        WebsysRenderer::new_with_props(App, ())
+            .run()
+            .await
+            .expect("major crash");
+    });
+}
+
+use lazy_static::lazy_static;
+lazy_static! {
+    static ref DummyData: HashMap<String, String> = {
+        let vals = vec![
+            ("0 ", "abc123"),
+            ("1 ", "abc124"),
+            ("2 ", "abc125"),
+            ("3 ", "abc126"),
+            ("4 ", "abc127"),
+            ("5 ", "abc128"),
+            ("6 ", "abc129"),
+            ("7 ", "abc1210"),
+            ("8 ", "abc1211"),
+            ("9 ", "abc1212"),
+            ("10 ", "abc1213"),
+            ("11 ", "abc1214"),
+            ("12 ", "abc1215"),
+            ("13 ", "abc1216"),
+            ("14 ", "abc1217"),
+            ("15 ", "abc1218"),
+            ("16 ", "abc1219"),
+            ("17 ", "abc1220"),
+            ("18 ", "abc1221"),
+            ("19 ", "abc1222"),
+        ];
+        vals.into_iter()
+            .map(|(a, b)| (a.to_string(), b.to_string()))
+            .collect()
+    };
+}
+
+static App: FC<()> = |ctx, _| {
+    let items = use_state(&ctx, || DummyData.clone());
+
+    // handle new elements
+    let add_new = move |_| {
+        items.modify(|m| {
+            let k = m.len();
+            let v = match (k % 3, k % 5) {
+                (0, 0) => "FizzBuzz".to_string(),
+                (0, _) => "Fizz".to_string(),
+                (_, 0) => "Buzz".to_string(),
+                _ => k.to_string(),
+            };
+            m.insert(k.to_string(), v);
+        })
+    };
+
+    let elements = items.iter().map(|(k, v)| {
+        rsx! {
+            li {
+                span {"{k}: {v}"}
+                button {
+                    "Remove"
+                    onclick: move |_| {
+                        let key_to_remove = k.clone();
+                        items.modify(move |m| { m.remove(&key_to_remove); } )
+                    }
+                }
+            }
+        }
+    });
+
+    ctx.render(rsx!(
+        div {
+            h1 {"Some list"}
+
+            // button  to add new item
+            button {
+                "add new"
+                onclick: {add_new}
+            }
+
+            // list elements
+            ul {
+                {elements}
+            }
+        }
+    ))
+};

packages/web/examples/rsxt.rs

@@ -25,7 +25,7 @@ struct ExampleProps {
 }
 
 static Example: FC<ExampleProps> = |ctx, props| {
-    let (name, set_name) = use_state(&ctx, move || props.initial_name.to_string());
+    let name = use_state(&ctx, move || props.initial_name.to_string());
 
     ctx.render(rsx! {
         div { 
@@ -39,9 +39,9 @@ static Example: FC<ExampleProps> = |ctx, props| {
                 "Hello, {name}"
             }
             
-            CustomButton { name: "Jack!", set_name: set_name }
-            CustomButton { name: "Jill!", set_name: set_name }
-            CustomButton { name: "Bob!", set_name: set_name }
+            CustomButton { name: "Jack!", set_name: name.setter() }
+            CustomButton { name: "Jill!", set_name: name.setter() }
+            CustomButton { name: "Bob!", set_name: name.setter() }
         }
     })
 };