some more ElementMaybeSignal conversions and some minor code improvements

.idea/leptos-use.iml

@@ -61,6 +61,9 @@
       <sourceFolder url="file://$MODULE_DIR$/examples/use_service_worker/src" isTestSource="false" />
       <sourceFolder url="file://$MODULE_DIR$/examples/use_infinite_scroll/src" isTestSource="false" />
       <sourceFolder url="file://$MODULE_DIR$/examples/use_web_notification/src" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/examples/use_device_pixel_ratio/src" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/examples/use_element_bounding/src" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/examples/use_mouse_in_element/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" />
@@ -93,4 +96,4 @@
     <orderEntry type="sourceFolder" forTests="false" />
     <orderEntry type="library" name="Python 3.9 interpreter library" level="application" />
   </component>
-</module>
+</module>

examples/rust-toolchain.toml

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

src/core/element_maybe_signal.rs

@@ -307,3 +307,63 @@ macro_rules! impl_from_html_element {
 
 impl_from_html_element!(web_sys::EventTarget);
 impl_from_html_element!(web_sys::Element);
+
+// From Signal<leptos::html::HTMLElement> /////////////////////////////////////////
+
+macro_rules! impl_from_signal_html_element {
+    ($signal:ty, $ty:ty) => {
+        impl<HtmlEl> From<$signal> for ElementMaybeSignal<$ty, $ty>
+        where
+            HtmlEl: ElementDescriptor + std::ops::Deref<Target = $ty> + Clone,
+        {
+            fn from(value: $signal) -> Self {
+                Self::Dynamic(Signal::derive(move || {
+                    let value = value.get();
+                    let el: &$ty = value.deref();
+                    Some(el.clone())
+                }))
+            }
+        }
+    };
+}
+
+impl_from_signal_html_element!(Signal<HtmlElement<HtmlEl>>, web_sys::EventTarget);
+impl_from_signal_html_element!(ReadSignal<HtmlElement<HtmlEl>>, web_sys::EventTarget);
+impl_from_signal_html_element!(RwSignal<HtmlElement<HtmlEl>>, web_sys::EventTarget);
+impl_from_signal_html_element!(Memo<HtmlElement<HtmlEl>>, web_sys::EventTarget);
+
+impl_from_signal_html_element!(Signal<HtmlElement<HtmlEl>>, web_sys::Element);
+impl_from_signal_html_element!(ReadSignal<HtmlElement<HtmlEl>>, web_sys::Element);
+impl_from_signal_html_element!(RwSignal<HtmlElement<HtmlEl>>, web_sys::Element);
+impl_from_signal_html_element!(Memo<HtmlElement<HtmlEl>>, web_sys::Element);
+
+// From Signal<Option<leptos::html::HTMLElement>> /////////////////////////////////////////
+
+macro_rules! impl_from_signal_html_element {
+    ($signal:ty, $ty:ty) => {
+        impl<HtmlEl> From<$signal> for ElementMaybeSignal<$ty, $ty>
+        where
+            HtmlEl: ElementDescriptor + std::ops::Deref<Target = $ty> + Clone,
+        {
+            fn from(value: $signal) -> Self {
+                Self::Dynamic(Signal::derive(move || {
+                    let el: Option<$ty> = value.get().map(|el| el.deref().clone());
+                    el
+                }))
+            }
+        }
+    };
+}
+
+impl_from_signal_html_element!(Signal<Option<HtmlElement<HtmlEl>>>, web_sys::EventTarget);
+impl_from_signal_html_element!(
+    ReadSignal<Option<HtmlElement<HtmlEl>>>,
+    web_sys::EventTarget
+);
+impl_from_signal_html_element!(RwSignal<Option<HtmlElement<HtmlEl>>>, web_sys::EventTarget);
+impl_from_signal_html_element!(Memo<Option<HtmlElement<HtmlEl>>>, web_sys::EventTarget);
+
+impl_from_signal_html_element!(Signal<Option<HtmlElement<HtmlEl>>>, web_sys::Element);
+impl_from_signal_html_element!(ReadSignal<Option<HtmlElement<HtmlEl>>>, web_sys::Element);
+impl_from_signal_html_element!(RwSignal<Option<HtmlElement<HtmlEl>>>, web_sys::Element);
+impl_from_signal_html_element!(Memo<Option<HtmlElement<HtmlEl>>>, web_sys::Element);

src/use_element_size.rs

@@ -70,8 +70,8 @@ where
     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"))] {
+    #[cfg(not(feature = "ssr"))]
-
+    {
         let box_ = box_.unwrap_or(web_sys::ResizeObserverBoxOptions::ContentBox);
 
         let target = target.into();
@@ -126,7 +126,10 @@ where
                                 );
                             }
                         }
-                    } else if !box_size.is_null() && !box_size.is_undefined() && box_size.length() > 0 {
+                    } else if !box_size.is_null()
+                        && !box_size.is_undefined()
+                        && box_size.length() > 0
+                    {
                         let format_box_size = if box_size.is_array() {
                             box_size.to_vec()
                         } else {
@@ -162,7 +165,7 @@ where
             },
             WatchOptions::default().immediate(false),
         );
-    }}
+    }
 
     UseElementSizeReturn {
         width: width.into(),

src/use_resize_observer.rs

@@ -75,12 +75,16 @@ where
     T: Into<web_sys::Element> + Clone + 'static,
     F: FnMut(Vec<web_sys::ResizeObserverEntry>, web_sys::ResizeObserver) + 'static,
 {
-    cfg_if! { if #[cfg(feature = "ssr")] {
+    #[cfg(feature = "ssr")]
+    {
         UseResizeObserverReturn {
             is_supported: Signal::derive(|| true),
-            stop: || {}
+            stop: || {},
         }
-    } else {
+    }
+
+    #[cfg(not(feature = "ssr"))]
+    {
         let closure_js = Closure::<dyn FnMut(js_sys::Array, web_sys::ResizeObserver)>::new(
             move |entries: js_sys::Array, observer| {
                 callback(
@@ -121,20 +125,20 @@ where
                 move |targets, _, _| {
                     cleanup();
 
-                    if is_supported.get() && !targets.is_empty() {
+                    if is_supported.get_untracked() && !targets.is_empty() {
-                        let obs =
+                        let obs = web_sys::ResizeObserver::new(
-                            web_sys::ResizeObserver::new(closure_js.clone().as_ref().unchecked_ref())
+                            closure_js.clone().as_ref().unchecked_ref(),
-                                .expect("failed to create ResizeObserver");
+                        )
+                        .expect("failed to create ResizeObserver");
 
                         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));
                     }
                 },
-                false,
+                true,
             )
         };
 
@@ -146,7 +150,7 @@ where
         on_cleanup(stop.clone());
 
         UseResizeObserverReturn { is_supported, stop }
-    }}
+    }
 }
 
 /// Options for [`use_resize_observer_with_options`].