refactor(primitive): revamp for leptos 0.7

Cargo.toml

@@ -22,9 +22,13 @@ console_log = "1.0.0"
 console_error_panic_hook = "0.1.7"
 dioxus = "0.5.6"
 dioxus-router = "0.5.6"
-leptos = "0.6.13"
-leptos_dom = "0.6.13"
-leptos_router = "0.6.13"
+leptos = "0.7.2"
+leptos_dom = "0.7.2"
+leptos_router = "0.7.2"
+leptos-node-ref = { version = "0.0.3" }
+leptos-maybe-callback = { version = "0.0.3" }
+leptos-typed-fallback-show = { version = "0.0.3" }
+leptos-use = "0.15.0"
 log = "0.4.22"
 serde = "1.0.198"
 serde_json = "1.0.116"
@@ -38,3 +42,4 @@ yew-style = "0.1.4"
 [patch.crates-io]
 yew = { git = "https://github.com/RustForWeb/yew.git", branch = "feature/use-composed-ref" }
 yew-router = { git = "https://github.com/RustForWeb/yew.git", branch = "feature/use-composed-ref" }
+leptos-node-ref = { git = "https://github.com/geoffreygarrett/leptos-utils", branch = "feature/any-node-ref" }

packages/primitives/leptos/arrow/Cargo.toml

@@ -10,4 +10,6 @@ version.workspace = true
 
 [dependencies]
 leptos.workspace = true
-radix-leptos-primitive = { path = "../primitive", version = "0.0.2" }
+leptos-node-ref.workspace = true
+leptos-typed-fallback-show.workspace = true
+radix-leptos-primitive = { path = "../primitive", version = "0.0.2" }

packages/primitives/leptos/arrow/src/arrow.rs

@@ -1,42 +1,70 @@
-use leptos::{html::AnyElement, *};
-use radix_leptos_primitive::Primitive;
+use leptos::{prelude::*, svg};
+use leptos::attr::{Attr, AttributeKey, AttributeValue};
+use radix_leptos_primitive::{Primitive};
+use leptos_node_ref::AnyNodeRef;
+use leptos_typed_fallback_show::TypedFallbackShow;
+
+/* -------------------------------------------------------------------------------------------------
+ * Arrow
+ * -----------------------------------------------------------------------------------------------*/
+
+const NAME: &'static str = "Arrow";
 
 #[component]
