made ElementMaybeSignal's from string conversion SSR safe.

Fixes #41

CHANGELOG.md

@@ -3,6 +3,13 @@
 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).
 
+## [0.8.1] - 2023-10-28
+
+### Fixes 🍕
+
+- Using strings for `ElementMaybeSignal` and `ElementsMaybeSignal` is now SSR safe.
+  - This fixes specifically `use_color_mode` to work on the server.
+
 ## [0.8.0] - 2023-10-24
 
 ### New Functions 🚀

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "leptos-use"
-version = "0.8.0"
+version = "0.8.1"
 edition = "2021"
 authors = ["Marc-Stefan Cassola"]
 categories = ["gui", "web-programming"]

examples/ssr/src/app.rs

@@ -5,8 +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, use_window,
+    use_color_mode, use_debounce_fn, use_event_listener, use_intl_number_format, use_window,
-    UseIntlNumberFormatOptions,
+    ColorMode, UseColorModeReturn, UseIntlNumberFormatOptions,
 };
 
 #[component]
@@ -63,11 +63,17 @@ fn HomePage() -> impl IntoView {
     );
     debounced_fn();
 
+    let UseColorModeReturn { mode, set_mode, .. } = use_color_mode();
+
     view! {
         <h1>Leptos-Use SSR Example</h1>
         <button on:click=on_click>Click Me: {count}</button>
         <p>Locale zh-Hans-CN-u-nu-hanidec: {zh_count}</p>
         <p>Press any key: {key}</p>
         <p>Debounced called: {debounce_value}</p>
+        <p>Color mode: {move || format!("{:?}", mode.get())}</p>
+        <button on:click=move |_| set_mode.set(ColorMode::Light)>Change to Light</button>
+        <button on:click=move |_| set_mode.set(ColorMode::Dark)>Change to Dark</button>
+        <button on:click=move |_| set_mode.set(ColorMode::Auto)>Change to Auto</button>
     }
 }

examples/ssr/style/main.scss

@@ -2,3 +2,8 @@ body {
   font-family: sans-serif;
   text-align: center;
 }
+
+.dark {
+  background-color: black;
+  color: white;
+}

src/core/element_maybe_signal.rs

@@ -1,4 +1,5 @@
 use crate::{UseDocument, UseWindow};
+use cfg_if::cfg_if;
 use leptos::html::ElementDescriptor;
 use leptos::*;
 use std::marker::PhantomData;
@@ -177,7 +178,11 @@ where
     E: From<web_sys::Element> + 'static,
 {
     fn from(target: &'a str) -> Self {
+        cfg_if! { if #[cfg(feature = "ssr")] {
+            Self::Static(None)
+        } else {
             Self::Static(document().query_selector(target).unwrap_or_default())
+        }}
     }
 }
 
@@ -186,7 +191,7 @@ where
     E: From<web_sys::Element> + 'static,
 {
     fn from(target: String) -> Self {
-        Self::Static(document().query_selector(&target).unwrap_or_default())
+        Self::from(target.as_str())
     }
 }
 
@@ -195,10 +200,14 @@ where
     E: From<web_sys::Element> + 'static,
 {
     fn from(signal: Signal<String>) -> Self {
+        cfg_if! { if #[cfg(feature = "ssr")] {
+            Self::Dynamic(Signal::derive(|| None))
+        } else {
             Self::Dynamic(
                 create_memo(move |_| document().query_selector(&signal.get()).unwrap_or_default())
                     .into(),
             )
+        }}
     }
 }
 

src/core/elements_maybe_signal.rs

@@ -1,5 +1,6 @@
 use crate::core::ElementMaybeSignal;
 use crate::{UseDocument, UseWindow};
+use cfg_if::cfg_if;
 use leptos::html::ElementDescriptor;
 use leptos::*;
 use std::marker::PhantomData;
@@ -178,6 +179,7 @@ where
     E: From<web_sys::Node> + 'static,
 {
     fn from(target: &'a str) -> Self {
+        cfg_if! { if #[cfg(feature = "ssr")] {
             if let Ok(node_list) = document().query_selector_all(target) {
                 let mut list = Vec::with_capacity(node_list.length() as usize);
                 for i in 0..node_list.length() {
@@ -189,6 +191,19 @@ where
             } else {
                 Self::Static(vec![])
             }
+        } else {
+            let _ = target;
+            Self::Static(vec![])
+        }}
+    }
+}
+
+impl<E> From<String> for ElementsMaybeSignal<web_sys::Node, E>
+where
+    E: From<web_sys::Node> + 'static,
+{
+    fn from(target: String) -> Self {
+        Self::from(target.as_str())
     }
 }
 
@@ -197,6 +212,7 @@ where
     E: From<web_sys::Node> + 'static,
 {
     fn from(signal: Signal<String>) -> Self {
+        cfg_if! { if #[cfg(feature = "ssr")] {
             Self::Dynamic(
                 create_memo(move |_| {
                     if let Ok(node_list) = document().query_selector_all(&signal.get()) {
@@ -212,6 +228,10 @@ where
                 })
                 .into(),
             )
+        } else {
+            let _ = signal;
+            Self::Dynamic(Signal::derive(Vec::new))
+        }}
     }
 }
 

src/on_click_outside.rs

@@ -125,7 +125,7 @@ where
             })
         };
 
-        let target = (target).into();
+        let target = target.into();
 
         let listener = {
             let should_listen = Rc::clone(&should_listen);

src/use_color_mode.rs

@@ -160,7 +160,7 @@ where
         }
     });
 
-    let target = (target).into();
+    let target = target.into();
 
     let update_html_attrs = {
         move |target: ElementMaybeSignal<T, web_sys::Element>,

src/use_css_var.rs

@@ -105,7 +105,7 @@ where
     let (variable, set_variable) = create_signal(initial_value.clone());
 
     cfg_if! { if #[cfg(not(feature = "ssr"))] {
-        let el_signal = (target).into();
+        let el_signal = target.into();
         let prop = prop.into();
 
         let update_css_var = {

src/use_draggable.rs

@@ -87,7 +87,7 @@ where
         ..
     } = options;
 
-    let target = (target).into();
+    let target = target.into();
 
     let dragging_handle = if let Some(handle) = handle {
         let handle = (handle).into();

src/use_event_listener.rs

@@ -132,7 +132,7 @@ where
 
         let event_name = event.name();
 
-        let signal = (target).into();
+        let signal = target.into();
 
         let prev_element = Rc::new(RefCell::new(None::<web_sys::EventTarget>));
 

src/use_intersection_observer.rs

@@ -124,7 +124,7 @@ where
             }
         };
 
-        let targets = (target).into();
+        let targets = target.into();
         let root = root.map(|root| (root).into());
 
         let stop_watch = {

src/use_mutation_observer.rs

@@ -109,7 +109,7 @@ where
             }
         };
 
-        let targets = (target).into();
+        let targets = target.into();
 
         let stop_watch = {
             let cleanup = cleanup.clone();

src/use_resize_observer.rs

@@ -114,7 +114,7 @@ where
             }
         };
 
-        let targets = (target).into();
+        let targets = target.into();
 
         let stop_watch = {
             let cleanup = cleanup.clone();