feat: Dioxus 0.6 support (#810)

* feat: Dioxus 0.6 support

* chore: Clean up the rest of rsx!()

* chore: Update SDK and clean up

* fix: Update test

* chore: Fix image element usage

* chore: clean up and fixes

* fix: Update the Text Editors example

* chore: clean up

* chore: Remove hotreload

* fix: Return empty vnodes instead of None

* fix:VNode::empty()

* fix: comma

* fix: missing VNode::empty()

* feat: 0.6 support

* update definitions

* chore: Fix autocompletion

* resolve conflicts

* chore: Fix memory leak of event handlers in the dioxus event macro definition as provided by @ealmloff

* chore: Hide elements events autocompletion modules in doc

* docs: Fix links

* docs: Replace Option::None with Ok(VNode::placeholder())

* clean up

* chore: Dioxus v0.6.2

Cargo.toml

@@ -18,13 +18,14 @@ disable-zoom-shortcuts = ["freya/disable-zoom-shortcuts"]
 docs = ["freya/docs"]
 
 [patch.crates-io]
-# dioxus = { git = "https://github.com/DioxusLabs/dioxus", rev = "7beacdf9c76ae5412d3c2bcd55f7c5d87f486a0f" }
-# dioxus-rsx = { git = "https://github.com/DioxusLabs/dioxus", rev = "7beacdf9c76ae5412d3c2bcd55f7c5d87f486a0f" }
-# dioxus-core-macro = { git = "https://github.com/DioxusLabs/dioxus", rev = "7beacdf9c76ae5412d3c2bcd55f7c5d87f486a0f" }
-# dioxus-hooks = { git = "https://github.com/DioxusLabs/dioxus", rev = "7beacdf9c76ae5412d3c2bcd55f7c5d87f486a0f" }
-# dioxus-signals = { git = "https://github.com/DioxusLabs/dioxus", rev = "7beacdf9c76ae5412d3c2bcd55f7c5d87f486a0f" }
-# dioxus-core = { git = "https://github.com/DioxusLabs/dioxus", rev = "7beacdf9c76ae5412d3c2bcd55f7c5d87f486a0f" }
-# dioxus-router = { git = "https://github.com/DioxusLabs/dioxus", rev = "7beacdf9c76ae5412d3c2bcd55f7c5d87f486a0f" }
+# dioxus = { git = "https://github.com/DioxusLabs/dioxus", rev = "640a3e00af272bfb3464f86ac3d175eaa80af182" }
+# dioxus-rsx = { git = "https://github.com/DioxusLabs/dioxus", rev = "640a3e00af272bfb3464f86ac3d175eaa80af182" }
+# dioxus-core-macro = { git = "https://github.com/DioxusLabs/dioxus", rev = "640a3e00af272bfb3464f86ac3d175eaa80af182" }
+# dioxus-hooks = { git = "https://github.com/DioxusLabs/dioxus", rev = "640a3e00af272bfb3464f86ac3d175eaa80af182" }
+# dioxus-signals = { git = "https://github.com/DioxusLabs/dioxus", rev = "640a3e00af272bfb3464f86ac3d175eaa80af182" }
+# dioxus-core = { git = "https://github.com/DioxusLabs/dioxus", rev = "640a3e00af272bfb3464f86ac3d175eaa80af182" }
+# dioxus-router = { git = "https://github.com/DioxusLabs/dioxus", rev = "640a3e00af272bfb3464f86ac3d175eaa80af182" }
+# generational-box  = { git = "https://github.com/DioxusLabs/dioxus", rev = "640a3e00af272bfb3464f86ac3d175eaa80af182" }
 
 [workspace.dependencies]
 freya = { path = "crates/freya", version = "0.3.0-rc.0" }
@@ -43,14 +44,16 @@ torin = { path = "crates/torin", version = "0.3.0-rc.0" }
 freya-native-core-macro = { path = "crates/native-core-macro", version = "0.3.0-rc.0" }
 freya-native-core = { path = "crates/native-core", version = "0.3.0-rc.0" }
 
-dioxus = { version = "0.5", default-features = false, features = ["macro", "signals", "hooks"]}
-dioxus-rsx = { version = "0.5" }
-dioxus-core-macro = { version = "0.5" }
-dioxus-hooks = { version = "0.5" }
-dioxus-signals = { version = "0.5" }
-dioxus-core = { version = "0.5" }
-dioxus-router = { version = "0.5", default-features = false }
-dioxus-clipboard = "0.1"
+dioxus = { version = "0.6.2", default-features = false, features = ["macro", "signals", "hooks"] }
+dioxus-rsx = { version = "0.6.2" }
+dioxus-core-macro = { version = "0.6.2" }
+dioxus-hooks = { version = "0.6.2" }
+dioxus-signals = { version = "0.6.2" }
+dioxus-core = { version = "0.6.2" }
+dioxus-router = { version = "0.6.2", default-features = false }
+generational-box = { version = "0.6.2" }
+
+dioxus-clipboard = "0.2.0"
 dioxus-i18n = "0.3"
 
 skia-safe = { version = "0.80.0", features = ["gl", "textlayout", "svg"] }
@@ -89,7 +92,7 @@ rand = "0.8.5"
 dioxus-router = { workspace = true }
 itertools = "0.13.0"
 home = "0.5.9"
-dioxus-query = "0.5.1"
+dioxus-query = "0.6.0"
 gilrs = "0.10.8"
 gl = { workspace = true }
 tree-sitter-highlight = "0.23.0"

crates/components/src/accordion.rs

@@ -1,6 +1,6 @@
 use dioxus::prelude::*;
 use freya_elements::{
-    elements as dioxus_elements,
+    self as dioxus_elements,
     events::MouseEvent,
 };
 use freya_hooks::{

crates/components/src/animated_position.rs

@@ -1,7 +1,7 @@
 use std::time::Duration;
 
 use dioxus::prelude::*;
-use freya_elements::elements as dioxus_elements;
+use freya_elements as dioxus_elements;
 use freya_hooks::{
     use_animation_with_dependencies,
     use_node_signal_with_prev,

crates/components/src/body.rs

@@ -1,5 +1,5 @@
 use dioxus::prelude::*;
-use freya_elements::elements as dioxus_elements;
+use freya_elements as dioxus_elements;
 use freya_hooks::{
     use_applied_theme,
     BodyTheme,

crates/components/src/button.rs

@@ -1,6 +1,6 @@
 use dioxus::prelude::*;
 use freya_elements::{
-    elements as dioxus_elements,
+    self as dioxus_elements,
     events::{
         KeyboardEvent,
         PointerEvent,

crates/components/src/canvas.rs

@@ -1,5 +1,5 @@
 use dioxus::prelude::*;
-use freya_elements::elements as dioxus_elements;
+use freya_elements as dioxus_elements;
 use freya_hooks::{
     use_applied_theme,
     CanvasTheme,

crates/components/src/checkbox.rs

@@ -1,6 +1,6 @@
 use dioxus::prelude::*;
 use freya_elements::{
-    elements as dioxus_elements,
+    self as dioxus_elements,
     events::KeyboardEvent,
 };
 use freya_hooks::{
@@ -42,7 +42,7 @@ use crate::TickIcon;
 ///             leading: rsx!(
 ///                 Checkbox {
 ///                     selected: selected.read().contains(&Choice::First),
-///                 },
+///                 }
 ///             ),
 ///             label { "First choice" }
 ///         }
@@ -57,7 +57,7 @@ use crate::TickIcon;
 ///             leading: rsx!(
 ///                 Checkbox {
 ///                     selected: selected.read().contains(&Choice::Second),
-///                 },
+///                 }
 ///             ),
 ///             label { "Second choice" }
 ///         }
@@ -145,7 +145,7 @@ mod test {
                     leading: rsx!(
                         Checkbox {
                             selected: selected.read().contains(&Choice::First),
-                        },
+                        }
                     ),
                     label { "First choice" }
                 }
@@ -160,7 +160,7 @@ mod test {
                     leading: rsx!(
                         Checkbox {
                             selected: selected.read().contains(&Choice::Second),
-                        },
+                        }
                     ),
                     label { "Second choice" }
                 }
@@ -175,7 +175,7 @@ mod test {
                     leading: rsx!(
                         Checkbox {
                             selected: selected.read().contains(&Choice::Third),
-                        },
+                        }
                     ),
                     label { "Third choice" }
                 }

crates/components/src/cursor_area.rs

@@ -1,5 +1,5 @@
 use dioxus::prelude::*;
-use freya_elements::elements as dioxus_elements;
+use freya_elements as dioxus_elements;
 use freya_hooks::use_platform;
 pub use winit::window::CursorIcon;
 

crates/components/src/drag_drop.rs

@@ -1,6 +1,6 @@
 use dioxus::prelude::*;
 use freya_elements::{
-    elements as dioxus_elements,
+    self as dioxus_elements,
     events::MouseEvent,
 };
 use freya_hooks::use_node_signal;
@@ -175,7 +175,7 @@ mod test {
                                 "Move"
                             }
                         }
-                    },
+                    }
                     DropZone {
                         ondrop: move |data: bool| {
                             state.set(data);

crates/components/src/dropdown.rs

@@ -2,7 +2,7 @@ use std::fmt::Display;
 
 use dioxus::prelude::*;
 use freya_elements::{
-    elements as dioxus_elements,
+    self as dioxus_elements,
     events::{
         keyboard::Key,
         KeyboardEvent,

crates/components/src/gesture_area.rs

@@ -5,7 +5,7 @@ use std::{
 
 use dioxus::prelude::*;
 use freya_elements::{
-    elements as dioxus_elements,
+    self as dioxus_elements,
     events::{
         touch::TouchPhase,
         TouchEvent,
@@ -65,7 +65,7 @@ type EventsQueue = VecDeque<(Instant, TouchEvent)>;
 #[allow(non_snake_case)]
 pub fn GestureArea(props: GestureAreaProps) -> Element {
     let event_emitter = use_coroutine(
-        |mut rx: UnboundedReceiver<(Instant, TouchEvent)>| async move {
+        move |mut rx: UnboundedReceiver<(Instant, TouchEvent)>| async move {
             let mut touch_events = VecDeque::<(Instant, TouchEvent)>::new();
 
             while let Some(new_event) = rx.next().await {

crates/components/src/graph.rs

@@ -1,5 +1,5 @@
 use dioxus::prelude::*;
-use freya_elements::elements as dioxus_elements;
+use freya_elements as dioxus_elements;
 use freya_engine::prelude::*;
 use freya_hooks::{
     use_applied_theme,

crates/components/src/hooks/use_form.rs

@@ -53,7 +53,7 @@ impl<Id: Clone + Hash + Eq + Display> UseForm<Id> {
             onpress: Some(EventHandler::new(move |_| {
                 (submit.peek())(&data.read());
             })),
-            children: None,
+            children: Ok(VNode::placeholder()),
             onclick: None,
         }
     }

crates/components/src/icons/arrow.rs

@@ -1,5 +1,5 @@
 use dioxus::prelude::*;
-use freya_elements::elements as dioxus_elements;
+use freya_elements as dioxus_elements;
 use freya_hooks::{
     use_applied_theme,
     IconTheme,

crates/components/src/icons/cross.rs

@@ -1,5 +1,5 @@
 use dioxus::prelude::*;
-use freya_elements::elements as dioxus_elements;
+use freya_elements as dioxus_elements;
 use freya_hooks::{
     use_applied_theme,
     IconTheme,

crates/components/src/icons/tick.rs

@@ -1,5 +1,5 @@
 use dioxus::prelude::*;
-use freya_elements::elements as dioxus_elements;
+use freya_elements as dioxus_elements;
 use freya_hooks::{
     use_applied_theme,
     IconTheme,

crates/components/src/image.rs

@@ -35,7 +35,7 @@ macro_rules! import_image {
             rsx!(image {
                 width,
                 height,
-                image_data
+                image_data,
             })
         }
     };
@@ -50,7 +50,7 @@ macro_rules! import_image {
             rsx!(image {
                 width,
                 height,
-                image_data
+                image_data,
             })
         }
     };

crates/components/src/input.rs

@@ -1,6 +1,6 @@
 use dioxus::prelude::*;
 use freya_elements::{
-    elements as dioxus_elements,
+    self as dioxus_elements,
     events::{
         keyboard::Key,
         KeyboardData,
@@ -275,7 +275,7 @@ mod test {
                 onchange: move |new_value| {
                     value.set(new_value);
                 }
-            },)
+            })
         }
 
         let mut utils = launch_test(input_app);

crates/components/src/link.rs

@@ -3,10 +3,10 @@ use std::borrow::Cow;
 use dioxus::prelude::*;
 use dioxus_router::prelude::{
     navigator,
-    IntoRoutable,
+    NavigationTarget,
 };
 use freya_elements::{
-    elements as dioxus_elements,
+    self as dioxus_elements,
     events::MouseEvent,
 };
 use freya_hooks::{
@@ -20,7 +20,7 @@ use crate::{
     TooltipContainer,
 };
 
-/// Tooltip configuration for the [`Link`] component.
+/// Tooltip configuration for the [`Link()`] component.
 #[derive(Clone, PartialEq)]
 pub enum LinkTooltip {
     /// No tooltip at all.
@@ -34,7 +34,7 @@ pub enum LinkTooltip {
     Custom(String),
 }
 
-/// Similar to [`Link`](dioxus_router::components::Link), but you can use it in Freya.
+/// Similar to [`Link`](dioxus_router::components::Link()), but you can use it in Freya.
 /// Both internal routes (dioxus-router) and external links are supported. When using internal routes
 /// make sure the Link is descendant of a [`Router`](dioxus_router::components::Router) component.
 ///
@@ -49,7 +49,7 @@ pub enum LinkTooltip {
 /// ```rust
 /// # use dioxus::prelude::*;
 /// # use dioxus_router::prelude::*;
-/// # use freya_elements::elements as dioxus_elements;
+/// # use freya_elements as dioxus_elements;
 /// # use freya_components::Link;
 /// # #[derive(Routable, Clone)]
 /// # #[rustfmt::skip]
@@ -77,7 +77,7 @@ pub enum LinkTooltip {
 ///
 /// ```rust
 /// # use dioxus::prelude::*;
-/// # use freya_elements::elements as dioxus_elements;
+/// # use freya_elements as dioxus_elements;
 /// # use freya_components::Link;
 /// # fn link_example_good() -> Element {
 /// rsx! {
@@ -96,7 +96,7 @@ pub fn Link(
     theme: Option<LinkThemeWith>,
     /// The route or external URL string to navigate to.
     #[props(into)]
-    to: IntoRoutable,
+    to: NavigationTarget,
     /// Inner children for the Link.
     children: Element,
     /// This event will be fired if opening an external link fails.
@@ -112,7 +112,7 @@ pub fn Link(
     let theme = use_applied_theme!(&theme, link);
     let mut is_hovering = use_signal(|| false);
 
-    let url = if let IntoRoutable::FromStr(ref url) = to {
+    let url = if let NavigationTarget::External(ref url) = to {
         Some(url.clone())
     } else {
         None
@@ -144,7 +144,9 @@ pub fn Link(
 
                 // TODO(marc2332): Log unhandled errors
             } else {
+                println!("111");
                 let router = navigator();
+                println!("222");
                 router.push(to.clone());
             }
         }
@@ -179,7 +181,7 @@ pub fn Link(
                     Tooltip {
                         text: tooltip
                     }
-                )
+                ),
                 {link}
             }
         )

crates/components/src/loader.rs

@@ -1,5 +1,5 @@
 use dioxus::prelude::*;
-use freya_elements::elements as dioxus_elements;
+use freya_elements as dioxus_elements;
 use freya_hooks::{
     use_animation,
     use_applied_theme,

crates/components/src/menu.rs

@@ -1,6 +1,6 @@
 use dioxus::prelude::*;
 use freya_elements::{
-    elements as dioxus_elements,
+    self as dioxus_elements,
     events::MouseEvent,
 };
 use freya_hooks::{
@@ -237,7 +237,7 @@ pub fn SubMenu(
                 close_menus_until(&mut menus, parent_menu_id);
                 push_menu(&mut menus, submenu_id);
             },
-            {children},
+            {children}
             if show_submenu {
                 rect {
                     position_top: "-12",
@@ -275,7 +275,7 @@ pub fn MenuButton(
                 if let Some(onpress) = &onpress {
                     onpress.call(e)
                 }
-            }
+            },
             {children}
         }
     )
@@ -323,7 +323,7 @@ mod test {
                     Button {
                         onpress: move |_| show_menu.toggle(),
                         label { "Open Menu" }
-                    },
+                    }
                     if *show_menu.read() {
                         Menu {
                             onclose: move |_| show_menu.set(false),