differentiate suspense/errorboundary

* build: introduce ci task
* refactor(ci): rename cargo make task runner
* ci: add ci workflow
* ci: remove redundant workflows

.github/workflows/check-examples.yml

@@ -40,7 +40,7 @@ jobs:
     strategy:
       matrix: ${{ fromJSON(needs.setup.outputs.matrix) }}
       fail-fast: false
-    uses: ./.github/workflows/run-example-task.yml
+    uses: ./.github/workflows/run-cargo-make-task.yml
     with:
       directory: ${{ matrix.directory }}
       cargo_make_task: "check"

.github/workflows/check.yml

@@ -1,46 +0,0 @@
-name: Check
-
-on:
-  push:
-    branches: [main]
-  pull_request:
-    branches: [main]
-
-env:
-  CARGO_TERM_COLOR: always
-  CARGO_REGISTRIES_CRATES_IO_PROTOCOL: sparse
-
-jobs:
-  test:
-    name: Run `cargo check` ${{ matrix.os }} (using rustc ${{ matrix.rust }})
-    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: 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 libraries
-        run: cargo make --profile=github-actions check

.github/workflows/ci.yml

@@ -0,0 +1,38 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  matrix-job:
+    name: CI
+    strategy:
+      matrix:
+        directory:
+          [
+            integrations/actix,
+            integrations/axum,
+            integrations/viz,
+            integrations/utils,
+            leptos,
+            leptos_config,
+            leptos_dom,
+            leptos_hot_reload,
+            leptos_macro,
+            leptos_reactive,
+            leptos_server,
+            meta,
+            router,
+            server_fn,
+            server_fn/server_fn_macro_default,
+            server_fn_macro,
+          ]
+    uses: ./.github/workflows/run-cargo-make-task.yml
+    with:
+      directory: ${{ matrix.directory }}
+      cargo_make_task: "ci"

.github/workflows/fmt.yml

@@ -1,34 +0,0 @@
-name: Format
-
-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/run-cargo-make-task.yml

@@ -1,4 +1,4 @@
-name: Run Example Task
+name: Run Task
 
 on:
   workflow_call:
@@ -27,9 +27,9 @@ jobs:
     steps:
       # Setup environment
       - name: Install playwright browser dependencies
-        run: | 
+        run: |
           sudo apt-get update
-          sudo apt-get install libegl1 libvpx7 libevent-2.1-7 libopus0 libopengl0 libwoff1 libharfbuzz-icu0 libgstreamer-plugins-base1.0-0 libgstreamer-gl1.0-0 libhyphen0 libmanette-0.2-0 libgles2 gstreamer1.0-libav                   
+          sudo apt-get install libegl1 libvpx7 libevent-2.1-7 libopus0 libopengl0 libwoff1 libharfbuzz-icu0 libgstreamer-plugins-base1.0-0 libgstreamer-gl1.0-0 libhyphen0 libmanette-0.2-0 libgles2 gstreamer1.0-libav
 
       - uses: actions/checkout@v3
 
@@ -84,7 +84,7 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-pnpm-store-
 
-      # Verify project
+      # Run Cargo Make Task
       - name: ${{ inputs.cargo_make_task }}
         run: |
           if [ "${{ inputs.directory }}" = "INTERNAL" ]; then

.github/workflows/test.yml

@@ -1,46 +0,0 @@
-name: Test
-
-on:
-  push:
-    branches: [main]
-  pull_request:
-    branches: [main]
-
-env:
-  CARGO_TERM_COLOR: always
-  CARGO_REGISTRIES_CRATES_IO_PROTOCOL: sparse
-
-jobs:
-  test:
-    name: Run tests ${{ matrix.os }} (using rustc ${{ matrix.rust }})
-    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: 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 tests with all features
-        run: cargo make --profile=github-actions test

.github/workflows/verify-all-examples.yml

@@ -41,7 +41,7 @@ jobs:
     strategy:
       matrix: ${{ fromJSON(needs.setup.outputs.matrix) }}
       fail-fast: false
-    uses: ./.github/workflows/run-example-task.yml
+    uses: ./.github/workflows/run-cargo-make-task.yml
     with:
       directory: ${{ matrix.directory }}
       cargo_make_task: "verify-flow"

.github/workflows/verify-changed-examples.yml

@@ -65,7 +65,7 @@ jobs:
     strategy:
       matrix: ${{ fromJSON(needs.setup.outputs.matrix) }}
       fail-fast: false
-    uses: ./.github/workflows/run-example-task.yml
+    uses: ./.github/workflows/run-cargo-make-task.yml
     with:
       directory: ${{ matrix.directory }}
       cargo_make_task: "verify-flow"

Cargo.toml

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

Makefile.toml

@@ -3,122 +3,25 @@
 #     cargo install --force cargo-make
 ############
 
