fixed examples

.github/workflows/book.yml

@@ -1,4 +1,5 @@
 on:
+  pull_request:
   workflow_dispatch:
 
 name: Book

docs/book/post_build.py

@@ -20,7 +20,10 @@ def build_and_copy_demo(category, md_name):
     example_dir = f"../../examples/{name}"
     if os.path.exists(example_dir):
         p = subprocess.Popen(["trunk", "build", "--release"], cwd=example_dir)
-        p.wait()
+        code = p.wait()
+
+        if code != 0:
+            sys.exit(code, f"failed to build example '{name}'")
 
         example_output_path = os.path.join(example_dir, "dist")
         target_path = os.path.join("book", category, name, "demo")

examples/on_click_outside/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/on_click_outside/src/main.rs

@@ -1,3 +1,4 @@
+use leptos::html::Div;
 use leptos::*;
 use leptos_use::docs::demo_or_body;
 use leptos_use::on_click_outside;
@@ -5,7 +6,7 @@ use leptos_use::on_click_outside;
 #[component]
 fn Demo(cx: Scope) -> impl IntoView {
     let (show_modal, set_show_modal) = create_signal(cx, false);
-    let modal_ref = create_node_ref(cx);
+    let modal_ref = create_node_ref::<Div>(cx);
 
     let _ = on_click_outside(cx, modal_ref, move |_| set_show_modal.set(false));
 

examples/use_abs/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_active_element/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_breakpoints/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_ceil/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_color_mode/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_css_var/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_css_var/src/main.rs

@@ -1,10 +1,11 @@
+use leptos::html::Div;
 use leptos::*;
 use leptos_use::docs::demo_or_body;
 use leptos_use::{use_css_var_with_options, UseCssVarOptions};
 
 #[component]
 fn Demo(cx: Scope) -> impl IntoView {
-    let el = create_node_ref(cx);
+    let el = create_node_ref::<Div>(cx);
     let (color, set_color) =
         use_css_var_with_options(cx, "--color", UseCssVarOptions::default().target(el));
     let switch_color = move |_| {
@@ -15,7 +16,7 @@ fn Demo(cx: Scope) -> impl IntoView {
         }
     };
 
-    let elv = create_node_ref(cx);
+    let elv = create_node_ref::<Div>(cx);
     let (key, set_key) = create_signal(cx, "--color".to_string());
     let (color_val, _) = use_css_var_with_options(cx, key, UseCssVarOptions::default().target(elv));
     let change_var = move |_| {

examples/use_cycle_list/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_debounce_fn/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_element_hover/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_element_hover/src/main.rs

@@ -1,10 +1,11 @@
+use leptos::html::Button;
 use leptos::*;
 use leptos_use::docs::demo_or_body;
 use leptos_use::{use_element_hover_with_options, UseElementHoverOptions};
 
 #[component]
 fn Demo(cx: Scope) -> impl IntoView {
-    let el = create_node_ref(cx);
+    let el = create_node_ref::<Button>(cx);
 
     let is_hovered = use_element_hover_with_options(
         cx,

examples/use_element_size/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_element_size/src/main.rs

@@ -1,10 +1,11 @@
+use leptos::html::Textarea;
 use leptos::*;
 use leptos_use::docs::{demo_or_body, Note};
 use leptos_use::{use_element_size, UseElementSizeReturn};
 
 #[component]
 fn Demo(cx: Scope) -> impl IntoView {
-    let el = create_node_ref(cx);
+    let el = create_node_ref::<Textarea>(cx);
 
     let UseElementSizeReturn { width, height } = use_element_size(cx, el);
 

examples/use_element_visibility/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_element_visibility/src/main.rs

@@ -1,10 +1,11 @@
+use leptos::html::Div;
 use leptos::*;
 use leptos_use::docs::{demo_or_body, BooleanDisplay, Note};
 use leptos_use::use_element_visibility;
 
 #[component]
 fn Demo(cx: Scope) -> impl IntoView {
-    let el = create_node_ref(cx);
+    let el = create_node_ref::<Div>(cx);
 
     let is_visible = use_element_visibility(cx, el);
 

examples/use_event_listener/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_event_listener/src/main.rs

@@ -1,4 +1,5 @@
 use leptos::ev::{click, keydown};
+use leptos::html::A;
 use leptos::*;
 use leptos_use::use_event_listener;
 
@@ -8,7 +9,7 @@ fn Demo(cx: Scope) -> impl IntoView {
         log!("window keydown: '{}'", evt.key());
     });
 
-    let element = create_node_ref(cx);
+    let element = create_node_ref::<A>(cx);
 
     let _ = use_event_listener(cx, element, click, |evt| {
         log!(

examples/use_favicon/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_floor/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_intersection_observer/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_intersection_observer/src/main.rs

@@ -1,3 +1,4 @@
+use leptos::html::Div;
 use leptos::*;
 use leptos_use::docs::{demo_or_body, BooleanDisplay};
 use leptos_use::{
@@ -7,8 +8,8 @@ use leptos_use::{
 
 #[component]
 fn Demo(cx: Scope) -> impl IntoView {
-    let root = create_node_ref(cx);
-    let target = create_node_ref(cx);
+    let root = create_node_ref::<Div>(cx);
+    let target = create_node_ref::<Div>(cx);
     let (is_visible, set_visible) = create_signal(cx, false);
 
     let UseIntersectionObserverReturn {

examples/use_interval/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_interval_fn/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_media_query/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_mouse/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_mouse/src/main.rs

@@ -1,3 +1,4 @@
+use leptos::html::Div;
 use leptos::*;
 use leptos_use::docs::{demo_or_body, Note};
 use leptos_use::{
@@ -22,7 +23,7 @@ impl UseMouseEventExtractor for Extractor {
 
 #[component]
 fn Demo(cx: Scope) -> impl IntoView {
-    let el = create_node_ref(cx);
+    let el = create_node_ref::<Div>(cx);
 
     let mouse_default = use_mouse(cx);
 

examples/use_mutation_observer/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_mutation_observer/src/main.rs

@@ -1,3 +1,4 @@
+use leptos::html::Div;
 use leptos::*;
 use leptos_use::docs::demo_or_body;
 use leptos_use::use_mutation_observer_with_options;
@@ -5,7 +6,7 @@ use std::time::Duration;
 
 #[component]
 fn Demo(cx: Scope) -> impl IntoView {
-    let el = create_node_ref(cx);
+    let el = create_node_ref::<Div>(cx);
     let (messages, set_messages) = create_signal(cx, vec![]);
     let (class_name, set_class_name) = create_signal(cx, String::new());
     let (style, set_style) = create_signal(cx, String::new());

examples/use_resize_observer/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_resize_observer/src/main.rs

@@ -1,10 +1,11 @@
+use leptos::html::Textarea;
 use leptos::*;
 use leptos_use::docs::{demo_or_body, Note};
 use leptos_use::use_resize_observer;
 
 #[component]
 fn Demo(cx: Scope) -> impl IntoView {
-    let el = create_node_ref(cx);
+    let el = create_node_ref::<Textarea>(cx);
     let (text, set_text) = create_signal(cx, "".to_string());
 
     use_resize_observer(cx, el, move |entries, _| {

examples/use_round/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_scroll/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_scroll/src/main.rs

@@ -1,10 +1,11 @@
+use leptos::html::Div;
 use leptos::*;
 use leptos_use::docs::{demo_or_body, BooleanDisplay};
 use leptos_use::{use_scroll_with_options, ScrollBehavior, UseScrollOptions, UseScrollReturn};
 
 #[component]
 fn Demo(cx: Scope) -> impl IntoView {
-    let el = create_node_ref(cx);
+    let el = create_node_ref::<Div>(cx);
     let (smooth, set_smooth) = create_signal(cx, false);
     let behavior = Signal::derive(cx, move || {
         if smooth.get() {

examples/use_storage/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/use_throttle_fn/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/watch_debounced/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/watch_pausable/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

examples/watch_pausable/src/main.rs

@@ -1,10 +1,11 @@
+use leptos::html::Input;
 use leptos::*;
 use leptos_use::docs::{demo_or_body, Note};
 use leptos_use::{watch_pausable, WatchPausableReturn};
 
 #[component]
 fn Demo(cx: Scope) -> impl IntoView {
-    let input = create_node_ref(cx);
+    let input = create_node_ref::<Input>(cx);
     let (log, set_log) = create_signal(cx, "".to_string());
     let (source, set_source) = create_signal(cx, "".to_string());
 
@@ -13,9 +14,13 @@ fn Demo(cx: Scope) -> impl IntoView {
         resume,
         is_active,
         ..
-    } = watch_pausable(cx, move || source.get(), move |v, _, _| {
+    } = watch_pausable(
+        cx,
+        move || source.get(),
+        move |v, _, _| {
             set_log.update(|log| *log = format!("{log}Changed to \"{v}\"\n"));
-    });
+        },
+    );
 
     let clear = move |_| set_log.set("".to_string());
 

examples/watch_throttled/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"

template/examples/{{ function_name }}/Cargo.ffizer.hbs.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"