feat: create_blocking_resource (#752)

docs: warn if you put something invalid inside `<Routes/>`

.github/workflows/check-examples.yml

@@ -11,7 +11,7 @@ env:
 
 jobs:
   test:
-    name: Test on ${{ matrix.os }} (using rustc ${{ matrix.rust }})
+    name: Check examples ${{ matrix.os }} (using rustc ${{ matrix.rust }})
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
@@ -39,9 +39,6 @@ jobs:
       - name: Cargo generate-lockfile
         run: cargo generate-lockfile
 
-      - name: Run Rustfmt
-        run: cargo fmt -- --check
-
       - uses: Swatinem/rust-cache@v2
 
       - name: Run cargo check on all examples

.github/workflows/check-stable.yml

@@ -0,0 +1,45 @@
+name: Test
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+env:
+  CARGO_TERM_COLOR: always
+
+jobs:
+  test:
+    name: Check examples ${{ matrix.os }} (using rustc ${{ matrix.rust }})
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        rust:
+          - stable
+        os:
+          - ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup Rust
+        uses: actions-rs/toolchain@v1
+        with:
+          toolchain: ${{ matrix.rust }}
+          override: true
+          components: rustfmt
+
+      - name: Add wasm32-unknown-unknown
+        run: rustup target add wasm32-unknown-unknown
+
+      - name: Setup cargo-make
+        uses: davidB/rust-cargo-make@v1
+
+      - name: Cargo generate-lockfile
+        run: cargo generate-lockfile
+
+      - uses: Swatinem/rust-cache@v2
+
+      - name: Run cargo check on all examples
+        run: cargo make check-stable

.github/workflows/check.yml

@@ -11,7 +11,7 @@ env:
 
 jobs:
   test:
-    name: Test on ${{ matrix.os }} (using rustc ${{ matrix.rust }})
+    name: Run `cargo check` ${{ matrix.os }} (using rustc ${{ matrix.rust }})
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
@@ -39,9 +39,6 @@ jobs:
       - name: Cargo generate-lockfile
         run: cargo generate-lockfile
 
-      - name: Run Rustfmt
-        run: cargo fmt -- --check
-
       - uses: Swatinem/rust-cache@v2
 
       - name: Run cargo check on all libraries

.github/workflows/fmt.yml

@@ -0,0 +1,34 @@
+name: Test
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+env:
+  CARGO_TERM_COLOR: always
+
+jobs:
+  test:
+    name: Run rustfmt
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        rust:
+          - nightly
+        os:
+          - ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup Rust
+        uses: actions-rs/toolchain@v1
+        with:
+          toolchain: ${{ matrix.rust }}
+          override: true
+          components: rustfmt
+
+      - name: Run Rustfmt
+        run: cargo fmt -- --check

.github/workflows/test.yml

@@ -11,7 +11,7 @@ env:
 
 jobs:
   test:
-    name: Test on ${{ matrix.os }} (using rustc ${{ matrix.rust }})
+    name: Run tests ${{ matrix.os }} (using rustc ${{ matrix.rust }})
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
@@ -39,9 +39,6 @@ jobs:
       - name: Cargo generate-lockfile
         run: cargo generate-lockfile
 
-      - name: Run Rustfmt
-        run: cargo fmt -- --check
-
       - uses: Swatinem/rust-cache@v2
 
       - name: Run tests with all features

Cargo.toml

@@ -25,22 +25,22 @@ members = [
 exclude = ["benchmarks", "examples"]
 
 [workspace.package]
-version = "0.2.2"
+version = "0.2.5"
 
 [workspace.dependencies]
-leptos = { path = "./leptos", default-features = false, version = "0.2.2" }
-leptos_dom = { path = "./leptos_dom", default-features = false, version = "0.2.2" }
-leptos_hot_reload = { path = "./leptos_hot_reload", version = "0.2.2" }
-leptos_macro = { path = "./leptos_macro", default-features = false, version = "0.2.2" }
-leptos_reactive = { path = "./leptos_reactive", default-features = false, version = "0.2.2" }
-leptos_server = { path = "./leptos_server", default-features = false, version = "0.2.2" }
-server_fn = { path = "./server_fn", default-features = false, version = "0.2.2" }
-server_fn_macro = { path = "./server_fn_macro", default-features = false, version = "0.2.2" }
-server_fn_macro_default = { path = "./server_fn/server_fn_macro_default", default-features = false, version = "0.2.2" }
-leptos_config = { path = "./leptos_config", default-features = false, version = "0.2.2" }
-leptos_router = { path = "./router", version = "0.2.2" }
-leptos_meta = { path = "./meta", default-feature = false, version = "0.2.2" }
-leptos_integration_utils = { path = "./integrations/utils", version = "0.2.2" }
+leptos = { path = "./leptos", default-features = false, version = "0.2.5" }
+leptos_dom = { path = "./leptos_dom", default-features = false, version = "0.2.5" }
+leptos_hot_reload = { path = "./leptos_hot_reload", version = "0.2.5" }
+leptos_macro = { path = "./leptos_macro", default-features = false, version = "0.2.5" }
+leptos_reactive = { path = "./leptos_reactive", default-features = false, version = "0.2.5" }
+leptos_server = { path = "./leptos_server", default-features = false, version = "0.2.5" }
+server_fn = { path = "./server_fn", default-features = false, version = "0.2.5" }
+server_fn_macro = { path = "./server_fn_macro", default-features = false, version = "0.2.5" }
+server_fn_macro_default = { path = "./server_fn/server_fn_macro_default", default-features = false, version = "0.2.5" }
+leptos_config = { path = "./leptos_config", default-features = false, version = "0.2.5" }
+leptos_router = { path = "./router", version = "0.2.5" }
+leptos_meta = { path = "./meta", default-feature = false, version = "0.2.5" }
+leptos_integration_utils = { path = "./integrations/utils", version = "0.2.5" }
 
 [profile.release]
 codegen-units = 1

Makefile.toml

@@ -7,12 +7,14 @@
 # make tasks run at the workspace root
 default_to_workspace = false
 
-[tasks.ci]
-dependencies = ["check", "check-examples", "test"]
-
 [tasks.check]
 clear = true
-dependencies = ["check-all", "check-wasm"]
+dependencies = [
+	"check-all",
+	"check-wasm",
+	"check-all-release",
+	"check-wasm-release",
+]
 
 [tasks.check-all]
 command = "cargo"
@@ -23,14 +25,21 @@ install_crate = "cargo-all-features"
 clear = true
 dependencies = [{ name = "check-wasm", path = "leptos" }]
 
+[tasks.check-all-release]
+command = "cargo"
+args = ["+nightly", "check-all-features"]
+install_crate = "cargo-all-features"
+
+[tasks.check-wasm-release]
+clear = true
+dependencies = [{ name = "check-wasm-release", path = "leptos" }]
+
 [tasks.check-examples]
 clear = true
 dependencies = [
 	{ name = "check", path = "examples/counter" },
 	{ name = "check", path = "examples/counter_isomorphic" },
-	{ name = "check", path = "examples/counter_without_macros" },
 	{ name = "check", path = "examples/counters" },
-	{ name = "check", path = "examples/counters_stable" },
 	{ name = "check", path = "examples/error_boundary" },
 	{ name = "check", path = "examples/errors_axum" },
 	{ name = "check", path = "examples/fetch" },
@@ -43,12 +52,20 @@ dependencies = [
 	{ name = "check", path = "examples/ssr_modes" },
 	{ name = "check", path = "examples/ssr_modes_axum" },
 	{ name = "check", path = "examples/tailwind" },
+	{ name = "check", path = "examples/tailwind_csr_trunk" },
 	{ name = "check", path = "examples/todo_app_sqlite" },
 	{ name = "check", path = "examples/todo_app_sqlite_axum" },
 	{ name = "check", path = "examples/todo_app_sqlite_viz" },
 	{ name = "check", path = "examples/todomvc" },
 ]
 
+[tasks.check-stable]
+clear = true
+dependencies = [
+	{ name = "check", path = "examples/counter_without_macros" },
+	{ name = "check", path = "examples/counters_stable" },
+]
+
 [tasks.test]
 clear = true
 dependencies = ["test-all"]

README.md

@@ -78,7 +78,7 @@ rustup target add wasm32-unknown-unknown
 
 If you’re on `stable`, note the following:
 
-1. You need to enable the `"stable"` flag in `Cargo.toml`: `leptos = { version = "0.1.0", features = ["stable"] }`
+1. You need to enable the `"stable"` flag in `Cargo.toml`: `leptos = { version = "0.2", features = ["stable"] }`
 2. `nightly` enables the function call syntax for accessing and setting signals. If you’re using `stable`,
    you’ll just call `.get()`, `.set()`, or `.update()` manually. Check out the
    [`counters_stable` example](https://github.com/leptos-rs/leptos/blob/main/examples/counters_stable/src/main.rs)

benchmarks/Cargo.toml

@@ -4,6 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
+l021 = { package = "leptos", version = "0.2.1" }
 leptos = { path = "../leptos", default-features = false, features = ["ssr"] }
 sycamore = { version = "0.8", features = ["ssr"] }
 yew = { git = "https://github.com/yewstack/yew", features = ["ssr"] }
@@ -27,4 +28,4 @@ features = [
 	"Document",
 	"HtmlElement",
 	"HtmlInputElement"
-]
+]

benchmarks/src/lib.rs

@@ -2,6 +2,6 @@
 
 extern crate test;
 
-//mod reactive;
-mod ssr;
-mod todomvc;
+mod reactive;
+//mod ssr;
+//mod todomvc;

benchmarks/src/reactive.rs

@@ -1,35 +1,114 @@
+use std::{cell::Cell, rc::Rc};
 use test::Bencher;
 
-use std::{cell::Cell, rc::Rc};
-
 #[bench]
-fn leptos_create_1000_signals(b: &mut Bencher) {
-    use leptos::{create_isomorphic_effect, create_memo, create_scope, create_signal};
+fn leptos_deep_creation(b: &mut Bencher) {
+    use leptos::*;
+    let runtime = create_runtime();
 
     b.iter(|| {
-        create_scope(|cx| {
-            let acc = Rc::new(Cell::new(0));
-            let sigs = (0..1000).map(|n| create_signal(cx, n)).collect::<Vec<_>>();
+        create_scope(runtime, |cx| {
+            let signal = create_rw_signal(cx, 0);
+            let mut memos = Vec::<Memo<usize>>::new();
+            for i in 0..1000usize {
+                let prev = memos.get(i.saturating_sub(1)).copied();
+                if let Some(prev) = prev {
+                    memos.push(create_memo(cx, move |_| prev.get() + 1));
+                } else {
+                    memos.push(create_memo(cx, move |_| signal.get() + 1));
+                }
+            }
+        })
+        .dispose()
+    });
+
+    runtime.dispose();
+}
+
+#[bench]
+fn leptos_deep_update(b: &mut Bencher) {
+    use leptos::*;
+    let runtime = create_runtime();
+
+    b.iter(|| {
+        create_scope(runtime, |cx| {
+            let signal = create_rw_signal(cx, 0);
+            let mut memos = Vec::<Memo<usize>>::new();
+            for i in 0..1000usize {
+                let prev = memos.get(i.saturating_sub(1)).copied();
+                if let Some(prev) = prev {
+                    memos.push(create_memo(cx, move |_| prev.get() + 1));
+                } else {
+                    memos.push(create_memo(cx, move |_| signal.get() + 1));
+                }
+            }
+            signal.set(1);
+            assert_eq!(memos[999].get(), 1001);
+        })
+        .dispose()
+    });
+
+    runtime.dispose();
+}
+
+#[bench]
+fn leptos_narrowing_down(b: &mut Bencher) {
+    use leptos::*;
+    let runtime = create_runtime();
+
+    b.iter(|| {
+        create_scope(runtime, |cx| {
+            let sigs =
+                (0..1000).map(|n| create_signal(cx, n)).collect::<Vec<_>>();
             let reads = sigs.iter().map(|(r, _)| *r).collect::<Vec<_>>();
             let writes = sigs.iter().map(|(_, w)| *w).collect::<Vec<_>>();
-            let memo = create_memo(cx, move |_| reads.iter().map(|r| r.get()).sum::<i32>());
+            let memo = create_memo(cx, move |_| {
+                reads.iter().map(|r| r.get()).sum::<i32>()
+            });
             assert_eq!(memo(), 499500);
         })
         .dispose()
     });
+
+    runtime.dispose();
 }
 
 #[bench]
-fn leptos_create_and_update_1000_signals(b: &mut Bencher) {
-    use leptos::{create_isomorphic_effect, create_memo, create_scope, create_signal};
+fn leptos_fanning_out(b: &mut Bencher) {
+    use leptos::*;
+    let runtime = create_runtime();
 
     b.iter(|| {
-        create_scope(|cx| {
+        create_scope(runtime, |cx| {
+            let sig = create_rw_signal(cx, 0);
+            let memos = (0..1000)
+                .map(|_| create_memo(cx, move |_| sig.get()))
+                .collect::<Vec<_>>();
+            assert_eq!(memos.iter().map(|m| m.get()).sum::<i32>(), 0);
+            sig.set(1);
+            assert_eq!(memos.iter().map(|m| m.get()).sum::<i32>(), 1000);
+        })
+        .dispose()
+    });
+
+    runtime.dispose();
+}
+
+#[bench]
+fn leptos_narrowing_update(b: &mut Bencher) {
+    use leptos::*;
+    let runtime = create_runtime();
+
+    b.iter(|| {
+        create_scope(runtime, |cx| {
             let acc = Rc::new(Cell::new(0));
-            let sigs = (0..1000).map(|n| create_signal(cx, n)).collect::<Vec<_>>();
+            let sigs =
+                (0..1000).map(|n| create_signal(cx, n)).collect::<Vec<_>>();
             let reads = sigs.iter().map(|(r, _)| *r).collect::<Vec<_>>();
             let writes = sigs.iter().map(|(_, w)| *w).collect::<Vec<_>>();
-            let memo = create_memo(cx, move |_| reads.iter().map(|r| r.get()).sum::<i32>());
+            let memo = create_memo(cx, move |_| {
+                reads.iter().map(|r| r.get()).sum::<i32>()
+            });
             assert_eq!(memo(), 499500);
             create_isomorphic_effect(cx, {
                 let acc = Rc::clone(&acc);
@@ -48,17 +127,20 @@ fn leptos_create_and_update_1000_signals(b: &mut Bencher) {
         })
         .dispose()
     });
+
+    runtime.dispose();
 }
 
 #[bench]
-fn leptos_create_and_dispose_1000_scopes(b: &mut Bencher) {
-    use leptos::{create_isomorphic_effect, create_scope, create_signal};
+fn leptos_scope_creation_and_disposal(b: &mut Bencher) {
+    use leptos::*;
+    let runtime = create_runtime();
 
     b.iter(|| {
         let acc = Rc::new(Cell::new(0));
         let disposers = (0..1000)
             .map(|_| {
-                create_scope({
+                create_scope(runtime, {
                     let acc = Rc::clone(&acc);
                     move |cx| {
                         let (r, w) = create_signal(cx, 0);
@@ -76,16 +158,183 @@ fn leptos_create_and_dispose_1000_scopes(b: &mut Bencher) {
             disposer.dispose();
         }
     });
+
+    runtime.dispose();
 }
 
 #[bench]
-fn sycamore_create_1000_signals(b: &mut Bencher) {
-    use sycamore::reactive::{create_effect, create_memo, create_scope, create_signal};
+fn l021_deep_creation(b: &mut Bencher) {
+    use l021::*;
+    let runtime = create_runtime();
+
+    b.iter(|| {
+        create_scope(runtime, |cx| {
+            let signal = create_rw_signal(cx, 0);
+            let mut memos = Vec::<Memo<usize>>::new();
+            for i in 0..1000usize {
+                let prev = memos.get(i.saturating_sub(1)).copied();
+                if let Some(prev) = prev {
+                    memos.push(create_memo(cx, move |_| prev.get() + 1));
+                } else {
+                    memos.push(create_memo(cx, move |_| signal.get() + 1));
+                }
+            }
+        })
+        .dispose()
+    });
+
+    runtime.dispose();
+}
+
+#[bench]
+fn l021_deep_update(b: &mut Bencher) {
+    use l021::*;
+    let runtime = create_runtime();
+
+    b.iter(|| {
+        create_scope(runtime, |cx| {
+            let signal = create_rw_signal(cx, 0);
+            let mut memos = Vec::<Memo<usize>>::new();
+            for i in 0..1000usize {
+                let prev = memos.get(i.saturating_sub(1)).copied();
+                if let Some(prev) = prev {
+                    memos.push(create_memo(cx, move |_| prev.get() + 1));
+                } else {
+                    memos.push(create_memo(cx, move |_| signal.get() + 1));
+                }
+            }
+            signal.set(1);
+            assert_eq!(memos[999].get(), 1001);
+        })
+        .dispose()
+    });
+
+    runtime.dispose();
+}
+
+#[bench]
+fn l021_narrowing_down(b: &mut Bencher) {
+    use l021::*;
+    let runtime = create_runtime();
+
+    b.iter(|| {
+        create_scope(runtime, |cx| {
+            let acc = Rc::new(Cell::new(0));
+            let sigs =
+                (0..1000).map(|n| create_signal(cx, n)).collect::<Vec<_>>();
+            let reads = sigs.iter().map(|(r, _)| *r).collect::<Vec<_>>();
+            let writes = sigs.iter().map(|(_, w)| *w).collect::<Vec<_>>();
+            let memo = create_memo(cx, move |_| {
+                reads.iter().map(|r| r.get()).sum::<i32>()
+            });
+            assert_eq!(memo(), 499500);
+        })
+        .dispose()
+    });
+
+    runtime.dispose();
+}
+
+#[bench]
+fn l021_fanning_out(b: &mut Bencher) {
+    use leptos::*;
+    let runtime = create_runtime();
+
+    b.iter(|| {
+        create_scope(runtime, |cx| {
+            let sig = create_rw_signal(cx, 0);
+            let memos = (0..1000)
+                .map(|_| create_memo(cx, move |_| sig.get()))
+                .collect::<Vec<_>>();
+            assert_eq!(memos.iter().map(|m| m.get()).sum::<i32>(), 0);
+            sig.set(1);
+            assert_eq!(memos.iter().map(|m| m.get()).sum::<i32>(), 1000);
+        })
+        .dispose()
+    });
+
+    runtime.dispose();
+}
+#[bench]
+fn l021_narrowing_update(b: &mut Bencher) {
+    use l021::*;
+    let runtime = create_runtime();
+
+    b.iter(|| {
+        create_scope(runtime, |cx| {
+            let acc = Rc::new(Cell::new(0));
+            let sigs =
+                (0..1000).map(|n| create_signal(cx, n)).collect::<Vec<_>>();
+            let reads = sigs.iter().map(|(r, _)| *r).collect::<Vec<_>>();
+            let writes = sigs.iter().map(|(_, w)| *w).collect::<Vec<_>>();
+            let memo = create_memo(cx, move |_| {
+                reads.iter().map(|r| r.get()).sum::<i32>()
+            });
+            assert_eq!(memo(), 499500);
+            create_isomorphic_effect(cx, {
+                let acc = Rc::clone(&acc);
+                move |_| {
+                    acc.set(memo());
+                }
+            });
+            assert_eq!(acc.get(), 499500);
+
+            writes[1].update(|n| *n += 1);
+            writes[10].update(|n| *n += 1);
+            writes[100].update(|n| *n += 1);
+
+            assert_eq!(acc.get(), 499503);
+            assert_eq!(memo(), 499503);
+        })
+        .dispose()
+    });
+
+    runtime.dispose();
+}
+
+#[bench]
+fn l021_scope_creation_and_disposal(b: &mut Bencher) {
+    use l021::*;
+    let runtime = create_runtime();
+
+    b.iter(|| {
+        let acc = Rc::new(Cell::new(0));
+        let disposers = (0..1000)
+            .map(|_| {
+                create_scope(runtime, {
+                    let acc = Rc::clone(&acc);
+                    move |cx| {
+                        let (r, w) = create_signal(cx, 0);
+                        create_isomorphic_effect(cx, {
+                            move |_| {
+                                acc.set(r());
+                            }
+                        });
+                        w.update(|n| *n += 1);
+                    }
+                })
+            })
+            .collect::<Vec<_>>();
+        for disposer in disposers {
+            disposer.dispose();
+        }
+    });
+
+    runtime.dispose();
+}
+
+#[bench]
+fn sycamore_narrowing_down(b: &mut Bencher) {
+    use sycamore::reactive::{
+        create_effect, create_memo, create_scope, create_signal,
+    };
 
     b.iter(|| {
         let d = create_scope(|cx| {
             let acc = Rc::new(Cell::new(0));
-            let sigs = Rc::new((0..1000).map(|n| create_signal(cx, n)).collect::<Vec<_>>());
+            let sigs = Rc::new(
+                (0..1000).map(|n| create_signal(cx, n)).collect::<Vec<_>>(),
+            );
             let memo = create_memo(cx, {
                 let sigs = Rc::clone(&sigs);
                 move || sigs.iter().map(|r| *r.get()).sum::<i32>()
@@ -97,13 +346,80 @@ fn sycamore_create_1000_signals(b: &mut Bencher) {
 }
 
 #[bench]
-fn sycamore_create_and_update_1000_signals(b: &mut Bencher) {
-    use sycamore::reactive::{create_effect, create_memo, create_scope, create_signal};
+fn sycamore_fanning_out(b: &mut Bencher) {
+    use sycamore::reactive::{
+        create_effect, create_memo, create_scope, create_signal,
+    };
+
+    b.iter(|| {
+        let d = create_scope(|cx| {
+            let sig = create_signal(cx, 0);
+            let memos = (0..1000)
+                .map(|_| create_memo(cx, move || sig.get()))
+                .collect::<Vec<_>>();
+            assert_eq!(memos.iter().map(|m| *(*m.get())).sum::<i32>(), 0);
+            sig.set(1);
+            assert_eq!(memos.iter().map(|m| *(*m.get())).sum::<i32>(), 1000);
+        });
+        unsafe { d.dispose() };
+    });
+}
+
+#[bench]
+fn sycamore_deep_creation(b: &mut Bencher) {
+    use sycamore::reactive::*;
+
+    b.iter(|| {
+        let d = create_scope(|cx| {
+            let signal = create_signal(cx, 0);
+            let mut memos = Vec::<&ReadSignal<usize>>::new();
+            for i in 0..1000usize {
+                let prev = memos.get(i.saturating_sub(1)).copied();
+                if let Some(prev) = prev {
+                    memos.push(create_memo(cx, move || *prev.get() + 1));
+                } else {
+                    memos.push(create_memo(cx, move || *signal.get() + 1));
+                }
+            }
+        });
+        unsafe { d.dispose() };
+    });
+}
+
+#[bench]
+fn sycamore_deep_update(b: &mut Bencher) {
+    use sycamore::reactive::*;
+
+    b.iter(|| {
+        let d = create_scope(|cx| {
+            let signal = create_signal(cx, 0);
+            let mut memos = Vec::<&ReadSignal<usize>>::new();
+            for i in 0..1000usize {
+                let prev = memos.get(i.saturating_sub(1)).copied();
+                if let Some(prev) = prev {
+                    memos.push(create_memo(cx, move || *prev.get() + 1));
+                } else {
+                    memos.push(create_memo(cx, move || *signal.get() + 1));
+                }
+            }
+            signal.set(1);
+            assert_eq!(*memos[999].get(), 1001);
+        });
+        unsafe { d.dispose() };
+    });
+}
+#[bench]
+fn sycamore_narrowing_update(b: &mut Bencher) {
+    use sycamore::reactive::{
+        create_effect, create_memo, create_scope, create_signal,
+    };
 
     b.iter(|| {
         let d = create_scope(|cx| {
             let acc = Rc::new(Cell::new(0));
-            let sigs = Rc::new((0..1000).map(|n| create_signal(cx, n)).collect::<Vec<_>>());
+            let sigs = Rc::new(
+                (0..1000).map(|n| create_signal(cx, n)).collect::<Vec<_>>(),
+            );
             let memo = create_memo(cx, {
                 let sigs = Rc::clone(&sigs);
                 move || sigs.iter().map(|r| *r.get()).sum::<i32>()
@@ -129,7 +445,7 @@ fn sycamore_create_and_update_1000_signals(b: &mut Bencher) {
 }
 
 #[bench]
-fn sycamore_create_and_dispose_1000_scopes(b: &mut Bencher) {
+fn sycamore_scope_creation_and_disposal(b: &mut Bencher) {
     use sycamore::reactive::{create_effect, create_scope, create_signal};
 
     b.iter(|| {

docs/COMMON_BUGS.md

@@ -61,3 +61,19 @@ view! {
 	<input prop:value=a on:input=on_input />
 }
 ```
+
+## Build configuration
+
+### Cargo feature resolution in workspaces
+
+A new [version](https://doc.rust-lang.org/cargo/reference/resolver.html#resolver-versions) of Cargo's feature resolver was introduced for the 2021 edition of Rust.
+For single crate projects it will select a resolver version based on the Rust edition in `Cargo.toml`. As there is no Rust edition present for `Cargo.toml` in a workspace, Cargo will default to the pre 2021 edition resolver.
+This can cause issues resulting in non WASM compatible code being built for a WASM target. Seeing `mio` failing to build is often a sign that none WASM compatible code is being included in the build.
+
+The resolver version can be set in the workspace `Cargo.toml` to remedy this issue.
+
+```toml
+[workspace]
+members = ["member1", "member2"]
+resolver = "2"
+```

docs/book/src/02_getting_started.md

@@ -60,7 +60,7 @@ Your directory structure should now look something like this
 leptos_tutorial
 ├── src
 │   └── main.rs
-├── Cargo.html
+├── Cargo.toml
 ├── index.html
 ```
 

docs/book/src/15_global_state.md

@@ -84,7 +84,7 @@ fn FancyMath(cx: Scope) -> impl IntoView {
 This kind of “provide a signal in a parent, consume it in a child” should be familiar
 from the chapter on [parent-child interactions](./view/08_parent_child.md). The same
 pattern you use to communicate between parents and children works for grandparents and
-grandchildren, or any ancestors and descendents: in other words, between “global” state
+grandchildren, or any ancestors and descendants: in other words, between “global” state
 in the root component of your app and any other components anywhere else in the app.
 
 Because of the fine-grained nature of updates, this is usually all you need. However,
@@ -122,6 +122,7 @@ fn App(cx: Scope) -> impl IntoView {
     provide_context(cx, state);
 
     // ...
+}
 ```
 
 Then child components can access “slices” of that state with fine-grained

docs/book/src/SUMMARY.md

@@ -21,10 +21,11 @@
   - [Actions](./async/13_actions.md)
 - [Responding to Changes with `create_effect`](./14_create_effect.md)
 - [Global State Management](./15_global_state.md)
-- [Router]()
-  - [Fundamentals]()
-  - [defining `<Routes/>`]()
-  - [`<A/>`]()
+- [Router](./router/README.md)
+  - [Defining `<Routes/>`](./router/16_routes.md)
+  - [Nested Routing](./router/17_nested_routing.md)
+  - [Params and Queries](./router/18_params_and_queries.md)
+  - [`<A/>`](./router/19_a.md)
   - [`<Form/>`]()
 - [Interlude: Styling — CSS, Tailwind, Style.rs, and more]()
 - [Metadata]()
@@ -33,6 +34,9 @@
   - [`cargo-leptos`]()
   - [Hydration Footguns]()
 - [Request/Response]()
+  - [Extractors]()
+    - [Axum]()
+    - [Actix]()
   - [Headers]()
   - [Cookies]()
 - [Server Functions]()
@@ -41,3 +45,4 @@
   - [`<ActionForm/>`s]()
   - [Turning off WebAssembly]()
 - [Advanced Reactivity]()
+- [Appendix: Optimizing WASM Binary Size]()

docs/book/src/async/11_suspense.md

@@ -69,4 +69,4 @@ Every time one of the resources is reloading, the `"Loading..."` fallback will s
 
 This inversion of the flow of control makes it easier to add or remove individual resources, as you don’t need to handle the matching yourself. It also unlocks some massive performance improvements during server-side rendering, which we’ll talk about during a later chapter.
 
-<iframe src="https://codesandbox.io/p/sandbox/10-async-resources-4z0qt3?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A3%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A3%7D%5D" width="100%" height="1000px"></iframe>
+<iframe src="https://codesandbox.io/p/sandbox/11-suspense-907niv?file=%2Fsrc%2Fmain.rs" width="100%" height="1000px"></iframe>

docs/book/src/async/12_transition.md

@@ -4,6 +4,6 @@ You’ll notice in the `<Suspense/>` example that if you keep reloading the data
 
 `<Transition/>` behaves exactly the same as `<Suspense/>`, but instead of falling back every time, it only shows the fallback the first time. On all subsequent loads, it continues showing the old data until the new data are ready. This can be really handy to prevent the flickering effect, and to allow users to continue interacting with your application.
 
-This example shows how you can create a simple tabbed contact list with `<Transition/>`. When you select a new tab, it continues showing the current contact until the new data laods. This can be a much better user experience than constantly falling back to a loading message.
+This example shows how you can create a simple tabbed contact list with `<Transition/>`. When you select a new tab, it continues showing the current contact until the new data loads. This can be a much better user experience than constantly falling back to a loading message.
 
 <iframe src="https://codesandbox.io/p/sandbox/12-transition-sn38sd?selection=%5B%7B%22endColumn%22%3A15%2C%22endLineNumber%22%3A2%2C%22startColumn%22%3A15%2C%22startLineNumber%22%3A2%7D%5D&file=%2Fsrc%2Fmain.rs" width="100%" height="1000px"></iframe>

docs/book/src/router/16_routes.md

@@ -0,0 +1,101 @@
+# Defining Routes
+
+## Getting Started
+
+It’s easy to get started with the router.
+
+First things first, make sure you’ve added the `leptos_router` package to your dependencies.
+
+> It’s important that the router is a separate package from `leptos` itself. This means that everything in the router can be defined in user-land code. If you want to create your own router, or use no router, you’re completely free to do that!
+
+And import the relevant types from the router, either with something like
+
+```rust
+use leptos_router::{Route, RouteProps, Router, RouterProps, Routes, RoutesProps};
+```
+
+or simply
+
+```rust
+use leptos_router::*;
+```
+
+## Providing the `<Router/>`
+
+Routing behavior is provided by the [`<Router/>`](https://docs.rs/leptos_router/latest/leptos_router/fn.Router.html) component. This should usually be somewhere near the root of your application, the rest of the app.
+
+> You shouldn’t try to use multiple `<Router/>`s in your app. Remember that the router drives global state: if you have multiple routers, which ones decides what to do when the URL changes?
+
+Let’s start with a simple `<App/>` component using the router:
+
+```rust
+use leptos::*;
+use leptos_router::*;
+
+#[component]
+pub fn App(cx: Scope) -> impl IntoView {
+  view! {
+    <Router>
+      <nav>
+        /* ... */
+      </nav>
+      <main>
+        /* ... */
+      </main>
+    </Router>
+  }
+}
+```
+
+## Defining `<Routes/>`
+
+The [`<Routes/>`](https://docs.rs/leptos_router/latest/leptos_router/fn.Routes.html) component is where you define all the routes to which a user can navigate in your application. Each possible route is defined by a [`<Route/>`](https://docs.rs/leptos_router/latest/leptos_router/fn.Route.html) component.
+
+You should place the `<Routes/>` component at the location within your app where you want routes to be rendered. Everything outside `<Routes/>` will be present on every page, so you can leave things like a navigation bar or menu outside the `<Routes/>`.
+
+```rust
+use leptos::*;
+use leptos_router::*;
+
+#[component]
+pub fn App(cx: Scope) -> impl IntoView {
+  view! {
+    <Router>
+      <nav>
+        /* ... */
+      </nav>
+      <main>
+        // all our routes will appear inside <main>
+        <Routes>
+          /* ... */
+        </Routes>
+      </main>
+    </Router>
+  }
+}
+```
+
+Individual routes are defined by providing children to `<Routes/>` with the `<Route/>` component. `<Route/>` takes a `path` and a `view`. When the current location matches `path`, the `view` will be created and displayed.
+
+The `path` can include
+
+- a static path (`/users`),
+- dynamic, named parameters beginning with a colon (`/:id`),
+- and/or a wildcard beginning with an asterisk (`/user/*any`)
+
+The `view` is a function that takes a `Scope` and returns a view.
+
+```rust
+<Routes>
+  <Route path="/" view=|cx| view! { cx, <Home/> }/>
+  <Route path="/users" view=|cx| view! { cx, <Users/> }/>
+  <Route path="/users/:id" view=|cx| view! { cx, <UserProfile/> }/>
+  <Route path="/*any" view=|cx| view! { cx, <NotFound/> }/>
+</Routes>
+```
+
+> The router scores each route to see how good a match it is, so you can define your routes in any order.
+
+Now if you navigate to `/` or to `/users` you’ll get the home page or the `<Users/>`. If you go to `/users/3` or `/blahblah` you’ll get a user profile or your 404 page (`<NotFound/>`). On every navigation, the router determines which `<Route/>` should be matched, and therefore what content should be displayed where the `<Routes/>` component is defined.
+
+Simple enough?

docs/book/src/router/17_nested_routing.md

@@ -0,0 +1,170 @@
+# Nested Routing
+
+We just defined the following set of routes:
+
+```rust
+<Routes>
+  <Route path="/" view=|cx| view! { cx, <Home /> }/>
+  <Route path="/users" view=|cx| view! { cx, <Users /> }/>
+  <Route path="/users/:id" view=|cx| view! { cx, <UserProfile /> }/>
+  <Route path="/*any" view=|cx| view! { cx, <NotFound /> }/>
+</Routes>
+```
+
+There’s a certain amount of duplication here: `/users` and `/users/:id`. This is fine for a small app, but you can probably already tell it won’t scale well. Wouldn’t it be nice if we could nest these routes?
+
+Well... you can!
+
+```rust
+<Routes>
+  <Route path="/" view=|cx| view! { cx, <Home /> }/>
+  <Route path="/users" view=|cx| view! { cx, <Users /> }>
+    <Route path=":id" view=|cx| view! { cx, <UserProfile /> }/>
+  </Route>
+  <Route path="/*any" view=|cx| view! { cx, <NotFound /> }/>
+</Routes>
+```
+
+But wait. We’ve just subtly changed what our application does.
+
+The next section is one of the most important in this entire routing section of the guide. Read it carefully, and feel free to ask questions if there’s anything you don’t understand.
+
+# Nested Routes as Layout
+
+Nested routes are a form of layout, not a method of route definition.
+
+Let me put that another way: The goal of defining nested routes is not primarily to avoid repeating yourself when typing out the paths in your route definitions. It is actually to tell the router to display multiple `<Route/>`s on the page at the same time, side by side.
+
+Let’s look back at our practical example.
+
+```rust
+<Routes>
+  <Route path="/users" view=|cx| view! { cx, <Users /> }/>
+  <Route path="/users/:id" view=|cx| view! { cx, <UserProfile /> }/>
+</Routes>
+```
+
+This means:
+
+- If I go to `/users`, I get the `<Users/>` component.
+- If I go to `/users/3`, I get the `<UserProfile/>` component (with the parameter `id` set to `3`; more on that later)
+
+Let’s say I use nested routes instead:
+
+```rust
+<Routes>
+  <Route path="/users" view=|cx| view! { cx, <Users /> }>
+    <Route path=":id" view=|cx| view! { cx, <UserProfile /> }/>
+  </Route>
+</Routes>
+```
+
+This means:
+
+- If I go to `/users/3`, the path matches two `<Route/>`s: `<Users/>` and `<UserProfile/>`.
+- If I go to `/users`, the path is not matched.
+
+I actually need to add a fallback route
+
+```rust
+<Routes>
+  <Route path="/users" view=|cx| view! { cx, <Users /> }>
+    <Route path=":id" view=|cx| view! { cx, <UserProfile /> }/>
+    <Route path="" view=|cx| view! { cx, <NoUser /> }/>
+  </Route>
+</Routes>
+```
+
+Now:
+
+- If I go to `/users/3`, the path matches `<Users/>` and `<UserProfile/>`.
+- If I go to `/users`, the path matches `<Users/>` and `<NoUser/>`.
+
+When I use nested routes, in other words, each **path** can match multiple **routes**: each URL can render the views provided by multiple `<Route/>` components, at the same time, on the same page.
+
+This may be counter-intuitive, but it’s very powerful, for reasons you’ll hopefully see in a few minutes.
+
+## Why Nested Routing?
+
+Why bother with this?
+
+Most web applications contain levels of navigation that correspond to different parts of the layout. For example, in an email app you might have a URL like `/contacts/greg`, which shows a list of contacts on the left of the screen, and contact details for Greg on the right of the screen. The contact list and the contact details should always appear on the screen at the same time. If there’s no contact selected, maybe you want to show a little instructional text.
+
+You can easily define this with nested routes
+
+```rust
+<Routes>
+  <Route path="/contacts" view=|cx| view! { cx, <ContactList/> }>
+    <Route path=":id" view=|cx| view! { cx, <ContactInfo/> }/>
+    <Route path="" view=|cx| view! { cx,
+      <p>"Select a contact to view more info."</p>
+    }/>
+  </Route>
+</Routes>
+```
+
+You can go even deeper. Say you want to have tabs for each contact’s address, email/phone, and your conversations with them. You can add _another_ set of nested routes inside `:id`:
+
+```rust
+<Routes>
+  <Route path="/contacts" view=|cx| view! { cx, <ContactList/> }>
+    <Route path=":id" view=|cx| view! { cx, <ContactInfo/> }>
+      <Route path="" view=|cx| view! { cx, <EmailAndPhone/> }/>
+      <Route path="address" view=|cx| view! { cx, <Address/> }/>
+      <Route path="messages" view=|cx| view! { cx, <Messages/> }/>
+    </Route>
+    <Route path="" view=|cx| view! { cx,
+      <p>"Select a contact to view more info."</p>
+    }/>
+  </Route>
+</Routes>
+```
+
+> The main page of the [Remix website](https://remix.run/), a React framework from the creators of React Router, has a great visual example if you scroll down, with three levels of nested routing: Sales > Invoices > an invoice.
+
+## `<Outlet/>`
+
+Parent routes do not automatically render their nested routes. After all, they are just components; they don’t know exactly where they should render their children, and “just stick at at the end of the parent component” is not a great answer.
+
+Instead, you tell a parent component where to render any nested components with an `<Outlet/>` component. The `<Outlet/>` simply renders one of two things:
+
+- if there is no nested route that has been matched, it shows nothing
+- if there is a nested route that has been matched, it shows its `view`
+
+That’s all! But it’s important to know and to remember, because it’s a common source of “Why isn’t this working?” frustration. If you don’t provide an `<Outlet/>`, the nested route won’t be displayed.
+
+```rust
+#[component]
+pub fn ContactList(cx: Scope) -> impl IntoView {
+  let contacts = todo!();
+
+  view! { cx,
+    <div style="display: flex">
+      // the contact list
+      <For each=contacts
+        key=|contact| contact.id
+        view=|cx, contact| todo!()
+      >
+      // the nested child, if any
+      // don’t forget this!
+      <Outlet/>
+    </div>
+  }
+}
+```
+
+## Nested Routing and Performance
+
+All of this is nice, conceptually, but again—what’s the big deal?
+
+Performance.
+
+In a fine-grained reactive library like Leptos, it’s always important to do the least amount of rendering work you can. Because we’re working with real DOM nodes and not diffing a virtual DOM, we want to “rerender” components as infrequently as possible. Nested routing makes this extremely easy.
+
+Imagine my contact list example. If I navigate from Greg to Alice to Bob and back to Greg, the contact information needs to change on each navigation. But the `<ContactList/>` should never be rerendered. Not only does this save on rendering performance, it also maintains state in the UI. For example, if I have a search bar at the top of `<ContactList/>`, navigating from Greg to Alice to Bob won’t clear the search.
+
+In fact, in this case, we don’t even need to rerender the `<Contact/>` component when moving between contacts. The router will just reactively update the `:id` parameter as we navigate, allowing us to make fine-grained updates. As we navigate between contacts, we’ll update single text nodes to change the contact’s name, address, and so on, without doing _any_ additional rerendering.
+
+> This sandbox includes a couple features (like nested routing) discussed in this section and the previous one, and a couple we’ll cover in the rest of this chapter. The router is such an integrated system that it makes sense to provide a single example, so don’t be surprised if there’s anything you don’t understand.
+
+<iframe src="https://codesandbox.io/p/sandbox/16-router-fy4tjv?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A3%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A3%7D%5D" width="100%" height="1000px"></iframe>

docs/book/src/router/18_params_and_queries.md

@@ -0,0 +1,77 @@
+# Params and Queries
+
+Static paths are useful for distinguishing between different pages, but almost every application wants to pass data through the URL at some point.
+
+There are two ways you can do this:
+
+1. named route **params** like `id` in `/users/:id`
+2. named route **queries** like `q` in `/search?q=Foo`
+
+Because of the way URLs are built, you can access the query from _any_ `<Route/>` view. You can access route params from the `<Route/>` that defines them or any of its nested children.
+
+Accessing params and queries is pretty simple with a couple of hooks:
+
+- [`use_query`](https://docs.rs/leptos_router/latest/leptos_router/fn.use_query.html) or [`use_query_map`](https://docs.rs/leptos_router/latest/leptos_router/fn.use_query_map.html)
+- [`use_params`](https://docs.rs/leptos_router/latest/leptos_router/fn.use_params.html) or [`use_params_map`](https://docs.rs/leptos_router/latest/leptos_router/fn.use_query_map.html)
+
+Each of these comes with a typed option (`use_query` and `use_params`) and an untyped option (`use_query_map` and `use_params_map`).
+
+The untyped versions hold a simple key-value map. To use the typed versions, derive the [`Params`](https://docs.rs/leptos_router/0.2.3/leptos_router/trait.Params.html) trait on a struct.
+
+> `Params` is a very lightweight trait to convert a flat key-value map of strings into a struct by applying `FromStr` to each field. Because of the flat structure of route params and URL queries, it’s significantly less flexible than something like `serde`; it also adds much less weight to your binary.
+
+```rust
+use leptos::*;
+use leptos_router::*;
+
+#[derive(Params)]
+struct ContactParams {
+	id: usize
+}
+
+#[derive(Params)]
+struct ContactSearch {
+	q: String
+}
+```
+
+> Note: The `Params` derive macro is located at `leptos::Params`, and the `Params` trait is at `leptos_router::Params`. If you avoid using glob imports like `use leptos::*;`, make sure you’re importing the right one for the derive macro.
+
+Now we can use them in a component. Imagine a URL that has both params and a query, like `/contacts/:id?q=Search`.
+
+The typed versions return `Memo<Result<T>, _>`. It’s a Memo so it reacts to changes in the URL. It’s a `Result` because the params or query need to be parsed from the URL, and may or may not be valid.
+
+```rust
+let params = use_params::<ContactParams>(cx);
+let query = use_query::<ContactSearch>(cx);
+
+// id: || -> usize
+let id = move || {
+	params.with(|params| {
+		params
+			.map(|params| params.id)
+			.unwrap_or_default()
+	})
+};
+```
+
+The untyped versions return `Memo<ParamsMap>`. Again, it’s memo to react to changes in the URL. [`ParamsMap`](https://docs.rs/leptos_router/0.2.3/leptos_router/struct.ParamsMap.html) behaves a lot like any other map type, with a `.get()` method that returns `Option<&String>`.
+
+```rust
+let params = use_params_map(cx);
+let query = use_query_map(cx);
+
+// id: || -> Option<String>
+let id = move || {
+	params.with(|params| params.get("id").cloned())
+};
+```
+
+This can get a little messy: deriving a signal that wraps an `Option<_>` or `Result<_>` can involve a couple steps. But it’s worth doing this for two reasons:
+
+1. It’s correct, i.e., it forces you to consider the cases, “What if the user doesn’t pass a value for this query field? What if they pass an invalid value?”
+2. It’s performant. Specifically, when you navigate between different paths that match the same `<Route/>` with only params or the query changing, you can get fine-grained updates to different parts of your app without rerendering. For example, navigating between different contacts in our contact-list example does a targeted update to the name field (and eventually contact info) without needing to replacing or rerender the wrapping `<Contact/>`. This is what fine-grained reactivity is for.
+
+> This is the same example from the previous section. The router is such an integrated system that it makes sense to provide a single example highlighting multiple features, even if we haven’t explain them all yet.
+
+<iframe src="https://codesandbox.io/p/sandbox/16-router-fy4tjv?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A3%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A3%7D%5D" width="100%" height="1000px"></iframe>

docs/book/src/router/19_a.md

@@ -0,0 +1,21 @@
+# The `<A/>` Component
+
+Client-side navigation works perfectly fine with ordinary HTML `<a>` elements. The router adds a listener that handles every click on a `<a>` element and tries to handle it on the client side, i.e., without doing another round trip to the server to request HTML. This is what enables the snappy “single-page app” navigations you’re probably familiar with from most modern web apps.
+
+The router will bail out of handling an `<a>` click under a number of situations
+
+- the click event has had `prevent_default()` called on it
+- the <kbd>Meta</kbd>, <kbd>Alt</kbd>, <kbd>Ctrl</kbd>, or <kbd>Shift</kbd> keys were held during click
+- the `<a>` has a `target` or `download` attribute, or `rel="external"`
+- the link has a different origin from the current location
+
+In other words, the router will only try to do a client-side navigation when it’s pretty sure it can handle it, and it will upgrade every `<a>` element to get this special behavior.
+
+The router also provides an [`<A>`](https://docs.rs/leptos_router/latest/leptos_router/fn.A.html) component, which does two additional things:
+
+1. Correctly resolves relative nested routes. Relative routing with ordinary `<a>` tags can be tricky. For example, if you have a route like `/post/:id`, `<A href="1">` will generate the correct relative route, but `<a href="1">` likely will not (depending on where it appears in your view.) `<A/>` resolves routes relative to the path of the nested route within which it appears.
+2. Sets the `aria-current` attribute to `page` if this link is the active link (i.e., it’s a link to the page you’re on). This is helpful for accessibility and for styling. For example, if you want to set the link a different color if it’s a link to the page you’re currently on, you can match this attribute with a CSS selector.
+
+> Once again, this is the same example. Check out the relative `<A/>` components, and take a look at the CSS in `index.html` to see the ARIA-based styling.
+
+<iframe src="https://codesandbox.io/p/sandbox/16-router-fy4tjv?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A3%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A3%7D%5D" width="100%" height="1000px"></iframe>

docs/book/src/router/README.md

@@ -0,0 +1,23 @@
+# Routing
+
+## The Basics
+
+Routing drives most websites. A router is the answer to the question, “Given this URL, what should appear on the page?”
+
+A URL consists of many parts. For example, the URL `https://leptos.dev/blog/search?q=Search#results` consists of
+
+- a _scheme_: `https`
+- a _domain_: `leptos.dev`
+- a **path**: `/blog/search`
+- a **query** (or **search**): `?q=Search`
+- a _hash_: `#results`
+
+The Leptos Router works with the path and query (`/blog/search?q=Search`). Given this piece of the URL, what should the app render on the page?
+
+## The Philosophy
+
+In most cases, the path should drive what is displayed on the page. From the user’s perspective, for most applications, most major changes in the state of the app should be reflected in the URL. If you copy and paste the URL and open it in another tab, you should find yourself more or less in the same place.
+
+In this sense, the router is really at the heart of the global state management for your application. More than anything else, it drives what is displayed on the page.
+
+The router handles most of this work for you by mapping the current location to particular components.

docs/book/src/testing.md

@@ -107,27 +107,28 @@ fn clear() {
         test_wrapper.clone().unchecked_into(),
         |cx| view! { cx, <SimpleCounter initial_value=10 step=1/> },
     );
+}
 ```
 
 We’ll use some manual DOM operations to grab the `<div>` that wraps
 the whole component, as well as the `clear` button.
 
 ```rust
-    // now we extract the buttons by iterating over the DOM
-    // this would be easier if they had IDs
-    let div = test_wrapper.query_selector("div").unwrap().unwrap();
-    let clear = test_wrapper
-        .query_selector("button")
-        .unwrap()
-        .unwrap()
-        .unchecked_into::<web_sys::HtmlElement>();
+// now we extract the buttons by iterating over the DOM
+// this would be easier if they had IDs
+let div = test_wrapper.query_selector("div").unwrap().unwrap();
+let clear = test_wrapper
+    .query_selector("button")
+    .unwrap()
+    .unwrap()
+    .unchecked_into::<web_sys::HtmlElement>();
 ```
 
 Now we can use ordinary DOM APIs to simulate user interaction.
 
 ```rust
-    // now let's click the `clear` button
-    clear.click();
+// now let's click the `clear` button
+clear.click();
 ```
 
 You can test individual DOM element attributes or text node values. Sometimes
@@ -135,27 +136,27 @@ I like to test the whole view at once. We can do this by testing the element’s
 `outerHTML` against our expectations.
 
 ```rust
-    assert_eq!(
-        div.outer_html(),
-        // here we spawn a mini reactive system to render the test case
-        run_scope(create_runtime(), |cx| {
-            // it's as if we're creating it with a value of 0, right?
-            let (value, set_value) = create_signal(cx, 0);
+assert_eq!(
+    div.outer_html(),
+    // here we spawn a mini reactive system to render the test case
+    run_scope(create_runtime(), |cx| {
+        // it's as if we're creating it with a value of 0, right?
+        let (value, set_value) = create_signal(cx, 0);
 
-            // we can remove the event listeners because they're not rendered to HTML
-            view! { cx,
-                <div>
-                    <button>"Clear"</button>
-                    <button>"-1"</button>
-                    <span>"Value: " {value} "!"</span>
-                    <button>"+1"</button>
-                </div>
-            }
-            // the view returned an HtmlElement<Div>, which is a smart pointer for
-            // a DOM element. So we can still just call .outer_html()
-            .outer_html()
-        })
-    );
+        // we can remove the event listeners because they're not rendered to HTML
+        view! { cx,
+            <div>
+                <button>"Clear"</button>
+                <button>"-1"</button>
+                <span>"Value: " {value} "!"</span>
+                <button>"+1"</button>
+            </div>
+        }
+        // the view returned an HtmlElement<Div>, which is a smart pointer for
+        // a DOM element. So we can still just call .outer_html()
+        .outer_html()
+    })
+);
 ```
 
 That test involved us manually replicating the `view` that’s inside the component.
@@ -164,15 +165,14 @@ with the initial value `0`. This is where our wrapping element comes in: I’ll
 the wrapper’s `innerHTML` against another comparison case.
 
 ```rust
-    assert_eq!(test_wrapper.inner_html(), {
-        let comparison_wrapper = document.create_element("section").unwrap();
-        leptos::mount_to(
-            comparison_wrapper.clone().unchecked_into(),
-            |cx| view! { cx, <SimpleCounter initial_value=0 step=1/>},
-        );
-        comparison_wrapper.inner_html()
-    });
-}
+assert_eq!(test_wrapper.inner_html(), {
+    let comparison_wrapper = document.create_element("section").unwrap();
+    leptos::mount_to(
+        comparison_wrapper.clone().unchecked_into(),
+        |cx| view! { cx, <SimpleCounter initial_value=0 step=1/>},
+    );
+    comparison_wrapper.inner_html()
+});
 ```
 
 This is only a very limited introduction to testing. But I hope it’s useful as you begin to build applications.

docs/book/src/view/02_dynamic_attributes.md

@@ -20,6 +20,12 @@ fn App(cx: Scope) -> impl IntoView {
             on:click=move |_| {
                 set_count.update(|n| *n += 1);
             }
+        >
+            "Click me: "
+            {move || count()}
+        </button>
+    }
+}
 ```
 
 So far, this is just the example from the last chapter.
@@ -30,7 +36,7 @@ Now let’s say I’d like to update the list of CSS classes on this element dyn
 For example, let’s say I want to add the class `red` when the count is odd. I can
 do this using the `class:` syntax. 
 ```rust
-class:red=move || count() & 1 == 1
+class:red=move || count() % 2 == 1
 ```
 `class:` attributes take
 1. the class name, following the colon (`red`)

docs/book/src/view/03_components.md

@@ -24,6 +24,7 @@ view! {
         max="50"
         value=double_count
     />
+}
 ```
 
 But of course, this doesn’t scale very well. If you want to add a third progress
@@ -238,7 +239,7 @@ which allows you to easily pass props with different values.
 
 In this case, it’s helpful to know about the 
 [`Signal`](https://docs.rs/leptos/latest/leptos/struct.Signal.html) type. `Signal`
-is a enumerated type that represents any kind of readable reactive signal. It can 
+is an enumerated type that represents any kind of readable reactive signal. It can 
 be useful when defining APIs for components you’ll want to reuse while passing 
 different sorts of signals. The [`MaybeSignal`](https://docs.rs/leptos/latest/leptos/enum.MaybeSignal.html) type is useful when you want to be able to take either a static or 
 reactive value.

examples/counter/Cargo.toml

@@ -5,7 +5,7 @@ edition = "2021"
 
 [dependencies]
 leptos = { path = "../../leptos" }
-console_log = "0.2"
+console_log = "1"
 log = "0.4"
 console_error_panic_hook = "0.1.7"
 

examples/counter_isomorphic/Cargo.toml

@@ -10,9 +10,8 @@ crate-type = ["cdylib", "rlib"]
 actix-files = { version = "0.6", optional = true }
 actix-web = { version = "4", optional = true, features = ["macros"] }
 broadcaster = "1"
-console_log = "0.2"
+console_log = "1"
 console_error_panic_hook = "0.1"
-serde = { version = "1", features = ["derive"] }
 futures = "0.3"
 cfg-if = "1"
 lazy_static = "1"
@@ -23,9 +22,9 @@ leptos_actix = { path = "../../integrations/actix", optional = true }
 leptos_meta = { path = "../../meta", default-features = false }
 leptos_router = { path = "../../router", default-features = false }
 log = "0.4"
-simple_logger = "4.0.0"
 gloo-net = { git = "https://github.com/rustwasm/gloo" }
 wasm-bindgen = "0.2"
+serde = { version = "1", features = ["derive"] }
 
 [features]
 default = []

examples/counter_isomorphic/src/counters.rs

@@ -198,13 +198,13 @@ pub fn MultiuserCounter(cx: Scope) -> impl IntoView {
         let s = create_signal_from_stream(
             cx,
             source.subscribe("message").unwrap().map(|value| {
-                value
-                    .expect("no message event")
-                    .1
-                    .data()
-                    .as_string()
-                    .expect("expected string value")
-            }),
+                match value {
+                    Ok(value) => {
+                        value.1.data().as_string().expect("expected string value")
+                    },
+                    Err(_) => "0".to_string(),
+                }
+            })
         );
 
         on_cleanup(cx, move || source.close());

examples/counter_isomorphic/src/lib.rs

@@ -10,7 +10,6 @@ cfg_if! {
 
         #[wasm_bindgen]
         pub fn hydrate() {
-            console_error_panic_hook::set_once();
             _ = console_log::init_with_level(log::Level::Debug);
             console_error_panic_hook::set_once();
 

examples/counter_without_macros/Cargo.toml

@@ -5,7 +5,7 @@ edition = "2021"
 
 [dependencies]
 leptos = { path = "../../leptos", features = ["stable"] }
-console_log = "0.2"
+console_log = "1"
 log = "0.4"
 console_error_panic_hook = "0.1.7"
 

examples/counter_without_macros/Makefile.toml

@@ -1,9 +1,9 @@
 [tasks.build]
 command = "cargo"
-args = ["+nightly", "build-all-features"]
+args = ["+stable", "build-all-features"]
 install_crate = "cargo-all-features"
 
 [tasks.check]
 command = "cargo"
-args = ["+nightly", "check-all-features"]
+args = ["+stable", "check-all-features"]
 install_crate = "cargo-all-features"

examples/counter_without_macros/src/lib.rs

@@ -1,48 +1,44 @@
 use leptos::{ev, html::*, *};
 
-pub struct Props {
-    /// The starting value for the counter
-    pub initial_value: i32,
-    /// The change that should be applied each time the button is clicked.
-    pub step: i32,
-}
-
 /// A simple counter view.
-pub fn view(cx: Scope, props: Props) -> impl IntoView {
-    let Props {
-        initial_value,
-        step,
-    } = props;
+// A component is really just a function call: it runs once to create the DOM and reactive system
+pub fn counter(cx: Scope, initial_value: i32, step: i32) -> impl IntoView {
     let (value, set_value) = create_signal(cx, initial_value);
 
+    // elements are created by calling a function with a Scope argument
+    // the function name is the same as the HTML tag name
     div(cx)
-        .child((
-            cx,
+        // children can be added with .child()
+        // this takes any type that implements IntoView as its argument
+        // for example, a string or an HtmlElement<_>
+        .child(
             button(cx)
+                // typed events found in leptos::ev
+                // 1) prevent typos in event names
+                // 2) allow for correct type inference in callbacks
                 .on(ev::click, move |_| set_value.update(|value| *value = 0))
-                .child((cx, "Clear")),
-        ))
-        .child((
-            cx,
+                .child("Clear"),
+        )
+        .child(
             button(cx)
                 .on(ev::click, move |_| {
                     set_value.update(|value| *value -= step)
                 })
-                .child((cx, "-1")),
-        ))
-        .child((
-            cx,
+                .child("-1"),
+        )
+        .child(
             span(cx)
-                .child((cx, "Value: "))
+                .child("Value: ")
+                // reactive values are passed to .child() as a tuple
+                // (Scope, [child function]) so an effect can be created
                 .child((cx, move || value.get()))
-                .child((cx, "!")),
-        ))
-        .child((
-            cx,
+                .child("!"),
+        )
+        .child(
             button(cx)
                 .on(ev::click, move |_| {
                     set_value.update(|value| *value += step)
                 })
-                .child((cx, "+1")),
-        ))
+                .child("+1"),
+        )
 }

examples/counter_without_macros/src/main.rs

@@ -1,16 +1,8 @@
-use counter_without_macros as counter;
+use counter_without_macros::counter;
 use leptos::*;
 
 pub fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
-    mount_to_body(|cx| {
-        counter::view(
-            cx,
-            counter::Props {
-                initial_value: 0,
-                step: 1,
-            },
-        )
-    })
+    mount_to_body(|cx| counter(cx, 0, 1))
 }

examples/counters/Cargo.toml

@@ -6,7 +6,7 @@ edition = "2021"
 [dependencies]
 leptos = { path = "../../leptos" }
 log = "0.4"
-console_log = "0.2"
+console_log = "1"
 console_error_panic_hook = "0.1.7"
 
 [dev-dependencies]

examples/counters/src/main.rs

@@ -2,7 +2,6 @@ use counters::{Counters, CountersProps};
 use leptos::*;
 
 fn main() {
-    console_error_panic_hook::set_once();
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
     mount_to_body(|cx| view! { cx,  <Counters/> })

examples/counters_stable/Cargo.toml

@@ -6,7 +6,7 @@ edition = "2021"
 [dependencies]
 leptos = { path = "../../leptos", features = ["stable"] }
 log = "0.4"
-console_log = "0.2"
+console_log = "1"
 console_error_panic_hook = "0.1.7"
 
 [dev-dependencies]

examples/counters_stable/src/main.rs

@@ -1,7 +1,6 @@
 use leptos::*;
 
 fn main() {
-    console_error_panic_hook::set_once();
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
     mount_to_body(|cx| view! { cx,  <Counters/> })

examples/error_boundary/Cargo.toml

@@ -5,6 +5,6 @@ edition = "2021"
 
 [dependencies]
 leptos = { path = "../../leptos" }
-console_log = "0.2"
+console_log = "1"
 log = "0.4"
 console_error_panic_hook = "0.1.7"

examples/errors_axum/Cargo.toml

@@ -7,10 +7,8 @@ edition = "2021"
 crate-type = ["cdylib", "rlib"]
 
 [dependencies]
-anyhow = "1.0.66"
-console_log = "0.2.0"
+console_log = "1.0.0"
 console_error_panic_hook = "0.1.7"
-futures = "0.3.25"
 cfg-if = "1.0.0"
 leptos = { path = "../../../leptos/leptos", default-features = false, features = [
   "serde",
@@ -18,20 +16,15 @@ leptos = { path = "../../../leptos/leptos", default-features = false, features =
 leptos_axum = { path = "../../../leptos/integrations/axum", default-features = false, optional = true }
 leptos_meta = { path = "../../../leptos/meta", default-features = false }
 leptos_router = { path = "../../../leptos/router", default-features = false }
-leptos_reactive = { path = "../../../leptos/leptos_reactive", default-features = false }
 log = "0.4.17"
+serde = { version = "1", features = ["derive"] }
 simple_logger = "4.0.0"
-serde = { version = "1.0.148", features = ["derive"] }
-serde_json = "1.0.89"
-gloo-net = { version = "0.2.5", features = ["http"] }
-reqwest = { version = "0.11.13", features = ["json"] }
 axum = { version = "0.6.1", optional = true }
 tower = { version = "0.4.13", optional = true }
 tower-http = { version = "0.4", features = ["fs"], optional = true }
 tokio = { version = "1.22.0", features = ["full"], optional = true }
 http = { version = "0.2.8" }
 thiserror = "1.0.38"
-tracing = "0.1.37"
 wasm-bindgen = "0.2"
 
 [features]

examples/errors_axum/src/landing.rs

@@ -70,8 +70,8 @@ pub fn ExampleErrors(cx: Scope) -> impl IntoView {
         </p>
         <p>"The following <div> will always contain an error and cause this page to produce status 500. Check browser dev tools. "</p>
         <div>
-        // note that the error boundries could be placed above in the Router or lower down
-        // in a particular route. The generated errors on the entire page contribue to the
+        // note that the error boundaries could be placed above in the Router or lower down
+        // in a particular route. The generated errors on the entire page contribute to the
         // final status code sent by the server when producing ssr pages.
         <ErrorBoundary fallback=|cx, errors| view!{cx, <ErrorTemplate errors=errors/>}>
             <ReturnsError/>

examples/errors_axum/src/lib.rs

@@ -13,7 +13,6 @@ cfg_if! {
 
         #[wasm_bindgen]
         pub fn hydrate() {
-            console_error_panic_hook::set_once();
             _ = console_log::init_with_level(log::Level::Debug);
             console_error_panic_hook::set_once();
 

examples/fetch/Cargo.toml

@@ -9,7 +9,7 @@ leptos = { path = "../../leptos" }
 reqwasm = "0.5.0"
 serde = { version = "1", features = ["derive"] }
 log = "0.4"
-console_log = "0.2"
+console_log = "1"
 console_error_panic_hook = "0.1.7"
 
 [dev-dependencies]

examples/fetch/src/main.rs

@@ -2,7 +2,6 @@ use fetch::fetch_example;
 use leptos::*;
 
 pub fn main() {
-    console_error_panic_hook::set_once();
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
     mount_to_body(fetch_example)

examples/hackernews/Cargo.toml

@@ -7,12 +7,10 @@ edition = "2021"
 crate-type = ["cdylib", "rlib"]
 
 [dependencies]
-anyhow = "1"
 actix-files = { version = "0.6", optional = true }
 actix-web = { version = "4", optional = true, features = ["macros"] }
-console_log = "0.2"
+console_log = "1"
 console_error_panic_hook = "0.1"
-futures = "0.3"
 cfg-if = "1"
 leptos = { path = "../../leptos", default-features = false, features = [
 	"serde",
@@ -21,15 +19,13 @@ leptos_meta = { path = "../../meta", default-features = false }
 leptos_actix = { path = "../../integrations/actix", default-features = false, optional = true }
 leptos_router = { path = "../../router", default-features = false }
 log = "0.4"
-simple_logger = "4.0.0"
 serde = { version = "1", features = ["derive"] }
-serde_json = "1"
 gloo-net = { version = "0.2", features = ["http"] }
 reqwest = { version = "0.11", features = ["json"] }
+tracing = "0.1"
 # openssl = { version = "0.10", features = ["v110"] }
 wasm-bindgen = "0.2"
 web-sys = { version = "0.3", features = ["AbortController", "AbortSignal"] }
-tracing = "0.1"
 
 [features]
 csr = ["leptos/csr", "leptos_meta/csr", "leptos_router/csr"]

examples/hackernews_axum/Cargo.toml

@@ -7,10 +7,8 @@ edition = "2021"
 crate-type = ["cdylib", "rlib"]
 
 [dependencies]
-anyhow = "1.0.66"
-console_log = "0.2.0"
+console_log = "1.0.0"
 console_error_panic_hook = "0.1.7"
-futures = "0.3.25"
 cfg-if = "1.0.0"
 leptos = { path = "../../leptos", default-features = false, features = [
   "serde",
@@ -21,7 +19,7 @@ leptos_router = { path = "../../router", default-features = false }
 log = "0.4.17"
 simple_logger = "4.0.0"
 serde = { version = "1.0.148", features = ["derive"] }
-serde_json = "1.0.89"
+tracing = "0.1"
 gloo-net = { version = "0.2.5", features = ["http"] }
 reqwest = { version = "0.11.13", features = ["json"] }
 axum = { version = "0.6.1", optional = true }
@@ -31,7 +29,6 @@ tokio = { version = "1.22.0", features = ["full"], optional = true }
 http = { version = "0.2.8", optional = true }
 web-sys = { version = "0.3", features = ["AbortController", "AbortSignal"] }
 wasm-bindgen = "0.2"
-tracing = "0.1"
 
 [features]
 default = ["csr"]

examples/hackernews_axum/src/main.rs

@@ -46,7 +46,6 @@ if #[cfg(feature = "ssr")] {
         use hackernews_axum::*;
 
         pub fn main() {
-            console_error_panic_hook::set_once();
             _ = console_log::init_with_level(log::Level::Debug);
             console_error_panic_hook::set_once();
             mount_to_body(|cx| {

examples/login_with_token_csr_only/client/Cargo.toml

@@ -12,7 +12,7 @@ leptos_router = { version = "0.2.0-alpha2", features = ["stable", "csr"] }
 
 log = "0.4"
 console_error_panic_hook = "0.1"
-console_log = "0.2"
+console_log = "1"
 gloo-net = "0.2"
 gloo-storage = "0.2"
 serde = "1.0"

examples/login_with_token_csr_only/client/Trunk.toml

@@ -1,3 +1,3 @@
 [[proxy]]
 rewrite = "/api/"
-backend = "http://0.0.0.0:3000/"
+backend = "http://127.0.0.1:3000/"

examples/parent_child/Cargo.toml

@@ -5,7 +5,7 @@ edition = "2021"
 
 [dependencies]
 leptos = { path = "../../leptos" }
-console_log = "0.2"
+console_log = "1"
 log = "0.4"
 console_error_panic_hook = "0.1.7"
 web-sys = "0.3"

examples/router/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-console_log = "0.2"
+console_log = "1"
 log = "0.4"
 leptos = { path = "../../leptos" }
 leptos_router = { path = "../../router", features = ["csr"] }

examples/router/src/lib.rs

@@ -28,19 +28,7 @@ pub fn RouterExample(cx: Scope) -> impl IntoView {
             </nav>
             <main>
                 <Routes>
-                    <Route
-                        path=""
-                        view=move |cx| view! { cx,  <ContactList/> }
-                    >
-                        <Route
-                            path=":id"
-                            view=move |cx| view! { cx,  <Contact/> }
-                        />
-                        <Route
-                            path="/"
-                            view=move |_| view! { cx,  <p>"Select a contact."</p> }
-                        />
-                    </Route>
+                    <ContactRoutes/>
                     <Route
                         path="about"
                         view=move |cx| view! { cx,  <About/> }
@@ -59,6 +47,27 @@ pub fn RouterExample(cx: Scope) -> impl IntoView {
     }
 }
 
+// You can define other routes in their own component.
+// Use a #[component(transparent)] that returns a <Route/>.
+#[component(transparent)]
+pub fn ContactRoutes(cx: Scope) -> impl IntoView {
+    view! { cx,
+        <Route
+            path=""
+            view=move |cx| view! { cx,  <ContactList/> }
+        >
+            <Route
+                path=":id"
+                view=move |cx| view! { cx,  <Contact/> }
+            />
+            <Route
+                path="/"
+                view=move |_| view! { cx,  <p>"Select a contact."</p> }
+            />
+        </Route>
+    }
+}
+
 #[component]
 pub fn ContactList(cx: Scope) -> impl IntoView {
     log::debug!("rendering <ContactList/>");
@@ -127,6 +136,10 @@ pub fn Contact(cx: Scope) -> impl IntoView {
         get_contact,
     );
 
+    create_effect(cx, move |_| {
+        log!("params = {:#?}", params.get());
+    });
+
     let contact_display = move || match contact.read(cx) {
         // None => loading, but will be caught by Suspense fallback
         // I'm only doing this explicitly for the example

examples/router/src/main.rs

@@ -2,7 +2,6 @@ use leptos::*;
 use router::*;
 
 pub fn main() {
-    console_error_panic_hook::set_once();
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
     mount_to_body(|cx| view! { cx, <RouterExample/> })

examples/session_auth_axum/Cargo.toml

@@ -8,24 +8,20 @@ crate-type = ["cdylib", "rlib"]
 
 [dependencies]
 anyhow = "1.0.66"
-console_log = "0.2.0"
+console_log = "1.0.0"
 rand = { version = "0.8.5", features = ["min_const_gen"], optional = true }
 console_error_panic_hook = "0.1.7"
 futures = "0.3.25"
 cfg-if = "1.0.0"
-leptos = { version = "0.2.0", default-features = false, features = [
-  "serde",
+leptos = { path = "../../leptos", default-features = false, features = [
+	"serde",
 ] }
-leptos_meta = { version = "0.2.0", default-features = false }
-leptos_axum = { version = "0.2.0", optional = true }
-leptos_router = { version = "0.2.0", default-features = false }
-leptos_reactive = { version = "0.2.0", default-features = false }
+leptos_meta = { path = "../../meta", default-features = false }
+leptos_axum = { path = "../../integrations/axum", optional = true }
+leptos_router = { path = "../../router", default-features = false }
 log = "0.4.17"
 simple_logger = "4.0.0"
 serde = { version = "1.0.148", features = ["derive"] }
-serde_json = "1.0.89"
-gloo-net = { version = "0.2.5", features = ["http"] }
-reqwest = { version = "0.11.13", features = ["json"] }
 axum = { version = "0.6.1", optional = true }
 tower = { version = "0.4.13", optional = true }
 tower-http = { version = "0.4", features = ["fs"], optional = true }
@@ -36,12 +32,15 @@ sqlx = { version = "0.6.2", features = [
 	"sqlite",
 ], optional = true }
 thiserror = "1.0.38"
-tracing = "0.1.37"
 wasm-bindgen = "0.2"
-axum_sessions_auth = { version = "7.0.0", features = [ "sqlite-rustls" ], optional = true }
-axum_database_sessions = { version = "7.0.0", features = [ "sqlite-rustls" ], optional = true }
+axum_sessions_auth = { version = "7.0.0", features = [
+	"sqlite-rustls",
+], optional = true }
+axum_database_sessions = { version = "7.0.0", features = [
+	"sqlite-rustls",
+], optional = true }
 bcrypt = { version = "0.14", optional = true }
-async-trait = {version = "0.1.64", optional = true }
+async-trait = { version = "0.1.64", optional = true }
 
 [features]
 default = ["csr"]

examples/session_auth_axum/src/lib.rs

@@ -15,7 +15,6 @@ cfg_if! {
 
         #[wasm_bindgen]
         pub fn hydrate() {
-            console_error_panic_hook::set_once();
             _ = console_log::init_with_level(log::Level::Debug);
             console_error_panic_hook::set_once();
 

examples/ssr_modes/Cargo.toml

@@ -10,7 +10,7 @@ crate-type = ["cdylib", "rlib"]
 actix-files = { version = "0.6", optional = true }
 actix-web = { version = "4", optional = true, features = ["macros"] }
 console_error_panic_hook = "0.1"
-console_log = "0.2"
+console_log = "1"
 cfg-if = "1"
 lazy_static = "1"
 leptos = { path = "../../leptos", default-features = false, features = [
@@ -21,7 +21,6 @@ leptos_actix = { path = "../../integrations/actix", default-features = false, op
 leptos_router = { path = "../../router", default-features = false }
 log = "0.4"
 serde = { version = "1", features = ["derive"] }
-simple_logger = "4"
 thiserror = "1"
 tokio = { version = "1", features = ["time"] }
 wasm-bindgen = "0.2"

examples/ssr_modes_axum/Cargo.toml

@@ -8,7 +8,7 @@ crate-type = ["cdylib", "rlib"]
 
 [dependencies]
 console_error_panic_hook = "0.1"
-console_log = "0.2"
+console_log = "1"
 cfg-if = "1"
 lazy_static = "1"
 leptos = { path = "../../leptos", default-features = false, features = [
@@ -19,12 +19,11 @@ leptos_axum = { path = "../../integrations/axum", default-features = false, opti
 leptos_router = { path = "../../router", default-features = false }
 log = "0.4"
 serde = { version = "1", features = ["derive"] }
-simple_logger = "4"
 thiserror = "1"
 axum = { version = "0.6.1", optional = true }
 tower = { version = "0.4.13", optional = true }
 tower-http = { version = "0.4", features = ["fs"], optional = true }
-tokio = { version = "1", features = ["time"], optional = true}
+tokio = { version = "1", features = ["time"], optional = true }
 wasm-bindgen = "0.2"
 
 [features]

examples/tailwind/Cargo.toml

@@ -22,7 +22,7 @@ cfg-if = "1.0"
 
 # dependecies for client (enable when csr or hydrate set)
 wasm-bindgen = { version = "0.2", optional = true }
-console_log = { version = "0.2", optional = true }
+console_log = { version = "1", optional = true }
 console_error_panic_hook = { version = "0.1", optional = true }
 
 # dependecies for server (enable when ssr set)

examples/tailwind/src/lib.rs

@@ -9,14 +9,14 @@ cfg_if! {
 
         #[wasm_bindgen]
         pub fn hydrate() {
-                console_error_panic_hook::set_once();
-                _ = console_log::init_with_level(log::Level::Debug);
+            _ = console_log::init_with_level(log::Level::Debug);
+            console_error_panic_hook::set_once();
 
-                log!("hydrate mode - hydrating");
+            log!("hydrate mode - hydrating");
 
-                leptos::mount_to_body(|cx| {
-                    view! { cx,  <App/> }
-                });
+            leptos::mount_to_body(|cx| {
+                view! { cx,  <App/> }
+            });
         }
     }
     else if #[cfg(feature = "csr")] {
@@ -35,5 +35,5 @@ cfg_if! {
                 view! { cx, <App /> }
             });
         }
-  }
+    }
 }

examples/tailwind_csr_trunk/.gitignore

@@ -0,0 +1,10 @@
+# Generated by Cargo
+# will have compiled files and executables
+/target/
+
+# Remove Cargo.lock from gitignore if creating an executable, leave it for libraries
+# More information here https://doc.rust-lang.org/cargo/guide/cargo-toml-vs-cargo-lock.html
+Cargo.lock
+
+# These are backup files generated by rustfmt
+**/*.rs.bk

examples/tailwind_csr_trunk/Cargo.toml

@@ -0,0 +1,21 @@
+[package]
+name = "tailwind-csr-trunk"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+leptos = { version = "0.2", features = [
+  "serde",
+  "csr",
+] }
+leptos_meta = { version = "0.2", features = ["csr"] }
+leptos_router = { version = "0.2", features = ["csr"]  }
+log = "0.4"
+gloo-net = { version = "0.2", features = ["http"] }
+
+
+# dependecies for client (enable when csr or hydrate set)
+wasm-bindgen = { version = "0.2" }
+console_log = { version = "1"}
+console_error_panic_hook = { version = "0.1"}
+

examples/tailwind_csr_trunk/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 henrik
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

examples/tailwind_csr_trunk/Makefile.toml

@@ -0,0 +1,9 @@
+[tasks.build]
+command = "cargo"
+args = ["+nightly", "build-all-features"]
+install_crate = "cargo-all-features"
+
+[tasks.check]
+command = "cargo"
+args = ["+nightly", "check-all-features"]
+install_crate = "cargo-all-features"

examples/tailwind_csr_trunk/README.md

@@ -0,0 +1,70 @@
+# Leptos Starter Template
+
+This is a template demonstrating how to integrate [TailwindCSS](https://tailwindcss.com/) with the [Leptos](https://github.com/leptos-rs/leptos) web framework and the [trunk](https://github.com/thedodd/trunk) tool.
+
+
+Install Tailwind and build the CSS:
+
+`npx tailwindcss -i ./input.css -o ./style/output.css --watch`
+
+Install trunk to client side render this bundle.
+
+`cargo install trunk`
+Then the site can be served with `trunk serve --open`
+
+The browser will automatically open [http://127.0.0.1:8080//](http://127.0.0.1:8080//)
+
+You can begin editing your app at `src/app.rs`.
+
+## Installing Tailwind
+
+You can install Tailwind using `npm`:
+
+```bash
+npm install -D tailwindcss
+```
+
+If you'd rather not use `npm`, you can install the Tailwind binary [here](https://github.com/tailwindlabs/tailwindcss/releases).
+
+## Setting up with VS Code and Additional Tools
+
+If you're using VS Code, add the following to your `settings.json`
+
+```json
+  "emmet.includeLanguages": {
+    "rust": "html",
+    "*.rs": "html"
+  },
+  "tailwindCSS.includeLanguages": {
+      "rust": "html",
+      "*.rs": "html"
+  },
+  "files.associations": {
+      "*.rs": "rust"
+  },
+  "editor.quickSuggestions": {
+    "other": "on",
+    "comments": "on",
+    "strings": true
+  },
+  "css.validate": false,
+```
+
+Install [Tailwind CSS Intellisense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss).
+
+    Install "VS Browser" extension, a browser at the right window.
+    Allow vscode Ports forward: 3000, 3001.
+
+## Notes about Tooling
+
+By default, `cargo-leptos` uses `nightly` Rust, `cargo-generate`, and `sass`. If you run into any trouble, you may need to install one or more of these tools.
+
+1. `rustup toolchain install nightly --allow-downgrade` - make sure you have Rust nightly
+2. `rustup default nightly` - setup nightly as default, or you can use rust-toolchain file later on
+3. `rustup target add wasm32-unknown-unknown` - add the ability to compile Rust to WebAssembly
+4. `cargo install cargo-generate` - install `cargo-generate` binary (should be installed automatically in future)
+5. `npm install -g sass` - install `dart-sass` (should be optional in future
+
+
+## Attribution
+This is based on the original Tailwind example (../examples/tailwind)

examples/tailwind_csr_trunk/end2end/package-lock.json

@@ -0,0 +1,74 @@
+{
+  "name": "end2end",
+  "version": "1.0.0",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "end2end",
+      "version": "1.0.0",
+      "license": "ISC",
+      "devDependencies": {
+        "@playwright/test": "^1.28.0"
+      }
+    },
+    "node_modules/@playwright/test": {
+      "version": "1.28.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.28.0.tgz",
+      "integrity": "sha512-vrHs5DFTPwYox5SGKq/7TDn/S4q6RA1zArd7uhO6EyP9hj3XgZBBM12ktMbnDQNxh/fL1IUKsTNLxihmsU38lQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*",
+        "playwright-core": "1.28.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "18.11.9",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.9.tgz",
+      "integrity": "sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg==",
+      "dev": true
+    },
+    "node_modules/playwright-core": {
+      "version": "1.28.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.28.0.tgz",
+      "integrity": "sha512-nJLknd28kPBiCNTbqpu6Wmkrh63OEqJSFw9xOfL9qxfNwody7h6/L3O2dZoWQ6Oxcm0VOHjWmGiCUGkc0X3VZA==",
+      "dev": true,
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    }
+  },
+  "dependencies": {
+    "@playwright/test": {
+      "version": "1.28.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.28.0.tgz",
+      "integrity": "sha512-vrHs5DFTPwYox5SGKq/7TDn/S4q6RA1zArd7uhO6EyP9hj3XgZBBM12ktMbnDQNxh/fL1IUKsTNLxihmsU38lQ==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*",
+        "playwright-core": "1.28.0"
+      }
+    },
+    "@types/node": {
+      "version": "18.11.9",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.9.tgz",
+      "integrity": "sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg==",
+      "dev": true
+    },
+    "playwright-core": {
+      "version": "1.28.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.28.0.tgz",
+      "integrity": "sha512-nJLknd28kPBiCNTbqpu6Wmkrh63OEqJSFw9xOfL9qxfNwody7h6/L3O2dZoWQ6Oxcm0VOHjWmGiCUGkc0X3VZA==",
+      "dev": true
+    }
+  }
+}

examples/tailwind_csr_trunk/end2end/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "end2end",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {},
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@playwright/test": "^1.28.0"
+  }
+}

examples/tailwind_csr_trunk/end2end/playwright.config.ts

@@ -0,0 +1,107 @@
+import type { PlaywrightTestConfig } from "@playwright/test";
+import { devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+const config: PlaywrightTestConfig = {
+  testDir: "./tests",
+  /* Maximum time one test can run for. */
+  timeout: 30 * 1000,
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 5000,
+  },
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: "html",
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+    actionTimeout: 0,
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://localhost:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: {
+        ...devices["Desktop Chrome"],
+      },
+    },
+
+    {
+      name: "firefox",
+      use: {
+        ...devices["Desktop Firefox"],
+      },
+    },
+
+    {
+      name: "webkit",
+      use: {
+        ...devices["Desktop Safari"],
+      },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: {
+    //     ...devices['Pixel 5'],
+    //   },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: {
+    //     ...devices['iPhone 12'],
+    //   },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: {
+    //     channel: 'msedge',
+    //   },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: {
+    //     channel: 'chrome',
+    //   },
+    // },
+  ],
+
+  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
+  // outputDir: 'test-results/',
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   port: 3000,
+  // },
+};
+
+export default config;

examples/tailwind_csr_trunk/end2end/tests/example.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from "@playwright/test";
+
+test("homepage has title and links to intro page", async ({ page }) => {
+  await page.goto("http://localhost:8080/");
+
+  await expect(page).toHaveTitle("Leptos • Counter with Tailwind");
+
+  await expect(page.locator("h2")).toHaveText("Welcome to Leptos with Tailwind");
+});

examples/tailwind_csr_trunk/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <link data-trunk rel="rust" data-wasm-opt="z" />
+    <link data-trunk rel="icon" type="image/ico" href="/public/favicon.ico" />
+    <link data-trunk rel="css" href="/style/output.css" />
+    <title>Leptos • Counter with Tailwind</title>
+</head>
+
+<body></body>
+
+</html>

examples/tailwind_csr_trunk/input.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

examples/tailwind_csr_trunk/src/app.rs

@@ -0,0 +1,43 @@
+use leptos::*;
+use leptos_meta::*;
+use leptos_router::*;
+
+#[component]
+pub fn App(cx: Scope) -> impl IntoView {
+    provide_meta_context(cx);
+
+    view! {
+        cx,
+        <Stylesheet id="leptos" href="/pkg/tailwind.css"/>
+        <Link rel="shortcut icon" type_="image/ico" href="/favicon.ico"/>
+        <Router>
+            <Routes>
+                <Route path="" view=  move |cx| view! { cx, <Home/> }/>
+            </Routes>
+        </Router>
+    }
+}
+
+#[component]
+fn Home(cx: Scope) -> impl IntoView {
+    let (count, set_count) = create_signal(cx, 0);
+
+    view! { cx,
+        <div class="my-0 mx-auto max-w-3xl text-center">
+            <h2 class="p-6 text-4xl">"Welcome to Leptos with Tailwind"</h2>
+            <p class="px-10 pb-10 text-left">"Tailwind will scan your Rust files for Tailwind class names and compile them into a CSS file."</p>
+            <button
+                class="bg-amber-600 hover:bg-sky-700 px-5 py-3 text-white rounded-lg"
+                on:click=move |_| set_count.update(|count| *count += 1)
+            >
+                "Something's here | "
+                {move || if count() == 0 {
+                    "Click me!".to_string()
+                } else {
+                    count().to_string()
+                }}
+                " | Some more text"
+            </button>
+        </div>
+    }
+}

examples/tailwind_csr_trunk/src/main.rs

@@ -0,0 +1,15 @@
+mod app;
+
+use app::*;
+use leptos::*;
+
+pub fn main() {
+    _ = console_log::init_with_level(log::Level::Debug);
+    console_error_panic_hook::set_once();
+
+    log!("csr mode - mounting to body");
+
+    mount_to_body(|cx| {
+        view! { cx, <App /> }
+    });
+}

examples/tailwind_csr_trunk/style/output.css

@@ -0,0 +1,583 @@
+/*
+! tailwindcss v3.2.7 | MIT License | https://tailwindcss.com
+*/
+
+/*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  /* 1 */
+  border-width: 0;
+  /* 2 */
+  border-style: solid;
+  /* 2 */
+  border-color: #e5e7eb;
+  /* 2 */
+}
+
+::before,
+::after {
+  --tw-content: '';
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
+*/
+
+html {
+  line-height: 1.5;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+  -moz-tab-size: 4;
+  /* 3 */
+  -o-tab-size: 4;
+     tab-size: 4;
+  /* 3 */
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  /* 4 */
+  font-feature-settings: normal;
+  /* 5 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+  margin: 0;
+  /* 1 */
+  line-height: inherit;
+  /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0;
+  /* 1 */
+  color: inherit;
+  /* 2 */
+  border-top-width: 1px;
+  /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font family by default.
+2. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0;
+  /* 1 */
+  border-color: inherit;
+  /* 2 */
+  border-collapse: collapse;
+  /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  font-weight: inherit;
+  /* 1 */
+  line-height: inherit;
+  /* 1 */
+  color: inherit;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+  padding: 0;
+  /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button;
+  /* 1 */
+  background-color: transparent;
+  /* 2 */
+  background-image: none;
+  /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  /* 1 */
+  vertical-align: middle;
+  /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Make elements with the HTML hidden attribute stay hidden by default */
+
+[hidden] {
+  display: none;
+}
+
+*, ::before, ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.my-0 {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+.max-w-3xl {
+  max-width: 48rem;
+}
+
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
+.bg-amber-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(217 119 6 / var(--tw-bg-opacity));
+}
+
+.p-6 {
+  padding: 1.5rem;
+}
+
+.px-10 {
+  padding-left: 2.5rem;
+  padding-right: 2.5rem;
+}
+
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.pb-10 {
+  padding-bottom: 2.5rem;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-4xl {
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+}
+
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.hover\:bg-sky-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(3 105 161 / var(--tw-bg-opacity));
+}

examples/tailwind_csr_trunk/tailwind.config.js

@@ -0,0 +1,10 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: { 
+    files: ["*.html", "./src/**/*.rs"],
+  },
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

examples/todo_app_sqlite/Cargo.toml

@@ -11,7 +11,7 @@ actix-files = { version = "0.6.2", optional = true }
 actix-web = { version = "4.2.1", optional = true, features = ["macros"] }
 anyhow = "1.0.68"
 broadcaster = "1.0.0"
-console_log = "0.2.0"
+console_log = "1.0.0"
 console_error_panic_hook = "0.1.7"
 serde = { version = "1.0.152", features = ["derive"] }
 futures = "0.3.25"

examples/todo_app_sqlite/Makefile.toml

@@ -4,6 +4,15 @@ args = ["+nightly", "build-all-features"]
 install_crate = "cargo-all-features"
 
 [tasks.check]
+clear = true
+dependencies = ["check-debug", "check-release"]
+
+[tasks.check-debug]
 command = "cargo"
 args = ["+nightly", "check-all-features"]
 install_crate = "cargo-all-features"
+
+[tasks.check-release]
+command = "cargo"
+args = ["+nightly", "check-all-features", "--release"]
+install_crate = "cargo-all-features"

examples/todo_app_sqlite_axum/Cargo.toml

@@ -7,8 +7,7 @@ edition = "2021"
 crate-type = ["cdylib", "rlib"]
 
 [dependencies]
-anyhow = "1.0.66"
-console_log = "0.2.0"
+console_log = "1.0.0"
 console_error_panic_hook = "0.1.7"
 futures = "0.3.25"
 cfg-if = "1.0.0"
@@ -18,13 +17,9 @@ leptos = { path = "../../leptos", default-features = false, features = [
 leptos_axum = { path = "../../integrations/axum", default-features = false, optional = true }
 leptos_meta = { path = "../../meta", default-features = false }
 leptos_router = { path = "../../router", default-features = false }
-leptos_reactive = { path = "../../leptos_reactive", default-features = false }
 log = "0.4.17"
 simple_logger = "4.0.0"
-serde = { version = "1.0.148", features = ["derive"] }
-serde_json = "1.0.89"
-gloo-net = { version = "0.2.5", features = ["http"] }
-reqwest = { version = "0.11.13", features = ["json"] }
+serde = { version = "1", features = ["derive"] }
 axum = { version = "0.6.1", optional = true }
 tower = { version = "0.4.13", optional = true }
 tower-http = { version = "0.4", features = ["fs"], optional = true }
@@ -35,7 +30,6 @@ sqlx = { version = "0.6.2", features = [
 	"sqlite",
 ], optional = true }
 thiserror = "1.0.38"
-tracing = "0.1.37"
 wasm-bindgen = "0.2"
 
 [features]

examples/todo_app_sqlite_axum/src/lib.rs

@@ -13,7 +13,6 @@ cfg_if! {
 
         #[wasm_bindgen]
         pub fn hydrate() {
-            console_error_panic_hook::set_once();
             _ = console_log::init_with_level(log::Level::Debug);
             console_error_panic_hook::set_once();
 

examples/todo_app_sqlite_viz/Cargo.toml

@@ -7,13 +7,12 @@ edition = "2021"
 crate-type = ["cdylib", "rlib"]
 
 [dependencies]
-anyhow = "1.0.66"
-console_log = "0.2.0"
+console_log = "1.0.0"
 console_error_panic_hook = "0.1.7"
 futures = "0.3.25"
 cfg-if = "1.0.0"
 leptos = { path = "../../leptos", default-features = false, features = [
-	"serde",
+  "serde",
 ] }
 leptos_viz = { path = "../../integrations/viz", default-features = false, optional = true }
 leptos_meta = { path = "../../meta", default-features = false }
@@ -21,19 +20,15 @@ leptos_router = { path = "../../router", default-features = false }
 leptos_reactive = { path = "../../leptos_reactive", default-features = false }
 log = "0.4.17"
 simple_logger = "4.0.0"
-serde = { version = "1.0.148", features = ["derive"] }
-serde_json = "1.0.89"
-gloo-net = { version = "0.2.5", features = ["http"] }
-reqwest = { version = "0.11.13", features = ["json"] }
+serde = { version = "1", features = ["derive"] }
 viz = { version = "0.4.8", features = ["serve"], optional = true }
 tokio = { version = "1.25.0", features = ["full"], optional = true }
 http = { version = "0.2.8" }
 sqlx = { version = "0.6.2", features = [
-	"runtime-tokio-rustls",
-	"sqlite",
+  "runtime-tokio-rustls",
+  "sqlite",
 ], optional = true }
 thiserror = "1.0.38"
-tracing = "0.1.37"
 wasm-bindgen = "0.2"
 
 [features]
@@ -47,7 +42,7 @@ ssr = [
   "leptos/ssr",
   "leptos_meta/ssr",
   "leptos_router/ssr",
-  "dep:leptos_viz"
+  "dep:leptos_viz",
 ]
 
 [package.metadata.cargo-all-features]

examples/todo_app_sqlite_viz/src/lib.rs

@@ -13,7 +13,6 @@ cfg_if! {
 
         #[wasm_bindgen]
         pub fn hydrate() {
-            console_error_panic_hook::set_once();
             _ = console_log::init_with_level(log::Level::Debug);
             console_error_panic_hook::set_once();
 

examples/todomvc/Cargo.toml

@@ -6,7 +6,7 @@ edition = "2021"
 [dependencies]
 leptos = { path = "../../leptos", default-features = false }
 log = "0.4"
-console_log = "0.2"
+console_log = "1"
 console_error_panic_hook = "0.1.7"
 uuid = { version = "1", features = ["v4", "js", "serde"] }
 serde = { version = "1", features = ["derive"] }

examples/todomvc/src/main.rs

@@ -1,7 +1,6 @@
 use leptos::*;
 pub use todomvc::*;
 fn main() {
-    console_error_panic_hook::set_once();
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
     mount_to_body(|cx| view! { cx,  <TodoMVC/> })

integrations/actix/src/lib.rs

@@ -20,7 +20,7 @@ use leptos::{
     leptos_server::{server_fn_by_path, Payload},
     *,
 };
-use leptos_integration_utils::{build_async_response, html_parts};
+use leptos_integration_utils::{build_async_response, html_parts_separated};
 use leptos_meta::*;
 use leptos_router::*;
 use parking_lot::RwLock;
@@ -94,7 +94,7 @@ impl ResponseOptions {
     }
 }
 
-/// Provides an easy way to redirect the user from within a server function. Mimicing the Remix `redirect()`,
+/// Provides an easy way to redirect the user from within a server function. Mimicking the Remix `redirect()`,
 /// it sets a [StatusCode] of 302 and a [LOCATION](header::LOCATION) header with the provided value.
 /// If looking to redirect from the client, `leptos_router::use_navigate()` should be used instead.
 pub fn redirect(cx: leptos::Scope, path: &str) {
@@ -340,14 +340,15 @@ where
 
 /// Returns an Actix [Route](actix_web::Route) that listens for a `GET` request and tries
 /// to route it using [leptos_router], serving an in-order HTML stream of your application.
-/// This stream will pause at each `<Suspense/>` node and wait for it to resolve befores
+/// This stream will pause at each `<Suspense/>` node and wait for it to resolve before
 /// sending down its HTML. The app will become interactive once it has fully loaded.
 ///
 /// The provides a [MetaContext] and a [RouterIntegrationContext] to app’s context before
 /// rendering it, and includes any meta tags injected using [leptos_meta].
 ///
-/// The HTML stream is rendered using [render_to_stream_in_order], and includes everything described in
-/// the documentation for that function.
+/// The HTML stream is rendered using
+/// [render_to_stream_in_order](leptos::ssr::render_to_stream_in_order),
+/// and includes everything described in the documentation for that function.
 ///
 /// This can then be set up at an appropriate route in your application:
 /// ```
@@ -409,8 +410,8 @@ where
 /// The provides a [MetaContext] and a [RouterIntegrationContext] to the app’s context before
 /// rendering it, and includes any meta tags injected using [leptos_meta].
 ///
-/// The HTML stream is rendered using [render_to_string_async], and includes everything described in
-/// the documentation for that function.
+/// The HTML stream is rendered using [render_to_string_async](leptos::ssr::render_to_string_async), and
+/// includes everything described in the documentation for that function.
 ///
 /// This can then be set up at an appropriate route in your application:
 /// ```
@@ -728,7 +729,7 @@ async fn stream_app(
     let (stream, runtime, scope) =
         render_to_stream_with_prefix_undisposed_with_context(
             app,
-            move |cx| generate_head_metadata(cx).into(),
+            move |cx| generate_head_metadata_separated(cx).1.into(),
             additional_context,
         );
 
@@ -745,7 +746,7 @@ async fn stream_app_in_order(
         leptos::ssr::render_to_stream_in_order_with_prefix_undisposed_with_context(
             app,
             move |cx| {
-                generate_head_metadata(cx).into()
+                generate_head_metadata_separated(cx).1.into()
             },
             additional_context,
         );
@@ -762,7 +763,7 @@ async fn build_stream_response(
 ) -> HttpResponse {
     let cx = leptos::Scope { runtime, id: scope };
     let (head, tail) =
-        html_parts(options, use_context::<MetaContext>(cx).as_ref());
+        html_parts_separated(options, use_context::<MetaContext>(cx).as_ref());
 
     let mut stream = Box::pin(
         futures::stream::once(async move { head.clone() })

integrations/axum/Cargo.toml

@@ -15,7 +15,6 @@ hyper = "0.14.23"
 leptos = { workspace = true, features = ["ssr"] }
 leptos_meta = { workspace = true, features = ["ssr"] }
 leptos_router = { workspace = true, features = ["ssr"] }
-leptos_config = { workspace = true }
 leptos_integration_utils = { workspace = true }
 tokio = { version = "1", features = ["full"] }
 parking_lot = "0.12.1"

integrations/axum/src/lib.rs

@@ -27,8 +27,8 @@ use leptos::{
     ssr::*,
     *,
 };
-use leptos_integration_utils::{build_async_response, html_parts};
-use leptos_meta::{generate_head_metadata, MetaContext};
+use leptos_integration_utils::{build_async_response, html_parts_separated};
+use leptos_meta::{generate_head_metadata_separated, MetaContext};
 use leptos_router::*;
 use parking_lot::RwLock;
 use std::{io, pin::Pin, sync::Arc};
@@ -95,7 +95,7 @@ impl ResponseOptions {
     }
 }
 
-/// Provides an easy way to redirect the user from within a server function. Mimicing the Remix `redirect()`,
+/// Provides an easy way to redirect the user from within a server function. Mimicking the Remix `redirect()`,
 /// it sets a StatusCode of 302 and a LOCATION header with the provided value.
 /// If looking to redirect from the client, `leptos_router::use_navigate()` should be used instead
 pub fn redirect(cx: leptos::Scope, path: &str) {
@@ -128,7 +128,7 @@ pub async fn generate_request_parts(req: Request<Body>) -> RequestParts {
 
 /// Decomposes an HTTP request into its parts, allowing you to read its headers
 /// and other data without consuming the body. Creates a new Request from the
-/// original parts for further processsing
+/// original parts for further processing
 pub async fn generate_request_and_parts(
     req: Request<Body>,
 ) -> (Request<Body>, RequestParts) {
@@ -147,8 +147,9 @@ pub async fn generate_request_and_parts(
     (request, request_parts)
 }
 
-/// A struct to hold the http::request::Request and allow users to take ownership of it
-/// Requred by Request not being Clone. See this issue for eventual resolution: https://github.com/hyperium/http/pull/574
+/// A struct to hold the [`http::request::Request`] and allow users to take ownership of it
+/// Required by `Request` not being `Clone`. See
+/// [this issue](https://github.com/hyperium/http/pull/574) for eventual resolution:
 #[derive(Debug, Default)]
 pub struct LeptosRequest<B>(Arc<RwLock<Option<Request<B>>>>);
 
@@ -158,12 +159,12 @@ impl<B> Clone for LeptosRequest<B> {
     }
 }
 impl<B> LeptosRequest<B> {
-    /// Overwrite the contents of a LeptosRequest with a new Request<B>
+    /// Overwrite the contents of a LeptosRequest with a new `Request<B>`
     pub fn overwrite(&self, req: Option<Request<B>>) {
         let mut writable = self.0.write();
         *writable = req
     }
-    /// Consume the inner Request<B> inside the LeptosRequest and return it
+    /// Consume the inner `Request<B>` inside the LeptosRequest and return it
     ///```rust, ignore
     /// use axum::{
     /// RequestPartsExt,
@@ -198,8 +199,9 @@ impl<B> LeptosRequest<B> {
     }
 }
 /// Generate a wrapper for the http::Request::Request type that allows one to
-/// processs it, access the body, and use axum Extractors on it.
-/// Requred by Request not being Clone. See this issue for eventual resolution: https://github.com/hyperium/http/pull/574
+/// process it, access the body, and use axum Extractors on it.
+/// Required by Request not being Clone. See
+/// [this issue](https://github.com/hyperium/http/pull/574) for eventual resolution:
 pub async fn generate_leptos_request<B>(req: Request<B>) -> LeptosRequest<B>
 where
     B: Default + std::fmt::Debug,
@@ -495,7 +497,7 @@ where
 
 /// Returns an Axum [Handler](axum::handler::Handler) that listens for a `GET` request and tries
 /// to route it using [leptos_router], serving an in-order HTML stream of your application.
-/// This stream will pause at each `<Suspense/>` node and wait for it to resolve befores
+/// This stream will pause at each `<Suspense/>` node and wait for it to resolve before
 /// sending down its HTML. The app will become interactive once it has fully loaded.
 ///
 /// The provides a [MetaContext] and a [RouterIntegrationContext] to app’s context before
@@ -653,7 +655,7 @@ where
                                             let (bundle, runtime, scope) =
                                                 leptos::leptos_dom::ssr::render_to_stream_with_prefix_undisposed_with_context(
                                                     app,
-                                                    |cx| generate_head_metadata(cx).into(),
+                                                    |cx| generate_head_metadata_separated(cx).1.into(),
                                                     add_context,
                                                 );
 
@@ -711,7 +713,7 @@ async fn forward_stream(
 ) {
     let cx = Scope { runtime, id: scope };
     let (head, tail) =
-        html_parts(options, use_context::<MetaContext>(cx).as_ref());
+        html_parts_separated(options, use_context::<MetaContext>(cx).as_ref());
 
     _ = tx.send(head).await;
     let mut shell = Box::pin(bundle);
@@ -735,7 +737,7 @@ async fn forward_stream(
 
 /// Returns an Axum [Handler](axum::handler::Handler) that listens for a `GET` request and tries
 /// to route it using [leptos_router], serving an in-order HTML stream of your application.
-/// This stream will pause at each `<Suspense/>` node and wait for it to resolve befores
+/// This stream will pause at each `<Suspense/>` node and wait for it to resolve before
 /// sending down its HTML. The app will become interactive once it has fully loaded.
 ///
 /// This version allows us to pass Axum State/Extension/Extractor or other infro from Axum or network
@@ -822,7 +824,7 @@ where
                                             let (bundle, runtime, scope) =
                                                 leptos::ssr::render_to_stream_in_order_with_prefix_undisposed_with_context(
                                                     app,
-                                                    |cx| generate_head_metadata(cx).into(),
+                                                    |cx| generate_head_metadata_separated(cx).1.into(),
                                                     add_context,
                                                 );
 

integrations/utils/Cargo.toml

@@ -12,5 +12,4 @@ futures = "0.3"
 leptos = { workspace = true, features = ["ssr"] }
 leptos_hot_reload = { workspace = true }
 leptos_meta = { workspace = true, features = ["ssr"] }
-leptos_router = { workspace = true, features = ["ssr"] }
 leptos_config = { workspace = true }

integrations/utils/src/lib.rs

@@ -3,25 +3,10 @@ use leptos::{use_context, RuntimeId, ScopeId};
 use leptos_config::LeptosOptions;
 use leptos_meta::MetaContext;
 
-pub fn html_parts(
-    options: &LeptosOptions,
-    meta: Option<&MetaContext>,
-) -> (String, &'static str) {
-    let pkg_path = &options.site_pkg_dir;
-    let output_name = &options.output_name;
-
-    // Because wasm-pack adds _bg to the end of the WASM filename, and we want to mantain compatibility with it's default options
-    // we add _bg to the wasm files if cargo-leptos doesn't set the env var LEPTOS_OUTPUT_NAME
-    // Otherwise we need to add _bg because wasm_pack always does. This is not the same as options.output_name, which is set regardless
-    let mut wasm_output_name = output_name.clone();
-    if std::env::var("LEPTOS_OUTPUT_NAME").is_err() {
-        wasm_output_name.push_str("_bg");
-    }
-
+fn autoreload(options: &LeptosOptions) -> String {
     let site_ip = &options.site_addr.ip().to_string();
     let reload_port = options.reload_port;
-
-    let leptos_autoreload = match std::env::var("LEPTOS_WATCH").is_ok() {
+    match std::env::var("LEPTOS_WATCH").is_ok() {
         true => format!(
             r#"
                 <script crossorigin="">(function () {{
@@ -52,7 +37,25 @@ pub fn html_parts(
             leptos_hot_reload::HOT_RELOAD_JS
         ),
         false => "".to_string(),
-    };
+    }
+}
+
+pub fn html_parts(
+    options: &LeptosOptions,
+    meta: Option<&MetaContext>,
+) -> (String, &'static str) {
+    let pkg_path = &options.site_pkg_dir;
+    let output_name = &options.output_name;
+
+    // Because wasm-pack adds _bg to the end of the WASM filename, and we want to mantain compatibility with it's default options
+    // we add _bg to the wasm files if cargo-leptos doesn't set the env var LEPTOS_OUTPUT_NAME
+    // Otherwise we need to add _bg because wasm_pack always does. This is not the same as options.output_name, which is set regardless
+    let mut wasm_output_name = output_name.clone();
+    if std::env::var("LEPTOS_OUTPUT_NAME").is_err() {
+        wasm_output_name.push_str("_bg");
+    }
+
+    let leptos_autoreload = autoreload(options);
 
     let html_metadata =
         meta.and_then(|mc| mc.html.as_string()).unwrap_or_default();
@@ -72,6 +75,46 @@ pub fn html_parts(
     (head, tail)
 }
 
+pub fn html_parts_separated(
+    options: &LeptosOptions,
+    meta: Option<&MetaContext>,
+) -> (String, &'static str) {
+    let pkg_path = &options.site_pkg_dir;
+    let output_name = &options.output_name;
+
+    // Because wasm-pack adds _bg to the end of the WASM filename, and we want to mantain compatibility with it's default options
+    // we add _bg to the wasm files if cargo-leptos doesn't set the env var LEPTOS_OUTPUT_NAME
+    // Otherwise we need to add _bg because wasm_pack always does. This is not the same as options.output_name, which is set regardless
+    let mut wasm_output_name = output_name.clone();
+    if std::env::var("LEPTOS_OUTPUT_NAME").is_err() {
+        wasm_output_name.push_str("_bg");
+    }
+
+    let leptos_autoreload = autoreload(options);
+
+    let html_metadata =
+        meta.and_then(|mc| mc.html.as_string()).unwrap_or_default();
+    let head = meta
+        .as_ref()
+        .map(|meta| meta.dehydrate())
+        .unwrap_or_default();
+    let head = format!(
+        r#"<!DOCTYPE html>
+            <html{html_metadata}>
+                <head>
+                    <meta charset="utf-8"/>
+                    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+                    {head}
+                    <link rel="modulepreload" href="/{pkg_path}/{output_name}.js">
+                    <link rel="preload" href="/{pkg_path}/{wasm_output_name}.wasm" as="fetch" type="application/wasm" crossorigin="">
+                    <script type="module">import init, {{ hydrate }} from '/{pkg_path}/{output_name}.js'; init('/{pkg_path}/{wasm_output_name}.wasm').then(hydrate);</script>
+                    {leptos_autoreload}
+                    "#
+    );
+    let tail = "</body></html>";
+    (head, tail)
+}
+
 pub async fn build_async_response(
     stream: impl Stream<Item = String> + 'static,
     options: &LeptosOptions,
@@ -86,7 +129,7 @@ pub async fn build_async_response(
 
     let cx = leptos::Scope { runtime, id: scope };
     let (head, tail) =
-        html_parts(options, use_context::<MetaContext>(cx).as_ref());
+        html_parts_separated(options, use_context::<MetaContext>(cx).as_ref());
 
     // in async, we load the meta content *now*, after the suspenses have resolved
     let meta = use_context::<MetaContext>(cx);

integrations/viz/Cargo.toml

@@ -15,7 +15,6 @@ hyper = "0.14.23"
 leptos = { workspace = true, features = ["ssr"] }
 leptos_meta = { workspace = true, features = ["ssr"] }
 leptos_router = { workspace = true, features = ["ssr"] }
-leptos_config = { workspace = true }
 leptos_integration_utils = { workspace = true }
 tokio = { version = "1", features = ["full"] }
 parking_lot = "0.12.1"

integrations/viz/src/lib.rs

@@ -17,8 +17,8 @@ use leptos::{
     ssr::*,
     *,
 };
-use leptos_integration_utils::{build_async_response, html_parts};
-use leptos_meta::{generate_head_metadata, MetaContext};
+use leptos_integration_utils::{build_async_response, html_parts_separated};
+use leptos_meta::{generate_head_metadata_separated, MetaContext};
 use leptos_router::*;
 use parking_lot::RwLock;
 use std::{pin::Pin, sync::Arc};
@@ -90,7 +90,7 @@ impl ResponseOptions {
     }
 }
 
-/// Provides an easy way to redirect the user from within a server function. Mimicing the Remix `redirect()`,
+/// Provides an easy way to redirect the user from within a server function. Mimicking the Remix `redirect()`,
 /// it sets a StatusCode of 302 and a LOCATION header with the provided value.
 /// If looking to redirect from the client, `leptos_router::use_navigate()` should be used instead
 pub fn redirect(cx: leptos::Scope, path: &str) {
@@ -385,7 +385,7 @@ where
 
 /// Returns a Viz [Handler](viz::Handler) that listens for a `GET` request and tries
 /// to route it using [leptos_router], serving an HTML stream of your application.
-/// This stream will pause at each `<Suspense/>` node and wait for it to resolve befores
+/// This stream will pause at each `<Suspense/>` node and wait for it to resolve before
 /// sending down its HTML. The app will become interactive once it has fully loaded.
 ///
 /// The provides a [MetaContext] and a [RouterIntegrationContext] to app’s context before
@@ -536,7 +536,7 @@ where
                                             let (bundle, runtime, scope) =
                                                 leptos::leptos_dom::ssr::render_to_stream_with_prefix_undisposed_with_context(
                                                     app,
-                                                    |cx| generate_head_metadata(cx).into(),
+                                                    |cx| generate_head_metadata_separated(cx).1.into(),
                                                     add_context,
                                                 );
 
@@ -593,7 +593,7 @@ async fn forward_stream(
 ) {
     let cx = Scope { runtime, id: scope };
     let (head, tail) =
-        html_parts(options, use_context::<MetaContext>(cx).as_ref());
+        html_parts_separated(options, use_context::<MetaContext>(cx).as_ref());
 
     _ = tx.send(head).await;
     let mut shell = Box::pin(bundle);
@@ -617,7 +617,7 @@ async fn forward_stream(
 
 /// Returns a Viz [Handler](viz::Handler) that listens for a `GET` request and tries
 /// to route it using [leptos_router], serving an in-order HTML stream of your application.
-/// This stream will pause at each `<Suspense/>` node and wait for it to resolve befores
+/// This stream will pause at each `<Suspense/>` node and wait for it to resolve before
 /// sending down its HTML. The app will become interactive once it has fully loaded.
 ///
 /// This version allows us to pass Viz State/Extractor or other infro from Viz or network
@@ -700,7 +700,7 @@ where
                                             let (bundle, runtime, scope) =
                                                 leptos::ssr::render_to_stream_in_order_with_prefix_undisposed_with_context(
                                                     app,
-                                                    |cx| generate_head_metadata(cx).into(),
+                                                    |cx| generate_head_metadata_separated(cx).1.into(),
                                                     add_context,
                                                 );
 

leptos/Makefile.toml

@@ -2,6 +2,10 @@
 clear = true
 dependencies = ["check-hydrate", "check-csr"]
 
+[tasks.check-wasm-release]
+clear = true
+dependencies = ["check-hydrate-release", "check-csr-release"]
+
 [tasks.check-hydrate]
 command = "cargo"
 args = [
@@ -19,3 +23,23 @@ args = [
 	"--features=csr",
 	"--target=wasm32-unknown-unknown",
 ]
+
+[tasks.check-hydrate-release]
+command = "cargo"
+args = [
+	"check",
+	"--release",
+	"--no-default-features",
+	"--features=hydrate",
+	"--target=wasm32-unknown-unknown",
+]
+
+[tasks.check-csr-release]
+command = "cargo"
+args = [
+	"check",
+	"--release",
+	"--no-default-features",
+	"--features=csr",
+	"--target=wasm32-unknown-unknown",
+]

leptos/src/lib.rs

@@ -56,7 +56,7 @@
 //! - [`hackernews`](https://github.com/leptos-rs/leptos/tree/main/examples/hackernews)
 //!   and [`hackernews_axum`](https://github.com/leptos-rs/leptos/tree/main/examples/hackernews_axum)
 //!   integrate calls to a real external REST API, routing, server-side rendering and hydration to create
-//!   a fully-functional that works as intended even before WASM has loaded and begun to run.
+//!   a fully-functional application that works as intended even before WASM has loaded and begun to run.
 //! - [`todo_app_sqlite`](https://github.com/leptos-rs/leptos/tree/main/examples/todo_app_sqlite),
 //!   [`todo_app_sqlite_axum`](https://github.com/leptos-rs/leptos/tree/main/examples/todo_app_sqlite_axum), and
 //!   [`todo_app_sqlite_viz`](https://github.com/leptos-rs/leptos/tree/main/examples/todo_app_sqlite_viz)
@@ -150,12 +150,15 @@ pub use leptos_config::{self, get_configuration, LeptosOptions};
 pub mod ssr {
     pub use leptos_dom::{ssr::*, ssr_in_order::*};
 }
+#[allow(deprecated)]
 pub use leptos_dom::{
     self, create_node_ref, debug_warn, document, error, ev,
     helpers::{
         event_target, event_target_checked, event_target_value,
-        request_animation_frame, request_idle_callback, set_interval,
-        set_timeout, window_event_listener,
+        request_animation_frame, request_animation_frame_with_handle,
+        request_idle_callback, request_idle_callback_with_handle, set_interval,
+        set_interval_with_handle, set_timeout, set_timeout_with_handle,
+        window_event_listener,
     },
     html, log, math, mount_to, mount_to_body, svg, warn, window, Attribute,
     Class, Errors, Fragment, HtmlElement, IntoAttribute, IntoClass,

leptos/src/suspense.rs

@@ -126,7 +126,7 @@ where
                                 }
                             );
 
-                            // return the fallback for now, wrapped in fragment identifer
+                            // return the fallback for now, wrapped in fragment identifier
                             fallback().into_view(cx)
                         }
                     };

leptos/src/transition.rs

@@ -116,9 +116,12 @@ where
                 let suspense_context = use_context::<SuspenseContext>(cx)
                     .expect("there to be a SuspenseContext");
 
-                if is_first_run(&first_run, &suspense_context) {
-                    let has_local_only = suspense_context.has_local_only();
+                if cfg!(feature = "hydrate") || !first_run.get() {
                     *prev_children.borrow_mut() = Some(frag.nodes.clone());
+                }
+                if is_first_run(&first_run, &suspense_context) {
+                    let has_local_only = suspense_context.has_local_only()
+                        || cfg!(feature = "csr");
                     if !has_local_only || child_runs.get() > 0 {
                         first_run.set(false);
                     }
@@ -138,17 +141,21 @@ fn is_first_run(
     first_run: &Rc<Cell<bool>>,
     suspense_context: &SuspenseContext,
 ) -> bool {
-    match (
-        first_run.get(),
-        cfg!(feature = "hydrate"),
-        suspense_context.has_local_only(),
-    ) {
-        (false, _, _) => false,
-        // is in hydrate mode, and has non-local resources (so, has streamed)
-        (_, false, false) => false,
-        // is in hydrate mode, but with only local resources (so, has not streamed)
-        (_, false, true) => true,
-        // either SSR or client mode: it's the first run
-        (_, true, _) => true,
+    if cfg!(feature = "csr") {
+        false
+    } else {
+        match (
+            first_run.get(),
+            cfg!(feature = "hydrate"),
+            suspense_context.has_local_only(),
+        ) {
+            (false, _, _) => false,
+            // SSR and has non-local resources (so, has streamed)
+            (_, false, false) => false,
+            // SSR but with only local resources (so, has not streamed)
+            (_, false, true) => true,
+            // hydrate: it's the first run
+            (_, true, _) => true,
+        }
     }
 }

leptos_dom/Cargo.toml

@@ -34,6 +34,11 @@ leptos = { path = "../leptos" }
 [dependencies.web-sys]
 version = "0.3"
 features = [
+  "DocumentFragment",
+  "Element",
+  "HtmlTemplateElement",
+  "NodeList",
+  "Window",
   "console",
   "Comment",
   "Document",

leptos_dom/examples/hydration-test/Cargo.toml

@@ -10,14 +10,12 @@ crate-type = ["cdylib", "rlib"]
 leptos = { path = "../../../leptos", default-features = false }
 actix-web = { version = "4", optional = true }
 actix-files = { version = "0.6", optional = true }
-wasm-bindgen = { version = "0.2", optional = true}
+wasm-bindgen = { version = "0.2", optional = true }
 gloo = { version = "0.8", optional = true }
 console_error_panic_hook = "0.1.7"
-cfg-if = "1.0.0"
-gloo-timers = { version = "0.2", features = ["futures"] }
 futures = "0.3"
 
 [features]
 default = ["ssr"]
 ssr = ["leptos/ssr", "dep:actix-files", "dep:actix-web"]
-hydrate = ["leptos/hydrate", "dep:wasm-bindgen", "dep:gloo"]
+hydrate = ["leptos/hydrate", "dep:wasm-bindgen", "dep:gloo"]

leptos_dom/examples/test-bench/Cargo.toml

@@ -9,7 +9,5 @@ gloo = { version = "0.8", features = ["futures"] }
 leptos = { path = "../../../leptos", features = ["tracing"] }
 tracing = "0.1"
 tracing-subscriber = "0.3"
-wasm-bindgen-futures = "0.4"
-web-sys = "0.3"
 
 [workspace]

leptos_dom/examples/view-tests/Cargo.toml

@@ -5,7 +5,7 @@ edition = "2021"
 
 [dependencies]
 leptos = { path = "../../leptos" }
-console_log = "0.2"
+console_log = "1"
 log = "0.4"
 console_error_panic_hook = "0.1.7"
 

leptos_dom/src/components/dyn_child.rs

@@ -207,7 +207,10 @@ where
 
                         // TODO check does this still detect moves correctly?
                         let was_child_moved = prev_t.is_none()
-                            && child.get_closing_node().next_sibling().as_ref()
+                            && child
+                                .get_closing_node()
+                                .next_non_view_marker_sibling()
+                                .as_ref()
                                 != Some(&closing);
 
                         // If the previous child was a text node, we would like to
@@ -241,7 +244,7 @@ where
                                 if !was_child_moved && child != new_child {
                                     // Remove the text
                                     closing
-                                        .previous_sibling()
+                                        .previous_non_view_marker_sibling()
                                         .unwrap()
                                         .unchecked_into::<web_sys::Element>()
                                         .remove();
@@ -300,7 +303,7 @@ where
                             && new_child.get_text().is_some()
                         {
                             let t = closing
-                                .previous_sibling()
+                                .previous_non_view_marker_sibling()
                                 .unwrap()
                                 .unchecked_into::<web_sys::Element>();
 
@@ -364,3 +367,49 @@ where
         View::CoreComponent(crate::CoreComponent::DynChild(component))
     }
 }
+
+cfg_if! {
+    if #[cfg(all(target_arch = "wasm32", feature = "web"))] {
+        use web_sys::Node;
+
+        trait NonViewMarkerSibling {
+            fn next_non_view_marker_sibling(&self) -> Option<Node>;
+
+            fn previous_non_view_marker_sibling(&self) -> Option<Node>;
+        }
+
+        impl NonViewMarkerSibling for web_sys::Node {
+            fn next_non_view_marker_sibling(&self) -> Option<Node> {
+                cfg_if! {
+                    if #[cfg(debug_assertions)] {
+                        self.next_sibling().and_then(|node| {
+                            if node.text_content().unwrap_or_default().trim().starts_with("leptos-view") {
+                                node.next_sibling()
+                            } else {
+                                Some(node)
+                            }
+                        })
+                    } else {
+                        self.next_sibling()
+                    }
+                }
+            }
+
+            fn previous_non_view_marker_sibling(&self) -> Option<Node> {
+                cfg_if! {
+                    if #[cfg(debug_assertions)] {
+                        self.previous_sibling().and_then(|node| {
+                            if node.text_content().unwrap_or_default().trim().starts_with("leptos-view") {
+                                node.previous_sibling()
+                            } else {
+                                Some(node)
+                            }
+                        })
+                    } else {
+                        self.previous_sibling()
+                    }
+                }
+            }
+        }
+    }
+}

leptos_dom/src/helpers.rs

@@ -1,6 +1,7 @@
 //! A variety of DOM utility functions.
 
 use crate::{is_server, window};
+use leptos_reactive::{on_cleanup, Scope};
 use std::time::Duration;
 use wasm_bindgen::{prelude::Closure, JsCast, JsValue, UnwrapThrowExt};
 
@@ -80,10 +81,33 @@ pub fn event_target_checked(ev: &web_sys::Event) -> bool {
         .checked()
 }
 
-/// Runs the given function between the next repaint
-/// using [`Window.requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame).
+/// Handle that is generated by [request_animation_frame_with_handle] and can
+/// be used to cancel the animation frame request.
+#[derive(Copy, Clone, Debug, PartialEq, Eq, Hash)]
+pub struct AnimationFrameRequestHandle(i32);
+
+impl AnimationFrameRequestHandle {
+    /// Cancels the animation frame request to which this refers.
+    /// See [`cancelAnimationFrame()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/cancelAnimationFrame)
+    pub fn cancel(&self) {
+        _ = window().cancel_animation_frame(self.0);
+    }
+}
+
+/// Runs the given function between the next repaint using
+/// [`Window.requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame).
 #[cfg_attr(debug_assertions, instrument(level = "trace", skip_all))]
 pub fn request_animation_frame(cb: impl FnOnce() + 'static) {
+    _ = request_animation_frame_with_handle(cb);
+}
+
+/// Runs the given function between the next repaint using
+/// [`Window.requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame),
+/// returning a cancelable handle.
+#[cfg_attr(debug_assertions, instrument(level = "trace", skip_all))]
+pub fn request_animation_frame_with_handle(
+    cb: impl FnOnce() + 'static,
+) -> Result<AnimationFrameRequestHandle, JsValue> {
     cfg_if::cfg_if! {
       if #[cfg(debug_assertions)] {
         let span = ::tracing::Span::current();
@@ -95,13 +119,38 @@ pub fn request_animation_frame(cb: impl FnOnce() + 'static) {
     }
 
     let cb = Closure::once_into_js(cb);
-    _ = window().request_animation_frame(cb.as_ref().unchecked_ref());
+    window()
+        .request_animation_frame(cb.as_ref().unchecked_ref())
+        .map(AnimationFrameRequestHandle)
 }
 
-/// Queues the given function during an idle period  
-/// using [`Window.requestIdleCallback`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestIdleCallback).
+/// Handle that is generated by [request_idle_callback_with_handle] and can be
+/// used to cancel the idle callback.
+#[derive(Copy, Clone, Debug, PartialEq, Eq, Hash)]
+pub struct IdleCallbackHandle(u32);
+
+impl IdleCallbackHandle {
+    /// Cancels the idle callback to which this refers.
+    /// See [`cancelAnimationFrame()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/cancelIdleCallback)
+    pub fn cancel(&self) {
+        window().cancel_idle_callback(self.0);
+    }
+}
+
+/// Queues the given function during an idle period using
+/// [`Window.requestIdleCallback`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestIdleCallback).
 #[cfg_attr(debug_assertions, instrument(level = "trace", skip_all))]
 pub fn request_idle_callback(cb: impl Fn() + 'static) {
+    _ = request_idle_callback_with_handle(cb);
+}
+
+/// Queues the given function during an idle period using
+/// [`Window.requestIdleCallback`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestIdleCallback),
+/// returning a cancelable handle.
+#[cfg_attr(debug_assertions, instrument(level = "trace", skip_all))]
+pub fn request_idle_callback_with_handle(
+    cb: impl Fn() + 'static,
+) -> Result<IdleCallbackHandle, JsValue> {
     cfg_if::cfg_if! {
       if #[cfg(debug_assertions)] {
         let span = ::tracing::Span::current();
@@ -113,7 +162,21 @@ pub fn request_idle_callback(cb: impl Fn() + 'static) {
     }
 
     let cb = Closure::wrap(Box::new(cb) as Box<dyn Fn()>).into_js_value();
-    _ = window().request_idle_callback(cb.as_ref().unchecked_ref());
+    window()
+        .request_idle_callback(cb.as_ref().unchecked_ref())
+        .map(IdleCallbackHandle)
+}
+
+/// Handle that is generated by [set_timeout_with_handle] and can be used to clear the timeout.
+#[derive(Copy, Clone, Debug, PartialEq, Eq, Hash)]
+pub struct TimeoutHandle(i32);
+
+impl TimeoutHandle {
+    /// Cancels the timeout to which this refers.
+    /// See [`clearTimeout()`](https://developer.mozilla.org/en-US/docs/Web/API/clearTimeout)
+    pub fn clear(&self) {
+        window().clear_timeout_with_handle(self.0);
+    }
 }
 
 /// Executes the given function after the given duration of time has passed.
@@ -123,6 +186,19 @@ pub fn request_idle_callback(cb: impl Fn() + 'static) {
   instrument(level = "trace", skip_all, fields(duration = ?duration))
 )]
 pub fn set_timeout(cb: impl FnOnce() + 'static, duration: Duration) {
+    _ = set_timeout_with_handle(cb, duration);
+}
+
+/// Executes the given function after the given duration of time has passed, returning a cancelable handle.
+/// [`setTimeout()`](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout).
+#[cfg_attr(
+  debug_assertions,
+  instrument(level = "trace", skip_all, fields(duration = ?duration))
+)]
+pub fn set_timeout_with_handle(
+    cb: impl FnOnce() + 'static,
+    duration: Duration,
+) -> Result<TimeoutHandle, JsValue> {
     cfg_if::cfg_if! {
       if #[cfg(debug_assertions)] {
         let span = ::tracing::Span::current();
@@ -134,10 +210,83 @@ pub fn set_timeout(cb: impl FnOnce() + 'static, duration: Duration) {
     }
 
     let cb = Closure::once_into_js(Box::new(cb) as Box<dyn FnOnce()>);
-    _ = window().set_timeout_with_callback_and_timeout_and_arguments_0(
-        cb.as_ref().unchecked_ref(),
-        duration.as_millis().try_into().unwrap_throw(),
-    );
+    window()
+        .set_timeout_with_callback_and_timeout_and_arguments_0(
+            cb.as_ref().unchecked_ref(),
+            duration.as_millis().try_into().unwrap_throw(),
+        )
+        .map(TimeoutHandle)
+}
+
+/// "Debounce" a callback function. This will cause it to wait for a period of `delay`
+/// after it is called. If it is called again during that period, it will wait
+/// `delay` before running, and so on. This can be used, for example, to wrap event
+/// listeners to prevent them from firing constantly as you type.
+///
+/// ```
+/// use leptos::{leptos_dom::helpers::debounce, *};
+///
+/// #[component]
+/// fn DebouncedButton(cx: Scope) -> impl IntoView {
+///     let delay = std::time::Duration::from_millis(250);
+///     let on_click = debounce(cx, delay, move |_| {
+///         log!("...so many clicks!");
+///     });
+///
+///     view! { cx,
+///       <button on:click=on_click>"Click me"</button>
+///     }
+/// }
+/// ```
+pub fn debounce<T: 'static>(
+    cx: Scope,
+    delay: Duration,
+    mut cb: impl FnMut(T) + 'static,
+) -> impl FnMut(T) {
+    use std::{
+        cell::{Cell, RefCell},
+        rc::Rc,
+    };
+
+    cfg_if::cfg_if! {
+      if #[cfg(debug_assertions)] {
+        let span = ::tracing::Span::current();
+        let cb = move |value| {
+          let _guard = span.enter();
+          cb(value);
+        };
+      }
+    }
+    let cb = Rc::new(RefCell::new(cb));
+
+    let timer = Rc::new(Cell::new(None::<TimeoutHandle>));
+
+    on_cleanup(cx, {
+        let timer = Rc::clone(&timer);
+        move || {
+            if let Some(timer) = timer.take() {
+                timer.clear();
+            }
+        }
+    });
+
+    move |arg| {
+        if let Some(timer) = timer.take() {
+            timer.clear();
+        }
+        let handle = set_timeout_with_handle(
+            {
+                let cb = Rc::clone(&cb);
+                move || {
+                    cb.borrow_mut()(arg);
+                }
+            },
+            delay,
+        );
+        if let Ok(handle) = handle {
+            timer.set(Some(handle));
+        }
+    }
 }
 
 /// Handle that is generated by [set_interval] and can be used to clear the interval.
@@ -152,12 +301,16 @@ impl IntervalHandle {
     }
 }
 
-/// Repeatedly calls the given function, with a delay of the given duration between calls.
+/// Repeatedly calls the given function, with a delay of the given duration between calls,
+/// returning a cancelable handle.
 /// See [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/setInterval).
 #[cfg_attr(
   debug_assertions,
   instrument(level = "trace", skip_all, fields(duration = ?duration))
 )]
+#[deprecated = "use set_interval_with_handle() instead. In the future, \
+                set_interval() will no longer return a handle, for consistency \
+                with other timer helper functions."]
 pub fn set_interval(
     cb: impl Fn() + 'static,
     duration: Duration,
@@ -181,6 +334,36 @@ pub fn set_interval(
     Ok(IntervalHandle(handle))
 }
 
+/// Repeatedly calls the given function, with a delay of the given duration between calls,
+/// returning a cancelable handle.
+/// See [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/setInterval).
+#[cfg_attr(
+  debug_assertions,
+  instrument(level = "trace", skip_all, fields(duration = ?duration))
+)]
+pub fn set_interval_with_handle(
+    cb: impl Fn() + 'static,
+    duration: Duration,
+) -> Result<IntervalHandle, JsValue> {
+    cfg_if::cfg_if! {
+      if #[cfg(debug_assertions)] {
+        let span = ::tracing::Span::current();
+        let cb = move || {
+          let _guard = span.enter();
+          cb();
+        };
+      }
+    }
+
+    let cb = Closure::wrap(Box::new(cb) as Box<dyn Fn()>).into_js_value();
+    let handle = window()
+        .set_interval_with_callback_and_timeout_and_arguments_0(
+            cb.as_ref().unchecked_ref(),
+            duration.as_millis().try_into().unwrap_throw(),
+        )?;
+    Ok(IntervalHandle(handle))
+}
+
 /// Adds an event listener to the `Window`.
 #[cfg_attr(
   debug_assertions,

leptos_dom/src/html.rs

@@ -8,6 +8,7 @@ cfg_if! {
     use crate::macro_helpers::*;
     use crate::{mount_child, MountKind};
     use once_cell::unsync::Lazy as LazyCell;
+    use std::cell::Cell;
     use wasm_bindgen::JsCast;
 
     /// Trait alias for the trait bounts on [`ElementDescriptor`].
@@ -20,6 +21,22 @@ cfg_if! {
       El: fmt::Debug + AsRef<web_sys::HtmlElement> + Clone
     {
     }
+
+    thread_local! {
+        static IS_META: Cell<bool> = Cell::new(false);
+    }
+
+    #[doc(hidden)]
+    pub fn as_meta_tag<T>(f: impl FnOnce() -> T) -> T {
+        IS_META.with(|m| m.set(true));
+        let v = f();
+        IS_META.with(|m| m.set(false));
+        v
+    }
+
+    fn is_meta_tag() -> bool {
+        IS_META.with(|m| m.get())
+    }
   } else {
     use crate::hydration::HydrationKey;
     use smallvec::{smallvec, SmallVec};
@@ -35,6 +52,11 @@ cfg_if! {
     pub trait ElementDescriptorBounds: fmt::Debug {}
 
     impl<El> ElementDescriptorBounds for El where El: fmt::Debug {}
+
+    #[doc(hidden)]
+    pub fn as_meta_tag<T>(f: impl FnOnce() -> T) -> T {
+        f()
+    }
   }
 }
 
@@ -52,13 +74,13 @@ pub trait ElementDescriptor: ElementDescriptorBounds {
     /// The name of the element, i.e., `div`, `p`, `custom-element`.
     fn name(&self) -> Cow<'static, str>;
 
-    /// Determains if the tag is void, i.e., `<input>` and `<br>`.
+    /// Determines if the tag is void, i.e., `<input>` and `<br>`.
     fn is_void(&self) -> bool {
         false
     }
 
     /// A unique `id` that should be generated for each new instance of
-    /// this element, and be consistant for both SSR and CSR.
+    /// this element, and be consistent for both SSR and CSR.
     #[cfg(not(all(target_arch = "wasm32", feature = "web")))]
     fn hydration_id(&self) -> &HydrationKey;
 }
@@ -205,9 +227,12 @@ impl Custom {
 
                 el.unchecked_into()
             } else {
-                crate::warn!(
-                    "element with id {id} not found, ignoring it for hydration"
-                );
+                if !is_meta_tag() {
+                    crate::warn!(
+                        "element with id {id} not found, ignoring it for \
+                         hydration"
+                    );
+                }
 
                 crate::document().create_element(&name).unwrap()
             }
@@ -272,16 +297,40 @@ cfg_if! {
     pub struct HtmlElement<El: ElementDescriptor> {
       pub(crate) cx: Scope,
       pub(crate) element: El,
-      #[educe(Debug(ignore))]
       pub(crate) attrs: SmallVec<[(Cow<'static, str>, Cow<'static, str>); 4]>,
       #[educe(Debug(ignore))]
-      #[allow(clippy::type_complexity)]
-      pub(crate) children: SmallVec<[View; 4]>,
-      #[educe(Debug(ignore))]
-      pub(crate) prerendered: Option<Cow<'static, str>>,
+      pub(crate) children: ElementChildren,
       #[cfg(debug_assertions)]
       pub(crate) view_marker: Option<String>
     }
+
+    #[derive(Clone, educe::Educe, PartialEq, Eq)]
+    #[educe(Default)]
+    pub(crate) enum ElementChildren {
+        #[educe(Default)]
+        Empty,
+        Children(Vec<View>),
+        InnerHtml(Cow<'static, str>),
+        Chunks(Vec<StringOrView>)
+    }
+
+    #[doc(hidden)]
+    #[derive(Clone)]
+    pub enum StringOrView {
+        String(Cow<'static, str>),
+        View(std::rc::Rc<dyn Fn() -> View>)
+    }
+
+    impl PartialEq for StringOrView {
+        fn eq(&self, other: &Self) -> bool {
+            match (self, other) {
+                (StringOrView::String(a), StringOrView::String(b)) => a == b,
+                _ => false
+            }
+        }
+    }
+
+    impl Eq for StringOrView {}
   }
 }
 
@@ -316,9 +365,8 @@ impl<El: ElementDescriptor + 'static> HtmlElement<El> {
             Self {
               cx,
               attrs: smallvec![],
-              children: smallvec![],
+              children: Default::default(),
               element,
-              prerendered: None,
               #[cfg(debug_assertions)]
               view_marker: None
             }
@@ -328,6 +376,7 @@ impl<El: ElementDescriptor + 'static> HtmlElement<El> {
 
     #[doc(hidden)]
     #[cfg(not(all(target_arch = "wasm32", feature = "web")))]
+    #[deprecated = "Use HtmlElement::from_chunks() instead."]
     pub fn from_html(
         cx: Scope,
         element: El,
@@ -336,9 +385,27 @@ impl<El: ElementDescriptor + 'static> HtmlElement<El> {
         Self {
             cx,
             attrs: smallvec![],
-            children: smallvec![],
+            children: ElementChildren::Chunks(vec![StringOrView::String(
+                html.into(),
+            )]),
+            element,
+            #[cfg(debug_assertions)]
+            view_marker: None,
+        }
+    }
+
+    #[doc(hidden)]
+    #[cfg(not(all(target_arch = "wasm32", feature = "web")))]
+    pub fn from_chunks(
+        cx: Scope,
+        element: El,
+        chunks: impl IntoIterator<Item = StringOrView>,
+    ) -> Self {
+        Self {
+            cx,
+            attrs: smallvec![],
+            children: ElementChildren::Chunks(chunks.into_iter().collect()),
             element,
-            prerendered: Some(html.into()),
             #[cfg(debug_assertions)]
             view_marker: None,
         }
@@ -382,7 +449,6 @@ impl<El: ElementDescriptor + 'static> HtmlElement<El> {
               attrs,
               children,
               element,
-              prerendered,
               #[cfg(debug_assertions)]
               view_marker
             } = self;
@@ -391,7 +457,6 @@ impl<El: ElementDescriptor + 'static> HtmlElement<El> {
               cx,
               attrs,
               children,
-              prerendered,
               element: AnyElement {
                 name: element.name(),
                 is_void: element.is_void(),
@@ -508,6 +573,23 @@ impl<El: ElementDescriptor + 'static> HtmlElement<El> {
         self
     }
 
+    /// Checks to see if this element is mounted to the DOM as a child
+    /// of `body`.
+    ///
+    /// This method will always return [`None`] on non-wasm CSR targets.
+    pub fn is_mounted(&self) -> bool {
+        #[cfg(all(target_arch = "wasm32", feature = "web"))]
+        {
+            crate::document()
+                .body()
+                .unwrap()
+                .contains(Some(self.element.as_ref()))
+        }
+
+        #[cfg(not(all(target_arch = "wasm32", feature = "web")))]
+        false
+    }
+
     /// Adds an attribute to this element.
     #[track_caller]
     pub fn attr(
@@ -614,6 +696,104 @@ impl<El: ElementDescriptor + 'static> HtmlElement<El> {
         this
     }
 
+    /// Sets the class on the element as the class signal changes.
+    #[track_caller]
+    pub fn dyn_classes<I, C>(
+        self,
+        classes_signal: impl Fn() -> I + 'static,
+    ) -> Self
+    where
+        I: IntoIterator<Item = C>,
+        C: Into<Cow<'static, str>>,
+    {
+        #[cfg(all(target_arch = "wasm32", feature = "web"))]
+        {
+            use smallvec::SmallVec;
+
+            let class_list = self.element.as_ref().class_list();
+
+            leptos_reactive::create_effect(
+                self.cx,
+                move |prev_classes: Option<
+                    SmallVec<[Cow<'static, str>; 4]>,
+                >| {
+                    let classes = classes_signal()
+                        .into_iter()
+                        .map(Into::into)
+                        .collect::<SmallVec<[Cow<'static, str>; 4]>>(
+                    );
+
+                    let mut new_classes = classes
+                        .iter()
+                        .flat_map(|classes| classes.split_whitespace());
+
+                    if let Some(prev_classes) = prev_classes {
+                        let mut old_classes = prev_classes
+                            .iter()
+                            .flat_map(|classes| classes.split_whitespace());
+
+                        // Remove old classes
+                        for prev_class in old_classes.clone() {
+                            if !new_classes.any(|c| c == prev_class) {
+                                class_list.remove_1(prev_class).unwrap_or_else(
+                                    |err| {
+                                        panic!(
+                                            "failed to add class \
+                                             `{prev_class}`, error: {err:#?}"
+                                        )
+                                    },
+                                );
+                            }
+                        }
+
+                        // Add new classes
+                        for class in new_classes {
+                            if !old_classes.any(|c| c == class) {
+                                class_list.add_1(class).unwrap_or_else(|err| {
+                                    panic!(
+                                        "failed to remove class `{class}`, \
+                                         error: {err:#?}"
+                                    )
+                                });
+                            }
+                        }
+                    } else {
+                        let new_classes = new_classes
+                            .map(ToOwned::to_owned)
+                            .collect::<SmallVec<[_; 4]>>();
+
+                        for class in &new_classes {
+                            class_list.add_1(class).unwrap_or_else(|err| {
+                                panic!(
+                                    "failed to add class `{class}`, error: \
+                                     {err:#?}"
+                                )
+                            });
+                        }
+                    }
+
+                    classes
+                },
+            );
+
+            self
+        }
+
+        #[cfg(not(all(target_arch = "wasm32", feature = "web")))]
+        {
+            classes_signal()
+                .into_iter()
+                .map(Into::into)
+                .flat_map(|classes| {
+                    classes
+                        .split_whitespace()
+                        .map(ToString::to_string)
+                        .collect::<SmallVec<[_; 4]>>()
+                })
+                .fold(self, |this, class| this.class(class, true))
+        }
+    }
+
     /// Sets a property on an element.
     #[track_caller]
     pub fn prop(
@@ -711,8 +891,23 @@ impl<El: ElementDescriptor + 'static> HtmlElement<El> {
         #[cfg(not(all(target_arch = "wasm32", feature = "web")))]
         {
             let mut this = self;
+            let children = &mut this.children;
 
-            this.children.push(child);
+            match children {
+                ElementChildren::Empty => {
+                    *children = ElementChildren::Children(vec![child]);
+                }
+                ElementChildren::Children(ref mut children) => {
+                    children.push(child);
+                }
+                _ => {
+                    crate::debug_warn!(
+                        "Don’t call .child() on an HtmlElement if you’ve \
+                         already called .inner_html() or \
+                         HtmlElement::from_chunks()."
+                    );
+                }
+            }
 
             this
         }
@@ -739,16 +934,7 @@ impl<El: ElementDescriptor + 'static> HtmlElement<El> {
         {
             let mut this = self;
 
-            let child = HtmlElement::from_html(
-                this.cx,
-                Custom {
-                    name: "inner-html".into(),
-                    id: Default::default(),
-                },
-                html,
-            );
-
-            this.children = smallvec![child.into_view(this.cx)];
+            this.children = ElementChildren::InnerHtml(html);
 
             this
         }
@@ -768,7 +954,6 @@ impl<El: ElementDescriptor> IntoView for HtmlElement<El> {
                 element,
                 mut attrs,
                 children,
-                prerendered,
                 #[cfg(debug_assertions)]
                 view_marker,
                 ..
@@ -786,8 +971,7 @@ impl<El: ElementDescriptor> IntoView for HtmlElement<El> {
             }
 
             element.attrs = attrs;
-            element.children.extend(children);
-            element.prerendered = prerendered;
+            element.children = children;
 
             #[cfg(debug_assertions)]
             {
@@ -993,9 +1177,11 @@ fn create_leptos_element(
 
             el.unchecked_into()
         } else {
-            crate::warn!(
-                "element with id {id} not found, ignoring it for hydration"
-            );
+            if !is_meta_tag() {
+                crate::warn!(
+                    "element with id {id} not found, ignoring it for hydration"
+                );
+            }
 
             clone_element()
         }