chore: remove unnecessary brackets from examples (DioxusLabs#552)

Author: jkelleyrtp

examples/calculator.rs

@@ -57,12 +57,12 @@ 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",
                     onkeydown: handle_key_down_event,
-                    div { class: "calculator-display", [val.to_string()] }
+                    div { class: "calculator-display", val.to_string() }
                     div { class: "calculator-keypad",
                         div { class: "input-keys",
                             div { class: "function-keys",
@@ -74,7 +74,7 @@ fn app(cx: Scope) -> Element {
                                             val.set("0".into());
                                         }
                                     },
-                                    [if val.is_empty() { "C" } else { "AC" }]
+                                    if val.is_empty() { "C" } else { "AC" }
                                 }
                                 button {
                                     class: "calculator-key key-sign",

examples/disabled.rs

@@ -12,7 +12,7 @@ fn app(cx: Scope) -> Element {
             button {
                 onclick: move |_| disabled.set(!disabled),
                 "click to "
-                [if disabled == true {"enable"} else {"disable"}]
+                if disabled == true { "enable" } else { "disable" }
                 " the lower button"
             }
 

examples/file_explorer.rs

@@ -19,10 +19,10 @@ fn app(cx: Scope) -> Element {
 
     rsx!(cx, div {
         link { href:"https://fonts.googleapis.com/icon?family=Material+Icons", rel:"stylesheet", }
-        style { [include_str!("./assets/fileexplorer.css")] }
+        style { include_str!("./assets/fileexplorer.css") }
         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" }
         }

examples/inputs.rs

@@ -38,12 +38,6 @@ const FIELDS: &[(&str, &str)] = &[
 fn app(cx: Scope) -> Element {
     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)
@@ -127,7 +121,6 @@ fn app(cx: Scope) -> Element {
                         name: "{field}",
                         r#type: "{field}",
                         value: "{value}",
-                        // checked: "false",
                         oninput: move |evt: FormEvent| {
                             println!("{:?}", evt);
                         },

examples/nested_listeners.rs

@@ -15,7 +15,6 @@ fn app(cx: Scope) -> Element {
         div {
             onclick: move |_| println!("clicked! top"),
             "- div"
-
             button {
                 onclick: move |_| println!("clicked! bottom propoate"),
                 "Propogate"

examples/pattern_model.rs

@@ -36,18 +36,18 @@ fn app(cx: Scope) -> Element {
     let state = use_ref(&cx, Calculator::new);
 
     cx.render(rsx! {
-        style { [include_str!("./assets/calculator.css")] }
+        style { include_str!("./assets/calculator.css") }
         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",
                                 CalculatorKey {
                                     name: "key-clear",
                                     onclick: move |_| state.write().clear_display(),
-                                    [if state.read().display_value == "0" { "C" } else { "AC" }]
+                                    if state.read().display_value == "0" { "C" } else { "AC" }
                                 }
                                 CalculatorKey {
                                     name: "key-sign",

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"
             }

examples/rsx_compile_fail.rs

@@ -32,27 +32,19 @@ fn example(cx: Scope) -> Element {
 
     cx.render(rsx!(
         div {
-            div {
-                id: "asd",
+            div { id: "asd",
                 "your neighborhood spiderman"
 
                 items.iter().cycle().take(5).map(|f| rsx!{
-                    div {
-                        "{f.a}"
-                    }
+                    div { "{f.a}" }
                 })
 
                 things_list.iter().map(|f| rsx!{
-                    div {
-                        "{f.a}"
-                        "{f.b}"
-                    }
+                    div { "{f.a}" "{f.b}" }
                 })
 
-                mything_read.as_ref().map(|f| rsx!{
-                    div {
-                       "{f}"
-                    }
+                mything_read.as_ref().map(|f| rsx! {
+                    div { "{f}" }
                 })
             }
         }

examples/rsx_usage.rs

@@ -1,3 +1,5 @@
+#![allow(non_snake_case)]
+
 //! A tour of the rsx! macro
 //! ------------------------
 //!
@@ -42,10 +44,6 @@ fn main() {
     dioxus_desktop::launch(app);
 }
 
-/// When trying to return "nothing" to Dioxus, you'll need to specify the type parameter or Rust will be sad.
-/// This type alias specifies the type for you so you don't need to write "None as Option<()>"
-const NONE_ELEMENT: Option<()> = None;
-
 use core::{fmt, str::FromStr};
 use std::fmt::Display;
 
@@ -63,7 +61,7 @@ fn app(cx: Scope) -> Element {
             h1 {"Some text"}
             h1 {"Some text with {formatting}"}
             h1 {"Formatting basic expressions {formatting_tuple.0} and {formatting_tuple.1}"}
-            h1 {"Formatting without interpolation " [formatting_tuple.0] "and" [formatting_tuple.1] }
+            h1 {"Formatting without interpolation " formatting_tuple.0 "and" formatting_tuple.1 }
             h2 {
                 "Multiple"
                 "Text"
@@ -131,13 +129,9 @@ fn app(cx: Scope) -> Element {
                 None
             }
 
-
             // returning "None" without a diverging branch is a bit noisy... but rare in practice
             None as Option<()>,
 
-            // Use the Dioxus type-alias for less noise
-            NONE_ELEMENT,
-
             // can also just use empty fragments
             Fragment {}
 
@@ -160,7 +154,7 @@ fn app(cx: Scope) -> Element {
             // Can accept any paths
             // Notice how you still get syntax highlighting and IDE support :)
             Baller {}
-            baller::Baller { }
+            baller::Baller {}
             crate::baller::Baller {}
 
             // Can take properties
@@ -187,11 +181,13 @@ fn app(cx: Scope) -> Element {
             // This component's props are defined *inline* with the `inline_props` macro
             WithInline { text: "using functionc all syntax" }
 
-            // Components can be geneirc too
+            // Components can be generic too
             // This component takes i32 type to give you typed input
             TypedInput::<TypedInputProps<i32>> {}
+
             // Type inference can be used too
             TypedInput { initial: 10.0 }
+
             // geneircs with the `inline_props` macro
             Label { text: "hello geneirc world!" }
             Label { text: 99.9 }
@@ -205,10 +201,23 @@ fn app(cx: Scope) -> Element {
             // helper functions
             // Anything that implements IntoVnode can be dropped directly into Rsx
             helper(&cx, "hello world!")
+
+            // Strings can be supplied directly
+            String::from("Hello world!")
+
+            // So can format_args
+            format_args!("Hello {}!", "world")
+
+            // Or we can shell out to a helper function
+            format_dollars(10, 50)
         }
     })
 }
 
+fn format_dollars(dollars: u32, cents: u32) -> String {
+    format!("${}.{:02}", dollars, cents)
+}
+
 fn helper<'a>(cx: &'a ScopeState, text: &str) -> Element<'a> {
     cx.render(rsx! {
         p { "{text}" }
@@ -223,7 +232,7 @@ fn lowercase_helper(cx: Scope) -> Element {
 
 mod baller {
     use super::*;
-    #[derive(Props, PartialEq)]
+    #[derive(Props, PartialEq, Eq)]
     pub struct BallerProps {}
 
     #[allow(non_snake_case)]
@@ -252,7 +261,7 @@ pub fn Taller<'a>(cx: Scope<'a, TallerProps<'a>>) -> Element {
     })
 }
 
-#[derive(Props, PartialEq)]
+#[derive(Props, PartialEq, Eq)]
 pub struct TypedInputProps<T> {
     #[props(optional, default)]
     initial: Option<T>,

examples/todomvc.rs

@@ -1,18 +1,20 @@
+#![allow(non_snake_case)]
+
 use dioxus::prelude::*;
 use dioxus_elements::input_data::keyboard_types::Key;
 
 fn main() {
     dioxus_desktop::launch(app);
 }
 
-#[derive(PartialEq)]
+#[derive(Eq, PartialEq)]
 pub enum FilterState {
     All,
     Active,
     Completed,
 }
 
-#[derive(Debug, PartialEq, Clone)]
+#[derive(Debug, Eq, PartialEq, Clone)]
 pub struct TodoItem {
     pub id: u32,
     pub checked: bool,
@@ -46,7 +48,7 @@ pub fn app(cx: Scope<()>) -> Element {
 
     cx.render(rsx!{
         section { class: "todoapp",
-            style { [include_str!("./assets/todomvc.css")] }
+            style { include_str!("./assets/todomvc.css") }
             div {
                 header { class: "header",
                     h1 {"todos"}
@@ -86,7 +88,7 @@ pub fn app(cx: Scope<()>) -> Element {
                             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 |_| todos.make_mut().retain(|_, todo| !todo.checked),
@@ -123,7 +125,6 @@ pub fn TodoEntry<'a>(cx: Scope<'a, TodoEntryProps<'a>>) -> Element {
         li {
             class: "{completed} {editing}",
             div { class: "view",
-
                 input {
                     class: "toggle",
                     r#type: "checkbox",

examples/window_event.rs

@@ -84,9 +84,7 @@ fn app(cx: Scope) -> Element {
                     button {
                         class: "inline-flex items-center text-white bg-blue-500 border-0 py-1 px-3 hover:bg-green-700 rounded",
                         onmousedown: |evt| evt.cancel_bubble(),
-                        onclick: move |_| {
-                            window.set_title("Dioxus Application");
-                        },
+                        onclick: move |_| window.set_title("Dioxus Application"),
                         "Change Title"
                     }
                 }