Use patched Leptos version; Spread event handlers; Use builder patter…

…n for hook input

examples/book-ssr/Cargo.toml

@@ -15,7 +15,7 @@ http = "1.0.0"
 indoc = "2.0.4"
 #leptonic = { git = "https://github.com/lpotthast/leptonic", branch = "main", features = ["clipboard", "tiptap"] }
 leptonic = { path = "../../leptonic", features = ["full"] }
-leptos = { version = "0.6.9", features = ["csr"] }
+leptos = { version = "0.6.9", features = [] }
 leptos-use = "0.10.5"
 leptos_axum = { version = "0.6.9", optional = true }
 leptos_meta = { version = "0.6.9", features = [] }
@@ -28,7 +28,10 @@ serde_json = "1.0.113"
 strum = { version = "0.26.1", features = ["derive"] }
 thiserror = "1.0.56"
 time = { version = "0.3.34", features = ["wasm-bindgen"] }
-tokio = { version = "1.36.0", features = ["rt-multi-thread", "signal"], optional = true }
+tokio = { version = "1.36.0", features = [
+    "rt-multi-thread",
+    "signal",
+], optional = true }
 tower = { version = "0.4.13", optional = true }
 tower-http = { version = "0.5.1", features = ["full"], optional = true }
 tracing = "0.1.40"
@@ -37,6 +40,14 @@ tracing-wasm = "0.2.1"
 uuid = { version = "1.7.0", features = ["js", "v4", "serde"] }
 wasm-bindgen = "0.2.91"
 
