Allow users to use the stable toolchain

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "rust-analyzer.linkedProjects": [
+        "./examples/use_element_size/Cargo.toml"
+    ]
+}

Cargo.toml

@@ -12,9 +12,8 @@ readme = "README.md"
 repository = "https://github.com/Synphonyte/leptos-use"
 homepage = "https://leptos-use.rs"
 
-
 [dependencies]
-leptos = "0.3.0"
+leptos = { version = "0.3", features = ["stable"] }
 wasm-bindgen = "0.2.86"
 js-sys = "0.3.63"
 default-struct-builder = "0.2.1"

examples/on_click_outside/rust-toolchain.toml

@@ -1,2 +1,2 @@
 [toolchain]
-channel = "nightly"
+channel = "stable"

examples/on_click_outside/src/main.rs

@@ -7,15 +7,15 @@ fn Demo(cx: Scope) -> impl IntoView {
     let (show_modal, set_show_modal) = create_signal(cx, false);
     let modal_ref = create_node_ref(cx);
 
-    let _ = on_click_outside(cx, modal_ref, move |_| set_show_modal(false));
+    let _ = on_click_outside(cx, modal_ref, move |_| set_show_modal.set(false));
 
     view! { cx,
-        <button on:click=move |_| set_show_modal(true)>"Open Modal"</button>
+        <button on:click=move |_| set_show_modal.set(true)>"Open Modal"</button>
 
-        <Show when=show_modal fallback=|_| view! { cx, }>
+        <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(false)>"𝖷"</button>
+                    <button class="button small" title="Close" on:click=move |_| set_show_modal.set(false)>"𝖷"</button>
                     <p class="heading">"Demo Modal"</p>
                     <p>"Click outside this modal to close it."</p>
                 </div>

examples/use_abs/rust-toolchain.toml

@@ -1,2 +1,2 @@
 [toolchain]
-channel = "nightly"
+channel = "stable"

examples/use_abs/src/main.rs

@@ -11,15 +11,15 @@ fn Demo(cx: Scope) -> impl IntoView {
     view! { cx,
         <input
             class="block"
-            prop:value=value
+            prop:value=move || value.get()
-            on:input=move |e| set_value(event_target_value(&e).parse().unwrap())
+            on:input=move |e| set_value.set(event_target_value(&e).parse().unwrap())
             type="range"
             min="-30"
             max="10"
             step="0.1"
         />
-        <p>"Value: " {value}</p>
+        <p>"Value: " {move || value.get()}</p>
-        <p>"Absolute: " {result}</p>
+        <p>"Absolute: " {move || result.get()}</p>
     }
 }
 

examples/use_active_element/rust-toolchain.toml

@@ -1,2 +1,2 @@
 [toolchain]
-channel = "nightly"
+channel = "stable"

examples/use_active_element/src/main.rs

@@ -8,7 +8,7 @@ fn Demo(cx: Scope) -> impl IntoView {
     let key = move || {
         format!(
             "{:?}",
-            active_element()
+            active_element.get()
                 .map(|el| el.dataset().get("id"))
                 .unwrap_or_default()
         )

examples/use_breakpoints/rust-toolchain.toml

@@ -1,2 +1,2 @@
 [toolchain]
-channel = "nightly"
+channel = "stable"

examples/use_ceil/rust-toolchain.toml

@@ -1,2 +1,2 @@
 [toolchain]
-channel = "nightly"
+channel = "stable"

examples/use_ceil/src/main.rs

@@ -11,15 +11,15 @@ fn Demo(cx: Scope) -> impl IntoView {
     view! { cx,
         <input
             class="block"
-            prop:value=value
+            prop:value=move || value.get()
-            on:input=move |e| set_value(event_target_value(&e).parse().unwrap())
+            on:input=move |e| set_value.set(event_target_value(&e).parse().unwrap())
             type="range"
             min="0"
             max="10"
             step="0.01"
         />
-        <p>"Value: " {value}</p>
+        <p>"Value: " {move || value.get()}</p>
-        <p>"Ceiled: " {result}</p>
+        <p>"Ceiled: " {move || result.get()}</p>
     }
 }
 

examples/use_css_var/rust-toolchain.toml

@@ -1,2 +1,2 @@
 [toolchain]
-channel = "nightly"
+channel = "stable"

examples/use_css_var/src/main.rs

@@ -8,10 +8,10 @@ fn Demo(cx: Scope) -> impl IntoView {
     let (color, set_color) =
         use_css_var_with_options(cx, "--color", UseCssVarOptions::default().target(el));
     let switch_color = move |_| {
-        if color() == "#df8543" {
+        if color.get() == "#df8543" {
-            set_color("#7fa998".to_string());
+            set_color.set("#7fa998".to_string());
         } else {
-            set_color("#df8543".to_string());
+            set_color.set("#df8543".to_string());
         }
     };
 
@@ -19,16 +19,16 @@ fn Demo(cx: Scope) -> impl IntoView {
     let (key, set_key) = create_signal(cx, "--color".to_string());
     let (color_val, _) = use_css_var_with_options(cx, key, UseCssVarOptions::default().target(elv));
     let change_var = move |_| {
-        if key() == "--color" {
+        if key.get() == "--color" {
-            set_key("--color-one".to_string());
+            set_key.set("--color-one".to_string());
         } else {
-            set_key("--color".to_string());
+            set_key.set("--color".to_string());
         }
     };
     let style = move || {
         format!(
             "--color: #7fa998; --color-one: #df8543; color: {}",
-            color_val()
+            color_val.get()
         )
     };
 

examples/use_debounce_fn/rust-toolchain.toml

@@ -1,2 +1,2 @@
 [toolchain]
-channel = "nightly"
+channel = "stable"

examples/use_debounce_fn/src/main.rs

@@ -8,7 +8,7 @@ fn Demo(cx: Scope) -> impl IntoView {
     let (debounced_count, set_debounced_count) = create_signal(cx, 0);
 
     let debounced_fn = use_debounce_fn_with_options(
-        move || set_debounced_count(debounced_count() + 1),
+        move || set_debounced_count.set(debounced_count.get_untracked() + 1),
         1000.0,
         DebounceOptions::default().max_wait(Some(5000.0)),
     );
@@ -16,7 +16,7 @@ fn Demo(cx: Scope) -> impl IntoView {
     view! { cx,
         <button
             on:click=move |_| {
-                set_click_count(click_count() + 1);
+                set_click_count.set(click_count.get_untracked() + 1);
                 debounced_fn();
             }
         >

examples/use_element_hover/rust-toolchain.toml

@@ -1,2 +1,2 @@
 [toolchain]
-channel = "nightly"
+channel = "stable"

examples/use_element_hover/src/main.rs

@@ -15,7 +15,7 @@ fn Demo(cx: Scope) -> impl IntoView {
     );
 
     view! { cx,
-        <button node_ref=el>{ move || if is_hovered() { "Thank you!" } else { "Hover me" } }</button>
+        <button node_ref=el>{ move || if is_hovered.get() { "Thank you!" } else { "Hover me" } }</button>
     }
 }
 

examples/use_element_size/Cargo.toml

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

examples/use_element_size/rust-toolchain.toml

@@ -1,2 +1,2 @@
 [toolchain]
-channel = "nightly"
+channel = "stable"

examples/use_element_visibility/rust-toolchain.toml

@@ -1,2 +1,2 @@
 [toolchain]
-channel = "nightly"
+channel = "stable"

examples/use_event_listener/rust-toolchain.toml

@@ -1,2 +1,2 @@
 [toolchain]
-channel = "nightly"
+channel = "stable"

examples/use_event_listener/src/main.rs

@@ -26,14 +26,14 @@ fn Demo(cx: Scope) -> impl IntoView {
         <p>
             <label>
                 <input
-                    type="checkbox" on:change=move |evt| set_cond(event_target_checked(&evt))
+                    type="checkbox" on:change=move |evt| set_cond.set(event_target_checked(&evt))
-                    prop:checked=cond
+                    prop:checked=move || cond.get()
                 />
                 "Condition enabled"
             </label>
         </p>
         <Show
-            when=move || cond()
+            when=move || cond.get()
             fallback=move |cx| view! { cx,
                 <a node_ref=element href="#">
                     "Condition"

examples/use_favicon/rust-toolchain.toml

@@ -1,2 +1,2 @@
 [toolchain]
-channel = "nightly"
+channel = "stable"

examples/use_favicon/src/main.rs

@@ -17,35 +17,35 @@ fn Demo(cx: Scope) -> impl IntoView {
         <p class="flex gap-2">
             <a class=classes.clone() href="#" on:click=move |e| {
                 e.prevent_default();
-                set_icon(Some("favicon-leptos.ico".into()));
+                set_icon.set(Some("favicon-leptos.ico".into()));
             }>
                 <img class=img_classes.clone() width="32" src="use_favicon/demo/img/favicon-leptos.ico" alt="favicon-red" />
             </a>
 
             <a class=classes.clone() href="#" on:click=move |e| {
                 e.prevent_default();
-                set_icon(Some("favicon-red.svg".into()));
+                set_icon.set(Some("favicon-red.svg".into()));
             }>
                 <img class=img_classes.clone() width="32" src="use_favicon/demo/img/favicon-red.svg" alt="favicon-red" />
             </a>
 
             <a class=classes.clone() href="#" on:click=move |e| {
                 e.prevent_default();
-                set_icon(Some("favicon-green.svg".into()));
+                set_icon.set(Some("favicon-green.svg".into()));
             }>
                 <img class=img_classes.clone() width="32" src="use_favicon/demo/img/favicon-green.svg" alt="favicon-green" />
             </a>
 
             <a class=classes.clone() href="#" on:click=move |e| {
                 e.prevent_default();
-                set_icon(Some("favicon-blue.svg".into()));
+                set_icon.set(Some("favicon-blue.svg".into()));
             }>
                 <img class=img_classes.clone() width="32" src="use_favicon/demo/img/favicon-blue.svg" alt="favicon-blue" />
             </a>
 
             <a class=classes.clone() href="#" on:click=move |e| {
                 e.prevent_default();
-                set_icon(Some("favicon-orange.svg".into()));
+                set_icon.set(Some("favicon-orange.svg".into()));
             }>
                 <img class=img_classes width="32" src="use_favicon/demo/img/favicon-orange.svg" alt="favicon-orange" />
             </a>

examples/use_floor/rust-toolchain.toml

@@ -1,2 +1,2 @@
 [toolchain]
-channel = "nightly"
+channel = "stable"

examples/use_floor/src/main.rs

@@ -11,15 +11,15 @@ fn Demo(cx: Scope) -> impl IntoView {
     view! { cx,
         <input
             class="block"
-            prop:value=value
+            prop:value=move || value.get()
-            on:input=move |e| set_value(event_target_value(&e).parse().unwrap())
+            on:input=move |e| set_value.set(event_target_value(&e).parse().unwrap())
             type="range"
             min="0"
             max="10"
             step="0.01"
         />
-        <p>"Value: " {value}</p>
+        <p>"Value: " {move || value.get()}</p>
-        <p>"Floored: " {result}</p>
+        <p>"Floored: " {move || result.get()}</p>
     }
 }
 

examples/use_intersection_observer/rust-toolchain.toml

@@ -1,2 +1,2 @@
 [toolchain]
-channel = "nightly"
+channel = "stable"

examples/use_intersection_observer/src/main.rs

@@ -20,7 +20,7 @@ fn Demo(cx: Scope) -> impl IntoView {
         cx,
         target,
         move |entries, _| {
-            set_visible(entries[0].is_intersecting());
+            set_visible.set(entries[0].is_intersecting());
         },
         UseIntersectionObserverOptions::default().root(Some(root)),
     );
@@ -30,7 +30,7 @@ fn Demo(cx: Scope) -> impl IntoView {
             <label class="checkbox">
                 <input
                     type="checkbox"
-                    prop:checked=is_active
+                    prop:checked=move || is_active.get()
                     name="enabled"
                     on:input=move |e| {
                         if event_target_checked(&e) {

examples/use_interval/rust-toolchain.toml

@@ -1,2 +1,2 @@
 [toolchain]
-channel = "nightly"
+channel = "stable"

examples/use_interval_fn/rust-toolchain.toml

@@ -1,2 +1,2 @@
 [toolchain]
-channel = "nightly"
+channel = "stable"

examples/use_interval_fn/src/main.rs

@@ -29,25 +29,25 @@ fn Demo(cx: Scope) -> impl IntoView {
     } = use_interval_fn(
         cx,
         move || {
-            set_index((index.get() + 1) % greetings.len());
+            set_index.set((index.get() + 1) % greetings.len());
-            set_word(greetings[index.get()]);
+            set_word.set(greetings[index.get()]);
         },
         interval,
     );
 
     view! { cx,
-        <p>{word}</p>
+        <p>{move || word.get()}</p>
         <p>
             "Interval:"
             <input
-                prop:value=interval
+                prop:value=move || interval.get()
-                on:input=move |e| set_interval(event_target_value(&e).parse().unwrap())
+                on:input=move |e| set_interval.set(event_target_value(&e).parse().unwrap())
                 type="number"
                 placeholder="interval"
             />
         </p>
         <Show
-            when=is_active
+            when=move || is_active.get()
             fallback=move |cx| {
                 let resume = resume.clone();
                 view! {cx,

examples/use_media_query/rust-toolchain.toml

@@ -1,2 +1,2 @@
 [toolchain]
-channel = "nightly"
+channel = "stable"

examples/use_mouse/rust-toolchain.toml

@@ -1,2 +1,2 @@
 [toolchain]
-channel = "nightly"
+channel = "stable"

examples/use_mutation_observer/rust-toolchain.toml

@@ -1,2 +1,2 @@
 [toolchain]
-channel = "nightly"
+channel = "stable"

examples/use_mutation_observer/src/main.rs

@@ -28,14 +28,14 @@ fn Demo(cx: Scope) -> impl IntoView {
 
     let _ = set_timeout_with_handle(
         move || {
-            set_class_name("test test2".to_string());
+            set_class_name.set("test test2".to_string());
         },
         Duration::from_millis(1000),
     );
 
     let _ = set_timeout_with_handle(
         move || {
-            set_style("color: red;".to_string());
+            set_style.set("color: red;".to_string());
         },
         Duration::from_millis(1550),
     );
@@ -45,9 +45,9 @@ fn Demo(cx: Scope) -> impl IntoView {
     });
 
     view! { cx,
-        <div node_ref=el class=class_name style=style>
+        <div node_ref=el class=move || class_name.get() style=move || style.get()>
             <For
-                each=enum_msgs
+                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> }
             />

examples/use_resize_observer/rust-toolchain.toml

@@ -1,2 +1,2 @@
 [toolchain]
-channel = "nightly"
+channel = "stable"

examples/use_resize_observer/src/main.rs

@@ -9,7 +9,7 @@ fn Demo(cx: Scope) -> impl IntoView {
 
     use_resize_observer(cx, el, move |entries, _| {
         let rect = entries[0].content_rect();
-        set_text(format!(
+        set_text.set(format!(
             "width: {:.0}\nheight: {:.0}",
             rect.width(),
             rect.height()
@@ -22,7 +22,7 @@ fn Demo(cx: Scope) -> impl IntoView {
             node_ref=el
             readonly
             class="resize rounded-md p-4 w-[200px] h-[100px] text-2xl leading-10"
-            prop:value=text
+            prop:value=move || text.get()
         />
     }
 }

examples/use_round/rust-toolchain.toml

@@ -1,2 +1,2 @@
 [toolchain]
-channel = "nightly"
+channel = "stable"

examples/use_round/src/main.rs

@@ -11,15 +11,15 @@ fn Demo(cx: Scope) -> impl IntoView {
     view! { cx,
         <input
             class="block"
-            prop:value=value
+            prop:value=move || value.get()
-            on:input=move |e| set_value(event_target_value(&e).parse().unwrap())
+            on:input=move |e| set_value.set(event_target_value(&e).parse().unwrap())
             type="range"
             min="0"
             max="10"
             step="0.01"
         />
-        <p>"Value: " {value}</p>
+        <p>"Value: " {move|| value.get()}</p>
-        <p>"Rounded: " {result}</p>
+        <p>"Rounded: " {move || result.get()}</p>
     }
 }
 

examples/use_scroll/rust-toolchain.toml

@@ -1,2 +1,2 @@
 [toolchain]
-channel = "nightly"
+channel = "stable"

examples/use_scroll/src/main.rs

@@ -7,7 +7,7 @@ fn Demo(cx: Scope) -> impl IntoView {
     let el = create_node_ref(cx);
     let (smooth, set_smooth) = create_signal(cx, false);
     let behavior = Signal::derive(cx, move || {
-        if smooth() {
+        if smooth.get() {
             ScrollBehavior::Smooth
         } else {
             ScrollBehavior::Auto
@@ -56,7 +56,7 @@ fn Demo(cx: Scope) -> impl IntoView {
                     <div class="text-primary">
                         <div>
                             <input
-                                prop:value=move || format!("{:.1}", x())
+                                prop:value=move || format!("{:.1}", x.get())
                                 on:input=move |e| {
                                     if let Ok(num) = event_target_value(&e).parse::<f64>() {
                                         set_x(num);
@@ -75,7 +75,7 @@ fn Demo(cx: Scope) -> impl IntoView {
                     <div class="text-primary">
                         <div>
                             <input
-                                prop:value=move || format!("{:.1}", y())
+                                prop:value=move || format!("{:.1}", y.get())
                                 on:input=move |e| {
                                     if let Ok(num) = event_target_value(&e).parse::<f64>() {
                                         set_y(num);
@@ -94,8 +94,8 @@ fn Demo(cx: Scope) -> impl IntoView {
                     <span>
                         <input
                             id="smooth-scrolling-option"
-                            prop:checked=smooth
+                            prop:checked=move || smooth.get()
-                            on:input=move |e| set_smooth(event_target_checked(&e))
+                            on:input=move |e| set_smooth.set(event_target_checked(&e))
                             type="checkbox"
                         />
                     </span>
@@ -106,35 +106,35 @@ fn Demo(cx: Scope) -> impl IntoView {
                     <div class="text-right opacity-75">
                         "Top Arrived"
                     </div>
-                    <BooleanDisplay value=Signal::derive(cx, move || arrived_state().top) />
+                    <BooleanDisplay value=Signal::derive(cx, move || arrived_state.get().top) />
                     <div class="text-right opacity-75">
                         "Right Arrived"
                     </div>
-                    <BooleanDisplay value=Signal::derive(cx, move || arrived_state().right) />
+                    <BooleanDisplay value=Signal::derive(cx, move || arrived_state.get().right) />
                     <div class="text-right opacity-75">
                         "Bottom Arrived"
                     </div>
-                    <BooleanDisplay value=Signal::derive(cx, move || arrived_state().bottom) />
+                    <BooleanDisplay value=Signal::derive(cx, move || arrived_state.get().bottom) />
                     <div class="text-right opacity-75">
                         "Left Arrived"
                     </div>
-                    <BooleanDisplay value=Signal::derive(cx, move || arrived_state().left) />
+                    <BooleanDisplay value=Signal::derive(cx, move || arrived_state.get().left) />
                     <div class="text-right opacity-75">
                         "Scrolling Up"
                     </div>
-                    <BooleanDisplay value=Signal::derive(cx, move || directions().top) />
+                    <BooleanDisplay value=Signal::derive(cx, move || directions.get().top) />
                     <div class="text-right opacity-75">
                         "Scrolling Right"
                     </div>
-                    <BooleanDisplay value=Signal::derive(cx, move || directions().right) />
+                    <BooleanDisplay value=Signal::derive(cx, move || directions.get().right) />
                     <div class="text-right opacity-75">
                         "Scrolling Down"
                     </div>
-                    <BooleanDisplay value=Signal::derive(cx, move || directions().bottom) />
+                    <BooleanDisplay value=Signal::derive(cx, move || directions.get().bottom) />
                     <div class="text-right opacity-75">
                         "Scrolling Left"
                     </div>
-                    <BooleanDisplay value=Signal::derive(cx, move || directions().left) />
+                    <BooleanDisplay value=Signal::derive(cx, move || directions.get().left) />
                 </div>
             </div>
         </div>

examples/use_storage/rust-toolchain.toml

@@ -1,2 +1,2 @@
 [toolchain]
-channel = "nightly"
+channel = "stable"

examples/use_storage/src/main.rs

@@ -27,26 +27,26 @@ fn Demo(cx: Scope) -> impl IntoView {
     view! { cx,
         <input
             class="block"
-            prop:value=move || state().name
+            prop:value=move || state.get().name
             on:input=move |e| set_state.update(|s| s.name = event_target_value(&e))
             type="text"
         />
         <input
             class="block"
-            prop:value=move || state().color
+            prop:value=move || state.get().color
             on:input=move |e| set_state.update(|s| s.color = event_target_value(&e))
             type="text"
         />
         <input
             class="block"
-            prop:value=move || state().size
+            prop:value=move || state.get().size
             on:input=move |e| set_state.update(|s| s.size = event_target_value(&e))
             type="text"
         />
         <input
             class="block"
-            prop:value=move || state().count
+            prop:value=move || state.get().count
-            value=move || state().count
+            value=move || state.get().count
             on:input=move |e| set_state.update(|s| s.count = event_target_value(&e).parse::<f64>().unwrap() as u32)
             type="number"
             min="0"
@@ -57,7 +57,7 @@ fn Demo(cx: Scope) -> impl IntoView {
         <p>"Second "<b><code>"use_storage"</code></b>":"</p>
 
         <pre>
-            { move || format!("{:#?}", state2()) }
+            { move || format!("{:#?}", state2.get()) }
         </pre>
 
         <Note>"The values are persistant. When you reload the page the values will be the same."</Note>

examples/use_throttle_fn/rust-toolchain.toml

@@ -1,2 +1,2 @@
 [toolchain]
-channel = "nightly"
+channel = "stable"

examples/use_throttle_fn/src/main.rs

@@ -7,12 +7,12 @@ fn Demo(cx: Scope) -> impl IntoView {
     let (click_count, set_click_count) = create_signal(cx, 0);
     let (throttled_count, set_throttled_count) = create_signal(cx, 0);
 
-    let throttled_fn = use_throttle_fn(move || set_throttled_count(throttled_count() + 1), 1000.0);
+    let throttled_fn = use_throttle_fn(move || set_throttled_count.set(throttled_count.get_untracked() + 1), 1000.0);
 
     view! { cx,
         <button
             on:click=move |_| {
-                set_click_count(click_count() + 1);
+                set_click_count.set(click_count.get_untracked() + 1);
                 throttled_fn();
             }
         >

examples/watch_debounced/rust-toolchain.toml

@@ -1,2 +1,2 @@
 [toolchain]
-channel = "nightly"
+channel = "stable"

examples/watch_debounced/src/main.rs

@@ -9,7 +9,7 @@ fn Demo(cx: Scope) -> impl IntoView {
 
     let _ = watch_debounced_with_options(
         cx,
-        input,
+        move || input.get(),
         move |_, _, _| {
             set_updated.update(|x| *x += 1);
         },
@@ -20,8 +20,8 @@ fn Demo(cx: Scope) -> impl IntoView {
     view! { cx,
         <input
             class="block"
-            prop:value=input
+            prop:value=move || input.get()
-            on:input=move |e| set_input(event_target_value(&e))
+            on:input=move |e| set_input.set(event_target_value(&e))
             placeholder="Try to type anything..."
             type="text"
         />

examples/watch_pausable/rust-toolchain.toml

@@ -1,2 +1,2 @@
 [toolchain]
-channel = "nightly"
+channel = "stable"

examples/watch_pausable/src/main.rs

@@ -13,11 +13,11 @@ fn Demo(cx: Scope) -> impl IntoView {
         resume,
         is_active,
         ..
-    } = watch_pausable(cx, source, move |v, _, _| {
+    } = watch_pausable(cx, move || source.get(), move |v, _, _| {
         set_log.update(|log| *log = format!("{log}Changed to \"{v}\"\n"));
     });
 
-    let clear = move |_| set_log("".to_string());
+    let clear = move |_| set_log.set("".to_string());
 
     let pause = move |_| {
         set_log.update(|log| *log = format!("{log}Paused\n"));
@@ -34,13 +34,13 @@ fn Demo(cx: Scope) -> impl IntoView {
         <input
             node_ref=input
             class="block"
-            prop:value=source
+            prop:value=move || source.get()
-            on:input=move |e| set_source(event_target_value(&e))
+            on:input=move |e| set_source.set(event_target_value(&e))
             type="text"
         />
         <p>"Value: " {source}</p>
-        <button prop:disabled=move || !is_active() class="orange" on:click=pause>"Pause"</button>
+        <button prop:disabled=move || !is_active.get() class="orange" on:click=pause>"Pause"</button>
-        <button prop:disabled=is_active on:click=resume>"Resume"</button>
+        <button prop:disabled=move || is_active.get() on:click=resume>"Resume"</button>
         <button on:click=clear>"Clear Log"</button>
         <br />
         <br />

examples/watch_throttled/rust-toolchain.toml

@@ -1,2 +1,2 @@
 [toolchain]
-channel = "nightly"
+channel = "stable"

examples/watch_throttled/src/main.rs

@@ -9,7 +9,7 @@ fn Demo(cx: Scope) -> impl IntoView {
 
     let _ = watch_throttled(
         cx,
-        input,
+        move || input.get(),
         move |_, _, _| {
             set_updated.update(|x| *x += 1);
         },
@@ -19,8 +19,8 @@ fn Demo(cx: Scope) -> impl IntoView {
     view! { cx,
         <input
             class="block"
-            prop:value=input
+            prop:value=move || input.get()
-            on:input=move |e| set_input(event_target_value(&e))
+            on:input=move |e| set_input.set(event_target_value(&e))
             placeholder="Try to type anything..."
             type="text"
         />

rust-toolchain.toml

@@ -1,2 +1,2 @@
 [toolchain]
-channel = "nightly"
+channel = "stable"

src/docs/boolean_display.rs

@@ -21,7 +21,7 @@ pub fn BooleanDisplay(
 
     view! { cx,
         <span class=class>
-            { move || if value() { true_str} else { false_str } }
+            { move || if value.get() { true_str} else { false_str } }
         </span>
     }
 }

src/docs/mod.rs

@@ -1,4 +1,4 @@
-#![doc(cfg(feature = "docs"))]
+//#![doc(cfg(feature = "docs"))]
 //! Collection of documentation related utilities. Used extensively in the examples.
 
 mod boolean_display;

src/lib.rs

@@ -1,4 +1,4 @@
-#![feature(doc_cfg)]
+//#![feature(doc_cfg)]
 //! Collection of essential Leptos utilities inspired by SolidJS USE / VueUse
 
 pub mod core;

src/math/mod.rs

@@ -1,4 +1,3 @@
-#![doc(cfg(feature = "math"))]
 //! Collection of reactive math functions
 
 mod shared;

src/math/use_abs.rs

@@ -25,6 +25,5 @@ use_simple_math!(
     /// # view! { cx, }
     /// # }
     /// ```
-    #[doc(cfg(feature = "math"))]
     abs
 );

src/math/use_ceil.rs

@@ -25,6 +25,5 @@ use_simple_math!(
     /// # view! { cx, }
     /// # }
     /// ```
-    #[doc(cfg(feature = "math"))]
     ceil
 );

src/math/use_floor.rs

@@ -25,6 +25,5 @@ use_simple_math!(
     /// # view! { cx, }
     /// # }
     /// ```
-    #[doc(cfg(feature = "math"))]
     floor
 );

src/math/use_max.rs

@@ -26,7 +26,6 @@ use_partial_cmp!(
     /// # view! { cx, }
     /// # }
     /// ```
-    #[doc(cfg(feature = "math"))]
     use_max,
     Ordering::Less
 );

src/math/use_min.rs

@@ -26,7 +26,6 @@ use_partial_cmp!(
     /// # view! { cx, }
     /// # }
     /// ```
-    #[doc(cfg(feature = "math"))]
     use_min,
     Ordering::Greater
 );

src/math/use_round.rs

@@ -25,6 +25,5 @@ use_simple_math!(
     /// # view! { cx, }
     /// # }
     /// ```
-    #[doc(cfg(feature = "math"))]
     round
 );

src/storage/shared.rs

@@ -49,7 +49,6 @@ macro_rules! use_specific_storage {
 pub(crate) use use_specific_storage;
 
 /// Options for [`use_local_storage_with_options`].
-#[doc(cfg(feature = "storage"))]
 #[derive(DefaultBuilder)]
 pub struct UseSpecificStorageOptions<T> {
     /// Listen to changes to this storage key from somewhere else. Defaults to true.

src/storage/use_local_storage.rs

@@ -15,7 +15,6 @@ use_specific_storage!(
     ///
     /// * [`use_storage`]
     /// * [`use_session_storage`]
-    #[doc(cfg(feature = "storage"))]
     local
     /// [`use_local_storage`]
 );

src/storage/use_session_storage.rs

@@ -15,7 +15,6 @@ use_specific_storage!(
     ///
     /// * [`use_storage`]
     /// * [`use_local_storage`]
-    #[doc(cfg(feature = "storage"))]
     session
     /// [`use_session_storage`]
 );

src/storage/use_storage.rs

@@ -146,7 +146,6 @@ const CUSTOM_STORAGE_EVENT_NAME: &str = "leptos-use-storage";
 ///
 /// * [`use_local_storage`]
 /// * [`use_session_storage`]
-#[doc(cfg(feature = "storage"))]
 pub fn use_storage<T, D>(
     cx: Scope,
     key: &str,
@@ -161,7 +160,6 @@ where
 }
 
 /// Version of [`use_storage`] that accepts [`UseStorageOptions`]. See [`use_storage`] for how to use.
-#[doc(cfg(feature = "storage"))]
 pub fn use_storage_with_options<T, D>(
     cx: Scope,
     key: &str,
@@ -295,7 +293,7 @@ where
                 ..
             } = watch_pausable_with_options(
                 cx,
-                data,
+                move || data.get(),
                 move |data, _, _| write.clone()(data),
                 WatchOptions::default().filter(filter),
             );
@@ -311,7 +309,7 @@ where
 
                     match &event_detail.key {
                         None => {
-                            set_data(defaults.get_untracked());
+                            set_data.set(defaults.get_untracked());
                             return;
                         }
                         Some(event_key) => {
@@ -325,7 +323,7 @@ where
                 pause_watch();
 
                 if let Some(value) = read(event_detail.clone()) {
-                    set_data(value);
+                    set_data.set(value);
                 }
 
                 if event_detail.is_some() {
@@ -429,7 +427,6 @@ fn get_optional_string(v: &JsValue, key: &str) -> Option<String> {
 }
 
 /// Error type for use_storage_with_options
-#[doc(cfg(feature = "storage"))]
 pub enum UseStorageError<E = ()> {
     NoStorage(JsValue),
     StorageAccessError(JsValue),
@@ -439,7 +436,6 @@ pub enum UseStorageError<E = ()> {
 }
 
 /// Options for [`use_storage_with_options`].
-#[doc(cfg(feature = "storage"))]
 #[derive(DefaultBuilder)]
 pub struct UseStorageOptions<T> {
     /// Type of storage. Can be `Local` (default), `Session` or `Custom(web_sys::Storage)`
@@ -480,7 +476,6 @@ impl<T> UseStorageOptions<T> {
 }
 
 /// Local or session storage or a custom store that is a `web_sys::Storage`.
-#[doc(cfg(feature = "storage"))]
 #[derive(Default)]
 pub enum StorageType {
     #[default]

src/use_active_element.rs

@@ -21,7 +21,7 @@ use web_sys::AddEventListenerOptions;
 /// let active_element = use_active_element(cx);
 ///
 /// create_effect(cx, move |_| {
-///     log!("focus changed to {:?}", active_element());
+///     log!("focus changed to {:?}", active_element.get());
 /// });
 /// #
 /// # view! { cx, }

src/use_css_var.rs

@@ -22,7 +22,7 @@ use wasm_bindgen::{JsCast, JsValue};
 /// # fn Demo(cx: Scope) -> impl IntoView {
 /// let (color, set_color) = use_css_var(cx, "--color");
 ///
-/// set_color("red".to_string());
+/// set_color.set("red".to_string());
 /// #
 /// # view! { cx, }
 /// # }
@@ -152,7 +152,7 @@ where
         );
     }
 
-    let _ = watch(cx, variable, move |val, _, _| {
+    let _ = watch(cx, move || variable.get(), move |val, _, _| {
         if let Some(el) = el_signal.get() {
             let el = el.into().unchecked_into::<web_sys::HtmlElement>();
             let style = el.style();

src/use_element_hover.rs

@@ -25,7 +25,7 @@ use web_sys::AddEventListenerOptions;
 /// let is_hovered = use_element_hover(cx, el);
 ///
 /// view! { cx,
-///     <button node_ref=el>{ move || format!("{:?}", is_hovered()) }</button>
+///     <button node_ref=el>{ move || format!("{:?}", is_hovered.get()) }</button>
 /// }
 /// # }
 /// ```
@@ -69,12 +69,12 @@ where
 
         if delay > 0 {
             timer = set_timeout_with_handle(
-                move || set_hovered(entering),
+                move || set_hovered.set(entering),
                 Duration::from_millis(delay),
             )
             .ok();
         } else {
-            set_hovered(entering);
+            set_hovered.set(entering);
         }
     };
 

src/use_element_size.rs

@@ -108,13 +108,13 @@ where
                 if is_svg() {
                     if let Some(target) = target.get() {
                         if let Ok(Some(styles)) = window.get_computed_style(&target.into()) {
-                            set_height(
+                            set_height.set(
                                 styles
                                     .get_property_value("height")
                                     .map(|v| v.parse().unwrap_or_default())
                                     .unwrap_or_default(),
                             );
-                            set_width(
+                            set_width.set(
                                 styles
                                     .get_property_value("width")
                                     .map(|v| v.parse().unwrap_or_default())
@@ -129,16 +129,16 @@ where
                         vec![box_size.into()]
                     };
 
-                    set_width(format_box_size.iter().fold(0.0, |acc, v| {
+                    set_width.set(format_box_size.iter().fold(0.0, |acc, v| {
                         acc + v.as_ref().clone().unchecked_into::<BoxSize>().inline_size()
                     }));
-                    set_height(format_box_size.iter().fold(0.0, |acc, v| {
+                    set_height.set(format_box_size.iter().fold(0.0, |acc, v| {
                         acc + v.as_ref().clone().unchecked_into::<BoxSize>().block_size()
                     }))
                 } else {
                     // fallback
-                    set_width(entry.content_rect().width());
+                    set_width.set(entry.content_rect().width());
-                    set_height(entry.content_rect().height())
+                    set_height.set(entry.content_rect().height())
                 }
             },
             options.into(),
@@ -150,11 +150,11 @@ where
         move || target.get(),
         move |ele, _, _| {
             if ele.is_some() {
-                set_width(initial_size.width);
+                set_width.set(initial_size.width);
-                set_height(initial_size.height);
+                set_height.set(initial_size.height);
             } else {
-                set_width(0.0);
+                set_width.set(0.0);
-                set_height(0.0);
+                set_height.set(0.0);
             }
         },
         WatchOptions::default().immediate(false),

src/use_element_visibility.rs

@@ -63,7 +63,7 @@ where
         cx,
         (cx, target).into(),
         move |entries, _| {
-            set_visible(entries[0].is_intersecting());
+            set_visible.set(entries[0].is_intersecting());
         },
         UseIntersectionObserverOptions::default().root(options.viewport),
     );

src/use_event_listener.rs

@@ -47,7 +47,7 @@ use wasm_bindgen::JsCast;
 ///
 /// view! { cx,
 ///     <Show
-///         when=move || cond()
+///         when=move || cond.get()
 ///         fallback=move |cx| view! { cx, <div node_ref=element>"Condition false"</div> }
 ///     >
 ///         <div node_ref=element>"Condition true"</div>

src/use_favicon.rs

@@ -20,7 +20,7 @@ use wasm_bindgen::JsCast;
 /// #
 /// let (icon, set_icon) = use_favicon(cx);
 ///
-/// set_icon(Some("dark.png".to_string())); // change current icon
+/// set_icon.set(Some("dark.png".to_string())); // change current icon
 /// #
 /// #    view! { cx, }
 /// # }
@@ -44,7 +44,7 @@ use wasm_bindgen::JsCast;
 ///     cx,
 ///     UseFaviconOptions::default().new_icon(
 ///         Signal::derive(cx, move || {
-///             Some((if is_dark() { "dark.png" } else { "light.png" }).to_string())
+///             Some((if is_dark.get() { "dark.png" } else { "light.png" }).to_string())
 ///         }),
 ///     )
 /// );
@@ -73,7 +73,7 @@ pub fn use_favicon_with_options(
     let (favicon, set_favicon) = create_signal(cx, new_icon.get_untracked());
 
     if matches!(&new_icon, MaybeSignal::Dynamic(_)) {
-        create_effect(cx, move |_| set_favicon(new_icon.get()));
+        create_effect(cx, move |_| set_favicon.set(new_icon.get()));
     }
 
     let apply_icon = move |icon: &String| {
@@ -90,7 +90,7 @@ pub fn use_favicon_with_options(
         }
     };
 
-    let _ = watch(cx, favicon, move |new_icon, prev_icon, _| {
+    let _ = watch(cx, move || favicon.get(), move |new_icon, prev_icon, _| {
         if Some(new_icon) != prev_icon {
             if let Some(new_icon) = new_icon {
                 apply_icon(new_icon);

src/use_intersection_observer.rs

@@ -30,7 +30,7 @@ use wasm_bindgen::prelude::*;
 ///     cx,
 ///     el,
 ///     move |entries, _| {
-///         set_visible(entries[0].is_intersecting());
+///         set_visible.set(entries[0].is_intersecting());
 ///     },
 /// );
 ///
@@ -184,7 +184,7 @@ where
 
         move || {
             cleanup();
-            set_active(false);
+            set_active.set(false);
         }
     };
 
@@ -193,7 +193,7 @@ where
         pause,
         resume: move || {
             cleanup();
-            set_active(true);
+            set_active.set(true);
         },
         stop,
     }

src/use_interval.rs

@@ -55,11 +55,11 @@ where
     let (counter, set_counter) = create_signal(cx, 0u64);
 
     let update = move || set_counter.update(|count| *count += 1);
-    let reset = move || set_counter(0);
+    let reset = move || set_counter.set(0);
 
     let cb = move || {
         update();
-        callback.clone()(counter());
+        callback.clone()(counter.get());
     };
 
     let Pausable {

src/use_interval_fn.rs

@@ -78,7 +78,7 @@ where
         let clean = clean.clone();
 
         move || {
-            set_active(false);
+            set_active.set(false);
             clean();
         }
     };
@@ -91,7 +91,7 @@ where
             return;
         }
 
-        set_active(true);
+        set_active.set(true);
 
         if immediate_callback {
             callback.clone()();
@@ -110,7 +110,7 @@ where
     if matches!(interval, MaybeSignal::Dynamic(_)) {
         let resume = resume.clone();
 
-        let stop_watch = watch(cx, interval, move |_, _, _| {
+        let stop_watch = watch(cx, move || interval.get(), move |_, _, _| {
             if is_active.get() {
                 resume();
             }

src/use_media_query.rs

@@ -64,7 +64,7 @@ pub fn use_media_query(cx: Scope, query: impl Into<MaybeSignal<String>>) -> Sign
             *media_query = window().match_media(&query.get()).unwrap_or(None);
 
             if let Some(media_query) = media_query.as_ref() {
-                set_matches(media_query.matches());
+                set_matches.set(media_query.matches());
 
                 remove_listener.replace(Some(Box::new(use_event_listener(
                     cx,
@@ -76,7 +76,7 @@ pub fn use_media_query(cx: Scope, query: impl Into<MaybeSignal<String>>) -> Sign
                         .clone(),
                 ))));
             } else {
-                set_matches(false);
+                set_matches.set(false);
             }
         }
     };

src/use_mouse.rs

@@ -108,9 +108,9 @@ where
             let result = coord_type.extract_mouse_coords(&event);
 
             if let Some((x, y)) = result {
-                set_x(x);
+                set_x.set(x);
-                set_y(y);
+                set_y.set(y);
-                set_source_type(UseMouseSourceType::Mouse);
+                set_source_type.set(UseMouseSourceType::Mouse);
             }
         }
     };
@@ -137,9 +137,9 @@ where
                 );
 
                 if let Some((x, y)) = result {
-                    set_x(x);
+                    set_x.set(x);
-                    set_y(y);
+                    set_y.set(y);
-                    set_source_type(UseMouseSourceType::Touch);
+                    set_source_type.set(UseMouseSourceType::Touch);
                 }
             }
         }
@@ -147,8 +147,8 @@ where
 
     let initial_value = options.initial_value;
     let reset = move || {
-        set_x(initial_value.x);
+        set_x.set(initial_value.x);
-        set_y(initial_value.y);
+        set_y.set(initial_value.y);
     };
 
     // TODO : event filters?

src/use_mutation_observer.rs

@@ -110,7 +110,7 @@ where
             move |targets, _, _| {
                 cleanup();
 
-                if is_supported() && !targets.is_empty() {
+                if is_supported.get() && !targets.is_empty() {
                     let obs = web_sys::MutationObserver::new(closure_js.as_ref().unchecked_ref())
                         .expect("failed to create MutationObserver");
 

src/use_resize_observer.rs

@@ -34,12 +34,12 @@ use wasm_bindgen::prelude::*;
 ///     el,
 ///     move |entries, observer| {
 ///         let rect = entries[0].content_rect();
-///         set_text(format!("width: {}\nheight: {}", rect.width(), rect.height()));
+///         set_text.set(format!("width: {}\nheight: {}", rect.width(), rect.height()));
 ///     },
 /// );
 ///
 /// view! { cx,
-///     <div node_ref=el>{ text }</div>
+///     <div node_ref=el>{ move || text.get() }</div>
 /// }
 /// # }
 /// ```
@@ -112,7 +112,7 @@ where
             move |targets, _, _| {
                 cleanup();
 
-                if is_supported() && !targets.is_empty() {
+                if is_supported.get() && !targets.is_empty() {
                     let obs =
                         web_sys::ResizeObserver::new(closure_js.clone().as_ref().unchecked_ref())
                             .expect("failed to create ResizeObserver");

src/use_scroll.rs

@@ -94,8 +94,8 @@ use wasm_bindgen::JsCast;
 ///
 /// view! { cx,
 ///     <div node_ref=element>"..."</div>
-///     <button on:click=move |_| set_x(x() + 10.0)>"Scroll right 10px"</button>
+///     <button on:click=move |_| set_x(x.get_untracked() + 10.0)>"Scroll right 10px"</button>
-///     <button on:click=move |_| set_y(y() + 10.0)>"Scroll down 10px"</button>
+///     <button on:click=move |_| set_y(y.get_untracked() + 10.0)>"Scroll down 10px"</button>
 /// }
 /// # }
 /// ```
@@ -140,10 +140,10 @@ use wasm_bindgen::JsCast;
 /// # fn Demo(cx: Scope) -> impl IntoView {
 /// # let element = create_node_ref(cx);
 /// #
-/// let (smooth, set_smoot) = create_signal(cx, false);
+/// let (smooth, set_smooth) = create_signal(cx, false);
 ///
 /// let behavior = Signal::derive(cx, move || {
-///     if smooth() { ScrollBehavior::Smooth } else { ScrollBehavior::Auto }
+///     if smooth.get() { ScrollBehavior::Smooth } else { ScrollBehavior::Auto }
 /// });
 ///
 /// let UseScrollReturn {
@@ -246,7 +246,7 @@ where
                 return;
             }
 
-            set_is_scrolling(false);
+            set_is_scrolling.set(false);
             directions.update(|directions| {
                 directions.left = false;
                 directions.right = false;
@@ -298,7 +298,7 @@ where
                     arrived_state.right = right;
                 }
             });
-            set_internal_x(scroll_left);
+            set_internal_x.set(scroll_left);
 
             let mut scroll_top = target.scroll_top() as f64;
 
@@ -330,7 +330,7 @@ where
                 }
             });
 
-            set_internal_y(scroll_top);
+            set_internal_y.set(scroll_top);
         }
     };
 
@@ -341,7 +341,7 @@ where
             let target: web_sys::Element = event_target(&e);
 
             set_arrived_state(target);
-            set_is_scrolling(true);
+            set_is_scrolling.set(true);
             on_scroll_end_debounced.clone()(e.clone());
             on_scroll.clone()(e);
         }

src/use_supported.rs

@@ -15,7 +15,7 @@ use leptos::*;
 ///     || JsValue::from("getBattery").js_in(&window().navigator())
 /// );
 ///
-/// if is_supported() {
+/// if is_supported.get() {
 ///     // do something
 /// }
 /// #    view! { cx, }

src/watch.rs

@@ -22,18 +22,18 @@ use std::rc::Rc;
 ///
 /// let stop = watch(
 ///     cx,
-///     num,
+///     move || num.get(),
 ///     move |num, _, _| {
 ///         log!("Number {}", num);
 ///     },
 /// );
 ///
-/// set_num(1); // > "Number 1"
+/// set_num.set(1); // > "Number 1"
 ///
 /// set_timeout_with_handle(move || {
 ///     stop(); // stop watching
 ///
-///     set_num(2); // (nothing happens)
+///     set_num.set(2); // (nothing happens)
 /// }, Duration::from_millis(1000));
 /// #    view! { cx, }
 /// # }
@@ -54,14 +54,14 @@ use std::rc::Rc;
 ///
 /// watch_with_options(
 ///     cx,
-///     num,
+///     move || num.get(),
 ///     move |num, _, _| {
 ///         log!("Number {}", num);
 ///     },
 ///     WatchOptions::default().immediate(true),
 /// ); // > "Number 0"
 ///
-/// set_num(1); // > "Number 1"
+/// set_num.set(1); // > "Number 1"
 /// #    view! { cx, }
 /// # }
 /// ```
@@ -79,7 +79,7 @@ use std::rc::Rc;
 /// #
 /// watch_with_options(
 ///     cx,
-///     num,
+///     move || num.get(),
 ///     move |num, _, _| {
 ///         log!("Number {}", num);
 ///     },
@@ -98,7 +98,7 @@ use std::rc::Rc;
 /// #
 /// watch_with_options(
 ///     cx,
-///     num,
+///     move || num.get(),
 ///     move |num, _, _| {
 ///         log!("number {}", num);
 ///     },
@@ -162,7 +162,7 @@ where
         create_filter_wrapper(options.filter.filter_fn(), wrapped_callback.clone());
 
     create_effect(cx, move |did_run_before| {
-        if !is_active() {
+        if !is_active.get() {
             return;
         }
 
@@ -187,7 +187,7 @@ where
     });
 
     move || {
-        set_active(false);
+        set_active.set(false);
     }
 }
 

src/watch_debounced.rs

@@ -19,7 +19,7 @@ use leptos::*;
 /// #
 /// watch_debounced(
 ///     cx,
-///     source,
+///     move || source.get(),
 ///     move |_, _, _| {
 ///         log!("changed!");
 ///     },
@@ -43,7 +43,7 @@ use leptos::*;
 /// #
 /// watch_debounced_with_options(
 ///     cx,
-///     source,
+///     move || source.get(),
 ///     move |_, _, _| {
 ///         log!("changed!");
 ///     },

src/watch_pausable.rs

@@ -23,21 +23,21 @@ use leptos::*;
 ///     ..
 /// } = watch_pausable(
 ///     cx,
-///     source,
+///     move || source.get(),
 ///     |v, _, _| {
 ///         log!("Changed to {}", v);
 ///     },
 /// );
 ///
-/// set_source("bar".to_string()); // > "Changed to bar"
+/// set_source.set("bar".to_string()); // > "Changed to bar"
 ///
 /// pause();
 ///
-/// set_source("foobar".to_string()); // (nothing happens)
+/// set_source.set("foobar".to_string()); // (nothing happens)
 ///
 /// resume();
 ///
-/// set_source("hello".to_string()); // > "Changed to hello"
+/// set_source.set("hello".to_string()); // > "Changed to hello"
 /// #    view! { cx, }
 /// # }
 /// ```
@@ -87,11 +87,11 @@ where
     let stop = watch_with_options(cx, deps, pausable_callback, options);
 
     let pause = move || {
-        set_active(false);
+        set_active.set(false);
     };
 
     let resume = move || {
-        set_active(true);
+        set_active.set(true);
     };
 
     WatchPausableReturn {

src/watch_throttled.rs

@@ -19,7 +19,7 @@ use leptos::*;
 /// #
 /// watch_throttled(
 ///     cx,
-///     source,
+///     move || source.get(),
 ///     move |_, _, _| {
 ///         log!("changed!");
 ///     },
@@ -43,7 +43,7 @@ use leptos::*;
 /// #
 /// watch_throttled_with_options(
 ///     cx,
-///     source,
+///     move || source.get(),
 ///     move |_, _, _| {
 ///         log!("changed!");
 ///     },

src/whenever.rs

@@ -12,7 +12,7 @@ use leptos::*;
 /// # pub fn Demo(cx: Scope) -> impl IntoView {
 /// let (is_ready, set_ready) = create_signal(cx, false);
 ///
-/// whenever(cx, is_ready, |v, _, _| log!("{}", v));
+/// whenever(cx, move || is_ready.get(), |v, _, _| log!("{}", v));
 /// #
 /// #     view! { cx, }
 /// # }
@@ -28,7 +28,7 @@ use leptos::*;
 /// #
 /// # pub fn Demo(cx: Scope) -> impl IntoView {
 /// # let (is_ready, set_ready) = create_signal(cx, false);
-/// whenever(cx, is_ready, |value, prev_value, _| {
+/// whenever(cx, move || is_ready.get(), |value, prev_value, _| {
 ///     log!("before: {prev_value:?}; now: {value}");
 /// });
 /// #
@@ -48,7 +48,7 @@ use leptos::*;
 /// # let (counter, set_counter) = create_signal(cx, 0);
 /// whenever(
 ///     cx,
-///     move || counter() == 7,
+///     move || counter.get() == 7,
 ///     |_, _, _| log!("counter is 7 now!"),
 /// );
 /// #
@@ -68,7 +68,7 @@ use leptos::*;
 /// # let (counter, set_counter) = create_signal(cx, 0);
 /// whenever_with_options(
 ///     cx,
-///     move || counter() == 7,
+///     move || counter.get() == 7,
 ///     |_, _, _| log!("counter is 7 now!"),
 ///     WatchOptions::default().immediate(true),
 /// );