feat: upgrade dioxus

Cargo.toml

@@ -6,19 +6,19 @@ edition = "2021"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-dioxus = { version = "0.3.1" }
-dioxus-web = "0.3.1"
-dioxus-router = "0.3.0"
-fermi = "0.3.0"
+dioxus = { version = "0.4.3" }
+dioxus-web = "0.4.3"
+dioxus-router = "0.4.3"
+fermi = "0.4.3"
 
 js-sys = "0.3.58"
 web-sys = { version = "0.3.58", features = ["Storage"] }
-dioxus-free-icons = { version = "0.6.0", features = ["font-awesome-brands", "font-awesome-solid" ] }
-dioxus-toast = { version = "0.2.0", default-features = false, features = ["web"] }
+dioxus-free-icons = { version = "0.7.0", features = ["font-awesome-brands", "font-awesome-solid" ] }
+dioxus-toast = { version = "0.3.0", default-features = false, features = ["web"] }
 gloo = "0.8.0"
 log = "0.4.6"
 wasm-logger = "0.2.0"
 anyhow = "1.0.57"
 urlencoding = "2.1.0"
 pulldown-cmark = "0.9.1"
-dioxus-use-storage = { git = "https://github.com/oovm/dioxus-hooks" }
+dioxus-local-storage = { git = "https://github.com/mrxiaozhuox/dioxus-local-storage" }

settings.json

@@ -0,0 +1 @@
+{"Lua.diagnostics.globals":["library_dir"],"Lua.workspace.library":["../core/"]}

src/components/footer.rs

@@ -1,11 +1,10 @@
+use crate::hooks::mode::{is_dark, mode};
 use dioxus::prelude::*;
 use dioxus_free_icons::{
     icons::{fa_brands_icons, fa_solid_icons},
     Icon,
 };
