wip: remove runner on hook and then update docs

examples/borrowed.rs

@@ -21,7 +21,7 @@ fn main() {
 }
 
 fn App(cx: Scope) -> Element {
-    let text = cx.use_hook(|_| vec![String::from("abc=def")], |f| f);
+    let text = cx.use_hook(|_| vec![String::from("abc=def")]);
 
     let first = text.get_mut(0).unwrap();
 

examples/calculator.rs

@@ -12,7 +12,7 @@ use dioxus::prelude::*;
 use separator::Separatable;
 
 fn main() {
-    dioxus::desktop::launch(app);
+    // dioxus::desktop::launch(app);
 }
 
 fn app(cx: Scope) -> Element {

examples/crm.rs

@@ -28,7 +28,8 @@ fn app(cx: Scope) -> Element {
     let description = use_state(&cx, String::new);
 
     cx.render(rsx!(
-        body { margin_left: "35%",
+        body { 
+            margin_left: "35%",
             link {
                 rel: "stylesheet",
                 href: "https://unpkg.com/purecss@2.0.6/build/pure-min.css",

examples/desktop/todomvc.rs

@@ -109,7 +109,7 @@ pub static App: Component = |cx| {
                             li { class: "Active", a { onclick: move |_| filter.set(FilterState::Active), "Active" }}
                             li { class: "Completed", a { onclick: move |_| filter.set(FilterState::Completed), "Completed" }}
                         }
-                        (show_clear_completed).then(|| rsx!(
+                        show_clear_completed.then(|| rsx!(
                             button { class: "clear-completed", onclick: move |_| clear_completed(),
                                 "Clear completed"
                             }

examples/framework_benchmark.rs

@@ -2,7 +2,6 @@ use dioxus::prelude::*;
 use rand::prelude::*;
 
 fn main() {
-    // dioxus::web::launch(App);
     dioxus::desktop::launch(App);
 }
 

examples/hydration.rs

@@ -15,8 +15,7 @@ use dioxus::ssr;
 fn main() {
     let vdom = VirtualDom::new(App);
     let content = ssr::render_vdom_cfg(&vdom, |f| f.pre_render(true));
-
-    // dioxus::desktop::launch_cfg(App, |c| c.with_prerendered(content));
+    dioxus::desktop::launch_cfg(App, |c| c.with_prerendered(content));
 }
 
 static App: Component = |cx| {

examples/inputs.rs

@@ -0,0 +1,150 @@
+//! This example roughly shows how events are serialized into Rust from JavaScript.
+//!
+//! There is some conversion happening when input types are checkbox/radio/select/textarea etc.
+
+use std::sync::Arc;
+
+use dioxus::{events::FormEvent, prelude::*};
+
+fn main() {
+    dioxus::desktop::launch(App);
+}
+
+const FIELDS: &[(&str, &str)] = &[
+    ("button", "Click me!"),
+    ("checkbox", "CHECKBOX"),
+    ("color", ""),
+    ("date", ""),
+    ("datetime-local", ""),
+    ("email", ""),
+    ("file", ""),
+    ("image", ""),
+    ("number", ""),
+    ("password", ""),
+    ("radio", ""),
+    ("range", ""),
+    ("reset", ""),
+    ("search", ""),
+    ("submit", ""),
+    ("tel", ""),
+    ("text", ""),
+    ("time", ""),
+    ("url", ""),
+    //
+    // less supported things
+    ("hidden", ""),
+    ("month", ""), // degrades to text most of the time, but works properly as "value'"
+    ("week", ""),  // degrades to text most of the time
+];
+
+static App: Component = |cx| {
+    cx.render(rsx! {
+        div { margin_left: "30px",
+
+        // radio group
+
+
+
+
+            div {
+                // handling inputs on divs will catch all input events below
+                // so the value of our input event will be either huey, dewey, louie, or true/false (because of the checkboxe)
+                // be mindful in grouping inputs together, as they will all be handled by the same event handler
+                oninput: move |evt| {
+                    println!("{:?}", evt);
+                },
+                div {
+                    input {
+                        id: "huey",
+                        r#type: "radio",
+                        value: "huey",
+                        checked: "",
+                        name: "drone",
+                    }
+                    label {
+                        r#for: "huey",
+                        "Huey"
+                    }
+                }
+                div {
+                    input {
+                        id: "dewey",
+                        r#type: "radio",
+                        value: "dewey",
+                        name: "drone",
+                    }
+                    label {
+                        r#for: "dewey",
+                        "Dewey"
+                    }
+                }
+                div {
+                    input {
+                        id: "louie",
+                        value: "louie",
+                        r#type: "radio",
+                        name: "drone",
+                    }
+                    label {
+                        r#for: "louie",
+                        "Louie"
+                    }
+                }
+                div {
+                    input {
+                        id: "groovy",
+                        value: "groovy",
+                        r#type: "checkbox",
+                        name: "drone",
+                    }
+                    label {
+                        r#for: "groovy",
+                        "groovy"
+                    }
+                }
+            }
+
+            // elements with driven values will preventdefault automatically.
+            // you can disable this override with preventdefault: false
+
+            div {
+                input {
+                    id: "pdf",
+                    value: "pdf",
+                    name: "pdf",
+                    r#type: "checkbox",
+                    oninput: move |evt| {
+                        println!("{:?}", evt);
+                    },
+                }
+                label {
+                    r#for: "pdf",
+                    "pdf"
+                }
+            }
+
+
+
+            FIELDS.iter().map(|(field, value)| rsx!(
+                div {
+                    input {
+                        id: "{field}",
+                        name: "{field}",
+                        r#type: "{field}",
+                        value: "{value}",
+                        // checked: "false",
+                        oninput: move |evt: Arc<FormEvent>| {
+                            println!("{:?}", evt);
+                        },
+                    }
+                    label {
+                        r#for: "{field}",
+                        "{field} element"
+                    }
+                    br {}
+                }
+            ))
+
+        }
+    })
+};

examples/pattern_model.rs

@@ -24,13 +24,13 @@ use dioxus::prelude::*;
 const STYLE: &str = include_str!("./assets/calculator.css");
 fn main() {
     env_logger::init();
-    // dioxus::desktop::launch_cfg(App, |cfg| {
-    //     cfg.with_window(|w| {
-    //         w.with_title("Calculator Demo")
-    //             .with_resizable(false)
-    //             .with_inner_size(LogicalSize::new(320.0, 530.0))
-    //     })
-    // });
+    dioxus::desktop::launch_cfg(app, |cfg| {
+        cfg.with_window(|w| {
+            w.with_title("Calculator Demo")
+                .with_resizable(false)
+                .with_inner_size(LogicalSize::new(320.0, 530.0))
+        })
+    });
 }
 
 fn app(cx: Scope) -> Element {

examples/router.rs

@@ -32,14 +32,14 @@ static App: Component = |cx| {
             Link { to: Route::AllUsers { page: 0 }, "List all users" }
             Link { to: Route::BlogList { page: 0 }, "Blog posts" }
         }
-        {match route {
+        match route {
             Route::Home => rsx!("Home"),
             Route::AllUsers { page } => rsx!("All users - page {page}"),
             Route::User { id } => rsx!("User - id: {id}"),
             Route::BlogList { page } => rsx!("Blog posts - page {page}"),
             Route::BlogPost { post_id } => rsx!("Blog post - post {post_id}"),
             Route::NotFound => rsx!("Not found"),
-        }}
+        }
         footer {}
     })
 };

examples/rsx_compile_fail.rs

@@ -42,6 +42,7 @@ fn example(cx: Scope) -> Element {
                 things_list.iter().map(|f| rsx!{
                     div {
                         "{f.a}"
+                        "{f.b}"
                     }
                 })
 

examples/weather_app.rs

@@ -43,21 +43,21 @@ struct WeatherProps {}
 static WeatherDisplay: Component<WeatherProps> = |cx| {
     //
     cx.render(rsx!(
-        div { class: "flex items-center justify-center flex-col"
-            div { class: "flex items-center justify-center"
-                div { class: "flex flex-col bg-white rounded p-4 w-full max-w-xs"
-                    div{ class: "font-bold text-xl"
+        div { class: "flex items-center justify-center flex-col",
+            div { class: "flex items-center justify-center",
+                div { class: "flex flex-col bg-white rounded p-4 w-full max-w-xs",
+                    div{ class: "font-bold text-xl",
                         "Jon's awesome site!!"
                     }
-                    div{ class: "text-sm text-gray-500"
+                    div{ class: "text-sm text-gray-500",
                         "He worked so hard on it :)"
                     }
-                    div { class: "flex flex-row items-center justify-center mt-6"
-                        div { class: "font-medium text-6xl"
+                    div { class: "flex flex-row items-center justify-center mt-6",
+                        div { class: "font-medium text-6xl",
                             "1337"
                         }
                     }
-                    div { class: "flex flex-row justify-between mt-6"
+                    div { class: "flex flex-row justify-between mt-6",
                         "Legit made my own React"
                     }
                 }

examples/xss_safety.rs

@@ -11,12 +11,9 @@ fn app(cx: Scope) -> Element {
         div {
             "hello world!"
 
-            h1 {
-                "{contents}"
-            }
-            h3 {
-                [contents.as_str()]
-            }
+            h1 { "{contents}" }
+
+            h3 { [contents.as_str()] }
 
             input {
                 value: "{contents}",