added watch_debounced and watch_throttled

.idea/leptos-use.iml

@@ -17,6 +17,8 @@
       <sourceFolder url="file://$MODULE_DIR$/examples/use_mouse/src" isTestSource="false" />
       <sourceFolder url="file://$MODULE_DIR$/examples/use_floor/src" isTestSource="false" />
       <sourceFolder url="file://$MODULE_DIR$/examples/use_element_size/src" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/examples/watch_debounced/src" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/examples/watch_throttled/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" />
@@ -30,6 +32,8 @@
       <excludeFolder url="file://$MODULE_DIR$/examples/use_mouse/target" />
       <excludeFolder url="file://$MODULE_DIR$/examples/use_floor/target" />
       <excludeFolder url="file://$MODULE_DIR$/examples/use_element_size/target" />
+      <excludeFolder url="file://$MODULE_DIR$/examples/watch_debounced/target" />
+      <excludeFolder url="file://$MODULE_DIR$/examples/watch_throttled/target" />
     </content>
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />

CHANGELOG.md

@@ -2,11 +2,18 @@
 
 ## 0.1.10
 
+#### Braking Changes
+- `watch` doesn't accept `immediate` as an argument anymore. This is only provided by the option variant.
+
 #### New Functions
 - `use_local_storage`
+- `watch_debounced`
+- `watch_throttled`
+- `watch_pausable`
 
-#### Changed Functions
+#### Other Changes
-- `watch` has now variant `watch_with_options` which allows for debouncing and throttling
+
+- `watch` has now variant `watch_with_options` which allows for debouncing and throttling.
 
 ## 0.1.8/9
 

Cargo.toml

@@ -17,8 +17,9 @@ homepage = "https://leptos-use.rs"
 leptos = "0.3.0"
 wasm-bindgen = "0.2.86"
 js-sys = "0.3.63"
-default-struct-builder = "0.2.0"
+default-struct-builder = { path = "../default-struct-builder"}
 num = { version = "0.4.0", optional = true }
+serde = "1.0.163"
 
 [dependencies.web-sys]
 version = "0.3.63"
@@ -35,9 +36,11 @@ features = [
     "ResizeObserverSize",
     "ScrollBehavior",
     "ScrollToOptions",
+    "Storage",
     "Touch",
     "TouchEvent",
     "TouchList",
+    "Window",
 ]
 
 [features]

docs/book/src/SUMMARY.md

@@ -22,6 +22,8 @@
 # Watch
 
 - [watch](watch/watch.md)
+- [watch_debounced](watch/watch_debounced.md)
+- [watch_throttled](watch/watch_throttled.md)
 
 # Utilities
 

docs/book/src/custom.css

@@ -2,6 +2,7 @@
 
 :root {
     --brand-color: #EF3939;
+    --brand-color-outline: rgba(239, 57, 57, 0.1);
     --brand-color-dark: #9c2525;
     --background-color: #ffffff;
     --text-color: #856464;

docs/book/src/demo.css

@@ -62,17 +62,20 @@
     font-size: 1.4rem;
 }
 