+[patch.crates-io]
+leptos = { git = 'https://github.com/lpotthast/leptos', branch = "spread-event-handlers" }
+leptos_reactive = { git = 'https://github.com/lpotthast/leptos', branch = "spread-event-handlers" }
+leptos_dom = { git = 'https://github.com/lpotthast/leptos', branch = "spread-event-handlers" }
+leptos_axum = { git = 'https://github.com/lpotthast/leptos', branch = "spread-event-handlers" }
+leptos_meta = { git = 'https://github.com/lpotthast/leptos', branch = "spread-event-handlers" }
+leptos_router = { git = 'https://github.com/lpotthast/leptos', branch = "spread-event-handlers" }
+
 [features]
 hydrate = [
     "leptos/hydrate",

examples/book-ssr/src/pages/documentation/hooks/anchor_link.rs

@@ -15,23 +15,24 @@ pub fn PageUseAnchorLink() -> impl IntoView {
 
     // We make links "use_press", so that optional PressResponder's higher up the component tree can react on link interactions
     // and so that a custom `on_press` handler can immediately work with the underlying link element.
-    let UseAnchorLinkReturn { props } = use_anchor_link(UseAnchorLinkInput {
-        href: Href::from_str(Oco::Borrowed("#my-anchor-element")).expect("valid href"),
-        scroll_behavior: Some(ScrollBehavior::Smooth),
-        disabled: disabled.into(),
-        description: None,
-        use_press_input: UsePressInput {
-            // Links cannot be disabled (for now).
-            disabled: false.into(),
-            // We are using an <a> tag and want the custom scrolling behavior from `use_anchor_link`.
-            // If we would not enforce prevention of default behavior, automatic browser scroll-jumps would occur.
-            force_prevent_default: true,
-            on_press: Callback::new(move |_| {}),
-            on_press_up: None,
-            on_press_start: None,
-            on_press_end: None,
-        },
-    });
+    let UseAnchorLinkReturn { props } = use_anchor_link(
+        UseAnchorLinkInput::builder()
+            .href(Href::from_str(Oco::Borrowed("#my-anchor-element")).expect("valid href"))
+            .scroll_behavior(Some(ScrollBehavior::Smooth))
+            .disabled(disabled)
+            .description(None)
+            .use_press_input(
+                UsePressInput::builder()
+                    // Links cannot be disabled (for now).
+                    .disabled(false)
+                    // We are using an <a> tag and want the custom scrolling behavior from `use_anchor_link`.
+                    // If we would not enforce prevention of default behavior, automatic browser scroll-jumps would occur.
+                    .force_prevent_default(true)
+                    .on_press(move |_| {})
+                    .build(),
+            )
+            .build(),
+    );
 
     view! {
         <Article>
@@ -56,8 +57,8 @@ pub fn PageUseAnchorLink() -> impl IntoView {
             </Code>
 
             <a
-                use:attrs=props.attrs
-                use:handlers=props.handlers
+                {..props.attrs}
+                {..props.handlers}
                 class="leptonic-anchor-link"
                 target="_self"
             >

examples/book-ssr/src/pages/documentation/hooks/button.rs

@@ -2,7 +2,6 @@ use indoc::indoc;
 use leptonic::atoms::link::AnchorLink;
 use leptonic::components::prelude::*;
 use leptonic::hooks::*;
-use leptonic::utils::aria::{AriaExpanded, AriaHasPopup};
 use leptos::*;
 use leptos_use::use_window;
 
@@ -12,36 +11,26 @@ use crate::pages::documentation::toc::Toc;
 #[component]
 pub fn PageUseButton() -> impl IntoView {
     let el: NodeRef<html::Div> = create_node_ref();
+    let disabled = false;
 
-    let UseButtonReturn { props } = use_button(UseButtonInput {
-        node_ref: el,
-        disabled: false.into(),
-        aria_haspopup: AriaHasPopup::default().into(),
-        aria_expanded: AriaExpanded::default().into(),
-        use_press_input: UsePressInput {
-            disabled: false.into(),
-            force_prevent_default: false,
-            on_press: Callback::new(move |_e| {
-                if let Some(window) = use_window().as_ref() {
-                    let _ = window.alert_with_message("Pressed!");
-                }
-            }),
-            on_press_up: None,
-            on_press_start: None,
-            on_press_end: None,
-        },
-        use_hover_input: UseHoverInput {
-            disabled: false.into(),
-            on_hover_start: None,
-            on_hover_end: None,
-        },
-        use_focus_input: UseFocusInput {
-            disabled: false.into(),
-            on_focus: None,
-            on_blur: None,
-            on_focus_change: None,
-        },
-    });
+    let btn = use_button(
+        UseButtonInput::builder()
+            .node_ref(el)
+            .disabled(disabled)
+            .use_press_input(
+                UsePressInput::builder()
+                    .disabled(disabled)
+                    .on_press(Callback::new(move |_e| {
+                        if let Some(window) = use_window().as_ref() {
+                            let _ = window.alert_with_message("Pressed!");
+                        }
+                    }))
+                    .build(),
+            )
+            .use_hover_input(UseHoverInput::builder().disabled(disabled).build())
+            .use_focus_input(UseFocusInput::builder().disabled(disabled).build())
+            .build(),
+    );
 
     view! {
         <Article>
@@ -55,37 +44,31 @@ pub fn PageUseButton() -> impl IntoView {
             <Code>
                 {indoc!(r#"
                     let el: NodeRef<html::Div> = create_node_ref();
+                    let disabled = false;
 
-                    let UseButtonReturn { props } = use_button(UseButtonInput {
-                        node_ref: el,
-                        disabled: false.into(),
-                        aria_haspopup: AriaHasPopup::default().into(),
-                        aria_expanded: AriaExpanded::default().into(),
-
-                        use_focus_input: UseFocusInput {
-                            disabled: false.into(),
-                            on_focus: None,
-                            on_blur: None,
-                            on_focus_change: None,
-                        },
-
-                        use_press_input: UsePressInput {
-                            disabled: false.into(),
-                            on_press: Callback::new(move |_e| {
-                                if let Some(window) = use_window().as_ref() {
-                                    let _ = window.alert_with_message("Pressed!");
-                                }
-                            }),
-                            on_press_up: None,
-                            on_press_start: None,
-                            on_press_end: None,
-                        },
-                    });
+                    let btn = use_button(
+                        UseButtonInput::builder()
+                            .node_ref(el)
+                            .disabled(disabled)
+                            .use_press_input(
+                                UsePressInput::builder()
+                                    .disabled(disabled)
+                                    .on_press(Callback::new(move |_e| {
+                                        if let Some(window) = use_window().as_ref() {
+                                            let _ = window.alert_with_message("Pressed!");
+                                        }
+                                    }))
+                                    .build(),
+                            )
+                            .use_hover_input(UseHoverInput::builder().disabled(disabled).build())
+                            .use_focus_input(UseFocusInput::builder().disabled(disabled).build())
+                            .build(),
+                    );
 
                     view! {
                         <div
-                            use:attrs=props.attrs
-                            use:handlers=props.handlers
+                            {..btn.props.attrs}
+                            {..btn.props.handlers}
                             node_ref=el
                             style="
                                 display: inline-flex;
@@ -101,8 +84,8 @@ pub fn PageUseButton() -> impl IntoView {
             </Code>
 
             <div
-                use:attrs=props.attrs
-                use:handlers=props.handlers
+                {..btn.props.attrs}
+                {..btn.props.handlers}
                 node_ref=el
                 style="
                     display: inline-flex;

examples/book-ssr/src/pages/documentation/hooks/hover.rs

@@ -31,19 +31,21 @@ pub fn PageUseHover() -> impl IntoView {
         })
     });
 
-    let hover = use_hover(UseHoverInput {
-        disabled: disabled.into(),
-        on_hover_start: Some(Callback::new(move |e| {
-            set_events.update(|events| {
-                events.push_overwrite(Oco::Owned(format!("HoverStart: {e:?}")));
-            });
-        })),
-        on_hover_end: Some(Callback::new(move |e| {
-            set_events.update(|events| {
-                events.push_overwrite(Oco::Owned(format!("HoverEnd: {e:?}")));
-            });
-        })),
-    });
+    let hover = use_hover(
+        UseHoverInput::builder()
+            .disabled(disabled)
+            .on_hover_start(move |e| {
+                set_events.update(|events| {
+                    events.push_overwrite(Oco::Owned(format!("HoverStart: {e:?}")));
+                });
+            })
+            .on_hover_end(move |e| {
+                set_events.update(|events| {
+                    events.push_overwrite(Oco::Owned(format!("HoverEnd: {e:?}")));
+                });
+            })
+            .build(),
+    );
 
     view! {
         <Article>
@@ -61,8 +63,8 @@ pub fn PageUseHover() -> impl IntoView {
             </Code>
 
             <div
-                use:attrs=hover.props.attrs
-                use:handlers=hover.props.handlers
+                {..hover.props.attrs}
+                {..hover.props.handlers}
                 style="display: inline-flex;
                 border: 0.1em solid green;
                 padding: 0.5em 1em;"

examples/book-ssr/src/pages/documentation/hooks/move.rs

@@ -36,46 +36,48 @@ pub fn PageUseMove() -> impl IntoView {
     let draggable: NodeRef<html::Div> = create_node_ref();
     let draggable_bounding = use_element_bounding(draggable);
 
-    let mov: UseMoveReturn = use_move(UseMoveInput {
-        on_move_start: Callback::new(move |_e| {
-            set_events.update(move |events| {
-                events.push_overwrite(Oco::Borrowed("MoveStart"));
-            });
-        }),
-        on_move: Callback::new(move |e: MoveEvent| {
-            set_left.update(move |l| *l += e.delta_x);
-            set_top.update(move |l| *l += e.delta_y);
-            set_events.update(move |events| {
-                events.push_overwrite(Oco::Owned(format!(
-                    "Move {{ dx: {}, dy: {} }}",
-                    e.delta_x, e.delta_y
-                )));
-            });
-        }),
-        on_move_end: Callback::new(move |_e| {
-            set_left.update(move |l| {
-                *l = (*l).clamp(
-                    0.0,
-                    container_bounding.width.get_untracked()
-                        - draggable_bounding.width.get_untracked(),
-                )
-            });
-            set_top.update(move |t| {
-                *t = (*t).clamp(
-                    0.0,
-                    container_bounding.height.get_untracked()
-                        - draggable_bounding.height.get_untracked(),
-                )
-            });
-            set_events.update(move |events| {
-                events.push_overwrite(Oco::Borrowed("MoveEnd"));
-            });
-        }),
-        global_pointer_up: global_pointer_up.into(),
-        global_pointer_down: global_pointer_down.into(),
-        global_pointer_cancel: global_pointer_cancel.into(),
-        global_pointer_move: global_pointer_move.into(),
-    });
+    let mov: UseMoveReturn = use_move(
+        UseMoveInput::builder()
+            .on_move_start(move |_e| {
+                set_events.update(move |events| {
+                    events.push_overwrite(Oco::Borrowed("MoveStart"));
+                });
+            })
+            .on_move(move |e: MoveEvent| {
+                set_left.update(move |l| *l += e.delta_x);
+                set_top.update(move |l| *l += e.delta_y);
+                set_events.update(move |events| {
+                    events.push_overwrite(Oco::Owned(format!(
+                        "Move {{ dx: {}, dy: {} }}",
+                        e.delta_x, e.delta_y
+                    )));
+                });
+            })
+            .on_move_end(move |_e| {
+                set_left.update(move |l| {
+                    *l = (*l).clamp(
+                        0.0,
+                        container_bounding.width.get_untracked()
+                            - draggable_bounding.width.get_untracked(),
+                    )
+                });
+                set_top.update(move |t| {
+                    *t = (*t).clamp(
+                        0.0,
+                        container_bounding.height.get_untracked()
+                            - draggable_bounding.height.get_untracked(),
+                    )
+                });
+                set_events.update(move |events| {
+                    events.push_overwrite(Oco::Borrowed("MoveEnd"));
+                });
+            })
+            .global_pointer_up(global_pointer_up)
+            .global_pointer_down(global_pointer_down)
+            .global_pointer_cancel(global_pointer_cancel)
+            .global_pointer_move(global_pointer_move)
+            .build(),
+    );
 
     let string = create_memo(move |_| {
         events.with(|events| {
@@ -114,9 +116,9 @@ pub fn PageUseMove() -> impl IntoView {
                 color: var(--typography-code-color);
             ">
                 <div
+                    {..mov.props.attrs}
+                    {..mov.props.handlers}
                     node_ref=draggable
-                    use:attrs=mov.props.attrs
-                    use:handlers=mov.props.handlers
                     style=move || format!("
                         border: 0.1em solid green;
                         padding: 0.5em 1em;