feat: Dioxus v0.4 support

Cargo.toml

@@ -26,15 +26,15 @@ freya-dom = { path = "dom", version = "0.1.0" }
 freya-testing = { path = "testing", version = "0.1.0" }
 torin = { path = "torin", version = "0.1.0" }
 
-dioxus = { git = "https://github.com/DioxusLabs/dioxus", rev="11c9abcf7ce731ccb4a44c52de383c090ab319af" }
-dioxus-native-core-macro = { git = "https://github.com/DioxusLabs/dioxus", rev="11c9abcf7ce731ccb4a44c52de383c090ab319af" }
-dioxus-rsx = { git = "https://github.com/DioxusLabs/dioxus", rev="11c9abcf7ce731ccb4a44c52de383c090ab319af" }
-dioxus-native-core = { git = "https://github.com/DioxusLabs/dioxus", rev="11c9abcf7ce731ccb4a44c52de383c090ab319af", features=["dioxus"] }
-dioxus-core-macro = { git = "https://github.com/DioxusLabs/dioxus", rev="11c9abcf7ce731ccb4a44c52de383c090ab319af" }
-dioxus-hooks = { git = "https://github.com/DioxusLabs/dioxus", rev="11c9abcf7ce731ccb4a44c52de383c090ab319af" }
-dioxus-core = { git = "https://github.com/DioxusLabs/dioxus", rev="11c9abcf7ce731ccb4a44c52de383c090ab319af" }
-dioxus-hot-reload = { git = "https://github.com/DioxusLabs/dioxus", rev="11c9abcf7ce731ccb4a44c52de383c090ab319af" }
-dioxus-router = { git = "https://github.com/DioxusLabs/dioxus", rev="11c9abcf7ce731ccb4a44c52de383c090ab319af" }
+dioxus = { version = "0.4" }
+dioxus-native-core-macro = { version = "0.4" }
+dioxus-rsx = { version = "0.4", features = ["hot_reload"] }
+dioxus-native-core = { version = "0.4", features = ["dioxus"] }
+dioxus-core-macro = { version = "0.4" }
+dioxus-hooks = { version = "0.4" }
+dioxus-core = { version = "0.4" }
+dioxus-hot-reload = { version = "0.4", features = ["file_watcher"] }
+dioxus-router = { version = "0.4" }
 
 gl = "0.14.0"
 glutin = "0.30.6"
@@ -66,7 +66,7 @@ freya-node-state = { workspace = true }
 reqwest = { version = "0.11.13", features = ["json"] }
 serde = "1.0.152"
 tracing-subscriber = "0.2.25"
-dioxus-std = { git = "https://github.com/marc2332/dioxus-std", rev = "4974f9e4e421b9036d9438ef33d4496559a76855", features = ["utils", "i18n"] }
+dioxus-std = { version = "0.4", features = ["utils", "i18n"] }
 rand = "0.8.5"
 
 [profile.release]

README.md