-.demo-container input[type="text"], .demo-container input[type="search"], .demo-container input[type="number"] {
+.demo-container input[type="text"],
+.demo-container input[type="search"],
+.demo-container input[type="number"] {
     display: block;
     font-size: 90%;
     padding: .5em 1em .4em;
-    border: 1px solid var(--divider-light-color);
+    border: 1px solid var(--theme-popup-border);
     border-radius: 4px;
     outline: none;
     background: var(--background-color);
     color: var(--text-color);
     min-width: 20rem;
     margin: .5rem 0;
+    appearance: none;
 }
 
 .demo-container textarea {
@@ -80,6 +83,24 @@
     border: 1px solid var(--theme-popup-border);
 }
 
-.demo-container input[type=range] {
+.demo-container input[type=range],
+.demo-container input[type=checkbox]{
     accent-color: var(--brand-color);
 }
+
+.demo-container input[type="text"]:focus,
+.demo-container input[type="search"]:focus,
+.demo-container input[type="number"]:focus,
+.demo-container textarea:focus {
+    border-color: var(--brand-color);
+    outline: 4px solid var(--brand-color-outline);
+    outline-offset: 0;
+    box-shadow: none;
+}
+
+.demo-container input[type="text"]::placeholder,
+.demo-container input[type="search"]::placeholder,
+.demo-container input[type="number"]::placeholder,
+.demo-container textarea::placeholder {
+    opacity: 0.7;
+}

docs/book/src/watch/watch_debounced.md

@@ -0,0 +1,3 @@
+# watch_debounced
+
+<!-- cmdrun python3 ../extract_doc_comment.py watch_debounced -->

docs/book/src/watch/watch_throttled.md

@@ -0,0 +1,3 @@
+# watch_throttled
+
+<!-- cmdrun python3 ../extract_doc_comment.py watch_throttled -->

examples/watch_debounced/Cargo.toml

@@ -0,0 +1,16 @@
+[package]
+name = "watch_debounced"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+leptos = "0.3"
+console_error_panic_hook = "0.1"
+console_log = "1"
+log = "0.4"
+leptos-use = { path = "../..", features = ["docs"] }
+web-sys = "0.3"
+
+[dev-dependencies]
+wasm-bindgen = "0.2"
+wasm-bindgen-test = "0.3.0"

examples/watch_debounced/README.md

@@ -0,0 +1,23 @@
+A simple example for `watch_debounced`.
+
+If you don't have it installed already, install [Trunk](https://trunkrs.dev/) and [Tailwind](https://tailwindcss.com/docs/installation)
+as well as the nightly toolchain for Rust and the wasm32-unknown-unknown target:
+
+```bash
+cargo install trunk
+npm install -D tailwindcss @tailwindcss/forms
+rustup toolchain install nightly
+rustup target add wasm32-unknown-unknown
+```
+
+Then, open two terminals. In the first one, run:
+
+```
+npx tailwindcss -i ./input.css -o ./style/output.css --watch
+```
+
+In the second one, run:
+
+```bash
+trunk serve --open
+```

examples/watch_debounced/Trunk.toml

@@ -0,0 +1,2 @@
+[build]
+public_url = "/demo/"

examples/watch_debounced/index.html

@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link data-trunk rel="css" href="style/output.css">
+  </head>
+  <body></body>
+</html>

examples/watch_debounced/input.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

examples/watch_debounced/rust-toolchain.toml

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

examples/watch_debounced/src/main.rs

@@ -0,0 +1,46 @@
+use leptos::*;
+use leptos_use::docs::{demo_or_body, Note};
+use leptos_use::{watch_debounced_with_options, WatchDebouncedOptions};
+
+#[component]
+fn Demo(cx: Scope) -> impl IntoView {
+    let (input, set_input) = create_signal(cx, "".to_string());
+    let (updated, set_updated) = create_signal(cx, 0);
+
+    let _ = watch_debounced_with_options(
+        cx,
+        input,
+        move |_, _, _| {
+            set_updated.update(|x| *x += 1);
+        },
+        1000.0,
+        WatchDebouncedOptions::default().max_wait(Some(5000.0)),
+    );
+
+    view! { cx,
+        <input
+            class="block"
+            prop:value=input
+            on:input=move |e| set_input(event_target_value(&e))
+            placeholder="Try to type anything..."
+            type="text"
+        />
+        <Note>
+            <code>"ms"</code>
+            " is set to 1000ms and "
+            <code>"max_wait"</code>
+            " is set to 5000ms for this demo."
+        </Note>
+        <p>"Input: " { input }</p>
+        <p>"Times Updated: " { updated }</p>
+    }
+}
+
+fn main() {
+    _ = console_log::init_with_level(log::Level::Debug);
+    console_error_panic_hook::set_once();
+
+    mount_to(demo_or_body(), |cx| {
+        view! { cx, <Demo /> }
+    })
+}

examples/watch_debounced/style/output.css

@@ -0,0 +1,289 @@
+[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-color: #fff;
+  border-color: #6b7280;
+  border-width: 1px;
+  border-radius: 0px;
+  padding-top: 0.5rem;
+  padding-right: 0.75rem;
+  padding-bottom: 0.5rem;
+  padding-left: 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  --tw-shadow: 0 0 #0000;
+}
+
+[type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: #2563eb;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  border-color: #2563eb;
+}
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+  color: #6b7280;
+  opacity: 1;
+}
+
+input::placeholder,textarea::placeholder {
+  color: #6b7280;
+  opacity: 1;
+}
+
+::-webkit-datetime-edit-fields-wrapper {
+  padding: 0;
+}
+
+::-webkit-date-and-time-value {
+  min-height: 1.5em;
+}
+
+::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+select {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right 0.5rem center;
+  background-repeat: no-repeat;
+  background-size: 1.5em 1.5em;
+  padding-right: 2.5rem;
+  -webkit-print-color-adjust: exact;
+          print-color-adjust: exact;
+}
+
+[multiple] {
+  background-image: initial;
+  background-position: initial;
+  background-repeat: unset;
+  background-size: initial;
+  padding-right: 0.75rem;
+  -webkit-print-color-adjust: unset;
+          print-color-adjust: unset;
+}
+
+[type='checkbox'],[type='radio'] {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  padding: 0;
+  -webkit-print-color-adjust: exact;
+          print-color-adjust: exact;
+  display: inline-block;
+  vertical-align: middle;
+  background-origin: border-box;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  flex-shrink: 0;
+  height: 1rem;
+  width: 1rem;
+  color: #2563eb;
+  background-color: #fff;
+  border-color: #6b7280;
+  border-width: 1px;
+  --tw-shadow: 0 0 #0000;
+}
+
+[type='checkbox'] {
+  border-radius: 0px;
+}
+
+[type='radio'] {
+  border-radius: 100%;
+}
+
+[type='checkbox']:focus,[type='radio']:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
+  --tw-ring-offset-width: 2px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: #2563eb;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+
+[type='checkbox']:checked,[type='radio']:checked {
+  border-color: transparent;
+  background-color: currentColor;
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+[type='checkbox']:checked {
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+}
+
+[type='radio']:checked {
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+}
+
+[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
+  border-color: transparent;
+  background-color: currentColor;
+}
+
+[type='checkbox']:indeterminate {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
+  border-color: transparent;
+  background-color: currentColor;
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
+  border-color: transparent;
+  background-color: currentColor;
+}
+
+[type='file'] {
+  background: unset;
+  border-color: inherit;
+  border-width: 0;
+  border-radius: 0;
+  padding: 0;
+  font-size: unset;
+  line-height: inherit;
+}
+
+[type='file']:focus {
+  outline: 1px solid ButtonText;
+  outline: 1px auto -webkit-focus-ring-color;
+}
+
+*, ::before, ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+
+.block {
+  display: block;
+}
+
+.text-\[--brand-color\] {
+  color: var(--brand-color);
+}
+
+.text-green-600 {
+  --tw-text-opacity: 1;
+  color: rgb(22 163 74 / var(--tw-text-opacity));
+}
+
+.opacity-75 {
+  opacity: 0.75;
+}
+
+@media (prefers-color-scheme: dark) {
+  .dark\:text-green-500 {
+    --tw-text-opacity: 1;
+    color: rgb(34 197 94 / var(--tw-text-opacity));
+  }
+}

examples/watch_debounced/tailwind.config.js

@@ -0,0 +1,15 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: {
+        files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"],
+    },
+    theme: {
+        extend: {},
+    },
+    corePlugins: {
+        preflight: false,
+    },
+    plugins: [
+        require('@tailwindcss/forms'),
+    ],
+}

examples/watch_throttled/Cargo.toml

@@ -0,0 +1,16 @@
+[package]
+name = "watch_throttled"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+leptos = "0.3"
+console_error_panic_hook = "0.1"
+console_log = "1"
+log = "0.4"
+leptos-use = { path = "../..", features = ["docs"] }
+web-sys = "0.3"
+
+[dev-dependencies]
+wasm-bindgen = "0.2"
+wasm-bindgen-test = "0.3.0"

examples/watch_throttled/README.md

@@ -0,0 +1,23 @@
+A simple example for `watch_throttled`.
+
+If you don't have it installed already, install [Trunk](https://trunkrs.dev/) and [Tailwind](https://tailwindcss.com/docs/installation)
+as well as the nightly toolchain for Rust and the wasm32-unknown-unknown target:
+
+```bash
+cargo install trunk
+npm install -D tailwindcss @tailwindcss/forms
+rustup toolchain install nightly
+rustup target add wasm32-unknown-unknown
+```
+
+Then, open two terminals. In the first one, run:
+
+```
+npx tailwindcss -i ./input.css -o ./style/output.css --watch
+```
+
+In the second one, run:
+
+```bash
+trunk serve --open
+```

examples/watch_throttled/Trunk.toml

@@ -0,0 +1,2 @@
+[build]
+public_url = "/demo/"

examples/watch_throttled/index.html

@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link data-trunk rel="css" href="style/output.css">
+  </head>
+  <body></body>
+</html>

examples/watch_throttled/input.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

examples/watch_throttled/rust-toolchain.toml

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

examples/watch_throttled/src/main.rs

@@ -0,0 +1,43 @@
+use leptos::*;
+use leptos_use::docs::{demo_or_body, Note};
+use leptos_use::watch_throttled;
+
+#[component]
+fn Demo(cx: Scope) -> impl IntoView {
+    let (input, set_input) = create_signal(cx, "".to_string());
+    let (updated, set_updated) = create_signal(cx, 0);
+
+    let _ = watch_throttled(
+        cx,
+        input,
+        move |_, _, _| {
+            set_updated.update(|x| *x += 1);
+        },
+        1000.0,
+    );
+
+    view! { cx,
+        <input
+            class="block"
+            prop:value=input
+            on:input=move |e| set_input(event_target_value(&e))
+            placeholder="Try to type anything..."
+            type="text"
+        />
+        <Note>
+            <code>"ms"</code>
+            " is set to 1000ms for this demo."
+        </Note>
+        <p>"Input: " { input }</p>
+        <p>"Times Updated: " { updated }</p>
+    }
+}
+
+fn main() {
+    _ = console_log::init_with_level(log::Level::Debug);
+    console_error_panic_hook::set_once();
+
+    mount_to(demo_or_body(), |cx| {
+        view! { cx, <Demo /> }
+    })
+}

examples/watch_throttled/style/output.css

@@ -0,0 +1,289 @@
+[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-color: #fff;
+  border-color: #6b7280;
+  border-width: 1px;
+  border-radius: 0px;
+  padding-top: 0.5rem;
+  padding-right: 0.75rem;
+  padding-bottom: 0.5rem;
+  padding-left: 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  --tw-shadow: 0 0 #0000;
+}
+
+[type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: #2563eb;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  border-color: #2563eb;
+}
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+  color: #6b7280;
+  opacity: 1;
+}
+
+input::placeholder,textarea::placeholder {
+  color: #6b7280;
+  opacity: 1;
+}
+
+::-webkit-datetime-edit-fields-wrapper {
+  padding: 0;
+}
+
+::-webkit-date-and-time-value {
+  min-height: 1.5em;
+}
+
+::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+select {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right 0.5rem center;
+  background-repeat: no-repeat;
+  background-size: 1.5em 1.5em;
+  padding-right: 2.5rem;
+  -webkit-print-color-adjust: exact;
+          print-color-adjust: exact;
+}
+
+[multiple] {
+  background-image: initial;
+  background-position: initial;
+  background-repeat: unset;
+  background-size: initial;
+  padding-right: 0.75rem;
+  -webkit-print-color-adjust: unset;
+          print-color-adjust: unset;
+}
+
+[type='checkbox'],[type='radio'] {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  padding: 0;
+  -webkit-print-color-adjust: exact;
+          print-color-adjust: exact;
+  display: inline-block;
+  vertical-align: middle;
+  background-origin: border-box;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  flex-shrink: 0;
+  height: 1rem;
+  width: 1rem;
+  color: #2563eb;
+  background-color: #fff;
+  border-color: #6b7280;
+  border-width: 1px;
+  --tw-shadow: 0 0 #0000;
+}
+
+[type='checkbox'] {
+  border-radius: 0px;
+}
+
+[type='radio'] {
+  border-radius: 100%;
+}
+
+[type='checkbox']:focus,[type='radio']:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
+  --tw-ring-offset-width: 2px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: #2563eb;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+
+[type='checkbox']:checked,[type='radio']:checked {
+  border-color: transparent;
+  background-color: currentColor;
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+[type='checkbox']:checked {
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+}
+
+[type='radio']:checked {
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+}
+
+[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
+  border-color: transparent;
+  background-color: currentColor;
+}
+
+[type='checkbox']:indeterminate {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
+  border-color: transparent;
+  background-color: currentColor;
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
+  border-color: transparent;
+  background-color: currentColor;
+}
+
+[type='file'] {
+  background: unset;
+  border-color: inherit;
+  border-width: 0;
+  border-radius: 0;
+  padding: 0;
+  font-size: unset;
+  line-height: inherit;
+}
+
+[type='file']:focus {
+  outline: 1px solid ButtonText;
+  outline: 1px auto -webkit-focus-ring-color;
+}
+
+*, ::before, ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+
+.block {
+  display: block;
+}
+
+.text-\[--brand-color\] {
+  color: var(--brand-color);
+}
+
+.text-green-600 {
+  --tw-text-opacity: 1;
+  color: rgb(22 163 74 / var(--tw-text-opacity));
+}
+
+.opacity-75 {
+  opacity: 0.75;
+}
+
+@media (prefers-color-scheme: dark) {
+  .dark\:text-green-500 {
+    --tw-text-opacity: 1;
+    color: rgb(34 197 94 / var(--tw-text-opacity));
+  }
+}

examples/watch_throttled/tailwind.config.js

@@ -0,0 +1,15 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: {
+        files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"],
+    },
+    theme: {
+        extend: {},
+    },
+    corePlugins: {
+        preflight: false,
+    },
+    plugins: [
+        require('@tailwindcss/forms'),
+    ],
+}

