all functions are callable on the server

Fixes #31 and #24

.idea/misc.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="Black">
+    <option name="sdkName" value="Python 3.9" />
+  </component>
+</project>

CHANGELOG.md

@@ -20,7 +20,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   Please check the release notes of Leptos 0.5 for how to upgrade.
 - `watch` is now deprecated in favor of `leptos::watch` and will be removed in a future release.
   `watch_with_options` will continue to exist.
-- `use_event_listener_with_options` now takes a `UseEventListenerOptions` instead of a `web_sys::AddEventListenerOptions`.
+- `use_event_listener_with_options` now takes a `UseEventListenerOptions` instead of
+  a `web_sys::AddEventListenerOptions`.
+- `use_mutation_observer_with_options` now takes a `UseMutationObserverOptions` instead of
+  a `web_sys::MutationObserverInit`.
 - `use_websocket`:
     - takes now a `&str` instead of a `String` as its `url` parameter.
     - The `ready_state` return type is now renamed to `ConnectionReadyState` instead of `UseWebSocketReadyState`.
@@ -38,9 +41,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Callbacks in options don't require to be cloneable anymore
 - Callback in `use_raf_fn` doesn't require to be cloneable anymore
-- `use_scroll` is now callable on the server
+- All (!) functions can now be safely called on the server. Specifically this includes the following that
-- `use_event_listener` can now be called safely on the server.
+- panicked on the server:
-
+    - `use_scroll`
+    - `use_event_listener`
+    - `use_element_hover`
+    - `on_click_outside`
+    - `use_drop_zone`
+    - `use_element_size`
+    - `use_element_visibility`
+    - `use_resize_observer`
+    - `use_intersection_observer`
+    - `use_mutation_observer`
 
 ### Fixes 🍕
 

docs/book/src/server_side_rendering.md

@@ -32,18 +32,23 @@ and the server.
 
 ## Functions with Target Elements
 
-A lot of functions like `use_event_listener` and `use_element_size` are only useful when a target HTML/SVG element is
+A lot of functions like `use_resize_observer` and `use_element_size` are only useful when a target HTML/SVG element is
-available. This is not the case on the server. You can simply wrap them in `create_effect` which will cause them to
+available. This is not always the case on the server. If you use them with `NodeRefs` they will just work in SSR.
-be only called in the browser.
+But what if you want to use them with `window()` or `document()`?
+
+To enable that we provide the helper functions [`use_window()`](elements/use_window.md) and [`use_document()`](elements/use_document.md) which return
+a new-type-wrapped `Option<web_sys::Window>` or `Option<web_sys::Document>` respectively. These can be
+used safely on the server. The following code works on both the client and the server:
 
 ```rust
-create_effect(
+use leptos::*;
-    cx,
+use leptos::ev::keyup;
-    move |_| {
+use leptos_use::{use_event_listener, use_window};
-        // window() doesn't work on the server
+
-        use_event_listener(window(), "resize", move |_| {
+use_event_listener(use_window(), keyup, |evt| {
-            // ...
+    ...
-        })
+}); 
-    },
-);
 ```
+
+There are some convenience methods provided as well, like `use_document().body()` which
+just propagate a `None` on the server.

examples/Cargo.toml

