patch

.vscode/settings.json

@@ -26,7 +26,7 @@
 	// "rust-analyzer.cargo.features": [
 	// 	"web_sys_unstable_apis"
 	// ],
-	// "rust-analyzer.cargo.target": "wasm32-unknown-unknown",
+	"rust-analyzer.cargo.target": "wasm32-unknown-unknown",
 	"search.exclude": {
 		"Cargo.lock": true,
 		"**/assets/*": true,

crates/forky/forky_web/src/dom_utils/resize_listener.rs

@@ -9,7 +9,7 @@ use web_sys::ResizeObserverSize;
 
 
 /// Resize listener
-/// For use with leptos, ensure it is moved to on_cleanup to avoid being dropped
+/// When using with leptos, ensure it is moved to [`on_cleanup`] to avoid being dropped
 pub struct ResizeListener {
 	pub observer: ResizeObserver,
 	pub cb: Closure<dyn FnMut(Array, ResizeObserver)>,
@@ -63,21 +63,20 @@ impl Drop for ResizeListener {
 pub use leptos_resize::*;
 #[cfg(feature = "leptos")]
 pub mod leptos_resize {
-	use crate::ResizeListener;
-	use leptos::html::Div;
+	use crate::prelude::*;
+	use leptos::html::ElementDescriptor;
 	use leptos::*;
-	use std::ops::Deref;
+	use web_sys::DomRect;
 	use web_sys::ResizeObserverEntry;
 
-	pub fn create_resize_listener(
-		el: NodeRef<Div>,
+	pub fn use_resize_listener<T: 'static + ElementDescriptor + Clone>(
+		el: NodeRef<T>,
 	) -> ReadSignal<Option<ResizeObserverEntry>> {
 		let signal = create_rw_signal(None);
 		let resize_listener = create_effect(move |_| {
 			if let Some(container) = el.get() {
-				let el = container.deref();
-				let el: &web_sys::Element = el.as_ref();
-				let listener = ResizeListener::new(el, move |entry| {
+				let el = container.into_web_sys();
+				let listener = ResizeListener::new(&el, move |entry| {
 					signal.set(Some(entry.clone()));
 				});
 				Some(listener)
@@ -90,6 +89,84 @@ pub mod leptos_resize {
 
 		signal.read_only()
 	}
+
+
+	/// Memoized version of [`use_resize_listener`], that also sets intial size based on [`get_bounding_client_rect`]
+	pub fn use_size_listener<T: 'static + ElementDescriptor + Clone>(
+		el: NodeRef<T>,
+	) -> Signal<(u32, u32)> {
+		let resize_listener = use_resize_listener(el);
+		let func = create_memo(move |_| {
+			// Default::default()
+			let el = el();
+			resize_listener()
+				.map(|entry| ResizeListener::parse_entry(&entry))
+				.unwrap_or_else(|| {
+					el.map(|el| {
+						let rect = el.into_web_sys().get_bounding_client_rect();
+						(rect.x() as u32, rect.y() as u32)
+					})
+					.unwrap_or_default()
+				})
+		});
+		func.into_signal()
+	}
+
+	/// Memoized version of [`use_resize_listener`], that also sets intial size based on [`get_bounding_client_rect`]
+	pub fn use_size_listener_with_parent<
+		T: 'static + ElementDescriptor + Clone,
+	>(
+		el: NodeRef<T>,
+	) -> Signal<(u32, u32)> {
+		let resize_listener = use_resize_listener(el);
+		let func = create_memo(move |_| {
+			// Default::default()
+			let el = el();
+			resize_listener()
+				.map(|entry| ResizeListener::parse_entry(&entry))
+				.unwrap_or_else(|| {
+					el.map(|el| {
+						let rect = el.into_web_sys().get_bounding_client_rect();
+						(rect.x() as u32, rect.y() as u32)
+					})
+					.unwrap_or_default()
+				})
+		});
+		func.into_signal()
+	}
+
+
+
+	/// calls [`Element::get_bounding_client_rect`] whenever this element or its parent is resized
+	/// The resize calls are memoized
+	pub fn use_dom_rect<T1: ElementDescriptor + Clone>(
+		el: NodeRef<T1>,
+	) -> Signal<DomRect> {
+		let on_resize = use_size_listener(el);
+		let func = move || {
+			let _ = on_resize();
+			el().map(|el| el.into_web_sys().get_bounding_client_rect())
+				.unwrap_or_else(|| DomRect::new().unwrap())
+		};
+		func.into_signal()
+	}
+	pub fn use_dom_rect_with_parent<
+		T1: ElementDescriptor + Clone,
+		T2: ElementDescriptor + Clone,
+	>(
+		el: NodeRef<T1>,
+		parent: NodeRef<T2>,
+	) -> Signal<DomRect> {
+		let on_parent_resize = use_size_listener(parent);
+		let on_resize = use_size_listener(el);
+		let func = move || {
+			let _ = on_resize();
+			let _ = on_parent_resize();
+			el().map(|el| el.into_web_sys().get_bounding_client_rect())
+				.unwrap_or_else(|| DomRect::new().unwrap())
+		};
+		func.into_signal()
+	}
 }
 
 

crates/forky/forky_web/src/dom_utils_leptos/html_element_ext.rs

@@ -0,0 +1,13 @@
+use leptos::html::ElementDescriptor;
+use leptos::*;
+
+
+#[extend::ext]
+pub impl<T: 'static + ElementDescriptor> leptos::HtmlElement<T> {
+	fn into_web_sys(self) -> web_sys::HtmlElement {
+		let el = self.into_any();
+		let el: &web_sys::HtmlElement = el.as_ref();
+		el.clone()
+		// el.into()
+	}
+}

crates/forky/forky_web/src/dom_utils_leptos/mod.rs

@@ -7,3 +7,6 @@ pub use self::mount::*;
 pub mod bevy_canvas;
 #[allow(unused_imports)]
 pub use self::bevy_canvas::*;
+pub mod html_element_ext;
+#[allow(unused_imports)]
+pub use self::html_element_ext::*;

justfile

@@ -214,7 +214,7 @@ copy-wasm-assets:
 
 ssl:
 	openssl genrsa -out target/client-key.pem 2048
-	openssl req -new -key target/client-key.pem -subj "/CN=$cn\/emailAddress=admin@$cn/C=US/ST=Ohio/L=Columbus/O=Widgets Inc/OU=Some Unit" -out target/client.csr
+	openssl req -new -key target/client-key.pem -subj "/CN=foobar.com\/emailAddress=admin@foobar.com/C=US/ST=Ohio/L=Columbus/O=Widgets Inc/OU=Some Unit" -out target/client.csr
 	openssl x509 -req -in target/client.csr -signkey target/client-key.pem -out target/client-cert.pem
 
 style: