ported to leptos 0.5 alpha

.idea/icon.svg

@@ -2,6 +2,17 @@
         "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg width="100%" height="100%" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg"
      style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <style>
+        path.black {
+            fill: #1e1838;
+        }
+
+        @media (prefers-color-scheme: dark) {
+            path.black {
+                fill: white;
+            }
+        }
+    </style>
     <path d="M16.114,22.343c-1.714,-0 -3.2,-0.914 -3.885,-2.514c-0.458,-1.029 -0.572,-2.172 -0.229,-3.315c0.343,-1.143 1.143,-1.943 2.171,-2.514c0.572,-0.343 1.258,-0.457 1.829,-0.457c1.714,-0 3.2,0.914 3.886,2.514c1.028,2.172 0.114,4.8 -2.057,5.829c-0.458,0.228 -1.029,0.457 -1.715,0.457Z"
           style="fill:#e1393a;fill-rule:nonzero;"/>
     <path d="M16.114,15.943c0.572,-0 1.486,0.343 1.829,1.143c0.343,0.685 0.228,1.257 0.114,1.6c-0.114,0.343 -0.343,0.8 -1.028,1.143c-0.229,0.114 -0.572,0.228 -0.915,0.228c-0.571,0 -1.485,-0.343 -1.828,-1.143c-0.457,-1.028 -0.115,-2.285 0.914,-2.743c0.343,-0.228 0.571,-0.228 0.914,-0.228Zm0,-4.572c-0.914,0 -1.943,0.229 -2.857,0.686c-3.314,1.486 -4.686,5.486 -3.086,8.8c1.143,2.4 3.543,3.772 5.943,3.772c0.915,-0 1.943,-0.229 2.857,-0.686c3.315,-1.6 4.686,-5.6 3.086,-8.8c-1.143,-2.4 -3.428,-3.772 -5.943,-3.772Z"
@@ -12,5 +23,5 @@
           style="fill:#e1393a;fill-rule:nonzero;"/>
     <path class="black"
           d="M27.314,10.914c0,-0.114 -0.114,-0.343 -0.343,-0.571c0,-0.114 -0.114,-0.229 -0.114,-0.229c-0.457,-0.8 -1.143,-1.943 -1.143,-1.943l-2.514,1.486l1.486,2.629c1.943,3.657 2.057,7.657 0.571,10.857c-1.6,3.428 -5.028,5.371 -9.143,5.371c-4.228,0 -7.543,-1.943 -9.143,-5.371c-1.6,-3.2 -1.371,-7.2 0.572,-10.857l1.6,-2.629l-2.743,-1.486c-0,0 -0.686,1.029 -1.143,1.943c-0.114,0 -0.228,0.115 -0.228,0.229c-0.115,0.228 -0.229,0.457 -0.343,0.571c-2.286,4.572 -2.515,9.486 -0.457,13.715c2.171,4.457 6.4,6.971 11.771,6.971c5.257,0 9.6,-2.514 11.771,-6.971c2.058,-4.229 1.829,-9.258 -0.457,-13.715Z"
-          style="fill-rule:nonzero;fill:white;"/>
+          style="fill-rule:nonzero;"/>
 </svg>

.idea/leptos-use.iml

@@ -48,6 +48,10 @@
       <sourceFolder url="file://$MODULE_DIR$/examples/use_websocket/src" isTestSource="false" />
       <sourceFolder url="file://$MODULE_DIR$/testtest/src" isTestSource="false" />
       <sourceFolder url="file://$MODULE_DIR$/examples/use_drop_zone/src" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/examples/signal_debounced/src" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/examples/signal_throttled/src" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/examples/use_draggable/src" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/examples/use_raf_fn/src" isTestSource="false" />
       <excludeFolder url="file://$MODULE_DIR$/examples/use_event_listener/target" />
       <excludeFolder url="file://$MODULE_DIR$/target" />
       <excludeFolder url="file://$MODULE_DIR$/docs/book/book" />

CHANGELOG.md

@@ -12,6 +12,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Braking Changes 🛠
 
+- Leptos version is now 0.5
+- No `cx: Scope` params are supported/needed anymore because of the changes in Leptos.
+  Please check the release notes of Leptos 0.5 for how to upgrade.
 - `watch` is now deprecated in favor of `leptos::watch`. `watch_with_options`
   will continue to exist.
 

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "leptos-use"
-version = "0.6.0"
+version = "0.7.0-alpha"
 edition = "2021"
 authors = ["Marc-Stefan Cassola"]
 categories = ["gui", "web-programming"]
@@ -13,7 +13,7 @@ repository = "https://github.com/Synphonyte/leptos-use"
 homepage = "https://leptos-use.rs"
 
 [dependencies]
-leptos = "0.4"
+leptos = "0.5.0-alpha"
 wasm-bindgen = "0.2"
 js-sys = "0.3"
 default-struct-builder = "0.4"
@@ -80,5 +80,3 @@ all-features = true
 rustdoc-args = ["--cfg=web_sys_unstable_apis"]
 rustc-args = ["--cfg=web_sys_unstable_apis"]
 
-[dev-dependencies]
-leptos = "0.4"

README.md

@@ -32,8 +32,8 @@ use leptos::*;
 use leptos_use::{use_mouse, UseMouseReturn};
 
 #[component]
