Disambiguate if expressions in rsx by requiring curlies, allow shorthand component/element initialization

examples/all_events.rs

@@ -76,7 +76,11 @@ fn app(cx: Scope) -> Element {
 
                 "Hover, click, type or scroll to see the info down below"
             }
-            div { events.read().iter().map(|event| rsx!( div { "{event:?}" } )) }
+            div {
+                for event in events.read().iter() {
+                    div { "{event:?}" }
+                }
+            }
         }
     ))
 }

examples/calculator.rs

@@ -58,13 +58,13 @@ fn app(cx: Scope) -> Element {
     };
 
     cx.render(rsx!(
-        style { include_str!("./assets/calculator.css") }
+        style { {include_str!("./assets/calculator.css")} }
         div { id: "wrapper",
             div { class: "app",
                 div { class: "calculator",
                     tabindex: "0",
                     onkeydown: handle_key_down_event,
-                    div { class: "calculator-display", val.to_string() }
+                    div { class: "calculator-display", "{val}" }
                     div { class: "calculator-keypad",
                         div { class: "input-keys",
                             div { class: "function-keys",
@@ -103,14 +103,14 @@ fn app(cx: Scope) -> Element {
                             div { class: "digit-keys",
                                 button { class: "calculator-key key-0", onclick: move |_| input_digit(0), "0" }
                                 button { class: "calculator-key key-dot", onclick: move |_| val.make_mut().push('.'), "●" }
-                                (1..10).map(|k| rsx!{
+                                for k in 1..10 {
                                     button {
                                         class: "calculator-key {k}",
                                         name: "key-{k}",
                                         onclick: move |_| input_digit(k),
                                         "{k}"
                                     }
-                                }),
+                                }
                             }
                         }
                         div { class: "operator-keys",

examples/compose.rs

@@ -32,12 +32,12 @@ fn app(cx: Scope) -> Element {
             }
 
             ul {
-                emails_sent.read().iter().map(|message| cx.render(rsx! {
+                for message in emails_sent.read().iter() {
                     li {
                         h3 { "email" }
                         span {"{message}"}
                     }
-                }))
+                }
             }
         }
     })

examples/control_focus.rs

@@ -15,8 +15,8 @@ fn app(cx: Scope) -> Element {
         if *running.current() {
             loop {
                 tokio::time::sleep(std::time::Duration::from_millis(10)).await;
-                if let Some(element) = elements.read().get(focused) {
-                    element.set_focus(true);
+                if let Some(element) = elements.with(|f| f.get(focused).cloned()) {
+                    _ = element.set_focus(true).await;
                 } else {
                     focused = 0;
                 }

examples/crm.rs

@@ -62,15 +62,15 @@ fn ClientList(cx: Scope) -> Element {
         Link { to: Route::ClientAdd {}, class: "pure-button pure-button-primary", "Add Client" }
         Link { to: Route::Settings {}, class: "pure-button", "Settings" }
 
-        clients.read().iter().map(|client| rsx! {
+        for client in clients.read().iter() {
             div {
                 class: "client",
                 style: "margin-bottom: 50px",
 
                 p { "Name: {client.first_name} {client.last_name}" }
                 p { "Description: {client.description}" }
             }
-        })
+        }
     })
 }
 

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/fermi.rs

@@ -39,9 +39,9 @@ fn ChildWithRef(cx: Scope) -> Element {
     cx.render(rsx! {
         div {
             ul {
-                names.read().iter().map(|f| rsx!{
-                    li { "hello: {f}" }
-                })
+                for name in names.read().iter() {
+                    li { "hello: {name}" }
+                }
             }
             button {
                 onclick: move |_| {

examples/file_explorer.rs

@@ -28,39 +28,36 @@ fn app(cx: Scope) -> Element {
             link { href:"https://fonts.googleapis.com/icon?family=Material+Icons", rel:"stylesheet", }
             header {
                 i { class: "material-icons icon-menu", "menu" }
-                h1 { "Files: ", files.read().current() }
+                h1 { "Files: ", {files.read().current()} }
                 span { }
                 i { class: "material-icons", onclick: move |_| files.write().go_up(), "logout" }
             }
             main {
-                files.read().path_names.iter().enumerate().map(|(dir_id, path)| {
+                {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}" }
                         }
                     )
-                }),
-                files.read().err.as_ref().map(|err| {
-                    rsx! (
-                        div {
-                            code { "{err}" }
-                            button { onclick: move |_| files.write().clear_err(), "x" }
-                        }
-                    )
-                })
+                })},
+                if let Some(err) = files.read().err.as_ref() {
+                    div {
+                        code { "{err}" }
+                        button { onclick: move |_| files.write().clear_err(), "x" }
+                    }
+                }
             }
         }
     })

examples/framework_benchmark.rs

@@ -66,9 +66,9 @@ fn app(cx: Scope) -> Element {
             }
             table {
                 tbody {
-                    items.read().iter().enumerate().map(|(id, item)| {
-                        let is_in_danger = if (*selected).map(|s| s == id).unwrap_or(false) {"danger"} else {""};
-                        rsx!(tr { class: "{is_in_danger}",
+                    for (id, item) in items.read().iter().enumerate() {
+                        tr {
+                            class: if (*selected).map(|s| s == id).unwrap_or(false) { "danger" },
                             td { class:"col-md-1" }
                             td { class:"col-md-1", "{item.key}" }
                             td { class:"col-md-1", onclick: move |_| selected.set(Some(id)),
@@ -80,8 +80,9 @@ fn app(cx: Scope) -> Element {
                                 }
                             }
                             td { class: "col-md-6" }
-                        })
-                    })
+                        }
+                    }
+
                 }
              }
             span { class: "preloadicon glyphicon glyphicon-remove", aria_hidden: "true" }

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/inputs.rs

@@ -37,7 +37,7 @@ const FIELDS: &[(&str, &str)] = &[
 fn app(cx: Scope) -> Element {
     cx.render(rsx! {
         div { margin_left: "30px",
-            select_example(cx),
+            {select_example(cx)},
             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)
@@ -114,7 +114,7 @@ fn app(cx: Scope) -> Element {
                 }
             }
 
-            FIELDS.iter().map(|(field, value)| rsx! {
+            for (field, value) in FIELDS.iter() {
                 div {
                     input {
                         id: "{field}",
@@ -131,7 +131,7 @@ fn app(cx: Scope) -> Element {
                     }
                     br {}
                 }
-            })
+            }
         }
     })
 }

examples/openid_connect_demo/src/views/header.rs

@@ -41,7 +41,7 @@ pub fn LogOut(cx: Scope<ClientProps>) -> Element {
                         }
                         Err(error) => {
                             rsx! {
-                                div { format!{"Failed to load disconnection url: {:?}", error} }
+                                div { "Failed to load disconnection url: {error:?}" }
                             }
                         }
                     },
@@ -143,9 +143,9 @@ pub fn LoadClient(cx: Scope) -> Element {
                 }
             }
             Err(error) => {
+                log::info! {"Failed to load client: {:?}", error};
                 rsx! {
-                    div { format!{"Failed to load client: {:?}", error} }
-                    log::info!{"Failed to load client: {:?}", error},
+                    div { "Failed to load client: {error:?}" }
                     Outlet::<Route> {}
                 }
             }
@@ -184,7 +184,7 @@ pub fn AuthHeader(cx: Scope) -> Element {
                                 Ok(email) => {
                                     rsx! {
                                         div {
-                                            div { email }
+                                            div { {email} }
                                             LogOut { client_id: client_props.client_id, client: client_props.client }
                                             Outlet::<Route> {}
                                         }
@@ -207,7 +207,7 @@ pub fn AuthHeader(cx: Scope) -> Element {
                                         log::info!("Other issue with token");
                                         rsx! {
                                             div {
-                                                div { error.to_string() }
+                                                div { "{error}" }
                                                 Outlet::<Route> {}
                                             }
                                         }

examples/openid_connect_demo/src/views/not_found.rs

@@ -2,6 +2,9 @@ use dioxus::prelude::*;
 
 #[component]
 pub fn NotFound(cx: Scope, route: Vec<String>) -> Element {
-    let routes = route.join("");
-    render! {rsx! {div{routes}}}
+    render! {
+        div{
+            {route.join("")}
+        }
+    }
 }

examples/pattern_model.rs

@@ -35,15 +35,17 @@ 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),
-                    div { class: "calculator-display", state.read().formatted_display() }
+                    div { class: "calculator-display", {state.read().formatted_display()} }
                     div { class: "calculator-keypad",
                         div { class: "input-keys",
                             div { class: "function-keys",
@@ -74,14 +76,14 @@ fn app(cx: Scope) -> Element {
                                     onclick: move |_|  state.write().input_dot(),
                                     "●"
                                 }
-                                (1..10).map(move |k| rsx!{
+                                for k in 1..10 {
                                     CalculatorKey {
                                         key: "{k}",
                                         name: "key-{k}",
                                         onclick: move |_| state.write().input_digit(k),
                                         "{k}"
                                     }
-                                })
+                                }
                             }
                         }
                         div { class: "operator-keys",
@@ -130,7 +132,7 @@ fn CalculatorKey<'a>(cx: Scope<'a, CalculatorKeyProps<'a>>) -> Element {
         button {
             class: "calculator-key {cx.props.name}",
             onclick: move |e| cx.props.onclick.call(e),
-            &cx.props.children
+            {&cx.props.children}
         }
     })
 }

examples/pattern_reducer.rs

@@ -20,7 +20,7 @@ fn app(cx: Scope) -> Element {
     cx.render(rsx!(
         div {
             h1 {"Select an option"}
-            h3 { "The radio is... ", state.is_playing(), "!" }
+            h3 { "The radio is... ", {state.is_playing()}, "!" }
             button { onclick: move |_| state.make_mut().reduce(PlayerAction::Pause),
                 "Pause"
             }