@@ -13,7 +13,6 @@ members = [
     "use_css_var",
     "use_cycle_list",
     "use_debounce_fn",
-    "use_document",
     "use_document_visibility",
     "use_draggable",
     "use_drop_zone",
@@ -38,7 +37,6 @@ members = [
     "use_storage",
     "use_throttle_fn",
     "use_websocket",
-    "use_window",
     "use_window_focus",
     "use_window_scroll",
     "watch_debounced",

examples/ssr/Cargo.toml

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

examples/ssr/src/app.rs

@@ -5,7 +5,8 @@ use leptos_meta::*;
 use leptos_router::*;
 use leptos_use::storage::use_local_storage;
 use leptos_use::{
-    use_debounce_fn, use_event_listener, use_intl_number_format, UseIntlNumberFormatOptions,
+    use_debounce_fn, use_event_listener, use_intl_number_format, use_window,
+    UseIntlNumberFormatOptions,
 };
 
 #[component]
@@ -47,12 +48,10 @@ fn HomePage() -> impl IntoView {
 
     let (key, set_key) = create_signal("".to_string());
 
-    create_effect(move |_| {
+    // window() doesn't work on the server so we provide use_window()
-        // window() doesn't work on the server
+    let _ = use_event_listener(use_window(), keypress, move |evt: KeyboardEvent| {
-        let _ = use_event_listener(window(), keypress, move |evt: KeyboardEvent| {
         set_key(evt.key())
     });
-    });
 
     let (debounce_value, set_debounce_value) = create_signal("not called");
 
@@ -65,10 +64,10 @@ fn HomePage() -> impl IntoView {
     debounced_fn();
 
     view! {
-        <h1>"Leptos-Use SSR Example"</h1>
+        <h1>Leptos-Use SSR Example</h1>
-        <button on:click=on_click>"Click Me: " {count}</button>
+        <button on:click=on_click>Click Me: {count}</button>
-        <p>"Locale "zh-Hans-CN-u-nu-hanidec": " {zh_count}</p>
+        <p>Locale zh-Hans-CN-u-nu-hanidec: {zh_count}</p>
-        <p>"Press any key: " {key}</p>
+        <p>Press any key: {key}</p>
-        <p>"Debounced called: " {debounce_value}</p>
+        <p>Debounced called: {debounce_value}</p>
     }
 }

examples/use_mutation_observer/src/main.rs

@@ -1,7 +1,7 @@
 use leptos::html::Div;
 use leptos::*;
 use leptos_use::docs::demo_or_body;
-use leptos_use::use_mutation_observer_with_options;
+use leptos_use::{use_mutation_observer_with_options, UseMutationObserverOptions};
 use std::time::Duration;
 
 #[component]
@@ -11,9 +11,6 @@ fn Demo() -> impl IntoView {
     let (class_name, set_class_name) = create_signal(String::new());
     let (style, set_style) = create_signal(String::new());
 
-    let mut init = web_sys::MutationObserverInit::new();
-    init.attributes(true);
-
     use_mutation_observer_with_options(
         el,
         move |mutations, _| {
@@ -23,7 +20,7 @@ fn Demo() -> impl IntoView {
                 });
             }
         },
-        init,
+        UseMutationObserverOptions::default().attributes(true),
     );
 
     let _ = set_timeout_with_handle(

src/on_click_outside.rs

@@ -1,16 +1,20 @@
 use crate::core::{ElementMaybeSignal, ElementsMaybeSignal};
-use crate::utils::IS_IOS;
+use cfg_if::cfg_if;
-use crate::{use_event_listener, use_event_listener_with_options, UseEventListenerOptions};
 use default_struct_builder::DefaultBuilder;
-use leptos::ev::{blur, click, pointerdown};
-use leptos::*;
-use std::cell::Cell;
-use std::rc::Rc;
-use std::sync::RwLock;
-use std::time::Duration;
-use wasm_bindgen::JsCast;
 
-static IOS_WORKAROUND: RwLock<bool> = RwLock::new(false);
+cfg_if! { if #[cfg(not(feature = "ssr"))] {
+    use leptos::*;
+    use crate::utils::IS_IOS;
+    use crate::{use_event_listener, use_event_listener_with_options, UseEventListenerOptions};
+    use leptos::ev::{blur, click, pointerdown};
+    use std::cell::Cell;
+    use std::rc::Rc;
+    use std::sync::RwLock;
+    use std::time::Duration;
+    use wasm_bindgen::JsCast;
+
+    static IOS_WORKAROUND: RwLock<bool> = RwLock::new(false);
+}}
 
 /// Listen for clicks outside of an element.
 /// Useful for modals or dropdowns.
@@ -48,7 +52,7 @@ static IOS_WORKAROUND: RwLock<bool> = RwLock::new(false);
 ///
 /// ## Server-Side Rendering
 ///
-/// Please refer to ["Functions with Target Elements"](https://leptos-use.rs/server_side_rendering.html#functions-with-target-elements)
+/// On the server this amounts to a no-op.
 pub fn on_click_outside<El, T, F>(target: El, handler: F) -> impl FnOnce() + Clone
 where
     El: Clone,
@@ -64,6 +68,7 @@ where
 }
 
 /// Version of `on_click_outside` that takes an `OnClickOutsideOptions`. See `on_click_outside` for more details.
+#[cfg_attr(feature = "ssr", allow(unused_variables))]
 pub fn on_click_outside_with_options<El, T, F, I>(
     target: El,
     handler: F,
@@ -76,6 +81,9 @@ where
     F: FnMut(web_sys::Event) + Clone + 'static,
     I: Into<web_sys::EventTarget> + Clone + 'static,
 {
+    cfg_if! { if #[cfg(feature = "ssr")] {
+        || {}
+    } else {
         let OnClickOutsideOptions {
             ignore,
             capture,
@@ -217,6 +225,7 @@ where
                 f();
             }
         }
+    }}
 }
 
 /// Options for [`on_click_outside_with_options`].
@@ -226,6 +235,7 @@ where
     T: Into<web_sys::EventTarget> + Clone + 'static,
 {
     /// List of elementss that should not trigger the callback. Defaults to `[]`.
+    #[cfg_attr(feature = "ssr", allow(dead_code))]
     ignore: ElementsMaybeSignal<T, web_sys::EventTarget>,
 
     /// Use capturing phase for internal event listener. Defaults to `true`.

src/use_active_element.rs

@@ -1,11 +1,9 @@
 #![cfg_attr(feature = "ssr", allow(unused_variables, unused_imports))]
 
-use crate::use_event_listener_with_options;
+use crate::{use_document, use_event_listener_with_options, UseEventListenerOptions};
-use cfg_if::cfg_if;
 use leptos::ev::{blur, focus};
 use leptos::html::{AnyElement, ToHtmlElement};
 use leptos::*;
-use web_sys::AddEventListenerOptions;
 
 /// Reactive `document.activeElement`
 ///
@@ -36,21 +34,15 @@ use web_sys::AddEventListenerOptions;
 ///
 /// On the server this returns a `Signal` that always contains the value `None`.
 pub fn use_active_element() -> Signal<Option<HtmlElement<AnyElement>>> {
-    cfg_if! { if #[cfg(feature = "ssr")] {
-        let get_active_element = || { None };
-    } else {
     let get_active_element = move || {
-            document()
+        use_document()
             .active_element()
             .map(|el| el.to_leptos_element())
     };
-    }}
 
     let (active_element, set_active_element) = create_signal(get_active_element());
 
-    cfg_if! { if #[cfg(not(feature = "ssr"))] {
+    let listener_options = UseEventListenerOptions::default().capture(true);
-        let mut listener_options = AddEventListenerOptions::new();
-        listener_options.capture(true);
 
     let _ = use_event_listener_with_options(
         window(),
@@ -62,7 +54,7 @@ pub fn use_active_element() -> Signal<Option<HtmlElement<AnyElement>>> {
 
             set_active_element.update(|el| *el = get_active_element());
         },
-            listener_options.clone(),
+        listener_options,
     );
 
     let _ = use_event_listener_with_options(
@@ -73,7 +65,6 @@ pub fn use_active_element() -> Signal<Option<HtmlElement<AnyElement>>> {
         },
         listener_options,
     );
-    }}
 
     active_element.into()
 }

src/use_css_var.rs

@@ -1,13 +1,16 @@
 #![cfg_attr(feature = "ssr", allow(unused_variables, unused_imports))]
 
 use crate::core::ElementMaybeSignal;
-use crate::{use_mutation_observer_with_options, watch_with_options, WatchOptions};
+use crate::{
+    use_mutation_observer_with_options, watch_with_options, UseMutationObserverOptions,
+    WatchOptions,
+};
 use cfg_if::cfg_if;
 use default_struct_builder::DefaultBuilder;
 use leptos::*;
 use std::marker::PhantomData;
 use std::time::Duration;
-use wasm_bindgen::{JsCast, JsValue};
+use wasm_bindgen::JsCast;
 
 /// Manipulate CSS variables.
 ///
@@ -127,17 +130,14 @@ where
         };
 
         if observe {
-            let mut init = web_sys::MutationObserverInit::new();
             let update_css_var = update_css_var.clone();
             let el_signal = el_signal.clone();
 
-            init.attribute_filter(&js_sys::Array::from_iter(
-                vec![JsValue::from_str("style")],
-            ));
             use_mutation_observer_with_options::<ElementMaybeSignal<T, web_sys::Element>, T, _>(
                                 el_signal,
                 move |_, _| update_css_var(),
-                init,
+                UseMutationObserverOptions::default()
+                    .attribute_filter(vec!["style".to_string()]),
             );
         }
 