src/lib.rs

@@ -6,6 +6,8 @@ pub mod core;
 pub mod docs;
 #[cfg(feature = "math")]
 pub mod math;
+#[cfg(feature = "storage")]
+pub mod storage;
 mod use_debounce_fn;
 #[cfg(web_sys_unstable_apis)]
 mod use_element_size;
@@ -14,10 +16,14 @@ mod use_mouse;
 #[cfg(web_sys_unstable_apis)]
 mod use_resize_observer;
 mod use_scroll;
+mod use_storage;
 mod use_supported;
 mod use_throttle_fn;
 pub mod utils;
 mod watch;
+mod watch_debounced;
+mod watch_pausable;
+mod watch_throttled;
 
 pub use use_debounce_fn::*;
 #[cfg(web_sys_unstable_apis)]
@@ -27,8 +33,12 @@ pub use use_mouse::*;
 #[cfg(web_sys_unstable_apis)]
 pub use use_resize_observer::*;
 pub use use_scroll::*;
+pub use use_storage::*;
 pub use use_supported::*;
 pub use use_throttle_fn::*;
 pub use watch::*;
+pub use watch_debounced::*;
+pub use watch_pausable::*;
+pub use watch_throttled::*;
 
 extern crate self as leptos_use;

src/use_scroll.rs

