RustForWeb · DanielleHuisman · Dec 7, 2024 · Dec 7, 2024
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/Cargo.toml b/Cargo.toml
@@ -21,9 +21,11 @@ console_error_panic_hook = "0.1.7"
 console_log = "1.0.0"
 dyn_derive = "0.3.4"
 dyn_std = "0.3.3"
-leptos = "0.6.14"
-leptos_router = "0.6.14"
+leptos = "0.7.0"
+leptos_router = "0.7.0"
+leptos-node-ref = "0.0.3"
 log = "0.4.22"
+send_wrapper = "0.6.0"
 serde = { version = "1.0.209", features = ["derive"] }
 serde_json = "1.0.127"
 wasm-bindgen = "0.2.93"
@@ -49,6 +51,7 @@ features = [
     "IntersectionObserverEntry",
     "IntersectionObserverInit",
     "Node",
+    "Range",
     "ResizeObserver",
     "ResizeObserverEntry",
     "Selection",

diff --git a/book-examples/Cargo.toml b/book-examples/Cargo.toml
@@ -15,7 +15,9 @@ console_log.workspace = true
 convert_case = "0.6.0"
 floating-ui-leptos = { path = "../packages/leptos" }
 leptos = { workspace = true, features = ["csr"] }
+leptos-node-ref.workspace = true
 log.workspace = true
+send_wrapper.workspace = true
 tailwind_fuse = "0.3.1"
 
 [features]

diff --git a/book-examples/src/app.rs b/book-examples/src/app.rs
@@ -1,36 +1,48 @@
-use leptos::*;
+use leptos::prelude::*;
 
 #[component]
 pub fn App() -> impl IntoView {
-    let mut views: Vec<View> = vec![];
+    let mut views: Vec<AnyView> = vec![];
 
     #[cfg(feature = "placement")]
     {
         use crate::positioning::placement::PlacementDemo;
-        views.push(view! {
-            <PlacementDemo />
-        });
+        views.push(
+            view! {
+                <PlacementDemo />
+            }
+            .into_any(),
+        );
     }
     #[cfg(feature = "shift")]
     {
         use crate::positioning::shift::ShiftDemo;
-        views.push(view! {
-            <ShiftDemo />
-        });
+        views.push(
+            view! {
+                <ShiftDemo />
+            }
+            .into_any(),
+        );
     }
     #[cfg(feature = "flip")]
     {
         use crate::positioning::flip::FlipDemo;
-        views.push(view! {
-            <FlipDemo />
-        });
+        views.push(
+            view! {
+                <FlipDemo />
+            }
+            .into_any(),
+        );
     }
     #[cfg(feature = "size")]
     {
         use crate::positioning::size::SizeDemo;
-        views.push(view! {
-            <SizeDemo />
-        });
+        views.push(
+            view! {
+                <SizeDemo />
+            }
+            .into_any(),
+        );
     }
 
     views.into_view()

diff --git a/book-examples/src/components/chrome.rs b/book-examples/src/components/chrome.rs
@@ -1,7 +1,7 @@
 // TODO: remove
 #![allow(unused)]
 
-use leptos::{html::Div, *};
+use leptos::{context::Provider, html::Div, prelude::*};
 use tailwind_fuse::tw_merge;
 
 #[derive(Clone, Copy, Debug, PartialEq)]
@@ -17,13 +17,13 @@ pub struct ChromeContext(pub NodeRef<Div>);
 
 #[component]
 pub fn Chrome(
-    #[prop(default = false.into(), into)] center: MaybeSignal<bool>,
-    #[prop(default = Scrollable::None.into(), into)] scrollable: MaybeSignal<Scrollable>,
-    #[prop(default = true.into(), into)] relative: MaybeSignal<bool>,
+    #[prop(default = false.into(), into)] center: Signal<bool>,
+    #[prop(default = Scrollable::None.into(), into)] scrollable: Signal<Scrollable>,
+    #[prop(default = true.into(), into)] relative: Signal<bool>,
     #[prop(into, optional)] label: MaybeProp<String>,
-    #[prop(default = 305.into(), into)] scroll_height: MaybeSignal<isize>,
-    #[prop(default = true.into(), into)] shadow: MaybeSignal<bool>,
-    #[prop(default = false.into(), into)] tall: MaybeSignal<bool>,
+    #[prop(default = 305.into(), into)] scroll_height: Signal<isize>,
+    #[prop(default = true.into(), into)] shadow: Signal<bool>,
+    #[prop(default = false.into(), into)] tall: Signal<bool>,
     children: Children,
 ) -> impl IntoView {
     let scrollable_ref: NodeRef<Div> = NodeRef::new();
@@ -57,11 +57,7 @@ pub fn Chrome(
             )}
         >
             <div class="bg-gray-75 dark:bg-gray-600/60 dark:text-white">
-            <div class={{
-                let label = label.clone();
-
-                move || tw_merge!("absolute mx-4 flex h-12 items-center gap-2", label.get().map(|_| "sm:flex"))}
-            }>
+            <div class={move || tw_merge!("absolute mx-4 flex h-12 items-center gap-2", label.get().map(|_| "sm:flex"))}>
                 <div
                     class="h-3 w-3 rounded-full"
                     style:background="#ec695e"
@@ -94,9 +90,10 @@ pub fn Chrome(
                     <Show when=move || is_scrollable.get()>
                         <div
                             class={scrollable_x.get().then_some("w-[180vw] md:w-[75rem] lg:w-[90rem]")}
-                            style:height={match scrollable_y.get() {
-                                true => format!("{}px", scroll_height.get()),
-                                false => "1px".into(),
+                            style:height={if scrollable_y.get() {
+                                format!("{}px", scroll_height.get())
+                            } else {
+                                "1px".to_owned()
                             }}
                         />
                     </Show>
@@ -106,9 +103,10 @@ pub fn Chrome(
                     <Show when=move || is_scrollable.get()>
                         <div
                             class={scrollable_x.get().then_some("w-[180vw] md:w-[75rem] lg:w-[90rem]")}
-                            style:height={match scrollable_y.get() {
-                                true => format!("{}px", scroll_height.get()),
-                                false => "1px".into(),
+                            style:height={if scrollable_y.get() {
+                                format!("{}px", scroll_height.get())
+                            } else {
+                                "1px".to_owned()
                             }}
                         />
                     </Show>

diff --git a/book-examples/src/components/floating.rs b/book-examples/src/components/floating.rs
@@ -1,37 +1,35 @@
 use floating_ui_leptos::{
-    use_floating, IntoReference, MiddlewareVec, Placement, Strategy, UseFloatingOptions,
-    UseFloatingReturn,
-};
-use leptos::{
-    html::{AnyElement, Div},
-    *,
+    use_floating, MiddlewareVec, Placement, Strategy, UseFloatingOptions, UseFloatingReturn,
 };
+use leptos::prelude::*;
+use leptos_node_ref::AnyNodeRef;
+use send_wrapper::SendWrapper;
 use tailwind_fuse::tw_merge;
 
 #[component]
 pub fn Floating<CF, CIV, RF, RIV>(
     #[prop(into, optional)] class: MaybeProp<String>,
     #[prop(into, optional)] strategy: MaybeProp<Strategy>,
     #[prop(into, optional)] placement: MaybeProp<Placement>,
-    #[prop(into, optional)] middleware: MaybeProp<MiddlewareVec>,
-    #[prop(default = false.into(), into)] arrow: MaybeSignal<bool>,
+    #[prop(into, optional)] middleware: MaybeProp<SendWrapper<MiddlewareVec>>,
+    #[prop(default = false.into(), into)] arrow: Signal<bool>,
     content: CF,
     reference: RF,
 ) -> impl IntoView
 where
     CF: Fn() -> CIV + 'static,
     CIV: IntoView + 'static,
-    RF: Fn(NodeRef<AnyElement>) -> RIV + 'static,
+    RF: Fn(AnyNodeRef) -> RIV + 'static,
     RIV: IntoView + 'static,
 {
-    let floating_ref: NodeRef<Div> = NodeRef::new();
-    let reference_ref: NodeRef<AnyElement> = NodeRef::new();
-    let arrow_ref: NodeRef<Div> = NodeRef::new();
+    let floating_ref = AnyNodeRef::new();
+    let reference_ref = AnyNodeRef::new();
+    let arrow_ref = AnyNodeRef::new();
 
     let UseFloatingReturn {
         floating_styles, ..
     } = use_floating(
-        reference_ref.into_reference(),
+        reference_ref,
         floating_ref,
         UseFloatingOptions::default()
             .while_elements_mounted_auto_update()
@@ -57,8 +55,8 @@ where
             style:position=move || floating_styles.get().style_position()
             style:top=move || floating_styles.get().style_top()
             style:left=move || floating_styles.get().style_left()
-            style:transform=move || floating_styles.get().style_transform()
-            style:will-change=move || floating_styles.get().style_will_change()
+            style:transform=move || floating_styles.get().style_transform().unwrap_or_default()
+            style:will-change=move || floating_styles.get().style_will_change().unwrap_or_default()
         >
             <div class="px-2 py-2">{content()}</div>
             <Show when=move || arrow.get()>

diff --git a/book-examples/src/components/grid_item.rs b/book-examples/src/components/grid_item.rs
@@ -1,13 +1,13 @@
-use leptos::*;
+use leptos::prelude::*;
 use tailwind_fuse::tw_merge;
 
 #[component]
 pub fn GridItem<F, IV>(
-    #[prop(into)] title: MaybeSignal<String>,
-    #[prop(into)] description: MaybeSignal<String>,
+    #[prop(into)] title: Signal<String>,
+    #[prop(into)] description: Signal<String>,
     chrome: F,
-    // #[prop(into)] demo_link: MaybeSignal<String>,
-    #[prop(default = false.into(), into)] hidden: MaybeSignal<bool>,
+    // #[prop(into)] demo_link: Signal<String>,
+    #[prop(default = false.into(), into)] hidden: Signal<bool>,
 ) -> impl IntoView
 where
     F: Fn() -> IV + 'static,

diff --git a/book-examples/src/components/reference.rs b/book-examples/src/components/reference.rs
@@ -1,13 +1,15 @@
-use leptos::{html::AnyElement, *};
+use leptos::prelude::*;
+use leptos_node_ref::AnyNodeRef;
 use tailwind_fuse::tw_merge;
 
 #[component]
 pub fn Reference(
     #[prop(into, optional)] class: MaybeProp<String>,
-    #[prop(into, optional)] node_ref: NodeRef<AnyElement>,
+    #[prop(into, optional)] node_ref: AnyNodeRef,
 ) -> impl IntoView {
     view! {
         <button
+            node_ref=node_ref
             class={move || {
                 let class = class.get();
                 tw_merge!(
@@ -20,6 +22,4 @@ pub fn Reference(
             Reference
         </button>
     }
-    .into_any()
-    .node_ref(node_ref)
 }
diff --git a/book-examples/src/main.rs b/book-examples/src/main.rs
@@ -3,11 +3,13 @@ mod components;
 mod positioning;
 mod utils;
 
+use leptos::prelude::*;
+
 use crate::app::App;
 
 pub fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
 
-    leptos::mount_to_body(App);
+    mount_to_body(App);
 }
diff --git a/book-examples/src/positioning/flip.rs b/book-examples/src/positioning/flip.rs
@@ -2,7 +2,9 @@ use floating_ui_leptos::{
     DetectOverflowOptions, Flip, FlipOptions, MiddlewareVec, Offset, OffsetOptions, Placement,
     RootBoundary,
 };
-use leptos::{html::Div, *};
+use leptos::prelude::*;
+use leptos_node_ref::AnyNodeRef;
+use send_wrapper::SendWrapper;
 
 use crate::{
     components::{Chrome, Floating, GridItem, Reference, Scrollable},
@@ -11,7 +13,7 @@ use crate::{
 
 #[component]
 pub fn FlipDemo() -> impl IntoView {
-    let boundary_ref: NodeRef<Div> = NodeRef::new();
+    let boundary_ref = AnyNodeRef::new();
 
     Effect::new(move |_| {
         if let Some(boundary) = boundary_ref.get() {
@@ -27,7 +29,7 @@ pub fn FlipDemo() -> impl IntoView {
             title="Flip"
             description="Changes the placement of your floating element to keep it in view."
             chrome=move || view! {
-                <div ref={boundary_ref} class="relative overflow-hidden">
+                <div node_ref={boundary_ref} class="relative overflow-hidden">
                     <Chrome
                         label="Scroll down"
                         scrollable=Scrollable::Y
@@ -44,7 +46,7 @@ pub fn FlipDemo() -> impl IntoView {
                                     ))),
                                 ];
 
-                                middleware
+                                SendWrapper::new(middleware)
                             }
                             content=move || view! {
                                 <span class="text-sm font-bold">