Update to dioxus v0.5

Cargo.toml

@@ -12,11 +12,9 @@ members = [
 ]
 
 [dependencies]
-dioxus = { git = "https://github.com/dioxuslabs/dioxus" }
-# dioxus-web = { git = "https://github.com/dioxuslabs/dioxus" }
-dioxus-signals = { git = "https://github.com/dioxuslabs/dioxus" }
-dioxus-use-mounted = { git = "https://github.com/matthunz/dioxus-use-mounted" }
+dioxus = "0.5.0"
+dioxus-use-mounted = "0.2.0"
 dioxus-spring = { git = "https://github.com/matthunz/dioxus-spring" }
-dioxus-resize-observer = { git = "https://github.com/dioxus-community/dioxus-resize-observer" }
+dioxus-resize-observer = "0.2.0"
 log = "0.4.20"
 dioxus-logger = "0.4.1"

lookbook/src/main.rs

@@ -2,11 +2,11 @@ use dioxus::prelude::*;
 use lookbook::LookBook;
 
 mod previews;
-use previews::{ButtonPreview, ChipPreview,TabRowPreview, TextButtonPreview, TextFieldPreview};
+use previews::{ButtonPreview, ChipPreview, TabRowPreview, TextButtonPreview, TextFieldPreview};
 
 #[component]
 fn Home(cx: Scope) -> Element {
-    render!(
+    rsx!(
         div { padding: "20px",
             h1 { "Dioxus Material" }
             h5 { "Material You design library for dioxus." }
@@ -22,12 +22,16 @@ fn Home(cx: Scope) -> Element {
 }
 
 fn app(cx: Scope) -> Element {
-    render!(
-        LookBook {
-            home: Home,
-            previews: [ButtonPreview, ChipPreview, TabRowPreview, TextButtonPreview, TextFieldPreview]
-        }
-    )
+    rsx!(LookBook {
+        home: Home,
+        previews: [
+            ButtonPreview,
+            ChipPreview,
+            TabRowPreview,
+            TextButtonPreview,
+            TextFieldPreview
+        ]
+    })
 }
 
 fn main() {

lookbook/src/previews/button.rs

@@ -18,7 +18,10 @@ pub fn ButtonPreview(
     #[lookbook(default = &*use_theme(cx).border_radius_medium)]
     border_radius: &'a str,
 ) -> Element {
-    render!(
-        Button { background_color: background_color, border_radius: border_radius, onpress: |_| {}, label }
-    )
+    rsx!(Button {
+        background_color,
+        border_radius,
+        onpress: |_| {},
+        label
+    })
 }

lookbook/src/previews/chip.rs

@@ -13,9 +13,10 @@ pub fn ChipPreview(
     /// Background color of the container (optional).
     #[lookbook(default = false)]
     is_selected: Json<bool>,
-
 ) -> Element {
-    render!(
-        Chip { is_selected: is_selected.0, onclick: |_| {}, label }
-    )
+    rsx!(Chip {
+        is_selected: is_selected.0,
+        onclick: |_| {},
+        label
+    })
 }

lookbook/src/previews/tab_row.rs

@@ -14,15 +14,14 @@ pub fn TabRowPreview<'a>(
     /// Tab elements.
     #[lookbook(default = vec![String::from("Tab A"), String::from("Tab B")])]
     tabs: Json<Vec<String>>,
-) -> Element<'a> {
-    render!(
+) -> Element {
+    rsx!(
         div { width: "500px",
             TabRow {
                 onselect: |_| {},
                 selected: selected.0,
-                tabs: cx
-                    .bump()
-                    .alloc(tabs.0.iter().map(|label| render!(Tab { "{label}" })).collect::<Vec<_>>())
+                tabs: cx.bump()
+                    .alloc(tabs.0.iter().map(|label| rsx!(Tab { "{label}" })).collect::<Vec<_>>())
             }
         }
     )

lookbook/src/previews/text_button.rs

@@ -18,7 +18,10 @@ pub fn TextButtonPreview(
     #[lookbook(default = &*use_theme(cx).border_radius_medium)]
     border_radius: &'a str,
 ) -> Element {
-    render!(
-        TextButton { color: color, border_radius: border_radius, onpress: |_| {}, label }
-    )
+    rsx!(TextButton {
+        color,
+        border_radius,
+        onpress: |_| {},
+        label
+    })
 }

lookbook/src/previews/text_field.rs

@@ -9,14 +9,12 @@ pub fn TextFieldPreview<'a>(
     /// Label for the text field.
     #[lookbook(default = "Label")]
     label: &'a str,
-) -> Element<'a> {
+) -> Element {
     let value = use_state(cx, || String::from("Text Field"));
 
-    render!(
-        TextField {
-            label: label,
-            value: value,
-            onchange: move |event: FormEvent| value.set(event.data.value.clone())
-        }
-    )
+    rsx!(TextField {
+        label,
+        value,
+        onchange: move |event: FormEvent| value.set(event.data.value.clone())
+    })
 }

src/button.rs

@@ -16,36 +16,36 @@ use dioxus::prelude::*;
 /// use dioxus_material::{Button, Theme};
 ///
 /// fn app(cx: Scope) -> Element {
-///    render!(Theme {
+///    rsx!(Theme {
 ///         Button { onpress: |_| log::info!("clicked!"), "Click me!" } }
 ///    )
 /// }
 /// ```
 #[component]
-pub fn Button<'a>(
-    cx: Scope<'a>,
-
+pub fn Button(
     /// Handler for button press events.
-    onpress: EventHandler<'a, Event<MouseData>>,
+    onpress: EventHandler<Event<MouseData>>,
 
     /// Label child element.
-    children: Element<'a>,
+    children: Element,
 
     /// Background color of the container (optional).
-    background_color: Option<&'a str>,
+    background_color: Option<String>,
 
     /// Border radius of the container (optional).
-    border_radius: Option<&'a str>,
+    border_radius: Option<String>,
 
     /// Height of the container (optional).
-    height: Option<&'a str>,
-) -> Element<'a> {
-    let theme = use_theme(cx);
-    let background_color = background_color.unwrap_or(&theme.primary_color);
-    let border_radius = border_radius.unwrap_or(&theme.border_radius_medium);
-    let height = height.unwrap_or("50px");
+    height: Option<String>,
+) -> Element {
+    let theme = use_theme();
+    let background_color = background_color.as_deref().unwrap_or(&theme.primary_color);
+    let border_radius = border_radius
+        .as_deref()
+        .unwrap_or(&theme.border_radius_medium);
+    let height = height.as_deref().unwrap_or("50px");
 
-    render!(
+    rsx!(
         div {
             display: "inline-block",
             position: "relative",
@@ -64,38 +64,38 @@ pub fn Button<'a>(
                     font_family: "sans-serif",
                     user_select: "none",
                     webkit_user_select: "none",
-                    children
+                    {children}
                 }
             }
         }
     )
 }
 
 #[component]
-pub fn TextButton<'a>(
-    cx: Scope<'a>,
-
+pub fn TextButton(
     /// Handler for button press events.
-    onpress: EventHandler<'a, Event<MouseData>>,
+    onpress: EventHandler<Event<MouseData>>,
 
     /// Label child element.
-    children: Element<'a>,
+    children: Element,
 
     /// Border radiusof the container (optional).
-    border_radius: Option<&'a str>,
+    border_radius: Option<String>,
 
     /// Text color (optional).
-    color: Option<&'a str>,
+    color: Option<String>,
 
     /// Height of the container (optional).
-    height: Option<&'a str>,
-) -> Element<'a> {
-    let theme = use_theme(cx);
-    let color = color.unwrap_or(&theme.primary_color);
-    let border_radius = border_radius.unwrap_or(&theme.border_radius_medium);
-    let height = height.unwrap_or("40px");
+    height: Option<String>,
+) -> Element {
+    let theme = use_theme();
+    let color = color.as_deref().unwrap_or(&theme.primary_color);
+    let border_radius = border_radius
+        .as_deref()
+        .unwrap_or(&theme.border_radius_medium);
+    let height = height.as_deref().unwrap_or("40px");
 
-    render!(
+    rsx!(
         div {
             display: "inline-block",
             position: "relative",
@@ -114,7 +114,7 @@ pub fn TextButton<'a>(
                     font_family: "sans-serif",
                     user_select: "none",
                     webkit_user_select: "none",
-                    children
+                    {children}
                 }
             }
         }

src/chip.rs

@@ -17,7 +17,7 @@ use dioxus::prelude::*;
 /// use dioxus_material::{Chip, Theme, IconFont};
 ///
 /// fn app(cx: Scope) -> Element {
-///     render!(Theme {
+///     rsx!(Theme {
 ///         IconFont {}
 ///         div { display: "flex", gap: "10px",
 ///             Chip { onclick: |_| {}, "Asset chip" }
@@ -27,14 +27,13 @@ use dioxus::prelude::*;
 /// }
 /// ```
 #[component]
-pub fn Chip<'a>(
-    cx: Scope,
-    children: Element<'a>,
+pub fn Chip(
+    children: Element,
     is_selected: Option<bool>,
-    onclick: EventHandler<'a, Event<MouseData>>,
-) -> Element<'a> {
-    let theme = use_theme(cx);
-    let (border_color, background) = if *is_selected == Some(true) {
+    onclick: EventHandler<Event<MouseData>>,
+) -> Element {
+    let theme = use_theme();
+    let (border_color, background) = if is_selected == Some(true) {
         (
             &*theme.secondary_container_color,
             &*theme.secondary_container_color,
@@ -43,7 +42,7 @@ pub fn Chip<'a>(
         ("#79747E", "none")
     };
 
-    render!(
+    rsx!(
         div {
             display: "inline-flex",
             flex_direction: "row",
@@ -55,16 +54,17 @@ pub fn Chip<'a>(
             font_size: "14px",
             font_weight: 500,
             border: "1px solid {border_color}",
-            background: background,
-            Ripple { onclick: |event| onclick.call(event),
-                div { display: "inline-flex", flex_direction: "row", align_items: "center",
-                    if *is_selected == Some(true) {
-                        render!(Icon { kind: IconKind::Check })
-                    } else {
-                        None
+            background,
+            Ripple { onclick: move |event| onclick.call(event),
+                div {
+                    display: "inline-flex",
+                    flex_direction: "row",
+                    align_items: "center",
+                    if is_selected == Some(true) {
+                        Icon { kind: IconKind::Check }
                     }
 
-                    div { padding: "0 14px", children }
+                    div { padding: "0 14px", {children} }
                 }
             }
         }

src/dialog.rs

@@ -10,20 +10,20 @@ use dioxus::prelude::*;
 /// use dioxus_material::{Dialog, Theme};
 ///
 /// fn app(cx: Scope) -> Element {
-///     render!(
+///     rsx!(
 ///         Theme {
 ///             Dialog { is_visible: true, h1 { "Dialog" } }
 ///         }
 ///     )
 /// }
 /// ```
 #[component]
-pub fn Dialog<'a>(cx: Scope<'a>, children: Element<'a>, is_visible: bool) -> Element<'a> {
-    let theme = use_theme(cx);
+pub fn Dialog(children: Element, is_visible: bool) -> Element {
+    let theme = use_theme();
 
-    render!(
+    rsx!(
         div {
-            display: if *is_visible { "block" } else { "none" },
+            display: if is_visible { "block" } else { "none" },
             position: "fixed",
             top: 0,
             left: 0,
@@ -37,7 +37,7 @@ pub fn Dialog<'a>(cx: Scope<'a>, children: Element<'a>, is_visible: bool) -> Ele
                 transform: "translate(-50%, -50%)",
                 border_radius: "{theme.border_radius_medium}",
                 background: "#fff",
-                children
+                {children}
             }
         }
     )