Implement use-rect for leptos

Cargo.toml

@@ -13,6 +13,7 @@ members = [
     "book-examples/*/*",
     "packages/colors",
     "packages/icons/*",
+    "packages/primitives/core/observe",
     "packages/primitives/leptos/accessible-icon",
     "packages/primitives/leptos/arrow",
     "packages/primitives/leptos/aspect-ratio",
@@ -28,6 +29,7 @@ members = [
     "packages/primitives/leptos/use-controllable-state",
     "packages/primitives/leptos/use-escape-keydown",
     "packages/primitives/leptos/use-previous",
+    "packages/primitives/leptos/use-rect",
     "packages/primitives/leptos/use-size",
     "packages/primitives/leptos/visually-hidden",
     "packages/primitives/yew/*",
@@ -78,8 +80,10 @@ radix-leptos-separator = { path = "./packages/primitives/leptos/separator", vers
 radix-leptos-visually-hidden = { path = "./packages/primitives/leptos/visually-hidden", version = "0.0.2" }
 radix-leptos-use-controllable-state = { path = "./packages/primitives/leptos/use-controllable-state", version = "0.0.2" }
 radix-leptos-use-previous = { path = "./packages/primitives/leptos/use-previous", version = "0.0.2" }
+radix-leptos-use-rect = { path = "./packages/primitives/leptos/use-rect", version = "0.0.2" }
 radix-leptos-use-size = { path = "./packages/primitives/leptos/use-size", version = "0.0.2" }
 radix-number = { path = "./packages/primitives/core/number", version = "0.0.2" }
+radix-observe = { path = "./packages/primitives/core/observe", version = "0.0.2" }
 radix-yew-arrow = { path = "./packages/primitives/yew/arrow", version = "0.0.2" }
 radix-yew-aspect-ratio = { path = "./packages/primitives/yew/aspect-ratio", version = "0.0.2" }
 radix-yew-avatar = { path = "./packages/primitives/yew/avatar", version = "0.0.2" }

packages/primitives/core/observe/Cargo.toml

@@ -0,0 +1,21 @@
+[package]
+name = "radix-observe"
+description = "Rust alternative of Radix Core Rect."
+
+authors.workspace = true
+edition.workspace = true
+license.workspace = true
+repository.workspace = true
+version.workspace = true
+
+[dependencies]
+web-sys = { workspace = true, features = [
+    "DomRect",
+    "Element",
+    "ResizeObserver",
+    "ResizeObserverBoxOptions",
+    "ResizeObserverEntry",
+    "ResizeObserverOptions",
+    "ResizeObserverSize",
+] }
+send_wrapper.workspace = true

packages/primitives/core/rect/README.md → packages/primitives/core/observe/README.md

@@ -19,3 +19,8 @@ See [the Rust Radix book](https://radix.rustforweb.org/) for documentation.
 The Rust Radix project is part of [Rust for Web](https://github.com/RustForWeb).
 
 [Rust for Web](https://github.com/RustForWeb) creates and ports web UI libraries for Rust. All projects are free and open source.
+
+## Modifications
+
+This implementation is generalized where the callbacks are provided with the `ResizeObserverEntry`
+directly so any dependants that need to observe changes can use it.

packages/primitives/core/rect/src/lib.rs → packages/primitives/core/observe/src/lib.rs

@@ -4,6 +4,6 @@
 //!
 //! See [`@radix-ui/rect`](https://www.npmjs.com/package/@radix-ui/rect) for the original package.
 
-mod observe_element_rect;
+mod observe_element;
 
-pub use observe_element_rect::*;
+pub use observe_element::*;

packages/primitives/core/observe/src/observe_element.rs

@@ -0,0 +1,144 @@
+use std::sync::LazyLock;
+
+use send_wrapper::SendWrapper;
+use web_sys::js_sys;
+use web_sys::wasm_bindgen::prelude::*;
+use web_sys::{
+    Element, ResizeObserver, ResizeObserverBoxOptions, ResizeObserverEntry, ResizeObserverOptions,
+};
+
+pub type UnobserveCallback = Box<dyn Fn() + Send + Sync>;
+
+static OBSERVED_ELEMENTS: LazyLock<SendWrapper<js_sys::Map>> =
+    LazyLock::new(|| SendWrapper::new(js_sys::Map::new()));
+
+static RESIZE_OBSERVER: LazyLock<SendWrapper<ResizeObserver>> = LazyLock::new(|| {
+    let callback: Closure<dyn Fn(Vec<ResizeObserverEntry>)> =
+        Closure::new(|entries: Vec<ResizeObserverEntry>| {
+            for entry in entries {
+                let target = entry.target();
+
+                let observed_data = OBSERVED_ELEMENTS.get(&target);
+
+                // cannot happen
+                if observed_data == JsValue::UNDEFINED {
+                    // RESIZE_OBSERVER.unobserve(&target);
+                } else {
+                    let observed_data = observed_data
+                        .dyn_ref::<js_sys::Object>()
+                        .expect("Object should be of type ObservedData");
+
+                    js_sys::Reflect::set(observed_data, &"entry".into(), &entry)
+                        .expect("Should be able to set entry");
+
+                    let callbacks = js_sys::Reflect::get(observed_data, &"callbacks".into())
+                        .expect("Object should have callbacks array")
+                        .dyn_into::<js_sys::Array>()
+                        .expect("Object should be of type array");
+
+                    callbacks.for_each(&mut |obj, _, _| {
+                        if let Some(callback) = obj.dyn_ref::<js_sys::Function>() {
+                            callback
+                                .call1(&JsValue::NULL, &entry)
+                                .expect("callback should be called");
+                        }
+                    });
+                }
+            }
+        });
+
+    SendWrapper::new(
+        ResizeObserver::new(callback.into_js_value().unchecked_ref())
+            .expect("Resize observer should be created."),
+    )
+});
+
+pub fn observe_element<C>(element_to_observe: &Element, callback: C) -> UnobserveCallback
+where
+    C: Fn(ResizeObserverEntry) + 'static + Send + Sync,
+{
+    let callback: Closure<dyn Fn(ResizeObserverEntry)> =
+        Closure::new(move |entry: ResizeObserverEntry| callback(entry));
+    let callback = callback.into_js_value();
+
+    let observed_data = OBSERVED_ELEMENTS.get(element_to_observe);
+    if observed_data == JsValue::UNDEFINED {
+        let obj = js_sys::Object::new();
+        let callbacks = js_sys::Array::new();
+        callbacks.push(callback.unchecked_ref());
+
+        js_sys::Reflect::set(&obj, &"entry".into(), &JsValue::NULL)
+            .expect("Should be able to set entry");
+        js_sys::Reflect::set(&obj, &"callbacks".into(), &callbacks.into())
+            .expect("Should be able to set callbacks");
+
+        OBSERVED_ELEMENTS.set(element_to_observe, &obj);
+
+        let options = ResizeObserverOptions::new();
+        options.set_box(ResizeObserverBoxOptions::BorderBox);
+
+        RESIZE_OBSERVER.observe_with_options(element_to_observe, &options);
+    } else {
+        let observed_data = observed_data
+            .dyn_ref::<js_sys::Object>()
+            .expect("observed data type should be object");
+
+        let callbacks = js_sys::Reflect::get(observed_data, &"callbacks".into())
+            .expect("Object should have callbacks array")
+            .dyn_into::<js_sys::Array>()
+            .expect("Object should be of type array");
+
+        callbacks.push(callback.unchecked_ref());
+
+        if let Some(callback) = callbacks
+            .get(callbacks.length() - 1)
+            .dyn_ref::<js_sys::Function>()
+        {
+            let entry = js_sys::Reflect::get(observed_data, &"entry".into())
+                .expect("ObservedData should have entry");
+
+            if entry != JsValue::NULL {
+                callback
+                    .call1(
+                        &JsValue::NULL,
+                        entry
+                            .dyn_ref::<ResizeObserverEntry>()
+                            .expect("entry should be of type ResizeObserverEntry"),
+                    )
+                    .expect("callback should be called");
+            }
+        }
+    }
+
+    let wrapped_element = SendWrapper::new(element_to_observe.clone());
+    let wrapped_closure = SendWrapper::new(callback);
+    Box::new(move || {
+        let element = &*wrapped_element;
+        let callback = &*wrapped_closure;
+        let observed_data = OBSERVED_ELEMENTS.get(element);
+
+        if observed_data == JsValue::UNDEFINED {
+            return;
+        }
+
+        let observed_data = observed_data
+            .dyn_ref::<js_sys::Object>()
+            .expect("observed data type should be object");
+
+        let callbacks = js_sys::Reflect::get(observed_data, &"callbacks".into())
+            .expect("Object should have callbacks array")
+            .dyn_into::<js_sys::Array>()
+            .expect("Object should be of type array");
+
+        let index = callbacks.index_of(callback.unchecked_ref(), 0);
+
+        if let Ok(index) = u32::try_from(index) {
+            callbacks.splice(index, 1, &JsValue::NULL);
+        }
+
+        if callbacks.length() == 0 {
+            RESIZE_OBSERVER.unobserve(element);
+            OBSERVED_ELEMENTS.delete(element);
+        }
+    })
+}

packages/primitives/leptos/use-rect/Cargo.toml

@@ -0,0 +1,16 @@
+[package]
+name = "radix-leptos-use-rect"
+description = "Leptos port of Radix Use Rect."
+
+authors.workspace = true
+edition.workspace = true
+license.workspace = true
+repository.workspace = true
+version.workspace = true
+
+[dependencies]
+leptos.workspace = true
+leptos-node-ref.workspace = true
+send_wrapper.workspace = true
+web-sys.workspace = true
+radix-observe.workspace = true

packages/primitives/leptos/use-rect/src/lib.rs

@@ -0,0 +1,49 @@
+use std::sync::{Arc, Mutex};
+
+use leptos::prelude::*;
+use leptos_node_ref::AnyNodeRef;
+use radix_observe::observe_element;
+use send_wrapper::SendWrapper;
+use web_sys::{DomRect, wasm_bindgen::JsCast};
+
+/// Provides a signal that monitors a node size changes
+///
+/// # Panics
+///
+/// Panics if failed to acquire the lock
+#[must_use]
+pub fn use_rect(element_ref: AnyNodeRef) -> ReadSignal<Option<SendWrapper<DomRect>>> {
+    let (rect, set_rect) = signal::<Option<SendWrapper<DomRect>>>(None);
+    let unobserve = Arc::new(Mutex::new(None));
+    let unobserve_clone = unobserve.clone();
+
+    Effect::new(move |_| {
+        if let Some(element) = element_ref
+            .get()
+            .and_then(|element| element.dyn_into::<web_sys::HtmlElement>().ok())
+        {
+            let cleanup = observe_element(&element, move |entry| {
+                set_rect.set(Some(SendWrapper::new(
+                    entry.target().get_bounding_client_rect(),
+                )));
+            });
+
+            unobserve
+                .lock()
+                .expect("Lock should be acquired.")
+                .replace(cleanup);
+        }
+    });
+
+    on_cleanup(move || {
+        if let Some(cleanup) = unobserve_clone
+            .lock()
+            .expect("Lock should be acquired.")
+            .as_ref()
+        {
+            cleanup();
+        }
+    });
+
+    rect
+}

packages/primitives/leptos/use-size/Cargo.toml

@@ -12,10 +12,5 @@ version.workspace = true
 leptos.workspace = true
 leptos-node-ref.workspace = true
 send_wrapper.workspace = true
-web-sys = { workspace = true, features = [
-    "ResizeObserver",
-    "ResizeObserverBoxOptions",
-    "ResizeObserverEntry",
-    "ResizeObserverOptions",
-    "ResizeObserverSize",
-] }
+web-sys.workspace = true
+radix-observe.workspace = true