Merge branch 'feat/updated-dioxus' into feat/event-bubbling

Cargo.toml

@@ -26,16 +26,16 @@ freya-testing = { path = "crates/testing", version = "0.1" }
 freya-engine = { path = "crates/engine", version = "0.1" }
 torin = { path = "crates/torin", version = "0.1" }
 
-dioxus = { git = "https://github.com/DioxusLabs/dioxus", rev = "c172914b21211a3196c86ebe75a7b63b7a6a23e0", default-features = false, features = ["macro", "signals", "hooks", "hot-reload", "html"]}
-dioxus-native-core-macro = { git = "https://github.com/DioxusLabs/dioxus", rev = "c172914b21211a3196c86ebe75a7b63b7a6a23e0" }
-dioxus-rsx = { git = "https://github.com/DioxusLabs/dioxus", rev = "c172914b21211a3196c86ebe75a7b63b7a6a23e0", features = ["hot_reload"] }
-dioxus-native-core = { git = "https://github.com/DioxusLabs/dioxus", rev = "c172914b21211a3196c86ebe75a7b63b7a6a23e0", features = ["dioxus"] }
-dioxus-core-macro = { git = "https://github.com/DioxusLabs/dioxus", rev = "c172914b21211a3196c86ebe75a7b63b7a6a23e0" }
-dioxus-hooks = { git = "https://github.com/DioxusLabs/dioxus", rev = "c172914b21211a3196c86ebe75a7b63b7a6a23e0" }
-dioxus-signals = { git = "https://github.com/DioxusLabs/dioxus", rev = "c172914b21211a3196c86ebe75a7b63b7a6a23e0" }
-dioxus-core = { git = "https://github.com/DioxusLabs/dioxus", rev = "c172914b21211a3196c86ebe75a7b63b7a6a23e0" }
-dioxus-hot-reload = { git = "https://github.com/DioxusLabs/dioxus", rev = "c172914b21211a3196c86ebe75a7b63b7a6a23e0", features = ["file_watcher"], default-features = false }
-dioxus-router = { git = "https://github.com/DioxusLabs/dioxus", rev = "c172914b21211a3196c86ebe75a7b63b7a6a23e0", default-features = false }
+dioxus = { git = "https://github.com/DioxusLabs/dioxus", rev = "53380c9956c7dda54d9251d3bc48eaa0ec4e89be", default-features = false, features = ["macro", "signals", "hooks", "hot-reload", "html"]}
+dioxus-native-core-macro = { git = "https://github.com/DioxusLabs/dioxus", rev = "53380c9956c7dda54d9251d3bc48eaa0ec4e89be" }
+dioxus-rsx = { git = "https://github.com/DioxusLabs/dioxus", rev = "53380c9956c7dda54d9251d3bc48eaa0ec4e89be", features = ["hot_reload"] }
+dioxus-native-core = { git = "https://github.com/DioxusLabs/dioxus", rev = "53380c9956c7dda54d9251d3bc48eaa0ec4e89be", features = ["dioxus"] }
+dioxus-core-macro = { git = "https://github.com/DioxusLabs/dioxus", rev = "53380c9956c7dda54d9251d3bc48eaa0ec4e89be" }
+dioxus-hooks = { git = "https://github.com/DioxusLabs/dioxus", rev = "53380c9956c7dda54d9251d3bc48eaa0ec4e89be" }
+dioxus-signals = { git = "https://github.com/DioxusLabs/dioxus", rev = "53380c9956c7dda54d9251d3bc48eaa0ec4e89be" }
+dioxus-core = { git = "https://github.com/DioxusLabs/dioxus", rev = "53380c9956c7dda54d9251d3bc48eaa0ec4e89be" }
+dioxus-hot-reload = { git = "https://github.com/DioxusLabs/dioxus", rev = "53380c9956c7dda54d9251d3bc48eaa0ec4e89be", features = ["file_watcher"], default-features = false }
+dioxus-router = { git = "https://github.com/DioxusLabs/dioxus", rev = "53380c9956c7dda54d9251d3bc48eaa0ec4e89be", default-features = false }
 
 skia-safe = { version = "0.67.0", features = ["gl", "textlayout", "svg"] }
 