src/use_document.rs

@@ -1,7 +1,9 @@
 use cfg_if::cfg_if;
-use leptos::*;
 use std::ops::Deref;
 
+#[cfg(not(feature = "ssr"))]
+use leptos::*;
+
 /// SSR safe `document()`.
 /// This returns just a new-type wrapper around `Option<Document>`.
 /// Calling this amounts to `None` on the server and `Some(Document)` on the client.
@@ -44,8 +46,11 @@ impl Deref for UseDocument {
 }
 
 impl UseDocument {
-    /// Returns `Some(HtmlElement)` in the Browser. `None` otherwise.
     pub fn body(&self) -> Option<web_sys::HtmlElement> {
         self.0.as_ref().and_then(|d| d.body())
     }
+
+    pub fn active_element(&self) -> Option<web_sys::Element> {
+        self.0.as_ref().and_then(|d| d.active_element())
+    }
 }

src/use_drop_zone.rs

@@ -1,11 +1,15 @@
 use crate::core::ElementMaybeSignal;
-use crate::use_event_listener;
+use cfg_if::cfg_if;
 use default_struct_builder::DefaultBuilder;
-use leptos::ev::{dragenter, dragleave, dragover, drop};
 use leptos::*;
 use std::fmt::{Debug, Formatter};
 use std::rc::Rc;
 
+cfg_if! { if #[cfg(not(feature = "ssr"))] {
+    use crate::use_event_listener;
+    use leptos::ev::{dragenter, dragleave, dragover, drop};
+}}
+
 /// Create a zone where files can be dropped.
 ///
 /// ## Demo
@@ -45,7 +49,8 @@ use std::rc::Rc;
 ///
 /// ## Server-Side Rendering
 ///
-/// Please refer to ["Functions with Target Elements"](https://leptos-use.rs/server_side_rendering.html#functions-with-target-elements)
+/// On the server the returned `file` signal always contains an empty `Vec` and
+/// `is_over_drop_zone` contains always `false`
 pub fn use_drop_zone<El, T>(target: El) -> UseDropZoneReturn
 where
     El: Clone,
@@ -56,6 +61,7 @@ where
 }
 
 /// Version of [`use_drop_zone`] that takes a `UseDropZoneOptions`. See [`use_drop_zone`] for how to use.
+#[cfg_attr(feature = "ssr", allow(unused_variables))]
 pub fn use_drop_zone_with_options<El, T>(
     target: El,
     options: UseDropZoneOptions,
@@ -65,6 +71,10 @@ where
     El: Into<ElementMaybeSignal<T, web_sys::EventTarget>>,
     T: Into<web_sys::EventTarget> + Clone + 'static,
 {
+    let (is_over_drop_zone, set_over_drop_zone) = create_signal(false);
+    let (files, set_files) = create_signal(Vec::<web_sys::File>::new());
+
+    cfg_if! { if #[cfg(not(feature = "ssr"))] {
         let UseDropZoneOptions {
             on_drop,
             on_enter,
@@ -72,9 +82,6 @@ where
             on_over,
         } = options;
 
-    let (is_over_drop_zone, set_over_drop_zone) = create_signal(false);
-    let (files, set_files) = create_signal(Vec::<web_sys::File>::new());
-
         let counter = store_value(0_usize);
 
         let update_files = move |event: &web_sys::DragEvent| {
@@ -140,6 +147,7 @@ where
                 event,
             });
         });
