differentiate suspense/errorboundary

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

.github/ISSUE_TEMPLATE/bug_report.md

@@ -16,10 +16,10 @@ Please copy and paste the Leptos dependencies and features from your `Cargo.toml
 
 For example:
 ```toml
-leptos = { version = "0.3", default-features = false, features = ["serde"] }
+leptos = { version = "0.3", features = ["serde"] }
 leptos_axum = { version = "0.3", optional = true }
-leptos_meta = { version = "0.3", default-features = false }
-leptos_router = { version = "0.3", default-features = false }
+leptos_meta = { version = "0.3"}
+leptos_router = { version = "0.3"}
 ```
 
 **To Reproduce**

.github/workflows/check-examples.yml

@@ -1,46 +1,46 @@
-name: Check examples
+name: Check Examples
 
 on:
   push:
-    branches: [main]
+    branches:
+      - main
   pull_request:
-    branches: [main]
-
-env:
-  CARGO_TERM_COLOR: always
-  CARGO_REGISTRIES_CRATES_IO_PROTOCOL: sparse
+    branches:
+      - main
 
 jobs:
-  test:
-    name: Check examples ${{ matrix.os }} (using rustc ${{ matrix.rust }})
-    runs-on: ${{ matrix.os }}
-    strategy:
-      matrix:
-        rust:
-          - nightly
-        os:
-          - ubuntu-latest
-
+  setup:
+    name: Get Examples
+    runs-on: ubuntu-latest
+    outputs:
+      matrix: ${{ steps.set-matrix.outputs.matrix }}
     steps:
-      - uses: actions/checkout@v3
+      - name: Checkout
+        uses: actions/checkout@v3
 
-      - name: Setup Rust
-        uses: actions-rs/toolchain@v1
-        with:
-          toolchain: ${{ matrix.rust }}
-          override: true
-          components: rustfmt
+      - name: Install JQ Tool
+        uses: mbround18/install-jq@v1
 
-      - name: Add wasm32-unknown-unknown
-        run: rustup target add wasm32-unknown-unknown
+      - name: Set Matrix
+        id: set-matrix
+        run: |
+          examples=$(ls examples | 
+          awk '{print "examples/" $0}' | 
+          grep -v examples/README.md | 
+          grep -v examples/Makefile.toml | 
+          grep -v examples/cargo-make | 
+          grep -v examples/gtk | 
+          jq -R -s -c 'split("\n")[:-1]')
+          echo "Example Directories: $examples"
+          echo "matrix={\"directory\":$examples}" >> "$GITHUB_OUTPUT"
 
-      - name: Setup cargo-make
-        uses: davidB/rust-cargo-make@v1
-
-      - name: Cargo generate-lockfile
-        run: cargo generate-lockfile
-
-      - uses: Swatinem/rust-cache@v2
-
-      - name: Run cargo check on all examples
-        run: cargo make check-examples
+  matrix-job:
+    name: Check
+    needs: [setup]
+    strategy:
+      matrix: ${{ fromJSON(needs.setup.outputs.matrix) }}
+      fail-fast: false
+    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,17 +1,21 @@
-name: Verify Examples
+name: Run Task
 
 on:
-  push:
-    branches: [main]
-  pull_request:
-    branches: [main]
-
+  workflow_call:
+    inputs:
+      directory:
+        required: true
+        type: string
+      cargo_make_task:
+        required: true
+        type: string
 env:
   CARGO_TERM_COLOR: always
+  CARGO_REGISTRIES_CRATES_IO_PROTOCOL: sparse
 
 jobs:
   test:
-    name: Verify examples ${{ matrix.os }} (using rustc ${{ matrix.rust }}
+    name: Run ${{ matrix.os }} (using rustc ${{ matrix.rust }})
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
@@ -21,6 +25,12 @@ jobs:
           - ubuntu-latest
 
     steps:
+      # Setup environment
+      - name: Install playwright browser dependencies
+        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
+
       - uses: actions/checkout@v3
 
       - name: Setup Rust
@@ -63,7 +73,6 @@ jobs:
 
       - name: Get pnpm store directory
         id: pnpm-cache
-        shell: bash
         run: |
           echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
 
@@ -75,5 +84,12 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-pnpm-store-
 
-      - name: Run verify-flow on all web examples
-        run: cargo make --profile=github-actions verify-examples
+      # Run Cargo Make Task
+      - name: ${{ inputs.cargo_make_task }}
+        run: |
+          if [ "${{ inputs.directory }}" = "INTERNAL" ]; then
+            echo No verification required
+          else
+            cd ${{ inputs.directory }}
+            cargo make --profile=github-actions ${{ inputs.cargo_make_task }}
+          fi

.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

@@ -0,0 +1,47 @@
+name: Verify All Examples
+
+on:
+  workflow_dispatch:
+  push:
+    tags:
+      - v*
+  schedule:
+    # Run once a day at 3:00 AM EST
+    - cron: "0 8 * * *"
+
+jobs:
+  setup:
+    name: Get Examples
+    runs-on: ubuntu-latest
+    outputs:
+      matrix: ${{ steps.set-matrix.outputs.matrix }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Install JQ Tool
+        uses: mbround18/install-jq@v1
+
+      - name: Set Matrix
+        id: set-matrix
+        run: |
+          examples=$(ls examples | 
+          awk '{print "examples/" $0}' | 
+          grep -v examples/README.md | 
+          grep -v examples/Makefile.toml | 
+          grep -v examples/cargo-make | 
+          grep -v examples/gtk | 
+          jq -R -s -c 'split("\n")[:-1]')
+          echo "Example Directories: $examples"
+          echo "matrix={\"directory\":$examples}" >> "$GITHUB_OUTPUT"
+
+  matrix-job:
+    name: Verify
+    needs: [setup]
+    strategy:
+      matrix: ${{ fromJSON(needs.setup.outputs.matrix) }}
+      fail-fast: false
+    uses: ./.github/workflows/run-cargo-make-task.yml
+    with:
+      directory: ${{ matrix.directory }}
+      cargo_make_task: "verify-flow"

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

@@ -0,0 +1,71 @@
+name: Verify Changed Examples
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  setup:
+    name: Get Changes
+    runs-on: ubuntu-latest
+    outputs:
+      matrix: ${{ steps.set-matrix.outputs.matrix }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Get all example files that changed
+        id: changed-files
+        uses: tj-actions/changed-files@v36
+        with:
+          files: |
+            examples
+
+      - name: List all example files that changed
+        run: echo '${{ steps.changed-files.outputs.all_changed_files }}'
+
+      - name: Get example project directories that changed
+        id: changed-dirs
+        uses: tj-actions/changed-files@v36
+        with:
+          dir_names: true
+          dir_names_max_depth: "2"
+          files: |
+            examples
+            !examples/cargo-make
+            !examples/gtk
+            !examples/Makefile.toml
+            !examples/README.md
+          json: true
+          quotepath: false
+
+      - name: List example project directories that changed
+        run: echo '${{ steps.changed-dirs.outputs.all_changed_files }}'
+
+      - name: Set Matrix
+        id: set-matrix
+        run: |
+          if [ ${{ steps.changed-files.outputs.any_changed }} == 'true' ]; then
+            # Create matrix with changed directories
+            echo "matrix={\"directory\":${{ steps.changed-dirs.outputs.all_changed_files }}}" >> "$GITHUB_OUTPUT"
+          else
+            # Create matrix with one item to prevent an empty vector error
+            echo "matrix={\"directory\":[\"INTERNAL\"]}" >> "$GITHUB_OUTPUT"
+          fi
+
+  matrix-job:
+    name: Verify
+    needs: [setup]
+    strategy:
+      matrix: ${{ fromJSON(needs.setup.outputs.matrix) }}
+      fail-fast: false
+    uses: ./.github/workflows/run-cargo-make-task.yml
+    with:
+      directory: ${{ matrix.directory }}
+      cargo_make_task: "verify-flow"

CODE_OF_CONDUCT.md

@@ -2,7 +2,7 @@
 
 _This Code of Conduct is based on the [Rust Code of Conduct](https://www.rust-lang.org/policies/code-of-conduct)
 and the [Bevy Code of Conduct](https://raw.githubusercontent.com/bevyengine/bevy/main/CODE_OF_CONDUCT.md),
-which are adapted from the [Node.js Policy on Trolling](http://blog.izs.me/post/30036893703/policy-on-trolling) 
+which are adapted from the [Node.js Policy on Trolling](http://blog.izs.me/post/30036893703/policy-on-trolling)
 and the [Contributor Covenant](https://www.contributor-covenant.org)._
 
 ## Our Pledge

CONTRIBUTING.md

@@ -22,7 +22,7 @@ Leptos, as a framework, reflects certain technical values:
 - **Expose primitives rather than imposing patterns.** Provide building blocks
   that users can combine together to build up more complex behavior, rather than
   requiring users follow certain templates, file formats, etc. e.g., components
-  are defined as functions, rather than a bespoke single-file comonent format.
+  are defined as functions, rather than a bespoke single-file component format.
   The reactive system feeds into the rendering system, rather than being defined
   by it.
 - **Bottom-up over top-down.** If you envision a user’s application as a tree
@@ -42,7 +42,7 @@ Leptos, as a framework, reflects certain technical values:
 - **Embrace Rust semantics.** Especially in things like UI templating, use Rust
   semantics or extend them in a predictable way with control-flow components
   rather than overloading the meaning of Rust terms like `if` or `for` in a
-  framework-speciic way.
+  framework-specific way.
 - **Enhance ergonomics without obfuscating what’s happening.** This is by far
   the hardest to achieve. It’s often the case that adding additional layers to
   improve DX (like a custom build tool and starter templates) comes across as
@@ -67,7 +67,7 @@ are a few guidelines that will make it a better experience for everyone:
 - Our CI tests every PR against all the existing examples, sometimes requiring
   compilation for both server and client side, etc. It’s thorough but slow. If
   you want to run CI locally to reduce frustration, you can do that by installing
-  `cargo-make` and using `cargo make check && cargo make test && cargo make 
+  `cargo-make` and using `cargo make check && cargo make test && cargo make
 check-examples`.
 
 ## Architecture