-use dioxus_router::Link;
-
-use crate::hooks::mode::{is_dark, mode};
+use dioxus_router::prelude::*;
 
 pub fn Footer(cx: Scope) -> Element {
     log::info!("dark mode: {:?}", is_dark(&cx));

src/hooks/mode.rs

@@ -1,6 +1,5 @@
 use dioxus::core::ScopeState;
-// use crate::hooks::use_storage;
-use dioxus_use_storage::use_local_storage;
+use dioxus_local_storage::use_local_storage;
 
 pub fn is_dark(cx: &ScopeState) -> bool {
     let storage = use_local_storage(cx);
@@ -13,7 +12,7 @@ pub fn is_dark(cx: &ScopeState) -> bool {
     }
 }
 
-pub fn mode(cx: &ScopeState,dark: bool) {
+pub fn mode(cx: &ScopeState, dark: bool) {
     let storage = use_local_storage(cx);
     let state = storage.insert("mode", if dark { "dark" } else { "light" });
     if dark && state {
@@ -24,16 +23,15 @@ pub fn mode(cx: &ScopeState,dark: bool) {
 }
 
 pub fn init_mode_info(cx: &ScopeState) {
-
     let _ = js_sys::eval("document.body.classList.add('dark:bg-gray-600');");
 
     let storage = use_local_storage(cx);
-    cx.use_hook( move || {
+    cx.use_hook(move || {
         let dark = storage.get("mode").unwrap_or("light".to_string()) == "dark";
         if dark {
             let _ = js_sys::eval("document.documentElement.classList.add('dark');");
         } else {
             let _ = js_sys::eval("document.documentElement.classList.remove('dark');");
         }
     });
-}
+}

src/main.rs

@@ -1,18 +1,28 @@
 #![allow(non_snake_case)]
 
 use dioxus::prelude::*;
-use dioxus_router::{Router, Route};
+use dioxus_router::prelude::*;
 use dioxus_toast::{ToastFrame, ToastManager};
 
 mod components;
 mod hooks;
 mod pages;
 
-use fermi::{use_atom_ref, use_init_atom_root};
+use fermi::{use_atom_ref, use_init_atom_root, AtomRef};
 use hooks::mode::init_mode_info;
 use pages::starter::{About, HelloDioxus, SayHi};
 
-static TOAST_MANAGER: fermi::AtomRef<ToastManager> = |_| ToastManager::default();
+static TOAST_MANAGER: AtomRef<ToastManager> = AtomRef(|_| ToastManager::default());
+
+#[derive(Clone, Debug, PartialEq, Routable)]
+enum Route {
+    #[route("/")]
+    HelloDioxus {},
+    #[route("/hi/:name")]
+    SayHi { name: String },
+    #[route("/about")]
+    About {},
+}
 
 fn main() {
     wasm_logger::init(wasm_logger::Config::default());
@@ -21,7 +31,6 @@ fn main() {
 }
 
 fn App(cx: Scope) -> Element {
-
     // init fermi atom root
     use_init_atom_root(&cx);
 
@@ -30,14 +39,14 @@ fn App(cx: Scope) -> Element {
 
     cx.render(rsx! {
         // dioxus toast manager init
-        ToastFrame { manager: use_atom_ref(&cx, TOAST_MANAGER) }
+        ToastFrame { manager: use_atom_ref(&cx, &TOAST_MANAGER) }
         // dioxus router info
-        Router { 
-            Route { to: "/", HelloDioxus {} }
-            Route { to: "/hi/:name", SayHi {} }
-            Route { to: "/about", About {} }
-            // 404 page
-            Route { to: "", pages::_404::NotFound {} }
+        Router::<Route> {
+            // Route { to: "/", HelloDioxus {} }
+            // Route { to: "/hi/:name", SayHi {} }
+            // Route { to: "/about", About {} }
+            // // 404 page
+            // Route { to: "", pages::_404::NotFound {} }
         }
     })
 }

src/pages/starter.rs

@@ -1,6 +1,5 @@
-
 use dioxus::prelude::*;
-use dioxus_router::{use_router, use_route};
+use dioxus_router::prelude::*;
 use dioxus_toast::ToastInfo;
 use fermi::use_atom_ref;
 
@@ -9,10 +8,11 @@ use crate::{
     TOAST_MANAGER,
 };
 
+#[component]
 pub fn HelloDioxus(cx: Scope) -> Element {
     let input_name = use_state(&cx, String::new);
-    let router = use_router(&cx);
-    let toast = use_atom_ref(&cx, TOAST_MANAGER);
+    let router = use_navigator(&cx);
+    let toast = use_atom_ref(&cx, &TOAST_MANAGER);
 
     cx.render(rsx! {
         section { class: "h-screen bg-cover bg-white dark:bg-gray-600",
@@ -38,7 +38,7 @@ pub fn HelloDioxus(cx: Scope) -> Element {
                             onclick: move |_| {
                                 let name = input_name.get();
                                 if !name.is_empty() {
-                                    router.push_route(&format!("/hi/{}", name), None, None);
+                                    router.push(&format!("/hi/{}", name));
                                 } else {
                                     toast.write().popup(ToastInfo::warning("Empty input box", "Dioxus Toast"));
                                 }
@@ -53,10 +53,9 @@ pub fn HelloDioxus(cx: Scope) -> Element {
     })
 }
 
-pub fn SayHi(cx: Scope) -> Element {
-    let route = use_route(&cx);
-    let name = route.segment("name").unwrap();
-    let name = urlencoding::decode(name).expect("UTF-8").to_string();
+#[component]
+pub fn SayHi(cx: Scope, name: String) -> Element {
+    let name = urlencoding::decode(&name).expect("UTF-8").to_string();
     cx.render(rsx! {
         section { class: "h-screen bg-cover bg-white dark:bg-gray-600",
             div { class: "flex h-full w-full items-center justify-center container mx-auto px-8",
@@ -71,6 +70,7 @@ pub fn SayHi(cx: Scope) -> Element {
     })
 }
 
+#[component]
 pub fn About(cx: Scope) -> Element {
     let content = include_str!("../markdown/readme.md");
     cx.render(rsx! {