+    }}
 
     UseDropZoneReturn {
         files: files.into(),
@@ -149,6 +157,7 @@ where
 
 /// Options for [`use_drop_zone_with_options`].
 #[derive(DefaultBuilder, Clone)]
+#[cfg_attr(feature = "ssr", allow(dead_code))]
 pub struct UseDropZoneOptions {
     /// Event handler for the [`drop`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/drop_event) event
     on_drop: Rc<dyn Fn(UseDropZoneEvent)>,

src/use_element_hover.rs

@@ -1,10 +1,14 @@
 use crate::core::ElementMaybeSignal;
 use crate::{use_event_listener_with_options, UseEventListenerOptions};
+use cfg_if::cfg_if;
 use default_struct_builder::DefaultBuilder;
 use leptos::ev::{mouseenter, mouseleave};
 use leptos::leptos_dom::helpers::TimeoutHandle;
 use leptos::*;
-use std::time::Duration;
+
+cfg_if! { if #[cfg(not(feature = "ssr"))] {
+    use std::time::Duration;
+}}
 
 /// Reactive element's hover state.
 ///
@@ -32,7 +36,7 @@ use std::time::Duration;
 ///
 /// ## Server-Side Rendering
 ///
-/// Please refer to ["Functions with Target Elements"](https://leptos-use.rs/server_side_rendering.html#functions-with-target-elements)
+/// On the server this returns a `Signal` that always contains the value `false`.
 pub fn use_element_hover<El, T>(el: El) -> Signal<bool>
 where
     El: Clone,
@@ -44,6 +48,7 @@ where
 
 /// Version of [`use_element_hover`] that takes a `UseElementHoverOptions`. See [`use_element_hover`] for how to use.
 
+#[cfg_attr(feature = "ssr", allow(unused_variables, unused_mut))]
 pub fn use_element_hover_with_options<El, T>(
     el: El,
     options: UseElementHoverOptions,
@@ -63,6 +68,7 @@ where
     let mut timer: Option<TimeoutHandle> = None;
 
     let mut toggle = move |entering: bool| {
+        cfg_if! { if #[cfg(not(feature = "ssr"))] {
             let delay = if entering { delay_enter } else { delay_leave };
 
             if let Some(handle) = timer.take() {
@@ -78,9 +84,10 @@ where
             } else {
                 set_hovered.set(entering);
             }
+        }}
     };
 
-    let mut listener_options = UseEventListenerOptions::default().passive(true);
+    let listener_options = UseEventListenerOptions::default().passive(true);
 
     let _ = use_event_listener_with_options(
         el.clone(),

src/use_element_size.rs

@@ -1,10 +1,14 @@
 use crate::core::{ElementMaybeSignal, Size};
-use crate::{use_resize_observer_with_options, UseResizeObserverOptions};
+use cfg_if::cfg_if;
-use crate::{watch_with_options, WatchOptions};
 use default_struct_builder::DefaultBuilder;
 use leptos::*;
 use wasm_bindgen::prelude::wasm_bindgen;
-use wasm_bindgen::JsCast;
+
+cfg_if! { if #[cfg(not(feature = "ssr"))] {
+    use crate::{use_resize_observer_with_options, UseResizeObserverOptions};
+    use crate::{watch_with_options, WatchOptions};
+    use wasm_bindgen::JsCast;
+}}
 
 /// Reactive size of an HTML element.
 ///
@@ -41,7 +45,7 @@ use wasm_bindgen::JsCast;
 ///
 /// ## Server-Side Rendering
 ///
-/// Please refer to ["Functions with Target Elements"](https://leptos-use.rs/server_side_rendering.html#functions-with-target-elements)
+/// On the server the returned signals always contain the value of the `initial_size` option.
 ///
 /// ## See also
 ///
@@ -56,6 +60,7 @@ where
 }
 
 /// Version of [`use_element_size`] that takes a `UseElementSizeOptions`. See [`use_element_size`] for how to use.
+#[cfg_attr(feature = "ssr", allow(unused_variables))]
 pub fn use_element_size_with_options<El, T>(
     target: El,
     options: UseElementSizeOptions,
@@ -65,11 +70,16 @@ where
     El: Into<ElementMaybeSignal<T, web_sys::Element>>,
     T: Into<web_sys::Element> + Clone + 'static,
 {
-    let window = window();
+    let UseElementSizeOptions { box_, initial_size } = options;
-    let box_ = options.box_;
-    let initial_size = options.initial_size;
 
-    let target = (target).into();
+    let (width, set_width) = create_signal(initial_size.width);
+    let (height, set_height) = create_signal(initial_size.height);
+
+    cfg_if! { if #[cfg(not(feature = "ssr"))] {
+
+        let box_ = box_.unwrap_or(web_sys::ResizeObserverBoxOptions::ContentBox);
+
+        let target = target.into();
 
         let is_svg = {
             let target = target.clone();
@@ -87,9 +97,6 @@ where
             }
         };
 
-    let (width, set_width) = create_signal(options.initial_size.width);
-    let (height, set_height) = create_signal(options.initial_size.height);
-
         {
             let target = target.clone();
 
@@ -109,7 +116,7 @@ where
 
                     if is_svg() {
                         if let Some(target) = target.get() {
-                        if let Ok(Some(styles)) = window.get_computed_style(&target.into()) {
+                            if let Ok(Some(styles)) = window().get_computed_style(&target.into()) {
                                 set_height.set(
                                     styles
                                         .get_property_value("height")
@@ -143,7 +150,7 @@ where
                         set_height.set(entry.content_rect().height())
                     }
                 },
-            options.into(),
+                UseResizeObserverOptions::default().box_(box_),
             );
         }
 
@@ -160,6 +167,7 @@ where
             },
             WatchOptions::default().immediate(false),
         );
+    }}
 
     UseElementSizeReturn {
         width: width.into(),
@@ -175,24 +183,19 @@ pub struct UseElementSizeOptions {
     initial_size: Size,
 
     /// The box that is used to determine the dimensions of the target. Defaults to `ContentBox`.
-    pub box_: web_sys::ResizeObserverBoxOptions,
+    #[builder(into)]
+    pub box_: Option<web_sys::ResizeObserverBoxOptions>,
 }
 
 impl Default for UseElementSizeOptions {
     fn default() -> Self {
         Self {
             initial_size: Size::default(),
-            box_: web_sys::ResizeObserverBoxOptions::ContentBox,
+            box_: None,
         }
     }
 }
 
-impl From<UseElementSizeOptions> for UseResizeObserverOptions {
-    fn from(options: UseElementSizeOptions) -> Self {
-        Self::default().box_(options.box_)
-    }
-}
-
 /// The return value of [`use_element_size`].
 pub struct UseElementSizeReturn {
     /// The width of the element.

src/use_element_visibility.rs

@@ -1,9 +1,12 @@
 use crate::core::ElementMaybeSignal;
-use crate::{use_intersection_observer_with_options, UseIntersectionObserverOptions};
+use cfg_if::cfg_if;
 use default_struct_builder::DefaultBuilder;
 use leptos::*;
 use std::marker::PhantomData;
 
+#[cfg(not(feature = "ssr"))]
+use crate::{use_intersection_observer_with_options, UseIntersectionObserverOptions};
+
 /// Tracks the visibility of an element within the viewport.
 ///
 /// ## Demo
@@ -33,7 +36,7 @@ use std::marker::PhantomData;
 ///
 /// ## Server-Side Rendering
 ///
-/// Please refer to ["Functions with Target Elements"](https://leptos-use.rs/server_side_rendering.html#functions-with-target-elements)
+/// On the server this returns a `Signal` that always contains the value `false`.
 ///
 /// ## See also
 ///
@@ -49,6 +52,8 @@ where
     )
 }
 
