diff --git a/.idea/leptos-use.iml b/.idea/leptos-use.iml index 224ebd7..2db780b 100644 --- a/.idea/leptos-use.iml +++ b/.idea/leptos-use.iml @@ -61,6 +61,9 @@ + + + @@ -93,4 +96,4 @@ - + \ No newline at end of file diff --git a/examples/rust-toolchain.toml b/examples/rust-toolchain.toml new file mode 100644 index 0000000..5d56faf --- /dev/null +++ b/examples/rust-toolchain.toml @@ -0,0 +1,2 @@ +[toolchain] +channel = "nightly" diff --git a/src/core/element_maybe_signal.rs b/src/core/element_maybe_signal.rs index 47c08e6..7a047e5 100644 --- a/src/core/element_maybe_signal.rs +++ b/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 ///////////////////////////////////////// + +macro_rules! impl_from_signal_html_element { + ($signal:ty, $ty:ty) => { + impl From<$signal> for ElementMaybeSignal<$ty, $ty> + where + HtmlEl: ElementDescriptor + std::ops::Deref + 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>, web_sys::EventTarget); +impl_from_signal_html_element!(ReadSignal>, web_sys::EventTarget); +impl_from_signal_html_element!(RwSignal>, web_sys::EventTarget); +impl_from_signal_html_element!(Memo>, web_sys::EventTarget); + +impl_from_signal_html_element!(Signal>, web_sys::Element); +impl_from_signal_html_element!(ReadSignal>, web_sys::Element); +impl_from_signal_html_element!(RwSignal>, web_sys::Element); +impl_from_signal_html_element!(Memo>, web_sys::Element); + +// From Signal> ///////////////////////////////////////// + +macro_rules! impl_from_signal_html_element { + ($signal:ty, $ty:ty) => { + impl From<$signal> for ElementMaybeSignal<$ty, $ty> + where + HtmlEl: ElementDescriptor + std::ops::Deref + 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>>, web_sys::EventTarget); +impl_from_signal_html_element!( + ReadSignal>>, + web_sys::EventTarget +); +impl_from_signal_html_element!(RwSignal>>, web_sys::EventTarget); +impl_from_signal_html_element!(Memo>>, web_sys::EventTarget); + +impl_from_signal_html_element!(Signal>>, web_sys::Element); +impl_from_signal_html_element!(ReadSignal>>, web_sys::Element); +impl_from_signal_html_element!(RwSignal>>, web_sys::Element); +impl_from_signal_html_element!(Memo>>, web_sys::Element); diff --git a/src/use_element_size.rs b/src/use_element_size.rs index 5d881e1..aa82d24 100644 --- a/src/use_element_size.rs +++ b/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(), diff --git a/src/use_resize_observer.rs b/src/use_resize_observer.rs index 07e5dd4..ce78e0d 100644 --- a/src/use_resize_observer.rs +++ b/src/use_resize_observer.rs @@ -75,12 +75,16 @@ where T: Into + Clone + 'static, F: FnMut(Vec, 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::::new( move |entries: js_sys::Array, observer| { callback( @@ -121,20 +125,20 @@ where move |targets, _, _| { cleanup(); - if is_supported.get() && !targets.is_empty() { - let obs = - web_sys::ResizeObserver::new(closure_js.clone().as_ref().unchecked_ref()) - .expect("failed to create ResizeObserver"); + if is_supported.get_untracked() && !targets.is_empty() { + let obs = web_sys::ResizeObserver::new( + closure_js.clone().as_ref().unchecked_ref(), + ) + .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`].