-[config]
-# make tasks run at the workspace root
-default_to_workspace = false
-
-[tasks.check]
-clear = true
-dependencies = [
-	"check-all",
-	"check-wasm",
-	"check-all-release",
-	"check-wasm-release",
-]
-
-[tasks.check-all]
-command = "cargo"
-args = ["+nightly", "check-all-features"]
-install_crate = "cargo-all-features"
-
-[tasks.check-wasm]
-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/counters" },
-	{ name = "check", path = "examples/error_boundary" },
-	{ name = "check", path = "examples/errors_axum" },
-	{ name = "check", path = "examples/fetch" },
-	{ name = "check", path = "examples/hackernews" },
-	{ name = "check", path = "examples/hackernews_axum" },
-	{ name = "check", path = "examples/js-framework-benchmark" },
-	{ name = "check", path = "examples/leptos-tailwind-axum" },
-	{ name = "check", path = "examples/login_with_token_csr_only" },
-	{ name = "check", path = "examples/parent_child" },
-	{ name = "check", path = "examples/router" },
-	{ name = "check", path = "examples/session_auth_axum" },
-	{ name = "check", path = "examples/slots" },
-	{ 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/timer" },
-	{ 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" },
-]
+[env]
+CARGO_MAKE_EXTEND_WORKSPACE_MAKEFILE = true
 
 [tasks.check-stable]
+workspace = false
 clear = true
 dependencies = [
 	{ name = "check", path = "examples/counter_without_macros" },
 	{ name = "check", path = "examples/counters_stable" },
 ]
 
-[tasks.test]
-clear = true
-dependencies = [
-	"test-all",
-	"test-leptos_macro-example",
-	"doc-leptos_macro-example",
-]
-
-[tasks.test-all]
-command = "cargo"
-args = ["+nightly", "test-all-features"]
-install_crate = "cargo-all-features"
-
-[tasks.test-leptos_macro-example]
-description = "Tests the leptos_macro/example to check if macro handles doc comments correctly"
-command = "cargo"
-args = ["+nightly", "test", "--doc"]
-cwd = "leptos_macro/example"
-install_crate = false
-
-[tasks.doc-leptos_macro-example]
-description = "Docs the leptos_macro/example to check if macro handles doc comments correctly"
-command = "cargo"
-args = ["+nightly", "doc"]
-cwd = "leptos_macro/example"
-install_crate = false
-
-[tasks.test-examples]
-description = "Run all unit and web tests for examples"
+[tasks.ci-examples]
+workspace = false
 cwd = "examples"
 command = "cargo"
-args = ["make", "test-unit-and-web"]
-
-[tasks.verify-examples]
-description = "Run all quality checks and tests for examples"
-env = { CLEAN_AFTER_VERIFY = "true" }
-cwd = "examples"
-command = "cargo"
-args = ["make", "verify-flow"]
+args = ["make", "ci-clean"]
 
 [tasks.clean-examples]
-description = "Clean all example projects"
+workspace = false
 cwd = "examples"
 command = "cargo"
-args = ["make", "clean-all"]
-
-[env]
-RUSTFLAGS = ""
-LEPTOS_OUTPUT_NAME = "ci" # allows examples to check/build without cargo-leptos
-
-[env.github-actions]
-RUSTFLAGS = "-D warnings"
+args = ["make", "clean"]

cargo-make/check.toml

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

cargo-make/lint.toml

@@ -0,0 +1,9 @@
+[tasks.pre-clippy]
+env = { CARGO_MAKE_CLIPPY_ARGS = "--all-targets --all-features -- -D warnings" }
+
+[tasks.check-style]
+dependencies = ["check-format-flow", "clippy-flow"]
+
+[tasks.check-format]
+env = { LEPTOS_PROJECT_DIRECTORY = "../" }
+args = ["fmt", "--", "--check", "--config-path", "${LEPTOS_PROJECT_DIRECTORY}"]

cargo-make/main.toml

@@ -0,0 +1,18 @@
+extend = [
+    { path = "./check.toml" },
+    { path = "./lint.toml" },
+    { path = "./test.toml" },
+]
+
+[env]
+RUSTFLAGS = ""
+LEPTOS_OUTPUT_NAME = "ci" # allows examples to check/build without cargo-leptos
+
+[env.github-actions]
+RUSTFLAGS = "-D warnings"
+
+[tasks.ci]
+dependencies = ["lint", "test"]
+
+[tasks.lint]
+dependencies = ["check-format-flow"]

cargo-make/test.toml

@@ -0,0 +1,7 @@
+[tasks.test]
+alias = "test-all"
+
+[tasks.test-all]
+command = "cargo"
+args = ["+nightly", "test-all-features"]
+install_crate = "cargo-all-features"

docs/book/book.toml

@@ -0,0 +1,2 @@
+[output.html.playground]
+runnable = false

docs/book/src/02_getting_started.md

@@ -14,24 +14,38 @@ If you don’t already have it installed, you can install Trunk by running
 cargo install trunk
 ```
 
-Create a basic Rust binary project
+Create a basic Rust project
 
 ```bash
 cargo init leptos-tutorial
 ```
 
-> We recommend using `nightly` Rust, as it enables [a few nice features](https://github.com/leptos-rs/leptos#nightly-note). To use `nightly` Rust with WebAssembly, you can run
+`cd` into your new `leptos-tutorial` project and add `leptos` as a dependency
+
+```bash
+cargo add leptos --features=csr,nightly
+```
+
+Or you can leave off `nighly` if you're using stable Rust
+```bash
+cargo add leptos --features=csr
+```
+
+> Using `nightly` Rust, and the `nightly` feature in Leptos enables the function-call syntax for signal getters and setters that is used in most of this book.
+>
+> To use `nightly` Rust, you can run
 >
 > ```bash
 > rustup toolchain install nightly
 > rustup default nightly
-> rustup target add wasm32-unknown-unknown
 > ```
+>
+> If you’d rather use stable Rust with Leptos, you can do that too. In the guide and examples, you’ll just use the [`ReadSignal::get()`](https://docs.rs/leptos/latest/leptos/struct.ReadSignal.html#impl-SignalGet%3CT%3E-for-ReadSignal%3CT%3E) and [`WriteSignal::set()`](https://docs.rs/leptos/latest/leptos/struct.WriteSignal.html#impl-SignalGet%3CT%3E-for-ReadSignal%3CT%3E) methods instead of calling signal getters and setters as functions.
 
-`cd` into your new `leptos-tutorial` project and add `leptos` as a dependency
+Make sure you've added the `wasm32-unknown-unknown` target so that Rust can compile your code to WebAssembly to run in the browser.
 
 ```bash
-cargo add leptos --features=csr,nightly # or just csr if you're using stable Rust
+rustup target add wasm32-unknown-unknown
 ```
 
 Create a simple `index.html` in the root of the `leptos-tutorial` directory

docs/book/src/14_create_effect.md

@@ -1 +0,0 @@
-# Responding to Changes with create_effect

docs/book/src/SUMMARY.md

@@ -23,7 +23,6 @@
   - [Transition](./async/12_transition.md)
   - [Actions](./async/13_actions.md)
 - [Interlude: Projecting Children](./interlude_projecting_children.md)
-- [Responding to Changes with `create_effect`](./14_create_effect.md)
 - [Global State Management](./15_global_state.md)
 - [Router](./router/README.md)
   - [Defining `<Routes/>`](./router/16_routes.md)

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

@@ -124,7 +124,7 @@ You can go even deeper. Say you want to have tabs for each contact’s address,
 
 ## `<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.
+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 it 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:
 

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

@@ -70,9 +70,9 @@ let id = move || {
 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.
+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 replace 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.
+> 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 explained them all yet.
 
 [Click to open CodeSandbox.](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)
 

docs/book/src/router/20_form.md

@@ -1,12 +1,12 @@
 # The `<Form/>` Component
 
-Links and forms sometimes seem completely unrelated. But in fact, they work in very similar ways.
+Links and forms sometimes seem completely unrelated. But, in fact, they work in very similar ways.
 
 In plain HTML, there are three ways to navigate to another page:
 
-1. An `<a>` element that links to another page. Navigates to the URL in its `href` attribute with the `GET` HTTP method.
-2. A `<form method="GET">`. Navigates to the URL in its `action` attribute with the `GET` HTTP method and the form data from its inputs encoded in the URL query string.
-3. A `<form method="POST">`. Navigates to the URL in its `action` attribute with the `POST` HTTP method and the form data from its inputs encoded in the body of the request.
+1. An `<a>` element that links to another page: Navigates to the URL in its `href` attribute with the `GET` HTTP method.
+2. A `<form method="GET">`: Navigates to the URL in its `action` attribute with the `GET` HTTP method and the form data from its inputs encoded in the URL query string.
+3. A `<form method="POST">`: Navigates to the URL in its `action` attribute with the `POST` HTTP method and the form data from its inputs encoded in the body of the request.
 
 Since we have a client-side router, we can do client-side link navigations without reloading the page, i.e., without a full round-trip to the server and back. It makes sense that we can do client-side form navigations in the same way.
 

docs/book/src/ssr/24_hydration_bugs.md

@@ -74,11 +74,11 @@ In other words, if this is being compiled to WASM, it has three items; otherwise
 When I load the page in the browser, I see nothing. If I open the console I see a bunch of warnings:
 
 ```
-element with id 0-0-1 not found, ignoring it for hydration
-element with id 0-0-2 not found, ignoring it for hydration
-element with id 0-0-3 not found, ignoring it for hydration
-component with id _0-0-4c not found, ignoring it for hydration
-component with id _0-0-4o not found, ignoring it for hydration
+element with id 0-3 not found, ignoring it for hydration
+element with id 0-4 not found, ignoring it for hydration
+element with id 0-5 not found, ignoring it for hydration
+component with id _0-6c not found, ignoring it for hydration
+component with id _0-6o not found, ignoring it for hydration
 ```
 
 The WASM version of your app, running in the browser, expects to find three items; but the HTML has none.
@@ -87,6 +87,56 @@ The WASM version of your app, running in the browser, expects to find three item
 
 It’s pretty rare that you do this intentionally, but it could happen from somehow running different logic on the server and in the browser. If you’re seeing warnings like this and you don’t think it’s your fault, it’s much more likely that it’s a bug with `<Suspense/>` or something. Feel free to go ahead and open an [issue](https://github.com/leptos-rs/leptos/issues) or [discussion](https://github.com/leptos-rs/leptos/discussions) on GitHub for help.
 
+### Mutating the DOM during rendering
+
+This is a slightly more common way to create a client/server mismatch: updating a signal _during rendering_ in a way that mutates the view.
+
+```rust
+#[component]
+pub fn App(cx: Scope) -> impl IntoView {
+    let (loaded, set_loaded) = create_signal(cx, false);
+
+    // create_effect only runs on the client
+    create_effect(cx, move |_| {
+        // do something like reading from localStorage
+        set_loaded(true);
+    });
+
+    move || {
+        if loaded() {
+            view! { cx, <p>"Hello, world!"</p> }.into_any()
+        } else {
+            view! { cx, <div class="loading">"Loading..."</div> }.into_any()
+        }
+    }
+}
+```
+
+This one gives us the scary panic
+
+```
+panicked at 'assertion failed: `(left == right)`
+  left: `"DIV"`,
+ right: `"P"`: SSR and CSR elements have the same hydration key but different node kinds.
+```
+
+And a handy link to this page!
+
+The problem here is that `create_effect` runs **immediately** and **synchronously**, but only in the browser. As a result, on the server, `loaded` is false, and a `<div>` is rendered. But on the browser, by the time the view is being rendered, `loaded` has already been set to `true`, and the browser is expecting to find a `<p>`.
+
+#### Solution
+
+You can simply tell the effect to wait a tick before updating the signal, by using something like `request_animation_frame`, which will set a short timeout and then update the signal before the next frame.
+
+```rust
+create_effect(cx, move |_| {
+    // do something like reading from localStorage
+    request_animation_frame(move || set_loaded(true));
+});
+```
+
+This allows the browser to hydrate with the correct, matching state (`loaded` is `false` when it reaches the view), then immediately update it to `true` once hydration is complete.
+
 ### Not all client code can run on the server
 
 Imagine you happily import a dependency like `gloo-net` that you’ve been used to using to make requests in the browser, and use it in a `create_resource` in a server-rendered app.

docs/book/src/view/06_control_flow.md

@@ -198,7 +198,7 @@ let (value, set_value) = create_signal(cx, 0);
 
 view! { cx,
   <Show
-    when=move || value() > 5
+    when=move || { value() > 5 }
     fallback=|cx| view! { cx, <Small/> }
   >
     <Big/>

docs/book/src/view/07_errors.md

@@ -19,7 +19,7 @@ fn NumericInput(cx: Scope) -> impl IntoView {
     view! { cx,
         <label>
             "Type a number (or not!)"
-            <input type="number" on:input=on_input/>
+            <input on:input=on_input/>
             <p>
                 "You entered "
                 <strong>{value}</strong>
@@ -69,7 +69,7 @@ fn NumericInput(cx: Scope) -> impl IntoView {
         <h1>"Error Handling"</h1>
         <label>
             "Type a number (or something that's not a number!)"
-            <input type="number" on:input=on_input/>
+            <input on:input=on_input/>
             <ErrorBoundary
                 // the fallback receives a signal containing current errors
                 fallback=|cx, errors| view! { cx,

docs/book/src/view/08_parent_child.md

@@ -117,7 +117,7 @@ pub fn App(cx: Scope) -> impl IntoView {
 
 
 #[component]
-pub fn ButtonC<F>(cx: Scope) -> impl IntoView {
+pub fn ButtonC(cx: Scope) -> impl IntoView {
     view! { cx,
         <button>"Toggle"</button>
     }

examples/cargo-make/cargo-leptos-test.toml

@@ -1,5 +1,6 @@
-[tasks.test-e2e]
-dependencies = ["setup-node", "cargo-leptos-e2e"]
+[tasks.integration-test]
+dependencies = ["cargo-leptos-e2e"]
 
-[tasks.clean-all]
-dependencies = ["clean-cargo", "clean-node_modules", "clean-playwright"]
+[tasks.cargo-leptos-e2e]
+command = "cargo"
+args = ["leptos", "end-to-end"]

examples/cargo-make/clean.toml

@@ -0,0 +1,28 @@
+[tasks.clean]
+dependencies = [
+    "clean-cargo",
+    "clean-trunk",
+    "clean-node_modules",
+    "clean-playwright",
+]
+
+[tasks.clean-cargo]
+command = "cargo"
+args = ["clean"]
+
+[tasks.clean-trunk]
+command = "trunk"
+args = ["clean"]
+
+[tasks.clean-node_modules]
+script = '''
+project_dir=${PWD##*/}
+if [ "$project_dir" != "todomvc" ]; then
+  find . -type d -name node_modules | xargs rm -rf
+fi
+'''
+
+[tasks.clean-playwright]
+script = '''
+find . -name playwright-report -name playwright -name test-results | xargs rm -rf
+'''

examples/cargo-make/common.toml

@@ -1,98 +0,0 @@
-[tasks.pre-clippy]
-env = { CARGO_MAKE_CLIPPY_ARGS = "--all-targets --all-features -- -D warnings" }
-
-[tasks.check-style]
-description = "Check for style violations"
-dependencies = ["check-format-flow", "clippy-flow"]
-
-[tasks.check-format]
-env = { LEPTOS_PROJECT_DIRECTORY = "../../" }
-args = ["fmt", "--", "--check", "--config-path", "${LEPTOS_PROJECT_DIRECTORY}"]
-
-[tasks.clean-cargo]
-description = "Runs the cargo clean command."
-category = "Cleanup"
-command = "cargo"
-args = ["clean"]
-
-[tasks.clean-trunk]
-description = "Runs the trunk clean command."
-category = "Cleanup"
-command = "trunk"
-args = ["clean"]
-
-[tasks.clean-node_modules]
-description = "Delete all node_modules directories"
-category = "Cleanup"
-script = '''
-find . -type d -name node_modules | xargs rm -rf
-'''
-
-[tasks.clean-playwright]
-description = "Delete playwright directories"
-category = "Cleanup"
-script = '''
-for pw_dir in $(find . -name playwright.config.ts | xargs dirname)
-do
-  rm -rf $pw_dir/playwright-report pw_dir/playwright pw_dir/test-results
-done
-'''
-
-[tasks.clean-all]
-description = "Delete all temporary directories"
-category = "Cleanup"
-dependencies = ["clean-cargo"]
-
-[tasks.test-wasm]
-env = { CARGO_MAKE_WASM_TEST_ARGS = "--headless --chrome" }
-command = "cargo"
-args = ["make", "wasm-pack-test"]
-
-[tasks.cargo-leptos-e2e]
-description = "Runs end to end tests with cargo leptos"
-command = "cargo"
-args = ["leptos", "end-to-end"]
-
-[tasks.setup-node]
-description = "Install node dependencies and playwright browsers"
-env = { PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD = "1" }
-script = '''
-BOLD="\e[1m"
-GREEN="\e[0;32m"
-RED="\e[0;31m"
-RESET="\e[0m"
-
-project_dir=$CARGO_MAKE_WORKING_DIRECTORY
-
-# Discover commands
-if command -v pnpm; then
-    NODE_CMD=pnpm
-    PLAYWRIGHT_CMD=pnpm
-elif command -v npm; then
-    NODE_CMD=npm
-    PLAYWRIGHT_CMD=npx
-else
-    echo "${RED}${BOLD}ERROR${RESET} - pnpm or npm is required by this task"
-    exit 1
-fi
-
-# Install node dependencies
-for node_path in $(find . -name package.json -not -path '*/node_modules/*')
-do
-  node_dir=$(dirname $node_path)
-  echo Install node dependencies for $node_dir
-  cd $node_dir
-  ${NODE_CMD} install
-  cd ${project_dir}
-done
-
-# Install playwright browsers
-for pw_path in $(find . -name playwright.config.ts)
-do
-  pw_dir=$(dirname $pw_path)
-  echo Install playwright browsers for $pw_dir
-  cd $pw_dir
-  ${PLAYWRIGHT_CMD} playwright install
-  cd $project_dir
-done
-'''

examples/cargo-make/lint.toml

@@ -0,0 +1,9 @@
+[tasks.pre-clippy]
+env = { CARGO_MAKE_CLIPPY_ARGS = "--all-targets --all-features -- -D warnings" }
+
+[tasks.check-style]
+dependencies = ["check-format-flow", "clippy-flow"]
+
+[tasks.check-format]
+env = { LEPTOS_PROJECT_DIRECTORY = "../../" }
+args = ["fmt", "--", "--check", "--config-path", "${LEPTOS_PROJECT_DIRECTORY}"]

examples/cargo-make/main.toml

@@ -1,35 +1,32 @@
-extend = [{ path = "../cargo-make/common.toml" }]
+extend = [
+    { path = "../cargo-make/clean.toml" },
+    { path = "../cargo-make/lint.toml" },
+    { path = "../cargo-make/node.toml" },
+]
+
+# CI Stages
 
 [tasks.ci]
-alias = "verify-flow"
+dependencies = ["prepare", "lint", "build", "test-flow", "integration-test"]
+
+[tasks.ci-clean]
+dependencies = ["ci", "clean"]
+
+[tasks.prepare]
+dependencies = ["setup-node"]
+
+[tasks.lint]
+dependencies = ["check-style"]
+
+[tasks.integration-test]
+
+# ALIASES
 
 [tasks.verify-flow]
-description = "Provides pre and post hooks for verify"
-dependencies = ["pre-verify", "verify", "post-verify"]
+alias = "ci"
 
-[tasks.verify]
-description = "Run all quality checks and tests"
-dependencies = ["check-style", "test-unit-and-e2e"]
+[tasks.t]
+dependencies = ["test-flow"]
 
-[tasks.test-unit-and-e2e]
-description = "Run all unit and e2e tests"
-dependencies = ["test-flow", "test-e2e-flow"]
-
-[tasks.pre-verify]
-
-[tasks.post-verify]
-dependencies = ["maybe-clean-all"]
-
-[tasks.maybe-clean-all]
-description = "Used to clean up locally after call to verify-examples"
-condition = { env_true = ["CLEAN_AFTER_VERIFY"] }
-
-[tasks.test-e2e-flow]
-description = "Provides pre and post hooks for test-e2e"
-dependencies = ["pre-test-e2e", "test-e2e", "post-test-e2e"]
-
-[tasks.pre-test-e2e]
-
-[tasks.test-e2e]
-
-[tasks.post-test-e2e]
+[tasks.it]
+alias = "integration-test"

examples/cargo-make/node.toml

@@ -0,0 +1,43 @@
+[tasks.setup-node]
+description = "Install node dependencies and playwright browsers"
+env = { PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD = "1" }
+script = '''
+BOLD="\e[1m"
+GREEN="\e[0;32m"
+RED="\e[0;31m"
+RESET="\e[0m"
+
+project_dir=$CARGO_MAKE_WORKING_DIRECTORY
+
+# Discover commands
+if command -v pnpm; then
+    NODE_CMD=pnpm
+    PLAYWRIGHT_CMD=pnpm
+elif command -v npm; then
+    NODE_CMD=npm
+    PLAYWRIGHT_CMD=npx
+else
+    echo "${RED}${BOLD}ERROR${RESET} - pnpm or npm is required by this task"
+    exit 1
+fi
+
+# Install node dependencies
+for node_path in $(find . -name package.json -not -path '*/node_modules/*')
+do
+  node_dir=$(dirname $node_path)
+  echo Install node dependencies for $node_dir
+  cd $node_dir
+  ${NODE_CMD} install
+  cd ${project_dir}
+done
+
+# Install playwright browsers
+for pw_path in $(find . -name playwright.config.ts)
+do
+  pw_dir=$(dirname $pw_path)
+  echo Install playwright browsers for $pw_dir
+  cd $pw_dir
+  ${PLAYWRIGHT_CMD} playwright install
+  cd $project_dir
+done
+'''

examples/cargo-make/playwright-test.toml

@@ -1,7 +1,4 @@
 extend = [{ path = "../cargo-make/playwright.toml" }]
 
-[tasks.test-e2e]
-dependencies = ["setup-node", "test-playwright-autostart"]
-
-[tasks.clean-all]
-dependencies = ["clean-cargo", "clean-node_modules", "clean-playwright"]
+[tasks.integration-test]
+dependencies = ["test-playwright-autostart"]

examples/cargo-make/playwright.toml

@@ -1,22 +1,8 @@
-[tasks.clean-playwright]
-description = "Delete playwright directories"
-category = "Cleanup"
-script = '''
-for pw_dir in $(find . -name playwright.config.ts | xargs dirname)
-do
-  rm -rf $pw_dir/playwright-report pw_dir/playwright pw_dir/test-results
-done
-'''
-
 [tasks.test-playwright-autostart]
-description = "Run playwright test with server autostart"
-category = "Test"
 command = "npm"
 args = ["run", "e2e:auto-start"]
 
 [tasks.test-playwright]
-description = "Run playwright test"
-category = "Test"
 script = '''
 BOLD="\e[1m"
 GREEN="\e[0;32m"
@@ -46,8 +32,6 @@ done
 '''
 
 [tasks.test-playwright-ui]
-description = "Run playwright test --ui"
-category = "Test"
 script = '''
 BOLD="\e[1m"
 GREEN="\e[0;32m"
@@ -77,8 +61,6 @@ done
 '''
 
 [tasks.test-playwright-report]
-description = "Run playwright show-report"
-category = "Test"
 script = '''
 BOLD="\e[1m"
 GREEN="\e[0;32m"

examples/cargo-make/trunk_server.toml

@@ -2,13 +2,9 @@
 command = "trunk"
 args = ["build"]
 
-[tasks.clean-trunk]
-command = "trunk"
-args = ["clean"]
-
 [tasks.start-trunk]
 command = "trunk"
-args = ["serve", "--open"]
+args = ["serve", "${@}"]
 
 [tasks.stop-trunk]
 script = '''

examples/cargo-make/wasm-test.toml

@@ -5,5 +5,7 @@ condition = { env_true = ["RUN_CARGO_TEST"] }
 [tasks.post-test]
 dependencies = ["test-wasm"]
 
-[tasks.clean-all]
-dependencies = ["clean-cargo", "clean-trunk"]
+[tasks.test-wasm]
+env = { CARGO_MAKE_WASM_TEST_ARGS = "--headless --chrome" }
+command = "cargo"
+args = ["make", "wasm-pack-test"]

examples/counter_isomorphic/Cargo.toml

@@ -25,7 +25,7 @@ leptos_meta = { path = "../../meta" }
 leptos_router = { path = "../../router" }
 log = "0.4"
 gloo-net = { git = "https://github.com/rustwasm/gloo" }
-wasm-bindgen = "=0.2.86"
+wasm-bindgen = "=0.2.87"
 serde = { version = "1", features = ["derive"] }
 
 [features]

examples/counter_isomorphic/src/counters.rs

@@ -67,24 +67,10 @@ pub fn Counters(cx: Scope) -> impl IntoView {
             <Link rel="shortcut icon" type_="image/ico" href="/favicon.ico"/>
             <main>
                 <Routes>
-                    <Route
-                        path=""
-                        view=|cx| {
-                            view! { cx, <Counter/> }
-                        }
-                    />
-                    <Route
-                        path="form"
-                        view=|cx| {
-                            view! { cx, <FormCounter/> }
-                        }
-                    />
-                    <Route
-                        path="multi"
-                        view=|cx| {
-                            view! { cx, <MultiuserCounter/> }
-                        }
-                    />
+                    <Route path="" view=Counter/>
+                    <Route path="form" view=FormCounter/>
+                    <Route path="multi" view=MultiuserCounter/>
+                    <Route path="multi" view=NotFound/>
                 </Routes>
             </main>
         </Router>
@@ -175,13 +161,9 @@ pub fn FormCounter(cx: Scope) -> impl IntoView {
                 "This counter uses forms to set the value on the server. When progressively enhanced, it should behave identically to the “Simple Counter.”"
             </p>
             <div>
-                // calling a server function is the same as POSTing to its API URL
-                // so we can just do that with a form and button
                 <ActionForm action=clear>
                     <input type="submit" value="Clear"/>
                 </ActionForm>
-                // We can submit named arguments to the server functions
-                // by including them as input values with the same name
                 <ActionForm action=adjust>
                     <input type="hidden" name="delta" value="-1"/>
                     <input type="hidden" name="msg" value="form value down"/>
@@ -256,3 +238,14 @@ pub fn MultiuserCounter(cx: Scope) -> impl IntoView {
         </div>
     }
 }
+
+#[component]
+fn NotFound(cx: Scope) -> impl IntoView {
+    #[cfg(feature = "ssr")]
+    {
+        let resp = expect_context::<leptos_actix::ResponseOptions>(cx);
+        resp.set_status(actix_web::http::StatusCode::NOT_FOUND);
+    }
+
+    view! { cx, <h1>"Not Found"</h1> }
+}

examples/counter_isomorphic/src/main.rs

@@ -52,15 +52,36 @@ cfg_if! {
                 App::new()
                     .service(counter_events)
                     .route("/api/{tail:.*}", leptos_actix::handle_server_fns())
-                    .leptos_routes(leptos_options.to_owned(), routes.to_owned(), |cx| view! { cx, <Counters/> })
-                    .service(Files::new("/", site_root))
+                    // serve JS/WASM/CSS from `pkg`
+                    .service(Files::new("/pkg", format!("{site_root}/pkg")))
+                    // serve other assets from the `assets` directory
+                    .service(Files::new("/assets", site_root))
+                    // serve the favicon from /favicon.ico
+                    .service(favicon)
+                    .leptos_routes(
+                        leptos_options.to_owned(),
+                        routes.to_owned(),
+                        Counters,
+                    )
+                    .app_data(web::Data::new(leptos_options.to_owned()))
                     //.wrap(middleware::Compress::default())
             })
             .bind(&addr)?
             .run()
             .await
         }
+
+        #[actix_web::get("favicon.ico")]
+        async fn favicon(
+            leptos_options: actix_web::web::Data<leptos::LeptosOptions>,
+        ) -> actix_web::Result<actix_files::NamedFile> {
+            let leptos_options = leptos_options.into_inner();
+            let site_root = &leptos_options.site_root;
+            Ok(actix_files::NamedFile::open(format!(
+                "{site_root}/favicon.ico"
+            ))?)
         }
+    }
 
     // client-only main for Trunk
     else {

examples/counters_stable/Cargo.toml

@@ -5,10 +5,23 @@ edition = "2021"
 
 [dependencies]
 leptos = { path = "../../leptos", features = ["csr"] }
+leptos_meta = { path = "../../meta", features = ["csr"] }
 log = "0.4"
 console_log = "1"
 console_error_panic_hook = "0.1.7"
 
 [dev-dependencies]
-wasm-bindgen-test = "0.3.0"
+wasm-bindgen = "0.2.87"
+wasm-bindgen-test = "0.3.37"
+pretty_assertions = "1.3.0"
 
+[dev-dependencies.web-sys]
+features = [
+    "Event",
+    "EventInit",
+    "EventTarget",
+    "HtmlElement",
+    "HtmlInputElement",
+    "XPathResult",
+]
+version = "0.3.64"

examples/counters_stable/Makefile.toml

@@ -1,5 +1,6 @@
 extend = [
     { path = "../cargo-make/main.toml" },
+    { path = "../cargo-make/wasm-test.toml" },
     { path = "../cargo-make/trunk_server.toml" },
     { path = "../cargo-make/playwright-test.toml" },
 ]

examples/counters_stable/e2e/tests/add_1k_counters.spec.ts

@@ -14,7 +14,6 @@ test.describe("Add 1000 Counters", () => {
     await ui.addOneThousandCounters();
     await ui.addOneThousandCounters();
 
-    await expect(ui.total).toHaveText("0");
     await expect(ui.counters).toHaveText("3000");
   });
 });

examples/counters_stable/e2e/tests/add_counter.spec.ts

@@ -10,7 +10,6 @@ test.describe("Add Counter", () => {
     await ui.addCounter();
     await ui.addCounter();
 
-    await expect(ui.total).toHaveText("0");
     await expect(ui.counters).toHaveText("3");
   });
 });

examples/counters_stable/e2e/tests/decrement_count.spec.ts

@@ -12,6 +12,5 @@ test.describe("Decrement Count", () => {
     await ui.decrementCount();
 
     await expect(ui.total).toHaveText("-3");
-    await expect(ui.counters).toHaveText("1");
   });
 });

examples/counters_stable/e2e/tests/enter_count.spec.ts

@@ -26,6 +26,5 @@ test.describe("Enter Count", () => {
     await ui.enterCount("50", 1);
 
     await expect(ui.total).toHaveText("250");
-    await expect(ui.counters).toHaveText("3");
   });
 });

examples/counters_stable/e2e/tests/increment_count.spec.ts

@@ -12,6 +12,5 @@ test.describe("Increment Count", () => {
     await ui.incrementCount();
 
     await expect(ui.total).toHaveText("3");
-    await expect(ui.counters).toHaveText("1");
   });
 });