Cargo.toml

@@ -1,5 +1,5 @@
 [workspace]
-resolver="2"
+resolver = "2"
 members = [
   # core
   "leptos",
@@ -26,22 +26,22 @@ members = [
 exclude = ["benchmarks", "examples"]
 
 [workspace.package]
-version = "0.3.0"
+version = "0.4.3"
 
 [workspace.dependencies]
-leptos = { path = "./leptos", default-features = false, version = "0.3.0" }
-leptos_dom = { path = "./leptos_dom", default-features = false, version = "0.3.0" }
-leptos_hot_reload = { path = "./leptos_hot_reload", version = "0.3.0" }
-leptos_macro = { path = "./leptos_macro", default-features = false, version = "0.3.0" }
-leptos_reactive = { path = "./leptos_reactive", default-features = false, version = "0.3.0" }
-leptos_server = { path = "./leptos_server", default-features = false, version = "0.3.0" }
-server_fn = { path = "./server_fn", default-features = false, version = "0.3.0" }
-server_fn_macro = { path = "./server_fn_macro", default-features = false, version = "0.3.0" }
-server_fn_macro_default = { path = "./server_fn/server_fn_macro_default", default-features = false, version = "0.3.0" }
-leptos_config = { path = "./leptos_config", default-features = false, version = "0.3.0" }
-leptos_router = { path = "./router", version = "0.3.0" }
-leptos_meta = { path = "./meta", default-features = false, version = "0.3.0" }
-leptos_integration_utils = { path = "./integrations/utils", version = "0.3.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,118 +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/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/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"
-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"]

README.md

@@ -8,7 +8,6 @@
 [![Discord](https://img.shields.io/discord/1031524867910148188?color=%237289DA&label=discord)](https://discord.gg/YdRAhS7eQB)
 [![Matrix](https://img.shields.io/badge/Matrix-leptos-grey?logo=matrix&labelColor=white&logoColor=black)](https://matrix.to/#/#leptos:matrix.org)
 
-
 [Website](https://leptos.dev) | [Book](https://leptos-rs.github.io/leptos/) | [Docs.rs](https://docs.rs/leptos/latest/leptos/) | [Playground](https://codesandbox.io/p/sandbox/leptos-rtfggt?file=%2Fsrc%2Fmain.rs%3A1%2C1) | [Discord](https://discord.gg/YdRAhS7eQB)
 
 # Leptos
@@ -69,7 +68,7 @@ Here are some resources for learning more about Leptos:
 
 ## `nightly` Note
 
-Most of the examples assume you’re using `nightly` version of Rust. For this, you can either set your toolchain globally or on per-project basis.
+Most of the examples assume you’re using `nightly` version of Rust and the `nightly` feature of Leptos. To use `nightly` Rust, you can either set your toolchain globally or on per-project basis.
 
 To set `nightly` as a default toolchain for all projects (and add the ability to compile Rust to WebAssembly, if you haven’t already):
 
@@ -87,13 +86,9 @@ channel = "nightly"
 targets = ["wasm32-unknown-unknown"]
 ```
 
-If you’re on `stable`, note the following:
+The `nightly` feature enables the function call syntax for accessing and setting signals, as opposed to `.get()` and `.set()`. This leads to a consistent mental model in which accessing a reactive value of any kind (a signal, memo, or derived signal) is always represented as a function call. This is only possible with nightly Rust and the `nightly` feature.
 
-1. You need to enable the `"stable"` flag in `Cargo.toml`: `leptos = { version = "0.2", features = ["stable"] }`
-2. `nightly` enables the function call syntax for accessing and setting signals. If you’re using `stable`,
-   you’ll just call `.get()`, `.set()`, or `.update()` manually. Check out the
-   [`counters_stable` example](https://github.com/leptos-rs/leptos/blob/main/examples/counters_stable/src/main.rs)
-   for examples of the correct API.
+> Note: The `nightly` feature is present on the main branch version right now, but not in 0.3.x. For 0.3.x, nightly is the default and `stable` has a special feature.
 
 ## `cargo-leptos`
 

benchmarks/Cargo.toml

@@ -5,7 +5,7 @@ edition = "2021"
 
 [dependencies]
 l021 = { package = "leptos", version = "0.2.1" }
-leptos = { path = "../leptos", default-features = false, features = ["ssr"] }
+leptos = { path = "../leptos", features = ["ssr"] }
 sycamore = { version = "0.8", features = ["ssr"] }
 yew = { git = "https://github.com/yewstack/yew", features = ["ssr"] }
 tokio-test = "0.4"

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
+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/appendix_binary_size.md

@@ -47,6 +47,12 @@ Note that if you're using this with SSR too, the same Cargo profile will be appl
 target = "x86_64-unknown-linux-gnu" # or whatever
 ```
 
+Also note that in some cases, the cfg feature `has_std` will not be set, which may cause build errors with some dependencies which check for `has_std`. You may fix any build errors due to this by adding:
+```toml
+[build]
+rustflags = ["--cfg=has_std"]
+```
+
 And you'll need to add `panic = "abort"` to `[profile.release]` in `Cargo.toml`. Note that this applies the same `build-std` and panic settings to your server binary, which may not be desirable. Some further exploration is probably needed here.
 
 5. One of the sources of binary size in WASM binaries can be `serde` serialization/deserialization code. Leptos uses `serde` by default to serialize and deserialize resources created with `create_resource`. You might try experimenting with the `miniserde` and `serde-lite` features, which allow you to use those crates for serialization and deserialization instead; each only implements a subset of `serde`’s functionality, but typically optimizes for size over speed.

docs/book/src/async/13_actions.md

@@ -11,7 +11,7 @@ Actions and resources seem similar, but they represent fundamentally different t
 Say we have some `async` function we want to run.
 
 ```rust
-async fn add_todo(new_title: &str) -> Uuid {
+async fn add_todo_request(new_title: &str) -> Uuid {
     /* do some stuff on the server to add a new todo */
 }
 ```
@@ -41,16 +41,16 @@ async fn add_todo(new_title: &str) -> Uuid {
 So in this case, all we need to do to create an action is
 
 ```rust
-let add_todo = create_action(cx, |input: &String| {
+let add_todo_action = create_action(cx, |input: &String| {
     let input = input.to_owned();
-    async move { add_todo(&input).await }
+    async move { add_todo_request(&input).await }
 });
 ```
 
-Rather than calling `add_todo` directly, we’ll call it with `.dispatch()`, as in
+Rather than calling `add_todo_action` directly, we’ll call it with `.dispatch()`, as in
 
 ```rust
-add_todo.dispatch("Some value".to_string());
+add_todo_action.dispatch("Some value".to_string());
 ```
 
 You can do this from an event listener, a timeout, or anywhere; because `.dispatch()` isn’t an `async` function, it can be called from a synchronous context.
@@ -58,9 +58,9 @@ You can do this from an event listener, a timeout, or anywhere; because `.dispat
 Actions provide access to a few signals that synchronize between the asynchronous action you’re calling and the synchronous reactive system:
 
 ```rust
-let submitted = add_todo.input(); // RwSignal<Option<String>>
-let pending = add_todo.pending(); // ReadSignal<bool>
-let todo_id = add_todo.value(); // RwSignal<Option<Uuid>>
+let submitted = add_todo_action.input(); // RwSignal<Option<String>>
+let pending = add_todo_action.pending(); // ReadSignal<bool>
+let todo_id = add_todo_action.value(); // RwSignal<Option<Uuid>>
 ```
 
 This makes it easy to track the current state of your request, show a loading indicator, or do “optimistic UI” based on the assumption that the submission will succeed.
@@ -73,7 +73,7 @@ view! { cx,
         on:submit=move |ev| {
             ev.prevent_default(); // don't reload the page...
             let input = input_ref.get().expect("input to exist");
-            add_todo.dispatch(input.value());
+            add_todo_action.dispatch(input.value());
         }
     >
         <label>

docs/book/src/interlude_projecting_children.md

@@ -29,9 +29,9 @@ where
 }
 ```
 
-This is pretty straightforward: when the user is logged in, we want to show `children`. Until if the user is not logged in, we want to show `fallback`. And while we’re waiting to find out, we just render `()`, i.e., nothing.
+This is pretty straightforward: when the user is logged in, we want to show `children`. If the user is not logged in, we want to show `fallback`. And while we’re waiting to find out, we just render `()`, i.e., nothing.
 
-In other words, we want to pass the children of `<WhenLoaded/>` _through_ the `<Suspense/>` component to become the children of the `<Show/>`. This is what I mean by “projection.”
+In other words, we want to pass the children of `<LoggedIn/>` _through_ the `<Suspense/>` component to become the children of the `<Show/>`. This is what I mean by “projection.”
 
 This won’t compile.
 

docs/book/src/metadata.md

@@ -24,7 +24,7 @@ That’s where the [`leptos_meta`](https://docs.rs/leptos_meta/latest/leptos_met
 
 `leptos_meta` also provides a [`<Script/>`](https://docs.rs/leptos_meta/latest/leptos_meta/fn.Script.html) component, and it’s worth pausing here for a second. All of the other components we’ve considered inject `<head>`-only elements in the `<head>`. But a `<script>` can also be included in the body.
 
-There’s a very simple way to determine whether you should use a capital-S `<Script/>` component or a lowercase-s `<script>` element: the `<Script/>` component will be rendered in the `<head>`, and the `<script>` element will be rendered wherever in your the `<body>` of your user interface you put in, alongside other normal HTML elements. These cause JavaScript to load and run at different times, so use whichever is appropriate to your needs.
+There’s a very simple way to determine whether you should use a capital-S `<Script/>` component or a lowercase-s `<script>` element: the `<Script/>` component will be rendered in the `<head>`, and the `<script>` element will be rendered wherever in the `<body>` of your user interface you put it in, alongside other normal HTML elements. These cause JavaScript to load and run at different times, so use whichever is appropriate to your needs.
 
 ## `<Body/>` and `<Html/>`
 

docs/book/src/reactivity/working_with_signals.md

@@ -9,7 +9,7 @@ There are four basic signal operations:
 1. [`.get()`](https://docs.rs/leptos/latest/leptos/struct.ReadSignal.html#impl-SignalGet%3CT%3E-for-ReadSignal%3CT%3E) clones the current value of the signal and tracks any future changes to the value reactively.
 2. [`.with()`](https://docs.rs/leptos/latest/leptos/struct.ReadSignal.html#impl-SignalWith%3CT%3E-for-ReadSignal%3CT%3E) takes a function, which receives the current value of the signal by reference (`&T`), and tracks any future changes.
 3. [`.set()`](https://docs.rs/leptos/latest/leptos/struct.WriteSignal.html#impl-SignalSet%3CT%3E-for-WriteSignal%3CT%3E) replaces the current value of the signal and notifies any subscribers that they need to update.
-4. [`.update()`](https://docs.rs/leptos/latest/leptos/struct.WriteSignal.html#impl-SignalUpdate%3CT%3E-for-WriteSignal%3CT%3E) takes a function, which receives a mutable reference to the current value of the signal (`&T`), and notifies any subscribers that they need to update. (`.update()` doesn’t return the value returned by the closure, but you can use [`.try_update()`](https://docs.rs/leptos/latest/leptos/trait.SignalUpdate.html#tymethod.try_update) if you need to; for example, if you’re removing an item from a `Vec<_>` and want the removed item.)
+4. [`.update()`](https://docs.rs/leptos/latest/leptos/struct.WriteSignal.html#impl-SignalUpdate%3CT%3E-for-WriteSignal%3CT%3E) takes a function, which receives a mutable reference to the current value of the signal (`&mut T`), and notifies any subscribers that they need to update. (`.update()` doesn’t return the value returned by the closure, but you can use [`.try_update()`](https://docs.rs/leptos/latest/leptos/trait.SignalUpdate.html#tymethod.try_update) if you need to; for example, if you’re removing an item from a `Vec<_>` and want the removed item.)
 
 Calling a `ReadSignal` as a function is syntax sugar for `.get()`. Calling a `WriteSignal` as a function is syntax sugar for `.set()`. So
 
@@ -99,7 +99,7 @@ let clear_handler = move |_| {
 ### If you really must...
 **4) Create an effect to write to B whenever A changes.** This is officially discouraged, for several reasons:
 a) It will always be less efficient, as it means every time A updates you do two full trips through the reactive process. (You set A, which causes the effect to run, as well as any other effects that depend on A. Then you set B, which causes any effects that depend on B to run.)
-b) It increases your chances of accidentally creating things like infinite loops or over-re-running effects. This is the kind of ping-ponging, reactive spaghetti code that was common in the early 2010s and that we try to avoid with things like read-write segregation and discouraging writing to signals frome effects.
+b) It increases your chances of accidentally creating things like infinite loops or over-re-running effects. This is the kind of ping-ponging, reactive spaghetti code that was common in the early 2010s and that we try to avoid with things like read-write segregation and discouraging writing to signals from effects.
 
 In most situations, it’s best to rewrite things such that there’s a clear, top-down data flow based on derived signals or memos. But this isn’t the end of the world.
 

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/router/README.md

@@ -4,10 +4,10 @@
 
 Routing drives most websites. A router is the answer to the question, “Given this URL, what should appear on the page?”
 
-A URL consists of many parts. For example, the URL `https://leptos.dev/blog/search?q=Search#results` consists of
+A URL consists of many parts. For example, the URL `https://my-cool-blog.com/blog/search?q=Search#results` consists of
 
 - a _scheme_: `https`
-- a _domain_: `leptos.dev`
+- a _domain_: `my-cool-blog.com`
 - a **path**: `/blog/search`
 - a **query** (or **search**): `?q=Search`
 - a _hash_: `#results`

docs/book/src/server/25_server_functions.md

@@ -97,6 +97,14 @@ In other words, you have two choices:
 
 **But remember**: Leptos will handle all the details of this encoding and decoding for you. When you use a server function, it looks just like calling any other asynchronous function!
 
+> **Why not `PUT` or `DELETE`? Why URL/form encoding, and not JSON?**
+>
+> These are reasonable questions. Much of the web is built on REST API patterns that encourage the use of semantic HTTP methods like `DELETE` to delete an item from a database, and many devs are accustomed to sending data to APIs in the JSON format.
+> 
+> The reason we use `POST` or `GET` with URL-encoded data by default is the `<form>` support. For better or for worse, HTML forms don’t support `PUT` or `DELETE`, and they don’t support sending JSON. This means that if you use anything but a `GET` or `POST` request with URL-encoded data, it can only work once WASM has loaded. As we’ll see [in a later chapter](../progressive_enhancement), this isn’t always a great idea.
+> 
+> The CBOR encoding is suported for historical reasons; an earlier version of server functions used a URL encoding that didn’t support nested objects like structs or vectors as server function arguments, which CBOR did. But note that the CBOR forms encounter the same issue as `PUT`, `DELETE`, or JSON: they do not degrade gracefully if the WASM version of your app is not available.
+
 ## An Important Note on Security
 
 Server functions are a cool technology, but it’s very important to remember. **Server functions are not magic; they’re syntax sugar for defining a public API.** The _body_ of a server function is never made public; it’s just part of your server binary. But the server function is a publicly accessible API endpoint, and it’s return value is just a JSON or similar blob. You should _never_ return something sensitive from a server function.

docs/book/src/server/26_extractors.md

@@ -62,6 +62,8 @@ pub async fn axum_extract(cx: Scope) -> Result<String, ServerFnError> {
 
 These are relatively simple examples accessing basic data from the server. But you can use extractors to access things like headers, cookies, database connection pools, and more, using the exact same `extract()` pattern.
 
+> Note: For now, the Axum `extract` function only supports extractors for which the state is `()`, i.e., you can't yet use it to extract `State(_)`. You can access `State(_)` by using a custom handler that extracts the state and then provides it via context. [Click here for an example](https://github.com/leptos-rs/leptos/blob/a5f73b441c079f9138102b3a7d8d4828f045448c/examples/session_auth_axum/src/main.rs#L91-L92).
+
 ## A Note about Data-Loading Patterns
 
 Because Actix and (especially) Axum are built on the idea of a single round-trip HTTP request and response, you typically run extractors near the “top” of your application (i.e., before you start rendering) and use the extracted data to determine how that should be rendered. Before you render a `<button>`, you load all the data your app could need. And any given route handler needs to know all the data that will need to be extracted by that route.

docs/book/src/server/27_response.md

@@ -1 +1,74 @@
 # Responses and Redirects
+
+Extractors provide an easy way to access request data inside server functions. Leptos also provides a way to modify the HTTP response, using the `ResponseOptions` type (see docs for [Actix](https://docs.rs/leptos_actix/latest/leptos_actix/struct.ResponseOptions.html) or [Axum](https://docs.rs/leptos_axum/latest/leptos_axum/struct.ResponseOptions.html)) types and the `redirect` helper function (see docs for [Actix](https://docs.rs/leptos_actix/latest/leptos_actix/fn.redirect.html) or [Axum](https://docs.rs/leptos_axum/latest/leptos_axum/fn.redirect.html)).
+
+## `ResponseOptions`
+
+`ResponseOptions` is provided via context during the initial server rendering response and during any subsequent server function call. It allows you to easily set the status code for the HTTP response, or to add headers to the HTTP response, e.g., to set cookies.
+
+```rust
+#[server(TeaAndCookies)]
+pub async fn tea_and_cookies(cx: Scope) -> Result<(), ServerFnError> {
+	use actix_web::{cookie::Cookie, http::header, http::header::HeaderValue};
+	use leptos_actix::ResponseOptions;
+
+	// pull ResponseOptions from context
+	let response = expect_context::<ResponseOptions>(cx);
+
+	// set the HTTP status code
+	response.set_status(StatusCode::IM_A_TEAPOT);
+
+	// set a cookie in the HTTP response
+	let mut cookie = Cookie::build("biscuits", "yes").finish();
+	if let Ok(cookie) = HeaderValue::from_str(&cookie.to_string()) {
+		res.insert_header(header::SET_COOKIE, cookie);
+	}
+}
+```
+
+## `redirect`
+
+One common modification to an HTTP response is to redirect to another page. The Actix and Axum integrations provide a `redirect` function to make this easy to do. `redirect` simply sets an HTTP status code of `302 Found` and sets the `Location` header.
+
+Here’s a simplified example from our [`session_auth_axum` example](https://github.com/leptos-rs/leptos/blob/a5f73b441c079f9138102b3a7d8d4828f045448c/examples/session_auth_axum/src/auth.rs#L154-L181).
+
+```rust
+#[server(Login, "/api")]
+pub async fn login(
+    cx: Scope,
+    username: String,
+    password: String,
+    remember: Option<String>,
+) -> Result<(), ServerFnError> {
+	// pull the DB pool and auth provider from context
+    let pool = pool(cx)?;
+    let auth = auth(cx)?;
+
+	// check whether the user exists
+    let user: User = User::get_from_username(username, &pool)
+        .await
+        .ok_or_else(|| {
+            ServerFnError::ServerError("User does not exist.".into())
+        })?;
+
+	// check whether the user has provided the correct password
+    match verify(password, &user.password)? {
+		// if the password is correct...
+        true => {
+			// log the user in
+            auth.login_user(user.id);
+            auth.remember_user(remember.is_some());
+
+			// and redirect to the home page
+            leptos_axum::redirect(cx, "/");
+            Ok(())
+        }
+		// if not, return an error
+        false => Err(ServerFnError::ServerError(
+            "Password does not match.".to_string(),
+        )),
+    }
+}
+```
+
+This server function can then be used from your application. This `redirect` works well with the progressively-enhanced `<ActionForm/>` component: without JS/WASM, the server response will redirect because of the status code and header. With JS/WASM, the `<ActionForm/>` will detect the redirect in the server function response, and use client-side navigation to redirect to the new page.

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/01_basic_component.md

@@ -28,7 +28,7 @@ fn App(cx: Scope) -> impl IntoView {
     view! { cx,
         <button
             on:click=move |_| {
-                set_count.update(|n| *n += 1);
+                set_count(3);
             }
         >
             "Click me: "
@@ -142,7 +142,7 @@ in a function, telling the framework to update the view every time `count` chang
 `{count()}` access the value of `count` once, and passes an `i32` into the view,
 rendering it once, unreactively. You can see the difference in the CodeSandbox below!
 
-Let’s make one final change. `set_count(3)` is a pretty useless thing for a click handler to do. Let’s replacing “set this value to 3” with “increment this value by 1”:
+Let’s make one final change. `set_count(3)` is a pretty useless thing for a click handler to do. Let’s replace “set this value to 3” with “increment this value by 1”:
 
 ```rust
 move |_| {

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

@@ -98,18 +98,6 @@ notice that you can easily tell the difference between an element and a componen
 because components always have `PascalCase` names. You pass the `progress` prop
 in as if it were an HTML element attribute. Simple.
 
-> ### Important Note
->
-> For every `Component`, Leptos generates a corresponding `ComponentProps` type. This
-> is what allows us to have named props, when Rust does not have named function parameters.
-> If you’re defining a component in one module and importing it into another, make
-> sure you include this `ComponentProps` type:
->
-> `use progress_bar::{ProgressBar, ProgressBarProps};`
->
-> **Note**: This is still true as of `0.2.5`, but the requirement has been removed on `main`
-> and will not apply to later versions.
-
 ### Reactive and Static Props
 
 You’ll notice that throughout this example, `progress` takes a reactive

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/Makefile.toml

@@ -15,16 +15,33 @@ CARGO_MAKE_CRATE_WORKSPACE_MEMBERS = [
     "fetch",
     "hackernews",
     "hackernews_axum",
+    "js-framework-benchmark",
+    "leptos-tailwind-axum",
     "login_with_token_csr_only",
     "parent_child",
     "router",
     "session_auth_axum",
+    "slots",
     "ssr_modes",
     "ssr_modes_axum",
     "tailwind",
     "tailwind_csr_trunk",
+    "timer",
     "todo_app_sqlite",
     "todo_app_sqlite_axum",
     "todo_app_sqlite_viz",
     "todomvc",
 ]
+
+[tasks.gen-members]
+workspace = false
+description = "Generate the list of workspace members"
+script = '''
+examples=$(ls | 
+grep -v README.md | 
+grep -v Makefile.toml | 
+grep -v cargo-make | 
+grep -v gtk | 
+jq -R -s -c 'split("\n")[:-1]')
+echo "CARGO_MAKE_CRATE_WORKSPACE_MEMBERS = $examples"
+'''

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,97 +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]
-args = ["fmt", "--", "--check", "--config-path", "../../"]
-
-[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
-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,28 +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]
+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 = ["clean-all"]
-
-[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

@@ -0,0 +1,4 @@
+extend = [{ path = "../cargo-make/playwright.toml" }]
+
+[tasks.integration-test]
+dependencies = ["test-playwright-autostart"]

examples/cargo-make/playwright.toml

@@ -0,0 +1,101 @@
+[tasks.test-playwright-autostart]
+command = "npm"
+args = ["run", "e2e:auto-start"]
+
+[tasks.test-playwright]
+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
+    PLAYWRIGHT_CMD=pnpm
+elif command -v npm; then
+    PLAYWRIGHT_CMD=npx
+else
+    echo "${RED}${BOLD}ERROR${RESET} - pnpm or npm is required by this task"
+    exit 1
+fi
+
+# Run playwright command
+for pw_path in $(find . -name playwright.config.ts)
+do
+  pw_dir=$(dirname $pw_path)
+  cd $pw_dir
+  ${PLAYWRIGHT_CMD} playwright test
+  cd $project_dir
+done
+'''
+
+[tasks.test-playwright-ui]
+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
+    PLAYWRIGHT_CMD=pnpm
+elif command -v npm; then
+    PLAYWRIGHT_CMD=npx
+else
+    echo "${RED}${BOLD}ERROR${RESET} - pnpm or npm is required by this task"
+    exit 1
+fi
+
+# Run playwright command
+for pw_path in $(find . -name playwright.config.ts)
+do
+  pw_dir=$(dirname $pw_path)
+  cd $pw_dir
+  ${PLAYWRIGHT_CMD} playwright test --ui
+  cd $project_dir
+done
+'''
+
+[tasks.test-playwright-report]
+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
+    PLAYWRIGHT_CMD=pnpm
+elif command -v npm; then
+    PLAYWRIGHT_CMD=npx
+else
+    echo "${RED}${BOLD}ERROR${RESET} - pnpm or npm is required by this task"
+    exit 1
+fi
+
+# Run playwright command
+for pw_path in $(find . -name playwright.config.ts)
+do
+  pw_dir=$(dirname $pw_path)
+  cd $pw_dir
+  ${PLAYWRIGHT_CMD} playwright show-report
+  cd $project_dir
+done
+'''
+
+# ALIASES
+
+[tasks.pw]
+dependencies = ["test-playwright"]
+
+[tasks.pw-ui]
+dependencies = ["test-playwright-ui"]
+
+[tasks.pw-report]
+dependencies = ["test-playwright-report"]

examples/cargo-make/trunk_server.toml

@@ -0,0 +1,18 @@
+[tasks.build]
+command = "trunk"
+args = ["build"]
+
+[tasks.start-trunk]
+command = "trunk"
+args = ["serve", "${@}"]
+
+[tasks.stop-trunk]
+script = '''
+  pkill -f "cargo-make"
+  pkill -f "trunk"
+'''
+
+# ALIASES
+
+[tasks.dev]
+dependencies = ["start-trunk"]

examples/cargo-make/wasm-test.toml

@@ -1,5 +1,11 @@
+[tasks.test]
+env = { RUN_CARGO_TEST = false }
+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/Cargo.toml

@@ -8,7 +8,7 @@ codegen-units = 1
 lto = true
 
 [dependencies]
-leptos = { path = "../../leptos" }
+leptos = { path = "../../leptos", features = ["csr", "nightly"] }
 console_log = "1"
 log = "0.4"
 console_error_panic_hook = "0.1.7"

examples/counter_isomorphic/Cargo.toml

@@ -19,19 +19,17 @@ console_error_panic_hook = "0.1"
 futures = "0.3"
 cfg-if = "1"
 lazy_static = "1"
-leptos = { path = "../../leptos", default-features = false, features = [
-	"serde",
-] }
+leptos = { path = "../../leptos" }
 leptos_actix = { path = "../../integrations/actix", optional = true }
-leptos_meta = { path = "../../meta", default-features = false }
-leptos_router = { path = "../../router", default-features = false }
+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]
-default = []
+default = ["nightly"]
 hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"]
 ssr = [
 	"dep:actix-files",
@@ -41,10 +39,10 @@ ssr = [
 	"leptos_meta/ssr",
 	"leptos_router/ssr",
 ]
-stable = ["leptos/stable", "leptos_router/stable"]
+nightly = ["leptos/nightly", "leptos_router/nightly"]
 
 [package.metadata.cargo-all-features]
-denylist = ["actix-files", "actix-web", "leptos_actix", "stable"]
+denylist = ["actix-files", "actix-web", "leptos_actix", "nightly"]
 skip_feature_sets = [["ssr", "hydrate"]]
 
 [package.metadata.leptos]

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/counter_without_macros/Cargo.toml

@@ -8,7 +8,7 @@ codegen-units = 1
 lto = true
 
 [dependencies]
-leptos = { path = "../../leptos", features = ["stable"] }
+leptos = { path = "../../leptos", features = ["csr"] }
 console_log = "1"
 log = "0.4"
 console_error_panic_hook = "0.1.7"

examples/counter_without_macros/src/main.rs

@@ -1,6 +1,7 @@
 use counter_without_macros::counter;
 use leptos::*;
 
+/// Show the counter
 pub fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();

examples/counters/Cargo.toml

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

examples/counters_stable/.gitignore

@@ -0,0 +1,20 @@
+# Generated by Cargo
+# will have compiled files and executables
+/target/
+
+# Remove Cargo.lock from gitignore if creating an executable, leave it for libraries
+# More information here https://doc.rust-lang.org/cargo/guide/cargo-toml-vs-cargo-lock.html
+Cargo.lock
+
+# These are backup files generated by rustfmt
+**/*.rs.bk
+
+# Support playwright testing
+node_modules/
+test-results/
+end2end/playwright-report/
+playwright/.cache/
+pnpm-lock.yaml
+
+# Support trunk
+dist

examples/counters_stable/Cargo.toml

@@ -4,11 +4,24 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { path = "../../leptos", features = ["stable"] }
+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,4 +1,9 @@
-extend = [{ path = "../cargo-make/main.toml" }]
+extend = [
+    { path = "../cargo-make/main.toml" },
+    { path = "../cargo-make/wasm-test.toml" },
+    { path = "../cargo-make/trunk_server.toml" },
+    { path = "../cargo-make/playwright-test.toml" },
+]
 
 [tasks.build]
 command = "cargo"

examples/counters_stable/e2e/.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+/test-results/
+/playwright-report/
+/playwright/.cache/

examples/counters_stable/e2e/package-lock.json

@@ -0,0 +1,83 @@
+{
+  "name": "grip",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "grip",
+      "devDependencies": {
+        "@playwright/test": "^1.35.1"
+      }
+    },
+    "node_modules/.pnpm/@playwright+test@1.33.0": {
+      "extraneous": true
+    },
+    "node_modules/.pnpm/@types+node@20.2.1/node_modules/@types/node": {
+      "version": "20.2.1",
+      "extraneous": true,
+      "license": "MIT"
+    },
+    "node_modules/.pnpm/playwright-core@1.33.0/node_modules/playwright-core": {
+      "version": "1.33.0",
+      "extraneous": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@playwright/test": {
+      "version": "1.35.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.35.1.tgz",
+      "integrity": "sha512-b5YoFe6J9exsMYg0pQAobNDR85T1nLumUYgUTtKm4d21iX2L7WqKq9dW8NGJ+2vX0etZd+Y7UeuqsxDXm9+5ZA==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*",
+        "playwright-core": "1.35.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "20.3.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.3.1.tgz",
+      "integrity": "sha512-EhcH/wvidPy1WeML3TtYFGR83UzjxeWRen9V402T8aUGYsCHOmfoisV3ZSg03gAFIbLq8TnWOJ0f4cALtnSEUg==",
+      "dev": true
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.35.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.35.1.tgz",
+      "integrity": "sha512-pNXb6CQ7OqmGDRspEjlxE49w+4YtR6a3X6mT1hZXeJHWmsEz7SunmvZeiG/+y1yyMZdHnnn73WKYdtV1er0Xyg==",
+      "dev": true,
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    }
+  }
+}

examples/counters_stable/e2e/package.json

@@ -0,0 +1,7 @@
+{
+  "private": "true",
+  "scripts": {},
+  "devDependencies": {
+    "@playwright/test": "^1.35.1"
+  }
+}

examples/counters_stable/e2e/playwright.config.ts

@@ -0,0 +1,77 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "./tests",
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !process.env.DEV,
+  /* Retry on CI only */
+  retries: process.env.DEV ? 0 : 10,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.DEV ? 1 : 1,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: [["html", { open: "never" }], ["list"]],
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: "http://127.0.0.1:8080",
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+
+    // {
+    //   name: "firefox",
+    //   use: { ...devices["Desktop Firefox"] },
+    // },
+
+    // {
+    //   name: "webkit",
+    //   use: { ...devices["Desktop Safari"] },
+    // },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ..devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: "cd ../ && trunk serve",
+  //   url: "http://127.0.0.1:8080",
+  //   reuseExistingServer: false, //!process.env.CI,
+  // },
+});

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

@@ -0,0 +1,19 @@
+import { test, expect } from "@playwright/test";
+import { CountersPage } from "./fixtures/counters_page";
+
+test.describe("Add 1000 Counters", () => {
+  test("should increase the number of counters", async ({ page }) => {
+    const ui = new CountersPage(page);
+
+    await Promise.all([
+      await ui.goto(),
+      await ui.addOneThousandCountersButton.waitFor(),
+    ]);
+
+    await ui.addOneThousandCounters();
+    await ui.addOneThousandCounters();
+    await ui.addOneThousandCounters();
+
+    await expect(ui.counters).toHaveText("3000");
+  });
+});

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

@@ -0,0 +1,15 @@
+import { test, expect } from "@playwright/test";
+import { CountersPage } from "./fixtures/counters_page";
+
+test.describe("Add Counter", () => {
+  test("should increase the number of counters", async ({ page }) => {
+    const ui = new CountersPage(page);
+    await ui.goto();
+
+    await ui.addCounter();
+    await ui.addCounter();
+    await ui.addCounter();
+
+    await expect(ui.counters).toHaveText("3");
+  });
+});

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

@@ -0,0 +1,18 @@
+import { test, expect } from "@playwright/test";
+import { CountersPage } from "./fixtures/counters_page";
+
+test.describe("Clear Counters", () => {
+  test("should reset the counts", async ({ page }) => {
+    const ui = new CountersPage(page);
+    await ui.goto();
+
+    await ui.addCounter();
+    await ui.addCounter();
+    await ui.addCounter();
+
+    await ui.clearCounters();
+
+    await expect(ui.total).toHaveText("0");
+    await expect(ui.counters).toHaveText("0");
+  });
+});

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

@@ -0,0 +1,16 @@
+import { test, expect } from "@playwright/test";
+import { CountersPage } from "./fixtures/counters_page";
+
+test.describe("Decrement Count", () => {
+  test("should decrease the total count", async ({ page }) => {
+    const ui = new CountersPage(page);
+    await ui.goto();
+    await ui.addCounter();
+
+    await ui.decrementCount();
+    await ui.decrementCount();
+    await ui.decrementCount();
+
+    await expect(ui.total).toHaveText("-3");
+  });
+});

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

@@ -0,0 +1,30 @@
+import { test, expect } from "@playwright/test";
+import { CountersPage } from "./fixtures/counters_page";
+
+test.describe("Enter Count", () => {
+  test("should increase the total count", async ({ page }) => {
+    const ui = new CountersPage(page);
+    await ui.goto();
+    await ui.addCounter();
+
+    await ui.enterCount("5");
+
+    await expect(ui.total).toHaveText("5");
+    await expect(ui.counters).toHaveText("1");
+  });
+
+  test("should decrease the total count", async ({ page }) => {
+    const ui = new CountersPage(page);
+    await ui.goto();
+    await ui.addCounter();
+    await ui.addCounter();
+    await ui.addCounter();
+
+    await ui.enterCount("100");
+    await ui.enterCount("100", 1);
+    await ui.enterCount("100", 2);
+    await ui.enterCount("50", 1);
+
+    await expect(ui.total).toHaveText("250");
+  });
+});

examples/counters_stable/e2e/tests/fixtures/counters_page.ts

@@ -0,0 +1,98 @@
+import { expect, Locator, Page } from "@playwright/test";
+
+export class CountersPage {
+  readonly page: Page;
+  readonly addCounterButton: Locator;
+  readonly addOneThousandCountersButton: Locator;
+  readonly clearCountersButton: Locator;
+
+  readonly incrementCountButton: Locator;
+  readonly counterInput: Locator;
+  readonly decrementCountButton: Locator;
+  readonly removeCountButton: Locator;
+
+  readonly total: Locator;
+  readonly counters: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+
+    this.addCounterButton = page.locator("button", { hasText: "Add Counter" });
+
+    this.addOneThousandCountersButton = page.locator("button", {
+      hasText: "Add 1000 Counters",
+    });
+
+    this.clearCountersButton = page.locator("button", {
+      hasText: "Clear Counters",
+    });
+
+    this.decrementCountButton = page.locator("button", {
+      hasText: "-1",
+    });
+
+    this.incrementCountButton = page.locator("button", {
+      hasText: "+1",
+    });
+
+    this.removeCountButton = page.locator("button", {
+      hasText: "x",
+    });
+
+    this.total = page.getByTestId("total");
+
+    this.counters = page.getByTestId("counters");
+
+    this.counterInput = page.getByRole("textbox");
+  }
+
+  async goto() {
+    await this.page.goto("/");
+  }
+
+  async addCounter() {
+    await Promise.all([
+      this.addCounterButton.waitFor(),
+      this.addCounterButton.click(),
+    ]);
+  }
+
+  async addOneThousandCounters() {
+    this.addOneThousandCountersButton.click();
+  }
+
+  async decrementCount(index: number = 0) {
+    await Promise.all([
+      this.decrementCountButton.nth(index).waitFor(),
+      this.decrementCountButton.nth(index).click(),
+    ]);
+  }
+
+  async incrementCount(index: number = 0) {
+    await Promise.all([
+      this.incrementCountButton.nth(index).waitFor(),
+      this.incrementCountButton.nth(index).click(),
+    ]);
+  }
+
+  async clearCounters() {
+    await Promise.all([
+      this.clearCountersButton.waitFor(),
+      this.clearCountersButton.click(),
+    ]);
+  }
+
+  async enterCount(count: string, index: number = 0) {
+    await Promise.all([
+      this.counterInput.nth(index).waitFor(),
+      this.counterInput.nth(index).fill(count),
+    ]);
+  }
+
+  async removeCounter(index: number = 0) {
+    await Promise.all([
+      this.removeCountButton.nth(index).waitFor(),
+      this.removeCountButton.nth(index).click(),
+    ]);
+  }
+}

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

@@ -0,0 +1,16 @@
+import { test, expect } from "@playwright/test";
+import { CountersPage } from "./fixtures/counters_page";
+
+test.describe("Increment Count", () => {
+  test("should increase the total count", async ({ page }) => {
+    const ui = new CountersPage(page);
+    await ui.goto();
+    await ui.addCounter();
+
+    await ui.incrementCount();
+    await ui.incrementCount();
+    await ui.incrementCount();
+
+    await expect(ui.total).toHaveText("3");
+  });
+});

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

@@ -0,0 +1,17 @@
+import { test, expect } from "@playwright/test";
+import { CountersPage } from "./fixtures/counters_page";
+
+test.describe("Remove Counter", () => {
+  test("should decrement the number of counters", async ({ page }) => {
+    const ui = new CountersPage(page);
+    await ui.goto();
+
+    await ui.addCounter();
+    await ui.addCounter();
+    await ui.addCounter();
+
+    await ui.removeCounter(1);
+
+    await expect(ui.counters).toHaveText("2");
+  });
+});

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

@@ -0,0 +1,19 @@
+import { test, expect } from "@playwright/test";
+import { CountersPage } from "./fixtures/counters_page";
+
+test.describe("View Counters", () => {
+  test("should see the title", async ({ page }) => {
+    const ui = new CountersPage(page);
+    await ui.goto();
+
+    await expect(page).toHaveTitle("Counters (Stable)");
+  });
+
+  test("should see the initial counts", async ({ page }) => {
+    const counters = new CountersPage(page);
+    await counters.goto();
+
+    await expect(counters.total).toHaveText("0");
+    await expect(counters.counters).toHaveText("0");
+  });
+});

examples/counters_stable/index.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 	<head>
+		<title>Counters (Stable)</title>
 		<link data-trunk rel="rust" data-wasm-opt="z" data-weak-refs/>
 	</head>
 	<body></body>

examples/counters_stable/package.json

@@ -0,0 +1,11 @@
+{
+  "private": "true",
+  "scripts": {
+    "start-server": "trunk serve",
+    "e2e": "cargo make test-playwright",
+    "e2e:auto-start": "start-server-and-test start-server http://127.0.0.1:8080 e2e"
+  },
+  "devDependencies": {
+    "start-server-and-test": "^1.15.4"
+  }
+}

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>{move ||
-                    counters.get()
-                        .iter()
-                        .map(|(_, (count, _))| count.get())
-                        .sum::<i32>()
-                        .to_string()
-                }</span>
-                " from "
-                <span>{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 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>{move || value.get().to_string()}</span>
-            <button 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/Cargo.toml

@@ -8,7 +8,7 @@ codegen-units = 1
 lto = true
 
 [dependencies]
-leptos = { path = "../../leptos" }
+leptos = { path = "../../leptos", features = ["csr", "nightly"] }
 console_log = "1"
 log = "0.4"
 console_error_panic_hook = "0.1.7"

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/errors_axum/Cargo.toml

@@ -10,12 +10,10 @@ crate-type = ["cdylib", "rlib"]
 console_log = "1.0.0"
 console_error_panic_hook = "0.1.7"
 cfg-if = "1.0.0"
-leptos = { path = "../../leptos", default-features = false, features = [
-  "serde",
-] }
-leptos_axum = { path = "../../integrations/axum", default-features = false, optional = true }
-leptos_meta = { path = "../../meta", default-features = false }
-leptos_router = { path = "../../router", default-features = false }
+leptos = { path = "../../leptos", features = ["nightly"] }
+leptos_axum = { path = "../../integrations/axum", optional = true }
+leptos_meta = { path = "../../meta" }
+leptos_router = { path = "../../router" }
 log = "0.4.17"
 serde = { version = "1", features = ["derive"] }
 simple_logger = "4.0.0"

examples/errors_axum/src/landing.rs

@@ -34,10 +34,7 @@ pub fn App(cx: Scope) -> impl IntoView {
             </header>
             <main>
                 <Routes>
-                    <Route path="" view=|cx| view! {
-                        cx,
-                        <ExampleErrors/>
-                    }/>
+                    <Route path="" view=|cx| view! { cx, <ExampleErrors/> }/>
                 </Routes>
             </main>
         </Router>
@@ -66,7 +63,7 @@ pub fn ExampleErrors(cx: Scope) -> impl IntoView {
         // note that the error boundaries could be placed above in the Router or lower down
         // in a particular route. The generated errors on the entire page contribute to the
         // final status code sent by the server when producing ssr pages.
-        <ErrorBoundary fallback=|cx, errors| view!{cx, <ErrorTemplate errors=errors/>}>
+        <ErrorBoundary fallback=|cx, errors| view!{ cx, <ErrorTemplate errors=errors/>}>
             <ReturnsError/>
         </ErrorBoundary>
         </div>

examples/fetch/Cargo.toml

@@ -8,7 +8,7 @@ codegen-units = 1
 lto = true
 
 [dependencies]
-leptos = { path = "../../leptos" }
+leptos = { path = "../../leptos", features = ["csr", "nightly"] }
 reqwasm = "0.5"
 serde = { version = "1", features = ["derive"] }
 log = "0.4"

examples/fetch/src/lib.rs

@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::{error::Result, *};
 use serde::{Deserialize, Serialize};
 use thiserror::Error;
 
@@ -8,30 +8,24 @@ pub struct Cat {
 }
 
 #[derive(Error, Clone, Debug)]
-pub enum FetchError {
+pub enum CatError {
     #[error("Please request more than zero cats.")]
     NonZeroCats,
-    #[error("Error loading data from serving.")]
-    Request,
-    #[error("Error deserializaing cat data from request.")]
-    Json,
 }
 
 type CatCount = usize;
 
-async fn fetch_cats(count: CatCount) -> Result<Vec<String>, FetchError> {
+async fn fetch_cats(count: CatCount) -> Result<Vec<String>> {
     if count > 0 {
         // make the request
         let res = reqwasm::http::Request::get(&format!(
             "https://api.thecatapi.com/v1/images/search?limit={count}",
         ))
         .send()
-        .await
-        .map_err(|_| FetchError::Request)?
+        .await?
         // convert it to JSON
         .json::<Vec<Cat>>()
-        .await
-        .map_err(|_| FetchError::Json)?
+        .await?
         // extract the URL field for each cat
         .into_iter()
         .take(count)
@@ -39,7 +33,7 @@ async fn fetch_cats(count: CatCount) -> Result<Vec<String>, FetchError> {
         .collect::<Vec<_>>();
         Ok(res)
     } else {
-        Err(FetchError::NonZeroCats)
+        Err(CatError::NonZeroCats.into())
     }
 }
 

examples/gtk/Cargo.toml

@@ -4,5 +4,5 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { path = "../../leptos" }
+leptos = { path = "../../leptos", features = ["csr", "nightly"] }
 gtk = { version = "0.5.0", package = "gtk4" }

examples/hackernews/Cargo.toml

@@ -16,12 +16,10 @@ actix-web = { version = "4", optional = true, features = ["macros"] }
 console_log = "1"
 console_error_panic_hook = "0.1"
 cfg-if = "1"
-leptos = { path = "../../leptos", default-features = false, features = [
-	"serde",
-] }
-leptos_meta = { path = "../../meta", default-features = false }
-leptos_actix = { path = "../../integrations/actix", default-features = false, optional = true }
-leptos_router = { path = "../../router", default-features = false }
+leptos = { path = "../../leptos", features = ["nightly"] }
+leptos_meta = { path = "../../meta", features = ["nightly"] }
+leptos_actix = { path = "../../integrations/actix", optional = true }
+leptos_router = { path = "../../router", features = ["nightly"] }
 log = "0.4"
 serde = { version = "1", features = ["derive"] }
 gloo-net = { version = "0.2", features = ["http"] }

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/hackernews_axum/Cargo.toml

@@ -14,12 +14,10 @@ lto = true
 console_log = "1.0.0"
 console_error_panic_hook = "0.1.7"
 cfg-if = "1.0.0"
-leptos = { path = "../../leptos", default-features = false, features = [
-  "serde",
-] }
+leptos = { path = "../../leptos", features = ["nightly"] }
 leptos_axum = { path = "../../integrations/axum", optional = true }
-leptos_meta = { path = "../../meta", default-features = false }
-leptos_router = { path = "../../router", default-features = false }
+leptos_meta = { path = "../../meta", features = ["nightly"] }
+leptos_router = { path = "../../router", features = ["nightly"] }
 log = "0.4.17"
 simple_logger = "4.0.0"
 serde = { version = "1.0.148", features = ["derive"] }