feat: Dioxus 0.4.3 (#420)

* feat: Updated Dioxus

* clean up

* tweak

* crash

* updated

* use use_on_destroy

* feat: Support Dioxus 0.4.3

Cargo.toml

@@ -33,7 +33,7 @@ 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-hot-reload = { version = "0.4", features = ["file_watcher", "custom_file_watcher"] }
 dioxus-router = { version = "0.4", default-features = false }
 
 skia-safe = { version = "0.67.0", features = ["gl", "textlayout", "svg"] }

crates/components/src/accordion.rs

@@ -50,7 +50,7 @@ pub fn Accordion<'a>(cx: Scope<'a, AccordionProps<'a>>) -> Element<'a> {
     } = theme.accordion;
 
     // Adapt the accordion if the body size changes
-    use_memo(
+    let _ = use_memo(
         cx,
         &(
             size.area.width(),
@@ -77,7 +77,7 @@ pub fn Accordion<'a>(cx: Scope<'a, AccordionProps<'a>>) -> Element<'a> {
         open.set(!*open.get());
     };
 
-    use_on_unmount(cx, {
+    use_on_destroy(cx, {
         to_owned![status, platform];
         move || {
             if *status.current() == AccordionStatus::Hovering {

crates/components/src/button.rs

@@ -79,7 +79,7 @@ pub fn Button<'a>(cx: Scope<'a, ButtonProps<'a>>) -> Element {
         }
     };
 
-    use_on_unmount(cx, {
+    use_on_destroy(cx, {
         to_owned![status, platform];
         move || {
             if *status.current() == ButtonStatus::Hovering {

crates/components/src/cursor_area.rs

@@ -58,7 +58,7 @@ pub fn CursorArea<'a>(cx: Scope<'a, CursorAreaProps<'a>>) -> Element<'a> {
         }
     };
 
-    use_on_unmount(cx, {
+    use_on_destroy(cx, {
         to_owned![is_hovering];
         move || {
             if *is_hovering.read() {

crates/components/src/dropdown.rs

@@ -60,7 +60,7 @@ where
     };
     let color = theme.dropdown_item.font_theme.color;
 
-    use_on_unmount(cx, {
+    use_on_destroy(cx, {
         to_owned![status, platform];
         move || {
             if *status.current() == DropdownItemStatus::Hovering {
@@ -181,11 +181,11 @@ where
     let focus_id = focus.attribute(cx);
 
     // Update the provided value if the passed value changes
-    use_memo(cx, &cx.props.value, move |value| {
+    let _ = use_memo(cx, &cx.props.value, move |value| {
         *selected.write() = value;
     });
 
-    use_on_unmount(cx, {
+    use_on_destroy(cx, {
         to_owned![status, platform];
         move || {
             if *status.current() == DropdownStatus::Hovering {

crates/components/src/gesture_area.rs

@@ -62,7 +62,7 @@ type EventsQueue = VecDeque<(Instant, TouchEvent)>;
 pub fn GestureArea<'a>(cx: Scope<'a, GestureAreaProps<'a>>) -> Element {
     let touch_events = use_ref::<EventsQueue>(cx, VecDeque::new);
 
-    use_memo(cx, touch_events, move |_| {
+    let _ = use_memo(cx, touch_events, move |_| {
         // Keep the touch events queue under a certain size
         if touch_events.read().len() > MAX_EVENTS_QUEUE {
             touch_events.write_silent().pop_front();

crates/components/src/graph.rs

@@ -45,7 +45,7 @@ pub struct GraphProps {
 pub fn Graph(cx: Scope<GraphProps>) -> Element {
     let platform = use_platform(cx);
 
-    use_memo(cx, (cx.props,), move |_| {
+    let _ = use_memo(cx, (cx.props,), move |_| {
         platform.send(EventMessage::RequestRerender)
     });
 

crates/components/src/input.rs

@@ -105,7 +105,7 @@ pub fn Input<'a>(cx: Scope<'a, InputProps<'a>>) -> Element {
         InputMode::Shown => cx.props.value.clone(),
     };
 
-    use_on_unmount(cx, {
+    use_on_destroy(cx, {
         to_owned![status, platform];
         move || {
             if *status.read() == InputStatus::Hovering {

crates/components/src/scroll_views/virtual_scroll_view.rs

@@ -1,3 +1,5 @@
+#![allow(clippy::type_complexity)]
+
 use dioxus::prelude::*;
 use freya_elements::elements as dioxus_elements;
 use freya_elements::events::{keyboard::Key, KeyboardEvent, MouseEvent, WheelEvent};

crates/components/src/slider.rs

@@ -84,7 +84,7 @@ pub fn Slider<'a>(cx: Scope<'a, SliderProps>) -> Element<'a> {
 
     let progress = (value / 100.0) * cx.props.width + 0.5;
 
-    use_on_unmount(cx, {
+    use_on_destroy(cx, {
         to_owned![status, platform];
         move || {
             if *status.read() == SliderStatus::Hovering {

crates/components/src/switch.rs

@@ -56,7 +56,7 @@ pub fn Switch<'a>(cx: Scope<'a, SwitchProps<'a>>) -> Element<'a> {
     let platform = use_platform(cx);
     let status = use_ref(cx, SwitchStatus::default);
 
-    use_on_unmount(cx, {
+    use_on_destroy(cx, {
         to_owned![status, platform];
         move || {
             if *status.read() == SwitchStatus::Hovering {
@@ -98,7 +98,7 @@ pub fn Switch<'a>(cx: Scope<'a, SwitchProps<'a>>) -> Element<'a> {
         }
     };
 
-    use_memo(cx, &cx.props.enabled, move |enabled| {
+    let _ = use_memo(cx, &cx.props.enabled, move |enabled| {
         if enabled {
             animation.start(Animation::new_sine_in_out(0.0..=25.0, 200));
         } else if animation.value() > 0.0 {

crates/components/src/table.rs

@@ -5,7 +5,7 @@ use freya_elements::events::MouseEvent;
 use freya_hooks::{use_get_theme, FontTheme, TableTheme};
 
 #[allow(non_snake_case)]
-#[inline_props]
+#[component]
 fn TableArrow(cx: Scope, order_direction: OrderDirection) -> Element {
     let theme = use_get_theme(cx);
     let TableTheme { arrow_fill, .. } = theme.table;

crates/devtools/src/lib.rs

@@ -189,7 +189,7 @@ pub fn DevTools(cx: Scope<DevToolsProps>) -> Element {
     )
 }
 
-#[inline_props]
+#[component]
 #[allow(non_snake_case)]
 pub fn DevtoolsBar(cx: Scope) -> Element {
     render!(
@@ -204,7 +204,7 @@ pub fn DevtoolsBar(cx: Scope) -> Element {
 }
 
 #[allow(non_snake_case)]
-#[inline_props]
+#[component]
 pub fn NodeInspectorBar(cx: Scope, node_id: NodeId) -> Element {
     render!(
         TabsBar {
@@ -238,7 +238,7 @@ pub enum Route {
 }
 
 #[allow(non_snake_case)]
-#[inline_props]
+#[component]
 fn PageNotFound(cx: Scope) -> Element {
     render!(
         label {
@@ -248,7 +248,7 @@ fn PageNotFound(cx: Scope) -> Element {
 }
 
 #[allow(non_snake_case)]
-#[inline_props]
+#[component]
 fn TreeElementsTab(cx: Scope) -> Element {
     let hovered_node = use_shared_state::<HoveredNode>(cx).unwrap();
 

crates/devtools/src/node.rs

@@ -5,7 +5,7 @@ use freya_elements::elements as dioxus_elements;
 use crate::TreeNode;
 
 #[allow(non_snake_case)]
-#[inline_props]
+#[component]
 pub fn NodeElement<'a>(
     cx: Scope<'a>,
     node: TreeNode,

crates/devtools/src/property.rs

@@ -4,7 +4,7 @@ use freya_engine::prelude::*;
 use freya_node_state::{Border, Fill, Shadow};
 
 #[allow(non_snake_case)]
-#[inline_props]
+#[component]
 pub fn Property<'a>(cx: Scope<'a>, name: &'a str, value: String) -> Element<'a> {
     render!(
         rect {
@@ -36,7 +36,7 @@ pub fn Property<'a>(cx: Scope<'a>, name: &'a str, value: String) -> Element<'a>
 }
 
 #[allow(non_snake_case)]
-#[inline_props]
+#[component]
 pub fn LinearGradientProperty<'a>(cx: Scope<'a>, name: &'a str, fill: Fill) -> Element<'a> {
     render!(
         rect {
@@ -64,7 +64,7 @@ pub fn LinearGradientProperty<'a>(cx: Scope<'a>, name: &'a str, fill: Fill) -> E
 }
 
 #[allow(non_snake_case)]
-#[inline_props]
+#[component]
 pub fn ColorProperty<'a>(cx: Scope<'a>, name: &'a str, fill: Fill) -> Element<'a> {
     render!(
         rect {
@@ -112,7 +112,7 @@ pub fn ColorProperty<'a>(cx: Scope<'a>, name: &'a str, fill: Fill) -> Element<'a
 }
 
 #[allow(non_snake_case)]
-#[inline_props]
+#[component]
 pub fn ShadowProperty<'a>(cx: Scope<'a>, name: &'a str, shadow: Shadow) -> Element<'a> {
     render!(
         rect {
@@ -168,7 +168,7 @@ pub fn ShadowProperty<'a>(cx: Scope<'a>, name: &'a str, shadow: Shadow) -> Eleme
 }
 
 #[allow(non_snake_case)]
-#[inline_props]
+#[component]
 pub fn BorderProperty<'a>(cx: Scope<'a>, name: &'a str, border: Border) -> Element<'a> {
     render!(
         rect {
@@ -223,7 +223,7 @@ pub fn BorderProperty<'a>(cx: Scope<'a>, name: &'a str, border: Border) -> Eleme
 }
 
 #[allow(non_snake_case)]
-#[inline_props]
+#[component]
 pub fn TextShadowProperty<'a>(
     cx: Scope<'a>,
     name: &'a str,

crates/devtools/src/tabs/layout.rs

@@ -6,7 +6,7 @@ use freya_elements::elements as dioxus_elements;
 use crate::{hooks::use_selected_node, NodeInspectorBar};
 
 #[allow(non_snake_case)]
-#[inline_props]
+#[component]
 pub fn NodeInspectorLayout(cx: Scope, node_id: NodeId) -> Element {
     let node = use_selected_node(cx, &cx.props.node_id);
 

crates/devtools/src/tabs/style.rs

@@ -14,7 +14,7 @@ use crate::{
 };
 
 #[allow(non_snake_case)]
-#[inline_props]
+#[component]
 pub fn NodeInspectorStyle(cx: Scope, node_id: NodeId) -> Element {
     let node = use_selected_node(cx, &cx.props.node_id);
 

crates/devtools/src/tabs/tree.rs

@@ -6,7 +6,7 @@ use freya_components::*;
 use crate::{node::NodeElement, NodeIdSerializer, Route, TreeNode};
 
 #[allow(non_snake_case)]
-#[inline_props]
+#[component]
 pub fn NodesTree<'a>(
     cx: Scope<'a>,
     height: &'a str,

crates/hooks/src/use_accessibility.rs

@@ -11,7 +11,7 @@ pub fn use_init_accessibility(cx: &ScopeState) {
     let focused_id = use_shared_state::<Option<FocusId>>(cx).unwrap();
     let current_focused_id = *focused_id.read();
 
-    use_memo(cx, &(current_focused_id,), move |(focused_id,)| {
+    let _ = use_memo(cx, &(current_focused_id,), move |(focused_id,)| {
         if let Some(focused_id) = focused_id {
             platform
                 .send(EventMessage::FocusAccessibilityNode(focused_id))

crates/hooks/src/use_animation.rs

@@ -135,7 +135,7 @@ mod test {
 
             let progress = animation.value();
 
-            use_memo(cx, (), move |_| {
+            let _ = use_memo(cx, (), move |_| {
                 animation.start(Animation::new_linear(0.0..=100.0, 50));
             });
 
@@ -185,7 +185,7 @@ mod test {
                 }
             };
 
-            use_memo(cx, (), move |_| {
+            let _ = use_memo(cx, (), move |_| {
                 animation.start(Animation::new_linear(10.0..=100.0, 50));
             });
 

crates/hooks/src/use_animation_transition.rs

@@ -285,7 +285,7 @@ where
     let transitions_storage = use_state(cx, || animations_map(transitions));
     let platform = use_platform(cx);
 
-    use_memo(cx, dependencies, {
+    let _ = use_memo(cx, dependencies, {
         let storage_setter = transitions_storage.setter();
         move |v| {
             storage_setter(animations_map(&init(v)));
@@ -328,7 +328,7 @@ mod test {
 
             let progress = animation.get(0).unwrap().as_size();
 
-            use_memo(cx, (), move |_| {
+            let _ = use_memo(cx, (), move |_| {
                 animation.start();
             });
 

crates/testing/tests/test.rs

@@ -24,7 +24,7 @@ async fn with_state() {
     fn stateful_app(cx: Scope) -> Element {
         let state = use_state(cx, || false);
 
-        use_memo(cx, (), |_| {
+        let _ = use_memo(cx, (), |_| {
             state.set(true);
         });
 

examples/canvas.rs

@@ -169,8 +169,9 @@ fn Editor(cx: Scope) -> Element {
     let font_style = if *is_italic.get() { "italic" } else { "normal" };
     let font_weight = if *is_bold.get() { "bold" } else { "normal" };
 
-    use_memo(cx, (), |_| {
+    use_on_create(cx, move || {
         focus_manager.focus();
+        async move {}
     });
 
     let onclick = {

examples/drag_drop.rs

@@ -45,7 +45,7 @@ fn app(cx: Scope) -> Element {
 }
 
 #[allow(non_snake_case)]
-#[inline_props]
+#[component]
 fn Column(
     cx: Scope,
     direction: SwapDirection,

examples/sidebar.rs

@@ -11,7 +11,7 @@ fn main() {
 }
 
 #[allow(non_snake_case)]
-#[inline_props]
+#[component]
 fn Sidebar<'a>(cx: Scope<'a>, children: Element<'a>, sidebar: Element<'a>) -> Element<'a> {
     let theme = use_theme(cx);
     let background = theme.read().body.background;
@@ -49,7 +49,7 @@ fn Sidebar<'a>(cx: Scope<'a>, children: Element<'a>, sidebar: Element<'a>) -> El
 }
 
 #[allow(non_snake_case)]
-#[inline_props]
+#[component]
 fn SidebarItem<'a>(
     cx: Scope<'a>,
     children: Element<'a>,