@@ -72,7 +72,7 @@ Add Freya as a dependency via git (it's not published on [crates.io](https://cra
 
 ```toml
 freya = { git = "https://github.com/marc2332/freya" }
-dioxus = { git = "https://github.com/DioxusLabs/dioxus", rev="11c9abcf7ce731ccb4a44c52de383c090ab319af", features = ["macro", "hooks"]}
+dioxus = { version = "0.4", features = ["macro", "hooks"] }
 ```
 
 ### Features ✨

book/src/guides/getting_started.md

@@ -24,7 +24,7 @@ edition = "2021"
 
 [dependencies]
 freya = { git = "https://github.com/marc2332/freya" }
-dioxus = { git = "https://github.com/DioxusLabs/dioxus", rev="11c9abcf7ce731ccb4a44c52de383c090ab319af", features = ["macro", "hooks"]}
+dioxus = { version = "0.4", features = ["macro", "hooks"] }
 ```
 
 ### src/main.rs

components/src/drag_drop.rs

@@ -167,11 +167,11 @@ mod test {
                                 "Move"
                             }
                         }
-                    }
+                    },
                     DropZone {
                         ondrop: move |data: bool| {
                             state.set(data);
-                        }
+                        },
                         rect {
                             height: "50%",
                             width: "100%",

components/src/dropdown.rs

@@ -222,6 +222,7 @@ where
             }
         )
     } else {
+        let selected = selected.read().to_string();
         render!(
             rect {
                 margin: "5",
@@ -237,7 +238,7 @@ where
                 padding: "7",
                 label {
                     align: "center",
-                    "{selected.read()}"
+                    "{selected}"
                 }
                 rect {
                     width: "100%",

devtools/src/hooks/mod.rs

@@ -0,0 +1,3 @@
+mod use_selected_node;
+
+pub use use_selected_node::*;

devtools/src/hooks/use_selected_node.rs

@@ -0,0 +1,13 @@
+use dioxus::prelude::*;
+use dioxus_native_core::NodeId;
+
+use crate::TreeNode;
+
+pub fn use_selected_node(cx: &ScopeState, node_id: &NodeId) -> Option<TreeNode> {
+    let children = use_shared_state::<Vec<TreeNode>>(cx)?;
+    let children = children.read();
+
+    let node = children.iter().find(|node| &node.id == node_id)?;
+
+    Some(node.clone())
+}

devtools/src/lib.rs

@@ -4,7 +4,7 @@ use dioxus_native_core::prelude::{ElementNode, TextNode};
 use dioxus_native_core::real_dom::NodeImmutable;
 use dioxus_native_core::tree::TreeRef;
 use dioxus_native_core::NodeId;
-use dioxus_router::*;
+use dioxus_router::prelude::*;
 use freya_components::*;
 use freya_core::node::{get_node_state, NodeState};
 use freya_dom::prelude::SafeDOM;
@@ -16,6 +16,7 @@ use std::sync::Arc;
 use tokio::sync::Notify;
 use torin::prelude::NodeAreas;
 
+mod hooks;
 mod node;
 mod property;
 mod tab;
@@ -112,8 +113,10 @@ impl PartialEq for DevToolsProps {
 
 #[allow(non_snake_case)]
 pub fn DevTools(cx: Scope<DevToolsProps>) -> Element {
+    use_shared_state_provider(cx, Vec::<TreeNode>::new);
+    use_shared_state_provider::<HoveredNode>(cx, || cx.props.hovered_node.clone());
     use_init_theme(cx, DARK_THEME);
-    let children = use_state(cx, Vec::<TreeNode>::new);
+    let children = use_shared_state::<Vec<TreeNode>>(cx).unwrap();
     let theme = use_theme(cx);
     let theme = theme.read();
 
@@ -171,114 +174,154 @@ pub fn DevTools(cx: Scope<DevToolsProps>) -> Element {
                         }
                     }
                 });
-                children.set(new_children);
+                *children.write() = new_children;
             }
         }
     });
 
-    let selected_node_id = use_state::<Option<NodeId>>(cx, || None);
-
-    let selected_node = children.iter().find(|c| {
-        if let Some(n_id) = selected_node_id.get() {
-            n_id == &c.id
-        } else {
-            false
-        }
-    });
-
     render!(
         rect {
             width: "100%",
             height: "100%",
             color: theme.body.color,
-            Router {
-                initial_url: "freya://freya/elements".to_string(),
-                DevtoolsBar {}
-                Route {
-                    to: "/elements",
-                    NodesTree {
-                        nodes: children,
-                        height: "calc(100% - 35)",
-                        selected_node_id: &None,
-                        onselected: |node: &TreeNode| {
-                            if let Some(hovered_node) = &cx.props.hovered_node {
-                                hovered_node.lock().unwrap().replace(node.id);
-                            }
-                            selected_node_id.set(Some(node.id));
-                        }
-                    }
-                }
-                Route {
-                    to: "/elements/style",
-                    NodesTree {
-                        nodes: children,
-                        height: "calc(50% - 35)",
-                        selected_node_id: selected_node_id.get(),
-                        onselected: |node: &TreeNode| {
-                            if let Some(hovered_node) = &cx.props.hovered_node {
-                                hovered_node.lock().unwrap().replace(node.id);
-                            }
-                            selected_node_id.set(Some(node.id));
-                        }
-                    }
-                    selected_node.map(|selected_node| {
-                        rsx!(
-                            NodeInspectorStyle {
-                                node: selected_node
-                            }
-                        )
-                    })
-                }
-                Route {
-                    to: "/elements/layout",
-                    NodesTree {
-                        nodes: children,
-                        height: "calc(50% - 35)",
-                        selected_node_id: selected_node_id.get(),
-                        onselected: |node: &TreeNode| {
-                            if let Some(hovered_node) = &cx.props.hovered_node {
-                                hovered_node.lock().unwrap().replace(node.id);
-                            }
-                            selected_node_id.set(Some(node.id));
-                        }
-                    }
-                    selected_node.map(|selected_node| {
-                        rsx!(
-                            NodeInspectorLayout {
-                                node: selected_node
-                            }
-                        )
-                    })
-                }
-            }
+            Router::<Route> { }
         }
     )
 }
 
+#[inline_props]
 #[allow(non_snake_case)]
 pub fn DevtoolsBar(cx: Scope) -> Element {
     render!(
         TabsBar {
             TabButton {
-                to: "/elements",
+                to: Route::TreeElementsTab { },
                 label: "Elements"
             }
         }
+        Outlet::<Route> {}
     )
 }
 
 #[allow(non_snake_case)]
-pub fn NodeInspectorBar(cx: Scope) -> Element {
+#[inline_props]
+pub fn NodeInspectorBar(cx: Scope, node_id: NodeId) -> Element {
     render!(
         TabsBar {
             TabButton {
-                to: "/elements/style",
+                to: Route::TreeStyleTab { node_id: node_id.serialize() },
                 label: "Style"
             }
             TabButton {
-                to: "/elements/layout",
+                to: Route::TreeLayoutTab { node_id: node_id.serialize() },
                 label: "Layout"
             }
         }
     )
 }
+
+#[derive(Routable, Clone)]
+#[rustfmt::skip]
+pub enum Route {
+    #[layout(DevtoolsBar)]
+        #[route("/")]
+        TreeElementsTab  {},
+
+        #[route("/elements/:node_id/style")]
+        TreeStyleTab { node_id: String },
+
+        #[route("/elements/:node_id/layout")]
+        TreeLayoutTab { node_id: String },
+    #[end_layout]
+    #[route("/..route")]
+    PageNotFound { },
+}
+
+#[allow(non_snake_case)]
+#[inline_props]
+fn PageNotFound(cx: Scope) -> Element {
+    render!(
+        label {
+            "Page not found."
+        }
+    )
+}
+
+#[allow(non_snake_case)]
+#[inline_props]
+fn TreeElementsTab(cx: Scope) -> Element {
+    let hovered_node = use_shared_state::<HoveredNode>(cx).unwrap();
+
+    render!(NodesTree {
+        height: "calc(100% - 35)",
+        onselected: |node: &TreeNode| {
+            if let Some(hovered_node) = &hovered_node.read().as_ref() {
+                hovered_node.lock().unwrap().replace(node.id);
+            }
+        }
+    })
+}
+
+#[derive(Props, PartialEq)]
+struct TreeTabProps {
+    node_id: String,
+}
+
+#[allow(non_snake_case)]
+fn TreeStyleTab(cx: Scope<TreeTabProps>) -> Element {
+    let hovered_node = use_shared_state::<HoveredNode>(cx).unwrap();
+    let node_id = NodeId::deserialize(&cx.props.node_id);
+
+    render!(
+        NodesTree {
+            height: "calc(50% - 35)",
+            selected_node_id: node_id,
+            onselected: |node: &TreeNode| {
+                if let Some(hovered_node) = &hovered_node.read().as_ref() {
+                    hovered_node.lock().unwrap().replace(node.id);
+                }
+            }
+        }
+        NodeInspectorStyle {
+            node_id: node_id
+        }
+    )
+}
+
+#[allow(non_snake_case)]
+fn TreeLayoutTab(cx: Scope<TreeTabProps>) -> Element {
+    let hovered_node = use_shared_state::<HoveredNode>(cx).unwrap();
+    let node_id = NodeId::deserialize(&cx.props.node_id);
+
+    render!(
+        NodesTree {
+            height: "calc(50% - 35)",
+            selected_node_id: node_id,
+            onselected: |node: &TreeNode| {
+                if let Some(hovered_node) = &hovered_node.read().as_ref() {
+                    hovered_node.lock().unwrap().replace(node.id);
+                }
+            }
+        }
+        NodeInspectorLayout {
+            node_id: node_id
+        }
+    )
+}
+
+pub trait NodeIdSerializer {
+    fn serialize(&self) -> String;
+
+    fn deserialize(node_id: &str) -> Self;
+}
+
+impl NodeIdSerializer for NodeId {
+    fn serialize(&self) -> String {
+        format!("{}-{}", self.index(), self.gen())
+    }
+
+    fn deserialize(node_id: &str) -> Self {
+        let (index, gen) = node_id.split_once('-').unwrap();
+        NodeId::new_from_index_and_gen(index.parse().unwrap(), gen.parse().unwrap())
+    }
+}

devtools/src/node.rs

@@ -8,13 +8,13 @@ use crate::TreeNode;
 #[inline_props]
 pub fn NodeElement<'a>(
     cx: Scope<'a>,
-    node: &'a TreeNode,
+    node: TreeNode,
     is_selected: bool,
     onselected: EventHandler<'a, &'a TreeNode>,
 ) -> Element<'a> {
     let status = use_state(cx, ButtonStatus::default);
 
-    let onmousedown = move |_| onselected.call(node);
+    let onmousedown = move |_| onselected.call(&cx.props.node);
 
     let onmouseover = move |_| {
         if *status.get() != ButtonStatus::Hovering {