Components participate in event handlers

examples/drops.rs

@@ -14,9 +14,9 @@ fn app(cx: Scope) -> Element {
     }
 
     render! {
-        {(0..count).map(|_| rsx!{
+        for _ in 0..count {
             drop_child {}
-        })}
+        }
     }
 }
 

examples/dynamic_asset.rs

@@ -17,11 +17,9 @@ fn app(cx: Scope) -> Element {
         response.respond(Response::new(include_bytes!("./assets/logo.png").to_vec()));
     });
 
-    cx.render(rsx! {
+    render! {
         div {
-            img {
-                src: "/logos/logo.png"
-            }
+            img { src: "/logos/logo.png" }
         }
-    })
+    }
 }

examples/error_handle.rs

@@ -22,9 +22,7 @@ fn DemoC(cx: Scope, x: i32) -> Element {
 
     result.throw()?;
 
-    cx.render(rsx! {
-        h1 {
-            "{x}"
-        }
-    })
+    render! {
+        h1 { "{x}" }
+    }
 }

examples/file_explorer.rs

@@ -35,18 +35,17 @@ fn app(cx: Scope) -> Element {
             main {
                 {files.read().path_names.iter().enumerate().map(|(dir_id, path)| {
                     let path_end = path.split('/').last().unwrap_or(path.as_str());
-                    let icon_type = if path_end.contains('.') {
-                        "description"
-                    } else {
-                        "folder"
-                    };
                     rsx! (
                         div {
                             class: "folder",
                             key: "{path}",
                             i { class: "material-icons",
                                 onclick: move |_| files.write().enter_dir(dir_id),
-                                "{icon_type}"
+                                if path_end.contains('.') {
+                                    "description"
+                                } else {
+                                    "folder"
+                                }
                                 p { class: "cooltip", "0 folders / 0 files" }
                             }
                             h1 { "{path_end}" }

examples/generic_component.rs

@@ -7,9 +7,9 @@ fn main() {
 }
 
 fn app(cx: Scope) -> Element {
-    cx.render(rsx! { generic_child {
-        data: 0i32
-    } })
+    render! {
+        generic_child { data: 0 }
+    }
 }
 
 #[derive(PartialEq, Props)]
@@ -18,9 +18,7 @@ struct GenericChildProps<T: Display + PartialEq> {
 }
 
 fn generic_child<T: Display + PartialEq>(cx: Scope<GenericChildProps<T>>) -> Element {
-    let data = &cx.props.data;
-
-    cx.render(rsx! { div {
-        "{data}"
-    } })
+    render! {
+        div { "{&cx.props.data}" }
+    }
 }

examples/hello_world.rs

@@ -5,7 +5,7 @@ fn main() {
 }
 
 fn app(cx: Scope) -> Element {
-    cx.render(rsx! (
+    render! {
         div { "Hello, world!" }
-    ))
+    }
 }

examples/pattern_model.rs

@@ -35,11 +35,13 @@ fn main() {
     dioxus_desktop::launch_cfg(app, cfg);
 }
 
+const STYLE: &str = include_str!("./assets/calculator.css");
+
 fn app(cx: Scope) -> Element {
     let state = use_ref(cx, Calculator::new);
 
     cx.render(rsx! {
-        style { {include_str!("./assets/calculator.css")} }
+        style { {STYLE} }
         div { id: "wrapper",
             div { class: "app",
                 div { class: "calculator", onkeypress: move |evt| state.write().handle_keydown(evt),

examples/shared_state.rs

@@ -51,26 +51,23 @@ pub fn App(cx: Scope) -> Element {
 
 #[component]
 fn DataEditor(cx: Scope, id: usize) -> Element {
-    let cool_data = use_shared_state::<CoolData>(cx).unwrap().read();
+    let data = use_shared_state::<CoolData>(cx)?;
 
-    let my_data = &cool_data.view(id).unwrap();
-
-    render!(p {
-        "{my_data}"
-    })
+    render! {
+        p {
+            {data.read().view(id)?}
+        }
+    }
 }
 
 #[component]
 fn DataView(cx: Scope, id: usize) -> Element {
-    let cool_data = use_shared_state::<CoolData>(cx).unwrap();
+    let data = use_shared_state::<CoolData>(cx)?;
 
-    let oninput = |e: FormEvent| cool_data.write().set(*id, e.value());
-
-    let cool_data = cool_data.read();
-    let my_data = &cool_data.view(id).unwrap();
-
-    render!(input {
-        oninput: oninput,
-        value: "{my_data}"
-    })
+    render! {
+        input {
+            oninput: move |e: FormEvent| data.write().set(*id, e.value()),
+            value: data.read().view(id)?
+        }
+    }
 }

examples/shorthand.rs

@@ -11,22 +11,35 @@ fn app(cx: Scope) -> Element {
     let class = "class";
     let id = "id";
 
-    // todo: i'd like it for children to be inferred
+    // todo: i'd like it for children on elements to be inferred as the children of the element
+    // also should shorthands understand references/dereferences?
+    // ie **a, *a, &a, &mut a, etc
     let children = render! { "Child" };
+    let onclick = move |_| println!("Clicked!");
 
     render! {
         div { class, id, {&children} }
-        Component { a, b, c, children }
-        Component { a, ..ComponentProps { a: 1, b: 2, c: 3, children: None } }
+        Component { a, b, c, children, onclick }
+        Component { a, ..ComponentProps { a: 1, b: 2, c: 3, children: None, onclick: Default::default() } }
     }
 }
 
 #[component]
-fn Component<'a>(cx: Scope<'a>, a: i32, b: i32, c: i32, children: Element<'a>) -> Element {
+fn Component<'a>(
+    cx: Scope<'a>,
+    a: i32,
+    b: i32,
+    c: i32,
+    children: Element<'a>,
+    onclick: EventHandler<'a, ()>,
+) -> Element {
     render! {
         div { "{a}" }
         div { "{b}" }
         div { "{c}" }
         div { {children} }
+        div {
+            onclick: move |_| onclick.call(()),
+        }
     }
 }