@@ -69,7 +69,7 @@ freya-core = { workspace = true }
 reqwest = { version = "0.11.22", features = ["json"] }
 serde = "1.0.189"
 tracing-subscriber = "0.3.17"
-dioxus-std = { version = "0.4", features = ["i18n"] }
+dioxus-std = { git = "https://github.com/DioxusLabs/dioxus-std", rev = "137b4149dc86a648119eef8f331e3a682c2c6b62", features = ["i18n"] }
 rand = "0.8.5"
 dioxus-router = { workspace = true }
 itertools = "0.11.0"

README.md

@@ -21,7 +21,7 @@
 
 ```rust, no_run
 fn app() -> Element {
-    let mut count = use_state(cx, || 0);
+    let mut count = use_signal(|| 0);
 
     rsx!(
         rect {

book/src/guides/animating.md

@@ -83,7 +83,7 @@ fn app() -> Element {
                 height: "100%",
                 width: "200",
                 background: "{background}",
-                onclick: onclick,
+                onclick,
             }
         }
     )

book/src/guides/theming.md

@@ -81,7 +81,7 @@ fn Component() -> Element {
 
     rsx!(
         Button {
-            onclick: onclick,
+            onclick,
             label {
                 "Use Light theme"
             }

crates/components/Cargo.toml

@@ -28,6 +28,7 @@ torin = { workspace = true }
 
 dioxus = { workspace = true }
 dioxus-router = { workspace = true }
+futures = { workspace = true }
 
 winit = { workspace = true }
 tokio = { workspace = true }

crates/components/src/accordion.rs

@@ -81,7 +81,7 @@ pub fn Accordion(props: AccordionProps) -> Element {
         open.with_mut(|o| *o = !*o);
     };
 
-    use_on_destroy({
+    use_drop({
         to_owned![status, platform];
         move || {
             if *status.read() == AccordionStatus::Hovering {
@@ -105,8 +105,8 @@ pub fn Accordion(props: AccordionProps) -> Element {
 
     rsx!(
         rect {
-            onmouseenter: onmouseenter,
-            onmouseleave: onmouseleave,
+            onmouseenter,
+            onmouseleave,
             overflow: "clip",
             color: "{color}",
             padding: "10",
@@ -115,7 +115,7 @@ pub fn Accordion(props: AccordionProps) -> Element {
             width: "100%",
             height: "auto",
             background: "{background}",
-            onclick: onclick,
+            onclick,
             border: "1 solid {border_fill}",
             {&props.summary}
             rect {

crates/components/src/button.rs

@@ -84,7 +84,7 @@ pub fn Button(props: ButtonProps) -> Element {
         }
     };
 
-    use_on_destroy({
+    use_drop({
         to_owned![status, platform];
         move || {
             if *status.read() == ButtonStatus::Hovering {
@@ -129,11 +129,11 @@ pub fn Button(props: ButtonProps) -> Element {
 
     rsx!(
         rect {
-            onclick: onclick,
-            onmouseenter: onmouseenter,
-            onmouseleave: onmouseleave,
-            onkeydown: onkeydown,
-            focus_id: focus_id,
+            onclick,
+            onmouseenter,
+            onmouseleave,
+            onkeydown,
+            focus_id,
             width: "{width}",
             height: "{height}",
             padding: "{padding}",

crates/components/src/cursor_area.rs

@@ -57,16 +57,16 @@ pub fn CursorArea(CursorAreaProps { children, icon }: CursorAreaProps) -> Elemen
         }
     };
 
-    use_on_destroy(move || {
+    use_drop(move || {
         if *is_hovering.peek() {
             platform.set_cursor(CursorIcon::default());
         }
     });
 
     rsx!(
         rect {
-            onmouseover: onmouseover,
-            onmouseleave: onmouseleave,
+            onmouseover,
+            onmouseleave,
             {children}
         }
     )

crates/components/src/drag_drop.rs

@@ -99,9 +99,9 @@ pub fn DragZone<T: 'static + Clone>(
         }
         rect {
             reference: node_reference,
-            onglobalclick: onglobalclick,
+            onglobalclick,
             onglobalmouseover: onglobalmouseover,
-            onmousedown: onmousedown,
+            onmousedown,
             {children}
         }
     )
@@ -145,7 +145,7 @@ pub fn DropZone<T: 'static + Clone>(props: DropZoneProps<T>) -> Element {
 
     rsx!(
         rect {
-            onclick: onclick,
+            onclick,
             {props.children}
         }
     )

crates/components/src/dropdown.rs

@@ -73,7 +73,7 @@ where
     };
     let color = theme.font_theme.color;
 
-    use_on_destroy({
+    use_drop({
         to_owned![status, platform];
         move || {
             if *status.peek() == DropdownItemStatus::Hovering {
@@ -115,17 +115,17 @@ where
     rsx!(
         rect {
             color: "{color}",
-            focus_id: focus_id,
+            focus_id,
             role: "button",
             background: "{background}",
             padding: "6 22 6 16",
             corner_radius: "6",
             main_align: "center",
             cross_align: "center",
-            onmouseenter: onmouseenter,
-            onmouseleave: onmouseleave,
-            onclick: onclick,
-            onkeydown: onkeydown,
+            onmouseenter,
+            onmouseleave,
+            onclick,
+            onkeydown,
             {children}
         }
     )
@@ -170,15 +170,16 @@ pub enum DropdownStatus {
 ///     rsx!(
 ///         Dropdown {
 ///             value: selected_dropdown.read().clone(),
-///             values.read().iter().map(|ch| {
-///                 rsx!(
-///                     DropdownItem {
-///                         value: ch.to_string(),
-///                         onclick: move |_| selected_dropdown.set(ch.to_string()),
-///                         label { "{ch}" }
-///                     }
-///                 )
-///             })
+///             for ch in values {
+///                 DropdownItem {
+///                     value: ch.to_string(),
+///                     onclick: {
+///                         to_owned![ch];
+///                         move |_| selected_dropdown.set(ch.clone())
+///                     },
+///                     label { "{ch}" }
+///                 }
+///             }
 ///         }
 ///     )
 /// }
@@ -204,7 +205,7 @@ where
         *selected.write() = value;
     });
 
-    use_on_destroy({
+    use_drop({
         to_owned![status, platform];
         move || {
             if *status.peek() == DropdownStatus::Hovering {
@@ -268,12 +269,12 @@ where
 
     rsx!(
         rect {
-            onmouseenter: onmouseenter,
-            onmouseleave: onmouseleave,
-            onclick: onclick,
-            onkeydown: onkeydown,
+            onmouseenter,
+            onmouseleave,
+            onclick,
+            onkeydown,
             margin: "4",
-            focus_id: focus_id,
+            focus_id,
             background: "{button_background}",
             color: "{font_theme.color}",
             corner_radius: "8",
@@ -299,8 +300,8 @@ where
             rect {
                 height: "0",
                 rect {
-                    onglobalclick: onglobalclick,
-                    onkeydown: onkeydown,
+                    onglobalclick,
+                    onkeydown,
                     layer: "-99",
                     margin: "4",
                     border: "1 solid {border_fill}",

crates/components/src/external_link.rs

@@ -7,21 +7,22 @@ use freya_hooks::{use_applied_theme, ExternalLinkThemeWith};
 use crate::Tooltip;
 
 /// [`ExternalLink`] component properties.
-#[derive(Props)]
-pub struct ExternalLinkProps<'a> {
+#[derive(Props, Clone, PartialEq)]
+pub struct ExternalLinkProps {
     /// Theme override.
     #[props(optional)]
     pub theme: Option<ExternalLinkThemeWith>,
     /// Inner children for the ExternalLink.
-    pub children: Element<'a>,
-    #[props(optional)]
+    pub children: Element,
     /// Handler for the `onerror` event.
-    pub onerror: Option<EventHandler<'a, ()>>,
     #[props(optional)]
-    /// Whether  to show a tooltip with the URL or not.
-    pub show_tooltip: Option<bool>,
+    pub onerror: Option<EventHandler<()>>,
+    /// Whether to show a tooltip with the URL or not.
+    #[props(optional, default = true)]
+    pub show_tooltip: bool,
     /// The ExternalLink destination URL.
-    pub url: &'a str,
+    #[props(into)]
+    pub url: String,
 }
 
 /// `Link` for external locations, e.g websites.
@@ -36,7 +37,7 @@ pub struct ExternalLinkProps<'a> {
 ///
 /// ```no_run
 /// # use freya::prelude::*;
