From b610e4de8367ca2cd91c11642627783c71c8c786 Mon Sep 17 00:00:00 2001 From: YuKun Liu Date: Tue, 12 Dec 2023 14:24:20 -0800 Subject: [PATCH] feat: upgrade dioxus --- Cargo.toml | 14 +++++++------- settings.json | 1 + src/components/footer.rs | 5 ++--- src/hooks/mode.rs | 10 ++++------ src/main.rs | 31 ++++++++++++++++++++----------- src/pages/starter.rs | 18 +++++++++--------- 6 files changed, 43 insertions(+), 36 deletions(-) create mode 100644 settings.json diff --git a/Cargo.toml b/Cargo.toml index f672d72..de0defe 100644 --- a/Cargo.toml +++ b/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" } \ No newline at end of file +dioxus-local-storage = { git = "https://github.com/mrxiaozhuox/dioxus-local-storage" } diff --git a/settings.json b/settings.json new file mode 100644 index 0000000..f5e909d --- /dev/null +++ b/settings.json @@ -0,0 +1 @@ +{"Lua.diagnostics.globals":["library_dir"],"Lua.workspace.library":["../core/"]} \ No newline at end of file diff --git a/src/components/footer.rs b/src/components/footer.rs index d02d8eb..fabda3d 100644 --- a/src/components/footer.rs +++ b/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)); diff --git a/src/hooks/mode.rs b/src/hooks/mode.rs index 3387ca8..a583400 100644 --- a/src/hooks/mode.rs +++ b/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,11 +23,10 @@ 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');"); @@ -36,4 +34,4 @@ pub fn init_mode_info(cx: &ScopeState) { let _ = js_sys::eval("document.documentElement.classList.remove('dark');"); } }); -} \ No newline at end of file +} diff --git a/src/main.rs b/src/main.rs index aea4ff8..70ffd41 100644 --- a/src/main.rs +++ b/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::default(); +static TOAST_MANAGER: AtomRef = 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 { to: "/", HelloDioxus {} } + // Route { to: "/hi/:name", SayHi {} } + // Route { to: "/about", About {} } + // // 404 page + // Route { to: "", pages::_404::NotFound {} } } }) } diff --git a/src/pages/starter.rs b/src/pages/starter.rs index 67cbd98..ee0513f 100644 --- a/src/pages/starter.rs +++ b/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! {