From 8a78de2e2da5fb74335ee437018ffae1d25a6c72 Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Tue, 29 Aug 2023 09:11:22 +0800
Subject: [PATCH 1/5] feat: upgrade leptos to 0.5.0-beta

---
 Cargo.toml                               |  6 +--
 examples/basic/Cargo.toml                | 16 -------
 examples/basic/Trunk.toml                | 13 -----
 examples/basic/index.html                | 13 -----
 examples/basic/src/app.rs                | 61 ------------------------
 examples/basic/src/assets/css/index.css  | 16 -------
 examples/basic/src/main.rs               |  9 ----
 examples/basic/src/pages/button/mod.rs   | 43 -----------------
 examples/basic/src/pages/checkbox/mod.rs | 14 ------
 examples/basic/src/pages/components.rs   | 52 --------------------
 examples/basic/src/pages/home.rs         | 40 ----------------
 examples/basic/src/pages/image/mod.rs    | 12 -----
 examples/basic/src/pages/input/mod.rs    | 14 ------
 examples/basic/src/pages/menu/mod.rs     | 16 -------
 examples/basic/src/pages/mobile.rs       | 10 ----
 examples/basic/src/pages/mod.rs          | 25 ----------
 examples/basic/src/pages/modal/mod.rs    | 15 ------
 examples/basic/src/pages/nav_bar/mod.rs  | 24 ----------
 examples/basic/src/pages/slider/mod.rs   | 11 -----
 examples/basic/src/pages/tabbar/mod.rs   | 23 ---------
 gh-pages/Cargo.toml                      |  4 +-
 gh-pages/src/app.rs                      | 42 ++++++++--------
 gh-pages/src/components/site_header.rs   |  8 ++--
 gh-pages/src/main.rs                     |  2 +-
 gh-pages/src/pages/button/mod.rs         |  4 +-
 gh-pages/src/pages/checkbox/mod.rs       |  6 +--
 gh-pages/src/pages/components.rs         | 16 +++----
 gh-pages/src/pages/home.rs               | 16 +++----
 gh-pages/src/pages/image/mod.rs          |  6 +--
 gh-pages/src/pages/input/mod.rs          |  8 ++--
 gh-pages/src/pages/menu/mod.rs           |  6 +--
 gh-pages/src/pages/mobile.rs             |  4 +-
 gh-pages/src/pages/modal/mod.rs          |  8 ++--
 gh-pages/src/pages/nav_bar/mod.rs        | 16 +++----
 gh-pages/src/pages/select/mod.rs         |  6 +--
 gh-pages/src/pages/slider/mod.rs         |  6 +--
 gh-pages/src/pages/tabbar/mod.rs         | 10 ++--
 gh-pages/src/pages/tabs/mod.rs           |  6 +--
 gh-pages/src/pages/toast/mod.rs          | 19 ++++----
 src/button/mod.rs                        |  9 ++--
 src/button/theme.rs                      | 10 ++--
 src/card/mod.rs                          | 15 +++---
 src/checkbox/mod.rs                      | 14 ++----
 src/code/mod.rs                          |  6 +--
 src/components/if_comp.rs                | 11 ++---
 src/components/mod.rs                    |  2 +-
 src/components/option_comp.rs            | 11 ++---
 src/icon/mod.rs                          | 25 +++++-----
 src/image/mod.rs                         |  9 ++--
 src/input/mod.rs                         | 11 ++---
 src/input/theme.rs                       | 10 ++--
 src/layout/layout_header.rs              |  5 +-
 src/layout/layout_sider.rs               |  6 +--
 src/layout/mod.rs                        |  7 ++-
 src/menu/menu_item.rs                    |  9 ++--
 src/menu/mod.rs                          | 23 ++++-----
 src/mobile/nav_bar/mod.rs                |  7 ++-
 src/mobile/tabbar/mod.rs                 | 22 ++++-----
 src/mobile/tabbar/tabbar_item.rs         | 11 ++---
 src/mobile/toast/mod.rs                  | 11 +++--
 src/modal/mod.rs                         |  7 ++-
 src/progress/mod.rs                      | 13 ++---
 src/select/mod.rs                        | 23 +++++----
 src/slider/mod.rs                        | 19 ++++----
 src/space/mod.rs                         |  8 ++--
 src/table/mod.rs                         |  6 +--
 src/tabs/mod.rs                          | 41 ++++++++--------
 src/tabs/tab.rs                          |  8 ++--
 src/teleport/mod.rs                      | 11 ++---
 src/theme/common.rs                      |  2 +-
 src/theme/mod.rs                         |  9 ++--
 src/utils/dom.rs                         |  2 +-
 src/utils/mod.rs                         |  2 +-
 src/wave/mod.rs                          | 14 +++---
 74 files changed, 277 insertions(+), 748 deletions(-)
 delete mode 100644 examples/basic/Cargo.toml
 delete mode 100644 examples/basic/Trunk.toml
 delete mode 100644 examples/basic/index.html
 delete mode 100644 examples/basic/src/app.rs
 delete mode 100644 examples/basic/src/assets/css/index.css
 delete mode 100644 examples/basic/src/main.rs
 delete mode 100644 examples/basic/src/pages/button/mod.rs
 delete mode 100644 examples/basic/src/pages/checkbox/mod.rs
 delete mode 100644 examples/basic/src/pages/components.rs
 delete mode 100644 examples/basic/src/pages/home.rs
 delete mode 100644 examples/basic/src/pages/image/mod.rs
 delete mode 100644 examples/basic/src/pages/input/mod.rs
 delete mode 100644 examples/basic/src/pages/menu/mod.rs
 delete mode 100644 examples/basic/src/pages/mobile.rs
 delete mode 100644 examples/basic/src/pages/mod.rs
 delete mode 100644 examples/basic/src/pages/modal/mod.rs
 delete mode 100644 examples/basic/src/pages/nav_bar/mod.rs
 delete mode 100644 examples/basic/src/pages/slider/mod.rs
 delete mode 100644 examples/basic/src/pages/tabbar/mod.rs

diff --git a/Cargo.toml b/Cargo.toml
index c7ad785..5d939a4 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -13,10 +13,10 @@ license = "MIT"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-leptos = { version = "0.4.8", features = ["csr"] }
+leptos = { version = "0.5.0-beta", features = ["csr"] }
 stylers = { git = "https://github.com/abishekatp/stylers", rev = "4bfd2df" }
 web-sys = { version = "0.3.62", features = ["DomRect"] }