+/// Version of [`use_element_visibility`] with that takes a `UseElementVisibilityOptions`. See [`use_element_visibility`] for how to use.
+#[cfg_attr(feature = "ssr", allow(unused_variables))]
 pub fn use_element_visibility_with_options<El, T, ContainerEl, ContainerT>(
     target: El,
     options: UseElementVisibilityOptions<ContainerEl, ContainerT>,
@@ -61,6 +66,7 @@ where
 {
     let (is_visible, set_visible) = create_signal(false);
 
+    cfg_if! { if #[cfg(not(feature = "ssr"))] {
         use_intersection_observer_with_options(
             target.into(),
             move |entries, _| {
@@ -75,6 +81,7 @@ where
             },
             UseIntersectionObserverOptions::default().root(options.viewport),
         );
+    }}
 
     is_visible.into()
 }
@@ -92,6 +99,7 @@ where
     /// Defaults to `None` (which means the root `document` will be used).
     /// Please note that setting this to a `Some(document)` may not be supported by all browsers.
     /// See [Browser Compatibility](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#browser_compatibility)
+    #[cfg_attr(feature = "ssr", allow(dead_code))]
     viewport: Option<El>,
 
     #[builder(skip)]

src/use_event_listener.rs

@@ -1,12 +1,16 @@
 use crate::core::ElementMaybeSignal;
-use crate::{watch_with_options, WatchOptions};
+use cfg_if::cfg_if;
 use default_struct_builder::DefaultBuilder;
 use leptos::ev::EventDescriptor;
-use leptos::*;
+
-use std::cell::RefCell;
+cfg_if! { if #[cfg(not(feature = "ssr"))] {
-use std::rc::Rc;
+    use crate::{watch_with_options, WatchOptions};
-use wasm_bindgen::closure::Closure;
+    use leptos::*;
-use wasm_bindgen::JsCast;
+    use std::cell::RefCell;
+    use std::rc::Rc;
+    use wasm_bindgen::closure::Closure;
+    use wasm_bindgen::JsCast;
+}}
 
 /// Use EventListener with ease.
 /// Register using [addEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) on mounted,
@@ -94,6 +98,7 @@ where
 }
 
 /// Version of [`use_event_listener`] that takes `web_sys::AddEventListenerOptions`. See the docs for [`use_event_listener`] for how to use.
+#[cfg_attr(feature = "ssr", allow(unused_variables))]
 pub fn use_event_listener_with_options<Ev, El, T, F>(
     target: El,
     event: Ev,
@@ -106,6 +111,9 @@ where
     T: Into<web_sys::EventTarget> + Clone + 'static,
     F: FnMut(<Ev as EventDescriptor>::EventType) + 'static,
 {
+    cfg_if! { if #[cfg(feature = "ssr")] {
+        || {}
+    } else {
         let event_name = event.name();
         let closure_js = Closure::wrap(Box::new(handler) as Box<dyn FnMut(_)>).into_js_value();
 
@@ -169,10 +177,12 @@ where
         on_cleanup(stop.clone());
 
         stop
+    }}
 }
 
 /// Options for [`use_event_listener_with_options`].
 #[derive(DefaultBuilder, Default, Copy, Clone)]