-fn Demo(cx: Scope) -> impl IntoView {
+fn Demo() -> impl IntoView {
-    let UseMouseReturn { x, y, .. } = use_mouse(cx);
+    let UseMouseReturn { x, y, .. } = use_mouse();
     
     view! { cx,
         {x} " x " {y}
@@ -89,3 +89,4 @@ To scaffold a new function quickly you can run `template/createfn.sh`. It requir
 |---------------|---------------------------|
 | <= 0.3        | 0.3                       |
 | 0.4, 0.5, 0.6 | 0.4                       |
+| main          | 0.5.0-alpha               |

docs/book/src/SUMMARY.md

@@ -62,6 +62,11 @@
 - [watch_with_options](watch/watch_with_options.md)
 - [whenever](watch/whenever.md)
 
+# Reactivity
+
+- [signal_debounced](reactivity/signal_debounced.md)
+- [signal_throttled](reactivity/signal_throttled.md)
+
 # Utilities
 
 - [is_err](utilities/is_err.md)

docs/book/src/get_started.md

@@ -19,8 +19,8 @@ use leptos::*;
 use leptos_use::{use_mouse, UseMouseReturn};
 
 #[component]
-fn Demo(cx: Scope) -> impl IntoView {
+fn Demo() -> impl IntoView {
-    let UseMouseReturn { x, y, .. } = use_mouse(cx);
+    let UseMouseReturn { x, y, .. } = use_mouse();
     
     view! { cx,
         {x} " x " {y}

docs/book/src/server_side_rendering.md

@@ -41,7 +41,7 @@ create_effect(
     cx,
     move |_| {
         // window() doesn't work on the server
-        use_event_listener(cx, window(), "resize", move |_| {
+        use_event_listener(window(), "resize", move |_| {
             // ...
         })
     },

examples/Cargo.toml

@@ -3,6 +3,8 @@ resolver = "2"
 
 members = [
     "on_click_outside",
+    "signal_debounced",
+    "signal_throttled",
     "use_abs",
     "use_active_element",
     "use_breakpoints",

examples/on_click_outside/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { version = "0.4", features = ["nightly", "csr"] }
+leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/on_click_outside/src/main.rs

@@ -4,16 +4,15 @@ use leptos_use::docs::demo_or_body;
 use leptos_use::on_click_outside;
 
 #[component]
-fn Demo(cx: Scope) -> impl IntoView {
+fn Demo() -> impl IntoView {
-    let (show_modal, set_show_modal) = create_signal(cx, false);
+    let (show_modal, set_show_modal) = create_signal(false);
-    let modal_ref = create_node_ref::<Div>(cx);
+    let modal_ref = create_node_ref::<Div>();
 
-    let _ = on_click_outside(cx, modal_ref, move |_| set_show_modal.set(false));
+    let _ = on_click_outside(modal_ref, move |_| set_show_modal.set(false));
 
-    view! { cx,
+    view! {         <button on:click=move |_| set_show_modal.set(true)>"Open Modal"</button>
-        <button on:click=move |_| set_show_modal.set(true)>"Open Modal"</button>
 
-        <Show when=move || show_modal.get() fallback=|_| ()>
+        <Show when=move || show_modal.get() fallback=|| ()>
             <div node_ref=modal_ref class="modal">
                 <div class="inner">
                     <button class="button small" title="Close" on:click=move |_| set_show_modal.set(false)>"𝖷"</button>
@@ -70,7 +69,7 @@ fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
 
-    mount_to(demo_or_body(), |cx| {
+    mount_to(demo_or_body(), || {
-        view! { cx, <Demo /> }
+        view! { <Demo /> }
     })
 }

examples/signal_debounced/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { version = "0.4", features = ["nightly", "csr"] }
+leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/signal_debounced/src/main.rs

@@ -3,19 +3,17 @@ use leptos_use::docs::demo_or_body;
 use leptos_use::signal_debounced;
 
 #[component]
-fn Demo(cx: Scope) -> impl IntoView {
+fn Demo() -> impl IntoView {
+    // signal_debounced();
 
-    signal_debounced(cx);
+    view! {}
-
-    view! { cx,
-    }
 }
 
 fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
 
-    mount_to(demo_or_body(), |cx| {
+    mount_to(demo_or_body(), || {
-        view! { cx, <Demo /> }
+        view! { <Demo /> }
     })
 }

examples/signal_throttled/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { version = "0.4", features = ["nightly", "csr"] }
+leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/signal_throttled/src/main.rs

@@ -3,19 +3,17 @@ use leptos_use::docs::demo_or_body;
 use leptos_use::signal_throttled;
 
 #[component]
-fn Demo(cx: Scope) -> impl IntoView {
+fn Demo() -> impl IntoView {
+    // signal_throttled();
 
-    signal_throttled(cx);
+    view! {}
-
-    view! { cx,
-    }
 }
 
 fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
 
-    mount_to(demo_or_body(), |cx| {
+    mount_to(demo_or_body(), || {
-        view! { cx, <Demo /> }
+        view! { <Demo /> }
     })
 }

examples/ssr/Cargo.toml

@@ -11,16 +11,16 @@ axum = { version = "0.6.4", optional = true }
 console_error_panic_hook = "0.1"
 console_log = "1"
 cfg-if = "1"
-leptos = { version = "0.4", features = ["nightly"] }
+leptos = { version = "0.5.0-alpha", features = ["nightly"] }
-leptos_axum = { version = "0.4", optional = true }
+leptos_axum = { version = "0.5.0-alpha", optional = true }
-leptos_meta = { version = "0.4", features = ["nightly"] }
+leptos_meta = { version = "0.5.0-alpha", features = ["nightly"] }
-leptos_router = { version = "0.4", features = ["nightly"] }
+leptos_router = { version = "0.5.0-alpha", features = ["nightly"] }
 leptos-use = { path = "../..", features = ["storage"] }
 log = "0.4"
 simple_logger = "4"
 tokio = { version = "1.25.0", optional = true }
 tower = { version = "0.4.13", optional = true }
-tower-http = { version = "0.4", features = ["fs"], optional = true }
+tower-http = { version = "0.5.0-alpha", features = ["fs"], optional = true }
 wasm-bindgen = "=0.2.87"
 thiserror = "1.0.38"
 tracing = { version = "0.1.37", optional = true }

examples/ssr/src/app.rs

@@ -9,28 +9,26 @@ use leptos_use::{
 };
 
 #[component]
-pub fn App(cx: Scope) -> impl IntoView {
+pub fn App() -> impl IntoView {
     // Provides context that manages stylesheets, titles, meta tags, etc.
-    provide_meta_context(cx);
+    provide_meta_context();
 
     view! {
-        cx,
 
         <Stylesheet id="leptos" href="/pkg/start-axum.css"/>
 
         <Title text="Leptos-Use SSR Example"/>
 
-        <Router fallback=|cx| {
+        <Router fallback=|| {
             let mut outside_errors = Errors::default();
             outside_errors.insert_with_default_key(AppError::NotFound);
-            view! { cx,
+            view! {                 <ErrorTemplate outside_errors/>
-                <ErrorTemplate outside_errors/>
             }
-            .into_view(cx)
+            .into_view()
         }>
             <main>
                 <Routes>
-                    <Route path="" view=|cx| view! { cx, <HomePage/> }/>
+                    <Route path="" view=|| view! { <HomePage/> }/>
                 </Routes>
             </main>
         </Router>
@@ -39,27 +37,27 @@ pub fn App(cx: Scope) -> impl IntoView {
 
 /// Renders the home page of your application.
 #[component]
-fn HomePage(cx: Scope) -> impl IntoView {
+fn HomePage() -> impl IntoView {
     // Creates a reactive value to update the button
-    let (count, set_count, _) = use_local_storage(cx, "count-state", 0);
+    let (count, set_count, _) = use_local_storage("count-state", 0);
     let on_click = move |_| set_count.update(|count| *count += 1);
 
     let nf = use_intl_number_format(
         UseIntlNumberFormatOptions::default().locale("zh-Hans-CN-u-nu-hanidec"),
     );
 
-    let zh_count = nf.format::<i32>(cx, count);
+    let zh_count = nf.format::<i32>(count);
 
-    let (key, set_key) = create_signal(cx, "".to_string());
+    let (key, set_key) = create_signal("".to_string());
 
-    create_effect(cx, move |_| {
+    create_effect(move |_| {
         // window() doesn't work on the server
-        let _ = use_event_listener(cx, window(), keypress, move |evt: KeyboardEvent| {
+        let _ = use_event_listener(window(), keypress, move |evt: KeyboardEvent| {
             set_key(evt.key())
         });
     });
 
-    let (debounce_value, set_debounce_value) = create_signal(cx, "not called");
+    let (debounce_value, set_debounce_value) = create_signal("not called");
 
     let debounced_fn = use_debounce_fn(
         move || {
@@ -69,8 +67,7 @@ fn HomePage(cx: Scope) -> impl IntoView {
     );
     debounced_fn();
 
-    view! { cx,
+    view! {         <h1>"Leptos-Use SSR Example"</h1>
-        <h1>"Leptos-Use SSR Example"</h1>
         <button on:click=on_click>"Click Me: " { count }</button>
         <p>"Locale \"zh-Hans-CN-u-nu-hanidec\": " { zh_count }</p>
         <p>"Press any key: " { key }</p>

examples/ssr/src/error_template.rs

@@ -24,12 +24,11 @@ impl AppError {
 // Feel free to do more complicated things here than just displaying the error.
 #[component]
 pub fn ErrorTemplate(
-    cx: Scope,
     #[prop(optional)] outside_errors: Option<Errors>,
     #[prop(optional)] errors: Option<RwSignal<Errors>>,
 ) -> impl IntoView {
     let errors = match outside_errors {
-        Some(e) => create_rw_signal(cx, e),
+        Some(e) => create_rw_signal(e),
         None => match errors {
             Some(e) => e,
             None => panic!("No Errors found and we expected errors!"),
@@ -48,25 +47,23 @@ pub fn ErrorTemplate(
     // Only the response code for the first error is actually sent from the server
     // this may be customized by the specific application
     cfg_if! { if #[cfg(feature="ssr")] {
-        let response = use_context::<ResponseOptions>(cx);
+        let response = use_context::<ResponseOptions>();
         if let Some(response) = response {
             response.set_status(errors[0].status_code());
         }
     }}
 
-    view! {cx,
+    view! {        <h1>{if errors.len() > 1 {"Errors"} else {"Error"}}</h1>
-        <h1>{if errors.len() > 1 {"Errors"} else {"Error"}}</h1>
         <For
             // a function that returns the items we're iterating over; a signal is fine
             each= move || {errors.clone().into_iter().enumerate()}
             // a unique key for each item as a reference
             key=|(index, _error)| *index
             // renders each item to a view
-            view= move |cx, error| {
+            view= move |error| {
                 let error_string = error.1.to_string();
                 let error_code= error.1.status_code();
                 view! {
-                    cx,
                                         <h2>{error_code.to_string()}</h2>
                     <p>"Error: " {error_string}</p>
                 }

examples/ssr/src/fileserv.rs

@@ -20,7 +20,7 @@ cfg_if! { if #[cfg(feature = "ssr")] {
         if res.status() == StatusCode::OK {
             res.into_response()
         } else {
-            let handler = leptos_axum::render_app_to_stream(options.to_owned(), move |cx| view!{cx, <App/>});
+            let handler = leptos_axum::render_app_to_stream(options.to_owned(), move || view!{<App/>});
             handler(req).await.into_response()
         }
     }

examples/ssr/src/lib.rs

@@ -14,8 +14,8 @@ cfg_if! { if #[cfg(feature = "hydrate")] {
         _ = console_log::init_with_level(log::Level::Debug);
         console_error_panic_hook::set_once();
 
-        leptos::mount_to_body(move |cx| {
+        leptos::mount_to_body(move || {
-            view! { cx, <App/> }
+            view! { <App/> }
         });
     }
 }}

examples/ssr/src/main.rs

@@ -17,12 +17,12 @@ async fn main() {
     let conf = get_configuration(None).await.unwrap();
     let leptos_options = conf.leptos_options;
     let addr = leptos_options.site_addr;
-    let routes = generate_route_list(|cx| view! { cx, <App/> }).await;
+    let routes = generate_route_list(|| view! { <App/> }).await;
 
     // build our application with a route
     let app = Router::new()
         .route("/api/*fn_name", post(leptos_axum::handle_server_fns))
-        .leptos_routes(&leptos_options, routes, |cx| view! { cx, <App/> })
+        .leptos_routes(&leptos_options, routes, || view! { <App/> })
         .fallback(file_and_error_handler)
         .with_state(leptos_options);
 

examples/use_abs/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { version = "0.4", features = ["nightly", "csr"] }
+leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_abs/src/main.rs

@@ -3,13 +3,12 @@ use leptos_use::docs::demo_or_body;
 use leptos_use::math::use_abs;
 
 #[component]
-fn Demo(cx: Scope) -> impl IntoView {
+fn Demo() -> impl IntoView {
-    let (value, set_value) = create_signal(cx, -32.25);
+    let (value, set_value) = create_signal(-32.25);
 
-    let result: Signal<f64> = use_abs(cx, value);
+    let result: Signal<f64> = use_abs(value);
 
-    view! { cx,
+    view! {         <input
-        <input
             class="block"
             prop:value=move || value.get()
             on:input=move |e| set_value.set(event_target_value(&e).parse().unwrap())
@@ -27,7 +26,7 @@ fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
 
-    mount_to(demo_or_body(), |cx| {
+    mount_to(demo_or_body(), || {
-        view! { cx, <Demo /> }
+        view! { <Demo /> }
     })
 }

examples/use_active_element/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { version = "0.4", features = ["nightly", "csr"] }
+leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_active_element/src/main.rs

@@ -3,26 +3,25 @@ use leptos_use::docs::{demo_or_body, Note};
 use leptos_use::use_active_element;
 
 #[component]
-fn Demo(cx: Scope) -> impl IntoView {
+fn Demo() -> impl IntoView {
-    let active_element = use_active_element(cx);
+    let active_element = use_active_element();
     let key = move || {
         format!(
             "{:?}",
-            active_element.get()
+            active_element
+                .get()
                 .map(|el| el.dataset().get("id"))
                 .unwrap_or_default()
         )
     };
 
-    view! { cx,
+    view! {         <Note class="mb-3">"Select the inputs below to see the changes"</Note>
-        <Note class="mb-3">"Select the inputs below to see the changes"</Note>
 
         <div class="grid grid-cols-1 md:grid-cols-3 gap-2">
             <For
                 each=move || (1..7)
                 key=|i| *i
-                view=move |cx, i| view! { cx,
+                view=move |i| view! {                     <input type="text" data-id=i class="!my-0 !min-w-0" placeholder=i />
-                    <input type="text" data-id=i class="!my-0 !min-w-0" placeholder=i />
                 }
             />
         </div>
@@ -38,7 +37,7 @@ fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
 
-    mount_to(demo_or_body(), |cx| {
+    mount_to(demo_or_body(), || {
-        view! { cx, <Demo /> }
+        view! { <Demo /> }
     })
 }

examples/use_breakpoints/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { version = "0.4", features = ["nightly", "csr"] }
+leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_breakpoints/src/main.rs

@@ -3,10 +3,10 @@ use leptos_use::docs::{demo_or_body, BooleanDisplay};
 use leptos_use::{breakpoints_tailwind, use_breakpoints, BreakpointsTailwind};
 
 #[component]
-fn Demo(cx: Scope) -> impl IntoView {
+fn Demo() -> impl IntoView {
     let breakpoints = breakpoints_tailwind();
 
-    let screen_size = use_breakpoints(cx, breakpoints.clone());
+    let screen_size = use_breakpoints(breakpoints.clone());
 
     use BreakpointsTailwind::*;
 
@@ -24,8 +24,7 @@ fn Demo(cx: Scope) -> impl IntoView {
     let label_classes = "justify-self-end".to_string();
     let svg_classes = "align-middle ml-3 mr-1 opacity-60".to_string();
 
-    view! { cx,
+    view! {         <div class="grid grid-cols-2 gap-x-4 gap-y-3">
-        <div class="grid grid-cols-2 gap-x-4 gap-y-3">
             <div class=label_classes.clone()>"Current breakpoints :"</div>
             <code>{move || format!("{:?}", current.get()) }</code>
 
@@ -145,7 +144,7 @@ fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
 
-    mount_to(demo_or_body(), |cx| {
+    mount_to(demo_or_body(), || {
-        view! { cx, <Demo /> }
+        view! { <Demo /> }
     })
 }

examples/use_ceil/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { version = "0.4", features = ["nightly", "csr"] }
+leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_ceil/src/main.rs

@@ -3,13 +3,12 @@ use leptos_use::docs::demo_or_body;
 use leptos_use::math::use_ceil;
 
 #[component]
-fn Demo(cx: Scope) -> impl IntoView {
+fn Demo() -> impl IntoView {
-    let (value, set_value) = create_signal(cx, 4.15);
+    let (value, set_value) = create_signal(4.15);
 
-    let result: Signal<f64> = use_ceil(cx, value);
+    let result: Signal<f64> = use_ceil(value);
 
-    view! { cx,
+    view! {         <input
-        <input
             class="block"
             prop:value=move || value.get()
             on:input=move |e| set_value.set(event_target_value(&e).parse().unwrap())
@@ -27,7 +26,7 @@ fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
 
-    mount_to(demo_or_body(), |cx| {
+    mount_to(demo_or_body(), || {
-        view! { cx, <Demo /> }
+        view! { <Demo /> }
     })
 }

examples/use_color_mode/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { version = "0.4", features = ["nightly", "csr"] }
+leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_color_mode/src/main.rs

@@ -7,9 +7,8 @@ use leptos_use::{
 };
 
 #[component]
-fn Demo(cx: Scope) -> impl IntoView {
+fn Demo() -> impl IntoView {
     let UseColorModeReturn { mode, set_mode, .. } = use_color_mode_with_options(
-        cx,
         UseColorModeOptions::default()
             .custom_modes(vec![
                 "rust".into(),
@@ -17,11 +16,10 @@ fn Demo(cx: Scope) -> impl IntoView {
                 "navy".into(),
                 "ayu".into(),
             ])
-            .initial_value(ColorMode::from(html(cx).class_name())),
+            .initial_value(ColorMode::from(html().class_name())),
     );
 
     let UseCycleListReturn { state, next, .. } = use_cycle_list_with_options(
-        cx,
         vec![
             ColorMode::Light,
             ColorMode::Custom("rust".into()),
@@ -32,8 +30,7 @@ fn Demo(cx: Scope) -> impl IntoView {
         UseCycleListOptions::default().initial_value(Some((mode, set_mode).into())),
     );
 
-    view! { cx,
+    view! {         <button on:click=move |_| next()>
-        <button on:click=move |_| next()>
             { move || format!("{}", state.get()) }
         </button>
         <Note>"Click to change the color mode"</Note>
@@ -44,7 +41,7 @@ fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
 
-    mount_to(demo_or_body(), |cx| {
+    mount_to(demo_or_body(), || {
-        view! { cx, <Demo /> }
+        view! { <Demo /> }
     })
 }

examples/use_css_var/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { version = "0.4", features = ["nightly", "csr"] }
+leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_css_var/src/main.rs

@@ -4,10 +4,10 @@ use leptos_use::docs::demo_or_body;
 use leptos_use::{use_css_var_with_options, UseCssVarOptions};
 
 #[component]
-fn Demo(cx: Scope) -> impl IntoView {
+fn Demo() -> impl IntoView {
-    let el = create_node_ref::<Div>(cx);
+    let el = create_node_ref::<Div>();
     let (color, set_color) =
-        use_css_var_with_options(cx, "--color", UseCssVarOptions::default().target(el));
+        use_css_var_with_options("--color", UseCssVarOptions::default().target(el));
     let switch_color = move |_| {
         if color.get() == "#df8543" {
             set_color.set("#7fa998".to_string());
@@ -16,9 +16,9 @@ fn Demo(cx: Scope) -> impl IntoView {
         }
     };
 
-    let elv = create_node_ref::<Div>(cx);
+    let elv = create_node_ref::<Div>();
-    let (key, set_key) = create_signal(cx, "--color".to_string());
+    let (key, set_key) = create_signal("--color".to_string());
-    let (color_val, _) = use_css_var_with_options(cx, key, UseCssVarOptions::default().target(elv));
+    let (color_val, _) = use_css_var_with_options(key, UseCssVarOptions::default().target(elv));
     let change_var = move |_| {
         if key.get() == "--color" {
             set_key.set("--color-one".to_string());
@@ -33,8 +33,7 @@ fn Demo(cx: Scope) -> impl IntoView {
         )
     };
 
-    view! { cx,
+    view! {         <div>
-        <div>
             <div node_ref=el style="--color: #7fa998; color: var(--color)">
                 "Sample text, " {color}
             </div>
@@ -54,7 +53,7 @@ fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
 
-    mount_to(demo_or_body(), |cx| {
+    mount_to(demo_or_body(), || {
-        view! { cx, <Demo /> }
+        view! { <Demo /> }
     })
 }

examples/use_cycle_list/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { version = "0.4", features = ["nightly", "csr"] }
+leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_cycle_list/src/main.rs

@@ -3,18 +3,14 @@ use leptos_use::docs::demo_or_body;
 use leptos_use::{use_cycle_list, UseCycleListReturn};
 
 #[component]
-fn Demo(cx: Scope) -> impl IntoView {
+fn Demo() -> impl IntoView {
     let UseCycleListReturn {
         state, next, prev, ..
-    } = use_cycle_list(
+    } = use_cycle_list(vec![
-        cx,
-        vec![
         "Dog", "Cat", "Lizard", "Shark", "Whale", "Dolphin", "Octopus", "Seal",
-        ],
+    ]);
-    );
 
-    view! { cx,
+    view! {         <div>
-        <div>
             <div class="text-primary text-lg font-bold">{state}</div>
             <button on:click=move |_| { prev() }>"Prev"</button>
             <button on:click=move |_| { next() }>"Next"</button>
@@ -26,7 +22,7 @@ fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
 
-    mount_to(demo_or_body(), |cx| {
+    mount_to(demo_or_body(), || {
-        view! { cx, <Demo /> }
+        view! { <Demo /> }
     })
 }

examples/use_debounce_fn/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { version = "0.4", features = ["nightly", "csr"] }
+leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_debounce_fn/src/main.rs

@@ -3,9 +3,9 @@ use leptos_use::docs::{demo_or_body, Note};
 use leptos_use::{use_debounce_fn_with_options, DebounceOptions};
 
 #[component]
-fn Demo(cx: Scope) -> impl IntoView {
+fn Demo() -> impl IntoView {
-    let (click_count, set_click_count) = create_signal(cx, 0);
+    let (click_count, set_click_count) = create_signal(0);
-    let (debounced_count, set_debounced_count) = create_signal(cx, 0);
+    let (debounced_count, set_debounced_count) = create_signal(0);
 
     let debounced_fn = use_debounce_fn_with_options(
         move || set_debounced_count.set(debounced_count.get_untracked() + 1),
@@ -13,8 +13,7 @@ fn Demo(cx: Scope) -> impl IntoView {
         DebounceOptions::default().max_wait(Some(5000.0)),
     );
 
-    view! { cx,
+    view! {         <button
-        <button
             on:click=move |_| {
                 set_click_count.set(click_count.get_untracked() + 1);
                 debounced_fn();
@@ -32,7 +31,7 @@ fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
 
-    mount_to(demo_or_body(), |cx| {
+    mount_to(demo_or_body(), || {
-        view! { cx, <Demo /> }
+        view! { <Demo /> }
     })
 }

examples/use_document_visibility/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { version = "0.4", features = ["nightly", "csr"] }
+leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_document_visibility/src/main.rs

@@ -1,15 +1,17 @@
 use leptos::*;
 use leptos_use::docs::demo_or_body;
-use leptos_use::{use_document_visibility, watch};
+use leptos_use::use_document_visibility;
 use std::time::Duration;
 
 #[component]
-fn Demo(cx: Scope) -> impl IntoView {
+fn Demo() -> impl IntoView {
     let start_message = "💡 Minimize the page or switch tab then return";
-    let (message, set_message) = create_signal(cx, start_message);
+    let (message, set_message) = create_signal(start_message);
-    let visibility = use_document_visibility(cx);
+    let visibility = use_document_visibility();
 
-    let _ = watch(cx, visibility, move |cur, prev, _| {
+    let _ = watch(
+        visibility,
+        move |cur, prev, _| {
             if let Some(prev) = prev {
                 if *cur == web_sys::VisibilityState::Visible
                     && *prev == web_sys::VisibilityState::Hidden
@@ -24,10 +26,11 @@ fn Demo(cx: Scope) -> impl IntoView {
                     )
                 }
             }
-    });
+        },
+        false,
+    );
 
-    view! { cx,
+    view! {         <div>{ message }</div>
-        <div>{ message }</div>
     }
 }
 
@@ -35,7 +38,7 @@ fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
 
-    mount_to(demo_or_body(), |cx| {
+    mount_to(demo_or_body(), || {
-        view! { cx, <Demo /> }
+        view! { <Demo /> }
     })
 }

examples/use_draggable/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { version = "0.4", features = ["nightly", "csr"] }
+leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_draggable/src/main.rs

@@ -5,13 +5,12 @@ use leptos_use::docs::demo_or_body;
 use leptos_use::{use_draggable_with_options, UseDraggableOptions, UseDraggableReturn};
 
 #[component]
-fn Demo(cx: Scope) -> impl IntoView {
+fn Demo() -> impl IntoView {
-    let el = create_node_ref::<Div>(cx);
+    let el = create_node_ref::<Div>();
 
     let inner_width = window().inner_width().unwrap().as_f64().unwrap();
 
     let UseDraggableReturn { x, y, style, .. } = use_draggable_with_options(
-        cx,
         el,
         UseDraggableOptions::default()
             .initial_value(Position {
@@ -21,8 +20,7 @@ fn Demo(cx: Scope) -> impl IntoView {
             .prevent_default(true),
     );
 
-    view! { cx,
+    view! {         <p class="italic op50 text-center">
-        <p class="italic op50 text-center">
             Check the floating box
         </p>
         <div
@@ -42,7 +40,7 @@ fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
 
-    mount_to(demo_or_body(), |cx| {
+    mount_to(demo_or_body(), || {
-        view! { cx, <Demo /> }
+        view! { <Demo /> }
     })
 }

examples/use_drop_zone/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { version = "0.4", features = ["nightly", "csr"] }
+leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_drop_zone/src/main.rs

@@ -4,24 +4,22 @@ use leptos_use::docs::{demo_or_body, BooleanDisplay};
 use leptos_use::{use_drop_zone_with_options, UseDropZoneOptions, UseDropZoneReturn};
 
 #[component]
-fn Demo(cx: Scope) -> impl IntoView {
+fn Demo() -> impl IntoView {
-    let (dropped, set_dropped) = create_signal(cx, false);
+    let (dropped, set_dropped) = create_signal(false);
 
-    let drop_zone_el = create_node_ref::<Div>(cx);
+    let drop_zone_el = create_node_ref::<Div>();
 
     let UseDropZoneReturn {
         is_over_drop_zone,
         files,
     } = use_drop_zone_with_options(
-        cx,
         drop_zone_el,
         UseDropZoneOptions::default()
             .on_drop(move |_| set_dropped(true))
             .on_enter(move |_| set_dropped(false)),
     );
 
-    view! { cx,
+    view! {         <div class="flex">
-        <div class="flex">
             <div class="w-full h-auto relative">
                 <p>Drop files into dropZone</p>
                 <img width="64" src="use_drop_zone/demo/img/leptos-use-logo.svg" alt="Drop me"/>
@@ -36,9 +34,8 @@ fn Demo(cx: Scope) -> impl IntoView {
                         dropped: <BooleanDisplay value=dropped />
                     </div>
                     <div class="flex flex-wrap justify-center items-center">
-                        <For each=files key=|f| f.name() view=move |cx, file| {
+                        <For each=files key=|f| f.name() view=move |file| {
-                            view! { cx,
+                            view! {                                 <div class="w-200px bg-black-200/10 ma-2 pa-6">
-                                <div class="w-200px bg-black-200/10 ma-2 pa-6">
                                     <p>Name: {file.name()}</p>
                                     <p>Size: {file.size()}</p>
                                     <p>Type: {file.type_()}</p>
@@ -57,7 +54,7 @@ fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
 
-    mount_to(demo_or_body(), |cx| {
+    mount_to(demo_or_body(), || {
-        view! { cx, <Demo /> }
+        view! { <Demo /> }
     })
 }

examples/use_element_hover/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { version = "0.4", features = ["nightly", "csr"] }
+leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_element_hover/src/main.rs

@@ -4,19 +4,17 @@ use leptos_use::docs::demo_or_body;
 use leptos_use::{use_element_hover_with_options, UseElementHoverOptions};
 
 #[component]
-fn Demo(cx: Scope) -> impl IntoView {
+fn Demo() -> impl IntoView {
-    let el = create_node_ref::<Button>(cx);
+    let el = create_node_ref::<Button>();
 
     let is_hovered = use_element_hover_with_options(
-        cx,
         el,
         UseElementHoverOptions::default()
             .delay_enter(200)
             .delay_leave(600),
     );
 
-    view! { cx,
+    view! {         <button node_ref=el>{ move || if is_hovered.get() { "Thank you!" } else { "Hover me" } }</button>
-        <button node_ref=el>{ move || if is_hovered.get() { "Thank you!" } else { "Hover me" } }</button>
     }
 }
 
@@ -24,7 +22,7 @@ fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
 
-    mount_to(demo_or_body(), |cx| {
+    mount_to(demo_or_body(), || {
-        view! { cx, <Demo /> }
+        view! { <Demo /> }
     })
 }

examples/use_element_size/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { version = "0.4", features = ["nightly", "csr"] }
+leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_element_size/src/main.rs

@@ -4,15 +4,14 @@ use leptos_use::docs::{demo_or_body, Note};
 use leptos_use::{use_element_size, UseElementSizeReturn};
 
 #[component]
-fn Demo(cx: Scope) -> impl IntoView {
+fn Demo() -> impl IntoView {
-    let el = create_node_ref::<Textarea>(cx);
+    let el = create_node_ref::<Textarea>();
 
-    let UseElementSizeReturn { width, height } = use_element_size(cx, el);
+    let UseElementSizeReturn { width, height } = use_element_size(el);
 
     let text = move || format!("width: {}\nheight: {}", width.get(), height.get());
 
-    view! { cx,
+    view! {         <Note class="mb-2">"Resize the box to see changes"</Note>
-        <Note class="mb-2">"Resize the box to see changes"</Note>
         <textarea
             node_ref=el
             readonly
@@ -26,7 +25,7 @@ fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
 
-    mount_to(demo_or_body(), |cx| {
+    mount_to(demo_or_body(), || {
-        view! { cx, <Demo /> }
+        view! { <Demo /> }
     })
 }

examples/use_element_visibility/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { version = "0.4", features = ["nightly", "csr"] }
+leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_element_visibility/src/main.rs

@@ -4,13 +4,12 @@ use leptos_use::docs::{demo_or_body, BooleanDisplay, Note};
 use leptos_use::use_element_visibility;
 
 #[component]
-fn Demo(cx: Scope) -> impl IntoView {
+fn Demo() -> impl IntoView {
-    let el = create_node_ref::<Div>(cx);
+    let el = create_node_ref::<Div>();
 
-    let is_visible = use_element_visibility(cx, el);
+    let is_visible = use_element_visibility(el);
 
-    view! { cx,
+    view! {         <div>
-        <div>
             <Note class="mb-4">"Info on the right bottom corner"</Note>
             <div node_ref=el class="max-w-lg relative area dark:bg-gray-800 shadow-lg z-60">
                 "Target Element (scroll down)"
@@ -28,7 +27,7 @@ fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
 
-    mount_to(demo_or_body(), |cx| {
+    mount_to(demo_or_body(), || {
-        view! { cx, <Demo /> }
+        view! { <Demo /> }
     })
 }

examples/use_event_listener/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { version = "0.4", features = ["nightly", "csr"] }
+leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_event_listener/src/main.rs

@@ -4,14 +4,14 @@ use leptos::*;
 use leptos_use::use_event_listener;
 
 #[component]
-fn Demo(cx: Scope) -> impl IntoView {
+fn Demo() -> impl IntoView {
-    let _ = use_event_listener(cx, window(), keydown, |evt| {
+    let _ = use_event_listener(window(), keydown, |evt| {
         log!("window keydown: '{}'", evt.key());
     });
 
-    let element = create_node_ref::<A>(cx);
+    let element = create_node_ref::<A>();
 
-    let _ = use_event_listener(cx, element, click, |evt| {
+    let _ = use_event_listener(element, click, |evt| {
         log!(
             "click from element '{:?}'",
             event_target::<web_sys::HtmlElement>(&evt).inner_text()
@@ -20,10 +20,9 @@ fn Demo(cx: Scope) -> impl IntoView {
         evt.prevent_default();
     });
 
-    let (cond, set_cond) = create_signal(cx, true);
+    let (cond, set_cond) = create_signal(true);
 
-    view! { cx,
+    view! {         <p>"Check in the dev tools console"</p>
-        <p>"Check in the dev tools console"</p>
         <p>
             <label>
                 <input
@@ -35,8 +34,7 @@ fn Demo(cx: Scope) -> impl IntoView {
         </p>
         <Show
             when=move || cond.get()
-            fallback=move |cx| view! { cx,
+            fallback=move || view! {                 <a node_ref=element href="#">
-                <a node_ref=element href="#">
                     "Condition"
                     <b>" false "</b>
                     "[click me]"
@@ -56,9 +54,8 @@ fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
 
-    mount_to_body(|cx| {
+    mount_to_body(|| {
-        view! {cx,
+        view! {            <Demo />
-            <Demo />
         }
     })
 }

examples/use_favicon/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { version = "0.4", features = ["nightly", "csr"] }
+leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_favicon/src/main.rs

@@ -3,17 +3,14 @@ use leptos_use::docs::demo_or_body;
 use leptos_use::{use_favicon_with_options, UseFaviconOptions};
 
 #[component]
-fn Demo(cx: Scope) -> impl IntoView {
+fn Demo() -> impl IntoView {
-    let (_, set_icon) = use_favicon_with_options(
+    let (_, set_icon) =
-        cx,
+        use_favicon_with_options(UseFaviconOptions::default().base_url("use_favicon/demo/img/"));
-        UseFaviconOptions::default().base_url("use_favicon/demo/img/"),
-    );
 
     let classes = "border border-solid border-b-4 rounded p-2 block border-gray-500/50 bg-[--bg] active:translate-y-1 active:border-b".to_string();
     let img_classes = "block".to_string();
 
-    view! { cx,
+    view! {         <p>"Click on an icon to change the favicon"</p>
-        <p>"Click on an icon to change the favicon"</p>
         <p class="flex gap-2">
             <a class=classes.clone() href="#" on:click=move |e| {
                 e.prevent_default();
@@ -57,7 +54,7 @@ fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
 
-    mount_to(demo_or_body(), |cx| {
+    mount_to(demo_or_body(), || {
-        view! { cx, <Demo /> }
+        view! { <Demo /> }
     })
 }

examples/use_floor/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { version = "0.4", features = ["nightly", "csr"] }
+leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_floor/src/main.rs

@@ -3,13 +3,12 @@ use leptos_use::docs::demo_or_body;
 use leptos_use::math::use_floor;
 
 #[component]
-fn Demo(cx: Scope) -> impl IntoView {
+fn Demo() -> impl IntoView {
-    let (value, set_value) = create_signal(cx, 5.95);
+    let (value, set_value) = create_signal(5.95);
 
-    let result: Signal<f64> = use_floor(cx, value);
+    let result: Signal<f64> = use_floor(value);
 
-    view! { cx,
+    view! {         <input
-        <input
             class="block"
             prop:value=move || value.get()
             on:input=move |e| set_value.set(event_target_value(&e).parse().unwrap())
@@ -27,7 +26,7 @@ fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
 
-    mount_to(demo_or_body(), |cx| {
+    mount_to(demo_or_body(), || {
-        view! { cx, <Demo /> }
+        view! { <Demo /> }
     })
 }

examples/use_intersection_observer/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { version = "0.4", features = ["nightly", "csr"] }
+leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_intersection_observer/src/main.rs

@@ -7,10 +7,10 @@ use leptos_use::{
 };
 
 #[component]
-fn Demo(cx: Scope) -> impl IntoView {
+fn Demo() -> impl IntoView {
-    let root = create_node_ref::<Div>(cx);
+    let root = create_node_ref::<Div>();
-    let target = create_node_ref::<Div>(cx);
+    let target = create_node_ref::<Div>();
-    let (is_visible, set_visible) = create_signal(cx, false);
+    let (is_visible, set_visible) = create_signal(false);
 
     let UseIntersectionObserverReturn {
         is_active,
@@ -18,7 +18,6 @@ fn Demo(cx: Scope) -> impl IntoView {
         resume,
         ..
     } = use_intersection_observer_with_options(
-        cx,
         target,
         move |entries, _| {
             set_visible.set(entries[0].is_intersecting());
@@ -26,8 +25,7 @@ fn Demo(cx: Scope) -> impl IntoView {
         UseIntersectionObserverOptions::default().root(Some(root)),
     );
 
-    view! { cx,
+    view! {         <div class="text-center">
-        <div class="text-center">
             <label class="checkbox">
                 <input
                     type="checkbox"
@@ -89,7 +87,7 @@ fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
 
-    mount_to(demo_or_body(), |cx| {
+    mount_to(demo_or_body(), || {
-        view! { cx, <Demo /> }
+        view! { <Demo /> }
     })
 }

examples/use_interval/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { version = "0.4", features = ["nightly", "csr"] }
+leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_interval/src/main.rs

@@ -3,11 +3,10 @@ use leptos_use::docs::demo_or_body;
 use leptos_use::{use_interval, UseIntervalReturn};
 
 #[component]
-fn Demo(cx: Scope) -> impl IntoView {
+fn Demo() -> impl IntoView {
-    let UseIntervalReturn { counter, .. } = use_interval(cx, 200);
+    let UseIntervalReturn { counter, .. } = use_interval(200);
 
-    view! { cx,
+    view! {         <div>
-        <div>
             <p>"Interval fired: " { counter }</p>
         </div>
     }
@@ -17,7 +16,7 @@ fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
 
-    mount_to(demo_or_body(), |cx| {
+    mount_to(demo_or_body(), || {
-        view! { cx, <Demo /> }
+        view! { <Demo /> }
     })
 }

examples/use_interval_fn/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { version = "0.4", features = ["nightly", "csr"] }
+leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_interval_fn/src/main.rs

@@ -4,7 +4,7 @@ use leptos_use::use_interval_fn;
 use leptos_use::utils::Pausable;
 
 #[component]
-fn Demo(cx: Scope) -> impl IntoView {
+fn Demo() -> impl IntoView {
     let greetings = [
         "Hello",
         "Hi",
@@ -18,16 +18,15 @@ fn Demo(cx: Scope) -> impl IntoView {
         "Привет",
     ];
 
-    let (word, set_word) = create_signal(cx, greetings[0]);
+    let (word, set_word) = create_signal(greetings[0]);
-    let (interval, set_interval) = create_signal(cx, 500_u64);
+    let (interval, set_interval) = create_signal(500_u64);
-    let (index, set_index) = create_signal(cx, 0);
+    let (index, set_index) = create_signal(0);
 
     let Pausable {
         pause,
         resume,
         is_active,
     } = use_interval_fn(
-        cx,
         move || {
             set_index.set((index.get() + 1) % greetings.len());
             set_word.set(greetings[index.get()]);
@@ -35,8 +34,7 @@ fn Demo(cx: Scope) -> impl IntoView {
         interval,
     );
 
-    view! { cx,
+    view! {         <p>{move || word.get()}</p>
-        <p>{move || word.get()}</p>
         <p>
             "Interval:"
             <input
@@ -48,17 +46,15 @@ fn Demo(cx: Scope) -> impl IntoView {
         </p>
         <Show
             when=move || is_active.get()
-            fallback=move |cx| {
+            fallback=move || {
                 let resume = resume.clone();
-                view! {cx,
+                view! {                    <button on:click=move |_| resume()>"Resume"</button>
-                    <button on:click=move |_| resume()>"Resume"</button>
                 }
             }
         >
             {
                 let pause = pause.clone();
-                view! {cx,
+                view! {                    <button on:click=move |_| pause()>"Pause"</button>
-                    <button on:click=move |_| pause()>"Pause"</button>
                 }
             }
         </Show>
@@ -69,7 +65,7 @@ fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
 
-    mount_to(demo_or_body(), |cx| {
+    mount_to(demo_or_body(), || {
-        view! { cx, <Demo /> }
+        view! { <Demo /> }
     })
 }

examples/use_intl_number_format/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { version = "0.4", features = ["nightly", "csr"] }
+leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_intl_number_format/src/main.rs

@@ -3,8 +3,8 @@ use leptos_use::docs::demo_or_body;
 use leptos_use::{use_intl_number_format, NumberStyle, UseIntlNumberFormatOptions};
 
 #[component]
-fn Demo(cx: Scope) -> impl IntoView {
+fn Demo() -> impl IntoView {
-    let (number, set_number) = create_signal(cx, 123456.78);
+    let (number, set_number) = create_signal(123456.78);
 
     let de_nf = use_intl_number_format(
         UseIntlNumberFormatOptions::default()
@@ -12,7 +12,7 @@ fn Demo(cx: Scope) -> impl IntoView {
             .style(NumberStyle::Currency)
             .currency("EUR"),
     );
-    let de_num = de_nf.format::<f64>(cx, number);
+    let de_num = de_nf.format::<f64>(number);
 
     let ja_nf = use_intl_number_format(
         UseIntlNumberFormatOptions::default()
@@ -20,17 +20,16 @@ fn Demo(cx: Scope) -> impl IntoView {
             .style(NumberStyle::Currency)
             .currency("JPY"),
     );
-    let ja_num = ja_nf.format::<f64>(cx, number);
+    let ja_num = ja_nf.format::<f64>(number);
 
     let in_nf = use_intl_number_format(
         UseIntlNumberFormatOptions::default()
             .locale("en-IN")
             .maximum_significant_digits(3),
     );
-    let in_num = in_nf.format::<f64>(cx, number);
+    let in_num = in_nf.format::<f64>(number);
 
-    view! { cx,
+    view! {         <input
-        <input
             class="block"
             prop:value=number
             on:input=move |e| set_number(event_target_value(&e).parse().unwrap())
@@ -50,7 +49,7 @@ fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
 
-    mount_to(demo_or_body(), |cx| {
+    mount_to(demo_or_body(), || {
-        view! { cx, <Demo /> }
+        view! { <Demo /> }
     })
 }

examples/use_media_query/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { version = "0.4", features = ["nightly", "csr"] }
+leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_media_query/src/main.rs

@@ -3,12 +3,11 @@ use leptos_use::docs::{demo_or_body, BooleanDisplay};
 use leptos_use::use_media_query;
 
 #[component]
-fn Demo(cx: Scope) -> impl IntoView {
+fn Demo() -> impl IntoView {
-    let is_large_screen = use_media_query(cx, "(min-width: 1024px)");
+    let is_large_screen = use_media_query("(min-width: 1024px)");
-    let is_dark_preferred = use_media_query(cx, "(prefers-color-scheme: dark)");
+    let is_dark_preferred = use_media_query("(prefers-color-scheme: dark)");
 
-    view! { cx,
+    view! {         <p>"Is large screen: " <BooleanDisplay value=is_large_screen /></p>
-        <p>"Is large screen: " <BooleanDisplay value=is_large_screen /></p>
         <p>"Is dark preferred: " <BooleanDisplay value=is_dark_preferred /></p>
     }
 }
@@ -17,7 +16,7 @@ fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
 
-    mount_to(demo_or_body(), |cx| {
+    mount_to(demo_or_body(), || {
-        view! { cx, <Demo /> }
+        view! { <Demo /> }
     })
 }

examples/use_mouse/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { version = "0.4", features = ["nightly", "csr"] }
+leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_mouse/src/main.rs

@@ -22,20 +22,18 @@ impl UseMouseEventExtractor for Extractor {
 }
 
 #[component]
-fn Demo(cx: Scope) -> impl IntoView {
+fn Demo() -> impl IntoView {
-    let el = create_node_ref::<Div>(cx);
+    let el = create_node_ref::<Div>();
 
-    let mouse_default = use_mouse(cx);
+    let mouse_default = use_mouse();
 
     let mouse_with_extractor = use_mouse_with_options(
-        cx,
         UseMouseOptions::default()
             .target(el)
             .coord_type(UseMouseCoordType::Custom(Extractor)),
     );
 
-    view! { cx,
+    view! {         <div node_ref=el>
-        <div node_ref=el>
             <p class="font-semibold">"Basic Usage"</p>
             <pre lang="yaml">
                 { move || format!(r#"    x: {}
@@ -59,7 +57,7 @@ fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
 
-    mount_to(demo_or_body(), |cx| {
+    mount_to(demo_or_body(), || {
-        view! { cx, <Demo /> }
+        view! { <Demo /> }
     })
 }

examples/use_mutation_observer/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { version = "0.4", features = ["nightly", "csr"] }
+leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_mutation_observer/src/main.rs

@@ -5,17 +5,16 @@ use leptos_use::use_mutation_observer_with_options;
 use std::time::Duration;
 
 #[component]
-fn Demo(cx: Scope) -> impl IntoView {
+fn Demo() -> impl IntoView {
-    let el = create_node_ref::<Div>(cx);
+    let el = create_node_ref::<Div>();
-    let (messages, set_messages) = create_signal(cx, vec![]);
+    let (messages, set_messages) = create_signal(vec![]);
-    let (class_name, set_class_name) = create_signal(cx, String::new());
+    let (class_name, set_class_name) = create_signal(String::new());
-    let (style, set_style) = create_signal(cx, String::new());
+    let (style, set_style) = create_signal(String::new());
 
     let mut init = web_sys::MutationObserverInit::new();
     init.attributes(true);
 
     use_mutation_observer_with_options(
-        cx,
         el,
         move |mutations, _| {
             if let Some(mutation) = mutations.first() {
@@ -41,16 +40,14 @@ fn Demo(cx: Scope) -> impl IntoView {
         Duration::from_millis(1550),
     );
 
-    let enum_msgs = Signal::derive(cx, move || {
+    let enum_msgs =
-        messages.get().into_iter().enumerate().collect::<Vec<_>>()
+        Signal::derive(move || messages.get().into_iter().enumerate().collect::<Vec<_>>());
-    });
 
-    view! { cx,
+    view! {         <div node_ref=el class=move || class_name.get() style=move || style.get()>
-        <div node_ref=el class=move || class_name.get() style=move || style.get()>
             <For
                 each=move || enum_msgs.get()
                 key=|message| message.0 // list only grows so this is fine here
-                view=|cx, message| view! { cx, <div>"Mutation Attribute: " <code>{message.1}</code></div> }
+                view=|message| view! { <div>"Mutation Attribute: " <code>{message.1}</code></div> }
             />
         </div>
     }
@@ -60,7 +57,7 @@ fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
 
-    mount_to(demo_or_body(), |cx| {
+    mount_to(demo_or_body(), || {
-        view! { cx, <Demo /> }
+        view! { <Demo /> }
     })
 }

examples/use_raf_fn/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { version = "0.4", features = ["nightly", "csr"] }
+leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_raf_fn/src/main.rs

@@ -3,19 +3,18 @@ use leptos_use::docs::demo_or_body;
 use leptos_use::{use_raf_fn, utils::Pausable};
 
 #[component]
-fn Demo(cx: Scope) -> impl IntoView {
+fn Demo() -> impl IntoView {
-    let (count, set_count) = create_signal(cx, 0);
+    let (count, set_count) = create_signal(0);
 
     let Pausable {
         pause,
         resume,
         is_active,
-    } = use_raf_fn(cx, move |_| {
+    } = use_raf_fn(move |_| {
         set_count.update(|count| *count += 1);
     });
 
-    view! { cx,
+    view! {         <div>Count: { count }</div>
-        <div>Count: { count }</div>
         <button on:click=move |_| pause() disabled=move || !is_active()>Pause</button>
         <button on:click=move |_| resume() disabled=is_active>Resume</button>
     }
@@ -25,7 +24,7 @@ fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
 
-    mount_to(demo_or_body(), |cx| {
+    mount_to(demo_or_body(), || {
-        view! { cx, <Demo /> }
+        view! { <Demo /> }
     })
 }

examples/use_resize_observer/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { version = "0.4", features = ["nightly", "csr"] }
+leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_resize_observer/src/main.rs

@@ -4,11 +4,11 @@ use leptos_use::docs::{demo_or_body, Note};
 use leptos_use::use_resize_observer;
 
 #[component]
-fn Demo(cx: Scope) -> impl IntoView {
+fn Demo() -> impl IntoView {
-    let el = create_node_ref::<Textarea>(cx);
+    let el = create_node_ref::<Textarea>();
-    let (text, set_text) = create_signal(cx, "".to_string());
+    let (text, set_text) = create_signal("".to_string());
 
-    use_resize_observer(cx, el, move |entries, _| {
+    use_resize_observer(el, move |entries, _| {
         let rect = entries[0].content_rect();
         set_text.set(format!(
             "width: {:.0}\nheight: {:.0}",
@@ -17,8 +17,7 @@ fn Demo(cx: Scope) -> impl IntoView {
         ));
     });
 
-    view! { cx,
+    view! {         <Note class="mb-2">"Resize the box to see changes"</Note>
-        <Note class="mb-2">"Resize the box to see changes"</Note>
         <textarea
             node_ref=el
             readonly
@@ -32,7 +31,7 @@ fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
 
-    mount_to(demo_or_body(), |cx| {
+    mount_to(demo_or_body(), || {
-        view! { cx, <Demo /> }
+        view! { <Demo /> }
     })
 }

examples/use_round/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { version = "0.4", features = ["nightly", "csr"] }
+leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_round/src/main.rs

@@ -3,13 +3,12 @@ use leptos_use::docs::demo_or_body;
 use leptos_use::math::use_round;
 
 #[component]
-fn Demo(cx: Scope) -> impl IntoView {
+fn Demo() -> impl IntoView {
-    let (value, set_value) = create_signal(cx, 5.95);
+    let (value, set_value) = create_signal(5.95);
 
-    let result: Signal<f64> = use_round(cx, value);
+    let result: Signal<f64> = use_round(value);
 
-    view! { cx,
+    view! {         <input
-        <input
             class="block"
             prop:value=move || value.get()
             on:input=move |e| set_value.set(event_target_value(&e).parse().unwrap())
@@ -27,7 +26,7 @@ fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
 
-    mount_to(demo_or_body(), |cx| {
+    mount_to(demo_or_body(), || {
-        view! { cx, <Demo /> }
+        view! { <Demo /> }
     })
 }

examples/use_scroll/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { version = "0.4", features = ["nightly", "csr"] }
+leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_scroll/src/main.rs

@@ -6,10 +6,10 @@ use leptos_use::{use_scroll_with_options, ScrollBehavior, UseScrollOptions, UseS
 use web_sys::Event;
 
 #[component]
-fn Demo(cx: Scope) -> impl IntoView {
+fn Demo() -> impl IntoView {
-    let el = create_node_ref::<Div>(cx);
+    let el = create_node_ref::<Div>();
-    let (smooth, set_smooth) = create_signal(cx, false);
+    let (smooth, set_smooth) = create_signal(false);
-    let behavior = Signal::derive(cx, move || {
+    let behavior = Signal::derive(move || {
         if smooth.get() {
             ScrollBehavior::Smooth
         } else {
@@ -35,7 +35,6 @@ fn Demo(cx: Scope) -> impl IntoView {
         directions,
         ..
     } = use_scroll_with_options(
-        cx,
         el,
         UseScrollOptions::default()
             .behavior(behavior)
@@ -43,8 +42,7 @@ fn Demo(cx: Scope) -> impl IntoView {
             .on_scroll(on_scroll.clone()),
     );
 
-    view! { cx,
+    view! {         <div class="flex">
-        <div class="flex">
             <div node_ref=el class="w-[300px] h-[300px] m-auto my-auto overflow-scroll bg-gray-500/5 rounded">
                 <div class="w-[500px] h-[400px] relative">
                     <div class="absolute left-0 top-0 bg-gray-500/5 px-2 py-1">
@@ -124,35 +122,35 @@ fn Demo(cx: Scope) -> impl IntoView {
                     <div class="text-right opacity-75">
                         "Top Arrived"
                     </div>
-                    <BooleanDisplay value=Signal::derive(cx, move || arrived_state.get().top) />
+                    <BooleanDisplay value=Signal::derive(move || arrived_state.get().top) />
                     <div class="text-right opacity-75">
                         "Right Arrived"
                     </div>
-                    <BooleanDisplay value=Signal::derive(cx, move || arrived_state.get().right) />
+                    <BooleanDisplay value=Signal::derive(move || arrived_state.get().right) />
                     <div class="text-right opacity-75">
                         "Bottom Arrived"
                     </div>
-                    <BooleanDisplay value=Signal::derive(cx, move || arrived_state.get().bottom) />
+                    <BooleanDisplay value=Signal::derive(move || arrived_state.get().bottom) />
                     <div class="text-right opacity-75">
                         "Left Arrived"
                     </div>
-                    <BooleanDisplay value=Signal::derive(cx, move || arrived_state.get().left) />
+                    <BooleanDisplay value=Signal::derive(move || arrived_state.get().left) />
                     <div class="text-right opacity-75">
                         "Scrolling Up"
                     </div>
-                    <BooleanDisplay value=Signal::derive(cx, move || directions.get().top) />
+                    <BooleanDisplay value=Signal::derive(move || directions.get().top) />
                     <div class="text-right opacity-75">
                         "Scrolling Right"
                     </div>
-                    <BooleanDisplay value=Signal::derive(cx, move || directions.get().right) />
+                    <BooleanDisplay value=Signal::derive(move || directions.get().right) />
                     <div class="text-right opacity-75">
                         "Scrolling Down"
                     </div>
-                    <BooleanDisplay value=Signal::derive(cx, move || directions.get().bottom) />
+                    <BooleanDisplay value=Signal::derive(move || directions.get().bottom) />
                     <div class="text-right opacity-75">
                         "Scrolling Left"
                     </div>
-                    <BooleanDisplay value=Signal::derive(cx, move || directions.get().left) />
+                    <BooleanDisplay value=Signal::derive(move || directions.get().left) />
                 </div>
             </div>
         </div>
@@ -163,7 +161,7 @@ fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
 
-    mount_to(demo_or_body(), |cx| {
+    mount_to(demo_or_body(), || {
-        view! { cx, <Demo /> }
+        view! { <Demo /> }
     })
 }

examples/use_storage/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { version = "0.4", features = ["nightly", "csr"] }
+leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_storage/src/main.rs

@@ -12,7 +12,7 @@ pub struct BananaState {
 }
 
 #[component]
-fn Demo(cx: Scope) -> impl IntoView {
+fn Demo() -> impl IntoView {
     let the_default = BananaState {
         name: "Banana".to_string(),
         color: "Yellow".to_string(),
@@ -20,12 +20,11 @@ fn Demo(cx: Scope) -> impl IntoView {
         count: 0,
     };
 
-    let (state, set_state, _) = use_storage(cx, "banana-state", the_default.clone());
+    let (state, set_state, _) = use_storage("banana-state", the_default.clone());
 
-    let (state2, ..) = use_storage(cx, "banana-state", the_default.clone());
+    let (state2, ..) = use_storage("banana-state", the_default.clone());
 
-    view! { cx,
+    view! {         <input
-        <input
             class="block"
             prop:value=move || state.get().name
             on:input=move |e| set_state.update(|s| s.name = event_target_value(&e))
@@ -60,7 +59,7 @@ fn Demo(cx: Scope) -> impl IntoView {
             { move || format!("{:#?}", state2.get()) }
         </pre>
 
-        <Note>"The values are persistant. When you reload the page the values will be the same."</Note>
+        <Note>"The values are persistent. When you reload the page the values will be the same."</Note>
     }
 }
 
@@ -68,7 +67,7 @@ fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
 
-    mount_to(demo_or_body(), |cx| {
+    mount_to(demo_or_body(), || {
-        view! { cx, <Demo /> }
+        view! { <Demo /> }
     })
 }

examples/use_throttle_fn/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { version = "0.4", features = ["nightly", "csr"] }
+leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_throttle_fn/src/main.rs

@@ -3,14 +3,16 @@ use leptos_use::docs::{demo_or_body, Note};
 use leptos_use::use_throttle_fn;
 
 #[component]
-fn Demo(cx: Scope) -> impl IntoView {
+fn Demo() -> impl IntoView {
-    let (click_count, set_click_count) = create_signal(cx, 0);
+    let (click_count, set_click_count) = create_signal(0);
-    let (throttled_count, set_throttled_count) = create_signal(cx, 0);
+    let (throttled_count, set_throttled_count) = create_signal(0);
 
-    let throttled_fn = use_throttle_fn(move || set_throttled_count.set(throttled_count.get_untracked() + 1), 1000.0);
+    let throttled_fn = use_throttle_fn(
+        move || set_throttled_count.set(throttled_count.get_untracked() + 1),
+        1000.0,
+    );
 
-    view! { cx,
+    view! {         <button
-        <button
             on:click=move |_| {
                 set_click_count.set(click_count.get_untracked() + 1);
                 throttled_fn();
@@ -28,7 +30,7 @@ fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
 
-    mount_to(demo_or_body(), |cx| {
+    mount_to(demo_or_body(), || {
-        view! { cx, <Demo /> }
+        view! { <Demo /> }
     })
 }

examples/use_websocket/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { version = "0.4", features = ["nightly", "csr"] }
+leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_websocket/src/main.rs

@@ -8,8 +8,8 @@ use leptos_use::{
 use web_sys::{CloseEvent, Event};
 
 #[component]
-fn Demo(cx: Scope) -> impl IntoView {
+fn Demo() -> impl IntoView {
-    let (history, set_history) = create_signal(cx, vec![]);
+    let (history, set_history) = create_signal(vec![]);
 
     fn update_history(&history: &WriteSignal<Vec<String>>, message: String) {
         let _ = &history.update(|history: &mut Vec<_>| history.push(message));
@@ -27,7 +27,7 @@ fn Demo(cx: Scope) -> impl IntoView {
         open,
         close,
         ..
-    } = use_websocket(cx, "wss://echo.websocket.events/".to_string());
+    } = use_websocket("wss://echo.websocket.events/".to_string());
 
     let send_message = move |_| {
         let m = "Hello, world!".to_string();
@@ -52,13 +52,13 @@ fn Demo(cx: Scope) -> impl IntoView {
         close();
     };
 
-    create_effect(cx, move |_| {
+    create_effect(move |_| {
         if let Some(m) = message.get() {
             update_history(&set_history, format! {"[message]: {:?}", m});
         };
     });
 
-    create_effect(cx, move |_| {
+    create_effect(move |_| {
         if let Some(m) = message_bytes.get() {
             update_history(&set_history, format! {"[message_bytes]: {:?}", m});
         };
@@ -68,7 +68,7 @@ fn Demo(cx: Scope) -> impl IntoView {
     // use_websocket_with_options
     // ----------------------------
 
-    let (history2, set_history2) = create_signal(cx, vec![]);
+    let (history2, set_history2) = create_signal(vec![]);
 
     let on_open_callback = move |e: Event| {
         set_history2.update(|history: &mut Vec<_>| {
@@ -107,7 +107,6 @@ fn Demo(cx: Scope) -> impl IntoView {
         message_bytes: message_bytes2,
         ..
     } = use_websocket_with_options(
-        cx,
         "wss://echo.websocket.events/".to_string(),
         UseWebSocketOptions::default()
             .manual(true)
@@ -139,13 +138,13 @@ fn Demo(cx: Scope) -> impl IntoView {
 
     let status2 = move || ready_state2.get().to_string();
 
-    create_effect(cx, move |_| {
+    create_effect(move |_| {
         if let Some(m) = message2.get() {
             update_history(&set_history2, format! {"[message]: {:?}", m});
         };
     });
 
-    create_effect(cx, move |_| {
+    create_effect(move |_| {
         if let Some(m) = message_bytes2.get() {
             update_history(&set_history2, format! {"[message_bytes]: {:?}", m});
         };
@@ -153,8 +152,7 @@ fn Demo(cx: Scope) -> impl IntoView {
 
     let connected2 = move || ready_state2.get() == UseWebSocketReadyState::Open;
 
-    view! { cx,
+    view! {       <div class="container">
-      <div class="container">
         <div class="flex flex-col lg:flex-row gap-4">
           <div class="w-full lg:w-1/2">
           <h1 class="text-xl lg:text-4xl mb-2">"use_websocket"</h1>
@@ -170,8 +168,8 @@ fn Demo(cx: Scope) -> impl IntoView {
             <For
               each=move || history.get().into_iter().enumerate()
               key=|(index, _)| *index
-              view=move |cx, (_, message)| {
+              view=move |(_, message)| {
-                view! {cx,  <div>{message}</div> }
+                view! { <div>{message}</div> }
               }
               />
 
@@ -191,8 +189,8 @@ fn Demo(cx: Scope) -> impl IntoView {
             <For
               each=move || history2.get().into_iter().enumerate()
               key=|(index, _)| *index
-              view=move |cx, (_, message)| {
+              view=move |(_, message)| {
-                view! {cx,  <li>{message}</li> }
+                view! { <li>{message}</li> }
               }
               />
             </ul>
@@ -208,7 +206,7 @@ fn main() {
     _ = console_log::init_with_level(log::Level::Info);
     console_error_panic_hook::set_once();
 
-    mount_to(demo_or_body(), |cx| {
+    mount_to(demo_or_body(), || {
-        view! { cx, <Demo /> }
+        view! { <Demo /> }
     })
 }

examples/use_window_focus/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { version = "0.4", features = ["nightly", "csr"] }
+leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_window_focus/src/main.rs

@@ -1,25 +1,28 @@
 use leptos::*;
 use leptos_use::docs::demo_or_body;
-use leptos_use::{use_window_focus, watch};
+use leptos_use::use_window_focus;
 
 #[component]
-fn Demo(cx: Scope) -> impl IntoView {
+fn Demo() -> impl IntoView {
     let start_message = "💡 Click somewhere outside of the document to unfocus.";
 
-    let (message, set_message) = create_signal(cx, start_message);
+    let (message, set_message) = create_signal(start_message);
 
-    let focused = use_window_focus(cx);
+    let focused = use_window_focus();
 
-    let _ = watch(cx, focused, move |focused, _, _| {
+    let _ = watch(
+        focused,
+        move |focused, _, _| {
             if *focused {
                 set_message(start_message);
             } else {
                 set_message("ℹ Tab is unfocused")
             }
-    });
+        },
+        false,
+    );
 
-    view! { cx,
+    view! {         <div>{ message }</div>
-        <div>{ message }</div>
     }
 }
 
@@ -27,7 +30,7 @@ fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
 
-    mount_to(demo_or_body(), |cx| {
+    mount_to(demo_or_body(), || {
-        view! { cx, <Demo /> }
+        view! { <Demo /> }
     })
 }

examples/use_window_scroll/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { version = "0.4", features = ["nightly", "csr"] }
+leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_window_scroll/src/main.rs

@@ -3,8 +3,8 @@ use leptos_use::docs::{demo_or_body, Note};
 use leptos_use::use_window_scroll;
 
 #[component]
-fn Demo(cx: Scope) -> impl IntoView {
+fn Demo() -> impl IntoView {
-    let (x, y) = use_window_scroll(cx);
+    let (x, y) = use_window_scroll();
 
     let div = document().create_element("div").unwrap();
     div.set_attribute(
@@ -15,8 +15,7 @@ fn Demo(cx: Scope) -> impl IntoView {
 
     document().body().unwrap().append_child(&div).unwrap();
 
-    view! { cx,
+    view! {         <div>See scroll values in the lower right corner of the screen.</div>
-        <div>See scroll values in the lower right corner of the screen.</div>
         <div class="float m-5 area shadow-lg">
             <Note class="mb-2">Scroll value</Note>
             <div>
@@ -31,7 +30,7 @@ fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
 
-    mount_to(demo_or_body(), |cx| {
+    mount_to(demo_or_body(), || {
-        view! { cx, <Demo /> }
+        view! { <Demo /> }
     })
 }

examples/watch_debounced/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { version = "0.4", features = ["nightly", "csr"] }
+leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/watch_debounced/src/main.rs

@@ -3,12 +3,11 @@ use leptos_use::docs::{demo_or_body, Note};
 use leptos_use::{watch_debounced_with_options, WatchDebouncedOptions};
 
 #[component]
-fn Demo(cx: Scope) -> impl IntoView {
+fn Demo() -> impl IntoView {
-    let (input, set_input) = create_signal(cx, "".to_string());
+    let (input, set_input) = create_signal("".to_string());
-    let (updated, set_updated) = create_signal(cx, 0);
+    let (updated, set_updated) = create_signal(0);
 
     let _ = watch_debounced_with_options(
-        cx,
         move || input.get(),
         move |_, _, _| {
             set_updated.update(|x| *x += 1);
@@ -17,8 +16,7 @@ fn Demo(cx: Scope) -> impl IntoView {
         WatchDebouncedOptions::default().max_wait(Some(5000.0)),
     );
 
-    view! { cx,
+    view! {         <input
-        <input
             class="block"
             prop:value=move || input.get()
             on:input=move |e| set_input.set(event_target_value(&e))
@@ -40,7 +38,7 @@ fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
 
-    mount_to(demo_or_body(), |cx| {
+    mount_to(demo_or_body(), || {
-        view! { cx, <Demo /> }
+        view! { <Demo /> }
     })
 }

examples/watch_pausable/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { version = "0.4", features = ["nightly", "csr"] }
+leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/watch_pausable/src/main.rs

@@ -4,10 +4,10 @@ use leptos_use::docs::{demo_or_body, Note};
 use leptos_use::{watch_pausable, WatchPausableReturn};
 
 #[component]
-fn Demo(cx: Scope) -> impl IntoView {
+fn Demo() -> impl IntoView {
-    let input = create_node_ref::<Input>(cx);
+    let input = create_node_ref::<Input>();
-    let (log, set_log) = create_signal(cx, "".to_string());
+    let (log, set_log) = create_signal("".to_string());
-    let (source, set_source) = create_signal(cx, "".to_string());
+    let (source, set_source) = create_signal("".to_string());
 
     let WatchPausableReturn {
         pause,
@@ -15,7 +15,6 @@ fn Demo(cx: Scope) -> impl IntoView {
         is_active,
         ..
     } = watch_pausable(
-        cx,
         move || source.get(),
         move |v, _, _| {
             set_log.update(|log| *log = format!("{log}Changed to \"{v}\"\n"));
@@ -34,8 +33,7 @@ fn Demo(cx: Scope) -> impl IntoView {
         resume();
     };
 
-    view! { cx,
+    view! {         <Note class="mb-2">"Type something below to trigger the watch"</Note>
-        <Note class="mb-2">"Type something below to trigger the watch"</Note>
         <input
             node_ref=input
             class="block"
@@ -58,7 +56,7 @@ fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
 
-    mount_to(demo_or_body(), |cx| {
+    mount_to(demo_or_body(), || {
-        view! { cx, <Demo /> }
+        view! { <Demo /> }
     })
 }

examples/watch_throttled/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { version = "0.4", features = ["nightly", "csr"] }
+leptos = { version = "0.5.0-alpha", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/watch_throttled/src/main.rs

@@ -3,12 +3,11 @@ use leptos_use::docs::{demo_or_body, Note};
 use leptos_use::watch_throttled;
 
 #[component]
-fn Demo(cx: Scope) -> impl IntoView {
+fn Demo() -> impl IntoView {
-    let (input, set_input) = create_signal(cx, "".to_string());
+    let (input, set_input) = create_signal("".to_string());
-    let (updated, set_updated) = create_signal(cx, 0);
+    let (updated, set_updated) = create_signal(0);
 
     let _ = watch_throttled(
-        cx,
         move || input.get(),
         move |_, _, _| {
             set_updated.update(|x| *x += 1);
@@ -16,8 +15,7 @@ fn Demo(cx: Scope) -> impl IntoView {
         1000.0,
     );
 
-    view! { cx,
+    view! {         <input
-        <input
             class="block"
             prop:value=move || input.get()
             on:input=move |e| set_input.set(event_target_value(&e))
@@ -37,7 +35,7 @@ fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
 
-    mount_to(demo_or_body(), |cx| {
+    mount_to(demo_or_body(), || {
-        view! { cx, <Demo /> }
+        view! { <Demo /> }
     })
 }

src/core/element_maybe_signal.rs

@@ -127,35 +127,26 @@ where
 
 // From static element //////////////////////////////////////////////////////////////
 
-impl<T, E> From<(Scope, T)> for ElementMaybeSignal<T, E>
+impl<T, E> From<T> for ElementMaybeSignal<T, E>
 where
     T: Into<E> + Clone + 'static,
 {
-    fn from(value: (Scope, T)) -> Self {
+    fn from(value: T) -> Self {
-        ElementMaybeSignal::Static(Some(value.1))
+        ElementMaybeSignal::Static(Some(value))
     }
 }
 
-impl<T, E> From<(Scope, Option<T>)> for ElementMaybeSignal<T, E>
+impl<T, E> From<Option<T>> for ElementMaybeSignal<T, E>
 where
     T: Into<E> + Clone + 'static,
 {
-    fn from(target: (Scope, Option<T>)) -> Self {
+    fn from(target: Option<T>) -> Self {
-        ElementMaybeSignal::Static(target.1)
+        ElementMaybeSignal::Static(target)
     }
 }
 
 // From string (selector) ///////////////////////////////////////////////////////////////
 
-impl<'a, E> From<(Scope, &'a str)> for ElementMaybeSignal<web_sys::Element, E>
-where
-    E: From<web_sys::Element> + 'static,
-{
-    fn from(target: (Scope, &'a str)) -> Self {
-        Self::Static(document().query_selector(target.1).unwrap_or_default())
-    }
-}
-
 impl<'a, E> From<&'a str> for ElementMaybeSignal<web_sys::Element, E>
 where
     E: From<web_sys::Element> + 'static,
@@ -174,17 +165,13 @@ where
     }
 }
 
-impl<E> From<(Scope, Signal<String>)> for ElementMaybeSignal<web_sys::Element, E>
+impl<E> From<Signal<String>> for ElementMaybeSignal<web_sys::Element, E>
 where
     E: From<web_sys::Element> + 'static,
 {
-    fn from(target: (Scope, Signal<String>)) -> Self {
+    fn from(signal: Signal<String>) -> Self {
-        let (cx, signal) = target;
-
         Self::Dynamic(
-            create_memo(cx, move |_| {
+            create_memo(move |_| document().query_selector(&signal.get()).unwrap_or_default())
-                document().query_selector(&signal.get()).unwrap_or_default()
-            })
                 .into(),
         )
     }
@@ -194,12 +181,12 @@ where
 
 macro_rules! impl_from_signal_option {
     ($ty:ty) => {
-        impl<T, E> From<(Scope, $ty)> for ElementMaybeSignal<T, E>
+        impl<T, E> From<$ty> for ElementMaybeSignal<T, E>
         where
             T: Into<E> + Clone + 'static,
         {
-            fn from(target: (Scope, $ty)) -> Self {
+            fn from(target: $ty) -> Self {
-                Self::Dynamic(target.1.into())
+                Self::Dynamic(target.into())
             }
         }
     };
@@ -212,14 +199,12 @@ impl_from_signal_option!(Memo<Option<T>>);
 
 macro_rules! impl_from_signal {
     ($ty:ty) => {
-        impl<T, E> From<(Scope, $ty)> for ElementMaybeSignal<T, E>
+        impl<T, E> From<$ty> for ElementMaybeSignal<T, E>
         where
             T: Into<E> + Clone + 'static,
         {
-            fn from(target: (Scope, $ty)) -> Self {
+            fn from(signal: $ty) -> Self {
-                let (cx, signal) = target;
+                Self::Dynamic(Signal::derive(move || Some(signal.get())))
-
-                Self::Dynamic(Signal::derive(cx, move || Some(signal.get())))
             }
         }
     };
@@ -234,14 +219,12 @@ impl_from_signal!(Memo<T>);
 
 macro_rules! impl_from_node_ref {
     ($ty:ty) => {
-        impl<R> From<(Scope, NodeRef<R>)> for ElementMaybeSignal<$ty, $ty>
+        impl<R> From<NodeRef<R>> for ElementMaybeSignal<$ty, $ty>
         where
             R: ElementDescriptor + Clone + 'static,
         {
-            fn from(target: (Scope, NodeRef<R>)) -> Self {
+            fn from(node_ref: NodeRef<R>) -> Self {
-                let (cx, node_ref) = target;
+                Self::Dynamic(Signal::derive(move || {
-
-                Self::Dynamic(Signal::derive(cx, move || {
                     node_ref.get().map(move |el| {
                         let el = el.into_any();
                         let el: $ty = el.deref().clone().into();

src/core/elements_maybe_signal.rs

@@ -128,32 +128,32 @@ where
 
 // From single static element //////////////////////////////////////////////////////////////
 
-impl<T, E> From<(Scope, T)> for ElementsMaybeSignal<T, E>
+impl<T, E> From<T> for ElementsMaybeSignal<T, E>
 where
     T: Into<E> + Clone + 'static,
 {
-    fn from(value: (Scope, T)) -> Self {
+    fn from(value: T) -> Self {
-        ElementsMaybeSignal::Static(vec![Some(value.1)])
+        ElementsMaybeSignal::Static(vec![Some(value)])
     }
 }
 
-impl<T, E> From<(Scope, Option<T>)> for ElementsMaybeSignal<T, E>
+impl<T, E> From<Option<T>> for ElementsMaybeSignal<T, E>
 where
     T: Into<E> + Clone + 'static,
 {
-    fn from(target: (Scope, Option<T>)) -> Self {
+    fn from(target: Option<T>) -> Self {
-        ElementsMaybeSignal::Static(vec![target.1])
+        ElementsMaybeSignal::Static(vec![target])
     }
 }
 
 // From string (selector) ///////////////////////////////////////////////////////////////
 
-impl<'a, E> From<(Scope, &'a str)> for ElementsMaybeSignal<web_sys::Node, E>
+impl<'a, E> From<&'a str> for ElementsMaybeSignal<web_sys::Node, E>
 where
     E: From<web_sys::Node> + 'static,
 {
-    fn from(target: (Scope, &'a str)) -> Self {
+    fn from(target: &'a str) -> Self {
-        if let Ok(node_list) = document().query_selector_all(target.1) {
+        if let Ok(node_list) = document().query_selector_all(target) {
             let mut list = Vec::with_capacity(node_list.length() as usize);
             for i in 0..node_list.length() {
                 let node = node_list.get(i).expect("checked the range");
@@ -167,15 +167,13 @@ where
     }
 }
 
-impl<E> From<(Scope, Signal<String>)> for ElementsMaybeSignal<web_sys::Node, E>
+impl<E> From<Signal<String>> for ElementsMaybeSignal<web_sys::Node, E>
 where
     E: From<web_sys::Node> + 'static,
 {
-    fn from(target: (Scope, Signal<String>)) -> Self {
+    fn from(signal: Signal<String>) -> Self {
-        let (cx, signal) = target;
-
         Self::Dynamic(
-            create_memo(cx, move |_| {
+            create_memo(move |_| {
                 if let Ok(node_list) = document().query_selector_all(&signal.get()) {
                     let mut list = Vec::with_capacity(node_list.length() as usize);
                     for i in 0..node_list.length() {
@@ -196,13 +194,12 @@ where
 
 macro_rules! impl_from_signal_option {
     ($ty:ty) => {
-        impl<T, E> From<(Scope, $ty)> for ElementsMaybeSignal<T, E>
+        impl<T, E> From<$ty> for ElementsMaybeSignal<T, E>
         where
             T: Into<E> + Clone + 'static,
         {
-            fn from(target: (Scope, $ty)) -> Self {
+            fn from(signal: $ty) -> Self {
-                let (cx, signal) = target;
+                Self::Dynamic(Signal::derive(move || vec![signal.get()]))
-                Self::Dynamic(Signal::derive(cx, move || vec![signal.get()]))
             }
         }
     };
@@ -215,14 +212,12 @@ impl_from_signal_option!(Memo<Option<T>>);
 
 macro_rules! impl_from_signal {
     ($ty:ty) => {
-        impl<T, E> From<(Scope, $ty)> for ElementsMaybeSignal<T, E>
+        impl<T, E> From<$ty> for ElementsMaybeSignal<T, E>
         where
             T: Into<E> + Clone + 'static,
         {
-            fn from(target: (Scope, $ty)) -> Self {
+            fn from(signal: $ty) -> Self {
-                let (cx, signal) = target;
+                Self::Dynamic(Signal::derive(move || vec![Some(signal.get())]))
-
-                Self::Dynamic(Signal::derive(cx, move || vec![Some(signal.get())]))
             }
         }
     };
@@ -237,14 +232,12 @@ impl_from_signal!(Memo<T>);
 
 macro_rules! impl_from_node_ref {
     ($ty:ty) => {
-        impl<R> From<(Scope, NodeRef<R>)> for ElementsMaybeSignal<$ty, $ty>
+        impl<R> From<NodeRef<R>> for ElementsMaybeSignal<$ty, $ty>
         where
             R: ElementDescriptor + Clone + 'static,
         {
-            fn from(target: (Scope, NodeRef<R>)) -> Self {
+            fn from(node_ref: NodeRef<R>) -> Self {
-                let (cx, node_ref) = target;
+                Self::Dynamic(Signal::derive(move || {
-
-                Self::Dynamic(Signal::derive(cx, move || {
                     vec![node_ref.get().map(move |el| {
                         let el = el.into_any();
                         let el: $ty = el.deref().clone().into();
@@ -261,74 +254,69 @@ impl_from_node_ref!(web_sys::Element);
 
 // From multiple static elements //////////////////////////////////////////////////////////////
 
-impl<T, E> From<(Scope, &[T])> for ElementsMaybeSignal<T, E>
+impl<T, E> From<&[T]> for ElementsMaybeSignal<T, E>
 where
     T: Into<E> + Clone + 'static,
 {
-    fn from(target: (Scope, &[T])) -> Self {
+    fn from(target: &[T]) -> Self {
-        Self::Static(target.1.iter().map(|t| Some(t.clone())).collect())
+        Self::Static(target.iter().map(|t| Some(t.clone())).collect())
     }
 }
 
-impl<T, E> From<(Scope, &[Option<T>])> for ElementsMaybeSignal<T, E>
+impl<T, E> From<&[Option<T>]> for ElementsMaybeSignal<T, E>
 where
     T: Into<E> + Clone + 'static,
 {
-    fn from(target: (Scope, &[Option<T>])) -> Self {
+    fn from(target: &[Option<T>]) -> Self {
-        Self::Static(target.1.to_vec())
+        Self::Static(target.to_vec())
     }
 }
 
 // From signal of vec ////////////////////////////////////////////////////////////////
 
-impl<T, E> From<(Scope, Signal<Vec<T>>)> for ElementsMaybeSignal<T, E>
+impl<T, E> From<Signal<Vec<T>>> for ElementsMaybeSignal<T, E>
 where
     T: Into<E> + Clone + 'static,
 {
-    fn from(target: (Scope, Signal<Vec<T>>)) -> Self {
+    fn from(signal: Signal<Vec<T>>) -> Self {
-        let (cx, signal) = target;
+        Self::Dynamic(Signal::derive(move || {
-        Self::Dynamic(Signal::derive(cx, move || {
             signal.get().into_iter().map(|t| Some(t)).collect()
         }))
     }
 }
 
-impl<T, E> From<(Scope, Signal<Vec<Option<T>>>)> for ElementsMaybeSignal<T, E>
+impl<T, E> From<Signal<Vec<Option<T>>>> for ElementsMaybeSignal<T, E>
 where
     T: Into<E> + Clone + 'static,
 {
-    fn from(target: (Scope, Signal<Vec<Option<T>>>)) -> Self {
+    fn from(target: Signal<Vec<Option<T>>>) -> Self {
-        Self::Dynamic(target.1)
+        Self::Dynamic(target)
     }
 }
 
 // From multiple signals //////////////////////////////////////////////////////////////
 
-impl<T, E> From<(Scope, &[Signal<T>])> for ElementsMaybeSignal<T, E>
+impl<T, E> From<&[Signal<T>]> for ElementsMaybeSignal<T, E>
 where
     T: Into<E> + Clone + 'static,
 {
-    fn from(target: (Scope, &[Signal<T>])) -> Self {
+    fn from(list: &[Signal<T>]) -> Self {
-        let (cx, list) = target;
-
         let list = list.to_vec();
 
-        Self::Dynamic(Signal::derive(cx, move || {
+        Self::Dynamic(Signal::derive(move || {
             list.iter().map(|t| Some(t.get())).collect()
         }))
     }
 }
 
-impl<T, E> From<(Scope, &[Signal<Option<T>>])> for ElementsMaybeSignal<T, E>
+impl<T, E> From<&[Signal<Option<T>>]> for ElementsMaybeSignal<T, E>
 where
     T: Into<E> + Clone + 'static,
 {
-    fn from(target: (Scope, &[Signal<Option<T>>])) -> Self {
+    fn from(list: &[Signal<Option<T>>]) -> Self {
-        let (cx, list) = target;
-
         let list = list.to_vec();
 
-        Self::Dynamic(Signal::derive(cx, move || {
+        Self::Dynamic(Signal::derive(move || {
             list.iter().map(|t| t.get()).collect()
         }))
     }
@@ -338,16 +326,14 @@ where
 
 macro_rules! impl_from_multi_node_ref {
     ($ty:ty) => {
-        impl<R> From<(Scope, &[NodeRef<R>])> for ElementsMaybeSignal<$ty, $ty>
+        impl<R> From<&[NodeRef<R>]> for ElementsMaybeSignal<$ty, $ty>
         where
             R: ElementDescriptor + Clone + 'static,
         {
-            fn from(target: (Scope, &[NodeRef<R>])) -> Self {
+            fn from(node_refs: &[NodeRef<R>]) -> Self {
-                let (cx, node_refs) = target;
-
                 let node_refs = node_refs.to_vec();
 
-                Self::Dynamic(Signal::derive(cx, move || {
+                Self::Dynamic(Signal::derive(move || {
                     node_refs
                         .iter()
                         .map(|node_ref| {
@@ -369,16 +355,14 @@ impl_from_multi_node_ref!(web_sys::Element);
 
 // From ElementMaybeSignal //////////////////////////////////////////////////////////////
 
-impl<T, E> From<(Scope, ElementMaybeSignal<T, E>)> for ElementsMaybeSignal<T, E>
+impl<T, E> From<ElementMaybeSignal<T, E>> for ElementsMaybeSignal<T, E>
 where
     T: Into<E> + Clone + 'static,
 {
-    fn from(target: (Scope, ElementMaybeSignal<T, E>)) -> Self {
+    fn from(signal: ElementMaybeSignal<T, E>) -> Self {
-        let (cx, signal) = target;
-
         match signal {
             ElementMaybeSignal::Dynamic(signal) => {
-                Self::Dynamic(Signal::derive(cx, move || vec![signal.get()]))
+                Self::Dynamic(Signal::derive(move || vec![signal.get()]))
             }
             ElementMaybeSignal::Static(el) => Self::Static(vec![el]),
             ElementMaybeSignal::_Phantom(_) => unreachable!(),

src/core/maybe_rw_signal.rs

@@ -77,12 +77,12 @@ impl From<&str> for MaybeRwSignal<String> {
 }
 
 impl<T: Clone> MaybeRwSignal<T> {
-    pub fn into_signal(self, cx: Scope) -> (Signal<T>, WriteSignal<T>) {
+    pub fn into_signal(self) -> (Signal<T>, WriteSignal<T>) {
         match self {
             Self::DynamicRead(s) => {
-                let (r, w) = create_signal(cx, s.get_untracked());
+                let (r, w) = create_signal(s.get_untracked());
 
-                create_effect(cx, move |_| {
+                create_effect(move |_| {
                     w.update(move |w| {
                         *w = s.get();
                     });
@@ -92,7 +92,7 @@ impl<T: Clone> MaybeRwSignal<T> {
             }
             Self::DynamicRw(r, w) => (r, w),
             Self::Static(v) => {
-                let (r, w) = create_signal(cx, v.clone());
+                let (r, w) = create_signal(v.clone());
                 (Signal::from(r), w)
             }
         }

src/docs/boolean_display.rs

@@ -2,7 +2,6 @@ use leptos::*;
 
 #[component]
 pub fn BooleanDisplay(
-    cx: Scope,
     #[prop(into)] value: MaybeSignal<bool>,
     #[prop(optional, into)] class: String,
     #[prop(default = "true")] true_str: &'static str,
@@ -19,8 +18,7 @@ pub fn BooleanDisplay(
         )
     };
 
-    view! { cx,
+    view! {         <span class=class>
-        <span class=class>
             { move || if value.get() { true_str} else { false_str } }
         </span>
     }

src/docs/note.rs

@@ -1,10 +1,9 @@
 use leptos::*;
 
 #[component]
-pub fn Note(cx: Scope, #[prop(optional, into)] class: String, children: Children) -> impl IntoView {
+pub fn Note(#[prop(optional, into)] class: String, children: Children) -> impl IntoView {
     let class = format!("note {class}");
 
-    view! { cx,
+    view! {         <div class=class>{ children() }</div>
-        <div class=class>{ children(cx) }</div>
     }
 }

src/is_err.rs

@@ -11,15 +11,14 @@ use_derive_signal!(
     /// # use leptos_use::is_err;
     /// #
     /// # #[component]
-    /// # fn Demo(cx: Scope) -> impl IntoView {
+    /// # fn Demo() -> impl IntoView {
     /// let (example, set_example) = create_signal(
-    ///     cx,
     ///     if js_sys::Math::random() < 0.5 { Ok("Example") } else { Err(()) }
     /// );
     ///
-    /// let is_error = is_err(cx, example);
+    /// let is_error = is_err(example);
     /// #
-    /// # view! { cx, }
+    /// # view! { }
     /// # }
     /// ```
     is_err<Result<T, ()>, T: 'static> -> bool

src/is_none.rs

@@ -11,15 +11,14 @@ use_derive_signal!(
     /// # use leptos_use::is_none;
     /// #
     /// # #[component]
-    /// # fn Demo(cx: Scope) -> impl IntoView {
+    /// # fn Demo() -> impl IntoView {
     /// let (example, set_example) = create_signal(
-    ///     cx,
     ///     if js_sys::Math::random() < 0.5 { Some("Example") } else { None }
     /// );
     ///
-    /// let is_empty = is_none(cx, example);
+    /// let is_empty = is_none(example);
     /// #
-    /// # view! { cx, }
+    /// # view! { }
     /// # }
     /// ```
     is_none<Option<T>, T: 'static> -> bool