added use_mutation_observer

.github/workflows/ci.yml

@@ -71,6 +71,17 @@ jobs:
         with:
           registry-token: ${{ secrets.CRATES_TOKEN }}
 
+      - uses: CSchoel/release-notes-from-changelog@v1
+      - name: Create Release using GitHub CLI
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: >
+          gh release create
+          -d
+          -F RELEASE.md
+          -t "Version $RELEASE_VERSION"
+          ${GITHUB_REF#refs/*/}
+
 #  coverage:
 #    name: Coverage
 #    runs-on: ubuntu-latest

.idea/leptos-use.iml

@@ -28,6 +28,7 @@
       <sourceFolder url="file://$MODULE_DIR$/examples/use_element_visibility/src" isTestSource="false" />
       <sourceFolder url="file://$MODULE_DIR$/examples/use_intersection_observer/src" isTestSource="false" />
       <sourceFolder url="file://$MODULE_DIR$/examples/use_round/src" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/examples/use_mutation_observer/src" isTestSource="false" />
       <excludeFolder url="file://$MODULE_DIR$/examples/use_event_listener/target" />
       <excludeFolder url="file://$MODULE_DIR$/target" />
       <excludeFolder url="file://$MODULE_DIR$/docs/book/book" />

CHANGELOG.md

@@ -1,25 +1,44 @@
 # Changelog
 
-## v0.2.2
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-### New Functions
+## [Unreleased]
+
+### Braking Changes 🛠
+- `use_event_listener` no longer returns a `Box<dyn Fn()>` but a `impl Fn() + Clone`
+
+### Changes 🔥
+
+- You can now specify a `&str` or `Signal<String>` with CSS selectors wherever a node ref is accepted
+- Callbacks of the following functions no longer require `Clone`
+  - `use_resize_observer`
+  - `use_intersection_observer`
+- These functions now also accept multiple target elements in addition to a single one:
+  - `use_resize_observer`
+  - `use_intersection_observer`
+
+### New Functions 🚀
 
 - `whenever`
+- `use_mutation_observer`
 
-## 0.2.1
+## [0.2.1] - 2023-06-11
 
 ### New Functions
 
 - `use_intersection_observer`
 - `use_element_visibility`
 
-## 0.2.0
+## [0.2.0] - 2023-06-11
+
+### Braking Changes
 
-#### Braking Changes
 - `watch` doesn't accept `immediate` as a direct argument anymore. This is only provided by the option variant.
 - `watch` has now variant `watch_with_options` which allows for debouncing and throttling.
 
-#### New Functions
+### New Functions
+
 - `use_storage`
 - `use_local_storage`
 - `use_session_storage`
@@ -34,49 +53,58 @@
 - `use_favicon`
 - `use_breakpoints`
 
-#### Other Changes
+### Other Changes
 
 - Function count badge in readme
 
-## 0.1.8/9
+## [0.1.8/9] - 2023-06-05
 
 - Fixed documentation and doc tests running for functions behind `#[cfg(web_sys_unstable_apis)]`
 
-## 0.1.7
+## [0.1.7] - 2023-06-05
+
+### New Function
 
-#### New Function
 - `use_element_size`
 
-## 0.1.6
+## [0.1.6] - 2023-06-03
+
+### Changes
 
 - Fixed documentation so all feature are documented
 
-## 0.1.5
+## [0.1.5] - 2023-06-03
+
+### New Functions
 
-#### New Functions
 - `use_floor`
 - `use_max`
 - `use_min`
 
-#### Other Changes
+### Changes
+
 - New feature: `math` that has to be activated in order to use the math functions.
 
-## 0.1.4
+## [0.1.4] - 2023-06-02
+
+### New Functions
 
-#### New Functions
 - `use_supported`
 - `use_resize_observer`
 - `watch`
 - `use_mouse`
 
-#### Other Changes
+### Changes
+
 - Use the crate `default-struct-builder` to provide ergonimic function options.
 
-## 0.1.3
+## [0.1.3] - 2023-05-28
+
+### New Functions
 
-#### New Functions
 - `use_scroll`
 - `use_debounce_fn`
 
-#### Other Changes
+### Other Changes
+
 - Better and more beautiful demo integration into the guide.

Cargo.toml

@@ -37,6 +37,9 @@ features = [
     "IntersectionObserverEntry",
     "MediaQueryList",
     "MouseEvent",
+    "MutationObserver",
+    "MutationObserverInit",
+    "MutationRecord",
     "Navigator",
     "NodeList",
     "ResizeObserver",

docs/book/src/SUMMARY.md

@@ -16,6 +16,7 @@
 - [use_element_size](elements/use_element_size.md)
 - [use_element_visibility](elements/use_element_visibility.md)
 - [use_intersection_observer](elements/use_intersection_observer.md)
+- [use_mutation_observer](elements/use_mutation_observer.md)
 - [use_resize_observer](elements/use_resize_observer.md)
 
 # Browser

docs/book/src/elements/use_mutation_observer.md

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

docs/logo.svg

@@ -5,12 +5,12 @@
     <style type="text/css">
         @import url('https://fonts.googleapis.com/css2?family=Quicksand&amp;display=swap');
 
-        path.black {
+        path.black, text {
             fill: #1e1838;
         }
 
         @media (prefers-color-scheme: dark) {
-            path.black {
+            path.black, text {
                 fill: #f3f3f3;
             }
         }

examples/Cargo.toml

@@ -13,6 +13,7 @@ members = [
     "use_intersection_observer",
     "use_media_query",
     "use_mouse",
+    "use_mutation_observer",
     "use_resize_observer",
     "use_round",
     "use_scroll",

examples/use_mutation_observer/Cargo.toml

@@ -0,0 +1,16 @@
+[package]
+name = "use_mutation_observer"
+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/use_mutation_observer/README.md

@@ -0,0 +1,23 @@
+A simple example for `use_mutation_observer`.
+
+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/use_mutation_observer/Trunk.toml

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

examples/use_mutation_observer/index.html

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

examples/use_mutation_observer/input.css

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

examples/use_mutation_observer/rust-toolchain.toml

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

examples/use_mutation_observer/src/main.rs

@@ -0,0 +1,65 @@
+use leptos::*;
+use leptos_use::docs::demo_or_body;
+use leptos_use::use_mutation_observer_with_options;
+use std::time::Duration;
+
+#[component]
+fn Demo(cx: Scope) -> impl IntoView {
+    let el = create_node_ref(cx);
+    let (messages, set_messages) = create_signal(cx, vec![]);
+    let (class_name, set_class_name) = create_signal(cx, String::new());
+    let (style, set_style) = create_signal(cx, String::new());
+
+    let mut init = web_sys::MutationObserverInit::new();
+    init.attributes(true);
+
+    use_mutation_observer_with_options(
+        cx,
+        el,
+        move |mutations, _| {
+            if let Some(mutation) = mutations.first() {
+                set_messages.update(move |messages| {
+                    messages.push(format!("{:?}", mutation.attribute_name()));
+                });
+            }
+        },
+        init,
+    );
+
+    let _ = set_timeout_with_handle(
+        move || {
+            set_class_name("test test2".to_string());
+        },
+        Duration::from_millis(1000),
+    );
+
+    let _ = set_timeout_with_handle(
+        move || {
+            set_style("color: red;".to_string());
+        },
+        Duration::from_millis(1550),
+    );
+
+    let enum_msgs = Signal::derive(cx, move || {
+        messages.get().into_iter().enumerate().collect::<Vec<_>>()
+    });
+
+    view! { cx,
+        <div node_ref=el class=class_name style=style>
+            <For
+                each=enum_msgs
+                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> }
+            />
+        </div>
+    }
+}
+
+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/use_mutation_observer/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:  ;
+}
+
+.static {
+  position: static;
+}
+
+.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/use_mutation_observer/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/core/element_maybe_signal.rs

@@ -125,6 +125,8 @@ where
     }
 }
 
+// From static element //////////////////////////////////////////////////////////////
+
 impl<T, E> From<(Scope, T)> for ElementMaybeSignal<T, E>
 where
     T: Into<E> + Clone + 'static,
@@ -143,6 +145,35 @@ where
     }
 }
 