@@ -9,6 +9,7 @@ use std::borrow::Cow;
 use wasm_bindgen::JsCast;
 
 /// Reactive scroll position and state.
+///
 /// ## Demo
 ///
 /// [Link to Demo](https://github.com/Synphonyte/leptos-use/tree/main/examples/use_scroll)

src/use_storage.rs

@@ -0,0 +1,59 @@
+use default_struct_builder::DefaultBuilder;
+use leptos::*;
+use serde::{Deserialize, Serialize};
+use wasm_bindgen::JsValue;
+
+// pub fn use_storage_with_options<T, D, MergeFn, ErrorFn>(
+//     cx: Scope,
+//     key: &str,
+//     defaults: D,
+//     options: UseStorageOptions<T, MergeFn, ErrorFn>,
+// ) -> (ReadSignal<T>, WriteSignal<T>)
+// where
+//     for<'de> T: Serialize + Deserialize<'de> + Clone + 'static,
+//     D: Into<MaybeSignal<T>>,
+//     MergeFn: Fn(T, T) -> T,
+//     ErrorFn: Fn(JsValue) + Clone,
+// {
+//     let defaults = defaults.into();
+//
+//     let (data, set_data) = create_signal(cx, defaults.get_untracked());
+//
+//     let storage = match options.storage_type {
+//         StorageType::Local => window().local_storage(),
+//         StorageType::Session => window().session_storage(),
+//     };
+//
+//     match storage {
+//         Ok(Some(storage)) => {}
+//         Err(e) => options.on_error(e),
+//         _ => {
+//             // do nothing
+//         }
+//     }
+//
+//     (data, set_data)
+// }
+
+#[derive(DefaultBuilder)]
+pub struct UseStorageOptions<T, MergeFn, ErrorFn>
+where
+    MergeFn: Fn(T, T) -> T,
+    ErrorFn: Fn(JsValue),
+    for<'de> T: Serialize + Deserialize<'de> + 'static,
+{
+    storage_type: StorageType,
+    listen_to_storage_changes: bool,
+    write_defaults: bool,
+    merge_defaults: MergeFn,
+    on_error: ErrorFn,
+
+    _marker: std::marker::PhantomData<T>,
+}
+
+#[derive(Default)]
+pub enum StorageType {
+    #[default]
+    Local,
+    Session,
+}