+#[cfg_attr(feature = "ssr", allow(dead_code))]
 pub struct UseEventListenerOptions {
     /// A boolean value indicating that events of this type will be dispatched to
     /// the registered `listener` before being dispatched to any `EventTarget`
@@ -202,6 +212,7 @@ pub struct UseEventListenerOptions {
 }
 
 impl UseEventListenerOptions {
+    #[cfg_attr(feature = "ssr", allow(dead_code))]
     fn as_add_event_listener_options(&self) -> web_sys::AddEventListenerOptions {
         let UseEventListenerOptions {
             capture,

src/use_intersection_observer.rs

@@ -1,11 +1,15 @@
 use crate::core::{ElementMaybeSignal, ElementsMaybeSignal};
-use crate::{watch_with_options, WatchOptions};
+use cfg_if::cfg_if;
 use default_struct_builder::DefaultBuilder;
 use leptos::*;
-use std::cell::RefCell;
 use std::marker::PhantomData;
-use std::rc::Rc;
+
-use wasm_bindgen::prelude::*;
+cfg_if! { if #[cfg(not(feature = "ssr"))] {
+    use crate::{watch_with_options, WatchOptions};
+    use std::cell::RefCell;
+    use std::rc::Rc;
+    use wasm_bindgen::prelude::*;
+}}
 
 /// Reactive [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver).
 ///
@@ -44,7 +48,7 @@ use wasm_bindgen::prelude::*;
 ///
 /// ## Server-Side Rendering
 ///
-/// Please refer to ["Functions with Target Elements"](https://leptos-use.rs/server_side_rendering.html#functions-with-target-elements)
+/// On the server this amounts to a no-op.
 ///
 /// ## See also
 ///
@@ -66,6 +70,7 @@ where
 }
 
 /// Version of [`use_intersection_observer`] that takes a [`UseIntersectionObserverOptions`]. See [`use_intersection_observer`] for how to use.
+#[cfg_attr(feature = "ssr", allow(unused_variables, unused_mut))]
 pub fn use_intersection_observer_with_options<El, T, RootEl, RootT, F>(
     target: El,
     mut callback: F,
@@ -86,6 +91,13 @@ where
         ..
     } = options;
 
+    let (is_active, set_active) = create_signal(immediate);
+
+    cfg_if! { if #[cfg(feature = "ssr")] {
+        let pause = || {};
+        let cleanup = || {};
+        let stop = || {};
+    } else {
         let closure_js = Closure::<dyn FnMut(js_sys::Array, web_sys::IntersectionObserver)>::new(
             move |entries: js_sys::Array, observer| {
                 callback(
@@ -100,8 +112,6 @@ where
         )
         .into_js_value();
 
-    let (is_active, set_active) = create_signal(immediate);
-
         let observer: Rc<RefCell<Option<web_sys::IntersectionObserver>>> = Rc::new(RefCell::new(None));
 
         let cleanup = {
@@ -187,6 +197,7 @@ where
                 set_active.set(false);
             }
         };
+    }}
 
     UseIntersectionObserverReturn {
         is_active: is_active.into(),

src/use_mouse.rs

@@ -1,14 +1,13 @@
 #![cfg_attr(feature = "ssr", allow(unused_variables, unused_imports))]
 
 use crate::core::{ElementMaybeSignal, Position};
-use crate::use_event_listener_with_options;
+use crate::{use_event_listener_with_options, UseEventListenerOptions};
 use cfg_if::cfg_if;
 use default_struct_builder::DefaultBuilder;
 use leptos::ev::{dragover, mousemove, touchend, touchmove, touchstart};
 use leptos::*;
 use std::marker::PhantomData;
 use wasm_bindgen::{JsCast, JsValue};
-use web_sys::AddEventListenerOptions;
 
 /// Reactive mouse position
 ///
@@ -158,40 +157,39 @@ where
 
     cfg_if! { if #[cfg(not(feature = "ssr"))] {
         let target = options.target;
-        let mut event_listener_options = AddEventListenerOptions::new();
+        let event_listener_options = UseEventListenerOptions::default().passive(true);
-        event_listener_options.passive(true);
 
         let _ = use_event_listener_with_options(
                         target.clone(),
             mousemove,
             mouse_handler,
-            event_listener_options.clone(),
+            event_listener_options,
         );
         let _ = use_event_listener_with_options(
                         target.clone(),
             dragover,
             drag_handler,
-            event_listener_options.clone(),
+            event_listener_options,
         );
         if options.touch && !matches!(options.coord_type, UseMouseCoordType::Movement) {
             let _ = use_event_listener_with_options(
                                 target.clone(),
                 touchstart,
                 touch_handler.clone(),
-                event_listener_options.clone(),
+                event_listener_options,
             );
             let _ = use_event_listener_with_options(
                                 target.clone(),
                 touchmove,
                 touch_handler,
-                event_listener_options.clone(),
+                event_listener_options,
             );
             if options.reset_on_touch_ends {
                 let _ = use_event_listener_with_options(
                                         target,
                     touchend,
                     move |_| reset(),
-                    event_listener_options.clone(),
+                    event_listener_options,
                 );
             }
         }

src/use_mutation_observer.rs

@@ -1,10 +1,14 @@
 use crate::core::ElementsMaybeSignal;
-use crate::use_supported;
+use cfg_if::cfg_if;
+use default_struct_builder::DefaultBuilder;
 use leptos::*;
-use std::cell::RefCell;
-use std::rc::Rc;
 use wasm_bindgen::prelude::*;
-use web_sys::MutationObserverInit;
+
+cfg_if! { if #[cfg(not(feature = "ssr"))] {
+    use crate::use_supported;
+    use std::cell::RefCell;
+    use std::rc::Rc;
+}}
 
 /// Reactive [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
 ///
@@ -19,16 +23,13 @@ use web_sys::MutationObserverInit;
 /// ```
 /// # use leptos::*;
 /// # use leptos::html::Pre;
-/// # use leptos_use::use_mutation_observer_with_options;
+/// # use leptos_use::{use_mutation_observer_with_options, UseMutationObserverOptions};
 /// #
 /// # #[component]
 /// # fn Demo() -> impl IntoView {
 /// let el = create_node_ref::<Pre>();
 /// let (text, set_text) = create_signal("".to_string());
 ///
-/// let mut init = web_sys::MutationObserverInit::new();
-/// init.attributes(true);
-///
 /// use_mutation_observer_with_options(
 ///     el,
 ///     move |mutations, _| {
@@ -36,7 +37,7 @@ use web_sys::MutationObserverInit;
 ///             set_text.update(|text| *text = format!("{text}\n{:?}", mutation.attribute_name()));
 ///         }
 ///     },
-///     init,
+///     UseMutationObserverOptions::default().attributes(true),
 /// );
 ///
 /// view! {
@@ -47,7 +48,7 @@ use web_sys::MutationObserverInit;
 ///
 /// ## Server-Side Rendering
 ///
-/// Please refer to ["Functions with Target Elements"](https://leptos-use.rs/server_side_rendering.html#functions-with-target-elements)
+/// On the server this amounts to a no-op.
 pub fn use_mutation_observer<El, T, F>(
     target: El,
     callback: F,
@@ -57,20 +58,27 @@ where
     T: Into<web_sys::Element> + Clone + 'static,
     F: FnMut(Vec<web_sys::MutationRecord>, web_sys::MutationObserver) + 'static,
 {
-    use_mutation_observer_with_options(target, callback, MutationObserverInit::default())
+    use_mutation_observer_with_options(target, callback, UseMutationObserverOptions::default())
 }
 
-/// Version of [`use_mutation_observer`] that takes a `web_sys::MutationObserverInit`. See [`use_mutation_observer`] for how to use.
+/// Version of [`use_mutation_observer`] that takes a `UseMutationObserverOptions`. See [`use_mutation_observer`] for how to use.
+#[cfg_attr(feature = "ssr", allow(unused_variables, unused_mut))]
 pub fn use_mutation_observer_with_options<El, T, F>(
     target: El,
     mut callback: F,
-    options: web_sys::MutationObserverInit,
+    options: UseMutationObserverOptions,
 ) -> UseMutationObserverReturn<impl Fn() + Clone>
 where
     El: Into<ElementsMaybeSignal<T, web_sys::Element>>,
     T: Into<web_sys::Element> + Clone + 'static,
     F: FnMut(Vec<web_sys::MutationRecord>, web_sys::MutationObserver) + 'static,
 {
+    cfg_if! { if #[cfg(feature = "ssr")] {
+        UseMutationObserverReturn {
+            is_supported: Signal::derive(|| true),
+            stop: || {},
+        }
+    } else {
         let closure_js = Closure::<dyn FnMut(js_sys::Array, web_sys::MutationObserver)>::new(
             move |entries: js_sys::Array, observer| {
                 callback(
@@ -117,7 +125,7 @@ where
 
                         for target in targets.iter().flatten() {
                             let target: web_sys::Element = target.clone().into();
-                        let _ = obs.observe_with_options(&target, &options.clone());
+                            let _ = obs.observe_with_options(&target, &options.clone().into());
                         }
 
                         observer.replace(Some(obs));
@@ -135,6 +143,82 @@ where
         on_cleanup(stop.clone());
 
         UseMutationObserverReturn { is_supported, stop }
+    }}
+}
+
+/// Options for [`use_mutation_observer_with_options`].
+#[derive(DefaultBuilder, Clone, Default)]
+pub struct UseMutationObserverOptions {
+    /// Set to `true` to extend monitoring to the entire subtree of nodes rooted at `target`.
+    /// All of the other properties are then extended to all of the nodes in the subtree
+    /// instead of applying solely to the `target` node. The default value is `false`.
+    subtree: bool,
+
+    /// Set to `true` to monitor the target node (and, if `subtree` is `true`, its descendants)
+    /// for the addition of new child nodes or removal of existing child nodes.
+    /// The default value is `false`.
+    child_list: bool,
+
+    /// Set to `true` to watch for changes to the value of attributes on the node or nodes being
+    /// monitored. The default value is `true` if either of `attribute_filter` or
+    /// `attribute_old_value` is specified, otherwise the default value is `false`.
+    attributes: bool,
+
+    /// An array of specific attribute names to be monitored. If this property isn't included,
+    /// changes to all attributes cause mutation notifications.
+    #[builder(into)]
+    attribute_filter: Option<Vec<String>>,
+
+    /// Set to `true` to record the previous value of any attribute that changes when monitoring
+    /// the node or nodes for attribute changes; See
+    /// [Monitoring attribute values](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe#monitoring_attribute_values)
+    /// for an example of watching for attribute changes and recording values.
+    /// The default value is `false`.
+    attribute_old_value: bool,
+
+    /// Set to `true` to monitor the specified target node
+    /// (and, if `subtree` is `true`, its descendants)
+    /// for changes to the character data contained within the node or nodes.
+    /// The default value is `true` if `character_data_old_value` is specified,
+    /// otherwise the default value is `false`.
+    #[builder(into)]
+    character_data: Option<bool>,
+
+    /// Set to `true` to record the previous value of a node's text whenever the text changes on
+    /// nodes being monitored. The default value is `false`.
+    character_data_old_value: bool,
+}
+
+impl From<UseMutationObserverOptions> for web_sys::MutationObserverInit {
+    fn from(val: UseMutationObserverOptions) -> Self {
+        let UseMutationObserverOptions {
+            subtree,
+            child_list,
+            attributes,
+            attribute_filter,
+            attribute_old_value,
+            character_data,
+            character_data_old_value,
+        } = val;
+
+        let mut init = Self::new();
+
+        init.subtree(subtree)
+            .child_list(child_list)
+            .attributes(attributes)
+            .attribute_old_value(attribute_old_value)
+            .character_data_old_value(character_data_old_value);
+
+        if let Some(attribute_filter) = attribute_filter {
+            let array = js_sys::Array::from_iter(attribute_filter.into_iter().map(JsValue::from));
+            init.attribute_filter(array.unchecked_ref());
+        }
+        if let Some(character_data) = character_data {
+            init.character_data(character_data);
+        }
+
+        init
+    }
 }
 
 /// The return value of [`use_mutation_observer`].

src/use_resize_observer.rs

@@ -1,10 +1,14 @@
 use crate::core::ElementsMaybeSignal;
-use crate::use_supported;
+use cfg_if::cfg_if;
 use default_struct_builder::DefaultBuilder;
 use leptos::*;
-use std::cell::RefCell;
+
-use std::rc::Rc;
+cfg_if! { if #[cfg(not(feature = "ssr"))] {
-use wasm_bindgen::prelude::*;
+    use crate::use_supported;
+    use std::cell::RefCell;
+    use std::rc::Rc;
+    use wasm_bindgen::prelude::*;
+}}
 
 /// Reports changes to the dimensions of an Element's content or the border-box.
 ///
@@ -45,7 +49,7 @@ use wasm_bindgen::prelude::*;
 ///
 /// ## Server-Side Rendering
 ///
-/// Please refer to ["Functions with Target Elements"](https://leptos-use.rs/server_side_rendering.html#functions-with-target-elements)
+/// On the server this amounts to a no-op.
 ///
 /// ## See also
 ///
@@ -63,6 +67,7 @@ where
 }
 
 /// Version of [`use_resize_observer`] that takes a `web_sys::ResizeObserverOptions`. See [`use_resize_observer`] for how to use.
+#[cfg_attr(feature = "ssr", allow(unused_variables, unused_mut))]
 pub fn use_resize_observer_with_options<El, T, F>(
     target: El, // TODO : multiple elements?
     mut callback: F,
@@ -73,6 +78,12 @@ where
     T: Into<web_sys::Element> + Clone + 'static,
     F: FnMut(Vec<web_sys::ResizeObserverEntry>, web_sys::ResizeObserver) + 'static,
 {
+    cfg_if! { if #[cfg(feature = "ssr")] {
+        UseResizeObserverReturn {
+            is_supported: Signal::derive(|| true),
+            stop: || {}
+        }
+    } else {
         let closure_js = Closure::<dyn FnMut(js_sys::Array, web_sys::ResizeObserver)>::new(
             move |entries: js_sys::Array, observer| {
                 callback(
@@ -138,27 +149,24 @@ where
         on_cleanup(stop.clone());
 
         UseResizeObserverReturn { is_supported, stop }
+    }}
 }
 
 /// Options for [`use_resize_observer_with_options`].
-#[derive(DefaultBuilder, Clone)]
+#[derive(DefaultBuilder, Clone, Default)]
 pub struct UseResizeObserverOptions {
     /// The box that is used to determine the dimensions of the target. Defaults to `ContentBox`.
-    pub box_: web_sys::ResizeObserverBoxOptions,
+    #[builder(into)]
-}
+    pub box_: Option<web_sys::ResizeObserverBoxOptions>,
-
-impl Default for UseResizeObserverOptions {
-    fn default() -> Self {
-        Self {
-            box_: web_sys::ResizeObserverBoxOptions::ContentBox,
-        }
-    }
 }
 
 impl From<UseResizeObserverOptions> for web_sys::ResizeObserverOptions {
     fn from(val: UseResizeObserverOptions) -> Self {
         let mut options = web_sys::ResizeObserverOptions::new();
-        options.box_(val.box_);
+        options.box_(
+            val.box_
+                .unwrap_or(web_sys::ResizeObserverBoxOptions::ContentBox),
+        );
         options
     }
 }

src/use_scroll.rs

@@ -1,13 +1,25 @@
 use crate::core::ElementMaybeSignal;
-use crate::use_event_listener::use_event_listener_with_options;
+use crate::UseEventListenerOptions;
-use crate::{use_debounce_fn_with_arg, use_throttle_fn_with_arg_and_options, ThrottleOptions};
 use cfg_if::cfg_if;
 use default_struct_builder::DefaultBuilder;
-use leptos::ev::scrollend;
 use leptos::*;
 use std::rc::Rc;
+
+cfg_if! { if #[cfg(not(feature = "ssr"))] {
+use crate::use_event_listener::use_event_listener_with_options;
+use crate::{
+    use_debounce_fn_with_arg, use_throttle_fn_with_arg_and_options, ThrottleOptions,
+};
+use leptos::ev::scrollend;
 use wasm_bindgen::JsCast;
 
+/// We have to check if the scroll amount is close enough to some threshold in order to
+/// more accurately calculate arrivedState. This is because scrollTop/scrollLeft are non-rounded
+/// numbers, while scrollHeight/scrollWidth and clientHeight/clientWidth are rounded.
+/// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#determine_if_an_element_has_been_totally_scrolled
+const ARRIVED_STATE_THRESHOLD_PIXELS: f64 = 1.0;
+}}
+
 /// Reactive scroll position and state.
 ///
 /// ## Demo
@@ -172,7 +184,7 @@ where
 }
 
 /// Version of [`use_scroll`] with options. See [`use_scroll`] for how to use.
-#[allow(unused_variables)]
+#[cfg_attr(feature = "ssr", allow(unused_variables))]
 pub fn use_scroll_with_options<El, T>(element: El, options: UseScrollOptions) -> UseScrollReturn
 where
     El: Clone,
@@ -377,7 +389,7 @@ where
                 target,
                 ev::scroll,
                 handler,
-                options.event_listener_options.clone().unwrap_or_default(),
+                options.event_listener_options,
             );
         } else {
             let _ = use_event_listener_with_options::<
@@ -389,7 +401,7 @@ where
                 target,
                 ev::scroll,
                 on_scroll_handler,
-                options.event_listener_options.clone().unwrap_or_default(),
+                options.event_listener_options,
             );
         }
 
@@ -402,7 +414,7 @@ where
             target,
             scrollend,
             on_scroll_end,
-            options.event_listener_options.unwrap_or_default(),
+            options.event_listener_options,
         );
 
         let measure = Box::new(move || {
@@ -426,15 +438,10 @@ where
     }
 }
 
-/// We have to check if the scroll amount is close enough to some threshold in order to
-/// more accurately calculate arrivedState. This is because scrollTop/scrollLeft are non-rounded
-/// numbers, while scrollHeight/scrollWidth and clientHeight/clientWidth are rounded.
-/// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#determine_if_an_element_has_been_totally_scrolled
-const ARRIVED_STATE_THRESHOLD_PIXELS: f64 = 1.0;
-
 /// Options for [`use_scroll`].
 #[derive(DefaultBuilder)]
 /// Options for [`use_scroll_with_options`].
+#[cfg_attr(feature = "ssr", allow(dead_code))]
 pub struct UseScrollOptions {
     /// Throttle time in milliseconds for the scroll events. Defaults to 0 (disabled).
     throttle: f64,
@@ -453,8 +460,7 @@ pub struct UseScrollOptions {
     on_stop: Rc<dyn Fn(web_sys::Event)>,
 
     /// Options passed to the `addEventListener("scroll", ...)` call
-    #[builder(into)]
+    event_listener_options: UseEventListenerOptions,
-    event_listener_options: Option<web_sys::AddEventListenerOptions>,
 
     /// When changing the `x` or `y` signals this specifies the scroll behaviour.
     /// Can be `Auto` (= not smooth) or `Smooth`. Defaults to `Auto`.

src/use_window.rs

@@ -1,8 +1,10 @@
 use crate::{use_document, UseDocument};
 use cfg_if::cfg_if;
-use leptos::*;
 use std::ops::Deref;
 
+#[cfg(not(feature = "ssr"))]
+use leptos::*;
+
 /// SSR safe `window()`.
 /// This returns just a new-type wrapper around `Option<Window>`.
 /// Calling this amounts to `None` on the server and `Some(Window)` on the client.

src/use_window_scroll.rs

@@ -1,10 +1,9 @@
 #![cfg_attr(feature = "ssr", allow(unused_variables, unused_imports))]
 
-use crate::use_event_listener_with_options;
+use crate::{use_event_listener_with_options, use_window, UseEventListenerOptions};
 use cfg_if::cfg_if;
 use leptos::ev::scroll;
 use leptos::*;
-use web_sys::AddEventListenerOptions;
 
 /// Reactive window scroll.
 ///
@@ -40,21 +39,17 @@ pub fn use_window_scroll() -> (Signal<f64>, Signal<f64>) {
     let (x, set_x) = create_signal(initial_x);
     let (y, set_y) = create_signal(initial_y);
 
-    cfg_if! { if #[cfg(not(feature = "ssr"))] {
-        let mut options = AddEventListenerOptions::new();
-        options.capture(false);
-        options.passive(true);
-
     let _ = use_event_listener_with_options(
-                        window(),
+        use_window(),
         scroll,
         move |_| {
             set_x.set(window().scroll_x().unwrap_or_default());
             set_y.set(window().scroll_y().unwrap_or_default());
         },
-            options,
+        UseEventListenerOptions::default()
+            .capture(false)
+            .passive(true),
     );
-    }}
 
     (x.into(), y.into())
 }