examples/counters_stable/e2e/tests/remove_counter.spec.ts

@@ -12,7 +12,6 @@ test.describe("Remove Counter", () => {
 
     await ui.removeCounter(1);
 
-    await expect(ui.total).toHaveText("0");
     await expect(ui.counters).toHaveText("2");
   });
 });

examples/counters_stable/src/lib.rs

@@ -0,0 +1,109 @@
+use leptos::*;
+use leptos_meta::*;
+
+const MANY_COUNTERS: usize = 1000;
+
+type CounterHolder = Vec<(usize, (ReadSignal<i32>, WriteSignal<i32>))>;
+
+#[derive(Copy, Clone)]
+struct CounterUpdater {
+    set_counters: WriteSignal<CounterHolder>,
+}
+
+#[component]
+pub fn Counters(cx: Scope) -> impl IntoView {
+    let (next_counter_id, set_next_counter_id) = create_signal(cx, 0);
+    let (counters, set_counters) = create_signal::<CounterHolder>(cx, vec![]);
+    provide_context(cx, CounterUpdater { set_counters });
+    provide_meta_context(cx);
+
+    let add_counter = move |_| {
+        let id = next_counter_id.get();
+        let sig = create_signal(cx, 0);
+        set_counters.update(move |counters| counters.push((id, sig)));
+        set_next_counter_id.update(|id| *id += 1);
+    };
+
+    let add_many_counters = move |_| {
+        let next_id = next_counter_id.get();
+        let new_counters = (next_id..next_id + MANY_COUNTERS).map(|id| {
+            let signal = create_signal(cx, 0);
+            (id, signal)
+        });
+
+        set_counters.update(move |counters| counters.extend(new_counters));
+        set_next_counter_id.update(|id| *id += MANY_COUNTERS);
+    };
+
+    let clear_counters = move |_| {
+        set_counters.update(|counters| counters.clear());
+    };
+
+    view! { cx,
+        <Title text="Counters (Stable)" />
+        <div>
+            <button on:click=add_counter>
+                "Add Counter"
+            </button>
+            <button on:click=add_many_counters>
+                {format!("Add {MANY_COUNTERS} Counters")}
+            </button>
+            <button on:click=clear_counters>
+                "Clear Counters"
+            </button>
+            <p>
+                "Total: "
+                <span data-testid="total">{move ||
+                    counters.get()
+                        .iter()
+                        .map(|(_, (count, _))| count.get())
+                        .sum::<i32>()
+                        .to_string()
+                }</span>
+                " from "
+                <span data-testid="counters">{move || counters.with(|counters| counters.len()).to_string()}</span>
+                " counters."
+            </p>
+            <ul>
+                <For
+                    each={move || counters.get()}
+                    key={|counter| counter.0}
+                    view=move |cx, (id, (value, set_value))| {
+                        view! {
+                            cx,
+                            <Counter id value set_value/>
+                        }
+                    }
+                />
+            </ul>
+        </div>
+    }
+}
+
+#[component]
+fn Counter(
+    cx: Scope,
+    id: usize,
+    value: ReadSignal<i32>,
+    set_value: WriteSignal<i32>,
+) -> impl IntoView {
+    let CounterUpdater { set_counters } = use_context(cx).unwrap();
+
+    let input = move |ev| {
+        set_value
+            .set(event_target_value(&ev).parse::<i32>().unwrap_or_default())
+    };
+
+    view! { cx,
+        <li>
+            <button data-testid="decrement_count" on:click=move |_| set_value.update(move |value| *value -= 1)>"-1"</button>
+            <input data-testid="counter_input" type="text"
+                prop:value={move || value.get().to_string()}
+                on:input=input
+            />
+            <span>{value}</span>
+            <button data-testid="increment_count" on:click=move |_| set_value.update(move |value| *value += 1)>"+1"</button>
+            <button data-testid="remove_counter" on:click=move |_| set_counters.update(move |counters| counters.retain(|(counter_id, _)| counter_id != &id))>"x"</button>
+        </li>
+    }
+}

examples/counters_stable/src/main.rs