src/utils/filters/debounce.rs

@@ -6,7 +6,7 @@ use std::cell::{Cell, RefCell};
 use std::rc::Rc;
 use std::time::Duration;
 
-#[derive(Copy, Clone, DefaultBuilder)]
+#[derive(Copy, Clone, DefaultBuilder, Default)]
 pub struct DebounceOptions {
     /// The maximum time allowed to be delayed before it's invoked.
     /// In milliseconds.
@@ -14,14 +14,6 @@ pub struct DebounceOptions {
     pub max_wait: MaybeSignal<Option<f64>>,
 }
 
-impl Default for DebounceOptions {
-    fn default() -> Self {
-        Self {
-            max_wait: Default::default(),
-        }
-    }
-}
-
 pub fn debounce_filter<R>(
     ms: impl Into<MaybeSignal<f64>>,
     options: DebounceOptions,

src/utils/filters/mod.rs

@@ -1,9 +1,7 @@
 mod debounce;
-mod pausable;
 mod throttle;
 
 pub use debounce::*;
-pub use pausable::*;
 pub use throttle::*;
 
 use crate::utils::{CloneableFnWithArgAndReturn, CloneableFnWithReturn};
@@ -11,26 +9,14 @@ use leptos::MaybeSignal;
 use std::cell::RefCell;
 use std::rc::Rc;
 
-pub trait FilterFn<R>:
+macro_rules! BoxFilterFn {
-    CloneableFnWithArgAndReturn<Box<dyn CloneableFnWithReturn<R>>, Rc<RefCell<Option<R>>>>
+    ($R:ident) => {
-{
+        Box<dyn CloneableFnWithArgAndReturn<Box<dyn CloneableFnWithReturn<$R>>, Rc<RefCell<Option<$R>>>>>
-}
-
-impl<R, F> FilterFn<R> for F
-where
-    F: Fn(Box<dyn CloneableFnWithReturn<R>>) -> Rc<RefCell<Option<R>>> + Clone + 'static,
-    R: 'static,
-{
-}
-
-impl<R> Clone for Box<dyn FilterFn<R>> {
-    fn clone(&self) -> Self {
-        (*self).clone()
     }
 }
 
 pub fn create_filter_wrapper<F, R>(
-    filter: Box<dyn FilterFn<R>>,
+    filter: BoxFilterFn!(R),
     func: F,
 ) -> impl Fn() -> Rc<RefCell<Option<R>>> + Clone
 where
@@ -41,7 +27,7 @@ where
 }
 
 pub fn create_filter_wrapper_with_arg<F, Arg, R>(
-    filter: Box<dyn FilterFn<R>>,
+    filter: BoxFilterFn!(R),
     func: F,
 ) -> impl Fn(Arg) -> Rc<RefCell<Option<R>>> + Clone
 where
@@ -55,6 +41,7 @@ where
     }
 }
 
+/// Specify a debounce or throttle filter with their respective options or no filter
 #[derive(Default)]
 pub enum FilterOptions {
     #[default]
@@ -70,7 +57,7 @@ pub enum FilterOptions {
 }
 
 impl FilterOptions {
-    pub fn filter_fn<R>(&self) -> Box<dyn FilterFn<R>>
+    pub fn filter_fn<R>(&self) -> BoxFilterFn!(R)
     where
         R: 'static,
     {
@@ -88,6 +75,7 @@ impl FilterOptions {
     }
 }
 
+/// Defines builder methods to define filter options without having to use nested methods
 #[macro_export]
 macro_rules! filter_builder_methods {
     (

src/utils/filters/throttle.rs

@@ -10,7 +10,9 @@ use std::time::Duration;
 
 #[derive(Copy, Clone, DefaultBuilder)]
 pub struct ThrottleOptions {
+    /// Invoke on the trailing edge of the timeout. Defaults to `true`.
     pub trailing: bool,
+    /// Invoke on the leading edge of the timeout. Defaults to `true`.
     pub leading: bool,
 }
 

src/watch.rs

@@ -1,4 +1,4 @@
-use crate::utils::{create_filter_wrapper, create_filter_wrapper_with_arg, FilterOptions};
+use crate::utils::{create_filter_wrapper, FilterOptions};
 use crate::{filter_builder_methods, DebounceOptions, ThrottleOptions};
 use default_struct_builder::DefaultBuilder;
 use leptos::*;
@@ -10,7 +10,7 @@ use std::rc::Rc;
 /// The return value of `deps` is passed into `callback` as an argument together with the previous value
 /// and the previous value that the `callback` itself returned last time.
 ///
-/// # Usage
+/// ## Usage
 ///
 /// ```
 /// # use std::time::Duration;
@@ -26,7 +26,7 @@ use std::rc::Rc;
 ///     move |num, _, _| {
 ///         log!("number {}", num);
 ///     },
-/// ); // > "number 0"
+/// );
 ///
 /// set_num(1); // > "number 1"
 ///
@@ -41,7 +41,8 @@ use std::rc::Rc;
 ///
 /// ## Immediate
 ///
-/// If `immediate` is false, the `callback` will not run immediately but only after
+/// If `immediate` is true, the `callback` will run immediately.
+/// If it's `false, the `callback` will run only after
 /// the first change is detected of any signal that is accessed in `deps`.
 ///
 /// ```
@@ -57,8 +58,8 @@ use std::rc::Rc;
 ///     move |num, _, _| {
 ///         log!("number {}", num);
 ///     },
-///     WatchOptions::default().immediate(false),
+///     WatchOptions::default().immediate(true),
-/// ); // nothing happens
+/// ); // > "number 0"
 ///
 /// set_num(1); // > "number 1"
 /// #    view! { cx, }
@@ -154,7 +155,8 @@ where
         )
     };
 
-    let filtered_callback = create_filter_wrapper(options.filter.filter_fn(), wrapped_callback);
+    let filtered_callback =
+        create_filter_wrapper(options.filter.filter_fn(), wrapped_callback.clone());
 
     create_effect(cx, move |did_run_before| {
         if !is_active() {
@@ -170,7 +172,11 @@ where
 
         cur_deps_value.replace(Some(deps_value.clone()));
 
-        let callback_value = filtered_callback().take();
+        let callback_value = if options.immediate && did_run_before.is_none() {
+            Some(wrapped_callback())
+        } else {
+            filtered_callback().take()
+        };
 
         prev_callback_value.replace(callback_value);
 
@@ -185,26 +191,17 @@ where
 }
 
 /// Options for `watch_with_options`
-#[derive(DefaultBuilder)]
+#[derive(DefaultBuilder, Default)]
 pub struct WatchOptions {
-    /// If `immediate` is false, the `callback` will not run immediately but only after
+    /// If `immediate` is true, the `callback` will run immediately.
+    /// If it's `false, the `callback` will run only after
     /// the first change is detected of any signal that is accessed in `deps`.
-    /// Defaults to `true`.
     immediate: bool,
 
     #[builder(skip)]
     filter: FilterOptions,
 }
 
-impl Default for WatchOptions {
-    fn default() -> Self {
-        Self {
-            immediate: true,
-            filter: Default::default(),
-        }
-    }
-}
-
 impl WatchOptions {
     filter_builder_methods!(
         /// the watch callback

src/watch_debounced.rs

@@ -0,0 +1,116 @@
+use default_struct_builder::DefaultBuilder;
+use leptos::*;
+use leptos_use::{watch_with_options, DebounceOptions, WatchOptions};
+
+/// A debounced version of [`watch`].
+///
+/// ## Demo
+///
+/// [Link to Demo](https://github.com/Synphonyte/leptos-use/tree/main/examples/watch_debounced)
+///
+/// ## Usage
+///
+/// ```
+/// # use std::time::Duration;
+/// # use leptos::*;
+/// # use leptos_use::watch_debounced;
+/// #
+/// # pub fn Demo(cx: Scope) -> impl IntoView {
+/// #     let (source, set_source) = create_signal(cx, 0);
+/// #
+/// watch_debounced(
+///     cx,
+///     source,
+///     move |_, _, _| {
+///         log!("changed!");
+///     },
+///     500.0,
+/// );
+///
+/// #    view! { cx, }
+/// # }
+/// ```
+///
+/// This really is only shorthand shorthand for `watch_with_options(cx, deps, callback, WatchOptions::default().debounce(ms))`.
+///
+/// There's also `watch_debounced_with_options` where you can specify the other watch options (except `filter`).
+///
+/// ```
+/// # use std::time::Duration;
+/// # use leptos::*;
+/// # use leptos_use::{watch_debounced_with_options, WatchDebouncedOptions};
+/// #
+/// # pub fn Demo(cx: Scope) -> impl IntoView {
+/// #     let (source, set_source) = create_signal(cx, 0);
+/// #
+/// watch_debounced_with_options(
+///     cx,
+///     source,
+///     move |_, _, _| {
+///         log!("changed!");
+///     },
+///     500.0,
+///     WatchDebouncedOptions::default().max_wait(Some(1000.0)),
+/// );
+///
+/// #    view! { cx, }
+/// # }
+/// ```
+///
+/// ## See also
+///
+/// * [`watch`]
+/// * [`watch_throttled`]
+pub fn watch_debounced<W, T, DFn, CFn>(
+    cx: Scope,
+    deps: DFn,
+    callback: CFn,
+    ms: f64,
+) -> impl Fn() + Clone
+where
+    DFn: Fn() -> W + 'static,
+    CFn: Fn(&W, Option<&W>, Option<T>) -> T + Clone + 'static,
+    W: Clone + 'static,
+    T: Clone + 'static,
+{
+    watch_with_options(cx, deps, callback, WatchOptions::default().debounce(ms))
+}
+
+/// Version of `watch_debounced` that accepts `WatchDebouncedOptions`. See [`watch_debounced`] for how to use.
+pub fn watch_debounced_with_options<W, T, DFn, CFn>(
+    cx: Scope,
+    deps: DFn,
+    callback: CFn,
+    ms: f64,
+    options: WatchDebouncedOptions,
+) -> impl Fn() + Clone
+where
+    DFn: Fn() -> W + 'static,
+    CFn: Fn(&W, Option<&W>, Option<T>) -> T + Clone + 'static,
+    W: Clone + 'static,
+    T: Clone + 'static,
+{
+    watch_with_options(
+        cx,
+        deps,
+        callback,
+        WatchOptions::default()
+            .debounce_with_options(ms, DebounceOptions::default().max_wait(options.max_wait))
+            .immediate(options.immediate),
+    )
+}
+
+/// Options for [`watch_debounced_with_options`].
+#[derive(DefaultBuilder, Default)]
+pub struct WatchDebouncedOptions {
+    /// If `immediate` is false, the `callback` will not run immediately but only after
+    /// the first change is detected of any signal that is accessed in `deps`.
+    /// Defaults to `true`.
+    immediate: bool,
+
+    /// The maximum time allowed to be delayed before the callback invoked.
+    /// In milliseconds.
+    /// Same as [`DebounceOptions::max_wait`]
+    #[builder(into)]
+    pub max_wait: MaybeSignal<Option<f64>>,
+}

src/watch_throttled.rs

@@ -0,0 +1,130 @@
+use default_struct_builder::DefaultBuilder;
+use leptos::*;
+use leptos_use::{watch_with_options, ThrottleOptions, WatchOptions};
+
+/// A throttled version of [`watch`].
+///
+/// ## Demo
+///
+/// [Link to Demo](https://github.com/Synphonyte/leptos-use/tree/main/examples/watch_throttled)
+///
+/// ## Usage
+///
+/// ```
+/// # use std::time::Duration;
+/// # use leptos::*;
+/// # use leptos_use::watch_throttled;
+/// #
+/// # pub fn Demo(cx: Scope) -> impl IntoView {
+/// #     let (source, set_source) = create_signal(cx, 0);
+/// #
+/// watch_throttled(
+///     cx,
+///     source,
+///     move |_, _, _| {
+///         log!("changed!");
+///     },
+///     500.0,
+/// );
+///
+/// #    view! { cx, }
+/// # }
+/// ```
+///
+/// This really is only shorthand shorthand for `watch_with_options(cx, deps, callback, WatchOptions::default().throttle(ms))`.
+///
+/// There's also `watch_throttled_with_options` where you can specify the other watch options (except `filter`).
+///
+/// ```
+/// # use std::time::Duration;
+/// # use leptos::*;
+/// # use leptos_use::{watch_throttled_with_options, WatchThrottledOptions};
+/// #
+/// # pub fn Demo(cx: Scope) -> impl IntoView {
+/// #     let (source, set_source) = create_signal(cx, 0);
+/// #
+/// watch_throttled_with_options(
+///     cx,
+///     source,
+///     move |_, _, _| {
+///         log!("changed!");
+///     },
+///     500.0,
+///     WatchThrottledOptions::default().leading(true).trailing(false),
+/// );
+///
+/// #    view! { cx, }
+/// # }
+/// ```
+///
+/// ## See also
+///
+/// * [`watch`]
+/// * [`watch_debounced`]
+pub fn watch_throttled<W, T, DFn, CFn>(
+    cx: Scope,
+    deps: DFn,
+    callback: CFn,
+    ms: f64,
+) -> impl Fn() + Clone
+where
+    DFn: Fn() -> W + 'static,
+    CFn: Fn(&W, Option<&W>, Option<T>) -> T + Clone + 'static,
+    W: Clone + 'static,
+    T: Clone + 'static,
+{
+    watch_with_options(cx, deps, callback, WatchOptions::default().throttle(ms))
+}
+
+/// Version of `watch_throttled` that accepts `WatchThrottledOptions`. See [`watch_throttled`] for how to use.
+pub fn watch_throttled_with_options<W, T, DFn, CFn>(
+    cx: Scope,
+    deps: DFn,
+    callback: CFn,
+    ms: f64,
+    options: WatchThrottledOptions,
+) -> impl Fn() + Clone
+where
+    DFn: Fn() -> W + 'static,
+    CFn: Fn(&W, Option<&W>, Option<T>) -> T + Clone + 'static,
+    W: Clone + 'static,
+    T: Clone + 'static,
+{
+    watch_with_options(
+        cx,
+        deps,
+        callback,
+        WatchOptions::default()
+            .throttle_with_options(
+                ms,
+                ThrottleOptions::default()
+                    .leading(options.leading)
+                    .trailing(options.trailing),
+            )
+            .immediate(options.immediate),
+    )
+}
+
+/// Options for [`watch_throttled_with_options`].
+#[derive(DefaultBuilder)]
+pub struct WatchThrottledOptions {
+    /// If `immediate` is false, the `callback` will not run immediately but only after
+    /// the first change is detected of any signal that is accessed in `deps`.
+    /// Defaults to `true`.
+    immediate: bool,
+
+    /// Invoke on the trailing edge of the timeout. Defaults to `true`.
+    pub trailing: bool,
+    /// Invoke on the leading edge of the timeout. Defaults to `true`.
+    pub leading: bool,
+}
+
+impl Default for WatchThrottledOptions {
+    fn default() -> Self {
+        Self {
+            immediate: false,
+            trailing: true,
+            leading: true,
+        }
+    }
+}