+// From string (selector) ///////////////////////////////////////////////////////////////
+
+impl<'a, E> From<(Scope, &'a str)> for ElementMaybeSignal<web_sys::Element, E>
+where
+    E: From<web_sys::Element> + 'static,
+{
+    fn from(target: (Scope, &'a str)) -> Self {
+        Self::Static(document().query_selector(target.1).unwrap_or_default())
+    }
+}
+
+impl<E> From<(Scope, Signal<String>)> for ElementMaybeSignal<web_sys::Element, E>
+where
+    E: From<web_sys::Element> + 'static,
+{
+    fn from(target: (Scope, Signal<String>)) -> Self {
+        let (cx, signal) = target;
+
+        Self::Dynamic(
+            create_memo(cx, move |_| {
+                document().query_selector(&signal.get()).unwrap_or_default()
+            })
+            .into(),
+        )
+    }
+}
+
+// From signal ///////////////////////////////////////////////////////////////
+
 macro_rules! impl_from_signal_option {
     ($ty:ty) => {
         impl<T, E> From<(Scope, $ty)> for ElementMaybeSignal<T, E>
@@ -150,7 +181,7 @@ macro_rules! impl_from_signal_option {
             T: Into<E> + Clone + 'static,
         {
             fn from(target: (Scope, $ty)) -> Self {
-                ElementMaybeSignal::Dynamic(target.1.into())
+                Self::Dynamic(target.1.into())
             }
         }
     };
@@ -170,7 +201,7 @@ macro_rules! impl_from_signal {
             fn from(target: (Scope, $ty)) -> Self {
                 let (cx, signal) = target;
 
-                ElementMaybeSignal::Dynamic(Signal::derive(cx, move || Some(signal.get())))
+                Self::Dynamic(Signal::derive(cx, move || Some(signal.get())))
             }
         }
     };
@@ -181,6 +212,8 @@ impl_from_signal!(ReadSignal<T>);
 impl_from_signal!(RwSignal<T>);
 impl_from_signal!(Memo<T>);
 
+// From NodeRef //////////////////////////////////////////////////////////////
+
 macro_rules! impl_from_node_ref {
     ($ty:ty) => {
         impl<R> From<(Scope, NodeRef<R>)> for ElementMaybeSignal<$ty, $ty>
@@ -190,7 +223,7 @@ macro_rules! impl_from_node_ref {
             fn from(target: (Scope, NodeRef<R>)) -> Self {
                 let (cx, node_ref) = target;
 
-                ElementMaybeSignal::Dynamic(Signal::derive(cx, move || {
+                Self::Dynamic(Signal::derive(cx, move || {
                     node_ref.get().map(move |el| {
                         let el = el.into_any();
                         let el: $ty = el.deref().clone().into();

src/core/elements_maybe_signal.rs

@@ -0,0 +1,387 @@
+use crate::core::ElementMaybeSignal;
+use leptos::html::ElementDescriptor;
+use leptos::*;
+use std::marker::PhantomData;
+use std::ops::Deref;
+
+/// Used as an argument type to make it easily possible to pass either
+/// * a `web_sys` element that implements `E` (for example `EventTarget` or `Element`),
+/// * an `Option<T>` where `T` is the web_sys element,
+/// * a `Signal<T>` where `T` is the web_sys element,
+/// * a `Signal<Option<T>>` where `T` is the web_sys element,
+/// * a `NodeRef`
+/// into a function. Used for example in [`use_event_listener`].
+pub enum ElementsMaybeSignal<T, E>
+where
+    T: Into<E> + Clone + 'static,
+{
+    Static(Vec<Option<T>>),
+    Dynamic(Signal<Vec<Option<T>>>),
+    _Phantom(PhantomData<E>),
+}
+
+impl<T, E> Default for ElementsMaybeSignal<T, E>
+where
+    T: Into<E> + Clone + 'static,
+{
+    fn default() -> Self {
+        Self::Static(vec![])
+    }
+}
+
+impl<T, E> Clone for ElementsMaybeSignal<T, E>
+where
+    T: Into<E> + Clone + 'static,
+{
+    fn clone(&self) -> Self {
+        match self {
+            Self::Static(v) => Self::Static(v.clone()),
+            Self::Dynamic(s) => Self::Dynamic(*s),
+            Self::_Phantom(_) => unreachable!(),
+        }
+    }
+}
+
+impl<T, E> SignalGet<Vec<Option<T>>> for ElementsMaybeSignal<T, E>
+where
+    T: Into<E> + Clone + 'static,
+{
+    fn get(&self) -> Vec<Option<T>> {
+        match self {
+            Self::Static(v) => v.clone(),
+            Self::Dynamic(s) => s.get(),
+            Self::_Phantom(_) => unreachable!(),
+        }
+    }
+
+    fn try_get(&self) -> Option<Vec<Option<T>>> {
+        match self {
+            Self::Static(v) => Some(v.clone()),
+            Self::Dynamic(s) => s.try_get(),
+            Self::_Phantom(_) => unreachable!(),
+        }
+    }
+}
+
+impl<T, E> SignalWith<Vec<Option<T>>> for ElementsMaybeSignal<T, E>
+where
+    T: Into<E> + Clone + 'static,
+{
+    fn with<O>(&self, f: impl FnOnce(&Vec<Option<T>>) -> O) -> O {
+        match self {
+            Self::Static(v) => f(v),
+            Self::Dynamic(s) => s.with(f),
+            Self::_Phantom(_) => unreachable!(),
+        }
+    }
+
+    fn try_with<O>(&self, f: impl FnOnce(&Vec<Option<T>>) -> O) -> Option<O> {
+        match self {
+            Self::Static(v) => Some(f(v)),
+            Self::Dynamic(s) => s.try_with(f),
+            Self::_Phantom(_) => unreachable!(),
+        }
+    }
+}
+
+impl<T, E> SignalWithUntracked<Vec<Option<T>>> for ElementsMaybeSignal<T, E>
+where
+    T: Into<E> + Clone + 'static,
+{
+    fn with_untracked<O>(&self, f: impl FnOnce(&Vec<Option<T>>) -> O) -> O {
+        match self {
+            Self::Static(t) => f(t),
+            Self::Dynamic(s) => s.with_untracked(f),
+            Self::_Phantom(_) => unreachable!(),
+        }
+    }
+
+    fn try_with_untracked<O>(&self, f: impl FnOnce(&Vec<Option<T>>) -> O) -> Option<O> {
+        match self {
+            Self::Static(t) => Some(f(t)),
+            Self::Dynamic(s) => s.try_with_untracked(f),
+            Self::_Phantom(_) => unreachable!(),
+        }
+    }
+}
+
+impl<T, E> SignalGetUntracked<Vec<Option<T>>> for ElementsMaybeSignal<T, E>
+where
+    T: Into<E> + Clone + 'static,
+{
+    fn get_untracked(&self) -> Vec<Option<T>> {
+        match self {
+            Self::Static(t) => t.clone(),
+            Self::Dynamic(s) => s.get_untracked(),
+            Self::_Phantom(_) => unreachable!(),
+        }
+    }
+
+    fn try_get_untracked(&self) -> Option<Vec<Option<T>>> {
+        match self {
+            Self::Static(t) => Some(t.clone()),
+            Self::Dynamic(s) => s.try_get_untracked(),
+            Self::_Phantom(_) => unreachable!(),
+        }
+    }
+}
+
+// From single static element //////////////////////////////////////////////////////////////
+
+impl<T, E> From<(Scope, T)> for ElementsMaybeSignal<T, E>
+where
+    T: Into<E> + Clone + 'static,
+{
+    fn from(value: (Scope, T)) -> Self {
+        ElementsMaybeSignal::Static(vec![Some(value.1)])
+    }
+}
+
+impl<T, E> From<(Scope, Option<T>)> for ElementsMaybeSignal<T, E>
+where
+    T: Into<E> + Clone + 'static,
+{
+    fn from(target: (Scope, Option<T>)) -> Self {
+        ElementsMaybeSignal::Static(vec![target.1])
+    }
+}
+
+// From string (selector) ///////////////////////////////////////////////////////////////
+
+impl<'a, E> From<(Scope, &'a str)> for ElementsMaybeSignal<web_sys::Node, E>
+where
+    E: From<web_sys::Node> + 'static,
+{
+    fn from(target: (Scope, &'a str)) -> Self {
+        if let Ok(node_list) = document().query_selector_all(target.1) {
+            let mut list = Vec::with_capacity(node_list.length() as usize);
+            for i in 0..node_list.length() {
+                let node = node_list.get(i).expect("checked the range");
+                list.push(Some(node));
+            }
+
+            Self::Static(list)
+        } else {
+            Self::Static(vec![])
+        }
+    }
+}
+
+impl<E> From<(Scope, Signal<String>)> for ElementsMaybeSignal<web_sys::Node, E>
+where
+    E: From<web_sys::Node> + 'static,
+{
+    fn from(target: (Scope, Signal<String>)) -> Self {
+        let (cx, signal) = target;
+
+        Self::Dynamic(
+            create_memo(cx, move |_| {
+                if let Ok(node_list) = document().query_selector_all(&signal.get()) {
+                    let mut list = Vec::with_capacity(node_list.length() as usize);
+                    for i in 0..node_list.length() {
+                        let node = node_list.get(i).expect("checked the range");
+                        list.push(Some(node));
+                    }
+                    list
+                } else {
+                    vec![]
+                }
+            })
+            .into(),
+        )
+    }
+}
+
+// From single signal ///////////////////////////////////////////////////////////////
+
+macro_rules! impl_from_signal_option {
+    ($ty:ty) => {
+        impl<T, E> From<(Scope, $ty)> for ElementsMaybeSignal<T, E>
+        where
+            T: Into<E> + Clone + 'static,
+        {
+            fn from(target: (Scope, $ty)) -> Self {
+                let (cx, signal) = target;
+                Self::Dynamic(Signal::derive(cx, move || vec![signal.get()]))
+            }
+        }
+    };
+}
+
+impl_from_signal_option!(Signal<Option<T>>);
+impl_from_signal_option!(ReadSignal<Option<T>>);
+impl_from_signal_option!(RwSignal<Option<T>>);
+impl_from_signal_option!(Memo<Option<T>>);
+
+macro_rules! impl_from_signal {
+    ($ty:ty) => {
+        impl<T, E> From<(Scope, $ty)> for ElementsMaybeSignal<T, E>
+        where
+            T: Into<E> + Clone + 'static,
+        {
+            fn from(target: (Scope, $ty)) -> Self {
+                let (cx, signal) = target;
+
+                Self::Dynamic(Signal::derive(cx, move || vec![Some(signal.get())]))
+            }
+        }
+    };
+}
+
+impl_from_signal!(Signal<T>);
+impl_from_signal!(ReadSignal<T>);
+impl_from_signal!(RwSignal<T>);
+impl_from_signal!(Memo<T>);
+
+// From single NodeRef //////////////////////////////////////////////////////////////
+
+macro_rules! impl_from_node_ref {
+    ($ty:ty) => {
+        impl<R> From<(Scope, NodeRef<R>)> for ElementsMaybeSignal<$ty, $ty>
+        where
+            R: ElementDescriptor + Clone + 'static,
+        {
+            fn from(target: (Scope, NodeRef<R>)) -> Self {
+                let (cx, node_ref) = target;
+
+                Self::Dynamic(Signal::derive(cx, move || {
+                    vec![node_ref.get().map(move |el| {
+                        let el = el.into_any();
+                        let el: $ty = el.deref().clone().into();
+                        el
+                    })]
+                }))
+            }
+        }
+    };
+}
+
+impl_from_node_ref!(web_sys::EventTarget);
+impl_from_node_ref!(web_sys::Element);
+
+// From multiple static elements //////////////////////////////////////////////////////////////
+
+impl<T, E> From<(Scope, &[T])> for ElementsMaybeSignal<T, E>
+where
+    T: Into<E> + Clone + 'static,
+{
+    fn from(target: (Scope, &[T])) -> Self {
+        Self::Static(target.1.iter().map(|t| Some(t.clone())).collect())
+    }
+}
+
+impl<T, E> From<(Scope, &[Option<T>])> for ElementsMaybeSignal<T, E>
+where
+    T: Into<E> + Clone + 'static,
+{
+    fn from(target: (Scope, &[Option<T>])) -> Self {
+        Self::Static(target.1.to_vec())
+    }
+}
+
+// From signal of vec ////////////////////////////////////////////////////////////////
+
+impl<T, E> From<(Scope, Signal<Vec<T>>)> for ElementsMaybeSignal<T, E>
+where
+    T: Into<E> + Clone + 'static,
+{
+    fn from(target: (Scope, Signal<Vec<T>>)) -> Self {
+        let (cx, signal) = target;
+        Self::Dynamic(Signal::derive(cx, move || {
+            signal.get().into_iter().map(|t| Some(t)).collect()
+        }))
+    }
+}
+
+impl<T, E> From<(Scope, Signal<Vec<Option<T>>>)> for ElementsMaybeSignal<T, E>
+where
+    T: Into<E> + Clone + 'static,
+{
+    fn from(target: (Scope, Signal<Vec<Option<T>>>)) -> Self {
+        Self::Dynamic(target.1)
+    }
+}
+
+// From multiple signals //////////////////////////////////////////////////////////////
+
+impl<T, E> From<(Scope, &[Signal<T>])> for ElementsMaybeSignal<T, E>
+where
+    T: Into<E> + Clone + 'static,
+{
+    fn from(target: (Scope, &[Signal<T>])) -> Self {
+        let (cx, list) = target;
+
+        let list = list.to_vec();
+
+        Self::Dynamic(Signal::derive(cx, move || {
+            list.iter().map(|t| Some(t.get())).collect()
+        }))
+    }
+}
+
+impl<T, E> From<(Scope, &[Signal<Option<T>>])> for ElementsMaybeSignal<T, E>
+where
+    T: Into<E> + Clone + 'static,
+{
+    fn from(target: (Scope, &[Signal<Option<T>>])) -> Self {
+        let (cx, list) = target;
+
+        let list = list.to_vec();
+
+        Self::Dynamic(Signal::derive(cx, move || {
+            list.iter().map(|t| t.get()).collect()
+        }))
+    }
+}
+
+// From multiple NodeRefs //////////////////////////////////////////////////////////////
+
+macro_rules! impl_from_multi_node_ref {
+    ($ty:ty) => {
+        impl<R> From<(Scope, &[NodeRef<R>])> for ElementsMaybeSignal<$ty, $ty>
+        where
+            R: ElementDescriptor + Clone + 'static,
+        {
+            fn from(target: (Scope, &[NodeRef<R>])) -> Self {
+                let (cx, node_refs) = target;
+
+                let node_refs = node_refs.to_vec();
+
+                Self::Dynamic(Signal::derive(cx, move || {
+                    node_refs
+                        .iter()
+                        .map(|node_ref| {
+                            node_ref.get().map(move |el| {
+                                let el = el.into_any();
+                                let el: $ty = el.deref().clone().into();
+                                el
+                            })
+                        })
+                        .collect()
+                }))
+            }
+        }
+    };
+}
+
+impl_from_multi_node_ref!(web_sys::EventTarget);
+impl_from_multi_node_ref!(web_sys::Element);
+
+// From ElementMaybeSignal //////////////////////////////////////////////////////////////
+
+impl<T, E> From<(Scope, ElementMaybeSignal<T, E>)> for ElementsMaybeSignal<T, E>
+where
+    T: Into<E> + Clone + 'static,
+{
+    fn from(target: (Scope, ElementMaybeSignal<T, E>)) -> Self {
+        let (cx, signal) = target;
+
+        match signal {
+            ElementMaybeSignal::Dynamic(signal) => {
+                Self::Dynamic(Signal::derive(cx, move || vec![signal.get()]))
+            }
+            ElementMaybeSignal::Static(el) => Self::Static(vec![el]),
+            ElementMaybeSignal::_Phantom(_) => unreachable!(),
+        }
+    }
+}

src/core/mod.rs

@@ -1,7 +1,9 @@
-mod event_target_maybe_signal;
+mod element_maybe_signal;
+mod elements_maybe_signal;
 mod position;
 mod size;
 
-pub use event_target_maybe_signal::*;
+pub use element_maybe_signal::*;
+pub use elements_maybe_signal::*;
 pub use position::*;
 pub use size::*;

src/lib.rs

@@ -28,6 +28,7 @@ mod use_favicon;
 mod use_intersection_observer;
 mod use_media_query;
 mod use_mouse;
+mod use_mutation_observer;
 mod use_preferred_contrast;
 mod use_preferred_dark;
 mod use_scroll;
@@ -47,6 +48,7 @@ pub use use_favicon::*;
 pub use use_intersection_observer::*;
 pub use use_media_query::*;
 pub use use_mouse::*;
+pub use use_mutation_observer::*;
 pub use use_preferred_contrast::*;
 pub use use_preferred_dark::*;
 pub use use_scroll::*;

src/use_element_size.rs

@@ -66,7 +66,7 @@ where
     let box_ = options.box_;
     let initial_size = options.initial_size;
 
-    let targ = (cx, target.clone()).into();
+    let targ = (cx, target).into();
 
     let t = targ.clone();
     let is_svg = move || {
@@ -85,9 +85,9 @@ where
     let (height, set_height) = create_signal(cx, options.initial_size.height);
 
     let t = targ.clone();
-    let _ = use_resize_observer_with_options(
+    let _ = use_resize_observer_with_options::<ElementMaybeSignal<T, web_sys::Element>, _, _>(
         cx,
-        target,
+        targ.clone(),
         move |entries, _| {
             let entry = &entries[0];
 

src/use_element_visibility.rs

@@ -61,7 +61,7 @@ where
 
     use_intersection_observer_with_options(
         cx,
-        target,
+        (cx, target).into(),
         move |entries, _| {
             set_visible(entries[0].is_intersecting());
         },

src/use_event_listener.rs

@@ -1,4 +1,5 @@
 use crate::core::ElementMaybeSignal;
+use crate::{watch_with_options, WatchOptions};
 use leptos::ev::EventDescriptor;
 use leptos::*;
 use std::cell::RefCell;
@@ -85,7 +86,7 @@ pub fn use_event_listener<Ev, El, T, F>(
     target: El,
     event: Ev,
     handler: F,
-) -> Box<dyn Fn()>
+) -> impl Fn() + Clone
 where
     Ev: EventDescriptor + 'static,
     (Scope, El): Into<ElementMaybeSignal<T, web_sys::EventTarget>>,
@@ -108,7 +109,7 @@ pub fn use_event_listener_with_options<Ev, El, T, F>(
     event: Ev,
     handler: F,
     options: web_sys::AddEventListenerOptions,
-) -> Box<dyn Fn()>
+) -> impl Fn() + Clone
 where
     Ev: EventDescriptor + 'static,
     (Scope, El): Into<ElementMaybeSignal<T, web_sys::EventTarget>>,
@@ -123,58 +124,48 @@ where
         let _ = element
             .remove_event_listener_with_callback(&event_name, closure.as_ref().unchecked_ref());
     };
-    let cleanup = cleanup_fn.clone();
 
     let event_name = event.name();
 
     let signal = (cx, target).into();
 
-    let element = signal.get_untracked();
+    let prev_element: Rc<RefCell<Option<web_sys::EventTarget>>> =
+        Rc::new(RefCell::new(signal.get_untracked().map(|e| e.into())));
 
-    let cleanup_prev_element = if let Some(element) = element {
+    let prev_el = prev_element.clone();
-        let element = element.into();
+    let cleanup_prev_element = move || {
-
+        if let Some(element) = prev_el.take() {
-        _ = element.add_event_listener_with_callback_and_add_event_listener_options(
+            cleanup_fn(&element);
-            &event_name,
+        }
-            closure_js.as_ref().unchecked_ref(),
-            &options,
-        );
-
-        let clean = cleanup.clone();
-        Rc::new(RefCell::new(Box::new(move || {
-            clean(&element);
-        }) as Box<dyn Fn()>))
-    } else {
-        Rc::new(RefCell::new(Box::new(move || {}) as Box<dyn Fn()>))
     };
 
-    let cleanup_prev_el = Rc::clone(&cleanup_prev_element);
+    let cleanup_prev_el = cleanup_prev_element.clone();
     let closure = closure_js;
-    create_effect(cx, move |_| {
-        cleanup_prev_el.borrow()();
 
-        let element = signal.get();
+    let stop_watch = watch_with_options(
+        cx,
+        move || signal.get().map(|e| e.into()),
+        move |element, _, _| {
+            cleanup_prev_el();
+            prev_element.replace(element.clone());
 
-        if let Some(element) = element {
+            if let Some(element) = element {
-            let element = element.into();
+                _ = element.add_event_listener_with_callback_and_add_event_listener_options(
+                    &event_name,
+                    closure.as_ref().unchecked_ref(),
+                    &options,
+                );
+            }
+        },
+        WatchOptions::default().immediate(true),
+    );
 
-            _ = element.add_event_listener_with_callback_and_add_event_listener_options(
+    let stop = move || {
-                &event_name,
+        stop_watch();
-                closure.as_ref().unchecked_ref(),
+        cleanup_prev_element();
-                &options,
+    };
-            );
 
-            let clean = cleanup.clone();
+    on_cleanup(cx, stop.clone());
-            let _ = cleanup_prev_el.replace(Box::new(move || {
-                clean(&element);
-            }) as Box<dyn Fn()>);
-        } else {
-            let _ = cleanup_prev_el.replace(Box::new(move || {}) as Box<dyn Fn()>);
-        }
-    });
 
-    let cleanup_fn = move || cleanup_prev_element.borrow()();
+    stop
-    on_cleanup(cx, cleanup_fn.clone());
-
-    Box::new(cleanup_fn)
 }

src/use_intersection_observer.rs

@@ -1,4 +1,4 @@
-use crate::core::ElementMaybeSignal;
+use crate::core::{ElementMaybeSignal, ElementsMaybeSignal};
 use crate::{watch_with_options, WatchOptions};
 use default_struct_builder::DefaultBuilder;
 use leptos::*;
@@ -51,11 +51,9 @@ pub fn use_intersection_observer<El, T, F>(
     callback: F,
 ) -> UseIntersectionObserverReturn<impl Fn() + Clone, impl Fn() + Clone, impl Fn() + Clone>
 where
-    (Scope, El): Into<ElementMaybeSignal<T, web_sys::Element>>,
+    (Scope, El): Into<ElementsMaybeSignal<T, web_sys::Element>>,
     T: Into<web_sys::Element> + Clone + 'static,
-    F: FnMut(Vec<web_sys::IntersectionObserverEntry>, web_sys::IntersectionObserver)
+    F: FnMut(Vec<web_sys::IntersectionObserverEntry>, web_sys::IntersectionObserver) + 'static,
-        + Clone
-        + 'static,
 {
     use_intersection_observer_with_options::<El, T, web_sys::Element, web_sys::Element, F>(
         cx,
@@ -69,17 +67,15 @@ where
 pub fn use_intersection_observer_with_options<El, T, RootEl, RootT, F>(
     cx: Scope,
     target: El,
-    callback: F,
+    mut callback: F,
     options: UseIntersectionObserverOptions<RootEl, RootT>,
 ) -> UseIntersectionObserverReturn<impl Fn() + Clone, impl Fn() + Clone, impl Fn() + Clone>
 where
-    (Scope, El): Into<ElementMaybeSignal<T, web_sys::Element>>,
+    (Scope, El): Into<ElementsMaybeSignal<T, web_sys::Element>>,
     T: Into<web_sys::Element> + Clone + 'static,
     (Scope, RootEl): Into<ElementMaybeSignal<RootT, web_sys::Element>>,
     RootT: Into<web_sys::Element> + Clone + 'static,
-    F: FnMut(Vec<web_sys::IntersectionObserverEntry>, web_sys::IntersectionObserver)
+    F: FnMut(Vec<web_sys::IntersectionObserverEntry>, web_sys::IntersectionObserver) + 'static,
-        + Clone
-        + 'static,
 {
     let UseIntersectionObserverOptions {
         immediate,
@@ -89,6 +85,20 @@ where
         ..
     } = options;
 
+    let closure_js = Closure::<dyn FnMut(js_sys::Array, web_sys::IntersectionObserver)>::new(
+        move |entries: js_sys::Array, observer| {
+            callback(
+                entries
+                    .to_vec()
+                    .into_iter()
+                    .map(|v| v.unchecked_into::<web_sys::IntersectionObserverEntry>())
+                    .collect(),
+                observer,
+            );
+        },
+    )
+    .into_js_value();
+
     let (is_active, set_active) = create_signal(cx, immediate);
 
     let observer: Rc<RefCell<Option<web_sys::IntersectionObserver>>> = Rc::new(RefCell::new(None));
@@ -100,7 +110,7 @@ where
         }
     };
 
-    let target = (cx, target).into();
+    let targets = (cx, target).into();
     let root = root.map(|root| (cx, root).into());
     let clean = cleanup.clone();
 
@@ -108,13 +118,13 @@ where
         cx,
         move || {
             (
-                target.get(),
+                targets.get(),
                 root.as_ref().map(|root| root.get()),
                 is_active.get(),
             )
         },
         move |values, _, _| {
-            let (target, root, is_active) = values;
+            let (targets, root, is_active) = values;
 
             clean();
 
@@ -122,51 +132,32 @@ where
                 return;
             }
 
-            if let Some(target) = target {
+            let mut options = web_sys::IntersectionObserverInit::new();
-                let mut callback = callback.clone();
+            options.root_margin(&root_margin).threshold(
-                let closure =
+                &thresholds
-                    Closure::<dyn FnMut(js_sys::Array, web_sys::IntersectionObserver)>::new(
+                    .iter()
-                        move |entries: js_sys::Array, observer| {
+                    .copied()
-                            callback(
+                    .map(JsValue::from)
-                                entries
+                    .collect::<js_sys::Array>(),
-                                    .to_vec()
+            );
-                                    .into_iter()
-                                    .map(|v| {
-                                        v.unchecked_into::<web_sys::IntersectionObserverEntry>()
-                                    })
-                                    .collect(),
-                                observer,
-                            );
-                        },
-                    );
 
-                let mut options = web_sys::IntersectionObserverInit::new();
+            if let Some(Some(root)) = root {
-                options.root_margin(&root_margin).threshold(
+                let root: web_sys::Element = root.clone().into();
-                    &thresholds
+                options.root(Some(&root));
-                        .iter()
+            }
-                        .copied()
-                        .map(JsValue::from)
-                        .collect::<js_sys::Array>(),
-                );
 
-                if let Some(Some(root)) = root {
+            let obs = web_sys::IntersectionObserver::new_with_options(
-                    let root: web_sys::Element = root.clone().into();
+                closure_js.clone().as_ref().unchecked_ref(),
-                    options.root(Some(&root));
+                &options,
-                }
+            )
-
+            .expect("failed to create IntersectionObserver");
-                let obs = web_sys::IntersectionObserver::new_with_options(
-                    closure.as_ref().unchecked_ref(),
-                    &options,
-                )
-                .expect("failed to create IntersectionObserver");
-
-                closure.forget();
 
+            for target in targets.iter().flatten() {
                 let target: web_sys::Element = target.clone().into();
                 obs.observe(&target);
-
-                observer.replace(Some(obs));
             }
+
+            observer.replace(Some(obs));
         },
         WatchOptions::default().immediate(immediate),
     );

src/use_media_query.rs

@@ -63,7 +63,7 @@ pub fn use_media_query(cx: Scope, query: impl Into<MaybeSignal<String>>) -> Sign
         if let Some(media_query) = media_query.as_ref() {
             set_matches(media_query.matches());
 
-            remove_listener.replace(Some(use_event_listener(
+            remove_listener.replace(Some(Box::new(use_event_listener(
                 cx,
                 media_query.clone(),
                 change,
@@ -71,7 +71,7 @@ pub fn use_media_query(cx: Scope, query: impl Into<MaybeSignal<String>>) -> Sign
                     .get()
                     .expect("cell should be initialized by now")
                     .clone(),
-            )));
+            ))));
         } else {
             set_matches(false);
         }

src/use_mutation_observer.rs

@@ -0,0 +1,138 @@
+use crate::core::ElementsMaybeSignal;
+use crate::{use_supported, watch};
+use leptos::*;
+use std::cell::RefCell;
+use std::rc::Rc;
+use wasm_bindgen::prelude::*;
+use web_sys::MutationObserverInit;
+
+/// Reactive [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
+///
+/// Watch for changes being made to the DOM tree.
+///
+/// ## Demo
+///
+/// [Link to Demo](https://github.com/Synphonyte/leptos-use/tree/main/examples/use_mutation_observer)
+///
+/// ## Usage
+///
+/// ```
+/// # use leptos::*;
+/// # use leptos_use::use_mutation_observer_with_options;
+/// #
+/// # #[component]
+/// # fn Demo(cx: Scope) -> impl IntoView {
+/// let el = create_node_ref(cx);
+/// let (text, set_text) = create_signal(cx, "".to_string());
+///
+/// let mut init = web_sys::MutationObserverInit::new();
+/// init.attributes(true);
+///
+/// use_mutation_observer_with_options(
+///     cx,
+///     el,
+///     move |mutations, _| {
+///         if let Some(mutation) = mutations.first() {
+///             set_text.update(|text| *text = format!("{text}\n{:?}", mutation.attribute_name()));
+///         }
+///     },
+///     init,
+/// );
+///
+/// view! { cx,
+///     <pre node_ref=el>{ text }</pre>
+/// }
+/// # }
+/// ```
+pub fn use_mutation_observer<El, T, F>(
+    cx: Scope,
+    target: El,
+    callback: F,
+) -> UseMutationObserverReturn<impl Fn() + Clone>
+where
+    (Scope, El): Into<ElementsMaybeSignal<T, web_sys::Element>>,
+    T: Into<web_sys::Element> + Clone + 'static,
+    F: FnMut(Vec<web_sys::MutationRecord>, web_sys::MutationObserver) + 'static,
+{
+    use_mutation_observer_with_options(cx, target, callback, MutationObserverInit::default())
+}
+
+/// Version of [`use_mutation_observer`] that takes a `web_sys::MutationObserverInit`. See [`use_mutation_observer`] for how to use.
+pub fn use_mutation_observer_with_options<El, T, F>(
+    cx: Scope,
+    target: El,
+    mut callback: F,
+    options: web_sys::MutationObserverInit,
+) -> UseMutationObserverReturn<impl Fn() + Clone>
+where
+    (Scope, El): Into<ElementsMaybeSignal<T, web_sys::Element>>,
+    T: Into<web_sys::Element> + Clone + 'static,
+    F: FnMut(Vec<web_sys::MutationRecord>, web_sys::MutationObserver) + 'static,
+{
+    let closure_js = Closure::<dyn FnMut(js_sys::Array, web_sys::MutationObserver)>::new(
+        move |entries: js_sys::Array, observer| {
+            callback(
+                entries
+                    .to_vec()
+                    .into_iter()
+                    .map(|v| v.unchecked_into::<web_sys::MutationRecord>())
+                    .collect(),
+                observer,
+            );
+        },
+    )
+    .into_js_value();
+
+    let observer: Rc<RefCell<Option<web_sys::MutationObserver>>> = Rc::new(RefCell::new(None));
+
+    let is_supported = use_supported(cx, || JsValue::from("MutationObserver").js_in(&window()));
+
+    let obs = Rc::clone(&observer);
+    let cleanup = move || {
+        let mut observer = obs.borrow_mut();
+        if let Some(o) = observer.as_ref() {
+            o.disconnect();
+            *observer = None;
+        }
+    };
+
+    let targets = (cx, target).into();
+
+    let clean = cleanup.clone();
+    let stop_watch = watch(
+        cx,
+        move || targets.get(),
+        move |targets, _, _| {
+            clean();
+
+            if is_supported() && !targets.is_empty() {
+                let obs = web_sys::MutationObserver::new(closure_js.as_ref().unchecked_ref())
+                    .expect("failed to create MutationObserver");
+
+                for target in targets.iter().flatten() {
+                    let target: web_sys::Element = target.clone().into();
+                    let _ = obs.observe_with_options(&target, &options.clone());
+                }
+
+                observer.replace(Some(obs));
+            }
+        },
+    );
+
+    let stop = move || {
+        cleanup();
+        stop_watch();
+    };
+
+    on_cleanup(cx, stop.clone());
+
+    UseMutationObserverReturn { is_supported, stop }
+}
+
+/// The return value of [`use_mutation_observer`].
+pub struct UseMutationObserverReturn<F: Fn() + Clone> {
+    /// Whether the browser supports the MutationObserver API
+    pub is_supported: Signal<bool>,
+    /// A function to stop and detach the MutationObserver
+    pub stop: F,
+}

src/use_resize_observer.rs

@@ -1,4 +1,4 @@
-use crate::core::ElementMaybeSignal;
+use crate::core::ElementsMaybeSignal;
 use crate::{use_supported, watch};
 use default_struct_builder::DefaultBuilder;
 use leptos::*;
@@ -50,11 +50,11 @@ pub fn use_resize_observer<El, T, F>(
     cx: Scope,
     target: El, // TODO : multiple elements?
     callback: F,
-) -> UseResizeObserverReturn
+) -> UseResizeObserverReturn<impl Fn() + Clone>
 where
-    (Scope, El): Into<ElementMaybeSignal<T, web_sys::Element>>,
+    (Scope, El): Into<ElementsMaybeSignal<T, web_sys::Element>>,
     T: Into<web_sys::Element> + Clone + 'static,
-    F: FnMut(Vec<web_sys::ResizeObserverEntry>, web_sys::ResizeObserver) + Clone + 'static,
+    F: FnMut(Vec<web_sys::ResizeObserverEntry>, web_sys::ResizeObserver) + 'static,
 {
     use_resize_observer_with_options(cx, target, callback, UseResizeObserverOptions::default())
 }
@@ -63,14 +63,28 @@ where
 pub fn use_resize_observer_with_options<El, T, F>(
     cx: Scope,
     target: El, // TODO : multiple elements?
-    callback: F,
+    mut callback: F,
     options: UseResizeObserverOptions,
-) -> UseResizeObserverReturn
+) -> UseResizeObserverReturn<impl Fn() + Clone>
 where
-    (Scope, El): Into<ElementMaybeSignal<T, web_sys::Element>>,
+    (Scope, El): Into<ElementsMaybeSignal<T, web_sys::Element>>,
     T: Into<web_sys::Element> + Clone + 'static,
-    F: FnMut(Vec<web_sys::ResizeObserverEntry>, web_sys::ResizeObserver) + Clone + 'static,
+    F: FnMut(Vec<web_sys::ResizeObserverEntry>, web_sys::ResizeObserver) + 'static,
 {
+    let closure_js = Closure::<dyn FnMut(js_sys::Array, web_sys::ResizeObserver)>::new(
+        move |entries: js_sys::Array, observer| {
+            callback(
+                entries
+                    .to_vec()
+                    .into_iter()
+                    .map(|v| v.unchecked_into::<web_sys::ResizeObserverEntry>())
+                    .collect(),
+                observer,
+            );
+        },
+    )
+    .into_js_value();
+
     let observer: Rc<RefCell<Option<web_sys::ResizeObserver>>> = Rc::new(RefCell::new(None));
 
     let is_supported = use_supported(cx, || JsValue::from("ResizeObserver").js_in(&window()));
@@ -84,40 +98,25 @@ where
         }
     };
 
-    let target = (cx, target).into();
+    let targets = (cx, target).into();
 
     let clean = cleanup.clone();
     let stop_watch = watch(
         cx,
-        move || target.get(),
+        move || targets.get(),
-        move |target, _, _| {
+        move |targets, _, _| {
             clean();
 
-            if is_supported() {
+            if is_supported() && !targets.is_empty() {
-                if let Some(target) = target {
+                let obs = web_sys::ResizeObserver::new(closure_js.clone().as_ref().unchecked_ref())
-                    let mut callback = callback.clone();
+                    .expect("failed to create ResizeObserver");
-                    let closure = Closure::<dyn FnMut(js_sys::Array, web_sys::ResizeObserver)>::new(
-                        move |entries: js_sys::Array, observer| {
-                            callback(
-                                entries
-                                    .to_vec()
-                                    .into_iter()
-                                    .map(|v| v.unchecked_into::<web_sys::ResizeObserverEntry>())
-                                    .collect(),
-                                observer,
-                            );
-                        },
-                    );
-                    let obs = web_sys::ResizeObserver::new(closure.as_ref().unchecked_ref())
-                        .expect("failed to create ResizeObserver");
-
-                    closure.forget();
 
+                for target in targets.iter().flatten() {
                     let target: web_sys::Element = target.clone().into();
                     obs.observe_with_options(&target, &options.clone().into());
-
-                    observer.replace(Some(obs));
                 }
+
+                observer.replace(Some(obs));
             }
         },
     );
@@ -129,14 +128,11 @@ where
 
     on_cleanup(cx, stop.clone());
 
-    UseResizeObserverReturn {
+    UseResizeObserverReturn { is_supported, stop }
-        is_supported,
-        stop: Box::new(stop),
-    }
 }
 
-#[derive(DefaultBuilder, Clone)]
 /// Options for [`use_resize_observer_with_options`].
+#[derive(DefaultBuilder, Clone)]
 pub struct UseResizeObserverOptions {
     /// The box that is used to determine the dimensions of the target. Defaults to `ContentBox`.
     pub box_: web_sys::ResizeObserverBoxOptions,
@@ -159,9 +155,9 @@ impl From<UseResizeObserverOptions> for web_sys::ResizeObserverOptions {
 }
 
 /// The return value of [`use_resize_observer`].
-pub struct UseResizeObserverReturn {
+pub struct UseResizeObserverReturn<F: Fn() + Clone> {
     /// Whether the browser supports the ResizeObserver API
     pub is_supported: Signal<bool>,
     /// A function to stop and detach the ResizeObserver
-    pub stop: Box<dyn Fn()>,
+    pub stop: F,
 }