@@ -1,3 +1,4 @@
+use counters_stable::Counters;
 use leptos::*;
 
 fn main() {
@@ -5,108 +6,3 @@ fn main() {
     console_error_panic_hook::set_once();
     mount_to_body(|cx| view! { cx,  <Counters/> })
 }
-
-const MANY_COUNTERS: usize = 1000;
-
-type CounterHolder = Vec<(usize, (ReadSignal<i32>, WriteSignal<i32>))>;
-
-#[derive(Copy, Clone)]
-struct CounterUpdater {
-    set_counters: WriteSignal<CounterHolder>,
-}
-
-#[component]
-pub fn Counters(cx: Scope) -> impl IntoView {
-    let (next_counter_id, set_next_counter_id) = create_signal(cx, 0);
-    let (counters, set_counters) = create_signal::<CounterHolder>(cx, vec![]);
-    provide_context(cx, CounterUpdater { set_counters });
-
-    let add_counter = move |_| {
-        let id = next_counter_id.get();
-        let sig = create_signal(cx, 0);
-        set_counters.update(move |counters| counters.push((id, sig)));
-        set_next_counter_id.update(|id| *id += 1);
-    };
-
-    let add_many_counters = move |_| {
-        let next_id = next_counter_id.get();
-        let new_counters = (next_id..next_id + MANY_COUNTERS).map(|id| {
-            let signal = create_signal(cx, 0);
-            (id, signal)
-        });
-
-        set_counters.update(move |counters| counters.extend(new_counters));
-        set_next_counter_id.update(|id| *id += MANY_COUNTERS);
-    };
-
-    let clear_counters = move |_| {
-        set_counters.update(|counters| counters.clear());
-    };
-
-    view! { cx,
-        <div>
-            <button on:click=add_counter>
-                "Add Counter"
-            </button>
-            <button on:click=add_many_counters>
-                {format!("Add {MANY_COUNTERS} Counters")}
-            </button>
-            <button on:click=clear_counters>
-                "Clear Counters"
-            </button>
-            <p>
-                "Total: "
-                <span data-testid="total">{move ||
-                    counters.get()
-                        .iter()
-                        .map(|(_, (count, _))| count.get())
-                        .sum::<i32>()
-                        .to_string()
-                }</span>
-                " from "
-                <span data-testid="counters">{move || counters.with(|counters| counters.len()).to_string()}</span>
-                " counters."
-            </p>
-            <ul>
-                <For
-                    each={move || counters.get()}
-                    key={|counter| counter.0}
-                    view=move |cx, (id, (value, set_value))| {
-                        view! {
-                            cx,
-                            <Counter id value set_value/>
-                        }
-                    }
-                />
-            </ul>
-        </div>
-    }
-}
-
-#[component]
-fn Counter(
-    cx: Scope,
-    id: usize,
-    value: ReadSignal<i32>,
-    set_value: WriteSignal<i32>,
-) -> impl IntoView {
-    let CounterUpdater { set_counters } = use_context(cx).unwrap();
-
-    let input = move |ev| {
-        set_value
-            .set(event_target_value(&ev).parse::<i32>().unwrap_or_default())
-    };
-
-    view! { cx,
-        <li>
-            <button id="decrement_count" on:click=move |_| set_value.update(move |value| *value -= 1)>"-1"</button>
-            <input type="text"
-                prop:value={move || value.get().to_string()}
-                on:input=input
-            />
-            <span>{value}</span>
-            <button id="increment_count" on:click=move |_| set_value.update(move |value| *value += 1)>"+1"</button>
-            <button on:click=move |_| set_counters.update(move |counters| counters.retain(|(counter_id, _)| counter_id != &id))>"x"</button>
-        </li>
-    }
-}

examples/counters_stable/tests/web/add_1k_counters.rs

@@ -0,0 +1,17 @@
+use super::*;
+use crate::counters_page as ui;
+use pretty_assertions::assert_eq;
+
+#[wasm_bindgen_test]
+fn should_increase_the_number_of_counters() {
+    // Given
+    ui::view_counters();
+
+    // When
+    ui::add_1k_counters();
+    ui::add_1k_counters();
+    ui::add_1k_counters();
+
+    // Then
+    assert_eq!(ui::counters(), 3000);
+}

examples/counters_stable/tests/web/add_counter.rs

@@ -0,0 +1,17 @@
+use super::*;
+use crate::counters_page as ui;
+use pretty_assertions::assert_eq;
+
+#[wasm_bindgen_test]
+fn should_increase_the_number_of_counters() {
+    // Given
+    ui::view_counters();
+
+    // When
+    ui::add_counter();
+    ui::add_counter();
+    ui::add_counter();
+
+    // Then
+    assert_eq!(ui::counters(), 3);
+}

examples/counters_stable/tests/web/clear_counters.rs

@@ -0,0 +1,19 @@
+use super::*;
+use crate::counters_page as ui;
+use pretty_assertions::assert_eq;
+
+#[wasm_bindgen_test]
+fn should_reset_the_counts() {
+    // Given
+    ui::view_counters();
+    ui::add_counter();
+    ui::add_counter();
+    ui::add_counter();
+
+    // When
+    ui::clear_counters();
+
+    // Then
+    assert_eq!(ui::total(), 0);
+    assert_eq!(ui::counters(), 0);
+}

examples/counters_stable/tests/web/decrement_counter.rs

@@ -0,0 +1,18 @@
+use super::*;
+use crate::counters_page as ui;
+use pretty_assertions::assert_eq;
+
+#[wasm_bindgen_test]
+fn should_decrease_the_total_count() {
+    // Given
+    ui::view_counters();
+    ui::add_counter();
+
+    // When
+    ui::decrement_counter(1);
+    ui::decrement_counter(1);
+    ui::decrement_counter(1);
+
+    // Then
+    assert_eq!(ui::total(), -3);
+}

examples/counters_stable/tests/web/enter_count.rs

@@ -0,0 +1,34 @@
+use super::*;
+use crate::counters_page as ui;
+use pretty_assertions::assert_eq;
+
+#[wasm_bindgen_test]
+fn should_increase_the_total_count() {
+    // Given
+    ui::view_counters();
+    ui::add_counter();
+
+    // When
+    ui::enter_count(1, 5);
+
+    // Then
+    assert_eq!(ui::total(), 5);
+}
+
+#[wasm_bindgen_test]
+fn should_decrease_the_total_count() {
+    // Given
+    ui::view_counters();
+    ui::add_counter();
+    ui::add_counter();
+    ui::add_counter();
+
+    // When
+    ui::enter_count(1, 100);
+    ui::enter_count(2, 100);
+    ui::enter_count(3, 100);
+    ui::enter_count(1, 50);
+
+    // Then
+    assert_eq!(ui::total(), 250);
+}

examples/counters_stable/tests/web/fixtures/counters_page.rs

@@ -0,0 +1,112 @@
+use counters_stable::Counters;
+use leptos::*;
+use wasm_bindgen::JsCast;
+use web_sys::{Element, Event, EventInit, HtmlElement, HtmlInputElement};
+
+// Actions
+
+pub fn add_1k_counters() {
+    find_by_text("Add 1000 Counters").click();
+}
+
+pub fn add_counter() {
+    find_by_text("Add Counter").click();
+}
+
+pub fn clear_counters() {
+    find_by_text("Clear Counters").click();
+}
+
+pub fn decrement_counter(index: u32) {
+    counter_html_element(index, "decrement_count").click();
+}
+
+pub fn enter_count(index: u32, count: i32) {
+    let input = counter_input_element(index, "counter_input");
+    input.set_value(count.to_string().as_str());
+    let mut event_init = EventInit::new();
+    event_init.bubbles(true);
+    let event = Event::new_with_event_init_dict("input", &event_init).unwrap();
+    input.dispatch_event(&event).unwrap();
+}
+
+pub fn increment_counter(index: u32) {
+    counter_html_element(index, "increment_count").click();
+}
+
+pub fn remove_counter(index: u32) {
+    counter_html_element(index, "remove_counter").click();
+}
+
+pub fn view_counters() {
+    remove_existing_counters();
+    mount_to_body(|cx| view! { cx,  <Counters/> });
+}
+
+// Results
+
+pub fn counters() -> i32 {
+    data_test_id("counters").parse::<i32>().unwrap()
+}
+
+pub fn title() -> String {
+    leptos::document().title()
+}
+
+pub fn total() -> i32 {
+    data_test_id("total").parse::<i32>().unwrap()
+}
+
+// Internal
+
+fn counter_element(index: u32, text: &str) -> Element {
+    let selector =
+        format!("li:nth-child({}) [data-testid=\"{}\"]", index, text);
+    leptos::document()
+        .query_selector(&selector)
+        .unwrap()
+        .unwrap()
+}
+
+fn counter_html_element(index: u32, text: &str) -> HtmlElement {
+    counter_element(index, text)
+        .dyn_into::<HtmlElement>()
+        .unwrap()
+}
+
+fn counter_input_element(index: u32, text: &str) -> HtmlInputElement {
+    counter_element(index, text)
+        .dyn_into::<HtmlInputElement>()
+        .unwrap()
+}
+
+fn data_test_id(id: &str) -> String {
+    let selector = format!("[data-testid=\"{}\"]", id);
+    leptos::document()
+        .query_selector(&selector)
+        .unwrap()
+        .expect("counters not found")
+        .text_content()
+        .unwrap()
+}
+
+fn find_by_text(text: &str) -> HtmlElement {
+    let xpath = format!("//*[text()='{}']", text);
+    let document = leptos::document();
+    document
+        .evaluate(&xpath, &document)
+        .unwrap()
+        .iterate_next()
+        .unwrap()
+        .unwrap()
+        .dyn_into::<HtmlElement>()
+        .unwrap()
+}
+
+fn remove_existing_counters() {
+    if let Some(counter) =
+        leptos::document().query_selector("body div").unwrap()
+    {
+        counter.remove();
+    }
+}

examples/counters_stable/tests/web/fixtures/mod.rs

@@ -0,0 +1 @@
+pub mod counters_page;

examples/counters_stable/tests/web/increment_counter.rs

@@ -0,0 +1,18 @@
+use super::*;
+use crate::counters_page as ui;
+use pretty_assertions::assert_eq;
+
+#[wasm_bindgen_test]
+fn should_increase_the_total_count() {
+    // Given
+    ui::view_counters();
+    ui::add_counter();
+
+    // When
+    ui::increment_counter(1);
+    ui::increment_counter(1);
+    ui::increment_counter(1);
+
+    // Then
+    assert_eq!(ui::total(), 3);
+}

examples/counters_stable/tests/web/main.rs

@@ -0,0 +1,16 @@
+use wasm_bindgen_test::*;
+
+// Test Suites
+pub mod add_1k_counters;
+pub mod add_counter;
+pub mod clear_counters;
+pub mod decrement_counter;
+pub mod enter_count;
+pub mod increment_counter;
+pub mod remove_counter;
+pub mod view_counters;
+
+pub mod fixtures;
+pub use fixtures::*;
+
+wasm_bindgen_test_configure!(run_in_browser);

examples/counters_stable/tests/web/remove_counter.rs

@@ -0,0 +1,18 @@
+use super::*;
+use crate::counters_page as ui;
+use pretty_assertions::assert_eq;
+
+#[wasm_bindgen_test]
+fn should_decrement_the_number_of_counters() {
+    // Given
+    ui::view_counters();
+    ui::add_counter();
+    ui::add_counter();
+    ui::add_counter();
+
+    // When
+    ui::remove_counter(2);
+
+    // Then
+    assert_eq!(ui::counters(), 2);
+}

examples/counters_stable/tests/web/view_counters.rs

@@ -0,0 +1,22 @@
+use super::*;
+use crate::counters_page as ui;
+use pretty_assertions::assert_eq;
+
+#[wasm_bindgen_test]
+fn should_see_the_initial_counts() {
+    // When
+    ui::view_counters();
+
+    // Then
+    assert_eq!(ui::total(), 0);
+    assert_eq!(ui::counters(), 0);
+}
+
+#[wasm_bindgen_test]
+fn should_see_the_title() {
+    // When
+    ui::view_counters();
+
+    // Then
+    assert_eq!(ui::title(), "Counters (Stable)");
+}

examples/error_boundary/src/lib.rs

@@ -11,7 +11,7 @@ pub fn App(cx: Scope) -> impl IntoView {
         <h1>"Error Handling"</h1>
         <label>
             "Type a number (or something that's not a number!)"
-            <input type="number" on:input=on_input/>
+            <input on:input=on_input/>
             // If an `Err(_) had been rendered inside the <ErrorBoundary/>,
             // the fallback will be displayed. Otherwise, the children of the
             // <ErrorBoundary/> will be displayed.

examples/hackernews/src/main.rs

@@ -14,10 +14,6 @@ cfg_if! {
         async fn css() -> impl Responder {
             actix_files::NamedFile::open_async("./style.css").await
         }
-        #[get("/favicon.ico")]
-        async fn favicon() -> impl Responder {
-            actix_files::NamedFile::open_async("./target/site//favicon.ico").await
-        }
 
         #[actix_web::main]
         async fn main() -> std::io::Result<()> {
@@ -33,17 +29,34 @@ cfg_if! {
                 let site_root = &leptos_options.site_root;
 
                 App::new()
-                    .service(css)
-                    .service(favicon)
                     .route("/api/{tail:.*}", leptos_actix::handle_server_fns())
-                    .leptos_routes(leptos_options.to_owned(), routes.to_owned(), |cx| view! { cx, <App/> })
-                    .service(Files::new("/", site_root))
+                    .service(Files::new("/pkg", format!("{site_root}/pkg")))
+                    .service(Files::new("/assets", site_root))
+                    .service(favicon)
+                    .service(css)
+                    .leptos_routes(
+                        leptos_options.to_owned(),
+                        routes.to_owned(),
+                        |cx| view! { cx, <App/> },
+                    )
+                    .app_data(web::Data::new(leptos_options.to_owned()))
                 //.wrap(middleware::Compress::default())
             })
             .bind(&addr)?
             .run()
             .await
         }
+
+        #[actix_web::get("favicon.ico")]
+        async fn favicon(
+            leptos_options: actix_web::web::Data<leptos::LeptosOptions>,
+        ) -> actix_web::Result<actix_files::NamedFile> {
+            let leptos_options = leptos_options.into_inner();
+            let site_root = &leptos_options.site_root;
+            Ok(actix_files::NamedFile::open(format!(
+                "{site_root}/favicon.ico"
+            ))?)
+        }
     } else {
         fn main() {
             use hackernews::{App};

examples/ssr_modes/src/app.rs

@@ -27,6 +27,11 @@ pub fn App(cx: Scope) -> impl IntoView {
                         view=Post
                         ssr=SsrMode::Async
                     />
+
+                    <Route
+                        path="/*any"
+                        view=NotFound
+                    />
                 </Routes>
             </main>
         </Router>
@@ -182,3 +187,14 @@ pub async fn get_post(id: usize) -> Result<Option<Post>, ServerFnError> {
     tokio::time::sleep(std::time::Duration::from_secs(1)).await;
     Ok(POSTS.iter().find(|post| post.id == id).cloned())
 }
+
+#[component]
+fn NotFound(cx: Scope) -> impl IntoView {
+    #[cfg(feature = "ssr")]
+    {
+        let resp = expect_context::<leptos_actix::ResponseOptions>(cx);
+        resp.set_status(actix_web::http::StatusCode::NOT_FOUND);
+    }
+
+    view! { cx, <h1>"Not Found"</h1> }
+}

examples/ssr_modes/src/main.rs

@@ -24,12 +24,11 @@ async fn main() -> std::io::Result<()> {
 
         App::new()
             .route("/api/{tail:.*}", leptos_actix::handle_server_fns())
-            .leptos_routes(
-                leptos_options.to_owned(),
-                routes.to_owned(),
-                |cx| view! { cx, <App/> },
-            )
-            .service(Files::new("/", site_root))
+            .service(Files::new("/pkg", format!("{site_root}/pkg")))
+            .service(Files::new("/assets", site_root))
+            .service(favicon)
+            .leptos_routes(leptos_options.to_owned(), routes.to_owned(), App)
+            .app_data(web::Data::new(leptos_options.to_owned()))
         //.wrap(middleware::Compress::default())
     })
     .bind(&addr)?
@@ -37,6 +36,18 @@ async fn main() -> std::io::Result<()> {
     .await
 }
 
+#[cfg(feature = "ssr")]
+#[actix_web::get("favicon.ico")]
+async fn favicon(
+    leptos_options: actix_web::web::Data<leptos::LeptosOptions>,
+) -> actix_web::Result<actix_files::NamedFile> {
+    let leptos_options = leptos_options.into_inner();
+    let site_root = &leptos_options.site_root;
+    Ok(actix_files::NamedFile::open(format!(
+        "{site_root}/favicon.ico"
+    ))?)
+}
+
 #[cfg(not(feature = "ssr"))]
 pub fn main() {
     // no client-side main function

examples/tailwind/README.md

@@ -30,6 +30,25 @@ npm install -D tailwindcss
 
 If you'd rather not use `npm`, you can install the Tailwind binary [here](https://github.com/tailwindlabs/tailwindcss/releases).
 
+## Adding Tailwind plugins
+
+If you'd like to add [Tailwind plugins](https://tailwindcss.com/docs/plugins), such as [DaisyUI](https://daisyui.com/), you can do the following:
+
+`npm install -D daisyui@latest`
+
+Then add the plugin to your exports in `tailwind.config.js` :
+
+```javascript
+module.exports = {
+  //...
+  plugins: [require("daisyui")],
+};
+```
+
+And re-run the following to generate the css:
+
+`npx tailwindcss -i ./input.css -o ./style/output.css --watch`
+
 ## Setting up with VS Code and Additional Tools
 
 If you're using VS Code, add the following to your `settings.json`

examples/todo_app_sqlite/src/main.rs

@@ -47,14 +47,32 @@ cfg_if! {
                 App::new()
                     .service(css)
                     .route("/api/{tail:.*}", leptos_actix::handle_server_fns())
-                    .leptos_routes(leptos_options.to_owned(), routes.to_owned(), |cx| view! { cx, <TodoApp/> })
-                    .service(Files::new("/", site_root))
+                    .service(Files::new("/pkg", format!("{site_root}/pkg")))
+                    .service(Files::new("/assets", site_root))
+                    .service(favicon)
+                    .leptos_routes(
+                        leptos_options.to_owned(),
+                        routes.to_owned(),
+                        TodoApp,
+                    )
+                    .app_data(web::Data::new(leptos_options.to_owned()))
                     //.wrap(middleware::Compress::default())
             })
             .bind(addr)?
             .run()
             .await
         }
+
+        #[actix_web::get("favicon.ico")]
+        async fn favicon(
+            leptos_options: actix_web::web::Data<leptos::LeptosOptions>,
+        ) -> actix_web::Result<actix_files::NamedFile> {
+            let leptos_options = leptos_options.into_inner();
+            let site_root = &leptos_options.site_root;
+            Ok(actix_files::NamedFile::open(format!(
+                "{site_root}/favicon.ico"
+            ))?)
+        }
     } else {
         fn main() {
             // no client-side main function

examples/todo_app_sqlite/src/todo.rs

@@ -4,6 +4,14 @@ use leptos_meta::*;
 use leptos_router::*;
 use serde::{Deserialize, Serialize};
 
+#[derive(Clone, Debug, PartialEq, Eq, Serialize, Deserialize)]
+#[cfg_attr(feature = "ssr", derive(sqlx::FromRow))]
+pub struct Todo {
+    id: u16,
+    title: String,
+    completed: bool,
+}
+
 cfg_if! {
     if #[cfg(feature = "ssr")] {
         use sqlx::{Connection, SqliteConnection};
@@ -11,20 +19,6 @@ cfg_if! {
         pub async fn db() -> Result<SqliteConnection, ServerFnError> {
             Ok(SqliteConnection::connect("sqlite:Todos.db").await?)
         }
-
-        #[derive(Clone, Debug, PartialEq, Eq, Serialize, Deserialize, sqlx::FromRow)]
-        pub struct Todo {
-            id: u16,
-            title: String,
-            completed: bool,
-        }
-    } else {
-        #[derive(Clone, Debug, PartialEq, Eq, Serialize, Deserialize)]
-        pub struct Todo {
-            id: u16,
-            title: String,
-            completed: bool,
-        }
     }
 }
 
@@ -92,10 +86,8 @@ pub fn TodoApp(cx: Scope) -> impl IntoView {
             </header>
             <main>
                 <Routes>
-                    <Route path="" view=|cx| view! {
-                        cx,
-                        <Todos/>
-                    }/>
+                    <Route path="" view=Todos/>
+                    <Route path="/*any" view=NotFound/>
                 </Routes>
             </main>
         </Router>
@@ -200,3 +192,14 @@ pub fn Todos(cx: Scope) -> impl IntoView {
         </div>
     }
 }
+
+#[component]
+fn NotFound(cx: Scope) -> impl IntoView {
+    #[cfg(feature = "ssr")]
+    {
+        let resp = expect_context::<leptos_actix::ResponseOptions>(cx);
+        resp.set_status(actix_web::http::StatusCode::NOT_FOUND);
+    }
+
+    view! { cx, <h1>"Not Found"</h1> }
+}

examples/todo_app_sqlite_axum/src/todo.rs

@@ -5,6 +5,14 @@ use leptos_meta::*;
 use leptos_router::*;
 use serde::{Deserialize, Serialize};
 
+#[derive(Clone, Debug, PartialEq, Eq, Serialize, Deserialize)]
+#[cfg_attr(feature = "ssr", derive(sqlx::FromRow))]
+pub struct Todo {
+    id: u16,
+    title: String,
+    completed: bool,
+}
+
 cfg_if! {
     if #[cfg(feature = "ssr")] {
         use sqlx::{Connection, SqliteConnection};
@@ -13,20 +21,6 @@ cfg_if! {
         pub async fn db() -> Result<SqliteConnection, ServerFnError> {
             Ok(SqliteConnection::connect("sqlite:Todos.db").await?)
         }
-
-        #[derive(Clone, Debug, PartialEq, Eq, Serialize, Deserialize, sqlx::FromRow)]
-        pub struct Todo {
-            id: u16,
-            title: String,
-            completed: bool,
-        }
-    } else {
-        #[derive(Clone, Debug, PartialEq, Eq, Serialize, Deserialize)]
-        pub struct Todo {
-            id: u16,
-            title: String,
-            completed: bool,
-        }
     }
 }
 

examples/todo_app_sqlite_viz/src/todo.rs

@@ -5,6 +5,14 @@ use leptos_meta::*;
 use leptos_router::*;
 use serde::{Deserialize, Serialize};
 
+#[derive(Clone, Debug, PartialEq, Eq, Serialize, Deserialize)]
+#[cfg_attr(feature = "ssr", derive(sqlx::FromRow))]
+pub struct Todo {
+    id: u16,
+    title: String,
+    completed: bool,
+}
+
 cfg_if! {
     if #[cfg(feature = "ssr")] {
         use sqlx::{Connection, SqliteConnection};
@@ -13,20 +21,6 @@ cfg_if! {
         pub async fn db() -> Result<SqliteConnection, ServerFnError> {
             Ok(SqliteConnection::connect("sqlite:Todos.db").await?)
         }
-
-        #[derive(Clone, Debug, PartialEq, Eq, Serialize, Deserialize, sqlx::FromRow)]
-        pub struct Todo {
-            id: u16,
-            title: String,
-            completed: bool,
-        }
-    } else {
-        #[derive(Clone, Debug, PartialEq, Eq, Serialize, Deserialize)]
-        pub struct Todo {
-            id: u16,
-            title: String,
-            completed: bool,
-        }
     }
 }
 

flake.lock

@@ -38,11 +38,11 @@
     },
     "nixpkgs": {
       "locked": {
-        "lastModified": 1681920287,
-        "narHash": "sha256-+/d6XQQfhhXVfqfLROJoqj3TuG38CAeoT6jO1g9r1k0=",
+        "lastModified": 1687898314,
+        "narHash": "sha256-B4BHon3uMXQw8ZdbwxRK1BmxVOGBV4viipKpGaIlGwk=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "645bc49f34fa8eff95479f0345ff57e55b53437e",
+        "rev": "e18dc963075ed115afb3e312b64643bf8fd4b474",
         "type": "github"
       },
       "original": {
@@ -52,22 +52,6 @@
         "type": "github"
       }
     },
-    "nixpkgs_2": {
-      "locked": {
-        "lastModified": 1681358109,
-        "narHash": "sha256-eKyxW4OohHQx9Urxi7TQlFBTDWII+F+x2hklDOQPB50=",
-        "owner": "NixOS",
-        "repo": "nixpkgs",
-        "rev": "96ba1c52e54e74c3197f4d43026b3f3d92e83ff9",
-        "type": "github"
-      },
-      "original": {
-        "owner": "NixOS",
-        "ref": "nixpkgs-unstable",
-        "repo": "nixpkgs",
-        "type": "github"
-      }
-    },
     "root": {
       "inputs": {
         "flake-utils": "flake-utils",
@@ -78,7 +62,9 @@
     "rust-overlay": {
       "inputs": {
         "flake-utils": "flake-utils_2",
-        "nixpkgs": "nixpkgs_2"
+        "nixpkgs": [
+          "nixpkgs"
+        ]
       },
       "locked": {
         "lastModified": 1682043560,

flake.nix

@@ -4,6 +4,7 @@
   inputs = {
     nixpkgs.url      = "github:NixOS/nixpkgs/nixos-unstable";
     rust-overlay.url = "github:oxalica/rust-overlay";
+    rust-overlay.inputs.nixpkgs.follows = "nixpkgs";
     flake-utils.url  = "github:numtide/flake-utils";
   };
 
@@ -22,7 +23,8 @@
             openssl
             pkg-config
             cacert
-            (rust-bin.selectLatestNightlyWith( toolchain: toolchain.default.override {
+            mdbook
+            (rust-bin.selectLatestNightlyWith(toolchain: toolchain.default.override {
               extensions= [ "rust-src" "rust-analyzer" ];
               targets = [ "wasm32-unknown-unknown" ];
             }))

integrations/actix/Cargo.toml

@@ -19,3 +19,6 @@ serde_json = "1"
 parking_lot = "0.12.1"
 regex = "1.7.0"
 tracing = "0.1.37"
+
+[features]
+nonce = ["leptos/nonce"]

integrations/actix/Makefile.toml

@@ -0,0 +1,4 @@
+extend = { path = "../../cargo-make/main.toml" }
+
+[tasks.check-format]
+env = { LEPTOS_PROJECT_DIRECTORY = "../../" }

integrations/actix/src/lib.rs

@@ -223,26 +223,30 @@ pub fn handle_server_fns_with_context(
                             let res_options =
                                 use_context::<ResponseOptions>(cx).unwrap();
 
-                            let mut res: HttpResponseBuilder;
+                            let mut res: HttpResponseBuilder =
+                                HttpResponse::Ok();
                             let res_parts = res_options.0.write();
 
-                            if accept_header == Some("application/json")
-                                || accept_header
-                                    == Some("application/x-www-form-urlencoded")
-                                || accept_header == Some("application/cbor")
+                            // if accept_header isn't set to one of these, it's a form submit
+                            // redirect back to the referrer if not redirect has been set
+                            if accept_header != Some("application/json")
+                                && accept_header
+                                    != Some("application/x-www-form-urlencoded")
+                                && accept_header != Some("application/cbor")
                             {
-                                res = HttpResponse::Ok();
-                            }
-                            // otherwise, it's probably a <form> submit or something: redirect back to the referrer
-                            else {
-                                let referer = req
-                                    .headers()
-                                    .get("Referer")
-                                    .and_then(|value| value.to_str().ok())
-                                    .unwrap_or("/");
-                                res = HttpResponse::SeeOther();
-                                res.insert_header(("Location", referer))
-                                    .content_type("application/json");
+                                // Location will already be set if redirect() has been used
+                                let has_location_set =
+                                    res_parts.headers.get("Location").is_some();
+                                if !has_location_set {
+                                    let referer = req
+                                        .headers()
+                                        .get("Referer")
+                                        .and_then(|value| value.to_str().ok())
+                                        .unwrap_or("/");
+                                    res = HttpResponse::SeeOther();
+                                    res.insert_header(("Location", referer))
+                                        .content_type("application/json");
+                                }
                             };
                             // Override StatusCode if it was set in a Resource or Element
                             if let Some(status) = res_parts.status {
@@ -288,7 +292,12 @@ pub fn handle_server_fns_with_context(
                 } else {
                     HttpResponse::BadRequest().body(format!(
                         "Could not find a server function at the route {:?}. \
-                         \n\nIt's likely that you need to call \
+                         \n\nIt's likely that either 
+                         1. The API prefix you specify in the `#[server]` \
+                         macro doesn't match the prefix at which your server \
+                         function handler is mounted, or \n2. You are on a \
+                         platform that doesn't support automatic server \
+                         function registration and you need to call \
                          ServerFn::register_explicit() on the server function \
                          type, somewhere in your `main` function.",
                         req.path()
@@ -724,6 +733,8 @@ fn provide_contexts(
     provide_context(cx, res_options);
     provide_context(cx, req.clone());
     provide_server_redirect(cx, move |path| redirect(cx, path));
+    #[cfg(feature = "nonce")]
+    leptos::nonce::provide_nonce(cx);
 }
 
 fn leptos_corrected_path(req: &HttpRequest) -> String {
@@ -788,8 +799,11 @@ async fn build_stream_response(
     // wait for any blocking resources to load before pulling metadata
     let first_app_chunk = stream.next().await.unwrap_or_default();
 
-    let (head, tail) =
-        html_parts_separated(options, use_context::<MetaContext>(cx).as_ref());
+    let (head, tail) = html_parts_separated(
+        cx,
+        options,
+        use_context::<MetaContext>(cx).as_ref(),
+    );
 
     let mut stream = Box::pin(
         futures::stream::once(async move { head.clone() })

integrations/axum/Cargo.toml

@@ -19,6 +19,9 @@ leptos_integration_utils = { workspace = true }
 serde_json = "1"
 tokio = { version = "1", features = ["full"] }
 parking_lot = "0.12.1"
-tokio-util = {version = "0.7.7", features = ["rt"] }
+tokio-util = { version = "0.7.7", features = ["rt"] }
 tracing = "0.1.37"
 once_cell = "1.17"
+
+[features]
+nonce = ["leptos/nonce"]

integrations/axum/Makefile.toml

@@ -0,0 +1,4 @@
+extend = { path = "../../cargo-make/main.toml" }
+
+[tasks.check-format]
+env = { LEPTOS_PROJECT_DIRECTORY = "../../" }

integrations/axum/src/lib.rs

@@ -335,9 +335,14 @@ async fn handle_server_fns_inner(
                 Response::builder().status(StatusCode::BAD_REQUEST).body(
                     Full::from(format!(
                         "Could not find a server function at the route \
-                         {fn_name}. \n\nIt's likely that you need to call \
+                         {fn_name}. \n\nIt's likely that either 
+                         1. The API prefix you specify in the `#[server]` \
+                         macro doesn't match the prefix at which your server \
+                         function handler is mounted, or \n2. You are on a \
+                         platform that doesn't support automatic server \
+                         function registration and you need to call \
                          ServerFn::register_explicit() on the server function \
-                         type, somewhere in your `main` function."
+                         type, somewhere in your `main` function.",
                     )),
                 )
             }
@@ -688,8 +693,11 @@ async fn forward_stream(
     let mut shell = Box::pin(bundle);
     let first_app_chunk = shell.next().await.unwrap_or_default();
 
-    let (head, tail) =
-        html_parts_separated(options, use_context::<MetaContext>(cx).as_ref());
+    let (head, tail) = html_parts_separated(
+        cx,
+        options,
+        use_context::<MetaContext>(cx).as_ref(),
+    );
 
     _ = tx.send(head).await;
     _ = tx.send(first_app_chunk).await;
@@ -823,6 +831,8 @@ fn provide_contexts(
     provide_context(cx, extractor);
     provide_context(cx, default_res_options);
     provide_server_redirect(cx, move |path| redirect(cx, path));
+    #[cfg(feature = "nonce")]
+    leptos::nonce::provide_nonce(cx);
 }
 
 /// Returns an Axum [Handler](axum::handler::Handler) that listens for a `GET` request and tries
@@ -1276,18 +1286,24 @@ impl ExtractorHelper {
         }
     }
 
-    pub async fn extract<F, T, U>(&self, f: F) -> Result<U, T::Rejection>
+    pub async fn extract<F, T, U, S>(
+        &self,
+        f: F,
+        s: S,
+    ) -> Result<U, T::Rejection>
     where
-        F: Extractor<T, U>,
-        T: std::fmt::Debug + Send + FromRequestParts<()> + 'static,
+        S: Sized,
+        F: Extractor<T, U, S>,
+        T: std::fmt::Debug + Send + FromRequestParts<S> + 'static,
         T::Rejection: std::fmt::Debug + Send + 'static,
     {
         let mut parts = self.parts.lock().await;
-        let data = T::from_request_parts(&mut parts, &()).await?;
+        let data = T::from_request_parts(&mut parts, &s).await?;
         Ok(f.call(data).await)
     }
 }
 
+/// Getting ExtractorHelper from a request will return an ExtractorHelper whose state is ().
 impl<B> From<Request<B>> for ExtractorHelper {
     fn from(req: Request<B>) -> Self {
         // TODO provide body for extractors there, too?
@@ -1324,34 +1340,71 @@ impl<B> From<Request<B>> for ExtractorHelper {
 #[tracing::instrument(level = "trace", fields(error), skip_all)]
 pub async fn extract<T, U>(
     cx: Scope,
-    f: impl Extractor<T, U>,
+    f: impl Extractor<T, U, ()>,
 ) -> Result<U, T::Rejection>
 where
     T: std::fmt::Debug + Send + FromRequestParts<()> + 'static,
     T::Rejection: std::fmt::Debug + Send + 'static,
+{
+    extract_with_state(cx, (), f).await
+}
+
+/// A helper to make it easier to use Axum extractors in server functions. This takes
+/// a handler function and state as its arguments. The handler rules similar to Axum
+/// [handlers](https://docs.rs/axum/latest/axum/extract/index.html#intro): it is an async function
+/// whose arguments are “extractors.”
+///
+/// ```rust,ignore
+/// #[server(QueryExtract, "/api")]
+/// pub async fn query_extract(cx: Scope) -> Result<String, ServerFnError> {
+///     use axum::{extract::Query, http::Method};
+///     use leptos_axum::extract;
+///     let state: ServerState = use_context::<crate::ServerState>(cx)
+///          .ok_or(ServerFnError::ServerError("No server state".to_string()))?;
+///
+///     extract_with_state(cx, state, |method: Method, res: Query<MyQuery>| async move {
+///             format!("{method:?} and {}", res.q)
+///         },
+///     )
+///     .await
+///     .map_err(|e| ServerFnError::ServerError("Could not extract method and query...".to_string()))
+/// }
+/// ```
+#[tracing::instrument(level = "trace", fields(error), skip_all)]
+pub async fn extract_with_state<T, U, S>(
+    cx: Scope,
+    state: S,
+    f: impl Extractor<T, U, S>,
+) -> Result<U, T::Rejection>
+where
+    S: Sized,
+    T: std::fmt::Debug + Send + FromRequestParts<S> + 'static,
+    T::Rejection: std::fmt::Debug + Send + 'static,
 {
     use_context::<ExtractorHelper>(cx)
         .expect(
             "should have had ExtractorHelper provided by the leptos_axum \
              integration",
         )
-        .extract(f)
+        .extract(f, state)
         .await
 }
 
-pub trait Extractor<T, U>
+pub trait Extractor<T, U, S>
 where
-    T: FromRequestParts<()>,
+    S: Sized,
+    T: FromRequestParts<S>,
 {
     fn call(self, args: T) -> Pin<Box<dyn Future<Output = U>>>;
 }
 
 macro_rules! factory_tuple ({ $($param:ident)* } => {
-    impl<Func, Fut, U, $($param,)*> Extractor<($($param,)*), U> for Func
+    impl<Func, Fut, U, S, $($param,)*> Extractor<($($param,)*), U, S> for Func
     where
-        $($param: FromRequestParts<()> + Send,)*
+        $($param: FromRequestParts<S> + Send,)*
         Func: FnOnce($($param),*) -> Fut + 'static,
         Fut: Future<Output = U> + 'static,
+        S: Sized + Send + Sync,
     {
         #[inline]
         #[allow(non_snake_case)]

integrations/utils/Makefile.toml

@@ -0,0 +1,4 @@
+extend = { path = "../../cargo-make/main.toml" }
+
+[tasks.check-format]
+env = { LEPTOS_PROJECT_DIRECTORY = "../../" }

integrations/utils/src/lib.rs

@@ -1,18 +1,18 @@
 use futures::{Stream, StreamExt};
-use leptos::{use_context, RuntimeId, ScopeId};
+use leptos::{nonce::use_nonce, use_context, RuntimeId, Scope, ScopeId};
 use leptos_config::LeptosOptions;
 use leptos_meta::MetaContext;
 
 extern crate tracing;
 
 #[tracing::instrument(level = "trace", fields(error), skip_all)]
-fn autoreload(options: &LeptosOptions) -> String {
+fn autoreload(nonce_str: &str, options: &LeptosOptions) -> String {
     let site_ip = &options.site_addr.ip().to_string();
     let reload_port = options.reload_port;
     match std::env::var("LEPTOS_WATCH").is_ok() {
         true => format!(
             r#"
-                <script crossorigin="">(function () {{
+                <script crossorigin=""{nonce_str}>(function () {{
                     {}
                     var ws = new WebSocket('ws://{site_ip}:{reload_port}/live_reload');
                     ws.onmessage = (ev) => {{
@@ -42,6 +42,8 @@ fn autoreload(options: &LeptosOptions) -> String {
         false => "".to_string(),
     }
 }
+
+#[deprecated = "Use html_parts_separated."]
 #[tracing::instrument(level = "trace", fields(error), skip_all)]
 pub fn html_parts(
     options: &LeptosOptions,
@@ -58,7 +60,7 @@ pub fn html_parts(
         wasm_output_name.push_str("_bg");
     }
 
-    let leptos_autoreload = autoreload(options);
+    let leptos_autoreload = autoreload("".into(), options);
 
     let html_metadata =
         meta.and_then(|mc| mc.html.as_string()).unwrap_or_default();
@@ -80,21 +82,27 @@ pub fn html_parts(
 
 #[tracing::instrument(level = "trace", fields(error), skip_all)]
 pub fn html_parts_separated(
+    cx: Scope,
     options: &LeptosOptions,
     meta: Option<&MetaContext>,
 ) -> (String, &'static str) {
     let pkg_path = &options.site_pkg_dir;
     let output_name = &options.output_name;
+    let nonce = use_nonce(cx);
+    let nonce = nonce
+        .as_ref()
+        .map(|nonce| format!(" nonce=\"{nonce}\""))
+        .unwrap_or_default();
 
     // 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
+    // we add _bg to the wasm files if cargo-leptos doesn't set the env var LEPTOS_OUTPUT_NAME at compile time
+    // Otherwise we need to add _bg because wasm_pack always does.
     let mut wasm_output_name = output_name.clone();
-    if std::env::var("LEPTOS_OUTPUT_NAME").is_err() {
+    if std::option_env!("LEPTOS_OUTPUT_NAME").is_none() {
         wasm_output_name.push_str("_bg");
     }
 
-    let leptos_autoreload = autoreload(options);
+    let leptos_autoreload = autoreload(&nonce, options);
 
     let html_metadata =
         meta.and_then(|mc| mc.html.as_string()).unwrap_or_default();
@@ -109,9 +117,9 @@ pub fn html_parts_separated(
                     <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>
+                    <link rel="modulepreload" href="/{pkg_path}/{output_name}.js"{nonce}>
+                    <link rel="preload" href="/{pkg_path}/{wasm_output_name}.wasm" as="fetch" type="application/wasm" crossorigin=""{nonce}>
+                    <script type="module"{nonce}>import init, {{ hydrate }} from '/{pkg_path}/{output_name}.js'; init('/{pkg_path}/{wasm_output_name}.wasm').then(hydrate);</script>
                     {leptos_autoreload}
                     "#
     );
@@ -133,15 +141,14 @@ pub async fn build_async_response(
     }
 
     let cx = leptos::Scope { runtime, id: scope };
-    let (head, tail) =
-        html_parts_separated(options, use_context::<MetaContext>(cx).as_ref());
+    let (head, tail) = html_parts_separated(
+        cx,
+        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);
-    let head_meta = meta
-        .as_ref()
-        .map(|meta| meta.dehydrate())
-        .unwrap_or_default();
     let body_meta = meta
         .as_ref()
         .and_then(|meta| meta.body.as_string())
@@ -149,5 +156,5 @@ pub async fn build_async_response(
 
     runtime.dispose();
 
-    format!("{head}{head_meta}</head><body{body_meta}>{buf}{tail}")
+    format!("{head}</head><body{body_meta}>{buf}{tail}")
 }

integrations/viz/Cargo.toml

@@ -19,3 +19,6 @@ leptos_integration_utils = { workspace = true }
 serde_json = "1"
 tokio = { version = "1", features = ["full"] }
 parking_lot = "0.12.1"
+
+[features]
+nonce = ["leptos/nonce"]

integrations/viz/Makefile.toml

@@ -0,0 +1,4 @@
+extend = { path = "../../cargo-make/main.toml" }
+
+[tasks.check-format]
+env = { LEPTOS_PROJECT_DIRECTORY = "../../" }

integrations/viz/src/lib.rs

@@ -312,10 +312,17 @@ async fn handle_server_fns_inner(
                                 .body(Body::from(format!(
                                     "Could not find a server function at the \
                                      route {fn_name}. \n\nIt's likely that \
-                                     you need to call \
+                                     either 
+                                    1. The API prefix you specify in the \
+                                     `#[server]` macro doesn't match the \
+                                     prefix at which your server function \
+                                     handler is mounted, or \n2. You are on a \
+                                     platform that doesn't support automatic \
+                                     server function registration and you \
+                                     need to call \
                                      ServerFn::register_explicit() on the \
                                      server function type, somewhere in your \
-                                     `main` function."
+                                     `main` function.",
                                 )))
                         }
                         .expect("could not build Response");
@@ -648,8 +655,11 @@ async fn forward_stream(
     mut tx: Sender<String>,
 ) {
     let cx = Scope { runtime, id: scope };
-    let (head, tail) =
-        html_parts_separated(options, use_context::<MetaContext>(cx).as_ref());
+    let (head, tail) = html_parts_separated(
+        cx,
+        options,
+        use_context::<MetaContext>(cx).as_ref(),
+    );
 
     _ = tx.send(head).await;
     let mut shell = Box::pin(bundle);
@@ -786,6 +796,8 @@ fn provide_contexts(
     provide_context(cx, req_parts);
     provide_context(cx, default_res_options);
     provide_server_redirect(cx, move |path| redirect(cx, path));
+    #[cfg(feature = "nonce")]
+    leptos::nonce::provide_nonce(cx);
 }
 
 /// Returns a Viz [Handler](viz::Handler) that listens for a `GET` request and tries

leptos/Cargo.toml

@@ -13,16 +13,16 @@ cfg-if = "1"
 leptos_dom = { workspace = true }
 leptos_macro = { workspace = true }
 leptos_reactive = { workspace = true }
-leptos_server = { workspace = true}
+leptos_server = { workspace = true }
 leptos_config = { workspace = true }
 tracing = "0.1"
 typed-builder = "0.14"
-server_fn = { workspace = true}
+server_fn = { workspace = true }
 web-sys = { version = "0.3.63", optional = true }
 wasm-bindgen = { version = "0.2", optional = true }
 
 [dev-dependencies]
-leptos = { path = "."}
+leptos = { path = "." }
 
 [features]
 default = ["serde"]
@@ -58,9 +58,18 @@ serde-lite = ["leptos_reactive/serde-lite"]
 miniserde = ["leptos_reactive/miniserde"]
 rkyv = ["leptos_reactive/rkyv"]
 tracing = ["leptos_macro/tracing"]
+nonce = ["leptos_dom/nonce"]
 
 [package.metadata.cargo-all-features]
-denylist = ["nightly", "tracing", "template_macro", "rustls", "default-tls", "web-sys", "wasm-bindgen"]
+denylist = [
+  "nightly",
+  "tracing",
+  "template_macro",
+  "rustls",
+  "default-tls",
+  "web-sys",
+  "wasm-bindgen",
+]
 skip_feature_sets = [
   [
     "csr",

leptos/Makefile.toml

@@ -1,3 +1,14 @@
+extend = { path = "../cargo-make/main.toml" }
+
+[tasks.check]
+clear = true
+dependencies = [
+	"check-all",
+	"check-wasm",
+	"check-release",
+	"check-wasm-release",
+]
+
 [tasks.check-wasm]
 clear = true
 dependencies = ["check-hydrate", "check-csr"]
@@ -43,3 +54,7 @@ args = [
 	"--features=csr",
 	"--target=wasm32-unknown-unknown",
 ]
+
+[tasks.check-release]
+command = "cargo"
+args = ["check", "--release"]

leptos/src/error_boundary.rs

@@ -58,13 +58,15 @@ where
     F: Fn(Scope, RwSignal<Errors>) -> IV + 'static,
     IV: IntoView,
 {
-    _ = HydrationCtx::next_component();
+    let before_children = HydrationCtx::next_component("e");
+
     let errors: RwSignal<Errors> = create_rw_signal(cx, Errors::default());
 
     provide_context(cx, errors);
 
     // Run children so that they render and execute resources
     let children = children(cx);
+    HydrationCtx::continue_from(before_children);
 
     #[cfg(all(debug_assertions, feature = "hydrate"))]
     {

leptos/src/lib.rs

@@ -84,11 +84,18 @@
 //!   from the server to the client.
 //! - `serde-lite` In SSR/hydrate mode, uses [serde-lite](https://docs.rs/serde-lite/latest/serde_lite/) to serialize resources and send them
 //!   from the server to the client.
+//! - `rkyv` In SSR/hydrate mode, uses [rkyv](https://docs.rs/rkyv/latest/rkyv/) to serialize resources and send them
+//!   from the server to the client.
 //! - `miniserde` In SSR/hydrate mode, uses [miniserde](https://docs.rs/miniserde/latest/miniserde/) to serialize resources and send them
 //!   from the server to the client.
+//! - `tracing` Adds additional support for [`tracing`](https://docs.rs/tracing/latest/tracing/) to components.
+//! - `default-tls` Use default native TLS support. (Only applies when using server functions with a non-WASM client like a desktop app.)
+//! - `rustls` Use `rustls`. (Only applies when using server functions with a non-WASM client like a desktop app.)
+//! - `template_macro` Enables the [`template!`](leptos_macro::template) macro, which offers faster DOM node creation for some use cases in `csr`.
 //!
 //! **Important Note:** You must enable one of `csr`, `hydrate`, or `ssr` to tell Leptos
-//! which mode your app is operating in.
+//! which mode your app is operating in. You should only enable one of these per build target,
+//! i.e., you should not have both `hydrate` and `ssr` enabled for your server binary, only `ssr`.
 //!
 //! # A Simple Counter
 //!
@@ -157,9 +164,10 @@ pub use leptos_dom::{
         set_interval_with_handle, set_timeout, set_timeout_with_handle,
         window_event_listener, window_event_listener_untyped,
     },
-    html, log, math, mount_to, mount_to_body, svg, warn, window, Attribute,
-    Class, CollectView, Errors, Fragment, HtmlElement, IntoAttribute,
-    IntoClass, IntoProperty, IntoStyle, IntoView, NodeRef, Property, View,
+    html, log, math, mount_to, mount_to_body, nonce, svg, warn, window,
+    Attribute, Class, CollectView, Errors, Fragment, HtmlElement,
+    IntoAttribute, IntoClass, IntoProperty, IntoStyle, IntoView, NodeRef,
+    Property, View,
 };
 
 /// Types to make it easier to handle errors in your application.

leptos/src/suspense_component.rs

@@ -69,11 +69,13 @@ where
     // provide this SuspenseContext to any resources below it
     provide_context(cx, context);
 
-    let current_id = HydrationCtx::next_component();
+    let before = HydrationCtx::peek();
+    let current_id = HydrationCtx::next_component("s");
+    leptos::log!("<Suspense/> next_component {current_id}");
 
     let child = DynChild::new({
         #[cfg(not(any(feature = "csr", feature = "hydrate")))]
-        let current_id = current_id;
+        let current_id = current_id.clone();
 
         let children = Rc::new(orig_children(cx).into_view(cx));
         #[cfg(not(any(feature = "csr", feature = "hydrate")))]
@@ -97,7 +99,7 @@ where
                 {
                     // no resources were read under this, so just return the child
                     if context.pending_resources.get() == 0 {
-                        HydrationCtx::continue_from(current_id);
+                        HydrationCtx::continue_from(current_id.clone());
                         DynChild::new({
                             let children = Rc::clone(&children);
                             move || (*children).clone()
@@ -106,7 +108,7 @@ where
                     }
                     // show the fallback, but also prepare to stream HTML
                     else {
-                        HydrationCtx::continue_from(current_id);
+                        HydrationCtx::continue_from(current_id.clone());
 
                         cx.register_suspense(
                             context,
@@ -114,8 +116,11 @@ where
                             // out-of-order streaming
                             {
                                 let orig_children = Rc::clone(&orig_children);
+                                let current_id = current_id.clone();
                                 move || {
-                                    HydrationCtx::continue_from(current_id);
+                                    HydrationCtx::continue_from(
+                                        current_id.clone(),
+                                    );
                                     DynChild::new({
                                         let orig_children =
                                             orig_children(cx).into_view(cx);
@@ -129,8 +134,11 @@ where
                             // in-order streaming
                             {
                                 let orig_children = Rc::clone(&orig_children);
+                                let current_id = current_id.clone();
                                 move || {
-                                    HydrationCtx::continue_from(current_id);
+                                    HydrationCtx::continue_from(
+                                        current_id.clone(),
+                                    );
                                     DynChild::new({
                                         let orig_children =
                                             orig_children(cx).into_view(cx);
@@ -155,8 +163,8 @@ where
         _ => unreachable!(),
     };
 
-    HydrationCtx::continue_from(current_id);
-    HydrationCtx::next_component();
+    HydrationCtx::continue_from(before.clone());
+    _ = HydrationCtx::id();
 
     leptos_dom::View::Suspense(current_id, core_component)
 }

leptos/tests/test_examples/suspense-tests/src/app.rs

@@ -289,4 +289,4 @@ fn None(cx: Scope) -> impl IntoView {
             </div>
         </div>
     }
-}
+}

leptos_config/Makefile.toml

@@ -0,0 +1 @@
+extend = { path = "../cargo-make/main.toml" }

leptos_config/src/lib.rs

@@ -14,6 +14,7 @@ use typed_builder::TypedBuilder;
 /// A Struct to allow us to parse LeptosOptions from the file. Not really needed, most interactions should
 /// occur with LeptosOptions
 #[derive(Clone, Debug, serde::Deserialize)]
+#[serde(rename_all = "kebab-case")]
 pub struct ConfFile {
     pub leptos_options: LeptosOptions,
 }
@@ -23,31 +24,37 @@ pub struct ConfFile {
 /// correct path for WASM, JS, and Websockets, as well as other configuration tasks.
 /// It shares keys with cargo-leptos, to allow for easy interoperability
 #[derive(TypedBuilder, Debug, Clone, serde::Deserialize)]
+#[serde(rename_all = "kebab-case")]
 pub struct LeptosOptions {
     /// The name of the WASM and JS files generated by wasm-bindgen. Defaults to the crate name with underscores instead of dashes
     #[builder(setter(into))]
     pub output_name: String,
     /// The path of the all the files generated by cargo-leptos. This defaults to '.' for convenience when integrating with other
     /// tools.
-    #[builder(setter(into), default=".".to_string())]
+    #[builder(setter(into), default=default_site_root())]
+    #[serde(default = "default_site_root")]
     pub site_root: String,
     /// The path of the WASM and JS files generated by wasm-bindgen from the root of your app
     /// By default, wasm-bindgen puts them in `pkg`.
-    #[builder(setter(into), default="pkg".to_string())]
+    #[builder(setter(into), default=default_site_pkg_dir())]
+    #[serde(default = "default_site_pkg_dir")]
     pub site_pkg_dir: String,
     /// Used to configure the running environment of Leptos. Can be used to load dev constants and keys v prod, or change
     /// things based on the deployment environment
     /// I recommend passing in the result of `env::var("LEPTOS_ENV")`
-    #[builder(setter(into), default=Env::DEV)]
+    #[builder(setter(into), default=default_env())]
+    #[serde(default = "default_env")]
     pub env: Env,
     /// Provides a way to control the address leptos is served from.
     /// Using an env variable here would allow you to run the same code in dev and prod
     /// Defaults to `127.0.0.1:3000`
-    #[builder(setter(into), default=SocketAddr::from(([127,0,0,1], 3000)))]
+    #[builder(setter(into), default=default_site_addr())]
+    #[serde(default = "default_site_addr")]
     pub site_addr: SocketAddr,
     /// The port the Websocket watcher listens on. Should match the `reload_port` in cargo-leptos(if using).
     /// Defaults to `3001`
-    #[builder(default = 3001)]
+    #[builder(default = default_reload_port())]
+    #[serde(default = "default_reload_port")]
     pub reload_port: u32,
 }
 
@@ -81,6 +88,26 @@ impl LeptosOptions {
     }
 }
 
+fn default_site_root() -> String {
+    ".".to_string()
+}
+
+fn default_site_pkg_dir() -> String {
+    "pkg".to_string()
+}
+
+fn default_env() -> Env {
+    Env::DEV
+}
+
+fn default_site_addr() -> SocketAddr {
+    SocketAddr::from(([127, 0, 0, 1], 3000))
+}
+
+fn default_reload_port() -> u32 {
+    3001
+}
+
 fn env_w_default(
     key: &str,
     default: &str,
@@ -95,7 +122,7 @@ fn env_w_default(
 /// An enum that can be used to define the environment Leptos is running in.
 /// Setting this to the `PROD` variant will not include the WebSocket code for `cargo-leptos` watch mode.
 /// Defaults to `DEV`.
-#[derive(Debug, Clone, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize, PartialEq, Eq)]
 pub enum Env {
     PROD,
     DEV,
@@ -175,9 +202,7 @@ pub fn get_config_from_str(text: &str) -> Result<ConfFile, LeptosConfigError> {
     // so that serde error messages have right line number
     let newlines = text[..start].matches('\n').count();
     let input = "\n".repeat(newlines) + &text[start..];
-    let toml = input
-        .replace(metadata_name, "[leptos_options]")
-        .replace('-', "_");
+    let toml = input.replace(metadata_name, "[leptos-options]");
     let settings = Config::builder()
         // Read the "default" configuration file
         .add_source(File::from_str(&toml, FileFormat::Toml))

leptos_config/tests/config.rs

@@ -46,7 +46,7 @@ async fn get_configuration_from_file_ok() {
         .unwrap()
         .leptos_options;
 
-    assert_eq!(config.output_name, "app_test");
+    assert_eq!(config.output_name, "app-test");
     assert_eq!(config.site_root, "my_target/site");
     assert_eq!(config.site_pkg_dir, "my_pkg");
     assert_eq!(
@@ -93,7 +93,7 @@ async fn get_config_from_file_ok() {
         .unwrap()
         .leptos_options;
 
-    assert_eq!(config.output_name, "app_test");
+    assert_eq!(config.output_name, "app-test");
     assert_eq!(config.site_root, "my_target/site");
     assert_eq!(config.site_pkg_dir, "my_pkg");
     assert_eq!(
@@ -128,7 +128,7 @@ fn get_config_from_str_content() {
     let config = get_config_from_str(CARGO_TOML_CONTENT_OK)
         .unwrap()
         .leptos_options;
-    assert_eq!(config.output_name, "app_test");
+    assert_eq!(config.output_name, "app-test");
     assert_eq!(config.site_root, "my_target/site");
     assert_eq!(config.site_pkg_dir, "my_pkg");
     assert_eq!(
@@ -141,14 +141,14 @@ fn get_config_from_str_content() {
 #[tokio::test]
 async fn get_config_from_env() {
     // Test config values from environment variables
-    std::env::set_var("LEPTOS_OUTPUT_NAME", "app_test");
+    std::env::set_var("LEPTOS_OUTPUT_NAME", "app-test");
     std::env::set_var("LEPTOS_SITE_ROOT", "my_target/site");
     std::env::set_var("LEPTOS_SITE_PKG_DIR", "my_pkg");
     std::env::set_var("LEPTOS_SITE_ADDR", "0.0.0.0:80");
     std::env::set_var("LEPTOS_RELOAD_PORT", "8080");
 
     let config = get_configuration(None).await.unwrap().leptos_options;
-    assert_eq!(config.output_name, "app_test");
+    assert_eq!(config.output_name, "app-test");
 
     assert_eq!(config.site_root, "my_target/site");
     assert_eq!(config.site_pkg_dir, "my_pkg");
@@ -176,8 +176,8 @@ async fn get_config_from_env() {
 
 #[test]
 fn leptos_options_builder_default() {
-    let conf = LeptosOptions::builder().output_name("app_test").build();
-    assert_eq!(conf.output_name, "app_test");
+    let conf = LeptosOptions::builder().output_name("app-test").build();
+    assert_eq!(conf.output_name, "app-test");
     assert!(matches!(conf.env, Env::DEV));
     assert_eq!(conf.site_pkg_dir, "pkg");
     assert_eq!(conf.site_root, ".");

leptos_dom/Cargo.toml

@@ -9,12 +9,14 @@ description = "DOM operations for the Leptos web framework."
 
 [dependencies]
 async-recursion = "1"
+base64 = { version = "0.21", optional = true }
 cfg-if = "1"
 drain_filter_polyfill = "0.1"
 educe = "0.4"
 futures = "0.3"
+getrandom = { version = "0.2", optional = true }
 html-escape = "0.2"
-indexmap = "1.9"
+indexmap = "2"
 itertools = "0.10"
 js-sys = "0.3"
 leptos_reactive = { workspace = true }
@@ -22,6 +24,7 @@ server_fn = { workspace = true }
 once_cell = "1"
 pad-adapter = "0.1"
 paste = "1"
+rand = { version = "0.8", optional = true }
 rustc-hash = "1.1.0"
 serde_json = "1"
 smallvec = "1"
@@ -29,6 +32,9 @@ tracing = "0.1"
 wasm-bindgen = { version = "0.2", features = ["enable-interning"] }
 wasm-bindgen-futures = "0.4.31"
 
+[target.'cfg(target_arch = "wasm32")'.dependencies]
+getrandom = { version = "0.2", features = ["js"] }
+
 [dev-dependencies]
 leptos = { path = "../leptos" }
 
@@ -49,6 +55,7 @@ features = [
   "Range",
   "Text",
   "HtmlCollection",
+  "ShadowRoot",
   "TreeWalker",
 
   # Events we cast to in leptos_macro -- added here so we don't force users to import them
@@ -160,6 +167,7 @@ default = []
 web = ["leptos_reactive/csr"]
 ssr = ["leptos_reactive/ssr"]
 nightly = ["leptos_reactive/nightly"]
+nonce = ["dep:base64", "dep:getrandom", "dep:rand"]
 
 [package.metadata.cargo-all-features]
 denylist = ["nightly"]

leptos_dom/Makefile.toml

@@ -0,0 +1 @@
+extend = { path = "../cargo-make/main.toml" }

leptos_dom/examples/test-bench/src/main.rs

@@ -55,6 +55,8 @@ fn view_fn(cx: Scope) -> impl IntoView {
             <hr/>
             <Test from=[1, 4, 3, 2, 5] to=[1, 2, 3, 4, 5]/>
             <Test from=[4, 5, 3, 1, 2] to=[1, 2, 3, 4, 5]/>
+            <Test from=[0, 1, 2, 3] to=[1, 3]/> // issue #1274
+            <Test from=[] to=[3, 9, 17] then=vec![3, 5, 7, 9, 17, 23]/> // issue #1297
         </ul>
     }
 }

leptos_dom/src/components.rs

@@ -271,8 +271,9 @@ where
         let mut repr = ComponentRepr::new_with_id(name, id);
 
         // disposed automatically when the parent scope is disposed
-        let (child, _) = cx
-            .run_child_scope(|cx| cx.untrack(|| children_fn(cx).into_view(cx)));
+        let (child, _) = cx.run_child_scope(|cx| {
+            cx.untrack_with_diagnostics(|| children_fn(cx).into_view(cx))
+        });
 
         repr.children.push(child);
 

leptos_dom/src/components/each.rs

@@ -13,11 +13,11 @@ mod web {
     };
     pub use drain_filter_polyfill::VecExt as VecDrainFilterExt;
     pub use leptos_reactive::create_effect;
-    pub use std::cell::OnceCell;
+    pub use once_cell::unsync::OnceCell;
     pub use wasm_bindgen::JsCast;
 }
 
-#[cfg(all(target_arch = "wasm32", feature = "web"))]
+#[allow(dead_code)] // not used in SSR
 type FxIndexSet<T> =
     indexmap::IndexSet<T, std::hash::BuildHasherDefault<rustc_hash::FxHasher>>;
 
@@ -230,7 +230,12 @@ impl EachItem {
                 fragment.append_with_node_1(&closing.node).unwrap();
             }
 
-            mount_child(MountKind::Before(&closing.node), &child);
+            // if child view is Text and if we are hydrating, we do not
+            // need to mount it. otherwise, mount it here
+            if !HydrationCtx::is_hydrating() || !matches!(child, View::Text(_))
+            {
+                mount_child(MountKind::Before(&closing.node), &child);
+            }
 
             Some(fragment)
         } else {
@@ -494,8 +499,8 @@ where
 #[educe(Debug)]
 struct HashRun<T>(#[educe(Debug(ignore))] T);
 
-/// Calculates the operations need to get from `a` to `b`.
-#[cfg(all(target_arch = "wasm32", feature = "web"))]
+/// Calculates the operations needed to get from `from` to `to`.
+#[allow(dead_code)] // not used in SSR but useful to have available for testing
 fn diff<K: Eq + Hash>(from: &FxIndexSet<K>, to: &FxIndexSet<K>) -> Diff {
     if from.is_empty() && to.is_empty() {
         return Diff::default();
@@ -518,207 +523,90 @@ fn diff<K: Eq + Hash>(from: &FxIndexSet<K>, to: &FxIndexSet<K>) -> Diff {
         };
     }
 
-    // Get removed items
-    let removed = from.difference(to);
+    let mut removed = vec![];
+    let mut moved = vec![];
+    let mut added = vec![];
+    let max_len = std::cmp::max(from.len(), to.len());
 
-    let remove_cmds = removed
-        .clone()
-        .map(|k| from.get_full(k).unwrap().0)
-        .map(|idx| DiffOpRemove { at: idx });
+    for index in 0..max_len {
+        let from_item = from.get_index(index);
+        let to_item = to.get_index(index);
 
-    // Get added items
-    let added = to.difference(from);
+        // if they're the same, do nothing
+        if from_item != to_item {
+            // if it's only in old, not new, remove it
+            if from_item.is_some() && !to.contains(from_item.unwrap()) {
+                let op = DiffOpRemove { at: index };
+                removed.push(op);
+            }
+            // if it's only in new, not old, add it
+            if to_item.is_some() && !from.contains(to_item.unwrap()) {
+                let op = DiffOpAdd {
+                    at: index,
+                    mode: DiffOpAddMode::Normal,
+                };
+                added.push(op);
+            }
+            // if it's in both old and new, it can either
+            // 1) be moved (and need to move in the DOM)
+            // 2) be moved (but not need to move in the DOM)
+            //    * this would happen if, for example, 2 items
+            //      have been added before it, and it has moved by 2
+            if let Some(from_item) = from_item {
+                if let Some(to_item) = to.get_full(from_item) {
+                    let moves_forward_by = (to_item.0 as i32) - (index as i32);
+                    let move_in_dom = moves_forward_by
+                        != (added.len() as i32) - (removed.len() as i32);
 
-    let add_cmds =
-        added
-            .clone()
-            .map(|k| to.get_full(k).unwrap().0)
-            .map(|idx| DiffOpAdd {
-                at: idx,
-                mode: Default::default(),
-            });
+                    let op = DiffOpMove {
+                        from: index,
+                        len: 1,
+                        to: to_item.0,
+                        move_in_dom,
+                    };
+                    moved.push(op);
+                }
+            }
+        }
+    }
 
-    // Get items that might have moved
-    let from_moved = from.intersection(&to).collect::<FxIndexSet<_>>();
-    let to_moved = to.intersection(&from).collect::<FxIndexSet<_>>();
+    moved = group_adjacent_moves(moved);
 
-    let move_cmds = find_ranges(from_moved, to_moved, from, to);
-
-    let mut diff = Diff {
-        removed: remove_cmds.collect(),
-        items_to_move: move_cmds.iter().map(|range| range.len).sum(),
-        moved: move_cmds,
-        added: add_cmds.collect(),
+    Diff {
+        removed,
+        items_to_move: moved.iter().map(|m| m.len).sum(),
+        moved,
+        added,
         clear: false,
-    };
-
-    apply_opts(from, to, &mut diff);
-
-    #[cfg(test)]
-    {
-        let mut adds_sorted = diff.added.clone();
-        adds_sorted.sort_unstable_by_key(|add| add.at);
-
-        assert_eq!(diff.added, adds_sorted, "adds must be sorted");
-
-        let mut moves_sorted = diff.moved.clone();
-        moves_sorted.sort_unstable_by_key(|move_| move_.to);
-
-        assert_eq!(diff.moved, moves_sorted, "moves must be sorted by `to`");
-    }
-
-    diff
-}
-
-/// Builds and returns the ranges of items that need to
-/// move sorted by `to`.
-#[cfg(all(target_arch = "wasm32", feature = "web"))]
-fn find_ranges<K: Eq + Hash>(
-    from_moved: FxIndexSet<&K>,
-    to_moved: FxIndexSet<&K>,
-    from: &FxIndexSet<K>,
-    to: &FxIndexSet<K>,
-) -> Vec<DiffOpMove> {
-    let mut ranges = Vec::with_capacity(from.len());
-    let mut prev_to_moved_index = 0;
-    let mut range = DiffOpMove::default();
-
-    for (i, k) in from_moved.into_iter().enumerate() {
-        let to_moved_index = to_moved.get_index_of(k).unwrap();
-
-        if i == 0 {
-            range.from = from.get_index_of(k).unwrap();
-            range.to = to.get_index_of(k).unwrap();
-        }
-        // The range continues
-        else if to_moved_index == prev_to_moved_index + 1 {
-            range.len += 1;
-        }
-        // We're done with this range, start a new one
-        else {
-            ranges.push(std::mem::take(&mut range));
-
-            range.from = from.get_index_of(k).unwrap();
-            range.to = to.get_index_of(k).unwrap();
-        }
-
-        prev_to_moved_index = to_moved_index;
-    }
-
-    ranges.push(std::mem::take(&mut range));
-
-    // We need to remove ranges that didn't move relative to each other
-    // as well as marking items that don't need to move in the DOM
-    let mut to_ranges = ranges.clone();
-    to_ranges.sort_unstable_by_key(|range| range.to);
-
-    let mut filtered_ranges = vec![];
-
-    let to_ranges_len = to_ranges.len();
-
-    for (i, range) in to_ranges.into_iter().enumerate() {
-        if range != ranges[i] {
-            filtered_ranges.push(range);
-        }
-        // The item did move, just not in the DOM
-        else if range.from != range.to {
-            filtered_ranges.push(DiffOpMove {
-                move_in_dom: false,
-                ..range
-            });
-        } else if to_ranges_len > 2 {
-            // TODO: Remove this else case...this is one of the biggest
-            // optimizations we can do, but we're skipping this right now
-            // until we figure out a way to handle moving around ranges
-            // that did not move
-            filtered_ranges.push(range);
-        }
-    }
-
-    filtered_ranges
-}
-
-#[cfg(all(target_arch = "wasm32", feature = "web"))]
-fn apply_opts<K: Eq + Hash>(
-    from: &FxIndexSet<K>,
-    to: &FxIndexSet<K>,
-    cmds: &mut Diff,
-) {
-    optimize_moves(&mut cmds.moved);
-
-    // We can optimize the case of replacing all items
-    if !from.is_empty()
-        && !to.is_empty()
-        && cmds.removed.len() == from.len()
-        && cmds.moved.is_empty()
-    {
-        cmds.clear = true;
-        cmds.removed.clear();
-
-        cmds.added
-            .iter_mut()
-            .for_each(|op| op.mode = DiffOpAddMode::Append);
-
-        return;
-    }
-
-    // We can optimize appends.
-    if !cmds.added.is_empty()
-        && cmds.moved.is_empty()
-        && cmds.removed.is_empty()
-        && cmds.added[0].at >= from.len()
-    {
-        cmds.added
-            .iter_mut()
-            .for_each(|op| op.mode = DiffOpAddMode::Append);
     }
 }
 
-#[cfg(all(target_arch = "wasm32", feature = "web"))]
-fn optimize_moves(moves: &mut Vec<DiffOpMove>) {
-    if moves.is_empty() || moves.len() == 1 {
-        // Do nothing
-    }
-    // This is the easiest optimal move case, which is to
-    // simply swap the 2 ranges. We only need to move the range
-    // that is smallest.
-    else if moves.len() == 2 {
-        if moves[1].len < moves[0].len {
-            moves[0].move_in_dom = false;
-        } else {
-            moves[1].move_in_dom = false;
+/// Group adjacent items that are being moved as a group.
+/// For example from `[2, 3, 5, 6]` to `[1, 2, 3, 4, 5, 6]` should result
+/// in a move for `2,3` and `5,6` rather than 4 individual moves.
+fn group_adjacent_moves(moved: Vec<DiffOpMove>) -> Vec<DiffOpMove> {
+    let mut prev: Option<DiffOpMove> = None;
+    let mut new_moved = Vec::with_capacity(moved.len());
+    for m in moved {
+        match prev {
+            Some(mut p) => {
+                if (m.from == p.from + p.len) && (m.to == p.to + p.len) {
+                    p.len += 1;
+                    prev = Some(p);
+                } else {
+                    new_moved.push(prev.take().unwrap());
+                    prev = Some(m);
+                }
+            }
+            None => prev = Some(m),
         }
     }
-    // Interestingly enoughs, there are NO configuration that are possible
-    // for ranges of 3.
-    //
-    // For example, take A, B, C. Here are all possible configurations and
-    // reasons for why they are impossible:
-    // - A B C  # identity, would be removed by ranges that didn't move
-    // - A C B  # `A` would be removed, thus it's a case of length 2
-    // - B A C  # `C` would be removed, thus it's a case of length 2
-    // - B C A  # `B C` are congiguous, so this is would have been a single range
-    // - C A B  # `A B` are congiguous, so this is would have been a single range
-    // - C B A  # `B` would be removed, thus it's a case of length 2
-    //
-    // We can add more pre-computed tables here if benchmarking or
-    // user demand needs it...nevertheless, it is unlikely for us
-    // to implement this algorithm to handle N ranges, because this
-    // becomes exponentially more expensive to compute. It's faster,
-    // for the most part, to assume the ranges are random and move
-    // all the ranges around than to try and figure out the best way
-    // to move them
-    else {
-        // The idea here is that for N ranges, we never need to
-        // move the largest range, rather, have all ranges move
-        // around it.
-        let move_ = moves.iter_mut().max_by_key(|move_| move_.len).unwrap();
-
-        move_.move_in_dom = false;
+    if let Some(prev) = prev {
+        new_moved.push(prev)
     }
+    new_moved
 }
 
-#[cfg(all(target_arch = "wasm32", feature = "web"))]
 #[derive(Debug, Default, PartialEq, Eq)]
 struct Diff {
     removed: Vec<DiffOpRemove>,
@@ -728,7 +616,6 @@ struct Diff {
     clear: bool,
 }
 
-#[cfg(all(target_arch = "wasm32", feature = "web"))]
 #[derive(Clone, Copy, Debug, PartialEq, Eq)]
 struct DiffOpMove {
     /// The index this range is starting relative to `from`.
@@ -742,7 +629,6 @@ struct DiffOpMove {
     move_in_dom: bool,
 }
 
-#[cfg(all(target_arch = "wasm32", feature = "web"))]
 impl Default for DiffOpMove {
     fn default() -> Self {
         Self {
@@ -754,20 +640,18 @@ impl Default for DiffOpMove {
     }
 }
 
-#[cfg(all(target_arch = "wasm32", feature = "web"))]
 #[derive(Clone, Copy, Debug, Default, PartialEq, Eq)]
 struct DiffOpAdd {
     at: usize,
     mode: DiffOpAddMode,
 }
 
-#[cfg(all(target_arch = "wasm32", feature = "web"))]
 #[derive(Debug, PartialEq, Eq)]
 struct DiffOpRemove {
     at: usize,
 }
 
-#[cfg(all(target_arch = "wasm32", feature = "web"))]
+#[allow(dead_code)] // Append not used in SSR but useful
 #[derive(Clone, Copy, Debug, PartialEq, Eq)]
 enum DiffOpAddMode {
     Normal,
@@ -776,7 +660,6 @@ enum DiffOpAddMode {
     _Prepend,
 }
 
-#[cfg(all(target_arch = "wasm32", feature = "web"))]
 impl Default for DiffOpAddMode {
     fn default() -> Self {
         Self::Normal
@@ -986,404 +869,173 @@ fn unpack_moves(diff: &Diff) -> (Vec<DiffOpMove>, Vec<DiffOpAdd>) {
     (moves, adds)
 }
 
-// #[cfg(test)]
-// mod test_utils {
-//     use super::*;
+#[cfg(test)]
+mod test_utils {
+    use super::*;
 
-//     pub trait IntoFxIndexSet<K> {
-//         fn into_fx_index_set(self) -> FxIndexSet<K>;
-//     }
+    pub trait IntoFxIndexSet<K> {
+        fn into_fx_index_set(self) -> FxIndexSet<K>;
+    }
 
-//     impl<T, K> IntoFxIndexSet<K> for T
-//     where
-//         T: IntoIterator<Item = K>,
-//         K: Eq + Hash,
-//     {
-//         fn into_fx_index_set(self) -> FxIndexSet<K> {
-//             self.into_iter().collect()
-//         }
-//     }
-// }
+    impl<T, K> IntoFxIndexSet<K> for T
+    where
+        T: IntoIterator<Item = K>,
+        K: Eq + Hash,
+    {
+        fn into_fx_index_set(self) -> FxIndexSet<K> {
+            self.into_iter().collect()
+        }
+    }
+}
 
-// #[cfg(test)]
-// use test_utils::*;
+#[cfg(test)]
+use test_utils::*;
 
-// #[cfg(test)]
-// mod find_ranges {
-//     use super::*;
+#[cfg(test)]
+mod diff {
+    use super::*;
 
-//     // Single range tests will be empty because of removing ranges
-//     // that didn't move
-//     #[test]
-//     fn single_range() {
-//         let ranges = find_ranges(
-//             [1, 2, 3, 4].iter().into_fx_index_set(),
-//             [1, 2, 3, 4].iter().into_fx_index_set(),
-//             &[1, 2, 3, 4].into_fx_index_set(),
-//             &[1, 2, 3, 4].into_fx_index_set(),
-//         );
+    #[test]
+    fn only_adds() {
+        let diff =
+            diff(&[].into_fx_index_set(), &[1, 2, 3].into_fx_index_set());
 
-//         assert_eq!(ranges, vec![]);
-//     }
+        assert_eq!(
+            diff,
+            Diff {
+                added: vec![
+                    DiffOpAdd {
+                        at: 0,
+                        mode: DiffOpAddMode::Append
+                    },
+                    DiffOpAdd {
+                        at: 1,
+                        mode: DiffOpAddMode::Append
+                    },
+                    DiffOpAdd {
+                        at: 2,
+                        mode: DiffOpAddMode::Append
+                    },
+                ],
+                ..Default::default()
+            }
+        );
+    }
 
-//     #[test]
-//     fn single_range_with_adds() {
-//         let ranges = find_ranges(
-//             [1, 2, 3, 4].iter().into_fx_index_set(),
-//             [1, 2, 3, 4].iter().into_fx_index_set(),
-//             &[1, 2, 3, 4].into_fx_index_set(),
-//             &[1, 2, 5, 3, 4].into_fx_index_set(),
-//         );
+    #[test]
+    fn only_removes() {
+        let diff =
+            diff(&[1, 2, 3].into_fx_index_set(), &[3].into_fx_index_set());
 
-//         assert_eq!(ranges, vec![]);
-//     }
+        assert_eq!(
+            diff,
+            Diff {
+                removed: vec![DiffOpRemove { at: 0 }, DiffOpRemove { at: 1 }],
+                moved: vec![DiffOpMove {
+                    from: 2,
+                    len: 1,
+                    to: 0,
+                    move_in_dom: false
+                }],
+                items_to_move: 1,
+                ..Default::default()
+            }
+        );
+    }
 
-//     #[test]
-//     fn single_range_with_removals() {
-//         let ranges = find_ranges(
-//             [1, 2, 3, 4].iter().into_fx_index_set(),
-//             [1, 2, 3, 4].iter().into_fx_index_set(),
-//             &[1, 2, 5, 3, 4].into_fx_index_set(),
-//             &[1, 2, 3, 4].into_fx_index_set(),
-//         );
+    #[test]
+    fn adds_with_no_move() {
+        let diff =
+            diff(&[3].into_fx_index_set(), &[1, 2, 3].into_fx_index_set());
 
-//         assert_eq!(ranges, vec![]);
-//     }
+        assert_eq!(
+            diff,
+            Diff {
+                added: vec![
+                    DiffOpAdd {
+                        at: 0,
+                        ..Default::default()
+                    },
+                    DiffOpAdd {
+                        at: 1,
+                        ..Default::default()
+                    },
+                ],
+                moved: vec![DiffOpMove {
+                    from: 0,
+                    len: 1,
+                    to: 2,
+                    move_in_dom: true
+                }],
+                items_to_move: 1,
+                ..Default::default()
+            }
+        );
+    }
 
-//     #[test]
-//     fn two_ranges() {
-//         let ranges = find_ranges(
-//             [1, 2, 3, 4].iter().into_fx_index_set(),
-//             [3, 4, 1, 2].iter().into_fx_index_set(),
-//             &[1, 2, 3, 4].into_fx_index_set(),
-//             &[3, 4, 1, 2].into_fx_index_set(),
-//         );
+    #[test]
+    fn move_as_group() {
+        let diff = diff(
+            &[2, 3, 4, 5].into_fx_index_set(),
+            &[1, 2, 3, 4, 5].into_fx_index_set(),
+        );
 
-//         assert_eq!(
-//             ranges,
-//             vec![
-//                 DiffOpMove {
-//                     from: 2,
-//                     to: 0,
-//                     len: 2,
-//                     move_in_dom: true,
-//                 },
-//                 DiffOpMove {
-//                     from: 0,
-//                     to: 2,
-//                     len: 2,
-//                     move_in_dom: true,
-//                 },
-//             ]
-//         );
-//     }
+        assert_eq!(
+            diff,
+            Diff {
+                added: vec![DiffOpAdd {
+                    at: 0,
+                    ..Default::default()
+                },],
+                moved: vec![DiffOpMove {
+                    from: 0,
+                    len: 4,
+                    to: 1,
+                    move_in_dom: false
+                },],
+                items_to_move: 4,
+                ..Default::default()
+            }
+        );
+    }
 
-//     #[test]
-//     fn two_ranges_with_adds() {
-//         let ranges = find_ranges(
-//             [1, 2, 3, 4].iter().into_fx_index_set(),
-//             [3, 4, 1, 2].iter().into_fx_index_set(),
-//             &[1, 2, 3, 4].into_fx_index_set(),
-//             &[3, 4, 5, 1, 6, 2].into_fx_index_set(),
-//         );
+    #[test]
+    fn move_as_group_with_gap() {
+        let diff = diff(
+            &[2, 3, 5, 6].into_fx_index_set(),
+            &[1, 2, 3, 4, 5, 6].into_fx_index_set(),
+        );
 
-//         assert_eq!(
-//             ranges,
-//             vec![
-//                 DiffOpMove {
-//                     from: 2,
-//                     to: 0,
-//                     len: 2,
-//                 },
-//                 DiffOpMove {
-//                     from: 0,
-//                     to: 3,
-//                     len: 2,
-//                 },
-//             ]
-//         );
-//     }
-//     #[test]
-//     fn two_ranges_with_removals() {
-//         let ranges = find_ranges(
-//             [1, 2, 3, 4].iter().into_fx_index_set(),
-//             [3, 4, 1, 2].iter().into_fx_index_set(),
-//             &[1, 5, 2, 6, 3, 4].into_fx_index_set(),
-//             &[3, 4, 1, 2].into_fx_index_set(),
-//         );
-
-//         assert_eq!(
-//             ranges,
-//             vec![
-//                 DiffOpMove {
-//                     from: 4,
-//                     to: 0,
-//                     len: 2,
-//                 },
-//                 DiffOpMove {
-//                     from: 0,
-//                     to: 2,
-//                     len: 2,
-//                 },
-//             ]
-//         );
-//     }
-
-//     #[test]
-//     fn remove_ranges_that_did_not_move() {
-//         // Here, 'C' doesn't change
-//         let ranges = find_ranges(
-//             ['A', 'B', 'C', 'D'].iter().into_fx_index_set(),
-//             ['B', 'D', 'C', 'A'].iter().into_fx_index_set(),
-//             &['A', 'B', 'C', 'D'].into_fx_index_set(),
-//             &['B', 'D', 'C', 'A'].into_fx_index_set(),
-//         );
-
-//         assert_eq!(
-//             ranges,
-//             vec![
-//                 DiffOpMove {
-//                     from: 1,
-//                     to: 0,
-//                     len: 1,
-//                 },
-//                 DiffOpMove {
-//                     from: 3,
-//                     to: 1,
-//                     len: 1,
-//                 },
-//                 DiffOpMove {
-//                     from: 0,
-//                     to: 3,
-//                     len: 1,
-//                 },
-//             ]
-//         );
-
-//         // Now we're going to to the same as above, just with more items
-//         //
-//         // A = 1
-//         // B = 2, 3
-//         // C = 4, 5, 6
-//         // D = 7, 8, 9, 0
-
-//         let ranges = find_ranges(
-//             //A B     C        D
-//             [1, 2, 3, 4, 5, 6, 7, 8, 9, 0].iter().into_fx_index_set(),
-//             //B    D           C        A
-//             [2, 3, 7, 8, 9, 0, 4, 5, 6, 1].iter().into_fx_index_set(),
-//             //A  B     C        D
-//             &[1, 2, 3, 4, 5, 6, 7, 8, 9, 0].into_fx_index_set(),
-//             //B     D           C        A
-//             &[2, 3, 7, 8, 9, 0, 4, 5, 6, 1].into_fx_index_set(),
-//         );
-
-//         assert_eq!(
-//             ranges,
-//             vec![
-//                 DiffOpMove {
-//                     from: 1,
-//                     to: 0,
-//                     len: 2,
-//                 },
-//                 DiffOpMove {
-//                     from: 6,
-//                     to: 2,
-//                     len: 4,
-//                 },
-//                 DiffOpMove {
-//                     from: 0,
-//                     to: 9,
-//                     len: 1,
-//                 },
-//             ]
-//         );
-//     }
-// }
-
-// #[cfg(test)]
-// mod optimize_moves {
-//     use super::*;
-
-//     #[test]
-//     fn swap() {
-//         let mut moves = vec![
-//             DiffOpMove {
-//                 from: 0,
-//                 to: 6,
-//                 len: 2,
-//                 ..Default::default()
-//             },
-//             DiffOpMove {
-//                 from: 6,
-//                 to: 0,
-//                 len: 7,
-//                 ..Default::default()
-//             },
-//         ];
-
-//         optimize_moves(&mut moves);
-
-//         assert_eq!(
-//             moves,
-//             vec![DiffOpMove {
-//                 from: 0,
-//                 to: 6,
-//                 len: 2,
-//                 ..Default::default()
-//             }]
-//         );
-//     }
-// }
-
-// #[cfg(test)]
-// mod add_or_move {
-//     use super::*;
-
-//     #[test]
-//     fn simple_range() {
-//         let cmds = AddOrMove::from_diff(&Diff {
-//             moved: vec![DiffOpMove {
-//                 from: 0,
-//                 to: 0,
-//                 len: 3,
-//             }],
-//             ..Default::default()
-//         });
-
-//         assert_eq!(
-//             cmds,
-//             vec![
-//                 DiffOpMove {
-//                     from: 0,
-//                     to: 0,
-//                     len: 1,
-//                 },
-//                 DiffOpMove {
-//                     from: 1,
-//                     to: 1,
-//                     len: 1,
-//                 },
-//                 DiffOpMove {
-//                     from: 2,
-//                     to: 2,
-//                     len: 1,
-//                 },
-//             ]
-//         );
-//     }
-
-//     #[test]
-//     fn range_with_add() {
-//         let cmds = AddOrMove::from_diff(&Diff {
-//             moved: vec![DiffOpMove {
-//                 from: 0,
-//                 to: 0,
-//                 len: 3,
-//                 move_in_dom: true,
-//             }],
-//             added: vec![DiffOpAdd {
-//                 at: 2,
-//                 ..Default::default()
-//             }],
-//             ..Default::default()
-//         });
-
-//         assert_eq!(
-//             cmds,
-//             vec![
-//                 AddOrMove::Move(DiffOpMove {
-//                     from: 0,
-//                     to: 0,
-//                     len: 1,
-//                     move_in_dom: true,
-//                 }),
-//                 AddOrMove::Move(DiffOpMove {
-//                     from: 1,
-//                     to: 1,
-//                     len: 1,
-//                     move_in_dom: true,
-//                 }),
-//                 AddOrMove::Add(DiffOpAdd {
-//                     at: 2,
-//                     ..Default::default()
-//                 }),
-//                 AddOrMove::Move(DiffOpMove {
-//                     from: 3,
-//                     to: 3,
-//                     len: 1,
-//                     move_in_dom: true,
-//                 }),
-//             ]
-//         );
-//     }
-// }
-
-// #[cfg(test)]
-// mod diff {
-//     use super::*;
-
-//     #[test]
-//     fn only_adds() {
-//         let diff =
-//             diff(&[].into_fx_index_set(), &[1, 2, 3].into_fx_index_set());
-
-//         assert_eq!(
-//             diff,
-//             Diff {
-//                 added: vec![
-//                     DiffOpAdd {
-//                         at: 0,
-//                         mode: DiffOpAddMode::Append
-//                     },
-//                     DiffOpAdd {
-//                         at: 1,
-//                         mode: DiffOpAddMode::Append
-//                     },
-//                     DiffOpAdd {
-//                         at: 2,
-//                         mode: DiffOpAddMode::Append
-//                     },
-//                 ],
-//                 ..Default::default()
-//             }
-//         );
-//     }
-
-//     #[test]
-//     fn only_removes() {
-//         let diff =
-//             diff(&[1, 2, 3].into_fx_index_set(), &[3].into_fx_index_set());
-
-//         assert_eq!(
-//             diff,
-//             Diff {
-//                 removed: vec![DiffOpRemove { at: 0 }, DiffOpRemove { at: 1 }],
-//                 ..Default::default()
-//             }
-//         );
-//     }
-
-//     #[test]
-//     fn adds_with_no_move() {
-//         let diff =
-//             diff(&[3].into_fx_index_set(), &[1, 2, 3].into_fx_index_set());
-
-//         assert_eq!(
-//             diff,
-//             Diff {
-//                 added: vec![
-//                     DiffOpAdd {
-//                         at: 0,
-//                         ..Default::default()
-//                     },
-//                     DiffOpAdd {
-//                         at: 1,
-//                         ..Default::default()
-//                     },
-//                 ],
-//                 ..Default::default()
-//             }
-//         );
-//     }
-// }
+        assert_eq!(
+            diff,
+            Diff {
+                added: vec![
+                    DiffOpAdd {
+                        at: 0,
+                        ..Default::default()
+                    },
+                    DiffOpAdd {
+                        at: 3,
+                        ..Default::default()
+                    },
+                ],
+                moved: vec![
+                    DiffOpMove {
+                        from: 0,
+                        len: 2,
+                        to: 1,
+                        move_in_dom: false
+                    },
+                    DiffOpMove {
+                        from: 2,
+                        len: 2,
+                        to: 4,
+                        move_in_dom: true
+                    }
+                ],
+                items_to_move: 4,
+                ..Default::default()
+            }
+        );
+    }
+}

leptos_dom/src/events.rs

@@ -158,19 +158,13 @@ pub(crate) fn add_delegated_event_listener(
                     }
 
                     // navigate up tree
-                    let host =
-                        js_sys::Reflect::get(&node, &JsValue::from_str("host"))
-                            .unwrap_throw();
-                    if host.is_truthy()
-                        && host != node
-                        && host.dyn_ref::<web_sys::Node>().is_some()
-                    {
-                        node = host;
-                    } else if let Some(parent) =
-                        node.unchecked_into::<web_sys::Node>().parent_node()
+                    if let Some(parent) =
+                        node.unchecked_ref::<web_sys::Node>().parent_node()
                     {
                         node = parent.into()
-                    } else {
+                    } else if let Some(root) = node.dyn_ref::<web_sys::ShadowRoot>() {
+                        node = root.host().unchecked_into();
+                    } else  {
                         node = JsValue::null()
                     }
                 }

leptos_dom/src/html.rs

@@ -204,11 +204,9 @@ impl Custom {
                 assert_eq!(
                     el.node_name().to_ascii_uppercase(),
                     name.to_ascii_uppercase(),
-                    "SSR and CSR elements have the same `TopoId` but \
-                     different node kinds. This is either a discrepancy \
-                     between SSR and CSR rendering
-                    logic, which is considered a bug, or it can also be a \
-                     leptos hydration issue."
+                    "SSR and CSR elements have the same hydration key but \
+                     different node kinds. Check out the docs for information \
+                     about this kind of hydration bug: https://leptos-rs.github.io/leptos/ssr/24_hydration_bugs.html"
                 );
 
                 el.remove_attribute("id").unwrap();
@@ -221,11 +219,9 @@ impl Custom {
                 assert_eq!(
                     el.node_name().to_ascii_uppercase(),
                     name.to_ascii_uppercase(),
-                    "SSR and CSR elements have the same `TopoId` but \
-                     different node kinds. This is either a discrepancy \
-                     between SSR and CSR rendering
-                    logic, which is considered a bug, or it can also be a \
-                     leptos hydration issue."
+                    "SSR and CSR elements have the same hydration key but \
+                     different node kinds. Check out the docs for information \
+                     about this kind of hydration bug: https://leptos-rs.github.io/leptos/ssr/24_hydration_bugs.html"
                 );
 
                 el.remove_attribute("leptos-hk").unwrap();
@@ -449,7 +445,7 @@ impl<El: ElementDescriptor + 'static> HtmlElement<El> {
               element: AnyElement {
                 name: element.name(),
                 is_void: element.is_void(),
-                id: *element.hydration_id()
+                id: element.hydration_id().clone()
               },
               #[cfg(debug_assertions)]
               view_marker
@@ -1074,7 +1070,7 @@ impl<El: ElementDescriptor> IntoView for HtmlElement<El> {
                 ..
             } = self;
 
-            let id = *element.hydration_id();
+            let id = element.hydration_id().clone();
 
             let mut element = Element::new(element);
             let children = children;
@@ -1118,7 +1114,7 @@ pub fn custom<El: ElementDescriptor>(cx: Scope, el: El) -> HtmlElement<Custom> {
             #[cfg(all(target_arch = "wasm32", feature = "web"))]
             element: el.as_ref().clone(),
             #[cfg(not(all(target_arch = "wasm32", feature = "web")))]
-            id: *el.hydration_id(),
+            id: el.hydration_id().clone(),
         },
     )
 }
@@ -1270,11 +1266,9 @@ fn create_leptos_element(
             assert_eq!(
                 &el.node_name().to_ascii_uppercase(),
                 tag,
-                "SSR and CSR elements have the same `TopoId` but different \
-                 node kinds. This is either a discrepancy between SSR and CSR \
-                 rendering
-            logic, which is considered a bug, or it can also be a leptos \
-                 hydration issue."
+                "SSR and CSR elements have the same hydration key but \
+                different node kinds. Check out the docs for information \
+                about this kind of hydration bug: https://leptos-rs.github.io/leptos/ssr/24_hydration_bugs.html"
             );
 
             el.remove_attribute("id").unwrap();
@@ -1287,11 +1281,9 @@ fn create_leptos_element(
             assert_eq!(
                 el.node_name().to_ascii_uppercase(),
                 tag,
-                "SSR and CSR elements have the same `TopoId` but different \
-                 node kinds. This is either a discrepancy between SSR and CSR \
-                 rendering
-            logic, which is considered a bug, or it can also be a leptos \
-                 hydration issue."
+                "SSR and CSR elements have the same hydration key but \
+                different node kinds. Check out the docs for information \
+                about this kind of hydration bug: https://leptos-rs.github.io/leptos/ssr/24_hydration_bugs.html"
             );
 
             el.remove_attribute("leptos-hk").unwrap();

leptos_dom/src/hydration.rs

@@ -50,13 +50,13 @@ cfg_if! {
 
       static IS_HYDRATING: RefCell<LazyCell<bool>> = RefCell::new(LazyCell::new(|| {
         #[cfg(debug_assertions)]
-        return crate::document().get_element_by_id("_0-1").is_some()
-          || crate::document().get_element_by_id("_0-1o").is_some()
-          || HYDRATION_COMMENTS.with(|comments| comments.get("_0-1o").is_some());
+        return crate::document().get_element_by_id("_-1").is_some()
+          || crate::document().get_element_by_id("_-1o").is_some()
+          || HYDRATION_COMMENTS.with(|comments| comments.get("_-1o").is_some());
 
         #[cfg(not(debug_assertions))]
-        return crate::document().get_element_by_id("_0-1").is_some()
-          || HYDRATION_COMMENTS.with(|comments| comments.get("_0-1").is_some());
+        return crate::document().get_element_by_id("_-1").is_some()
+          || HYDRATION_COMMENTS.with(|comments| comments.get("_-1").is_some());
       }));
     }
 
@@ -67,12 +67,12 @@ cfg_if! {
 }
 
 /// A stable identifier within the server-rendering or hydration process.
-#[derive(Copy, Clone, Debug, PartialEq, Eq, Hash, Default)]
+#[derive(Clone, Debug, PartialEq, Eq, Hash, Default)]
 pub struct HydrationKey {
     /// ID of the current key.
     pub id: usize,
     /// ID of the current fragment.
-    pub fragment: usize,
+    pub fragment: String,
 }
 
 impl Display for HydrationKey {
@@ -89,7 +89,7 @@ pub struct HydrationCtx;
 impl HydrationCtx {
     /// Get the next `id` without incrementing it.
     pub fn peek() -> HydrationKey {
-        ID.with(|id| *id.borrow())
+        ID.with(|id| id.borrow().clone())
     }
 
     /// Increments the current hydration `id` and returns it
@@ -97,17 +97,17 @@ impl HydrationCtx {
         ID.with(|id| {
             let mut id = id.borrow_mut();
             id.id = id.id.wrapping_add(1);
-            *id
+            id.clone()
         })
     }
 
     /// Resets the hydration `id` for the next component, and returns it
-    pub fn next_component() -> HydrationKey {
+    pub fn next_component(tag: &'static str) -> HydrationKey {
         ID.with(|id| {
             let mut id = id.borrow_mut();
-            id.fragment = id.fragment.wrapping_add(1);
+            id.fragment = format!("{}-{}{}", id.fragment, id.id, tag);
             id.id = 0;
-            *id
+            id.clone()
         })
     }
 

leptos_dom/src/lib.rs

@@ -18,6 +18,8 @@ mod logging;
 mod macro_helpers;
 pub mod math;
 mod node_ref;
+/// Utilities for exporting nonces to be used for a Content Security Policy.
+pub mod nonce;
 pub mod ssr;
 pub mod ssr_in_order;
 pub mod svg;
@@ -376,7 +378,7 @@ impl Element {
               is_void: el.is_void(),
               attrs: Default::default(),
               children: Default::default(),
-              id: *el.hydration_id(),
+              id: el.hydration_id().clone(),
               #[cfg(debug_assertions)]
               view_marker: None
             }
@@ -483,6 +485,9 @@ impl Text {
 
 /// A leptos view which can be mounted to the DOM.
 #[derive(Clone, PartialEq, Eq)]
+#[must_use = "You are creating a View but not using it. An unused view can \
+              cause your view to be rendered as () unexpectedly, and it can \
+              also cause issues with client-side hydration."]
 pub enum View {
     /// HTML element node.
     Element(Element),
@@ -729,7 +734,7 @@ impl View {
                 c.children.iter().cloned().for_each(|c| {
                   let event_handler = event_handler.clone();
 
-                  c.on(event.clone(), Box::new(move |e| event_handler.borrow_mut()(e)));
+                  _ = c.on(event.clone(), Box::new(move |e| event_handler.borrow_mut()(e)));
                 });
               }
               Self::CoreComponent(c) => match c {
@@ -838,9 +843,7 @@ where
     crate::console_warn(
         "You have both `csr` and `ssr` or `hydrate` and `ssr` enabled as \
          features, which may cause issues like <Suspense/>` failing to work \
-         silently. `csr` is enabled by default on `leptos`, and can be \
-         disabled by adding `default-features = false` to your `leptos` \
-         dependency.",
+         silently.",
     );
 
     cfg_if! {

leptos_dom/src/macro_helpers/into_class.rs

@@ -79,6 +79,7 @@ pub fn class_helper(
     name: Cow<'static, str>,
     value: Class,
 ) {
+    use crate::HydrationCtx;
     use leptos_reactive::create_render_effect;
 
     let class_list = el.class_list();
@@ -86,7 +87,9 @@ pub fn class_helper(
         Class::Fn(cx, f) => {
             create_render_effect(cx, move |old| {
                 let new = f();
-                if old.as_ref() != Some(&new) && (old.is_some() || new) {
+                if old.as_ref() != Some(&new)
+                    && (old.is_some() || new || HydrationCtx::is_hydrating())
+                {
                     class_expression(&class_list, &name, new, true)
                 }
                 new