-leptos_dom = { version = "0.4.0" }
+leptos_dom = { version = "0.5.0-beta" }
 wasm-bindgen = "0.2.85"
 icondata = { version = "0.0.7", features = [
     "AiCloseOutlined",
@@ -25,4 +25,4 @@ icondata = { version = "0.0.7", features = [
 ] }
 
 [workspace]
-members = ["examples/basic", "gh-pages"]
+members = ["gh-pages"]
diff --git a/examples/basic/Cargo.toml b/examples/basic/Cargo.toml
deleted file mode 100644
index 003b630..0000000
--- a/examples/basic/Cargo.toml
+++ /dev/null
@@ -1,16 +0,0 @@
-[package]
-name = "basic"
-version = "0.1.0"
-edition = "2021"
-
-# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
-
-[dependencies]
-leptos = { version = "0.4.0", features = ["csr"] }
-melt-ui = { path = "../../" }
-icondata = { version = "0.0.7", features = [
-    "AiCloseOutlined",
-    "AiCheckOutlined",
-] }
-leptos_router = { version = "0.4.0", features = ["csr"] }
-regex = "1.8.2"
diff --git a/examples/basic/Trunk.toml b/examples/basic/Trunk.toml
deleted file mode 100644
index 7cf59cc..0000000
--- a/examples/basic/Trunk.toml
+++ /dev/null
@@ -1,13 +0,0 @@
-[build]
-target = "index.html"
-
-[watch]
-watch = [
-    "../../src",
-    "./src"
-]
-
-[serve]
-address = "127.0.0.1"
-port = 6421
-open = false
diff --git a/examples/basic/index.html b/examples/basic/index.html
deleted file mode 100644
index 7dd8246..0000000
--- a/examples/basic/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-    <link data-trunk rel="css" href="./src/assets/css/index.css" />
-</head>
-<body>
-    
-</body>
-</html>
\ No newline at end of file
diff --git a/examples/basic/src/app.rs b/examples/basic/src/app.rs
deleted file mode 100644
index ce29b04..0000000
--- a/examples/basic/src/app.rs
+++ /dev/null
@@ -1,61 +0,0 @@
-use crate::pages::*;
-use leptos::*;
-use leptos_router::*;
-
-#[component]
-pub fn App(cx: Scope) -> impl IntoView {
-    view! { cx,
-        <Router>
-            <Routes>
-                <Route path="/" view=move |cx| view! {cx,
-                    <Home />
-                } />
-                <Route path="/menu" view=move |cx| view! {cx,
-                    <MenuPage />
-                } />
-                <Route path="/slider" view=move |cx| view! {cx,
-                    <SliderPage />
-                } />
-                <Route path="/components" view=move |cx| view! {cx,
-                    <ComponentsPage />
-                } >
-                    <Route path="/menu" view=move |cx| view! {cx,
-                        <MenuPage />
-                    } />
-                    <Route path="/slider" view=move |cx| view! {cx,
-                        <SliderPage />
-                    } />
-                    <Route path="/tabbar" view=move |cx| view! {cx,
-                        <MobilePage path="/mobile/tabbar" />
-                    } />
-                    <Route path="/nav-bar" view=move |cx| view! {cx,
-                        <MobilePage path="/mobile/nav-bar" />
-                    } />
-                    <Route path="/input" view=move |cx| view! {cx,
-                        <InputPage />
-                    } />
-                    <Route path="/image" view=move |cx| view! {cx,
-                        <ImagePage />
-                    } />
-                    <Route path="/modal" view=move |cx| view! {cx,
-                        <ModalPage />
-                    } />
-                    <Route path="/button" view=move |cx| view! {cx,
-                        <ButtonPage />
-                    } />
-                    <Route path="/checkbox" view=move |cx| view! {cx,
-                        <CheckboxPage />
-                    } />
-                </Route>
-            </Routes>
-            <Routes base="/mobile".to_string()>
-                <Route path="/tabbar" view=move |cx| view! {cx,
-                    <TabbarPage />
-                } />
-                <Route path="/nav-bar" view=move |cx| view! {cx,
-                    <NavBarPage />
-                } />
-            </Routes>
-        </Router>
-    }
-}
diff --git a/examples/basic/src/assets/css/index.css b/examples/basic/src/assets/css/index.css
deleted file mode 100644
index edc5940..0000000
--- a/examples/basic/src/assets/css/index.css
+++ /dev/null
@@ -1,16 +0,0 @@
-body {
-    margin: 0;
-}
-
-
-.components-page-box {
-    display: flex;
-}
-
-.components-page-box aside {
-    width: 260px;
-}
-
-.components-page-box main {
-    flex: 1;
-}
\ No newline at end of file
diff --git a/examples/basic/src/main.rs b/examples/basic/src/main.rs
deleted file mode 100644
index 38ab1fd..0000000
--- a/examples/basic/src/main.rs
+++ /dev/null
@@ -1,9 +0,0 @@
-mod app;
-mod pages;
-
-use app::*;
-use leptos::*;
-
-fn main() {
-    mount_to_body(|cx| view! { cx, <App/> })
-}
diff --git a/examples/basic/src/pages/button/mod.rs b/examples/basic/src/pages/button/mod.rs
deleted file mode 100644
index a181112..0000000
--- a/examples/basic/src/pages/button/mod.rs
+++ /dev/null
@@ -1,43 +0,0 @@
-use leptos::*;
-use melt_ui::*;
-
-#[component]
-pub fn ButtonPage(cx: Scope) -> impl IntoView {
-    view! {cx,
-        <Space>
-            <Button type_=ButtonType::PRIMARY>
-                "PRIMARY"
-            </Button>
-            <Button type_=ButtonType::SOLID>
-                "SOLID"
-            </Button>
-            <Button type_=ButtonType::TEXT>
-                "TEXT"
-            </Button>
-            <Button type_=ButtonType::LINK>
-                "LINK"
-            </Button>
-            <Button color=ButtonColor::PRIMARY>
-                "PRIMARY Color"
-            </Button>
-            <Button color=ButtonColor::SUCCESS>
-                "SUCCESS Color"
-            </Button>
-            <Button color=ButtonColor::WARNING>
-                "WARNING Color"
-            </Button>
-            <Button color=ButtonColor::ERROR>
-                "ERROR Color"
-            </Button>
-            <Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined>
-                "ERROR Color Icon"
-            </Button>
-            <Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined round=true>
-            </Button>
-        </Space>
-        <div style="padding-top: 12px">
-            <Button style="background: blue;">"style blue"</Button>
-            <Button style="width: 40px; height: 20px">"size"</Button>
-        </div>
-    }
-}
\ No newline at end of file
diff --git a/examples/basic/src/pages/checkbox/mod.rs b/examples/basic/src/pages/checkbox/mod.rs
deleted file mode 100644
index 7d63d87..0000000
--- a/examples/basic/src/pages/checkbox/mod.rs
+++ /dev/null
@@ -1,14 +0,0 @@
-use leptos::*;
-use melt_ui::*;
-
-#[component]
-pub fn CheckboxPage(cx: Scope) -> impl IntoView {
-    let checked = create_rw_signal(cx, false);
-    view! {cx,
-        <div>
-            <Checkbox checked>
-                "Click"
-            </Checkbox>
-        </div>
-    }
-}
diff --git a/examples/basic/src/pages/components.rs b/examples/basic/src/pages/components.rs
deleted file mode 100644
index 4e7db06..0000000
--- a/examples/basic/src/pages/components.rs
+++ /dev/null
@@ -1,52 +0,0 @@
-use leptos::*;
-use leptos_router::{use_location, use_navigate, Outlet};
-use melt_ui::*;
-use regex::Regex;
-
-#[component]
-pub fn ComponentsPage(cx: Scope) -> impl IntoView {
-    let loaction = use_location(cx);
-    let navigate = use_navigate(cx);
-    let selected = create_rw_signal(cx, String::from(""));
-    create_effect(cx, move |_| {
-        let pathname = loaction.pathname.get();
-
-        let re = Regex::new(r"^/components/(.+)$").unwrap();
-        let Some(caps) = re.captures(&pathname) else {
-            return;
-        };
-        let Some(path) = caps.get(1) else {
-            return;
-        };
-        let path = path.as_str().to_string();
-        selected.set(path);
-    });
-
-    create_effect(cx, move |value| {
-        let selected = selected.get();
-        if value.is_some() {
-            _ = navigate(&format!("/components/{selected}"), Default::default());
-        }
-        selected
-    });
-    view! {cx,
-        <div class="components-page-box">
-            <aside>
-                <Menu selected>
-                    <MenuItem key="menu" label="menu" />
-                    <MenuItem key="slider" label="slider" />
-                    <MenuItem key="tabbar" label="tabbar" />
-                    <MenuItem key="input" label="input" />
-                    <MenuItem key="image" label="image" />
-                    <MenuItem key="modal" label="madal" />
-                    <MenuItem key="nav-bar" label="nav-bar" />
-                    <MenuItem key="button" label="button" />
-                    <MenuItem key="checkbox" label="checkbox" />
-                </Menu>
-            </aside>
-            <main>
-                <Outlet />
-            </main>
-        </div>
-    }
-}
diff --git a/examples/basic/src/pages/home.rs b/examples/basic/src/pages/home.rs
deleted file mode 100644
index 8d41b0c..0000000
--- a/examples/basic/src/pages/home.rs
+++ /dev/null
@@ -1,40 +0,0 @@
-use leptos::*;
-use leptos_router::use_navigate;
-use melt_ui::*;
-
-#[component]
-pub fn Home(cx: Scope) -> impl IntoView {
-    let (theme, set_theme) = create_signal(cx, Theme::light());
-    provide_context(cx, theme);
-    let (count, set_count) = create_signal(cx, 0.0);
-    let (button_type, set_button_type) = create_signal(cx, ButtonType::TEXT);
-    view! { cx,
-        <Button on:click=move |_| {
-            let navigate = use_navigate(cx);
-            _ = navigate("/components/menu", Default::default());
-        }>
-            "components"
-        </Button>
-        <hr />
-        <Space>
-            <Button
-                on:click=move |_| set_theme.update(move |value| *value = Theme::dark())
-                type_=button_type
-            >
-                "theme"
-            </Button>
-            <Button on:click=move |_| set_button_type.update(move |value| *value = ButtonType::PRIMARY)>
-                "click"
-            </Button>
-            <Button
-                on:click=move |_| set_count.update(move |value| *value += 1.0)
-                type_=button_type
-            >
-                "click"
-            </Button>
-            {move || count.get()}
-
-            <Progress percentage=count/>
-        </Space>
-    }
-}
diff --git a/examples/basic/src/pages/image/mod.rs b/examples/basic/src/pages/image/mod.rs
deleted file mode 100644
index f98e30a..0000000
--- a/examples/basic/src/pages/image/mod.rs
+++ /dev/null
@@ -1,12 +0,0 @@
-use leptos::*;
-use melt_ui::*;
-
-#[component]
-pub fn ImagePage(cx: Scope) -> impl IntoView {
-    view! { cx,
-        <>
-            <Image src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" width="500px"/>
-            <Image width="200px" height="200px"/>
-        </>
-    }
-}
\ No newline at end of file
diff --git a/examples/basic/src/pages/input/mod.rs b/examples/basic/src/pages/input/mod.rs
deleted file mode 100644
index 1a50d84..0000000
--- a/examples/basic/src/pages/input/mod.rs
+++ /dev/null
@@ -1,14 +0,0 @@
-use leptos::*;
-use melt_ui::*;
-
-#[component]
-pub fn InputPage(cx: Scope) -> impl IntoView {
-    let value = create_rw_signal(cx, String::from("o"));
-    view! { cx,
-        <>
-            {move || value.get()}
-            <Input value/>
-            <Input value type_=InputType::PASSWORD />
-        </>
-    }
-}
\ No newline at end of file
diff --git a/examples/basic/src/pages/menu/mod.rs b/examples/basic/src/pages/menu/mod.rs
deleted file mode 100644
index 2e13f97..0000000
--- a/examples/basic/src/pages/menu/mod.rs
+++ /dev/null
@@ -1,16 +0,0 @@
-use leptos::*;
-use melt_ui::*;
-
-#[component]
-pub fn MenuPage(cx: Scope) -> impl IntoView {
-    let selected = create_rw_signal(cx, String::from("o"));
-    view! { cx,
-        <>
-            { move || selected.get() }
-            <Menu selected>
-                <MenuItem key="a" label="and"/>
-                <MenuItem key="o" label="or"/>
-            </Menu>
-        </>
-    }
-}
diff --git a/examples/basic/src/pages/mobile.rs b/examples/basic/src/pages/mobile.rs
deleted file mode 100644
index ba52df9..0000000
--- a/examples/basic/src/pages/mobile.rs
+++ /dev/null
@@ -1,10 +0,0 @@
-use leptos::*;
-
-#[component]
-pub fn MobilePage(cx: Scope, path: &'static str) -> impl IntoView {
-    view! { cx,
-        <div style="height: 100vh; display: flex; align-items: center; justify-content: center; background: #eff2f5">
-            <iframe src=path style="width: 360px; height: 640px; background-color: #fff; border: none; border-radius: 16px; border: 1px solid #e1e1e1"/>
-        </div>
-    }
-}
diff --git a/examples/basic/src/pages/mod.rs b/examples/basic/src/pages/mod.rs
deleted file mode 100644
index 54f95c8..0000000
--- a/examples/basic/src/pages/mod.rs
+++ /dev/null
@@ -1,25 +0,0 @@
-mod button;
-mod checkbox;
-mod components;
-mod home;
-mod image;
-mod input;
-mod menu;
-mod mobile;
-mod modal;
-mod nav_bar;
-mod slider;
-mod tabbar;
-
-pub use button::*;
-pub use checkbox::*;
-pub use components::*;
-pub use home::*;
-pub use image::*;
-pub use input::*;
-pub use menu::*;
-pub use mobile::*;
-pub use modal::*;
-pub use nav_bar::*;
-pub use slider::*;
-pub use tabbar::*;
diff --git a/examples/basic/src/pages/modal/mod.rs b/examples/basic/src/pages/modal/mod.rs
deleted file mode 100644
index 4004cdf..0000000
--- a/examples/basic/src/pages/modal/mod.rs
+++ /dev/null
@@ -1,15 +0,0 @@
-use leptos::*;
-use melt_ui::*;
-
-#[component]
-pub fn ModalPage(cx: Scope) -> impl IntoView {
-    let show = create_rw_signal(cx, false);
-    view! { cx,
-        <Button on:click=move |_| show.set(true)>
-            "open modal"
-        </Button>
-        <Modal title="标题" show>
-            "sd"
-        </Modal>
-    }
-}
\ No newline at end of file
diff --git a/examples/basic/src/pages/nav_bar/mod.rs b/examples/basic/src/pages/nav_bar/mod.rs
deleted file mode 100644
index 2e42643..0000000
--- a/examples/basic/src/pages/nav_bar/mod.rs
+++ /dev/null
@@ -1,24 +0,0 @@
-use leptos::*;
-use melt_ui::mobile::NavBar;
-
-#[component]
-pub fn NavBarPage(cx: Scope) -> impl IntoView {
-    let click_text = create_rw_signal(cx, String::from("none"));
-
-    let click_left = SignalSetter::map(cx, move |_| {
-        click_text.set("left".to_string())
-    });
-
-    let click_right = SignalSetter::map(cx, move |_| {
-        click_text.set("right".to_string())
-    });
-
-    view! { cx,
-        <div style="height: 100vh; background: #f5f5f5">
-            <NavBar title="Home" left_arrow=true left_text="back" right_text="add" click_left=click_left click_right=click_right/>
-            <div style="padding-top: 50px">
-                { move || click_text.get() }
-            </div>
-        </div>
-    }
-}
\ No newline at end of file
diff --git a/examples/basic/src/pages/slider/mod.rs b/examples/basic/src/pages/slider/mod.rs
deleted file mode 100644
index 8155abb..0000000
--- a/examples/basic/src/pages/slider/mod.rs
+++ /dev/null
@@ -1,11 +0,0 @@
-use leptos::*;
-use melt_ui::*;
-
-#[component]
-pub fn SliderPage(cx: Scope) -> impl IntoView {
-    let value = create_rw_signal(cx, 0.0);
-
-    view! { cx,
-        <Slider value/>
-    }
-}
diff --git a/examples/basic/src/pages/tabbar/mod.rs b/examples/basic/src/pages/tabbar/mod.rs
deleted file mode 100644
index 2be5b9e..0000000
--- a/examples/basic/src/pages/tabbar/mod.rs
+++ /dev/null
@@ -1,23 +0,0 @@
-use leptos::*;
-use melt_ui::mobile::*;
-
-#[component]
-pub fn TabbarPage(cx: Scope) -> impl IntoView {
-    let selected = create_rw_signal(cx, String::from("o"));
-    view! { cx,
-        <div style="height: 100vh; background: #f5f5f5">
-            { move || selected.get() }
-            <Tabbar selected>
-                <TabbarItem name="a">
-                    "and"
-                </TabbarItem>
-                <TabbarItem name="i">
-                    "if"
-                </TabbarItem> 
-                <TabbarItem name="o" icon=icondata::AiIcon::AiCloseOutlined>
-                    "or"
-                </TabbarItem> 
-            </Tabbar>
-        </div>
-    }
-}
diff --git a/gh-pages/Cargo.toml b/gh-pages/Cargo.toml
index f043704..90fdc01 100644
--- a/gh-pages/Cargo.toml
+++ b/gh-pages/Cargo.toml
@@ -6,12 +6,12 @@ edition = "2021"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-leptos = { version = "0.4.8", features = ["csr"] }
+leptos = { version = "0.5.0-beta", features = ["csr"] }
 melt-ui = { path = "../" }
 icondata = { version = "0.0.7", features = [
     "AiCloseOutlined",
     "AiCheckOutlined",
 ] }
-leptos_router = { version = "0.4.0", features = ["csr"] }
+leptos_router = { version = "0.5.0-beta", features = ["csr"] }
 indoc = "2.0.1"
 regex = "1.8.2"
diff --git a/gh-pages/src/app.rs b/gh-pages/src/app.rs
index ad46258..98fb360 100644
--- a/gh-pages/src/app.rs
+++ b/gh-pages/src/app.rs
@@ -3,68 +3,68 @@ use leptos::*;
 use leptos_router::*;
 
 #[component]
-pub fn App(cx: Scope) -> impl IntoView {
-    view! { cx,
+pub fn App() -> impl IntoView {
+    view! {
         <Router base="/melt-ui">
             <Routes base="/melt-ui".to_string() >
-                <Route path="/" view=move |cx| view! {cx,
+                <Route path="/" view=move || view! {
                     <Home />
                 } />
-                <Route path="/menu" view=move |cx| view! {cx,
+                <Route path="/menu" view=move || view! {
                     <MenuPage />
                 } />
-                <Route path="/slider" view=move |cx| view! {cx,
+                <Route path="/slider" view=move || view! {
                     <SliderPage />
                 } />
-                <Route path="/components" view=move |cx| view! {cx,
+                <Route path="/components" view=move || view! {
                     <ComponentsPage />
                 } >
-                    <Route path="/menu" view=move |cx| view! {cx,
+                    <Route path="/menu" view=move || view! {
                         <MenuPage />
                     } />
-                    <Route path="/slider" view=move |cx| view! {cx,
+                    <Route path="/slider" view=move || view! {
                         <SliderPage />
                     } />
-                    <Route path="/tabbar" view=move |cx| view! {cx,
+                    <Route path="/tabbar" view=move || view! {
                         <MobilePage path="/melt-ui?path=/mobile/tabbar" />
                     } />
-                    <Route path="/nav-bar" view=move |cx| view! {cx,
+                    <Route path="/nav-bar" view=move || view! {
                         <MobilePage path="/melt-ui?path=/mobile/nav-bar" />
                     } />
-                    <Route path="/input" view=move |cx| view! {cx,
+                    <Route path="/input" view=move || view! {
                         <InputPage />
                     } />
-                    <Route path="/image" view=move |cx| view! {cx,
+                    <Route path="/image" view=move || view! {
                         <ImagePage />
                     } />
-                    <Route path="/modal" view=move |cx| view! {cx,
+                    <Route path="/modal" view=move || view! {
                         <ModalPage />
                     } />
-                    <Route path="/button" view=move |cx| view! {cx,
+                    <Route path="/button" view=move || view! {
                         <ButtonPage />
                     } />
-                    <Route path="/checkbox" view=move |cx| view! {cx,
+                    <Route path="/checkbox" view=move || view! {
                         <CheckboxPage />
                     } />
-                    <Route path="/toast" view=move |cx| view! {cx,
+                    <Route path="/toast" view=move || view! {
                         <MobilePage path="/melt-ui?path=/mobile/toast" />
                     } />
-                    <Route path="/tabs" view=move |cx| view! {cx,
+                    <Route path="/tabs" view=move || view! {
                         <TabsPage />
                     } />
-                    <Route path="/select" view=move |cx| view! {cx,
+                    <Route path="/select" view=move || view! {
                         <SelectPage />
                     } />
                 </Route>
             </Routes>
             <Routes base="/melt-ui/mobile".to_string()>
-                <Route path="/tabbar" view=move |cx| view! {cx,
+                <Route path="/tabbar" view=move || view! {
                     <TabbarPage />
                 } />
-                <Route path="/nav-bar" view=move |cx| view! {cx,
+                <Route path="/nav-bar" view=move || view! {
                     <NavBarPage />
                 } />
-                <Route path="/toast" view=move |cx| view! {cx,
+                <Route path="/toast" view=move || view! {
                     <ToastPage />
                 } />
             </Routes>
diff --git a/gh-pages/src/components/site_header.rs b/gh-pages/src/components/site_header.rs
index 193d54c..e94e22d 100644
--- a/gh-pages/src/components/site_header.rs
+++ b/gh-pages/src/components/site_header.rs
@@ -3,14 +3,14 @@ use leptos_router::use_navigate;
 use melt_ui::*;
 
 #[component]
-pub fn SiteHeader(cx: Scope) -> impl IntoView {
-    view! { cx,
+pub fn SiteHeader() -> impl IntoView {
+    view! {
         <LayoutHeader
             style="height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid #efeff6"
         >
             <span style="cursor: pointer" on:click=move |_| {
-                let navigate = use_navigate(cx);
-                _ = navigate("/", Default::default());
+                let navigate = use_navigate();
+                navigate("/", Default::default());
             }>
                 "Melt UI"
             </span>
diff --git a/gh-pages/src/main.rs b/gh-pages/src/main.rs
index 23e4aca..a082bc4 100644
--- a/gh-pages/src/main.rs
+++ b/gh-pages/src/main.rs
@@ -6,5 +6,5 @@ use app::*;
 use leptos::*;
 
 fn main() {
-    mount_to_body(|cx| view! { cx, <App/> })
+    mount_to_body(|| view! {  <App/> })
 }
diff --git a/gh-pages/src/pages/button/mod.rs b/gh-pages/src/pages/button/mod.rs
index 703b334..c0c4cb6 100644
--- a/gh-pages/src/pages/button/mod.rs
+++ b/gh-pages/src/pages/button/mod.rs
@@ -2,8 +2,8 @@ use leptos::*;
 use melt_ui::*;
 
 #[component]
-pub fn ButtonPage(cx: Scope) -> impl IntoView {
-    view! {cx,
+pub fn ButtonPage() -> impl IntoView {
+    view! {
         <Space>
             <Button type_=ButtonType::PRIMARY>
                 "PRIMARY"
diff --git a/gh-pages/src/pages/checkbox/mod.rs b/gh-pages/src/pages/checkbox/mod.rs
index 7d63d87..a3c5ba8 100644
--- a/gh-pages/src/pages/checkbox/mod.rs
+++ b/gh-pages/src/pages/checkbox/mod.rs
@@ -2,9 +2,9 @@ use leptos::*;
 use melt_ui::*;
 
 #[component]
-pub fn CheckboxPage(cx: Scope) -> impl IntoView {
-    let checked = create_rw_signal(cx, false);
-    view! {cx,
+pub fn CheckboxPage() -> impl IntoView {
+    let checked = create_rw_signal(false);
+    view! {
         <div>
             <Checkbox checked>
                 "Click"
diff --git a/gh-pages/src/pages/components.rs b/gh-pages/src/pages/components.rs
index 467925b..b935f1d 100644
--- a/gh-pages/src/pages/components.rs
+++ b/gh-pages/src/pages/components.rs
@@ -5,11 +5,11 @@ use melt_ui::*;
 use regex::Regex;
 
 #[component]
-pub fn ComponentsPage(cx: Scope) -> impl IntoView {
-    let loaction = use_location(cx);
-    let navigate = use_navigate(cx);
-    let selected = create_rw_signal(cx, String::from(""));
-    create_effect(cx, move |_| {
+pub fn ComponentsPage() -> impl IntoView {
+    let loaction = use_location();
+    let navigate = use_navigate();
+    let selected = create_rw_signal(String::from(""));
+    create_effect(move |_| {
         let pathname = loaction.pathname.get();
 
         let re = Regex::new(r"^/melt-ui/components/(.+)$").unwrap();
@@ -23,14 +23,14 @@ pub fn ComponentsPage(cx: Scope) -> impl IntoView {
         selected.set(path);
     });
 
-    create_effect(cx, move |value| {
+    create_effect(move |value| {
         let selected = selected.get();
         if value.is_some() {
-            _ = navigate(&format!("/components/{selected}"), Default::default());
+            navigate(&format!("/components/{selected}"), Default::default());
         }
         selected
     });
-    view! {cx,
+    view! {
         <Layout position=LayoutPosition::ABSOLUTE>
             <SiteHeader />
             <Layout has_sider=true position=LayoutPosition::ABSOLUTE style="top: 54px;">
diff --git a/gh-pages/src/pages/home.rs b/gh-pages/src/pages/home.rs
index 0947368..16cd39d 100644
--- a/gh-pages/src/pages/home.rs
+++ b/gh-pages/src/pages/home.rs
@@ -4,23 +4,23 @@ use leptos_router::{use_navigate, use_query_map};
 use melt_ui::*;
 
 #[component]
-pub fn Home(cx: Scope) -> impl IntoView {
-    let query_map = use_query_map(cx).get();
+pub fn Home() -> impl IntoView {
+    let query_map = use_query_map().get();
     if let Some(path) = query_map.get("path") {
-        let path = store_value(cx, path.clone());
+        let path = store_value(path.clone());
         request_animation_frame(move || {
-            let navigate = use_navigate(cx);
-            _ = navigate(&path.get_value(), Default::default());
+            let navigate = use_navigate();
+            navigate(&path.get_value(), Default::default());
         });
     }
-    view! { cx,
+    view! {
         <Layout position=LayoutPosition::ABSOLUTE>
             <SiteHeader />
             <Layout position=LayoutPosition::ABSOLUTE style="top: 54px; display: flex; align-items: center; justify-content: center; flex-direction: column;">
                 <p>"A Leptos UI Library"</p>
                 <Button on:click=move |_| {
-                    let navigate = use_navigate(cx);
-                    _ = navigate("/components/menu", Default::default());
+                    let navigate = use_navigate();
+                    navigate("/components/menu", Default::default());
                 }>
                     "Read the docs"
                 </Button>
diff --git a/gh-pages/src/pages/image/mod.rs b/gh-pages/src/pages/image/mod.rs
index f98e30a..15e22fa 100644
--- a/gh-pages/src/pages/image/mod.rs
+++ b/gh-pages/src/pages/image/mod.rs
@@ -2,11 +2,11 @@ use leptos::*;
 use melt_ui::*;
 
 #[component]
-pub fn ImagePage(cx: Scope) -> impl IntoView {
-    view! { cx,
+pub fn ImagePage() -> impl IntoView {
+    view! {
         <>
             <Image src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" width="500px"/>
             <Image width="200px" height="200px"/>
         </>
     }
-}
\ No newline at end of file
+}
diff --git a/gh-pages/src/pages/input/mod.rs b/gh-pages/src/pages/input/mod.rs
index 1a50d84..77a0046 100644
--- a/gh-pages/src/pages/input/mod.rs
+++ b/gh-pages/src/pages/input/mod.rs
@@ -2,13 +2,13 @@ use leptos::*;
 use melt_ui::*;
 
 #[component]
-pub fn InputPage(cx: Scope) -> impl IntoView {
-    let value = create_rw_signal(cx, String::from("o"));
-    view! { cx,
+pub fn InputPage() -> impl IntoView {
+    let value = create_rw_signal(String::from("o"));
+    view! {
         <>
             {move || value.get()}
             <Input value/>
             <Input value type_=InputType::PASSWORD />
         </>
     }
-}
\ No newline at end of file
+}
diff --git a/gh-pages/src/pages/menu/mod.rs b/gh-pages/src/pages/menu/mod.rs
index 5f7a4ba..cde492c 100644
--- a/gh-pages/src/pages/menu/mod.rs
+++ b/gh-pages/src/pages/menu/mod.rs
@@ -3,9 +3,9 @@ use leptos::*;
 use melt_ui::*;
 
 #[component]
-pub fn MenuPage(cx: Scope) -> impl IntoView {
-    let selected = create_rw_signal(cx, String::from("o"));
-    view! { cx,
+pub fn MenuPage() -> impl IntoView {
+    let selected = create_rw_signal(String::from("o"));
+    view! {
         <Card>
             { move || selected.get() }
             <Menu selected>
diff --git a/gh-pages/src/pages/mobile.rs b/gh-pages/src/pages/mobile.rs
index ba52df9..b03c0b0 100644
--- a/gh-pages/src/pages/mobile.rs
+++ b/gh-pages/src/pages/mobile.rs
@@ -1,8 +1,8 @@
 use leptos::*;
 
 #[component]
-pub fn MobilePage(cx: Scope, path: &'static str) -> impl IntoView {
-    view! { cx,
+pub fn MobilePage(path: &'static str) -> impl IntoView {
+    view! {
         <div style="height: 100vh; display: flex; align-items: center; justify-content: center; background: #eff2f5">
             <iframe src=path style="width: 360px; height: 640px; background-color: #fff; border: none; border-radius: 16px; border: 1px solid #e1e1e1"/>
         </div>
diff --git a/gh-pages/src/pages/modal/mod.rs b/gh-pages/src/pages/modal/mod.rs
index 2d79522..df0eafc 100644
--- a/gh-pages/src/pages/modal/mod.rs
+++ b/gh-pages/src/pages/modal/mod.rs
@@ -2,9 +2,9 @@ use leptos::*;
 use melt_ui::*;
 
 #[component]
-pub fn ModalPage(cx: Scope) -> impl IntoView {
-    let show = create_rw_signal(cx, false);
-    view! { cx,
+pub fn ModalPage() -> impl IntoView {
+    let show = create_rw_signal(false);
+    view! {
         <Button on:click=move |_| show.set(true)>
             "open modal"
         </Button>
@@ -12,4 +12,4 @@ pub fn ModalPage(cx: Scope) -> impl IntoView {
             "sd"
         </Modal>
     }
-}
\ No newline at end of file
+}
diff --git a/gh-pages/src/pages/nav_bar/mod.rs b/gh-pages/src/pages/nav_bar/mod.rs
index 2e42643..83c749d 100644
--- a/gh-pages/src/pages/nav_bar/mod.rs
+++ b/gh-pages/src/pages/nav_bar/mod.rs
@@ -2,18 +2,14 @@ use leptos::*;
 use melt_ui::mobile::NavBar;
 
 #[component]
-pub fn NavBarPage(cx: Scope) -> impl IntoView {
-    let click_text = create_rw_signal(cx, String::from("none"));
+pub fn NavBarPage() -> impl IntoView {
+    let click_text = create_rw_signal(String::from("none"));
 
-    let click_left = SignalSetter::map(cx, move |_| {
-        click_text.set("left".to_string())
-    });
+    let click_left = SignalSetter::map(move |_| click_text.set("left".to_string()));
 
-    let click_right = SignalSetter::map(cx, move |_| {
-        click_text.set("right".to_string())
-    });
+    let click_right = SignalSetter::map(move |_| click_text.set("right".to_string()));
 
-    view! { cx,
+    view! {
         <div style="height: 100vh; background: #f5f5f5">
             <NavBar title="Home" left_arrow=true left_text="back" right_text="add" click_left=click_left click_right=click_right/>
             <div style="padding-top: 50px">
@@ -21,4 +17,4 @@ pub fn NavBarPage(cx: Scope) -> impl IntoView {
             </div>
         </div>
     }
-}
\ No newline at end of file
+}
diff --git a/gh-pages/src/pages/select/mod.rs b/gh-pages/src/pages/select/mod.rs
index a0b9c17..d52a80d 100644
--- a/gh-pages/src/pages/select/mod.rs
+++ b/gh-pages/src/pages/select/mod.rs
@@ -2,14 +2,14 @@ use leptos::*;
 use melt_ui::*;
 
 #[component]
-pub fn SelectPage(cx: Scope) -> impl IntoView {
-    let selected_value = create_rw_signal(cx, Some(String::from("apple")));
+pub fn SelectPage() -> impl IntoView {
+    let selected_value = create_rw_signal(Some(String::from("apple")));
 
     let options = vec![SelectOption {
         label: String::from("apple"),
         value: String::from("apple"),
     }];
-    view! { cx,
+    view! {
         <Select value=selected_value options/>
     }
 }
diff --git a/gh-pages/src/pages/slider/mod.rs b/gh-pages/src/pages/slider/mod.rs
index 8155abb..be993b9 100644
--- a/gh-pages/src/pages/slider/mod.rs
+++ b/gh-pages/src/pages/slider/mod.rs
@@ -2,10 +2,10 @@ use leptos::*;
 use melt_ui::*;
 
 #[component]
-pub fn SliderPage(cx: Scope) -> impl IntoView {
-    let value = create_rw_signal(cx, 0.0);
+pub fn SliderPage() -> impl IntoView {
+    let value = create_rw_signal(0.0);
 
-    view! { cx,
+    view! {
         <Slider value/>
     }
 }
diff --git a/gh-pages/src/pages/tabbar/mod.rs b/gh-pages/src/pages/tabbar/mod.rs
index 2be5b9e..6bff7bf 100644
--- a/gh-pages/src/pages/tabbar/mod.rs
+++ b/gh-pages/src/pages/tabbar/mod.rs
@@ -2,9 +2,9 @@ use leptos::*;
 use melt_ui::mobile::*;
 
 #[component]
-pub fn TabbarPage(cx: Scope) -> impl IntoView {
-    let selected = create_rw_signal(cx, String::from("o"));
-    view! { cx,
+pub fn TabbarPage() -> impl IntoView {
+    let selected = create_rw_signal(String::from("o"));
+    view! {
         <div style="height: 100vh; background: #f5f5f5">
             { move || selected.get() }
             <Tabbar selected>
@@ -13,10 +13,10 @@ pub fn TabbarPage(cx: Scope) -> impl IntoView {
                 </TabbarItem>
                 <TabbarItem name="i">
                     "if"
-                </TabbarItem> 
+                </TabbarItem>
                 <TabbarItem name="o" icon=icondata::AiIcon::AiCloseOutlined>
                     "or"
-                </TabbarItem> 
+                </TabbarItem>
             </Tabbar>
         </div>
     }
diff --git a/gh-pages/src/pages/tabs/mod.rs b/gh-pages/src/pages/tabs/mod.rs
index 925fbaf..559b412 100644
--- a/gh-pages/src/pages/tabs/mod.rs
+++ b/gh-pages/src/pages/tabs/mod.rs
@@ -2,9 +2,9 @@ use leptos::*;
 use melt_ui::*;
 
 #[component]
-pub fn TabsPage(cx: Scope) -> impl IntoView {
-    let active_key = create_rw_signal(cx, "apple");
-    view! { cx,
+pub fn TabsPage() -> impl IntoView {
+    let active_key = create_rw_signal("apple");
+    view! {
         <Tabs active_key>
             <Tab key="apple" label="Apple">
                 "apple"
diff --git a/gh-pages/src/pages/toast/mod.rs b/gh-pages/src/pages/toast/mod.rs
index edd8bee..26d2a3f 100644
--- a/gh-pages/src/pages/toast/mod.rs
+++ b/gh-pages/src/pages/toast/mod.rs
@@ -1,22 +1,19 @@
-use std::time::Duration;
 use leptos::*;
 use melt_ui::mobile::*;
 use melt_ui::*;
+use std::time::Duration;
 
 #[component]
-pub fn ToastPage(cx: Scope) -> impl IntoView {
-    let count = create_rw_signal(cx, 0u32);
+pub fn ToastPage() -> impl IntoView {
+    let count = create_rw_signal(0u32);
     let onclick = move |_| {
-        show_toast(
-            cx,
-            ToastOptions {
-                message: format!("Hello {}", count.get_untracked()),
-                duration: Duration::from_millis(2000),
-            },
-        );
+        show_toast(ToastOptions {
+            message: format!("Hello {}", count.get_untracked()),
+            duration: Duration::from_millis(2000),
+        });
         count.set(count.get_untracked() + 1);
     };
-    view! {cx,
+    view! {
         <div style="margin: 20px">
             <Button on:click=onclick>"hi"</Button>
         </div>
diff --git a/src/button/mod.rs b/src/button/mod.rs
index 4a76249..0fc82f7 100644
--- a/src/button/mod.rs
+++ b/src/button/mod.rs
@@ -35,7 +35,6 @@ impl ButtonColor {
 
 #[component]
 pub fn Button(
-    cx: Scope,
     #[prop(optional, into)] style: MaybeSignal<String>,
     #[prop(optional, into)] type_: MaybeSignal<ButtonType>,
     #[prop(optional, into)] color: MaybeSignal<ButtonColor>,
@@ -43,8 +42,8 @@ pub fn Button(
     #[prop(optional, into)] icon: Option<Icon>,
     #[prop(optional)] children: Option<ChildrenFn>,
 ) -> impl IntoView {
-    let theme = use_theme(cx, Theme::light);
-    let css_vars = create_memo(cx, move |_| {
+    let theme = use_theme(Theme::light);
+    let css_vars = create_memo(move |_| {
         let mut css_vars = String::new();
         let theme = theme.get();
         let bg_color = color.get().theme_color(&theme);
@@ -69,7 +68,7 @@ pub fn Button(
         ""
     };
 
-    view! {cx, class=class_name,
+    view! { class=class_name,
         <button
             class:melt-button=true
             class=("melt-button--text", move || type_.get() == ButtonType::TEXT)
@@ -81,7 +80,7 @@ pub fn Button(
                     <Icon icon=icon style=icon_style/>
                 </OptionComp>
                 <OptionComp value=children bind:children>
-                    { children(cx) }
+                    { children() }
                 </OptionComp>
         </button>
     }
diff --git a/src/button/theme.rs b/src/button/theme.rs
index d8856b9..9281a8e 100644
--- a/src/button/theme.rs
+++ b/src/button/theme.rs
@@ -1,16 +1,14 @@
 use crate::theme::ThemeMethod;
 
 #[derive(Clone)]
-pub struct ButtonTheme {
-
-}
+pub struct ButtonTheme {}
 
 impl ThemeMethod for ButtonTheme {
     fn light() -> Self {
-        Self {  }
+        Self {}
     }
 
     fn dark() -> Self {
-        Self {  }
+        Self {}
     }
-}
\ No newline at end of file
+}
diff --git a/src/card/mod.rs b/src/card/mod.rs
index 2cb4563..948e665 100644
--- a/src/card/mod.rs
+++ b/src/card/mod.rs
@@ -23,7 +23,6 @@ pub struct CardFooter {
 
 #[component]
 pub fn Card(
-    cx: Scope,
     #[prop(optional, into)] title: MaybeSignal<&'static str>,
     #[prop(optional)] card_header: Option<CardHeader>,
     #[prop(optional)] card_header_extra: Option<CardHeaderExtra>,
@@ -36,11 +35,11 @@ pub fn Card(
     let header = card_header.map_or(None, |v| Some(Rc::new(v)));
     let header_extra = card_header_extra.map_or(None, |v| Some(Rc::new(v)));
     // let footer = card_footer.map_or(None, |v| Some(Rc::new(v)));
-    
+
     view! {
-        cx, class=class_name,
+         class=class_name,
         <div class="melt-card">
-                <If cond=MaybeSignal::derive(cx, move || is_header || !title.get().is_empty())  >
+                <If cond=MaybeSignal::derive( move || is_header || !title.get().is_empty())  >
                     <Then slot>
                         <div class="melt-card__header">
                             <div class="melt-card__header-content">
@@ -48,25 +47,25 @@ pub fn Card(
                                     <Fallback slot>
                                         { title.get() }
                                     </Fallback>
-                                    { (header.children)(cx) }
+                                    { (header.children)() }
                                 </OptionComp>
                             </div>
                             <OptionComp value=header_extra.clone() bind:header_extra>
                                 <div class="melt-card__header-extra">
-                                    { (header_extra.children)(cx) }
+                                    { (header_extra.children)() }
                                 </div>
                             </OptionComp>
                         </div>
                     </Then>
                 </If>
             <div class="melt-card__content">
-                { children(cx) }
+                { children() }
             </div>
             <OptionComp value=card_footer bind:footer>
                 <If cond=footer.if_ >
                     <Then slot>
                         <div class="melt-card__footer">
-                            { (footer.children)(cx) }
+                            { (footer.children)() }
                         </div>
                     </Then>
                 </If>
diff --git a/src/checkbox/mod.rs b/src/checkbox/mod.rs
index b5b8744..481c8dd 100644
--- a/src/checkbox/mod.rs
+++ b/src/checkbox/mod.rs
@@ -4,17 +4,13 @@ use leptos::*;
 use stylers::style_sheet_str;
 
 #[component]
-pub fn Checkbox(
-    cx: Scope,
-    #[prop(into)] checked: RwSignal<bool>,
-    children: Children,
-) -> impl IntoView {
-    let theme = use_theme(cx, Theme::light);
+pub fn Checkbox(#[prop(into)] checked: RwSignal<bool>, children: Children) -> impl IntoView {
+    let theme = use_theme(Theme::light);
     let class_name = mount_style("checkbox", || {
         style_sheet_str!("./src/checkbox/checkbox.css")
     });
 
-    let css_vars = create_memo(cx, move |_| {
+    let css_vars = create_memo(move |_| {
         let mut css_vars = String::new();
         let theme = theme.get();
         let bg_color = theme.common.color_primary;
@@ -22,7 +18,7 @@ pub fn Checkbox(
         css_vars
     });
 
-    view! {cx, class=class_name,
+    view! { class=class_name,
         <div class:melt-checkbox=true class=("melt-checkbox--checked", move || checked.get()) style=move || css_vars.get()
             on:click=move |_| checked.set(!checked.get_untracked())>
             <input class="melt-checkbox__input" type="checkbox" />
@@ -34,7 +30,7 @@ pub fn Checkbox(
                 </If>
             </div>
             <div class="melt-checkbox__label">
-                { children(cx) }
+                { children() }
             </div>
         </div>
     }
diff --git a/src/code/mod.rs b/src/code/mod.rs
index a362bd1..e1aa131 100644
--- a/src/code/mod.rs
+++ b/src/code/mod.rs
@@ -1,10 +1,10 @@
 use leptos::*;
 
 #[component]
-pub fn Code(cx: Scope, children: Children) -> impl IntoView {
-    view! { cx,
+pub fn Code(children: Children) -> impl IntoView {
+    view! {
         <code class="melt-code">
-            { children(cx) }
+            { children() }
         </code>
     }
 }
diff --git a/src/components/if_comp.rs b/src/components/if_comp.rs
index ff6d007..708da33 100644
--- a/src/components/if_comp.rs
+++ b/src/components/if_comp.rs
@@ -1,5 +1,5 @@
-use leptos::*;
 use super::Fallback;
+use leptos::*;
 
 #[slot]
 pub struct Then {
@@ -14,7 +14,6 @@ pub struct ElseIf {
 
 #[component]
 pub fn If(
-    cx: Scope,
     #[prop(into)] cond: MaybeSignal<bool>,
     then: Then,
     #[prop(default=vec![])] else_if: Vec<ElseIf>,
@@ -22,13 +21,13 @@ pub fn If(
 ) -> impl IntoView {
     move || {
         if cond.get() {
-            (then.children)(cx).into_view(cx)
+            (then.children)().into_view()
         } else if let Some(else_if) = else_if.iter().find(|i| i.cond.get()) {
-            (else_if.children)(cx).into_view(cx)
+            (else_if.children)().into_view()
         } else if let Some(fallback) = &fallback {
-            (fallback.children)(cx).into_view(cx)
+            (fallback.children)().into_view()
         } else {
-            ().into_view(cx)
+            ().into_view()
         }
     }
 }
diff --git a/src/components/mod.rs b/src/components/mod.rs
index 64ae4a0..4f92fcf 100644
--- a/src/components/mod.rs
+++ b/src/components/mod.rs
@@ -2,8 +2,8 @@ mod if_comp;
 mod option_comp;
 
 pub use if_comp::*;
-pub use option_comp::*;
 use leptos::*;
+pub use option_comp::*;
 
 #[slot]
 pub struct Fallback {
diff --git a/src/components/option_comp.rs b/src/components/option_comp.rs
index d2a72b3..5f42639 100644
--- a/src/components/option_comp.rs
+++ b/src/components/option_comp.rs
@@ -1,22 +1,21 @@
-use leptos::*;
 use super::Fallback;
+use leptos::*;
 
 #[component]
 pub fn OptionComp<T, CF, IV>(
-    cx: Scope,
     value: Option<T>,
     children: CF,
     #[prop(optional)] fallback: Option<Fallback>,
 ) -> impl IntoView
 where
-    CF: Fn(Scope, T) -> IV + 'static,
+    CF: Fn(T) -> IV + 'static,
     IV: IntoView,
 {
     if let Some(value) = value {
-        children(cx, value).into_view(cx)
+        children(value).into_view()
     } else if let Some(fallback) = fallback {
-        (fallback.children)(cx).into_view(cx)
+        (fallback.children)().into_view()
     } else {
-        ().into_view(cx)
+        ().into_view()
     }
 }
diff --git a/src/icon/mod.rs b/src/icon/mod.rs
index 798aa87..54c6d2b 100644
--- a/src/icon/mod.rs
+++ b/src/icon/mod.rs
@@ -1,31 +1,30 @@
 // copy https://github.com/Carlosted/leptos-icons
 // leptos updated version causes leptos_icons error
 pub use icondata::*;
-use leptos::SignalGet;
+use leptos::*;
 
 /// The Icon component.
-#[leptos::component]
+#[component]
 pub fn Icon(
-    cx: leptos::Scope,
     /// The icon to show.
     #[prop(into)]
-    icon: leptos::MaybeSignal<Icon>,
+    icon: MaybeSignal<Icon>,
     /// The width of the icon (horizontal side length of the square surrounding the icon). Defaults to "1em".
     #[prop(into, optional)]
-    width: Option<leptos::MaybeSignal<String>>,
+    width: Option<MaybeSignal<String>>,
     /// The height of the icon (vertical side length of the square surrounding the icon). Defaults to "1em".
     #[prop(into, optional)]
-    height: Option<leptos::MaybeSignal<String>>,
+    height: Option<MaybeSignal<String>>,
     /// HTML class attribute.
     #[prop(into, optional)]
-    class: Option<leptos::MaybeSignal<String>>,
+    class: Option<MaybeSignal<String>>,
     /// HTML style attribute.
     #[prop(into, optional)]
-    style: Option<leptos::MaybeSignal<String>>,
-) -> impl leptos::IntoView {
+    style: Option<MaybeSignal<String>>,
+) -> impl IntoView {
     let icon: IconData = icon.get().into();
 
-    let mut svg = leptos::svg::svg(cx);
+    let mut svg = svg::svg();
     if let Some(classes) = class {
         svg = svg.classes(classes.get());
     }
@@ -45,7 +44,7 @@ pub fn Icon(
     // We ignore the width and height attributes of the icon, even if the user hasn't specified any.
     svg = svg.attr(
         "width",
-        leptos::Attribute::String(match (width, icon.width) {
+        Attribute::String(match (width, icon.width) {
             (Some(a), Some(_b)) => std::borrow::Cow::from(a.get()),
             (Some(a), None) => std::borrow::Cow::from(a.get()),
             (None, Some(_b)) => std::borrow::Cow::from("1em"),
@@ -54,7 +53,7 @@ pub fn Icon(
     );
     svg = svg.attr(
         "height",
-        leptos::Attribute::String(match (height, icon.height) {
+        Attribute::String(match (height, icon.height) {
             (Some(a), Some(_b)) => std::borrow::Cow::from(a.get()),
             (Some(a), None) => std::borrow::Cow::from(a.get()),
             (None, Some(_b)) => std::borrow::Cow::from("1em"),
@@ -79,5 +78,5 @@ pub fn Icon(
     svg = svg.attr("fill", icon.fill.unwrap_or("currentColor"));
     svg = svg.attr("role", "graphics-symbol");
     svg = svg.inner_html(icon.data);
-    leptos::IntoView::into_view(svg, cx)
+    IntoView::into_view(svg)
 }
diff --git a/src/image/mod.rs b/src/image/mod.rs
index c6cef32..2ec76d3 100644
--- a/src/image/mod.rs
+++ b/src/image/mod.rs
@@ -1,9 +1,7 @@
-
 use leptos::*;
 
 #[component]
 pub fn Image(
-    cx: Scope,
     #[prop(optional, into)] src: MaybeSignal<String>,
     #[prop(optional, into)] alt: MaybeSignal<String>,
     #[prop(optional, into)] width: MaybeSignal<String>,
@@ -11,7 +9,6 @@ pub fn Image(
     #[prop(optional, into)] border_radius: MaybeSignal<String>,
     #[prop(optional, into)] object_fit: MaybeSignal<String>,
 ) -> impl IntoView {
-
     let style = move || {
         let mut style = String::new();
 
@@ -24,7 +21,7 @@ pub fn Image(
         if !height.is_empty() {
             style.push_str(&format!("height: {height};"))
         }
-        
+
         let border_radius = border_radius.get();
         if !border_radius.is_empty() {
             style.push_str(&format!("border-radius: {border_radius};"))
@@ -33,7 +30,7 @@ pub fn Image(
         style
     };
     view! {
-        cx,
+
         <img src=move || src.get()  alt=move || alt.get() style=style object_fit=move || object_fit.get()/>
     }
-}
\ No newline at end of file
+}
diff --git a/src/input/mod.rs b/src/input/mod.rs
index 69c73bd..f53126f 100644
--- a/src/input/mod.rs
+++ b/src/input/mod.rs
@@ -25,21 +25,20 @@ impl InputType {
 
 #[component]
 pub fn Input(
-    cx: Scope,
     #[prop(into)] value: RwSignal<String>,
     #[prop(optional, into)] type_: MaybeSignal<InputType>,
 ) -> impl IntoView {
-    let theme = use_theme(cx, Theme::light);
+    let theme = use_theme(Theme::light);
     let class_name = mount_style("input", || style_sheet_str!("./src/input/input.css"));
 
-    let input_ref = create_node_ref::<html::Input>(cx);
-    input_ref.on_load(cx, move |input| {
+    let input_ref = create_node_ref::<html::Input>();
+    input_ref.on_load(move |input| {
         input.on(ev::input, move |ev| {
             value.set(event_target_value(&ev));
         });
     });
 
-    let css_vars = create_memo(cx, move |_| {
+    let css_vars = create_memo(move |_| {
         let mut css_vars = String::new();
         let theme = theme.get();
         let border_color_hover = theme.common.color_primary.clone();
@@ -49,7 +48,7 @@ pub fn Input(
         css_vars
     });
     view! {
-        cx, class=class_name,
+         class=class_name,
         <div class:melt-input=true style=move || css_vars.get()>
             <input type=move || type_.get().as_str() prop:value=move || value.get() ref=input_ref class="melt-input__input-el"/>
         </div>
diff --git a/src/input/theme.rs b/src/input/theme.rs
index 987197a..06ebcfe 100644
--- a/src/input/theme.rs
+++ b/src/input/theme.rs
@@ -1,16 +1,14 @@
 use crate::theme::ThemeMethod;
 
 #[derive(Clone)]
-pub struct InputTheme {
-
-}
+pub struct InputTheme {}
 
 impl ThemeMethod for InputTheme {
     fn light() -> Self {
-        Self {  }
+        Self {}
     }
 
     fn dark() -> Self {
-        Self {  }
+        Self {}
     }
-}
\ No newline at end of file
+}
diff --git a/src/layout/layout_header.rs b/src/layout/layout_header.rs
index eafa6f9..aa8bff8 100644
--- a/src/layout/layout_header.rs
+++ b/src/layout/layout_header.rs
@@ -2,13 +2,12 @@ use leptos::*;
 
 #[component]
 pub fn LayoutHeader(
-    cx: Scope,
     #[prop(optional, into)] style: MaybeSignal<String>,
     children: Children,
 ) -> impl IntoView {
-    view! { cx,
+    view! {
         <div class="melt-layout-header" style=move || style.get()>
-            { children(cx) }
+            { children() }
         </div>
     }
 }
diff --git a/src/layout/layout_sider.rs b/src/layout/layout_sider.rs
index 41bcb9d..47bdcc3 100644
--- a/src/layout/layout_sider.rs
+++ b/src/layout/layout_sider.rs
@@ -3,13 +3,13 @@ use leptos::*;
 use stylers::style_sheet_str;
 
 #[component]
-pub fn LayoutSider(cx: Scope, children: Children) -> impl IntoView {
+pub fn LayoutSider(children: Children) -> impl IntoView {
     let class_name = mount_style("layout-sider", || {
         style_sheet_str!("./src/layout/layout-sider.css")
     });
-    view! { cx, class=class_name,
+    view! {  class=class_name,
         <div class="melt-layout-sider">
-            { children(cx) }
+            { children() }
         </div>
     }
 }
diff --git a/src/layout/mod.rs b/src/layout/mod.rs
index 7828754..75523d5 100644
--- a/src/layout/mod.rs
+++ b/src/layout/mod.rs
@@ -25,7 +25,6 @@ impl LayoutPosition {
 
 #[component]
 pub fn Layout(
-    cx: Scope,
     #[prop(optional, into)] style: MaybeSignal<String>,
     #[prop(optional)] position: LayoutPosition,
     #[prop(optional, into)] has_sider: MaybeSignal<bool>,
@@ -33,16 +32,16 @@ pub fn Layout(
 ) -> impl IntoView {
     let class_name = mount_style("layout", || style_sheet_str!("./src/layout/layout.css"));
 
-    let style = create_memo(cx, move |_| {
+    let style = create_memo(move |_| {
         let mut style = style.get();
         if has_sider.get() {
             style.push_str("display: flex; flex-wrap: nowrap; flex-direction: row; width: 100;%")
         }
         style
     });
-    view! { cx, class=class_name,
+    view! {  class=class_name,
         <div class="melt-layout" class=("melt-layout--absolute-positioned", position == LayoutPosition::ABSOLUTE) style=move || style.get()>
-            { children(cx) }
+            { children() }
         </div>
     }
 }
diff --git a/src/menu/menu_item.rs b/src/menu/menu_item.rs
index 1059ec1..700f083 100644
--- a/src/menu/menu_item.rs
+++ b/src/menu/menu_item.rs
@@ -5,18 +5,17 @@ use stylers::style_sheet_str;
 
 #[component]
 pub fn MenuItem(
-    cx: Scope,
     #[prop(into)] key: MaybeSignal<&'static str>,
     #[prop(into)] label: MaybeSignal<String>,
 ) -> impl IntoView {
     let class_name = mount_style("menu-item", || style_sheet_str!("./src/menu/menu-item.css"));
-    let theme = use_theme(cx, Theme::light);
-    let menu = use_menu(cx);
+    let theme = use_theme(Theme::light);
+    let menu = use_menu();
     let onclick_select = move |_| {
         menu.set(MenuInjectionKey::new(key.get().to_string()));
     };
 
-    let css_vars = create_memo(cx, move |_| {
+    let css_vars = create_memo(move |_| {
         let mut css_vars = String::new();
         let theme = theme.get();
         let font_color = theme.common.color_primary.clone();
@@ -26,7 +25,7 @@ pub fn MenuItem(
         css_vars.push_str(&format!("--border-radius: {border_radius};"));
         css_vars
     });
-    view! {cx, class=class_name,
+    view! { class=class_name,
         <div class="melt-menu-item">
             <div class="melt-menu-item__content" class=("melt-menu-item__content--selected", move || menu.get().value == key.get()) on:click=onclick_select style=move || css_vars.get()>
                 { move || label.get() }
diff --git a/src/menu/mod.rs b/src/menu/mod.rs
index fc1608c..d028464 100644
--- a/src/menu/mod.rs
+++ b/src/menu/mod.rs
@@ -4,13 +4,9 @@ use leptos::*;
 pub use menu_item::*;
 
 #[component]
-pub fn Menu(
-    cx: Scope,
-    #[prop(into)] selected: RwSignal<String>,
-    children: Children,
-) -> impl IntoView {
-    let menu_injection_key = create_rw_signal(cx, MenuInjectionKey::new(selected.get()));
-    create_effect(cx, move |_| {
+pub fn Menu(#[prop(into)] selected: RwSignal<String>, children: Children) -> impl IntoView {
+    let menu_injection_key = create_rw_signal(MenuInjectionKey::new(selected.get()));
+    create_effect(move |_| {
         let selected_key = selected.get();
         let key = menu_injection_key.get_untracked();
         if selected_key != key.value {
@@ -18,17 +14,17 @@ pub fn Menu(
         }
     });
 
-    create_effect(cx, move |_| {
+    create_effect(move |_| {
         let selected_key = selected.get_untracked();
         let key = menu_injection_key.get();
         if selected_key != key.value {
             selected.set(key.value);
         }
     });
-    provide_context(cx, menu_injection_key);
-    view! {cx,
+    provide_context(menu_injection_key);
+    view! {
         <div class="melt-menu">
-            { children(cx) }
+            { children() }
         </div>
     }
 }
@@ -38,13 +34,12 @@ pub struct MenuInjectionKey {
     value: String,
 }
 
-
 impl MenuInjectionKey {
     pub fn new(value: String) -> Self {
         Self { value }
     }
 }
 
-pub fn use_menu(cx: Scope) -> RwSignal<MenuInjectionKey> {
-    use_context::<RwSignal<MenuInjectionKey>>(cx).expect("MenuInjectionKey not exist")
+pub fn use_menu() -> RwSignal<MenuInjectionKey> {
+    use_context::<RwSignal<MenuInjectionKey>>().expect("MenuInjectionKey not exist")
 }
diff --git a/src/mobile/nav_bar/mod.rs b/src/mobile/nav_bar/mod.rs
index d9b2a86..527ddd4 100644
--- a/src/mobile/nav_bar/mod.rs
+++ b/src/mobile/nav_bar/mod.rs
@@ -5,7 +5,6 @@ use web_sys::MouseEvent;
 
 #[component]
 pub fn NavBar(
-    cx: Scope,
     #[prop(optional, into)] title: MaybeSignal<&'static str>,
     #[prop(optional, into)] left_arrow: MaybeSignal<bool>,
     #[prop(optional, into)] left_text: MaybeSignal<&'static str>,
@@ -28,9 +27,9 @@ pub fn NavBar(
         }
     };
 
-    view! { cx, class=class_name,
+    view! {  class=class_name,
         <div class="melt-nav-bar">
-            <If cond=MaybeSignal::derive(cx, move || left_arrow.get() || !left_text.get().is_empty())>
+            <If cond=MaybeSignal::derive( move || left_arrow.get() || !left_text.get().is_empty())>
                 <Then slot>
                     <div class="melt-nav-bar__left" on:click=onclick_left>
                         <If cond=left_arrow>
@@ -45,7 +44,7 @@ pub fn NavBar(
             <div class="melt-nav-bar__center">
                 { move || title.get() }
             </div>
-            <If cond=MaybeSignal::derive(cx, move || !right_text.get().is_empty())>
+            <If cond=MaybeSignal::derive( move || !right_text.get().is_empty())>
                 <Then slot>
                     <div class="melt-nav-bar__right" on:click=onclick_right>
                         { right_text.get() }
diff --git a/src/mobile/tabbar/mod.rs b/src/mobile/tabbar/mod.rs
index 71a2627..a8e0f9b 100644
--- a/src/mobile/tabbar/mod.rs
+++ b/src/mobile/tabbar/mod.rs
@@ -6,17 +6,13 @@ use stylers::style_sheet_str;
 pub use tabbar_item::*;
 
 #[component]
-pub fn Tabbar(
-    cx: Scope,
-    #[prop(into)] selected: RwSignal<String>,
-    children: Children,
-) -> impl IntoView {
+pub fn Tabbar(#[prop(into)] selected: RwSignal<String>, children: Children) -> impl IntoView {
     let class_name = mount_style("tabbar", || {
         style_sheet_str!("./src/mobile/tabbar/tabbar.css")
     });
 
-    let tabbar_injection_key = create_rw_signal(cx, TabbarInjectionKey::new(selected.get()));
-    create_effect(cx, move |_| {
+    let tabbar_injection_key = create_rw_signal(TabbarInjectionKey::new(selected.get()));
+    create_effect(move |_| {
         let selected_key = selected.get();
         let key = tabbar_injection_key.get_untracked();
         if selected_key != key.value {
@@ -24,17 +20,17 @@ pub fn Tabbar(
         }
     });
 
-    create_effect(cx, move |_| {
+    create_effect(move |_| {
         let selected_key = selected.get_untracked();
         let key = tabbar_injection_key.get();
         if selected_key != key.value {
             selected.set(key.value);
         }
     });
-    provide_context(cx, tabbar_injection_key);
-    view! {cx, class=class_name,
+    provide_context(tabbar_injection_key);
+    view! { class=class_name,
         <div class="melt-tabbar">
-            { children(cx) }
+            { children() }
         </div>
     }
 }
@@ -50,6 +46,6 @@ impl TabbarInjectionKey {
     }
 }
 
-pub fn use_tabbar(cx: Scope) -> RwSignal<TabbarInjectionKey> {
-    use_context::<RwSignal<TabbarInjectionKey>>(cx).expect("TabbarInjectionKey not exist")
+pub fn use_tabbar() -> RwSignal<TabbarInjectionKey> {
+    use_context::<RwSignal<TabbarInjectionKey>>().expect("TabbarInjectionKey not exist")
 }
diff --git a/src/mobile/tabbar/tabbar_item.rs b/src/mobile/tabbar/tabbar_item.rs
index 2a79301..9bae566 100644
--- a/src/mobile/tabbar/tabbar_item.rs
+++ b/src/mobile/tabbar/tabbar_item.rs
@@ -6,7 +6,6 @@ use stylers::style_sheet_str;
 
 #[component]
 pub fn TabbarItem(
-    cx: Scope,
     #[prop(into)] name: MaybeSignal<&'static str>,
     #[prop(optional, into)] icon: Option<Icon>,
     children: Children,
@@ -14,13 +13,13 @@ pub fn TabbarItem(
     let class_name = mount_style("tabbar-item", || {
         style_sheet_str!("./src/mobile/tabbar/tabbar-item.css")
     });
-    let theme = use_theme(cx, Theme::light);
-    let tabbar = use_tabbar(cx);
+    let theme = use_theme(Theme::light);
+    let tabbar = use_tabbar();
     let onclick_select = move |_| {
         tabbar.set(TabbarInjectionKey::new(name.get().to_string()));
     };
 
-    let css_vars = create_memo(cx, move |_| {
+    let css_vars = create_memo(move |_| {
         let mut css_vars = String::new();
         let theme = theme.get();
         let font_color = theme.common.color_primary.clone();
@@ -28,13 +27,13 @@ pub fn TabbarItem(
         css_vars
     });
 
-    view! {cx, class=class_name,
+    view! { class=class_name,
         <div class="melt-tabbar-item" class=("melt-tabbar-item--selected", move || tabbar.get().value == name.get()) on:click=onclick_select style=move || css_vars.get()>
             <OptionComp value=icon bind:icon>
                 <Icon icon=icon width="22px" height="22px" class="melt-tabbar-item__icon"/>
             </OptionComp>
             <div class="melt-tabbar-item__content">
-                { children(cx) }
+                { children() }
             </div>
         </div>
     }
diff --git a/src/mobile/toast/mod.rs b/src/mobile/toast/mod.rs
index cd94eeb..d689e6a 100644
--- a/src/mobile/toast/mod.rs
+++ b/src/mobile/toast/mod.rs
@@ -9,16 +9,16 @@ pub struct ToastOptions {
     pub duration: Duration,
 }
 
-pub fn show_toast(cx: Scope, options: ToastOptions) {
+pub fn show_toast(options: ToastOptions) {
     let class_name = mount_style("toast", || style_sheet_str!("./src/mobile/toast/toast.css"));
 
     let parent = Element::from(document().body().expect("body element not to exist"));
-    let children = view! {cx, class=class_name,
+    let children = view! { class=class_name,
         <div class="melt-toast">
             { options.message }
         </div>
     };
-    let node = children.into_view(cx);
+    let node = children.into_view();
 
     #[cfg(all(target_arch = "wasm32"))]
     {
@@ -32,4 +32,9 @@ pub fn show_toast(cx: Scope, options: ToastOptions) {
             options.duration,
         );
     }
+    #[cfg(not(target_arch = "wasm32"))]
+    {
+        _ = parent;
+        _ = node;
+    }
 }
diff --git a/src/modal/mod.rs b/src/modal/mod.rs
index db5d3c9..d4e5538 100644
--- a/src/modal/mod.rs
+++ b/src/modal/mod.rs
@@ -13,7 +13,6 @@ pub struct ModalFooter {
 
 #[component]
 pub fn Modal(
-    cx: Scope,
     #[prop(into)] show: RwSignal<bool>,
     #[prop(optional, into)] title: MaybeSignal<&'static str>,
     children: Children,
@@ -22,7 +21,7 @@ pub fn Modal(
     let class_name = mount_style("modal", || style_sheet_str!("./src/modal/modal.css"));
 
     view! {
-        cx, class=class_name,
+         class=class_name,
         <Teleport>
             <div class="melt-modal-container" style=move || if show.get() { "" } else { "display: none" }>
                 <div class="melt-modal-mask"></div>
@@ -38,10 +37,10 @@ pub fn Modal(
                                 <Icon icon=Icon::from(AiIcon::AiCloseOutlined)/>
                             </span>
                         </CardHeaderExtra>
-                        { children(cx) }
+                        { children() }
                         <CardFooter slot if_=modal_footer.is_some()>
                             <OptionComp value=modal_footer.as_ref() bind:footer>
-                                { (footer.children)(cx) }
+                                { (footer.children)() }
                             </OptionComp>
                         </CardFooter>
                     </Card>
diff --git a/src/progress/mod.rs b/src/progress/mod.rs
index 90611fc..9c2421c 100644
--- a/src/progress/mod.rs
+++ b/src/progress/mod.rs
@@ -1,21 +1,22 @@
-use crate::{utils::mount_style::mount_style, components::*};
+use crate::{components::*, utils::mount_style::mount_style};
 use leptos::*;
 use stylers::style_sheet_str;
 
 #[component]
 pub fn Progress(
-    cx: Scope,
     #[prop(optional, into)] left_tip: MaybeSignal<&'static str>,
     #[prop(optional, into)] right_tip: MaybeSignal<&'static str>,
     percentage: ReadSignal<f64>,
 ) -> impl IntoView {
-    let class_name = mount_style("progress", || style_sheet_str!("./src/progress/progress.css"));
+    let class_name = mount_style("progress", || {
+        style_sheet_str!("./src/progress/progress.css")
+    });
     let style = move || format!("width: {}%", percentage.get());
     view! {
-        cx, class=class_name,
+         class=class_name,
         <div class="melt-progress">
             <span class="melt-progress__tip-left">
-                <If cond=MaybeSignal::derive(cx, move || !left_tip.get().is_empty())>
+                <If cond=MaybeSignal::derive( move || !left_tip.get().is_empty())>
                     <Then slot>
                         { left_tip.get() }
                     </Then>
@@ -27,7 +28,7 @@ pub fn Progress(
                 </span>
             </span>
             <span class="melt-progress__tip-right">
-                <If cond=MaybeSignal::derive(cx, move || !right_tip.get().is_empty())>
+                <If cond=MaybeSignal::derive( move || !right_tip.get().is_empty())>
                     <Then slot>
                         { right_tip.get() }
                     </Then>
diff --git a/src/select/mod.rs b/src/select/mod.rs
index ace4d30..53477cf 100644
--- a/src/select/mod.rs
+++ b/src/select/mod.rs
@@ -17,7 +17,6 @@ pub struct SelectOption<T> {
 
 #[component]
 pub fn Select<T>(
-    cx: Scope,
     #[prop(into)] value: RwSignal<Option<T>>,
     #[prop(optional, into)] options: MaybeSignal<Vec<SelectOption<T>>>,
 ) -> impl IntoView
@@ -26,8 +25,8 @@ where
 {
     let class_name = mount_style("select", || style_sheet_str!("./src/select/select.css"));
 
-    let theme = use_theme(cx, Theme::light);
-    let css_vars = create_memo(cx, move |_| {
+    let theme = use_theme(Theme::light);
+    let css_vars = create_memo(move |_| {
         let mut css_vars = String::new();
         let theme = theme.get();
         let bg_color = theme.common.color_primary;
@@ -37,9 +36,9 @@ where
         css_vars
     });
 
-    let is_show_popover = create_rw_signal(cx, false);
-    let trigger_ref = create_node_ref::<html::Div>(cx);
-    let popover_ref = create_node_ref::<html::Div>(cx);
+    let is_show_popover = create_rw_signal(false);
+    let trigger_ref = create_node_ref::<html::Div>();
+    let popover_ref = create_node_ref::<html::Div>();
     let show_popover = move |_| {
         let rect = trigger_ref.get().unwrap().get_bounding_client_rect();
         is_show_popover.set(true);
@@ -74,10 +73,10 @@ where
         }
         is_show_popover.set(false);
     });
-    on_cleanup(cx, timer);
+    on_cleanup(timer);
 
     let temp_options = options.clone();
-    let select_option_label = create_memo(cx, move |_| match value.get() {
+    let select_option_label = create_memo(move |_| match value.get() {
         Some(value) => temp_options
             .get()
             .iter()
@@ -85,7 +84,7 @@ where
             .map_or(String::new(), |v| v.label.clone()),
         None => String::new(),
     });
-    view! { cx, class=class_name,
+    view! {  class=class_name,
         <div class="melt-select" ref=trigger_ref on:click=show_popover style=move || css_vars.get()>
             {
                 move || select_option_label.get()
@@ -96,14 +95,14 @@ where
                 <For
                     each=move || options.get()
                     key=move |item| item.value.clone()
-                    view=move |cx, item| {
-                        let item = store_value(cx, item);
+                    view=move | item| {
+                        let item = store_value( item);
                         let onclick = move |_| {
                             let SelectOption { value: item_value, label: _ } = item.get_value();
                             value.set(Some(item_value));
                             is_show_popover.set(false);
                         };
-                        view! { cx, class=class_name,
+                        view! {  class=class_name,
                             <div class="melt-select-menu__item" class=("melt-select-menu__item-selected", move || value.get() == Some(item.get_value().value) ) on:click=onclick>
                                 { item.get_value().label }
                             </div>
diff --git a/src/slider/mod.rs b/src/slider/mod.rs
index 12fa4db..783385b 100644
--- a/src/slider/mod.rs
+++ b/src/slider/mod.rs
@@ -9,12 +9,11 @@ use wasm_bindgen::JsCast;
 
 #[component]
 pub fn Slider(
-    cx: Scope,
     #[prop(into)] value: RwSignal<f64>,
     #[prop(default = MaybeSignal::Static(100f64), into)] max: MaybeSignal<f64>,
 ) -> impl IntoView {
-    let theme = use_theme(cx, Theme::light);
-    let css_vars = create_memo(cx, move |_| {
+    let theme = use_theme(Theme::light);
+    let css_vars = create_memo(move |_| {
         let mut css_vars = String::new();
         let theme = theme.get();
         let bg_color = theme.common.color_primary;
@@ -23,7 +22,7 @@ pub fn Slider(
         css_vars
     });
 
-    let percentage = create_memo(cx, move |_| {
+    let percentage = create_memo(move |_| {
         if value.get() < 0.0 || max.get() <= 0.0 {
             0f64
         } else if value.get() >= max.get() {
@@ -38,9 +37,9 @@ pub fn Slider(
         value.set(val);
     };
 
-    let rail_ref = create_node_ref::<html::Div>(cx);
-    let (mouse_move_value, set_mouse_move_value) = create_signal::<Option<f64>>(cx, None);
-    let (is_mouse_move, set_mouse_move) = create_signal(cx, false);
+    let rail_ref = create_node_ref::<html::Div>();
+    let (mouse_move_value, set_mouse_move_value) = create_signal::<Option<f64>>(None);
+    let (is_mouse_move, set_mouse_move) = create_signal(false);
     let on_mouse_down = move |_| {
         set_mouse_move.set(true);
     };
@@ -48,7 +47,7 @@ pub fn Slider(
     let on_mouse_up = window_event_listener(ev::mouseup, move |_| {
         set_mouse_move.set(false);
     });
-    on_cleanup(cx, on_mouse_up);
+    on_cleanup(on_mouse_up);
 
     let on_mouse_move = window_event_listener(ev::mousemove, move |ev| {
         if is_mouse_move.get_untracked() {
@@ -69,9 +68,9 @@ pub fn Slider(
             };
         }
     });
-    on_cleanup(cx, on_mouse_move);
+    on_cleanup(on_mouse_move);
 
-    view! {cx, class=class_name,
+    view! { class=class_name,
         <div class="melt-slider" style=move || css_vars.get()>
             <div class="melt-slider-rail" ref=rail_ref>
                 <div class="melt-slider-rail__fill" style=move || format!("width: {}%", percentage.get())></div>
diff --git a/src/space/mod.rs b/src/space/mod.rs
index 9c4d143..d1be6ab 100644
--- a/src/space/mod.rs
+++ b/src/space/mod.rs
@@ -13,7 +13,7 @@ pub enum SpaceGap {
 }
 
 #[component]
-pub fn Space(cx: Scope, #[prop(optional)] gap: SpaceGap, children: Children) -> impl IntoView {
+pub fn Space(#[prop(optional)] gap: SpaceGap, children: Children) -> impl IntoView {
     let class_name = mount_style("space", || style_sheet_str!("./src/space/space.css"));
     let gap = match gap {
         SpaceGap::SMALL => "gap: 4px 8px".into(),
@@ -24,12 +24,12 @@ pub fn Space(cx: Scope, #[prop(optional)] gap: SpaceGap, children: Children) ->
     };
 
     view! {
-        cx, class=class_name,
+         class=class_name,
         <div class="melt-space" style=format!("{gap};")>
             {
-                children(cx).nodes.into_iter().map(|node| {
+                children().nodes.into_iter().map(|node| {
                     view! {
-                        cx, class=class_name,
+                         class=class_name,
                         <div class="melt-space__item">
                             {node}
                         </div>
diff --git a/src/table/mod.rs b/src/table/mod.rs
index d264625..8647a99 100644
--- a/src/table/mod.rs
+++ b/src/table/mod.rs
@@ -3,11 +3,11 @@ use leptos::*;
 use stylers::style_sheet_str;
 
 #[component]
-pub fn Table(cx: Scope, children: Children) -> impl IntoView {
+pub fn Table(children: Children) -> impl IntoView {
     let class_name = mount_style("table", || style_sheet_str!("./src/table/table.css"));
-    view! {cx, class=class_name,
+    view! { class=class_name,
         <table class="melt-table">
-            {children(cx)}
+            {children()}
         </table>
     }
 }
diff --git a/src/tabs/mod.rs b/src/tabs/mod.rs
index 4bbf60b..57971dd 100644
--- a/src/tabs/mod.rs
+++ b/src/tabs/mod.rs
@@ -5,18 +5,15 @@ use stylers::style_sheet_str;
 pub use tab::*;
 
 #[component]
-pub fn Tabs(cx: Scope, active_key: RwSignal<&'static str>, children: Children) -> impl IntoView {
+pub fn Tabs(active_key: RwSignal<&'static str>, children: Children) -> impl IntoView {
     let class_name = mount_style("tabs", || style_sheet_str!("./src/tabs/tabs.css"));
-    let tab_options_vec = create_rw_signal(cx, vec![]);
-    provide_context(
-        cx,
-        TabsInjectionKey {
-            active_key: active_key.clone(),
-            tab_options_vec: tab_options_vec.clone(),
-        },
-    );
-    let theme = use_theme(cx, Theme::light);
-    let css_vars = create_memo(cx, move |_| {
+    let tab_options_vec = create_rw_signal(vec![]);
+    provide_context(TabsInjectionKey {
+        active_key: active_key.clone(),
+        tab_options_vec: tab_options_vec.clone(),
+    });
+    let theme = use_theme(Theme::light);
+    let css_vars = create_memo(move |_| {
         let mut css_vars = String::new();
         let theme = theme.get();
         let color_primary = theme.common.color_primary.clone();
@@ -26,22 +23,22 @@ pub fn Tabs(cx: Scope, active_key: RwSignal<&'static str>, children: Children) -
         css_vars
     });
 
-    let label_line = create_rw_signal::<Option<TabsLabelLine>>(cx, None);
-    let label_line_style = create_memo(cx, move |_| {
+    let label_line = create_rw_signal::<Option<TabsLabelLine>>(None);
+    let label_line_style = create_memo(move |_| {
         let mut style = String::new();
         if let Some(line) = label_line.get() {
             style.push_str(&format!("width: {}px; left: {}px", line.width, line.left))
         }
         style
     });
-    let label_list_ref = create_node_ref::<html::Div>(cx);
+    let label_list_ref = create_node_ref::<html::Div>();
 
-    view! { cx, class=class_name,
+    view! {  class=class_name,
         <div class="melt-tabs" style=move || css_vars.get()>
             <div class="melt-tabs__label-list" ref=label_list_ref>
-                <For each=move || tab_options_vec.get() key=move |v| v.key.clone() view=move |cx, options| {
-                    let label_ref = create_node_ref::<html::Span>(cx);
-                    create_effect(cx, move |_| {
+                <For each=move || tab_options_vec.get() key=move |v| v.key.clone() view=move | options| {
+                    let label_ref = create_node_ref::<html::Span>();
+                    create_effect( move |_| {
                         let Some(label) = label_ref.get() else {
                             return;
                         };
@@ -59,7 +56,7 @@ pub fn Tabs(cx: Scope, active_key: RwSignal<&'static str>, children: Children) -
                             });
                         }
                     });
-                    view! {cx, class=class_name,
+                    view! { class=class_name,
                         <span class="melt-tabs__label" class=("melt-tabs__label--active", move || options.key == active_key.get())
                             on:click=move |_| active_key.set(options.key)
                             ref=label_ref
@@ -72,7 +69,7 @@ pub fn Tabs(cx: Scope, active_key: RwSignal<&'static str>, children: Children) -
                 <span class="melt-tabs-label__line" style=move || label_line_style.get()></span>
             </div>
             <div>
-                { children(cx) }
+                { children() }
             </div>
         </div>
     }
@@ -102,6 +99,6 @@ impl TabsInjectionKey {
     }
 }
 
-pub fn use_tabs(cx: Scope) -> TabsInjectionKey {
-    use_context::<TabsInjectionKey>(cx).expect("TabsInjectionKey not exist")
+pub fn use_tabs() -> TabsInjectionKey {
+    use_context::<TabsInjectionKey>().expect("TabsInjectionKey not exist")
 }
diff --git a/src/tabs/tab.rs b/src/tabs/tab.rs
index be4fedf..7d1c15f 100644
--- a/src/tabs/tab.rs
+++ b/src/tabs/tab.rs
@@ -10,13 +10,13 @@ pub(crate) struct TabOptions {
 }
 
 #[component]
-pub fn Tab(cx: Scope, key: &'static str, label: &'static str, children: Children) -> impl IntoView {
+pub fn Tab(key: &'static str, label: &'static str, children: Children) -> impl IntoView {
     let class_name = mount_style("tab", || style_sheet_str!("./src/tabs/tab.css"));
-    let tabs = use_tabs(cx);
+    let tabs = use_tabs();
     tabs.push_tab_options(TabOptions { key, label });
-    view! { cx, class=class_name,
+    view! {  class=class_name,
         <div class="melt-tab" class=("melt-tab--hidden", move || key != tabs.get_key()) >
-            { children(cx) }
+            { children() }
         </div>
     }
 }
diff --git a/src/teleport/mod.rs b/src/teleport/mod.rs
index 7670793..2e8fd0e 100644
--- a/src/teleport/mod.rs
+++ b/src/teleport/mod.rs
@@ -3,11 +3,7 @@ use web_sys::Element;
 
 /// https://github.com/solidjs/solid/blob/main/packages/solid/web/src/index.ts#L56
 #[component]
-pub fn Teleport(
-    cx: Scope,
-    #[prop(optional)] to: Option<&'static str>,
-    children: Children,
-) -> impl IntoView {
+pub fn Teleport(#[prop(optional)] to: Option<&'static str>, children: Children) -> impl IntoView {
     let parent = if let Some(to) = to {
         document()
             .query_selector(to)
@@ -20,16 +16,15 @@ pub fn Teleport(
     #[cfg(all(target_arch = "wasm32"))]
     {
         use leptos_dom::Mountable;
-        let node = children(cx).into_view(cx);
+        let node = children().into_view();
         parent.append_child(&node.get_mountable_node()).unwrap();
     }
 
     #[cfg(not(target_arch = "wasm32"))]
     {
-        _ = cx;
         _ = parent;
         _ = children;
     }
 
-    view! { cx, <></> }
+    view! {  <></> }
 }
diff --git a/src/theme/common.rs b/src/theme/common.rs
index ba2b5df..76e2897 100644
--- a/src/theme/common.rs
+++ b/src/theme/common.rs
@@ -76,4 +76,4 @@ impl ThemeMethod for CommonTheme {
             ..CommonTheme::common()
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/theme/mod.rs b/src/theme/mod.rs
index ed4fd61..ab0281b 100644
--- a/src/theme/mod.rs
+++ b/src/theme/mod.rs
@@ -50,16 +50,15 @@ impl ThemeMethod for Theme {
     }
 }
 
-pub fn use_theme(cx: Scope, default: impl Fn() -> Theme) -> ReadSignal<Theme> {
-    use_context::<ReadSignal<Theme>>(cx).unwrap_or_else(|| create_signal(cx, default()).0)
+pub fn use_theme(default: impl Fn() -> Theme) -> ReadSignal<Theme> {
+    use_context::<ReadSignal<Theme>>().unwrap_or_else(|| create_signal(default()).0)
 }
 
 #[cfg(test)]
 mod tests {
     use super::{use_theme, Theme};
-    use leptos::*;
 
-    fn _t_use_theme(cx: Scope) {
-        use_theme(cx, Theme::dark);
+    fn _t_use_theme() {
+        use_theme(Theme::dark);
     }
 }
diff --git a/src/utils/dom.rs b/src/utils/dom.rs
index f716f6e..22cd95b 100644
--- a/src/utils/dom.rs
+++ b/src/utils/dom.rs
@@ -25,4 +25,4 @@ where
         Box::new(move |e| cb(e.unchecked_into::<E::EventType>())),
         event.name(),
     )
-}
\ No newline at end of file
+}
diff --git a/src/utils/mod.rs b/src/utils/mod.rs
index 97de455..6a1aceb 100644
--- a/src/utils/mod.rs
+++ b/src/utils/mod.rs
@@ -1,2 +1,2 @@
-pub(crate) mod mount_style;
 pub mod dom;
+pub(crate) mod mount_style;
diff --git a/src/wave/mod.rs b/src/wave/mod.rs
index 7e9746f..b076dba 100644
--- a/src/wave/mod.rs
+++ b/src/wave/mod.rs
@@ -3,13 +3,13 @@ use leptos::*;
 use stylers::style_sheet_str;
 
 #[component]
-pub fn Wave(cx: Scope, children: Children) -> impl IntoView {
+pub fn Wave(children: Children) -> impl IntoView {
     let class_name = mount_style("wave", || style_sheet_str!("./src/wave/wave.css"));
-    let (css_vars, set_css_vars) = create_signal(cx, String::new());
-    let wave_ref = create_node_ref::<html::Div>(cx);
-    wave_ref.on_load(cx, move |wave| {
+    let (css_vars, set_css_vars) = create_signal(String::new());
+    let wave_ref = create_node_ref::<html::Div>();
+    wave_ref.on_load(move |wave| {
         wave.on(ev::mousedown, move |ev| {
-            wave_ref.on_load(cx, move |wave| {
+            wave_ref.on_load(move |wave| {
                 let rect = wave.get_bounding_client_rect();
                 let client_x = f64::from(ev.client_x());
                 let client_y = f64::from(ev.client_y());
@@ -22,9 +22,9 @@ pub fn Wave(cx: Scope, children: Children) -> impl IntoView {
         });
     });
     view! {
-        cx, class=class_name,
+         class=class_name,
         <div class="melt-wave" ref=wave_ref style=move || css_vars.get()>
-            { children(cx) }
+            { children() }
         </div>
     }
 }

From 3a1cb72937b669d958fa914e6bfb58b5d79d93b1 Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Tue, 29 Aug 2023 09:23:53 +0800
Subject: [PATCH 2/5] refactor: window_event_listener

---
 src/select/mod.rs |  9 ++-------
 src/slider/mod.rs | 10 +++-------
 src/utils/dom.rs  | 28 ----------------------------
 src/utils/mod.rs  |  1 -
 4 files changed, 5 insertions(+), 43 deletions(-)
 delete mode 100644 src/utils/dom.rs

diff --git a/src/select/mod.rs b/src/select/mod.rs
index 53477cf..8778e5c 100644
--- a/src/select/mod.rs
+++ b/src/select/mod.rs
@@ -1,9 +1,4 @@
-use crate::{
-    teleport::Teleport,
-    theme::use_theme,
-    utils::{dom::window_event_listener, mount_style::mount_style},
-    Theme,
-};
+use crate::{teleport::Teleport, theme::use_theme, utils::mount_style::mount_style, Theme};
 use leptos::*;
 use std::hash::Hash;
 use stylers::style_sheet_str;
@@ -73,7 +68,7 @@ where
         }
         is_show_popover.set(false);
     });
-    on_cleanup(timer);
+    on_cleanup(move || timer.remove());
 
     let temp_options = options.clone();
     let select_option_label = create_memo(move |_| match value.get() {
diff --git a/src/slider/mod.rs b/src/slider/mod.rs
index 783385b..1daa6c6 100644
--- a/src/slider/mod.rs
+++ b/src/slider/mod.rs
@@ -1,8 +1,4 @@
-use crate::{
-    theme::use_theme,
-    utils::{dom::window_event_listener, mount_style::mount_style},
-    Theme,
-};
+use crate::{theme::use_theme, utils::mount_style::mount_style, Theme};
 use leptos::*;
 use stylers::style_sheet_str;
 use wasm_bindgen::JsCast;
@@ -47,7 +43,7 @@ pub fn Slider(
     let on_mouse_up = window_event_listener(ev::mouseup, move |_| {
         set_mouse_move.set(false);
     });
-    on_cleanup(on_mouse_up);
+    on_cleanup(move || on_mouse_up.remove());
 
     let on_mouse_move = window_event_listener(ev::mousemove, move |ev| {
         if is_mouse_move.get_untracked() {
@@ -68,7 +64,7 @@ pub fn Slider(
             };
         }
     });
-    on_cleanup(on_mouse_move);
+    on_cleanup(move || on_mouse_move.remove());
 
     view! { class=class_name,
         <div class="melt-slider" style=move || css_vars.get()>
diff --git a/src/utils/dom.rs b/src/utils/dom.rs
deleted file mode 100644
index 22cd95b..0000000
--- a/src/utils/dom.rs
+++ /dev/null
@@ -1,28 +0,0 @@
-use leptos::window;
-use leptos_dom::ev;
-use std::borrow::Cow;
-use wasm_bindgen::{prelude::Closure, JsCast};
-
-pub fn window_event_listener<E: ev::EventDescriptor + 'static>(
-    event: E,
-    cb: impl Fn(E::EventType) + 'static,
-) -> impl FnOnce() -> ()
-where
-    E::EventType: JsCast,
-{
-    fn wel(
-        cb: Box<dyn FnMut(web_sys::Event)>,
-        event_name: Cow<'static, str>,
-    ) -> impl FnOnce() -> () + 'static {
-        let cb = Closure::wrap(cb).into_js_value();
-        _ = window().add_event_listener_with_callback(&event_name, cb.unchecked_ref());
-        move || {
-            _ = window().remove_event_listener_with_callback(&event_name, cb.unchecked_ref());
-        }
-    }
-
-    wel(
-        Box::new(move |e| cb(e.unchecked_into::<E::EventType>())),
-        event.name(),
-    )
-}
diff --git a/src/utils/mod.rs b/src/utils/mod.rs
index 6a1aceb..f8a5cd4 100644
--- a/src/utils/mod.rs
+++ b/src/utils/mod.rs
@@ -1,2 +1 @@
-pub mod dom;
 pub(crate) mod mount_style;

From 9b0947866565ef0cec7c0667137a7c60aba17b49 Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Tue, 29 Aug 2023 11:09:28 +0800
Subject: [PATCH 3/5] fix: untracked

---
 gh-pages/README.md         | 3 +++
 gh-pages/Trunk.toml        | 2 +-
 gh-pages/src/pages/home.rs | 8 +++-----
 src/menu/mod.rs            | 2 +-
 4 files changed, 8 insertions(+), 7 deletions(-)
 create mode 100644 gh-pages/README.md

diff --git a/gh-pages/README.md b/gh-pages/README.md
new file mode 100644
index 0000000..51063f2
--- /dev/null
+++ b/gh-pages/README.md
@@ -0,0 +1,3 @@
+## Used
+
+Run the `trunk serve` command and then open the `http://127.0.0.1:6421/melt-ui` URL
diff --git a/gh-pages/Trunk.toml b/gh-pages/Trunk.toml
index e45af6e..bb3d0da 100644
--- a/gh-pages/Trunk.toml
+++ b/gh-pages/Trunk.toml
@@ -2,7 +2,7 @@
 target = "index.html"
 public_url = "/melt-ui/"
 dist = "../docs"
-release = true
+# release = true
 
 [watch]
 watch = [
diff --git a/gh-pages/src/pages/home.rs b/gh-pages/src/pages/home.rs
index 16cd39d..02db9ef 100644
--- a/gh-pages/src/pages/home.rs
+++ b/gh-pages/src/pages/home.rs
@@ -5,13 +5,11 @@ use melt_ui::*;
 
 #[component]
 pub fn Home() -> impl IntoView {
-    let query_map = use_query_map().get();
+    let query_map = use_query_map().get_untracked();
     if let Some(path) = query_map.get("path") {
         let path = store_value(path.clone());
-        request_animation_frame(move || {
-            let navigate = use_navigate();
-            navigate(&path.get_value(), Default::default());
-        });
+        let navigate = use_navigate();
+        navigate(&path.get_value(), Default::default());
     }
     view! {
         <Layout position=LayoutPosition::ABSOLUTE>
diff --git a/src/menu/mod.rs b/src/menu/mod.rs
index d028464..6a3fce2 100644
--- a/src/menu/mod.rs
+++ b/src/menu/mod.rs
@@ -5,7 +5,7 @@ pub use menu_item::*;
 
 #[component]
 pub fn Menu(#[prop(into)] selected: RwSignal<String>, children: Children) -> impl IntoView {
-    let menu_injection_key = create_rw_signal(MenuInjectionKey::new(selected.get()));
+    let menu_injection_key = create_rw_signal(MenuInjectionKey::new(selected.get_untracked()));
     create_effect(move |_| {
         let selected_key = selected.get();
         let key = menu_injection_key.get_untracked();

From 3e4e39a3942126fd081e5d3ecb4be3359f7618fb Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Wed, 30 Aug 2023 17:08:49 +0800
Subject: [PATCH 4/5] feat: upgrade leptos to 0.5.0-beta2

---
 Cargo.toml          |  4 ++--
 gh-pages/Cargo.toml |  4 ++--
 gh-pages/src/app.rs | 14 +++-----------
 src/icon/mod.rs     | 16 ++++++++--------
 src/theme/common.rs |  4 ----
 5 files changed, 15 insertions(+), 27 deletions(-)

diff --git a/Cargo.toml b/Cargo.toml
index 5d939a4..6b26d6c 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -13,10 +13,10 @@ license = "MIT"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-leptos = { version = "0.5.0-beta", features = ["csr"] }
+leptos = { version = "0.5.0-beta2",  features = ["csr"] }
 stylers = { git = "https://github.com/abishekatp/stylers", rev = "4bfd2df" }
 web-sys = { version = "0.3.62", features = ["DomRect"] }
-leptos_dom = { version = "0.5.0-beta" }
+leptos_dom = { version = "0.5.0-beta2" }
 wasm-bindgen = "0.2.85"
 icondata = { version = "0.0.7", features = [
     "AiCloseOutlined",
diff --git a/gh-pages/Cargo.toml b/gh-pages/Cargo.toml
index 90fdc01..8ce4aa6 100644
--- a/gh-pages/Cargo.toml
+++ b/gh-pages/Cargo.toml
@@ -6,12 +6,12 @@ edition = "2021"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-leptos = { version = "0.5.0-beta", features = ["csr"] }
+leptos = { version = "0.5.0-beta2", features = ["csr"] }
 melt-ui = { path = "../" }
 icondata = { version = "0.0.7", features = [
     "AiCloseOutlined",
     "AiCheckOutlined",
 ] }
-leptos_router = { version = "0.5.0-beta", features = ["csr"] }
+leptos_router = { version = "0.5.0-beta2", features = ["csr"] }
 indoc = "2.0.1"
 regex = "1.8.2"
diff --git a/gh-pages/src/app.rs b/gh-pages/src/app.rs
index 98fb360..1a130da 100644
--- a/gh-pages/src/app.rs
+++ b/gh-pages/src/app.rs
@@ -10,12 +10,6 @@ pub fn App() -> impl IntoView {
                 <Route path="/" view=move || view! {
                     <Home />
                 } />
-                <Route path="/menu" view=move || view! {
-                    <MenuPage />
-                } />
-                <Route path="/slider" view=move || view! {
-                    <SliderPage />
-                } />
                 <Route path="/components" view=move || view! {
                     <ComponentsPage />
                 } >
@@ -56,15 +50,13 @@ pub fn App() -> impl IntoView {
                         <SelectPage />
                     } />
                 </Route>
-            </Routes>
-            <Routes base="/melt-ui/mobile".to_string()>
-                <Route path="/tabbar" view=move || view! {
+                <Route path="/mobile/tabbar" view=move || view! {
                     <TabbarPage />
                 } />
-                <Route path="/nav-bar" view=move || view! {
+                <Route path="/mobile/nav-bar" view=move || view! {
                     <NavBarPage />
                 } />
-                <Route path="/toast" view=move || view! {
+                <Route path="/mobile/toast" view=move || view! {
                     <ToastPage />
                 } />
             </Routes>
diff --git a/src/icon/mod.rs b/src/icon/mod.rs
index 54c6d2b..7309210 100644
--- a/src/icon/mod.rs
+++ b/src/icon/mod.rs
@@ -45,19 +45,19 @@ pub fn Icon(
     svg = svg.attr(
         "width",
         Attribute::String(match (width, icon.width) {
-            (Some(a), Some(_b)) => std::borrow::Cow::from(a.get()),
-            (Some(a), None) => std::borrow::Cow::from(a.get()),
-            (None, Some(_b)) => std::borrow::Cow::from("1em"),
-            (None, None) => std::borrow::Cow::from("1em"),
+            (Some(a), Some(_b)) => Oco::from(a.get()),
+            (Some(a), None) => Oco::from(a.get()),
+            (None, Some(_b)) => Oco::from("1em"),
+            (None, None) => Oco::from("1em"),
         }),
     );
     svg = svg.attr(
         "height",
         Attribute::String(match (height, icon.height) {
-            (Some(a), Some(_b)) => std::borrow::Cow::from(a.get()),
-            (Some(a), None) => std::borrow::Cow::from(a.get()),
-            (None, Some(_b)) => std::borrow::Cow::from("1em"),
-            (None, None) => std::borrow::Cow::from("1em"),
+            (Some(a), Some(_b)) => Oco::from(a.get()),
+            (Some(a), None) => Oco::from(a.get()),
+            (None, Some(_b)) => Oco::from("1em"),
+            (None, None) => Oco::from("1em"),
         }),
     );
     if let Some(view_box) = icon.view_box {
diff --git a/src/theme/common.rs b/src/theme/common.rs
index 76e2897..7f3bbf4 100644
--- a/src/theme/common.rs
+++ b/src/theme/common.rs
@@ -31,24 +31,20 @@ impl CommonTheme {
     fn common() -> Self {
         Self {
             font_family: "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'".into(),
-            
             color_primary: "".into(),
             color_success: "".into(),
             color_warning: "".into(),
             color_error: "".into(),
-
             font_size: "14px".into(),
             font_size_small: "12px".into(),
             font_size_medium: "16px".into(),
             font_size_large: "20px".into(),
             font_size_huge: "24px".into(),
-
             line_height: "22px".into(),
             line_height_small: "20px".into(),
             line_height_medium: "24px".into(),
             line_height_large: "28px".into(),
             line_height_huge: "32px".into(),
-
             border_radius: "3px".into(),
             border_radius_small: "2px".into(),
             border_radius_medium: "4px".into(),

From 7a51c2d68b579cb2db0166634f40d53559df06cd Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Fri, 1 Sep 2023 10:37:36 +0800
Subject: [PATCH 5/5] refactor: gh-pages

---
 gh-pages/src/app.rs        | 62 +++++++++++---------------------------
 gh-pages/src/main.rs       |  2 +-
 gh-pages/src/pages/home.rs |  3 +-
 3 files changed, 19 insertions(+), 48 deletions(-)

diff --git a/gh-pages/src/app.rs b/gh-pages/src/app.rs
index 1a130da..fe249f7 100644
--- a/gh-pages/src/app.rs
+++ b/gh-pages/src/app.rs
@@ -7,58 +7,30 @@ pub fn App() -> impl IntoView {
     view! {
         <Router base="/melt-ui">
             <Routes base="/melt-ui".to_string() >
-                <Route path="/" view=move || view! {
-                    <Home />
-                } />
-                <Route path="/components" view=move || view! {
-                    <ComponentsPage />
-                } >
-                    <Route path="/menu" view=move || view! {
-                        <MenuPage />
-                    } />
-                    <Route path="/slider" view=move || view! {
-                        <SliderPage />
-                    } />
-                    <Route path="/tabbar" view=move || view! {
+                <Route path="/" view=Home />
+                <Route path="/components" view=ComponentsPage>
+                    <Route path="/menu" view=MenuPage />
+                    <Route path="/slider" view=SliderPage />
+                    <Route path="/tabbar" view=|| view! {
                         <MobilePage path="/melt-ui?path=/mobile/tabbar" />
                     } />
-                    <Route path="/nav-bar" view=move || view! {
+                    <Route path="/nav-bar" view=|| view! {
                         <MobilePage path="/melt-ui?path=/mobile/nav-bar" />
                     } />
-                    <Route path="/input" view=move || view! {
-                        <InputPage />
-                    } />
-                    <Route path="/image" view=move || view! {
-                        <ImagePage />
-                    } />
-                    <Route path="/modal" view=move || view! {
-                        <ModalPage />
-                    } />
-                    <Route path="/button" view=move || view! {
-                        <ButtonPage />
-                    } />
-                    <Route path="/checkbox" view=move || view! {
-                        <CheckboxPage />
-                    } />
-                    <Route path="/toast" view=move || view! {
+                    <Route path="/input" view=InputPage />
+                    <Route path="/image" view=ImagePage />
+                    <Route path="/modal" view=ModalPage />
+                    <Route path="/button" view=ButtonPage />
+                    <Route path="/checkbox" view=CheckboxPage />
+                    <Route path="/toast" view=|| view! {
                         <MobilePage path="/melt-ui?path=/mobile/toast" />
                     } />
-                    <Route path="/tabs" view=move || view! {
-                        <TabsPage />
-                    } />
-                    <Route path="/select" view=move || view! {
-                        <SelectPage />
-                    } />
+                    <Route path="/tabs" view=TabsPage />
+                    <Route path="/select" view=SelectPage />
                 </Route>
-                <Route path="/mobile/tabbar" view=move || view! {
-                    <TabbarPage />
-                } />
-                <Route path="/mobile/nav-bar" view=move || view! {
-                    <NavBarPage />
-                } />
-                <Route path="/mobile/toast" view=move || view! {
-                    <ToastPage />
-                } />
+                <Route path="/mobile/tabbar" view=TabbarPage />
+                <Route path="/mobile/nav-bar" view=NavBarPage />
+                <Route path="/mobile/toast" view=ToastPage />
             </Routes>
         </Router>
     }
diff --git a/gh-pages/src/main.rs b/gh-pages/src/main.rs
index a082bc4..e533a1a 100644
--- a/gh-pages/src/main.rs
+++ b/gh-pages/src/main.rs
@@ -6,5 +6,5 @@ use app::*;
 use leptos::*;
 
 fn main() {
-    mount_to_body(|| view! {  <App/> })
+    mount_to_body(App)
 }
diff --git a/gh-pages/src/pages/home.rs b/gh-pages/src/pages/home.rs
index 02db9ef..3761036 100644
--- a/gh-pages/src/pages/home.rs
+++ b/gh-pages/src/pages/home.rs
@@ -7,9 +7,8 @@ use melt_ui::*;
 pub fn Home() -> impl IntoView {
     let query_map = use_query_map().get_untracked();
     if let Some(path) = query_map.get("path") {
-        let path = store_value(path.clone());
         let navigate = use_navigate();
-        navigate(&path.get_value(), Default::default());
+        navigate(path, Default::default());
     }
     view! {
         <Layout position=LayoutPosition::ABSOLUTE>