+#[allow(non_snake_case)]
 pub fn Arrow(
-    #[prop(into, optional)] width: MaybeProp<f64>,
-    #[prop(into, optional)] height: MaybeProp<f64>,
-    #[prop(into, optional)] as_child: MaybeProp<bool>,
-    #[prop(optional)] node_ref: NodeRef<AnyElement>,
-    #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>,
     #[prop(optional)] children: Option<ChildrenFn>,
+    #[prop(into, optional, default=10.0.into())] width: MaybeProp<f64>,
+    #[prop(into, optional, default=5.0.into())] height: MaybeProp<f64>,
+    #[prop(into, optional)] as_child: MaybeProp<bool>,
+    #[prop(into, optional)] node_ref: AnyNodeRef,
 ) -> impl IntoView {
-    let width = move || width.get().unwrap_or(10.0);
-    let height = move || height.get().unwrap_or(5.0);
     let children = StoredValue::new(children);
 
-    let mut attrs = attrs.clone();
-    attrs.extend([
-        ("width", width.into_attribute()),
-        ("height", height.into_attribute()),
-        ("viewBox", "0 0 30 10".into_attribute()),
-        ("preserveAspectRatio", "none".into_attribute()),
-    ]);
+    #[cfg(debug_assertions)]
+    Effect::new(move |_| {
+        leptos::logging::log!("[{NAME}] width: {:?}", width.get());
+        leptos::logging::log!("[{NAME}] height: {:?}", height.get());
+        leptos::logging::log!("[{NAME}] node_ref: {:?}", node_ref.get());
+        leptos::logging::log!("[{NAME}] as_child: {:?}", as_child.get());
+    });
 
     view! {
         <Primitive
             element=svg::svg
             as_child=as_child
+            attr:width=move || width.get()
+            attr:height=move || height.get()
             node_ref=node_ref
-            attrs=attrs
         >
-            <Show
+            <TypedFallbackShow
                 when=move || as_child.get().unwrap_or_default()
-                fallback=move || view!{
-                    <polygon points="0,0 30,0 15,10" />
+                fallback=move || {
+                    view! {
+                        <polygon
+                            points="0,0 30,0 15,10"
+                            viewBox="0 0 30 10"
+                            preserveAspectRatio="none"
+                        />
+                    }
                 }
             >
-                {children.with_value(|children| children.as_ref().map(|children| children()))}
-            </Show>
+                {children
+                    .with_value(|maybe_children| {
+                        { maybe_children.as_ref().map(|child_fn| child_fn()) }
+                    })
+                    .attr("viewBox", "0 0 30 10")
+                    .attr("preserveAspectRatio", "none")}
+            </TypedFallbackShow>
         </Primitive>
-    }
+    };
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Primitive re-exports
+ * -----------------------------------------------------------------------------------------------*/
+
+pub mod primitive {
+    pub use super::*;
+    pub use Arrow as Root;
 }

packages/primitives/leptos/aspect-ratio/Cargo.toml

@@ -12,3 +12,4 @@ version.workspace = true
 [dependencies]
 leptos.workspace = true
 radix-leptos-primitive = { path = "../primitive", version = "0.0.2" }
+leptos-node-ref = { workspace = true }

packages/primitives/leptos/aspect-ratio/src/aspect_ratio.rs

@@ -1,41 +1,79 @@
-use leptos::{html::AnyElement, *};
+use leptos::{prelude::*, attr::{Attribute, AttributeValue}, html};
 use radix_leptos_primitive::Primitive;
+use leptos_node_ref::AnyNodeRef;
+
+const DEFAULT_RATIO: f64 = 1.0;
+
+/* -------------------------------------------------------------------------------------------------
+ * AspectRatio
+ * -----------------------------------------------------------------------------------------------*/
+
+const NAME: &'static str = "AspectRatio";
 
 #[component]
+#[allow(non_snake_case)]
 pub fn AspectRatio(
-    #[prop(into, optional)] ratio: MaybeProp<f64>,
-    #[prop(into, optional)] as_child: MaybeProp<bool>,
-    #[prop(optional)] node_ref: NodeRef<AnyElement>,
-    #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>,
-    children: ChildrenFn,
+    /// Children passed to the AspectRatio component
+    children: TypedChildrenFn<impl IntoView + 'static>,
+
+    /// Change the default rendered element for the one passed as a child
+    #[prop(into, optional, default = false.into())]
+    as_child: MaybeProp<bool>,
+
+    /// The desired ratio when rendering the content (e.g., 16/9). Defaults to 1.0 if not specified.
+    #[prop(into, optional, default = DEFAULT_RATIO.into())]
+    ratio: MaybeProp<f64>,
+
+    /// Reference to the underlying DOM node
+    #[prop(into, optional)]
+    node_ref: AnyNodeRef,
 ) -> impl IntoView {
-    let ratio = Signal::derive(move || ratio.get().unwrap_or(1.0));
+    // calculates the percent-based padding for the aspect ratio
+    let padding_bottom = Signal::derive(move || {
+        100.0
+            / ratio
+            .get()
+            .unwrap_or(DEFAULT_RATIO)
+            .clamp(f64::EPSILON, f64::MAX)
+    });
 
-    let mut attrs = attrs.clone();
-    // TODO: merge existing style
-    attrs.extend([(
-        "style",
-        // Ensures children expand in ratio
-        "position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;".into_attribute(),
-    )]);
+    #[cfg(debug_assertions)]
+    Effect::new(move |_| {
+        leptos::logging::log!("[{NAME}] ratio: {:?}", ratio.get());
+        leptos::logging::log!("[{NAME}] as_child: {:?}", as_child.get());
+        leptos::logging::log!("[{NAME}] node_ref: {:?}", node_ref.get());
+    });
 
     view! {
+        // ensures inner element is contained
         <div
-            // Ensures inner element is contained
             style:position="relative"
-            // Ensures padding bottom trick maths works
+            // ensures padding bottom trick works
             style:width="100%"
-            style:padding-bottom=move || format!("{}%", 100.0 / ratio.get())
+            style:padding-bottom=move || format!("{}%", padding_bottom.get())
             data-radix-aspect-ratio-wrapper=""
         >
             <Primitive
+                // ensures children expand to fill the ratio
                 element=html::div
                 as_child=as_child
                 node_ref=node_ref
-                attrs=attrs
-            >
-                {children()}
-            </Primitive>
+                children=children
+                style:position="absolute"
+                style:top="0"
+                style:right="0"
+                style:bottom="0"
+                style:left="0"
+            />
         </div>
     }
 }
+
+/* -------------------------------------------------------------------------------------------------
+ * Primitive re-exports
+ * -----------------------------------------------------------------------------------------------*/
+
+pub mod primitive {
+    pub use super::*;
+    pub use AspectRatio as Root;
+}

packages/primitives/leptos/avatar/Cargo.toml

@@ -11,5 +11,9 @@ version.workspace = true
 
 [dependencies]
 leptos.workspace = true
+leptos-node-ref.workspace = true
+leptos-maybe-callback.workspace = true
+leptos-use.workspace = true
 radix-leptos-primitive = { path = "../primitive", version = "0.0.2" }
+radix-leptos-context = { path = "../context", version = "0.0.2" }
 web-sys.workspace = true