-/// fn app(cx: Scope) -> Element {
+/// fn app() -> Element {
 ///     rsx!(
 ///         ExternalLink {
 ///             url: "https://github.com",
@@ -49,54 +50,54 @@ pub struct ExternalLinkProps<'a> {
 /// ```
 ///
 #[allow(non_snake_case)]
-pub fn ExternalLink<'a>(cx: Scope<'a, ExternalLinkProps<'a>>) -> Element {
-    let theme = use_applied_theme!(cx, &cx.props.theme, external_link);
-    let is_hovering = use_state(cx, || false);
-    let show_tooltip = cx.props.show_tooltip.unwrap_or(true);
+pub fn ExternalLink(props: ExternalLinkProps) -> Element {
+    let theme = use_applied_theme!(&props.theme, external_link);
+    let is_hovering = use_signal(|| false);
 
-    let onmouseover = |_: MouseEvent| {
+    let onmouseover = move |_: MouseEvent| {
         is_hovering.with_mut(|v| *v = true);
     };
 
-    let onmouseleave = |_: MouseEvent| {
+    let onmouseleave = move |_: MouseEvent| {
         is_hovering.with_mut(|v| *v = false);
     };
 
-    let onclick = |_: MouseEvent| {
-        let res = open::that(cx.props.url);
-        if let (Err(_), Some(onerror)) = (res, cx.props.onerror.as_ref()) {
-            onerror.call(());
+    let onclick = {
+        let url = props.url.clone();
+        move |_: MouseEvent| {
+            let res = open::that(url.clone());
+            if let (Err(_), Some(onerror)) = (res, props.onerror.as_ref()) {
+                onerror.call(());
+            }
+            // TODO(marc2332): Log unhandled errors
         }
-        // TODO(marc2332): Log unhandled errors
     };
 
-    let color = if *is_hovering.get() {
+    let color = if *is_hovering.read() {
         theme.highlight_color.as_ref()
     } else {
         "inherit"
     };
 
     rsx!(
         rect {
-            onmouseover: onmouseover,
-            onmouseleave: onmouseleave,
-            onclick: onclick,
+            onmouseover,
+            onmouseleave,
+            onclick,
             color: "{color}",
-            &cx.props.children
+            {props.children}
         }
         rect {
             height: "0",
             width: "0",
             layer: "-999",
             rect {
                 width: "100v",
-                (*is_hovering.get() && show_tooltip).then_some({
-                    rsx!(
-                        Tooltip {
-                            url: cx.props.url
-                        }
-                    )
-                })
+                if *is_hovering.read() && props.show_tooltip {
+                    Tooltip {
+                        url: props.url.clone()
+                    }
+                }
             }
         }
     )