fix: router animations should reset to Start state (closes #1754)

-attribute-derive = { version = "0.6", features = ["syn-full"] }
+attribute-derive = { version = "0.8", features = ["syn-full"] }
-itertools = "0.10"
+itertools = "0.11"

.github/workflows/check-examples.yml

@@ -9,66 +9,21 @@ on:
       - main
 
 jobs:
-  setup:
-    name: Get Examples
-    runs-on: ubuntu-latest
-    outputs:
-      matrix: ${{ steps.set-matrix.outputs.matrix }}
-      source_changed: ${{ steps.set-source-changed.outputs.source_changed }}
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
+  get-leptos-changed:
+    uses: ./.github/workflows/get-leptos-changed.yml
 
-      - name: Install JQ Tool
-        uses: mbround18/install-jq@v1
+  get-examples-matrix:
+    uses: ./.github/workflows/get-examples-matrix.yml
 
-      - 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: Get source files that changed
-        id: changed-source
-        uses: tj-actions/changed-files@v36
-        with:
-          files: |
-            integrations
-            leptos
-            leptos_config
-            leptos_dom
-            leptos_hot_reload
-            leptos_macro
-            leptos_reactive
-            leptos_server
-            meta
-            router
-            server_fn
-            server_fn_macro
-
-      - name: List source files that changed
-        run: echo '${{ steps.changed-source.outputs.all_changed_files }}'
-
-      - name: Set source_changed
-        id: set-source-changed
-        run: |
-          echo "source_changed=${{ steps.changed-source.outputs.any_changed }}" >> "$GITHUB_OUTPUT"
-
-  matrix-job:
+  test:
     name: Check
-    needs: [setup]
-    if: needs.setup.outputs.source_changed == 'true'
+    needs: [get-leptos-changed, get-examples-matrix]
+    if: needs.get-leptos-changed.outputs.leptos_changed == 'true'
     strategy:
-      matrix: ${{ fromJSON(needs.setup.outputs.matrix) }}
+      matrix: ${{ fromJSON(needs.get-examples-matrix.outputs.matrix) }}
       fail-fast: false
     uses: ./.github/workflows/run-cargo-make-task.yml
     with:
       directory: ${{ matrix.directory }}
       cargo_make_task: "check"
+      toolchain: nightly

.github/workflows/check-stable.yml

@@ -2,45 +2,25 @@ name: Check stable
 
 on:
   push:
-    branches: [main]
+    branches:
+      - main
   pull_request:
-    branches: [main]
-
-env:
-  CARGO_TERM_COLOR: always
-  CARGO_REGISTRIES_CRATES_IO_PROTOCOL: sparse
+    branches:
+      - main
 
 jobs:
+  get-leptos-changed:
+    uses: ./.github/workflows/get-leptos-changed.yml
+
   test:
-    name: Check examples ${{ matrix.os }} (using rustc ${{ matrix.rust }})
-    runs-on: ${{ matrix.os }}
+    name: Check
+    needs: [get-leptos-changed]
+    if: needs.get-leptos-changed.outputs.leptos_changed == 'true'
     strategy:
       matrix:
-        rust:
-          - stable
-        os:
-          - ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v3
-
-      - name: Setup Rust
-        uses: actions-rs/toolchain@v1
-        with:
-          toolchain: ${{ matrix.rust }}
-          override: true
-          components: rustfmt
-
-      - name: Add wasm32-unknown-unknown
-        run: rustup target add wasm32-unknown-unknown
-
-      - name: Setup cargo-make
-        uses: davidB/rust-cargo-make@v1
-
-      - name: Cargo generate-lockfile
-        run: cargo generate-lockfile
-
-      - uses: Swatinem/rust-cache@v2
-
-      - name: Run cargo check on all examples
-        run: cargo make --profile=github-actions check-stable
+        directory: [examples/counters_stable, examples/counter_without_macros]
+    uses: ./.github/workflows/run-cargo-make-task.yml
+    with:
+      directory: ${{ matrix.directory }}
+      cargo_make_task: "check"
+      toolchain: stable

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

@@ -0,0 +1,32 @@
+name: CI Changed Examples
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  get-example-changed:
+    uses: ./.github/workflows/get-example-changed.yml
+
+  get-matrix:
+    needs: [get-example-changed]
+    uses: ./.github/workflows/get-changed-examples-matrix.yml
+    with:
+      example_changed: ${{ fromJSON(needs.get-example-changed.outputs.example_changed) }}
+
+  test:
+    name: CI
+    needs: [get-example-changed, get-matrix]
+    if: needs.get-example-changed.outputs.example_changed == 'true'
+    strategy:
+      matrix: ${{ fromJSON(needs.get-matrix.outputs.matrix) }}
+      fail-fast: false
+    uses: ./.github/workflows/run-cargo-make-task.yml
+    with:
+      directory: ${{ matrix.directory }}
+      cargo_make_task: "ci"
+      toolchain: nightly

.github/workflows/ci.yml

@@ -9,45 +9,13 @@ on:
       - main
 
 jobs:
-  setup:
-    name: Detect Changes
-    runs-on: ubuntu-latest
-    outputs:
-      source_changed: ${{ steps.set-source-changed.outputs.source_changed }}
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
+  get-leptos-changed:
+    uses: ./.github/workflows/get-leptos-changed.yml
 
-      - name: Get source files that changed
-        id: changed-source
-        uses: tj-actions/changed-files@v36
-        with:
-          files: |
-            integrations
-            leptos
-            leptos_config
-            leptos_dom
-            leptos_hot_reload
-            leptos_macro
-            leptos_reactive
-            leptos_server
-            meta
-            router
-            server_fn
-            server_fn_macro
-
-      - name: List source files that changed
-        run: echo '${{ steps.changed-source.outputs.all_changed_files }}'
-
-      - name: Set source_changed
-        id: set-source-changed
-        run: |
-          echo "source_changed=${{ steps.changed-source.outputs.any_changed }}" >> "$GITHUB_OUTPUT"
-
-  matrix-job:
+  test:
     name: CI
-    needs: [setup]
-    if: needs.setup.outputs.source_changed == 'true'
+    needs: [get-leptos-changed]
+    if: needs.get-leptos-changed.outputs.leptos_changed == 'true'
     strategy:
       matrix:
         directory:
@@ -73,3 +41,4 @@ jobs:
     with:
       directory: ${{ matrix.directory }}
       cargo_make_task: "ci"
+      toolchain: nightly

.github/workflows/get-changed-examples-matrix.yml

@@ -1,16 +1,20 @@
-name: Verify Changed Examples
+name: Changed Examples Matrix Call
 
 on:
-  push:
-    branches:
-      - main
-  pull_request:
-    branches:
-      - main
+  workflow_call:
+    inputs:
+      example_changed:
+        description: "Example Changed"
+        required: true
+        type: boolean
+    outputs:
+      matrix:
+        description: "Matrix"
+        value: ${{ jobs.get-example-changed.outputs.matrix }}
 
 jobs:
-  setup:
-    name: Get Changes
+  get-example-changed:
+    name: Get Changed Example Matrix
     runs-on: ubuntu-latest
     outputs:
       matrix: ${{ steps.set-matrix.outputs.matrix }}
@@ -20,16 +24,6 @@ jobs:
         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
@@ -40,8 +34,9 @@ jobs:
             examples
             !examples/cargo-make
             !examples/gtk
+            !examples/hackernews_js_fetch
             !examples/Makefile.toml
-            !examples/README.md
+            !examples/*.md
           json: true
           quotepath: false
 
@@ -51,21 +46,10 @@ jobs:
       - name: Set Matrix
         id: set-matrix
         run: |
-          if [ ${{ steps.changed-files.outputs.any_changed }} == 'true' ]; then
+          if [ ${{ inputs.example_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"
+            echo "matrix={\"directory\":[\"NO_CHANGE\"]}" >> "$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"

.github/workflows/get-example-changed.yml

@@ -0,0 +1,39 @@
+name: Examples Changed Call
+
+on:
+  workflow_call:
+    outputs:
+      example_changed:
+        description: "Example Changed"
+        value: ${{ jobs.get-example-changed.outputs.example_changed }}
+
+jobs:
+  get-example-changed:
+    name: Get Example Changed
+    runs-on: ubuntu-latest
+    outputs:
+      example_changed: ${{ steps.set-example-changed.outputs.example_changed }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Get example files that changed
+        id: changed-files
+        uses: tj-actions/changed-files@v36
+        with:
+          files: |
+            examples
+            !examples/cargo-make
+            !examples/gtk
+            !examples/Makefile.toml
+            !examples/*.md
+
+      - name: List example files that changed
+        run: echo '${{ steps.changed-files.outputs.all_changed_files }}'
+
+      - name: Set example_changed
+        id: set-example-changed
+        run: |
+          echo "example_changed=${{ steps.changed-files.outputs.any_changed }}" >> "$GITHUB_OUTPUT"

.github/workflows/get-examples-matrix.yml

@@ -0,0 +1,40 @@
+name: Get Examples Matrix Call
+
+on:
+  workflow_call:
+    outputs:
+      matrix:
+        description: "Matrix"
+        value: ${{ jobs.create.outputs.matrix }}
+
+jobs:
+  create:
+    name: Create Examples Matrix
+    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 .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: Print Location Info
+        run: |
+          echo "Workspace: ${{ github.workspace }}"
+          pwd
+          ls | sort -u

.github/workflows/get-leptos-changed.yml

@@ -0,0 +1,44 @@
+name: Get Leptos Changed Call
+
+on:
+  workflow_call:
+    outputs:
+      leptos_changed:
+        description: "Leptos Changed"
+        value: ${{ jobs.create.outputs.leptos_changed }}
+
+jobs:
+  create:
+    name: Detect Source Change
+    runs-on: ubuntu-latest
+    outputs:
+      leptos_changed: ${{ steps.set-source-changed.outputs.leptos_changed }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Get source files that changed
+        id: changed-source
+        uses: tj-actions/changed-files@v36
+        with:
+          files: |
+            integrations
+            leptos
+            leptos_config
+            leptos_dom
+            leptos_hot_reload
+            leptos_macro
+            leptos_reactive
+            leptos_server
+            meta
+            router
+            server_fn
+            server_fn_macro
+
+      - name: List source files that changed
+        run: echo '${{ steps.changed-source.outputs.all_changed_files }}'
+
+      - name: Set leptos_changed
+        id: set-source-changed
+        run: |
+          echo "leptos_changed=${{ steps.changed-source.outputs.any_changed }}" >> "$GITHUB_OUTPUT"

.github/workflows/publish-book.yml

@@ -1,7 +1,7 @@
 name: Deploy book
 on:
   push:
-    paths: ['docs/book/**']
+    paths: ["docs/book/**"]
     branches:
       - main
 
@@ -9,29 +9,29 @@ jobs:
   deploy:
     runs-on: ubuntu-latest
     permissions:
-      contents: write  # To push a branch 
-      pull-requests: write  # To create a PR from that branch
+      contents: write # To push a branch
+      pull-requests: write # To create a PR from that branch
     steps:
-    - uses: actions/checkout@v3
-      with:
-        fetch-depth: 0
-    - name: Install mdbook
-      run: |
-        mkdir mdbook
-        curl -sSL https://github.com/rust-lang/mdBook/releases/download/v0.4.27/mdbook-v0.4.27-x86_64-unknown-linux-gnu.tar.gz | tar -xz --directory=./mdbook
-        echo `pwd`/mdbook >> $GITHUB_PATH
-    - name: Deploy GitHub Pages
-      run: |
-        cd docs/book
-        mdbook build
-        git worktree add gh-pages
-        git config user.name "Deploy book from CI"
-        git config user.email ""
-        cd gh-pages
-        # Delete the ref to avoid keeping history.
-        git update-ref -d refs/heads/gh-pages
-        rm -rf *
-        mv ../book/* .
-        git add .
-        git commit -m "Deploy book $GITHUB_SHA to gh-pages"
-        git push --force --set-upstream origin gh-pages
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: Install mdbook
+        run: |
+          mkdir mdbook
+          curl -sSL https://github.com/rust-lang/mdBook/releases/download/v0.4.27/mdbook-v0.4.27-x86_64-unknown-linux-gnu.tar.gz | tar -xz --directory=./mdbook
+          echo `pwd`/mdbook >> $GITHUB_PATH
+      - name: Deploy GitHub Pages
+        run: |
+          cd docs/book
+          mdbook build
+          git worktree add gh-pages
+          git config user.name "Deploy book from CI"
+          git config user.email ""
+          cd gh-pages
+          # Delete the ref to avoid keeping history.
+          git update-ref -d refs/heads/gh-pages
+          rm -rf *
+          mv ../book/* .
+          git add .
+          git commit -m "Deploy book $GITHUB_SHA to gh-pages"
+          git push --force --set-upstream origin gh-pages

.github/workflows/run-cargo-make-task.yml

@@ -9,34 +9,27 @@ on:
       cargo_make_task:
         required: true
         type: string
+      toolchain:
+        required: true
+        type: string
+
 env:
   CARGO_TERM_COLOR: always
   CARGO_REGISTRIES_CRATES_IO_PROTOCOL: sparse
 
 jobs:
   test:
-    name: Run ${{ matrix.os }} (using rustc ${{ matrix.rust }})
-    runs-on: ${{ matrix.os }}
-    strategy:
-      matrix:
-        rust:
-          - nightly
-        os:
-          - ubuntu-latest
+    name: Run ${{ inputs.cargo_make_task }} (${{ inputs.toolchain }})
+    runs-on: 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
+      - uses: actions/checkout@v4
 
       - name: Setup Rust
         uses: actions-rs/toolchain@v1
         with:
-          toolchain: ${{ matrix.rust }}
+          toolchain: ${{ inputs.toolchain }}
           override: true
           components: rustfmt
 
@@ -84,12 +77,38 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-pnpm-store-
 
+      - name: Maybe install chromedriver
+        run: |
+          project_makefile=${{inputs.directory}}/Makefile.toml
+          webdriver_count=$(cat $project_makefile | grep "cargo-make/webdriver.toml" | wc -l)
+          if [ $webdriver_count -eq 1 ]; then
+              if ! command -v chromedriver &>/dev/null; then
+                  echo chromedriver required
+                  sudo apt-get update
+                  sudo apt-get install chromium-chromedriver
+              else
+                  echo chromedriver is already installed
+              fi
+          else
+              echo chromedriver is not required
+          fi
+
+      - name: Maybe install playwright browser dependencies
+        run: |
+          for pw_path in $(find ${{inputs.directory}} -name playwright.config.ts)
+          do
+            pw_dir=$(dirname $pw_path)
+            if [ ! -v $pw_dir ]; then
+              echo "Playwright required in $pw_dir"
+              cd $pw_dir
+              pnpm dlx playwright install --with-deps
+            else
+              echo Playwright is not required
+            fi
+          done
+
       # 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
+          cd ${{ inputs.directory }}
+          cargo make --profile=github-actions ${{ inputs.cargo_make_task }}

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

@@ -1,4 +1,4 @@
-name: Verify All Examples
+name: CI Examples
 
 on:
   workflow_dispatch:
@@ -10,38 +10,17 @@ on:
     - 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
+  get-examples-matrix:
+    uses: ./.github/workflows/get-examples-matrix.yml
 
-      - 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]
+  test:
+    name: CI
+    needs: [get-examples-matrix]
     strategy:
-      matrix: ${{ fromJSON(needs.setup.outputs.matrix) }}
+      matrix: ${{ fromJSON(needs.get-examples-matrix.outputs.matrix) }}
       fail-fast: false
     uses: ./.github/workflows/run-cargo-make-task.yml
     with:
       directory: ${{ matrix.directory }}
-      cargo_make_task: "verify-flow"
+      cargo_make_task: "ci"
+      toolchain: nightly

.gitignore

@@ -9,3 +9,5 @@ Cargo.lock
 .idea
 .direnv
 .envrc
+
+.vscode

Cargo.toml

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

README.md

@@ -16,9 +16,9 @@
 use leptos::*;
 
 #[component]
-pub fn SimpleCounter(cx: Scope, initial_value: i32) -> impl IntoView {
+pub fn SimpleCounter(initial_value: i32) -> impl IntoView {
     // create a reactive signal with the initial value
-    let (value, set_value) = create_signal(cx, initial_value);
+    let (value, set_value) = create_signal(initial_value);
 
     // create event handlers for our buttons
     // note that `value` and `set_value` are `Copy`, so it's super easy to move them into closures
@@ -27,23 +27,29 @@ pub fn SimpleCounter(cx: Scope, initial_value: i32) -> impl IntoView {
     let increment = move |_| set_value.update(|value| *value += 1);
 
     // create user interfaces with the declarative `view!` macro
-    view! { cx,
+    view! {
         <div>
-            <button on:click=clear>"Clear"</button>
-            <button on:click=decrement>"-1"</button>
+            <button on:click=clear>Clear</button>
+            <button on:click=decrement>-1</button>
+            // text nodes can be quoted or unquoted
             <span>"Value: " {value} "!"</span>
-            <button on:click=increment>"+1"</button>
+            <button on:click=increment>+1</button>
         </div>
     }
 }
 
 // Easy to use with Trunk (trunkrs.dev) or with a simple wasm-bindgen setup
 pub fn main() {
-    mount_to_body(|cx| view! { cx,  <SimpleCounter initial_value=3 /> })
+    mount_to_body(|| view! {
+        <SimpleCounter initial_value=3 />
+    })
 }
-
 ```
 
+### Important Note
+
+This example, and the entire `main` branch, now reflect the upcoming `0.5.0` release. You can use `0.5.0` with the `0.5.0-beta` release on crates.io or by a git dependency on the `main` branch of this repo. [Click here for the 0.4.9 `README`](https://crates.io/crates/leptos).
+
 ## About the Framework
 
 Leptos is a full-stack, isomorphic Rust web framework leveraging fine-grained reactivity to build declarative user interfaces.
@@ -88,8 +94,6 @@ targets = ["wasm32-unknown-unknown"]
 
 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.
 
-> 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`
 
 [`cargo-leptos`](https://github.com/leptos-rs/cargo-leptos) is a build tool that's designed to make it easy to build apps that run on both the client and the server, with seamless integration. The best way to get started with a real Leptos project right now is to use `cargo-leptos` and our starter templates for [Actix](https://github.com/leptos-rs/start) or [Axum](https://github.com/leptos-rs/start-axum).
@@ -115,7 +119,7 @@ People usually mean one of three things by this question.
 
 1. **Are the APIs stable?** i.e., will I have to rewrite my whole app from Leptos 0.1 to 0.2 to 0.3 to 0.4, or can I write it now and benefit from new features and updates as new versions come?
 
-The APIs are basically settled. We’re adding new features, but we’re very happy with where the type system and patterns have landed. I would not expect major breaking changes to your code to adapt to future releases. The sorts of breaking changes that we discuss are things like “Oh yeah, that function should probably take `cx` as its argument...” not major changes to the way you write your application.
+The APIs are basically settled. We’re adding new features, but we’re very happy with where the type system and patterns have landed. I would not expect major breaking changes to your code to adapt to future releases, in terms of architecture.
 
 2. **Are there bugs?**
 
@@ -154,13 +158,13 @@ There are some practical differences that make a significant difference:
 
 - **Templating:** Leptos uses a JSX-like template format (built on [syn-rsx](https://github.com/stoically/syn-rsx)) for its `view` macro. Sycamore offers the choice of its own templating DSL or a builder syntax.
 - **Server integration:** Leptos provides primitives that encourage HTML streaming and allow for easy async integration and RPC calls, even without WASM enabled, making it easy to opt into integrations between your frontend and backend code without pushing you toward any particular metaframework patterns.
-- **Read-write segregation:** Leptos, like Solid, encourages read-write segregation between signal getters and setters, so you end up accessing signals with tuples like `let (count, set_count) = create_signal(cx, 0);` _(If you prefer or if it's more convenient for your API, you can use [`create_rw_signal`](https://docs.rs/leptos/latest/leptos/fn.create_rw_signal.html) to give a unified read/write signal.)_
+- **Read-write segregation:** Leptos, like Solid, encourages read-write segregation between signal getters and setters, so you end up accessing signals with tuples like `let (count, set_count) = create_signal(0);` _(If you prefer or if it's more convenient for your API, you can use [`create_rw_signal`](https://docs.rs/leptos/latest/leptos/fn.create_rw_signal.html) to give a unified read/write signal.)_
 - **Signals are functions:** In Leptos, you can call a signal to access it rather than calling a specific method (so, `count()` instead of `count.get()`) This creates a more consistent mental model: accessing a reactive value is always a matter of calling a function. For example:
 
   ```rust
-  let (count, set_count) = create_signal(cx, 0); // a signal
+  let (count, set_count) = create_signal(0); // a signal
   let double_count = move || count() * 2; // a derived signal
-  let memoized_count = create_memo(cx, move |_| count() * 3); // a memo
+  let memoized_count = create_memo(move |_| count() * 3); // a memo
   // all are accessed by calling them
   assert_eq!(count(), 0);
   assert_eq!(double_count(), 0);

SECURITY.md

@@ -0,0 +1,13 @@
+# Security Policy
+
+## Reporting a Vulnerability
+
+To report a suspected security issue, please contact security@leptos.dev rather than opening
+a public issue.
+
+## Supported Versions
+
+The most-recently-released version of the library is supported with security updates.
+For example, if a security issue is discovered that affects 0.3.2 and all later releases,
+a 0.4.x patch will be released but a new 0.3.x patch release will not be made. You should 
+plan to update to the latest version to receive any new features or bugfixes of any kind.

benchmarks/Cargo.toml

@@ -4,10 +4,16 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-l021 = { package = "leptos", version = "0.2.1" }
-leptos = { path = "../leptos", features = ["ssr"] }
+l0410 = { package = "leptos", version = "0.4.10", features = [
+	"nightly",
+	"ssr",
+] }
+leptos = { path = "../leptos", features = ["ssr", "nightly"] }
+leptos_reactive = { path = "../leptos_reactive", features = ["ssr", "nightly"] }
+tachydom = { git = "https://github.com/gbj/tachys", features = ["nightly"] }
+tachy_maccy = { git = "https://github.com/gbj/tachys", features = ["nightly"] }
 sycamore = { version = "0.8", features = ["ssr"] }
-yew = { git = "https://github.com/yewstack/yew", features = ["ssr"] }
+yew = { version = "0.20", features = ["ssr"] }
 tokio-test = "0.4"
 miniserde = "0.1"
 gloo = "0.8"
@@ -20,7 +26,6 @@ strum_macros = "0.24"
 serde = { version = "1", features = ["derive", "rc"] }
 serde_json = "1"
 tera = "1"
-reactive-signals = "0.1.0-alpha.4"
 
 [dependencies.web-sys]
 version = "0.3"

benchmarks/src/lib.rs

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

benchmarks/src/reactive.rs

@@ -7,19 +7,16 @@ fn leptos_deep_creation(b: &mut Bencher) {
     let runtime = create_runtime();
 
     b.iter(|| {
-        create_scope(runtime, |cx| {
-            let signal = create_rw_signal(cx, 0);
-            let mut memos = Vec::<Memo<usize>>::new();
-            for _ in 0..1000usize {
-                let prev = memos.last().copied();
-                if let Some(prev) = prev {
-                    memos.push(create_memo(cx, move |_| prev.get() + 1));
-                } else {
-                    memos.push(create_memo(cx, move |_| signal.get() + 1));
-                }
+        let signal = create_rw_signal(0);
+        let mut memos = Vec::<Memo<usize>>::new();
+        for _ in 0..1000usize {
+            let prev = memos.last().copied();
+            if let Some(prev) = prev {
+                memos.push(create_memo(move |_| prev.get() + 1));
+            } else {
+                memos.push(create_memo(move |_| signal.get() + 1));
             }
-        })
-        .dispose()
+        }
     });
 
     runtime.dispose();
@@ -31,20 +28,17 @@ fn leptos_deep_update(b: &mut Bencher) {
     let runtime = create_runtime();
 
     b.iter(|| {
-        create_scope(runtime, |cx| {
-            let signal = create_rw_signal(cx, 0);
-            let mut memos = Vec::<Memo<usize>>::new();
-            for _ in 0..1000usize {
-                if let Some(prev) = memos.last().copied() {
-                    memos.push(create_memo(cx, move |_| prev.get() + 1));
-                } else {
-                    memos.push(create_memo(cx, move |_| signal.get() + 1));
-                }
+        let signal = create_rw_signal(0);
+        let mut memos = Vec::<Memo<usize>>::new();
+        for _ in 0..1000usize {
+            if let Some(prev) = memos.last().copied() {
+                memos.push(create_memo(move |_| prev.get() + 1));
+            } else {
+                memos.push(create_memo(move |_| signal.get() + 1));
             }
-            signal.set(1);
-            assert_eq!(memos[999].get(), 1001);
-        })
-        .dispose()
+        }
+        signal.set(1);
+        assert_eq!(memos[999].get(), 1001);
     });
 
     runtime.dispose();
@@ -56,17 +50,12 @@ fn leptos_narrowing_down(b: &mut Bencher) {
     let runtime = create_runtime();
 
     b.iter(|| {
-        create_scope(runtime, |cx| {
-            let sigs =
-                (0..1000).map(|n| create_signal(cx, n)).collect::<Vec<_>>();
-            let reads = sigs.iter().map(|(r, _)| *r).collect::<Vec<_>>();
-            let writes = sigs.iter().map(|(_, w)| *w).collect::<Vec<_>>();
-            let memo = create_memo(cx, move |_| {
-                reads.iter().map(|r| r.get()).sum::<i32>()
-            });
-            assert_eq!(memo(), 499500);
-        })
-        .dispose()
+        let sigs = (0..1000).map(|n| create_signal(n)).collect::<Vec<_>>();
+        let reads = sigs.iter().map(|(r, _)| *r).collect::<Vec<_>>();
+        let writes = sigs.iter().map(|(_, w)| *w).collect::<Vec<_>>();
+        let memo =
+            create_memo(move |_| reads.iter().map(|r| r.get()).sum::<i32>());
+        assert_eq!(memo(), 499500);
     });
 
     runtime.dispose();
@@ -78,16 +67,13 @@ fn leptos_fanning_out(b: &mut Bencher) {
     let runtime = create_runtime();
 
     b.iter(|| {
-        create_scope(runtime, |cx| {
-            let sig = create_rw_signal(cx, 0);
-            let memos = (0..1000)
-                .map(|_| create_memo(cx, move |_| sig.get()))
-                .collect::<Vec<_>>();
-            assert_eq!(memos.iter().map(|m| m.get()).sum::<i32>(), 0);
-            sig.set(1);
-            assert_eq!(memos.iter().map(|m| m.get()).sum::<i32>(), 1000);
-        })
-        .dispose()
+        let sig = create_rw_signal(0);
+        let memos = (0..1000)
+            .map(|_| create_memo(move |_| sig.get()))
+            .collect::<Vec<_>>();
+        assert_eq!(memos.iter().map(|m| m.get()).sum::<i32>(), 0);
+        sig.set(1);
+        assert_eq!(memos.iter().map(|m| m.get()).sum::<i32>(), 1000);
     });
 
     runtime.dispose();
@@ -98,143 +84,36 @@ fn leptos_narrowing_update(b: &mut Bencher) {
     use leptos::*;
     let runtime = create_runtime();
 
-    b.iter(|| {
-        create_scope(runtime, |cx| {
-            let acc = Rc::new(Cell::new(0));
-            let sigs =
-                (0..1000).map(|n| create_signal(cx, n)).collect::<Vec<_>>();
-            let reads = sigs.iter().map(|(r, _)| *r).collect::<Vec<_>>();
-            let writes = sigs.iter().map(|(_, w)| *w).collect::<Vec<_>>();
-            let memo = create_memo(cx, move |_| {
-                reads.iter().map(|r| r.get()).sum::<i32>()
-            });
-            assert_eq!(memo(), 499500);
-            create_isomorphic_effect(cx, {
-                let acc = Rc::clone(&acc);
-                move |_| {
-                    acc.set(memo());
-                }
-            });
-            assert_eq!(acc.get(), 499500);
-
-            writes[1].update(|n| *n += 1);
-            writes[10].update(|n| *n += 1);
-            writes[100].update(|n| *n += 1);
-
-            assert_eq!(acc.get(), 499503);
-            assert_eq!(memo(), 499503);
-        })
-        .dispose()
-    });
-
-    runtime.dispose();
-}
-
-#[bench]
-fn leptos_scope_creation_and_disposal(b: &mut Bencher) {
-    use leptos::*;
-    let runtime = create_runtime();
-
     b.iter(|| {
         let acc = Rc::new(Cell::new(0));
-        let disposers = (0..1000)
-            .map(|_| {
-                create_scope(runtime, {
-                    let acc = Rc::clone(&acc);
-                    move |cx| {
-                        let (r, w) = create_signal(cx, 0);
-                        create_isomorphic_effect(cx, {
-                            move |_| {
-                                acc.set(r());
-                            }
-                        });
-                        w.update(|n| *n += 1);
-                    }
-                })
-            })
-            .collect::<Vec<_>>();
-        for disposer in disposers {
-            disposer.dispose();
-        }
-    });
-
-    runtime.dispose();
-}
-
-#[bench]
-fn rs_deep_update(b: &mut Bencher) {
-    use reactive_signals::{Scope, Signal, signal, runtimes::ClientRuntime, types::Func};
-
-    let sc = ClientRuntime::new_root_scope();
-    b.iter(|| {
-        let signal = signal!(sc, 0);
-        let mut memos = Vec::<Signal<Func<i32>, ClientRuntime>>::new();
-        for i in 0..1000usize {
-            let prev = memos.get(i.saturating_sub(1)).copied();
-            if let Some(prev) = prev {
-                memos.push(signal!(sc, move || prev.get() + 1))
-            } else {
-                memos.push(signal!(sc, move || signal.get() + 1))
-            }
-        }
-        signal.set(1);
-        assert_eq!(memos[999].get(), 1001);
-    });
-}
-
-#[bench]
-fn rs_fanning_out(b: &mut Bencher) {
-    use reactive_signals::{Scope, Signal, signal, runtimes::ClientRuntime, types::Func};
-    let cx = ClientRuntime::new_root_scope();
-
-    b.iter(|| {
-        let sig = signal!(cx, 0);
-        let memos = (0..1000)
-            .map(|_| signal!(cx, move || sig.get()))
-            .collect::<Vec<_>>();
-        assert_eq!(memos.iter().map(|m| m.get()).sum::<i32>(), 0);
-        sig.set(1);
-        assert_eq!(memos.iter().map(|m| m.get()).sum::<i32>(), 1000);
-    });
-}
-
-#[bench]
-fn rs_narrowing_update(b: &mut Bencher) {
-    use reactive_signals::{Scope, Signal, signal, runtimes::ClientRuntime, types::Func};
-    let cx = ClientRuntime::new_root_scope();
-
-    b.iter(|| {
-        let acc = Rc::new(Cell::new(0));
-        let sigs =
-            (0..1000).map(|n| signal!(cx, n)).collect::<Vec<_>>();
-        let memo = signal!(cx, {
-            let sigs = sigs.clone();
-            move || {
-                sigs.iter().map(|r| r.get()).sum::<i32>()
-            }
-        });
-        assert_eq!(memo.get(), 499500);
-        signal!(cx, {
+        let sigs = (0..1000).map(|n| create_signal(n)).collect::<Vec<_>>();
+        let reads = sigs.iter().map(|(r, _)| *r).collect::<Vec<_>>();
+        let writes = sigs.iter().map(|(_, w)| *w).collect::<Vec<_>>();
+        let memo =
+            create_memo(move |_| reads.iter().map(|r| r.get()).sum::<i32>());
+        assert_eq!(memo(), 499500);
+        create_isomorphic_effect({
             let acc = Rc::clone(&acc);
-            move || {
-                acc.set(memo.get());
+            move |_| {
+                acc.set(memo());
             }
         });
-
         assert_eq!(acc.get(), 499500);
 
-        sigs[1].update(|n| *n += 1);
-        sigs[10].update(|n| *n += 1);
-        sigs[100].update(|n| *n += 1);
+        writes[1].update(|n| *n += 1);
+        writes[10].update(|n| *n += 1);
+        writes[100].update(|n| *n += 1);
 
         assert_eq!(acc.get(), 499503);
-        assert_eq!(memo.get(), 499503);
+        assert_eq!(memo(), 499503);
     });
+
+    runtime.dispose();
 }
 
 #[bench]
-fn l021_deep_creation(b: &mut Bencher) {
-    use l021::*;
+fn l0410_deep_creation(b: &mut Bencher) {
+    use l0410::*;
     let runtime = create_runtime();
 
     b.iter(|| {
@@ -256,8 +135,8 @@ fn l021_deep_creation(b: &mut Bencher) {
 }
 
 #[bench]
-fn l021_deep_update(b: &mut Bencher) {
-    use l021::*;
+fn l0410_deep_update(b: &mut Bencher) {
+    use l0410::*;
     let runtime = create_runtime();
 
     b.iter(|| {
@@ -281,8 +160,8 @@ fn l021_deep_update(b: &mut Bencher) {
 }
 
 #[bench]
-fn l021_narrowing_down(b: &mut Bencher) {
-    use l021::*;
+fn l0410_narrowing_down(b: &mut Bencher) {
+    use l0410::*;
     let runtime = create_runtime();
 
     b.iter(|| {
@@ -304,8 +183,8 @@ fn l021_narrowing_down(b: &mut Bencher) {
 }
 
 #[bench]
-fn l021_fanning_out(b: &mut Bencher) {
-    use leptos::*;
+fn l0410_fanning_out(b: &mut Bencher) {
+    use l0410::*;
     let runtime = create_runtime();
 
     b.iter(|| {
@@ -324,8 +203,8 @@ fn l021_fanning_out(b: &mut Bencher) {
     runtime.dispose();
 }
 #[bench]
-fn l021_narrowing_update(b: &mut Bencher) {
-    use l021::*;
+fn l0410_narrowing_update(b: &mut Bencher) {
+    use l0410::*;
     let runtime = create_runtime();
 
     b.iter(|| {
@@ -338,11 +217,11 @@ fn l021_narrowing_update(b: &mut Bencher) {
             let memo = create_memo(cx, move |_| {
                 reads.iter().map(|r| r.get()).sum::<i32>()
             });
-            assert_eq!(memo(), 499500);
+            assert_eq!(memo.get(), 499500);
             create_isomorphic_effect(cx, {
                 let acc = Rc::clone(&acc);
                 move |_| {
-                    acc.set(memo());
+                    acc.set(memo.get());
                 }
             });
             assert_eq!(acc.get(), 499500);
@@ -352,7 +231,7 @@ fn l021_narrowing_update(b: &mut Bencher) {
             writes[100].update(|n| *n += 1);
 
             assert_eq!(acc.get(), 499503);
-            assert_eq!(memo(), 499503);
+            assert_eq!(memo.get(), 499503);
         })
         .dispose()
     });
@@ -361,8 +240,8 @@ fn l021_narrowing_update(b: &mut Bencher) {
 }
 
 #[bench]
-fn l021_scope_creation_and_disposal(b: &mut Bencher) {
-    use l021::*;
+fn l0410_scope_creation_and_disposal(b: &mut Bencher) {
+    use l0410::*;
     let runtime = create_runtime();
 
     b.iter(|| {
@@ -375,7 +254,7 @@ fn l021_scope_creation_and_disposal(b: &mut Bencher) {
                         let (r, w) = create_signal(cx, 0);
                         create_isomorphic_effect(cx, {
                             move |_| {
-                                acc.set(r());
+                                acc.set(r.get());
                             }
                         });
                         w.update(|n| *n += 1);

benchmarks/src/ssr.rs

@@ -2,15 +2,14 @@ use test::Bencher;
 
 #[bench]
 fn leptos_ssr_bench(b: &mut Bencher) {
+	use leptos::*;
+	let r = create_runtime();
     b.iter(|| {
-		use leptos::*;
-		leptos_dom::HydrationCtx::reset_id();
-		_ = create_scope(create_runtime(), |cx| {
+			leptos::leptos_dom::HydrationCtx::reset_id();
 			#[component]
-			fn Counter(cx: Scope, initial: i32) -> impl IntoView {
-				let (value, set_value) = create_signal(cx, initial);
+			fn Counter(initial: i32) -> impl IntoView {
+				let (value, set_value) = create_signal(initial);
 				view! {
-					cx,
 					<div>
 						<button on:click=move |_| set_value.update(|value| *value -= 1)>"-1"</button>
 						<span>"Value: " {move || value().to_string()} "!"</span>
@@ -20,7 +19,6 @@ fn leptos_ssr_bench(b: &mut Bencher) {
 			}
 
 			let rendered = view! { 
-				cx,
 				<main>
 					<h1>"Welcome to our benchmark page."</h1>
 					<p>"Here's some introductory text."</p>
@@ -28,14 +26,51 @@ fn leptos_ssr_bench(b: &mut Bencher) {
 					<Counter initial=2/>
 					<Counter initial=3/>
 				</main>
-			}.into_view(cx).render_to_string(cx);
+			}.into_view().render_to_string();
 
 			assert_eq!(
 				rendered,
-				"<main id=\"_0-1\"><h1 id=\"_0-2\">Welcome to our benchmark page.</h1><p id=\"_0-3\">Here&#x27;s some introductory text.</p><div id=\"_0-3-1\"><button id=\"_0-3-2\">-1</button><span id=\"_0-3-3\">Value: <!>1<!--hk=_0-3-4-->!</span><button id=\"_0-3-5\">+1</button></div><!--hk=_0-3-0--><div id=\"_0-3-5-1\"><button id=\"_0-3-5-2\">-1</button><span id=\"_0-3-5-3\">Value: <!>2<!--hk=_0-3-5-4-->!</span><button id=\"_0-3-5-5\">+1</button></div><!--hk=_0-3-5-0--><div id=\"_0-3-5-5-1\"><button id=\"_0-3-5-5-2\">-1</button><span id=\"_0-3-5-5-3\">Value: <!>3<!--hk=_0-3-5-5-4-->!</span><button id=\"_0-3-5-5-5\">+1</button></div><!--hk=_0-3-5-5-0--></main>"
+				"<main data-hk=\"0-0-1\"><h1 data-hk=\"0-0-2\">Welcome to our benchmark page.</h1><p data-hk=\"0-0-3\">Here&#x27;s some introductory text.</p><div data-hk=\"0-0-5\"><button data-hk=\"0-0-6\">-1</button><span data-hk=\"0-0-7\">Value: <!>1<!--hk=0-0-8-->!</span><button data-hk=\"0-0-9\">+1</button></div><!--hk=0-0-4--><div data-hk=\"0-0-11\"><button data-hk=\"0-0-12\">-1</button><span data-hk=\"0-0-13\">Value: <!>2<!--hk=0-0-14-->!</span><button data-hk=\"0-0-15\">+1</button></div><!--hk=0-0-10--><div data-hk=\"0-0-17\"><button data-hk=\"0-0-18\">-1</button><span data-hk=\"0-0-19\">Value: <!>3<!--hk=0-0-20-->!</span><button data-hk=\"0-0-21\">+1</button></div><!--hk=0-0-16--></main>"
 			);
-		});
 	});
+	r.dispose();
+}
+
+#[bench]
+fn tachys_ssr_bench(b: &mut Bencher) {
+	use leptos::{create_runtime, create_signal, SignalGet, SignalUpdate};
+	use tachy_maccy::view;
+	use tachydom::view::Render;
+	let rt = create_runtime();
+    b.iter(|| {
+		fn counter(initial: i32) -> impl Render {
+			let (value, set_value) = create_signal(initial);
+			view! {
+				<div>
+					<button on:click=move |_| set_value.update(|value| *value -= 1)>"-1"</button>
+					<span>"Value: " {move || value().to_string()} "!"</span>
+					<button on:click=move |_| set_value.update(|value| *value += 1)>"+1"</button>
+				</div>
+			}
+		}
+
+		let mut buf = String::with_capacity(1024);
+		let rendered = view! { 
+			<main>
+				<h1>"Welcome to our benchmark page."</h1>
+				<p>"Here's some introductory text."</p>
+				{counter(1)}
+				{counter(2)}
+				{counter(3)}
+			</main>
+		};
+		rendered.to_html(&mut buf, &Default::default());
+		assert_eq!(
+			buf,
+			"<main><h1>Welcome to our benchmark page.</h1><p>Here's some introductory text.</p><div><button>-1</button><span>Value: <!>1<!>!</span><button>+1</button></div><div><button>-1</button><span>Value: <!>2<!>!</span><button>+1</button></div><div><button>-1</button><span>Value: <!>3<!>!</span><button>+1</button></div></main>"
+		);
+	});
+	rt.dispose();
 }
 
 #[bench]

benchmarks/src/todomvc/leptos.rs

@@ -1,7 +1,7 @@
 pub use leptos::*;
 use miniserde::*;
-use web_sys::HtmlInputElement;
 use wasm_bindgen::JsCast;
+use web_sys::HtmlInputElement;
 
 #[derive(Debug, Clone, PartialEq, Eq)]
 pub struct Todos(pub Vec<Todo>);
@@ -9,13 +9,13 @@ pub struct Todos(pub Vec<Todo>);
 const STORAGE_KEY: &str = "todos-leptos";
 
 impl Todos {
-    pub fn new(cx: Scope) -> Self {
+    pub fn new() -> Self {
         Self(vec![])
     }
 
-    pub fn new_with_1000(cx: Scope) -> Self {
+    pub fn new_with_1000() -> Self {
         let todos = (0..1000)
-            .map(|id| Todo::new(cx, id, format!("Todo #{id}")))
+            .map(|id| Todo::new(id, format!("Todo #{id}")))
             .collect();
         Self(todos)
     }
@@ -72,13 +72,17 @@ pub struct Todo {
 }
 
 impl Todo {
-    pub fn new(cx: Scope, id: usize, title: String) -> Self {
-        Self::new_with_completed(cx, id, title, false)
+    pub fn new(id: usize, title: String) -> Self {
+        Self::new_with_completed(id, title, false)
     }
 
-    pub fn new_with_completed(cx: Scope, id: usize, title: String, completed: bool) -> Self {
-        let (title, set_title) = create_signal(cx, title);
-        let (completed, set_completed) = create_signal(cx, completed);
+    pub fn new_with_completed(
+        id: usize,
+        title: String,
+        completed: bool,
+    ) -> Self {
+        let (title, set_title) = create_signal(title);
+        let (completed, set_completed) = create_signal(completed);
         Self {
             id,
             title,
@@ -98,7 +102,7 @@ const ESCAPE_KEY: u32 = 27;
 const ENTER_KEY: u32 = 13;
 
 #[component]
-pub fn TodoMVC(cx: Scope, todos: Todos) -> impl IntoView {
+pub fn TodoMVC(todos: Todos) -> impl IntoView {
     let mut next_id = todos
         .0
         .iter()
@@ -107,10 +111,10 @@ pub fn TodoMVC(cx: Scope, todos: Todos) -> impl IntoView {
         .map(|last| last + 1)
         .unwrap_or(0);
 
-    let (todos, set_todos) = create_signal(cx, todos);
-    provide_context(cx, set_todos);
+    let (todos, set_todos) = create_signal(todos);
+    provide_context(set_todos);
 
-    let (mode, set_mode) = create_signal(cx, Mode::All);
+    let (mode, set_mode) = create_signal(Mode::All);
 
     let add_todo = move |ev: web_sys::KeyboardEvent| {
         let target = event_target::<HtmlInputElement>(&ev);
@@ -120,7 +124,7 @@ pub fn TodoMVC(cx: Scope, todos: Todos) -> impl IntoView {
             let title = event_target_value(&ev);
             let title = title.trim();
             if !title.is_empty() {
-                let new = Todo::new(cx, next_id, title.to_string());
+                let new = Todo::new(next_id, title.to_string());
                 set_todos.update(|t| t.add(new));
                 next_id += 1;
                 target.set_value("");
@@ -128,7 +132,7 @@ pub fn TodoMVC(cx: Scope, todos: Todos) -> impl IntoView {
         }
     };
 
-    let filtered_todos = create_memo::<Vec<Todo>>(cx, move |_| {
+    let filtered_todos = create_memo::<Vec<Todo>>(move |_| {
         todos.with(|todos| match mode.get() {
             Mode::All => todos.0.to_vec(),
             Mode::Active => todos
@@ -148,7 +152,7 @@ pub fn TodoMVC(cx: Scope, todos: Todos) -> impl IntoView {
 
     // effect to serialize to JSON
     // this does reactive reads, so it will automatically serialize on any relevant change
-    create_effect(cx, move |_| {
+    create_effect(move |_| {
         if let Ok(Some(storage)) = window().local_storage() {
             let objs = todos
                 .get()
@@ -163,7 +167,7 @@ pub fn TodoMVC(cx: Scope, todos: Todos) -> impl IntoView {
         }
     });
 
-    view! { cx,
+    view! { 
         <main>
             <section class="todoapp">
                 <header class="header">
@@ -188,8 +192,8 @@ pub fn TodoMVC(cx: Scope, todos: Todos) -> impl IntoView {
                         <For
                             each=filtered_todos
                             key=|todo| todo.id
-                            view=move |cx, todo: Todo| {
-                                view! { cx, <Todo todo=todo.clone()/> }
+                            children=move |todo: Todo| {
+                                view! { <Todo todo=todo.clone()/> }
                             }
                         />
                     </ul>
@@ -236,14 +240,14 @@ pub fn TodoMVC(cx: Scope, todos: Todos) -> impl IntoView {
                 <p>"Part of " <a href="http://todomvc.com">"TodoMVC"</a></p>
             </footer>
         </main>
-    }.into_view(cx)
+    }.into_view()
 }
 
 #[component]
-pub fn Todo(cx: Scope, todo: Todo) -> impl IntoView {
-    let (editing, set_editing) = create_signal(cx, false);
-    let set_todos = use_context::<WriteSignal<Todos>>(cx).unwrap();
-    //let input = NodeRef::new(cx);
+pub fn Todo(todo: Todo) -> impl IntoView {
+    let (editing, set_editing) = create_signal(false);
+    let set_todos = use_context::<WriteSignal<Todos>>().unwrap();
+    //let input = NodeRef::new();
 
     let save = move |value: &str| {
         let value = value.trim();
@@ -255,7 +259,7 @@ pub fn Todo(cx: Scope, todo: Todo) -> impl IntoView {
         set_editing(false);
     };
 
-    view! { cx,
+    view! { 
         <li class="todo" class:editing=editing class:completed=move || (todo.completed)()>
             <div class="view">
                 <input class="toggle" type="checkbox" prop:checked=move || (todo.completed)()/>
@@ -268,7 +272,7 @@ pub fn Todo(cx: Scope, todo: Todo) -> impl IntoView {
             {move || {
                 editing()
                     .then(|| {
-                        view! { cx,
+                        view! { 
                             <input
                                 class="edit"
                                 class:hidden=move || !(editing)()
@@ -319,8 +323,8 @@ pub struct TodoSerialized {
 }
 
 impl TodoSerialized {
-    pub fn into_todo(self, cx: Scope) -> Todo {
-        Todo::new_with_completed(cx, self.id, self.title, self.completed)
+    pub fn into_todo(self, ) -> Todo {
+        Todo::new_with_completed(self.id, self.title, self.completed)
     }
 }
 

benchmarks/src/todomvc/mod.rs

@@ -2,6 +2,7 @@ use test::Bencher;
 
 mod leptos;
 mod sycamore;
+mod tachys;
 mod tera;
 mod yew;
 
@@ -12,18 +13,37 @@ fn leptos_todomvc_ssr(b: &mut Bencher) {
     b.iter(|| {
         use crate::todomvc::leptos::*;
 
-        let html = ::leptos::ssr::render_to_string(|cx| {
-            view! { cx, <TodoMVC todos=Todos::new(cx)/> }
+        let html = ::leptos::ssr::render_to_string(|| {
+            view! { <TodoMVC todos=Todos::new()/> }
         });
         assert!(html.len() > 1);
     });
+    runtime.dispose();
+}
+
+#[bench]
+fn tachys_todomvc_ssr(b: &mut Bencher) {
+    use ::leptos::*;
+    let runtime = create_runtime();
+    b.iter(|| {
+        use crate::todomvc::tachys::*;
+        use tachydom::view::Render;
+
+        let mut buf = String::new();
+        let rendered = TodoMVC(Todos::new());
+        rendered.to_html(&mut buf, &Default::default());
+        assert_eq!(
+            buf,
+            "<main><section class=\"todoapp\"><header class=\"header\"><h1>todos</h1><input placeholder=\"What needs to be done?\" autofocus=\"\" class=\"new-todo\"></header><section class=\"main hidden\"><input id=\"toggle-all\" type=\"checkbox\" class=\"toggle-all\"><label for=\"toggle-all\">Mark all as complete</label><ul class=\"todo-list\"></ul></section><footer class=\"footer hidden\"><span class=\"todo-count\"><strong>0</strong><!> items<!> left</span><ul class=\"filters\"><li><a href=\"#/\" class=\"selected selected\">All</a></li><li><a href=\"#/active\" class=\"\">Active</a></li><li><a href=\"#/completed\" class=\"\">Completed</a></li></ul><button class=\"clear-completed hidden hidden\">Clear completed</button></footer></section><footer class=\"info\"><p>Double-click to edit a todo</p><p>Created by <a href=\"http://todomvc.com\">Greg Johnston</a></p><p>Part of <a href=\"http://todomvc.com\">TodoMVC</a></p></footer></main>"
+        );
+    });
+    runtime.dispose();
 }
 
 #[bench]
 fn sycamore_todomvc_ssr(b: &mut Bencher) {
     use self::sycamore::*;
-    use ::sycamore::prelude::*;
-    use ::sycamore::*;
+    use ::sycamore::{prelude::*, *};
 
     b.iter(|| {
         _ = create_scope(|cx| {
@@ -42,8 +62,7 @@ fn sycamore_todomvc_ssr(b: &mut Bencher) {
 #[bench]
 fn yew_todomvc_ssr(b: &mut Bencher) {
     use self::yew::*;
-    use ::yew::prelude::*;
-    use ::yew::ServerRenderer;
+    use ::yew::{prelude::*, ServerRenderer};
 
     b.iter(|| {
         tokio_test::block_on(async {
@@ -60,21 +79,35 @@ fn leptos_todomvc_ssr_with_1000(b: &mut Bencher) {
         use self::leptos::*;
         use ::leptos::*;
 
-        let html = ::leptos::ssr::render_to_string(|cx| {
+        let html = ::leptos::ssr::render_to_string(|| {
             view! {
-                cx,
-                <TodoMVC todos=Todos::new_with_1000(cx)/>
+                <TodoMVC todos=Todos::new_with_1000()/>
             }
         });
         assert!(html.len() > 1);
     });
 }
 
+#[bench]
+fn tachys_todomvc_ssr_with_1000(b: &mut Bencher) {
+    use ::leptos::*;
+    let runtime = create_runtime();
+    b.iter(|| {
+        use crate::todomvc::tachys::*;
+        use tachydom::view::Render;
+
+        let mut buf = String::new();
+        let rendered = TodoMVC(Todos::new_with_1000());
+        rendered.to_html(&mut buf, &Default::default());
+        assert!(buf.len() > 20_000)
+    });
+    runtime.dispose();
+}
+
 #[bench]
 fn sycamore_todomvc_ssr_with_1000(b: &mut Bencher) {
     use self::sycamore::*;
-    use ::sycamore::prelude::*;
-    use ::sycamore::*;
+    use ::sycamore::{prelude::*, *};
 
     b.iter(|| {
         _ = create_scope(|cx| {
@@ -93,8 +126,7 @@ fn sycamore_todomvc_ssr_with_1000(b: &mut Bencher) {
 #[bench]
 fn yew_todomvc_ssr_with_1000(b: &mut Bencher) {
     use self::yew::*;
-    use ::yew::prelude::*;
-    use ::yew::ServerRenderer;
+    use ::yew::{prelude::*, ServerRenderer};
 
     b.iter(|| {
         tokio_test::block_on(async {
@@ -103,4 +135,19 @@ fn yew_todomvc_ssr_with_1000(b: &mut Bencher) {
             assert!(rendered.len() > 1);
         });
     });
-}
+}
+
+#[bench]
+fn tera_todomvc_ssr(b: &mut Bencher) {
+    use ::leptos::*;
+    let runtime = create_runtime();
+    b.iter(|| {
+        use crate::todomvc::leptos::*;
+
+        let html = ::leptos::ssr::render_to_string(|| {
+            view! { <TodoMVC todos=Todos::new()/> }
+        });
+        assert!(html.len() > 1);
+    });
+    runtime.dispose();
+}

benchmarks/src/todomvc/tachys.rs

@@ -0,0 +1,324 @@
+pub use leptos_reactive::*;
+use miniserde::*;
+use tachy_maccy::view;
+use tachydom::view::Render;
+use wasm_bindgen::JsCast;
+use web_sys::HtmlInputElement;
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub struct Todos(pub Vec<Todo>);
+
+const STORAGE_KEY: &str = "todos-leptos";
+
+impl Todos {
+    pub fn new() -> Self {
+        Self(vec![])
+    }
+
+    pub fn new_with_1000() -> Self {
+        let todos = (0..1000)
+            .map(|id| Todo::new(id, format!("Todo #{id}")))
+            .collect();
+        Self(todos)
+    }
+
+    pub fn is_empty(&self) -> bool {
+        self.0.is_empty()
+    }
+
+    pub fn add(&mut self, todo: Todo) {
+        self.0.push(todo);
+    }
+
+    pub fn remove(&mut self, id: usize) {
+        self.0.retain(|todo| todo.id != id);
+    }
+
+    pub fn remaining(&self) -> usize {
+        self.0.iter().filter(|todo| !(todo.completed)()).count()
+    }
+
+    pub fn completed(&self) -> usize {
+        self.0.iter().filter(|todo| (todo.completed)()).count()
+    }
+
+    pub fn toggle_all(&self) {
+        // if all are complete, mark them all active instead
+        if self.remaining() == 0 {
+            for todo in &self.0 {
+                if todo.completed.get() {
+                    (todo.set_completed)(false);
+                }
+            }
+        }
+        // otherwise, mark them all complete
+        else {
+            for todo in &self.0 {
+                (todo.set_completed)(true);
+            }
+        }
+    }
+
+    fn clear_completed(&mut self) {
+        self.0.retain(|todo| !todo.completed.get());
+    }
+}
+
+#[derive(Debug, PartialEq, Eq, Clone)]
+pub struct Todo {
+    pub id: usize,
+    pub title: ReadSignal<String>,
+    pub set_title: WriteSignal<String>,
+    pub completed: ReadSignal<bool>,
+    pub set_completed: WriteSignal<bool>,
+}
+
+impl Todo {
+    pub fn new(id: usize, title: String) -> Self {
+        Self::new_with_completed(id, title, false)
+    }
+
+    pub fn new_with_completed(
+        id: usize,
+        title: String,
+        completed: bool,
+    ) -> Self {
+        let (title, set_title) = create_signal(title);
+        let (completed, set_completed) = create_signal(completed);
+        Self {
+            id,
+            title,
+            set_title,
+            completed,
+            set_completed,
+        }
+    }
+
+    pub fn toggle(&self) {
+        self.set_completed
+            .update(|completed| *completed = !*completed);
+    }
+}
+
+const ESCAPE_KEY: u32 = 27;
+const ENTER_KEY: u32 = 13;
+
+pub fn TodoMVC(todos: Todos) -> impl Render {
+    let mut next_id = todos
+        .0
+        .iter()
+        .map(|todo| todo.id)
+        .max()
+        .map(|last| last + 1)
+        .unwrap_or(0);
+
+    let (todos, set_todos) = create_signal(todos);
+    provide_context(set_todos);
+
+    let (mode, set_mode) = create_signal(Mode::All);
+
+    let add_todo = move |ev: web_sys::KeyboardEvent| {
+        todo!()
+        /* let target = event_target::<HtmlInputElement>(&ev);
+        ev.stop_propagation();
+        let key_code = ev.unchecked_ref::<web_sys::KeyboardEvent>().key_code();
+        if key_code == ENTER_KEY {
+            let title = event_target_value(&ev);
+            let title = title.trim();
+            if !title.is_empty() {
+                let new = Todo::new(next_id, title.to_string());
+                set_todos.update(|t| t.add(new));
+                next_id += 1;
+                target.set_value("");
+            }
+        } */
+    };
+
+    let filtered_todos = create_memo::<Vec<Todo>>(move |_| {
+        todos.with(|todos| match mode.get() {
+            Mode::All => todos.0.to_vec(),
+            Mode::Active => todos
+                .0
+                .iter()
+                .filter(|todo| !todo.completed.get())
+                .cloned()
+                .collect(),
+            Mode::Completed => todos
+                .0
+                .iter()
+                .filter(|todo| todo.completed.get())
+                .cloned()
+                .collect(),
+        })
+    });
+
+    // effect to serialize to JSON
+    // this does reactive reads, so it will automatically serialize on any relevant change
+    create_effect(move |_| {
+        ()
+        /* if let Ok(Some(storage)) = window().local_storage() {
+            let objs = todos
+                .get()
+                .0
+                .iter()
+                .map(TodoSerialized::from)
+                .collect::<Vec<_>>();
+            let json = json::to_string(&objs);
+            if storage.set_item(STORAGE_KEY, &json).is_err() {
+                log::error!("error while trying to set item in localStorage");
+            }
+        } */
+    });
+
+    view! {
+        <main>
+            <section class="todoapp">
+                <header class="header">
+                    <h1>"todos"</h1>
+                    <input
+                        class="new-todo"
+                        placeholder="What needs to be done?"
+                        autofocus=""
+                    />
+                </header>
+                <section class="main" class:hidden=move || todos.with(|t| t.is_empty())>
+                    <input
+                        id="toggle-all"
+                        class="toggle-all"
+                        r#type="checkbox"
+                        //prop:checked=move || todos.with(|t| t.remaining() > 0)
+                        on:input=move |_| set_todos.update(|t| t.toggle_all())
+                    />
+                    <label r#for="toggle-all">"Mark all as complete"</label>
+                    <ul class="todo-list">
+                        {filtered_todos.get().into_iter().map(Todo).collect::<Vec<_>>()}
+                    </ul>
+                </section>
+                <footer class="footer" class:hidden=move || todos.with(|t| t.is_empty())>
+                    <span class="todo-count">
+                        <strong>{move || todos.with(|t| t.remaining().to_string())}</strong>
+                        {move || if todos.with(|t| t.remaining()) == 1 { " item" } else { " items" }}
+                        " left"
+                    </span>
+                    <ul class="filters">
+                        <li>
+                            <a
+                                href="#/"
+                                class="selected"
+                                class:selected=move || mode() == Mode::All
+                            >
+                                "All"
+                            </a>
+                        </li>
+                        <li>
+                            <a href="#/active" class:selected=move || mode() == Mode::Active>
+                                "Active"
+                            </a>
+                        </li>
+                        <li>
+                            <a href="#/completed" class:selected=move || mode() == Mode::Completed>
+                                "Completed"
+                            </a>
+                        </li>
+                    </ul>
+                    <button
+                        class="clear-completed hidden"
+                        class:hidden=move || todos.with(|t| t.completed() == 0)
+                        on:click=move |_| set_todos.update(|t| t.clear_completed())
+                    >
+                        "Clear completed"
+                    </button>
+                </footer>
+            </section>
+            <footer class="info">
+                <p>"Double-click to edit a todo"</p>
+                <p>"Created by " <a href="http://todomvc.com">"Greg Johnston"</a></p>
+                <p>"Part of " <a href="http://todomvc.com">"TodoMVC"</a></p>
+            </footer>
+        </main>
+    }
+}
+
+pub fn Todo(todo: Todo) -> impl Render {
+    let (editing, set_editing) = create_signal(false);
+    let set_todos = use_context::<WriteSignal<Todos>>().unwrap();
+    //let input = NodeRef::new();
+
+    let save = move |value: &str| {
+        let value = value.trim();
+        if value.is_empty() {
+            set_todos.update(|t| t.remove(todo.id));
+        } else {
+            (todo.set_title)(value.to_string());
+        }
+        set_editing(false);
+    };
+
+    view! {
+        <li class="todo" class:editing=editing class:completed=move || (todo.completed)()>
+            /* <div class="view">
+                <input class="toggle" r#type="checkbox"/>
+                <label on:dblclick=move |_| set_editing(true)>{move || todo.title.get()}</label>
+                <button
+                    class="destroy"
+                    on:click=move |_| set_todos.update(|t| t.remove(todo.id))
+                ></button>
+            </div>
+            {move || {
+                editing()
+                    .then(|| {
+                        view! {
+                            <input
+                                class="edit"
+                                class:hidden=move || !(editing)()
+                            />
+                        }
+                    })
+            }} */
+        </li>
+    }
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum Mode {
+    Active,
+    Completed,
+    All,
+}
+
+impl Default for Mode {
+    fn default() -> Self {
+        Mode::All
+    }
+}
+
+pub fn route(hash: &str) -> Mode {
+    match hash {
+        "/active" => Mode::Active,
+        "/completed" => Mode::Completed,
+        _ => Mode::All,
+    }
+}
+
+#[derive(Serialize, Deserialize)]
+pub struct TodoSerialized {
+    pub id: usize,
+    pub title: String,
+    pub completed: bool,
+}
+
+impl TodoSerialized {
+    pub fn into_todo(self) -> Todo {
+        Todo::new_with_completed(self.id, self.title, self.completed)
+    }
+}
+
+impl From<&Todo> for TodoSerialized {
+    fn from(todo: &Todo) -> Self {
+        Self {
+            id: todo.id,
+            title: todo.title.get(),
+            completed: (todo.completed)(),
+        }
+    }
+}

benchmarks/src/todomvc/tera.rs

@@ -87,7 +87,7 @@ static TEMPLATE: &str = r#"<main>
         </main>"#;
 
 #[bench]
-fn tera_todomvc(b: &mut Bencher) {
+fn tera_todomvc_ssr(b: &mut Bencher) {
     use serde::{Deserialize, Serialize};
     use tera::*;
 
@@ -127,7 +127,7 @@ fn tera_todomvc(b: &mut Bencher) {
 }
 
 #[bench]
-fn tera_todomvc_1000(b: &mut Bencher) {
+fn tera_todomvc_ssr_1000(b: &mut Bencher) {
     use serde::{Deserialize, Serialize};
     use tera::*;
 
@@ -174,4 +174,4 @@ fn tera_todomvc_1000(b: &mut Bencher) {
 
         let _ = TERA.render("template.html", &ctx).unwrap();
     });
-}
+}

docs/book/src/01_introduction.md

@@ -1,20 +1,22 @@
 # Introduction
 
-This book is intended as an introduction to the [Leptos](https://github.com/leptos-rs/leptos) Web framework. 
-It will walk through the fundamental concepts you need to build applications, 
+This book is intended as an introduction to the [Leptos](https://github.com/leptos-rs/leptos) Web framework.
+It will walk through the fundamental concepts you need to build applications,
 beginning with a simple application rendered in the browser, and building toward a
 full-stack application with server-side rendering and hydration.
 
-The guide doesn’t assume you know anything about fine-grained reactivity or the 
-details of modern Web frameworks. It does assume you are familiar with the Rust 
+The guide doesn’t assume you know anything about fine-grained reactivity or the
+details of modern Web frameworks. It does assume you are familiar with the Rust
 programming language, HTML, CSS, and the DOM and basic Web APIs.
 
-Leptos is most similar to frameworks like [Solid](https://www.solidjs.com) (JavaScript) 
-and [Sycamore](https://sycamore-rs.netlify.app/) (Rust). There are some similarities 
-to other frameworks like React (JavaScript), Svelte (JavaScript), Yew (Rust), and 
-Dioxus (Rust), so knowledge of one of those frameworks may also make it easier to 
+Leptos is most similar to frameworks like [Solid](https://www.solidjs.com) (JavaScript)
+and [Sycamore](https://sycamore-rs.netlify.app/) (Rust). There are some similarities
+to other frameworks like React (JavaScript), Svelte (JavaScript), Yew (Rust), and
+Dioxus (Rust), so knowledge of one of those frameworks may also make it easier to
 understand Leptos.
 
 You can find more detailed docs for each part of the API at [Docs.rs](https://docs.rs/leptos/latest/leptos/).
 
-**The guide is a work in progress.**
+**Important Note**: This current version of the book reflects the upcoming `0.5.0` release, which you can install as version `0.5.0`. The CodeSandbox versions of the examples still reflect `0.4` and earlier APIs and are in the process of being updated.
+
+> The source code for the book is available [here](https://github.com/leptos-rs/leptos/tree/main/docs/book). PRs for typos or clarification are always welcome.

docs/book/src/02_getting_started.md

@@ -23,13 +23,15 @@ cargo init leptos-tutorial
 `cd` into your new `leptos-tutorial` project and add `leptos` as a dependency
 
 ```bash
-cargo add leptos --features=csr,nightly
+cargo add leptos@0.5.0 --features=csr,nightly
 ```
 
-Or you can leave off `nighly` if you're using stable Rust
+> **Note**: This version of the book reflects the upcoming Leptos 0.5.0 release. The CodeSandbox examples have not yet been updated from 0.4 and earlier versions.
+
+Or you can leave off `nightly` if you're using stable Rust
 
 ```bash
-cargo add leptos --features=csr
+cargo add leptos@0.5.0 --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.
@@ -65,7 +67,7 @@ And add a simple “Hello, world!” to your `main.rs`
 use leptos::*;
 
 fn main() {
-    mount_to_body(|| view! {  <p>"Hello, world!"</p> })
+    mount_to_body(|| view! { <p>"Hello, world!"</p> })
 }
 ```
 

docs/book/src/15_global_state.md

@@ -367,7 +367,6 @@ fn GlobalStateInput() -> impl IntoView {
     // that we created in the other component
     // neither of them will cause the other to rerun
     let (name, set_name) = create_slice(
-
         // we take a slice *from* `state`
         state,
         // our getter returns a "slice" of the data

docs/book/src/SUMMARY.md

@@ -12,6 +12,7 @@
   - [Error Handling](./view/07_errors.md)
   - [Parent-Child Communication](./view/08_parent_child.md)
   - [Passing Children to Components](./view/09_component_children.md)
+  - [No Macros: The View Builder Syntax](./view/builder.md)
 - [Reactivity](./reactivity/README.md)
   - [Working with Signals](./reactivity/working_with_signals.md)
   - [Responding to Changes with `create_effect`](./reactivity/14_create_effect.md)
@@ -43,5 +44,7 @@
   - [Responses and Redirects](./server/27_response.md)
 - [Progressive Enhancement and Graceful Degradation](./progressive_enhancement/README.md)
   - [`<ActionForm/>`s](./progressive_enhancement/action_form.md)
-- [Deployment]()
+- [Deployment](./deployment.md)
+- [Appendix: How Does the Reactive System Work?](./appendix_reactive_graph.md)
 - [Appendix: Optimizing WASM Binary Size](./appendix_binary_size.md)
+- [Appendix: Some Small DX Improvements](./appendix_dx.md)

docs/book/src/appendix_dx.md

@@ -0,0 +1,49 @@
+# A Running List of Small Developer Experience Improvements
+
+## Autocompletion inside `#[component]` and `#[server]`
+
+Because of the nature of macros (they can expand from anything to anything, but only if the input is exactly correct at that instant) it can be hard for rust-analyzer to do proper autocompletion and other support.
+
+But you can tell rust-analyzer to ignore certain proc macros. For `#[component]` and `#[server]` especially, which annotate function bodies but don't actually transform anything inside the body of your function, this can be really helpful.
+
+Note that this means that rust-analyzer doesn't know about your component props, which may generate its own set of errors or warnings in the IDE.
+
+VSCode `settings.json`:
+
+```json
+"rust-analyzer.procMacro.ignored": {
+	"leptos_macro": [
+		"server",
+		"component"
+	],
+}
+```
+
+neovim with lspconfig:
+
+```lua
+require('lspconfig').rust_analyzer.setup {
+  -- Other Configs ...
+  settings = {
+    ["rust-analyzer"] = {
+      -- Other Settings ...
+      procMacro = {
+        ignored = {
+            leptos_macro = {
+                "server",
+                "component",
+            },
+        },
+      },
+    },
+  }
+}
+```
+
+Helix, in `.helix/languages.toml`:
+
+```toml
+[[language]]
+name = "rust"
+config = { procMacro = {ignored = {leptos_macro = ["component"]}}}
+```

docs/book/src/appendix_reactive_graph.md

@@ -0,0 +1,243 @@
+# Appendix: How does the Reactive System Work?
+
+You don’t need to know very much about how the reactive system actually works in order to use the library successfully. But it’s always useful to understand what’s going on behind the scenes once you start working with the framework at an advanced level.
+
+The reactive primitives you use are divided into three sets:
+
+- **Signals** (`ReadSignal`/`WriteSignal`, `RwSignal`, `Resource`, `Trigger`) Values you can actively change to trigger reactive updates.
+- **Computations** (`Memo`s) Values that depend on signals (or other computations) and derive a new reactive value through some pure computation.
+- **Effects** Observers that listen to changes in some signals or computations and run a function, causing some side effect.
+
+Derived signals are a kind of non-primitve computation: as plain closures, they simply allow you to refactor some repeated signal-based computation into a reusable function that can be called in multiple places, but they are not represented in the reactive system itself.
+
+All the other primitives actually exist in the reactive system as nodes in a reactive graph.
+
+Most of the work of the reactive system consists of propagating changes from signals to effects, possibly through some intervening memos.
+
+The assumption of the reactive system is that effects (like rendering to the DOM or making a network request) are orders of magnitude more expensive than things like updating a Rust data structure inside your app.
+
+So the **primary goal** of the reactive system is to **run effects as infrequently as possible**.
+
+Leptos does this through the construction of a reactive graph.
+
+> Leptos’s current reactive system is based heavily on the [Reactively](https://github.com/modderme123/reactively) library for JavaScript. You can read Milo’s article “[Super-Charging Fine-Grained Reactivity](https://dev.to/modderme123/super-charging-fine-grained-reactive-performance-47ph)” for an excellent account of its algorithm, as well as fine-grained reactivity in general—including some beautiful diagrams!
+
+## The Reactive Graph
+
+Signals, memos, and effects all share three characteristics:
+
+- **Value** They have a current value: either the signal’s value, or (for memos and effects) the value returned by the previous run, if any.
+- **Sources** Any other reactive primitives they depend on. (For signals, this is an empty set.)
+- **Subscribers** Any other reactive primitives that depend on them. (For effects, this is an empty set.)
+
+In reality then, signals, memos, and effects are just conventional names for one generic concept of a “node” in a reactive graph. Signals are always “root nodes,” with no sources/parents. Effects are always “leaf nodes,” with no subscribers. Memos typically have both sources and subscribers.
+
+### Simple Dependencies
+
+So imagine the following code:
+
+```rust
+// A
+let (name, set_name) = create_signal("Alice");
+
+// B
+let name_upper = create_memo(move |_| name.with(|n| n.to_uppercase()));
+
+// C
+create_effect(move |_| {
+	log!("{}", name_upper());
+});
+
+set_name("Bob");
+```
+
+You can easily imagine the reactive graph here: `name` is the only signal/origin node, the `create_effect` is the only effect/terminal node, and there’s one intervening memo.
+
+```
+A   (name)
+|
+B   (name_upper)
+|
+C   (the effect)
+```
+
+### Splitting Branches
+
+Let’s make it a little more complex.
+
+```rust
+// A
+let (name, set_name) = create_signal("Alice");
+
+// B
+let name_upper = create_memo(move |_| name.with(|n| n.to_uppercase()));
+
+// C
+let name_len = create_memo(move |_| name.len());
+
+// D
+create_effect(move |_| {
+	log!("len = {}", name_len());
+});
+
+// E
+create_effect(move |_| {
+	log!("name = {}", name_upper());
+});
+```
+
+This is also pretty straightforward: a signal source signal (`name`/`A`) divides into two parallel tracks: `name_upper`/`B` and `name_len`/`C`, each of which has an effect that depends on it.
+
+```
+ __A__
+|     |
+B     C
+|     |
+D     E
+```
+
+Now let’s update the signal.
+
+```rust
+set_name("Bob");
+```
+
+We immediately log
+
+```
+len = 3
+name = BOB
+```
+
+Let’s do it again.
+
+```rust
+set_name("Tim");
+```
+
+The log should shows
+
+```
+name = TIM
+```
+
+`len = 3` does not log again.
+
+Remember: the goal of the reactive system is to run effects as infrequently as possible. Changing `name` from `"Bob"` to `"Tim"` will cause each of the memos to re-run. But they will only notify their subscribers if their value has actually changed. `"BOB"` and `"TIM"` are different, so that effect runs again. But both names have the length `3`, so they do not run again.
+
+### Reuniting Branches
+
+One more example, of what’s sometimes called **the diamond problem**.
+
+```rust
+// A
+let (name, set_name) = create_signal("Alice");
+
+// B
+let name_upper = create_memo(move |_| name.with(|n| n.to_uppercase()));
+
+// C
+let name_len = create_memo(move |_| name.len());
+
+// D
+create_effect(move |_| {
+	log!("{} is {} characters long", name_upper(), name_len());
+});
+```
+
+What does the graph look like for this?
+
+```
+ __A__
+|     |
+B     C
+|     |
+|__D__|
+```
+
+You can see why it's called the “diamond problem.” If I’d connected the nodes with straight lines instead of bad ASCII art, it would form a diamond: two memos, each of which depend on a signal, which feed into the same effect.
+
+A naive, push-based reactive implementation would cause this effect to run twice, which would be bad. (Remember, our goal is to run effects as infrequently as we can.) For example, you could implement a reactive system such that signals and memos immediately propagate their changes all the way down the graph, through each dependency, essentially traversing the graph depth-first. In other words, updating `A` would notify `B`, which would notify `D`; then `A` would notify `C`, which would notify `D` again. This is both inefficient (`D` runs twice) and glitchy (`D` actually runs with the incorrect value for the second memo during its first run.)
+
+## Solving the Diamond Problem
+
+Any reactive implementation worth its salt is dedicated to solving this issue. There are a number of different approaches (again, [see Milo’s article](https://dev.to/modderme123/super-charging-fine-grained-reactive-performance-47ph) for an excellent overview).
+
+Here’s how ours works, in brief.
+
+A reactive node is always in one of three states:
+
+- `Clean`: it is known not to have changed
+- `Check`: it is possible it has changed
+- `Dirty`: it has definitely changed
+
+Updating a signal `Dirty` marks that signal `Dirty`, and marks all its descendants `Check`, recursively. Any of its descendants that are effects are added to a queue to be re-run.
+
+```
+    ____A (DIRTY)___
+   |               |
+B (CHECK)    C (CHECK)
+   |               |
+   |____D (CHECK)__|
+```
+
+Now those effects are run. (All of the effects will be marked `Check` at this point.) Before re-running its computation, the effect checks its parents to see if they are dirty. So
+
+- So `D` goes to `B` and checks if it is `Dirty`.
+- But `B` is also marked `Check`. So `B` does the same thing:
+  - `B` goes to `A`, and finds that it is `Dirty`.
+  - This means `B` needs to re-run, because one of its sources has changed.
+  - `B` re-runs, generating a new value, and marks itself `Clean`
+  - Because `B` is a memo, it then checks its prior value against the new value.
+  - If they are the same, `B` returns "no change." Otherwise, it returns "yes, I changed."
+- If `B` returned “yes, I changed,” `D` knows that it definitely needs to run and re-runs immediately before checking any other sources.
+- If `B` returned “no, I didn’t change,” `D` continues on to check `C` (see process above for `B`.)
+- If neither `B` nor `C` has changed, the effect does not need to re-run.
+- If either `B` or `C` did change, the effect now re-runs.
+
+Because the effect is only marked `Check` once and only queued once, it only runs once.
+
+If the naive version was a “push-based” reactive system, simply pushing reactive changes all the way down the graph and therefore running the effect twice, this version could be called “push-pull.” It pushes the `Check` status all the way down the graph, but then “pulls” its way back up. In fact, for large graphs it may end up bouncing back up and down and left and right on the graph as it tries to determine exactly which nodes need to re-run.
+
+**Note this important trade-off**: Push-based reactivity propagates signal changes more quickly, at the expense of over-re-running memos and effects. Remember: the reactive system is designed to minimize how often you re-run effects, on the (accurate) assumption that side effects are orders of magnitude more expensive than this kind of cache-friendly graph traversal happening entirely inside the library’s Rust code. The measurement of a good reactive system is not how quickly it propagates changes, but how quickly it propagates changes _without over-notifying_.
+
+## Memos vs. Signals
+
+Note that signals always notify their children; i.e., a signal is always marked `Dirty` when it updates, even if its new value is the same as the old value. Otherwise, we’d have to require `PartialEq` on signals, and this is actually quite an expensive check on some types. (For example, add an unnecessary equality check to something like `some_vec_signal.update(|n| n.pop())` when it’s clear that it has in fact changed.)
+
+Memos, on the other hand, check whether they change before notifying their children. They only run their calculation once, no matter how many times you `.get()` the result, but they run whenever their signal sources change. This means that if the memo’s computation is _very_ expensive, you may actually want to memoize its inputs as well, so that the memo only re-calculates when it is sure its inputs have changed.
+
+## Memos vs. Derived Signals
+
+All of this is cool, and memos are pretty great. But most actual applications have reactive graphs that are quite shallow and quite wide: you might have 100 source signals and 500 effects, but no memos or, in rare case, three or four memos between the signal and the effect. Memos are extremely good at what they do: limiting how often they notify their subscribers that they have changed. But as this description of the reactive system should show, they come with overhead in two forms:
+
+1. A `PartialEq` check, which may or may not be expensive.
+2. Added memory cost of storing another node in the reactive system.
+3. Added computational cost of reactive graph traversal.
+
+In cases in which the computation itself is cheaper than this reactive work, you should avoid “over-wrapping” with memos and simply use derived signals. Here’s a great example in which you should never use a memo:
+
+```rust
+let (a, set_a) = create_signal(1);
+// none of these make sense as memos
+let b = move || a() + 2;
+let c = move || b() % 2 == 0;
+let d = move || if c() { "even" } else { "odd" };
+
+set_a(2);
+set_a(3);
+set_a(5);
+```
+
+Even though memoizing would technically save an extra calculation of `d` between setting `a` to `3` and `5`, these calculations are themselves cheaper than the reactive algorithm.
+
+At the very most, you might consider memoizing the final node before running some expensive side effect:
+
+```rust
+let text = create_memo(move |_| {
+    d()
+});
+create_effect(move |_| {
+    engrave_text_into_bar_of_gold(&text());
+});
+```

docs/book/src/async/10_resources.md

@@ -18,7 +18,7 @@ let async_data = create_resource(
     count,
     // every time `count` changes, this will run
     |value| async move {
-        log!("loading data from API");
+        logging::log!("loading data from API");
         load_data(value).await
     },
 );

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

@@ -4,7 +4,7 @@ In the previous chapter, we showed how you can create a simple loading screen to
 
 ```rust
 let (count, set_count) = create_signal(0);
-let a = create_resource(count, |count| async move { load_a(count).await });
+let once = create_resource(count, |count| async move { load_a(count).await });
 
 view! {
     <h1>"My Data"</h1>
@@ -69,6 +69,34 @@ Every time one of the resources is reloading, the `"Loading..."` fallback will s
 
 This inversion of the flow of control makes it easier to add or remove individual resources, as you don’t need to handle the matching yourself. It also unlocks some massive performance improvements during server-side rendering, which we’ll talk about during a later chapter.
 
+## `<Await/>`
+
+In you’re simply trying to wait for some `Future` to resolve before rendering, you may find the `<Await/>` component helpful in reducing boilerplate. `<Await/>` essentially combines a resource with the source argument `|| ()` with a `<Suspense/>` with no fallback.
+
+In other words:
+
+1. It only polls the `Future` once, and does not respond to any reactive changes.
+2. It does not render anything until the `Future` resolves.
+3. After the `Future` resolves, its binds its data to whatever variable name you choose and then renders its children with that variable in scope.
+
+```rust
+async fn fetch_monkeys(monkey: i32) -> i32 {
+    // maybe this didn't need to be async
+    monkey * 2
+}
+view! {
+    <Await
+        // `future` provides the `Future` to be resolved
+        future=|| fetch_monkeys(3)
+        // the data is bound to whatever variable name you provide
+        let:data
+    >
+        // you receive the data by reference and can use it in your view here
+        <p>{*data} " little monkeys, jumping on the bed."</p>
+    </Await>
+}
+```
+
 [Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/11-suspense-907niv?file=%2Fsrc%2Fmain.rs)
 
 <iframe src="https://codesandbox.io/p/sandbox/11-suspense-907niv?file=%2Fsrc%2Fmain.rs" width="100%" height="1000px" style="max-height: 100vh"></iframe>

docs/book/src/deployment.md

@@ -0,0 +1,74 @@
+# Deployment
+
+There are as many ways to deploy a web application as there are developers, let alone applications. But there are a couple useful tips to keep in mind when deploying an app.
+
+## General Advice
+
+1. Remember: Always deploy Rust apps built in `--release` mode, not debug mode. This has a huge effect on both performance and binary size.
+2. Test locally in release mode as well. The framework applies certain optimizations in release mode that it does not apply in debug mode, so it’s possible for bugs to surface at this point. (If your app behaves differently or you do encounter a bug, it’s likely a framework-level bug and you should open a GitHub issue with a reproduction.)
+
+> We asked users to submit their deployment setups to help with this chapter. I’ll quote from them below, but you can read the full thread [here](https://github.com/leptos-rs/leptos/issues/1152).
+
+## Deploying a Client-Side-Rendered App
+
+If you’ve been building an app that only uses client-side rendering, working with Trunk as a dev server and build tool, the process is quite easy.
+
+```bash
+trunk build --release
+```
+
+`trunk build` will create a number of build artifacts in a `dist/` directory. Publishing `dist` somewhere online should be all you need to deploy your app. This should work very similarly to deploying any JavaScript application.
+
+> Read more: [Deploying to Vercel with GitHub Actions](https://github.com/leptos-rs/leptos/issues/1152#issuecomment-1577861900).
+
+## Deploying a Full-Stack App
+
+The most popular way for people to deploy full-stack apps built with `cargo-leptos` is to use a cloud hosting service that supports deployment via a Docker build. Here’s a sample `Dockerfile`, which is based on the one we use to deploy the Leptos website.
+
+```dockerfile
+# Get started with a build env with Rust nightly
+FROM rustlang/rust:nightly-bullseye as builder
+
+# If you’re using stable, use this instead
+# FROM rust:1.70-bullseye as builder
+
+# Install cargo-binstall, which makes it easier to install other
+# cargo extensions like cargo-leptos
+RUN wget https://github.com/cargo-bins/cargo-binstall/releases/latest/download/cargo-binstall-x86_64-unknown-linux-musl.tgz
+RUN tar -xvf cargo-binstall-x86_64-unknown-linux-musl.tgz
+RUN cp cargo-binstall /usr/local/cargo/bin
+
+# Install cargo-leptos
+RUN cargo binstall cargo-leptos -y
+
+# Add the WASM target
+RUN rustup target add wasm32-unknown-unknown
+
+# Make an /app dir, which everything will eventually live in
+RUN mkdir -p /app
+WORKDIR /app
+COPY . .
+
+# Build the app
+RUN cargo leptos build --release -vv
+
+FROM rustlang/rust:nightly-bullseye as runner
+# Copy the server binary to the /app directory
+COPY --from=builder /app/target/server/release/leptos_start /app/
+# /target/site contains our JS/WASM/CSS, etc.
+COPY --from=builder /app/target/site /app/site
+# Copy Cargo.toml if it’s needed at runtime
+COPY --from=builder /app/Cargo.toml /app/
+WORKDIR /app
+
+# Set any required env variables and
+ENV RUST_LOG="info"
+ENV APP_ENVIRONMENT="production"
+ENV LEPTOS_SITE_ADDR="0.0.0.0:8080"
+ENV LEPTOS_SITE_ROOT="site"
+EXPOSE 8080
+# Run the server
+CMD ["/app/leptos_start"]
+```
+
+> Read more: [`gnu` and `musl` build files for Leptos apps](https://github.com/leptos-rs/leptos/issues/1152#issuecomment-1634916088).

docs/book/src/interlude_projecting_children.md

@@ -50,7 +50,6 @@ If you want to really understand the issue here, it may help to look at the expa
 
 ```rust
 Suspense(
-
     ::leptos::component_props_builder(&Suspense)
         .fallback(|| ())
         .children({
@@ -61,7 +60,6 @@ Suspense(
                     leptos::Fragment::lazy(|| {
                         vec![
                             (Show(
-
                                 ::leptos::component_props_builder(&Show)
                                     .when(|| true)
 									// but fallback is moved into Show here
@@ -91,7 +89,7 @@ We can solve this problem by using the [`store_value`](https://docs.rs/leptos/la
 In this case, it’s really simple:
 
 ```rust
-pub fn LoggedIn<F, IV>(F, children: ChildrenFn) -> impl IntoView
+pub fn LoggedIn<F, IV>(fallback: F, children: ChildrenFn) -> impl IntoView
 where
     F: Fn() -> IV + 'static,
     IV: IntoView,

docs/book/src/metadata.md

@@ -30,13 +30,13 @@ There’s a very simple way to determine whether you should use a capital-S `<Sc
 
 There are even a couple elements designed to make semantic HTML and styling easier. [`<Html/>`](https://docs.rs/leptos_meta/latest/leptos_meta/fn.Html.html) lets you set the `lang` and `dir` on your `<html>` tag from your application code. `<Html/>` and [`<Body/>`](https://docs.rs/leptos_meta/latest/leptos_meta/fn.Html.html) both have `class` props that let you set their respective `class` attributes, which is sometimes needed by CSS frameworks for styling.
 
-`<Body/>` and `<Html/>` both also have `attributes` props which can be used to set any number of additional attributes on them via the [`AdditionalAttributes`](https://docs.rs/leptos/latest/leptos/struct.AdditionalAttributes.html) type:
+`<Body/>` and `<Html/>` both also have `attributes` props which can be used to set any number of additional attributes on them via the `attr:` syntax:
 
 ```rust
 <Html
 	lang="he"
 	dir="rtl"
-	attributes=AdditionalAttributes::from(vec![("data-theme", "dark")])
+	attr:data-theme="dark"
 />
 ```
 

docs/book/src/reactivity/14_create_effect.md

@@ -50,7 +50,6 @@ let (use_last, set_use_last) = create_signal(true);
 // any time one of the source signals changes
 create_effect(move |_| {
     log(
-
         if use_last() {
             format!("{} {}", first(), last())
         } else {
@@ -109,6 +108,33 @@ create_effect(move |prev_value| {
 
 Every time `count` is updated, this effect wil rerun. This is what allows reactive, fine-grained updates to the DOM.
 
+## Explicit, Cancelable Tracking with `watch`
+
+In addition to `create_effect`, Leptos provides a [`watch`](https://docs.rs/leptos_reactive/latest/leptos_reactive/fn.watch.html) function, which can be used for two main purposes:
+
+1. Separating tracking and responding to changes by explicitly passing in a set of values to track.
+2. Canceling tracking by calling a stop function.
+
+Like `create_resource`, `watch` takes a first argument, which is reactively tracked, and a second, which is not. Whenever a reactive value in its `deps` argument is changed, the `callback` is run. `watch` returns a function that can be called to stop tracking the dependencies.
+
+```rust
+let (num, set_num) = create_signal(0);
+
+let stop = watch(
+    move || num.get(),
+    move |num, prev_num, _| {
+        log::debug!("Number: {}; Prev: {:?}", num, prev_num);
+    },
+    false,
+);
+
+set_num.set(1); // > "Number: 1; Prev: Some(0)"
+
+stop(); // stop watching
+
+set_num.set(2); // (nothing happens)
+```
+
 [Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/serene-thompson-40974n?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A2%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A2%7D%5D)
 
 <iframe src="https://codesandbox.io/p/sandbox/serene-thompson-40974n?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A2%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A2%7D%5D" width="100%" height="1000px" style="max-height: 100vh"></iframe>

docs/book/src/reactivity/interlude_functions.md

@@ -20,7 +20,7 @@ let text = move || if count_is_odd() {
 // an effect automatically tracks the signals it depends on
 // and reruns when they change
 create_effect(move |_| {
-    log!("text = {}", text());
+    logging::log!("text = {}", text());
 });
 
 view! {

docs/book/src/reactivity/working_with_signals.md

@@ -16,7 +16,7 @@ Calling a `ReadSignal` as a function is syntax sugar for `.get()`. Calling a `Wr
 ```rust
 let (count, set_count) = create_signal(0);
 set_count(1);
-log!(count());
+logging::log!(count());
 ```
 
 is the same as
@@ -24,7 +24,7 @@ is the same as
 ```rust
 let (count, set_count) = create_signal(0);
 set_count.set(1);
-log!(count.get());
+logging::log!(count.get());
 ```
 
 You might notice that `.get()` and `.set()` can be implemented in terms of `.with()` and `.update()`. In other words, `count.get()` is identical with `count.with(|n| n.clone())`, and `count.set(1)` is implemented by doing `count.update(|n| *n = 1)`.
@@ -63,7 +63,35 @@ if names.with(Vec::is_empty) {
 }
 ```
 
-After all, `.with()` simply takes a function that takes the value by reference. Since `Vec::is_empty` takes `&self`, we can pass it in directly and avoid the unncessary closure.
+After all, `.with()` simply takes a function that takes the value by reference. Since `Vec::is_empty` takes `&self`, we can pass it in directly and avoid the unnecessary closure.
+
+There are some helper macros to make using `.with()` and `.update()` easier to use, especially when using multiple signals.
+
+```rust
+let (first, _) = create_signal("Bob".to_string());
+let (middle, _) = create_signal("J.".to_string());
+let (last, _) = create_signal("Smith".to_string());
+```
+
+If you wanted to concatenate these 3 signals together without unnecessary cloning, you would have to write something like:
+
+```rust
+let name = move || {
+	first.with(|first| {
+		middle.with(|middle| last.with(|last| format!("{first} {middle} {last}")))
+	})
+};
+```
+
+Which is very long and annoying to write.
+
+Instead, you can use the `with!` macro to get references to all the signals at the same time.
+
+```rust
+let name = move || with!(|first, middle, last| format!("{first} {middle} {last}"));
+```
+
+This expands to the same thing as above. Take a look at the `with!` docs for more info, and the corresponding macros `update!`, `with_value!` and `update_value!`.
 
 ## Making signals depend on each other
 
@@ -80,8 +108,8 @@ let memoized_double_count = create_memo(move |_| count() * 2);
 ```
 
 > For guidance on whether to use a derived signal or a memo, see the docs for [`create_memo`](https://docs.rs/leptos/latest/leptos/fn.create_memo.html)
->
-> **2) C is a function of A and some other thing B.** Create signals for A and B and a derived signal or memo for C.
+
+**2) C is a function of A and some other thing B.** Create signals for A and B and a derived signal or memo for C.
 
 ```rust
 let (first_name, set_first_name) = create_signal("Bridget".to_string());

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

@@ -94,10 +94,51 @@ The `view` is a function that returns a view. Any component with no props works
 </Routes>
 ```
 
-> `view` takes a `Fn(Scope) -> impl IntoView`. If a component has no props, it is a function that takes `Scope` and returns `impl IntoView`, so it can be passed directly into the `view`. In this case, `view=Home` is just a shorthand for `|cx| view! { cx, <Home/> }`.
+> `view` takes a `Fn() -> impl IntoView`. If a component has no props, it can be passed directly into the `view`. In this case, `view=Home` is just a shorthand for `|| view! { <Home/> }`.
 
 Now if you navigate to `/` or to `/users` you’ll get the home page or the `<Users/>`. If you go to `/users/3` or `/blahblah` you’ll get a user profile or your 404 page (`<NotFound/>`). On every navigation, the router determines which `<Route/>` should be matched, and therefore what content should be displayed where the `<Routes/>` component is defined.
 
 Note that you can define your routes in any order. The router scores each route to see how good a match it is, rather than simply trying to match them top to bottom.
 
 Simple enough?
+
+## Conditional Routes
+
+`leptos_router` is based on the assumption that you have one and only one `<Routes/>` component in your app. It uses this to generate routes on the server side, optimize route matching by caching calculated branches, and render your application.
+
+You should not conditionally render `<Routes/>` using another component like `<Show/>` or `<Suspense/>`.
+
+```rust
+// ❌ don't do this!
+view! {
+  <Show when=|| is_loaded() fallback=|| view! { <p>"Loading"</p> }>
+    <Routes>
+      <Route path="/" view=Home/>
+    </Routes>
+  </Show>
+}
+```
+
+Instead, you can use nested routing to render your `<Routes/>` once, and conditionally render the router outlet:
+
+```rust
+// ✅ do this instead!
+view! {
+  <Routes>
+    // parent route
+    <Route path="/" view=move || {
+      view! {
+        // only show the outlet if data have loaded
+        <Show when=|| is_loaded() fallback=|| view! { <p>"Loading"</p> }>
+          <Outlet/>
+        </Show>
+      }
+    }>
+      // nested child route
+      <Route path="/" view=Home/>
+    </Route>
+  </Routes>
+}
+```
+
+If this looks bizarre, don’t worry! The next section of the book is about this kind of nested routing.

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

@@ -96,7 +96,7 @@ You can easily define this with nested routes
 <Routes>
   <Route path="/contacts" view=ContactList>
     <Route path=":id" view=ContactInfo/>
-    <Route path="" view=|cx| view! { cx,
+    <Route path="" view=|| view! {
       <p>"Select a contact to view more info."</p>
     }/>
   </Route>
@@ -143,8 +143,8 @@ pub fn ContactList() -> impl IntoView {
       // the contact list
       <For each=contacts
         key=|contact| contact.id
-        view=|contact| todo!()
-      >
+        children=|contact| todo!()
+      />
       // the nested child, if any
       // don’t forget this!
       <Outlet/>
@@ -153,6 +153,43 @@ pub fn ContactList() -> impl IntoView {
 }
 ```
 
+## Refactoring Route Definitions
+
+You don’t need to define all your routes in one place if you don’t want to. You can refactor any `<Route/>` and its children out into a separate component.
+
+For example, you can refactor the example above to use two separate components:
+
+```rust
+#[component]
+fn App() -> impl IntoView {
+  view! {
+    <Router>
+      <Routes>
+        <Route path="/contacts" view=ContactList>
+          <ContactInfoRoutes/>
+          <Route path="" view=|| view! {
+            <p>"Select a contact to view more info."</p>
+          }/>
+        </Route>
+      </Routes>
+    </Router>
+  }
+}
+
+#[component(transparent)]
+fn ContactInfoRoutes() -> impl IntoView {
+  view! {
+    <Route path=":id" view=ContactInfo>
+      <Route path="" view=EmailAndPhone/>
+      <Route path="address" view=Address/>
+      <Route path="messages" view=Messages/>
+    </Route>
+  }
+}
+```
+
+This second component is a `#[component(transparent)]`, meaning it just returns its data, not a view: in this case, it's a [`RouteDefinition`](https://docs.rs/leptos_router/latest/leptos_router/struct.RouteDefinition.html) struct, which is what the `<Route/>` returns. As long as it is marked `#[component(transparent)]`, this sub-route can be defined wherever you want, and inserted as a component into your tree of route definitions.
+
 ## Nested Routing and Performance
 
 All of this is nice, conceptually, but again—what’s the big deal?
@@ -205,7 +242,7 @@ fn App() -> impl IntoView {
                       >
                         // if no id specified, fall back
                         <Route path=":id" view=ContactInfo>
-                            <Route path="" view=|cx| view! { cx,
+                            <Route path="" view=|| view! {
                                 <div class="tab">
                                     "(Contact Info)"
                                 </div>

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

@@ -120,7 +120,7 @@ fn App() -> impl IntoView {
                     >
                         // if no id specified, fall back
                         <Route path=":id" view=ContactInfo>
-                            <Route path="" view=|cx| view! { cx,
+                            <Route path="" view=|| view! {
                                 <div class="tab">
                                     "(Contact Info)"
                                 </div>

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

@@ -18,6 +18,21 @@ The router also provides an [`<A>`](https://docs.rs/leptos_router/latest/leptos_
 1. Correctly resolves relative nested routes. Relative routing with ordinary `<a>` tags can be tricky. For example, if you have a route like `/post/:id`, `<A href="1">` will generate the correct relative route, but `<a href="1">` likely will not (depending on where it appears in your view.) `<A/>` resolves routes relative to the path of the nested route within which it appears.
 2. Sets the `aria-current` attribute to `page` if this link is the active link (i.e., it’s a link to the page you’re on). This is helpful for accessibility and for styling. For example, if you want to set the link a different color if it’s a link to the page you’re currently on, you can match this attribute with a CSS selector.
 
+## Navigating Programmatically
+
+Your most-used methods of navigating between pages should be with `<a>` and `<form>` elements or with the enhanced `<A/>` and `<Form/>` components. Using links and forms to navigate is the best solution for accessibility and graceful degradation.
+
+On occasion, though, you’ll want to navigate programmatically, i.e., call a function that can navigate to a new page. In that case, you should use the [`use_navigate`](https://docs.rs/leptos_router/latest/leptos_router/fn.use_navigate.html) function.
+
+```rust
+let navigate = leptos_router::use_navigate();
+navigate("/somewhere", Default::default());
+```
+
+> You should almost never do something like `<button on:click=move |_| navigate(/* ... */)>`. Any `on:click` that navigates should be an `<a>`, for reasons of accessibility.
+
+The second argument here is a set of [`NavigateOptions`](https://docs.rs/leptos_router/latest/leptos_router/struct.NavigateOptions.html), which includes options to resolve the navigation relative to the current route as the `<A/>` component does, replace it in the navigation stack, include some navigation state, and maintain the current scroll state on navigation.
+
 > Once again, this is the same example. Check out the relative `<A/>` components, and take a look at the CSS in `index.html` to see the ARIA-based styling.
 
 [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)
@@ -58,7 +73,7 @@ fn App() -> impl IntoView {
                     >
                         // if no id specified, fall back
                         <Route path=":id" view=ContactInfo>
-                            <Route path="" view=|cx| view! { cx,
+                            <Route path="" view=|| view! {
                                 <div class="tab">
                                     "(Contact Info)"
                                 </div>

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

@@ -33,7 +33,6 @@ pub async fn add_todo(title: String) -> Result<(), ServerFnError> {
 #[component]
 pub fn BusyButton() -> impl IntoView {
 	view! {
-
         <button on:click=move |_| {
             spawn_local(async {
                 add_todo("So much to do!".to_string()).await;
@@ -70,6 +69,18 @@ There are a few things to note about the way you define a server function, too.
 - We provide the macro a path. This is a prefix for the path at which we’ll mount a server function handler on our server. (See examples for [Actix](https://github.com/leptos-rs/leptos/blob/main/examples/todo_app_sqlite/src/main.rs#L44) and [Axum](https://github.com/leptos-rs/leptos/blob/598523cd9d0d775b017cb721e41ebae9349f01e2/examples/todo_app_sqlite_axum/src/main.rs#L51).)
 - You’ll need to have `serde` as a dependency with the `derive` featured enabled for the macro to work properly. You can easily add it to `Cargo.toml` with `cargo add serde --features=derive`.
 
+## Server Function URL Prefixes
+
+You can optionally define a specific URL prefix to be used in the definition of the server function.
+This is done by providing an optional 2nd argument to the `#[server]` macro.
+By default the URL prefix will be `/api`, if not specified.
+Here are some examples:
+
+```rust
+#[server(AddTodo)]         // will use the default URL prefix of `/api`
+#[server(AddTodo, "/foo")] // will use the URL prefix of `/foo`
+```
+
 ## Server Function Encodings
 
 By default, the server function call is a `POST` request that serializes the arguments as URL-encoded form data in the body of the request. (This means that server functions can be called from HTML forms, which we’ll see in a future chapter.) But there are a few other methods supported. Optionally, we can provide another argument to the `#[server]` macro to specify an alternate encoding:
@@ -105,6 +116,21 @@ In other words, you have two choices:
 >
 > 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.
 
+
+## Server Functions Endpoint Paths
+
+By default, a unique path will be generated. You can optionally define a specific endpoint path to be used in the URL. This is done by providing an optional 4th argument to the `#[server]` macro. Leptos will generate the complete path by concatenating the URL prefix (2nd argument) and the endpoint path (4th argument).
+For example,
+
+```rust
+#[server(MyServerFnType, "/api", "Url", "hello")]
+```
+will generate a server function endpoint at `/api/hello` that accepts a POST request.
+
+> **Can I use the same server function endpoint path with multiple encodings?**
+>
+> No. Different server functions must have unique paths. The `#[server]` macro automatically generates unique paths, but you need to be careful if you choose to specify the complete path manually, as the server looks up server functions by their path.
+
 ## 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,7 +62,21 @@ pub async fn axum_extract() -> 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).
+The Axum `extract` function only supports extractors for which the state is `()`. If you need an extractor that uses `State`, you should use [`extract_with_state`](https://docs.rs/leptos_axum/latest/leptos_axum/fn.extract_with_state.html). This requires you to provide the state. You can do this by extending the existing `LeptosOptions` state using the Axum `FromRef` pattern, which providing the state as context during render and server functions with custom handlers.
+
+```rust
+use axum::extract::FromRef;
+
+/// Derive FromRef to allow multiple items in state, using Axum’s
+/// SubStates pattern.
+#[derive(FromRef, Debug, Clone)]
+pub struct AppState{
+    pub leptos_options: LeptosOptions,
+    pub pool: SqlitePool
+}
+```
+
+[Click here for an example of providing context in custom handlers](https://github.com/leptos-rs/leptos/blob/19ea6fae6aec2a493d79cc86612622d219e6eebb/examples/session_auth_axum/src/main.rs#L24-L44).
 
 ## A Note about Data-Loading Patterns
 

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

@@ -35,7 +35,6 @@ Here’s a simplified example from our [`session_auth_axum` example](https://git
 ```rust
 #[server(Login, "/api")]
 pub async fn login(
-
     username: String,
     password: String,
     remember: Option<String>,

docs/book/src/ssr/23_ssr_modes.md

@@ -8,12 +8,12 @@ If you’ve ever listened to streaming music or watched a video online, I’m su
 
 Let me say a little more about what I mean.
 
-Leptos supports all four different modes of rendering HTML that includes asynchronous data:
+Leptos supports all the major ways of rendering HTML that includes asynchronous data:
 
 1. [Synchronous Rendering](#synchronous-rendering)
 1. [Async Rendering](#async-rendering)
 1. [In-Order streaming](#in-order-streaming)
-1. [Out-of-Order Streaming](#out-of-order-streaming)
+1. [Out-of-Order Streaming](#out-of-order-streaming) (and a partially-blocked variant)
 
 ## Synchronous Rendering
 
@@ -67,7 +67,7 @@ If you’re using server-side rendering, the synchronous mode is almost never wh
   - Able to show the fallback loading state and dynamically replace it, instead of showing blank sections for un-loaded data.
 - _Cons_: Requires JavaScript to be enabled for suspended fragments to appear in correct order. (This small chunk of JS streamed down in a `<script>` tag alongside the `<template>` tag that contains the rendered `<Suspense/>` fragment, so it does not need to load any additional JS files.)
 
-5. **Partially-blocked streaming**: “Partially-blocked” streaming is useful when you have multiple separate `<Suspense/>` components on the page. If one of them reads from one or more “blocking resources” (see below), the fallback will not be sent; rather, the server will wait until that `<Suspense/>` has resolved and then replace the fallback with the resolved fragment on the server, which means that it is included in the initial HTML response and appears even if JavaScript is disabled or not supported. Other `<Suspense/>` stream in out of order as usual.
+5. **Partially-blocked streaming**: “Partially-blocked” streaming is useful when you have multiple separate `<Suspense/>` components on the page.  It is triggered by setting `ssr=SsrMode::PartiallyBlocked` on a route, and depending on blocking resources within the view.   If one of the `<Suspense/>` components reads from one or more “blocking resources” (see below), the fallback will not be sent; rather, the server will wait until that `<Suspense/>` has resolved and then replace the fallback with the resolved fragment on the server, which means that it is included in the initial HTML response and appears even if JavaScript is disabled or not supported. Other `<Suspense/>` stream in out of order, similar to the `SsrMode::OutOfOrder` default.
 
 This is useful when you have multiple `<Suspense/>` on the page, and one is more important than the other: think of a blog post and comments, or product information and reviews. It is _not_ useful if there’s only one `<Suspense/>`, or if every `<Suspense/>` reads from blocking resources. In those cases it is a slower form of `async` rendering.
 
@@ -134,4 +134,23 @@ pub fn BlogPost() -> impl IntoView {
 }
 ```
 
-The first `<Suspense/>`, with the body of the blog post, will block my HTML stream, because it reads from a blocking resource. The second `<Suspense/>`, with the comments, will not block the stream. Blocking resources gave me exactly the power and granularity I needed to optimize my page for SEO and user experience.
+The first `<Suspense/>`, with the body of the blog post, will block my HTML stream, because it reads from a blocking resource.  Meta tags and other head elements awaiting the blocking resource will be rendered before the stream is sent.
+
+Combined with the following route definition, which uses `SsrMode::PartiallyBlocked`, the blocking resource will be fully rendered on the server side, making it accessible to users who disable WebAssembly or JavaScript.
+
+```rust
+<Routes>
+	// We’ll load the home page with out-of-order streaming and <Suspense/>
+	<Route path="" view=HomePage/>
+
+	// We'll load the posts with async rendering, so they can set
+	// the title and metadata *after* loading the data
+	<Route
+		path="/post/:id"
+		view=Post
+		ssr=SsrMode::PartiallyBlocked
+	/>
+</Routes>
+```
+
+The second `<Suspense/>`, with the comments, will not block the stream. Blocking resources gave me exactly the power and granularity I needed to optimize my page for SEO and user experience.

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

@@ -9,7 +9,7 @@ Put a log somewhere in your root component. (I usually call mine `<App/>`, but a
 ```rust
 #[component]
 pub fn App() -> impl IntoView {
-	leptos::log!("where do I run?");
+	logging::log!("where do I run?");
 	// ... whatever
 }
 ```
@@ -87,43 +87,6 @@ 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() -> impl IntoView {
-    let (loaded, set_loaded) = create_signal(false);
-
-    // create_effect only runs on the client
-    create_effect(move |_| {
-        // do something like reading from localStorage
-        set_loaded(true);
-    });
-
-    move || {
-        if loaded() {
-            view! { <p>"Hello, world!"</p> }.into_any()
-        } else {
-            view! { <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.
@@ -166,7 +129,7 @@ For example, say that I want to store something in the browser’s `localStorage
 pub fn App() -> impl IntoView {
     use gloo_storage::Storage;
 	let storage = gloo_storage::LocalStorage::raw();
-	leptos::log!("{storage:?}");
+	logging::log!("{storage:?}");
 }
 ```
 
@@ -180,7 +143,7 @@ pub fn App() -> impl IntoView {
     use gloo_storage::Storage;
     create_effect(move |_| {
         let storage = gloo_storage::LocalStorage::raw();
-		leptos::log!("{storage:?}");
+		logging::log!("{storage:?}");
     });
 }
 ```

docs/book/src/testing.md

@@ -37,7 +37,7 @@ impl Todos {
 #[cfg(test)]
 mod tests {
     #[test]
-    fn test_remaining {
+    fn test_remaining() {
         // ...
     }
 }
@@ -53,87 +53,38 @@ pub fn TodoApp() -> impl IntoView {
 In general, the less of your logic is wrapped into your components themselves, the
 more idiomatic your code will feel and the easier it will be to test.
 
-## 2. Test components with `wasm-bindgen-test`
+## 2. Test components with end-to-end (`e2e`) testing
 
-[`wasm-bindgen-test`](https://crates.io/crates/wasm-bindgen-test) is a great utility
-for integrating or end-to-end testing WebAssembly apps in a headless browser.
+Our [`examples`](https://github.com/leptos-rs/leptos/tree/main/examples) directory has several examples with extensive end-to-end testing, using different testing tools.
 
-To use this testing utility, you need to add `wasm-bindgen-test` to your `Cargo.toml`:
+The easiest way to see how to use these is to take a look at the test examples themselves:
 
-```toml
-[dev-dependencies]
-wasm-bindgen-test = "0.3.0"
-```
+### `wasm-bindgen-test` with [`counter`](https://github.com/leptos-rs/leptos/blob/main/examples/counter/tests/web.rs)
 
-You should create tests in a separate `tests` directory. You can then run your tests in the browser of your choice:
+This is a fairly simple manual testing setup that uses the [`wasm-pack test`](https://rustwasm.github.io/wasm-pack/book/commands/test.html) command.
 
-```bash
-wasm-pack test --firefox
-```
+#### Sample Test
 
-> To see the full setup, check out the tests for the [`counter`](https://github.com/leptos-rs/leptos/tree/main/examples/counter) example.
-
-### Writing Your Tests
-
-Most tests will involve some combination of vanilla DOM manipulation and comparison to a `view`. For example, here’s a test [for the
-`counter` example](https://github.com/leptos-rs/leptos/blob/main/examples/counter/tests/web.rs).
-
-First, we set up the testing environment.
-
-```rust
-use wasm_bindgen_test::*;
-use counter::*;
-use leptos::*;
-use web_sys::HtmlElement;
-
-// tell the test runner to run tests in the browser
-wasm_bindgen_test_configure!(run_in_browser);
-```
-
-I’m going to create a simpler wrapper for each test case, and mount it there.
-This makes it easy to encapsulate the test results.
-
-```rust
-// like marking a regular test with #[test]
+````rust
 #[wasm_bindgen_test]
 fn clear() {
     let document = leptos::document();
     let test_wrapper = document.create_element("section").unwrap();
-    document.body().unwrap().append_child(&test_wrapper);
+    let _ = document.body().unwrap().append_child(&test_wrapper);
 
-    // start by rendering our counter and mounting it to the DOM
-    // note that we start at the initial value of 10
     mount_to(
         test_wrapper.clone().unchecked_into(),
         || view! { <SimpleCounter initial_value=10 step=1/> },
     );
-}
-```
 
-We’ll use some manual DOM operations to grab the `<div>` that wraps
-the whole component, as well as the `clear` button.
+    let div = test_wrapper.query_selector("div").unwrap().unwrap();
+    let clear = test_wrapper
+        .query_selector("button")
+        .unwrap()
+        .unwrap()
+        .unchecked_into::<web_sys::HtmlElement>();
 
-```rust
-// now we extract the buttons by iterating over the DOM
-// this would be easier if they had IDs
-let div = test_wrapper.query_selector("div").unwrap().unwrap();
-let clear = test_wrapper
-    .query_selector("button")
-    .unwrap()
-    .unwrap()
-    .unchecked_into::<web_sys::HtmlElement>();
-```
-
-Now we can use ordinary DOM APIs to simulate user interaction.
-
-```rust
-// now let's click the `clear` button
-clear.click();
-```
-
-You can test individual DOM element attributes or text node values. Sometimes
-I like to test the whole view at once. We can do this by testing the element’s
-`outerHTML` against our expectations.
+    clear.click();
 
 ```rust
 assert_eq!(
@@ -157,24 +108,112 @@ assert_eq!(
         .outer_html()
     })
 );
-```
+````
 
-That test involved us manually replicating the `view` that’s inside the component.
-There's actually an easier way to do this... We can just test against a `<SimpleCounter/>`
-with the initial value `0`. This is where our wrapping element comes in: I’ll just test
-the wrapper’s `innerHTML` against another comparison case.
+### [`wasm-bindgen-test` with `counters_stable`](https://github.com/leptos-rs/leptos/tree/main/examples/counters_stable/tests/web)
+
+This more developed test suite uses a system of fixtures to refactor the manual DOM manipulation of the `counter` tests and easily test a wide range of cases.
+
+#### Sample Test
 
 ```rust
-assert_eq!(test_wrapper.inner_html(), {
-    let comparison_wrapper = document.create_element("section").unwrap();
-    leptos::mount_to(
-        comparison_wrapper.clone().unchecked_into(),
-        || view! { <SimpleCounter initial_value=0 step=1/>},
-    );
-    comparison_wrapper.inner_html()
+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);
+}
+```
+
+### [Playwright with `counters_stable`](https://github.com/leptos-rs/leptos/tree/main/examples/counters_stable/e2e)
+
+These tests use the common JavaScript testing tool Playwright to run end-to-end tests on the same example, using a library and testing approach familiar to may who have done frontend development before.
+
+#### Sample Test
+
+```js
+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");
+  });
 });
 ```
 
-This is only a very limited introduction to testing. But I hope it’s useful as you begin to build applications.
+### [Gherkin/Cucumber Tests with `todo_app_sqlite`](https://github.com/leptos-rs/leptos/blob/main/examples/todo_app_sqlite/e2e/README.md)
 
-> For more, see [the testing section of the `wasm-bindgen` guide](https://rustwasm.github.io/wasm-bindgen/wasm-bindgen-test/index.html#testing-on-wasm32-unknown-unknown-with-wasm-bindgen-test).
+You can integrate any testing tool you’d like into this flow. This example uses Cucumber, a testing framework based on natural language.
+
+```
+@add_todo
+Feature: Add Todo
+
+    Background:
+        Given I see the app
+
+    @add_todo-see
+    Scenario: Should see the todo
+        Given I set the todo as Buy Bread
+        When I click the Add button
+        Then I see the todo named Buy Bread
+
+    # @allow.skipped
+    @add_todo-style
+    Scenario: Should see the pending todo
+        When I add a todo as Buy Oranges
+        Then I see the pending todo
+```
+
+The definitions for these actions are defined in Rust code.
+
+```rust
+use crate::fixtures::{action, world::AppWorld};
+use anyhow::{Ok, Result};
+use cucumber::{given, when};
+
+#[given("I see the app")]
+#[when("I open the app")]
+async fn i_open_the_app(world: &mut AppWorld) -> Result<()> {
+    let client = &world.client;
+    action::goto_path(client, "").await?;
+
+    Ok(())
+}
+
+#[given(regex = "^I add a todo as (.*)$")]
+#[when(regex = "^I add a todo as (.*)$")]
+async fn i_add_a_todo_titled(world: &mut AppWorld, text: String) -> Result<()> {
+    let client = &world.client;
+    action::add_todo(client, text.as_str()).await?;
+
+    Ok(())
+}
+
+// etc.
+```
+
+### Learning More
+
+Feel free to check out the CI setup in the Leptos repo to learn more about how to use these tools in your own application. All of these testing methods are run regularly against actual Leptos example apps.

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

@@ -144,10 +144,27 @@ let double_count = move || count() * 2;
 Derived signals let you create reactive computed values that can be used in multiple
 places in your application with minimal overhead.
 
-> Note: Using a derived signal like this means that the calculation runs once per
-> signal change per place we access `double_count`; in other words, twice. This is a
-> very cheap calculation, so that’s fine. We’ll look at memos in a later chapter, which
-> are designed to solve this problem for expensive calculations.
+Note: Using a derived signal like this means that the calculation runs once per
+signal change and once per place we access `double_count`; in other words, twice. This is a
+very cheap calculation, so that’s fine. We’ll look at memos in a later chapter, which
+are designed to solve this problem for expensive calculations.
+
+> #### Advanced Topic: Injecting Raw HTML
+>
+> The `view` macro provides support for an additional attribute, `inner_html`, which
+> can be used to directly set the HTML contents of any element, wiping out any other
+> children you’ve given it. Note that this does _not_ escape the HTML you provide. You
+> should make sure that it only contains trusted input or that any HTML entities are
+> escaped, to prevent cross-site scripting (XSS) attacks.
+>
+> ```rust
+> let html = "<p>This HTML will be injected.</p>";
+> view! {
+>   <div inner_html=html/>
+> }
+> ```
+>
+> [Click here for the full `view` macros docs](https://docs.rs/leptos/latest/leptos/macro.view.html).
 
 [Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/2-dynamic-attribute-pqyvzl?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A2%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A2%7D%5D)
 

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

@@ -35,9 +35,7 @@ Instead, let’s create a `<ProgressBar/>` component.
 
 ```rust
 #[component]
-fn ProgressBar(
-
-) -> impl IntoView {
+fn ProgressBar() -> impl IntoView {
     view! {
         <progress
             max="50"
@@ -64,7 +62,6 @@ In Leptos, you define props by giving additional arguments to the component func
 ```rust
 #[component]
 fn ProgressBar(
-
     progress: ReadSignal<i32>
 ) -> impl IntoView {
     view! {
@@ -118,7 +115,6 @@ argument to the component function with `#[prop(optional)]`.
 ```rust
 #[component]
 fn ProgressBar(
-
     // mark this prop optional
     // you can specify it or not when you use <ProgressBar/>
     #[prop(optional)]
@@ -149,7 +145,6 @@ with `#[prop(default = ...)`.
 ```rust
 #[component]
 fn ProgressBar(
-
     #[prop(default = 100)]
     max: u16,
     progress: ReadSignal<i32>
@@ -199,7 +194,6 @@ implement the trait `Fn() -> i32`. So you could use a generic component:
 ```rust
 #[component]
 fn ProgressBar<F>(
-
     #[prop(default = 100)]
     max: u16,
     progress: F
@@ -224,11 +218,10 @@ This generic can also be specified inline:
 ```rust
 #[component]
 fn ProgressBar<F: Fn() -> i32 + 'static>(
-    cx: Scope,
     #[prop(default = 100)] max: u16,
     progress: F,
 ) -> impl IntoView {
-    view! { cx,
+    view! {
         <progress
             max=max
             value=progress
@@ -255,7 +248,6 @@ reactive value.
 ```rust
 #[component]
 fn ProgressBar(
-
     #[prop(default = 100)]
     max: u16,
     #[prop(into)]
@@ -294,11 +286,10 @@ Note that you can’t specify optional generic props for a component. Let’s se
 ```rust,compile_fail
 #[component]
 fn ProgressBar<F: Fn() -> i32 + 'static>(
-    cx: Scope,
     #[prop(optional)] progress: Option<F>,
 ) -> impl IntoView {
     progress.map(|progress| {
-        view! { cx,
+        view! {
             <progress
                 max=100
                 value=progress
@@ -308,8 +299,8 @@ fn ProgressBar<F: Fn() -> i32 + 'static>(
 }
 
 #[component]
-pub fn App(cx: Scope) -> impl IntoView {
-    view! { cx,
+pub fn App() -> impl IntoView {
+    view! {
         <ProgressBar/>
     }
 }
@@ -337,11 +328,10 @@ However, you can get around this by providing a concrete type using `Box<dyn _>`
 ```rust
 #[component]
 fn ProgressBar(
-    cx: Scope,
     #[prop(optional)] progress: Option<Box<dyn Fn() -> i32>>,
 ) -> impl IntoView {
     progress.map(|progress| {
-        view! { cx,
+        view! {
             <progress
                 max=100
                 value=progress
@@ -351,8 +341,8 @@ fn ProgressBar(
 }
 
 #[component]
-pub fn App(cx: Scope) -> impl IntoView {
-    view! { cx,
+pub fn App() -> impl IntoView {
+    view! {
         <ProgressBar/>
     }
 }
@@ -376,7 +366,6 @@ component function, and each one of the props:
 /// Shows progress toward a goal.
 #[component]
 fn ProgressBar(
-
     /// The maximum value of the progress bar.
     #[prop(default = 100)]
     max: u16,
@@ -397,6 +386,24 @@ type, and each of the fields used to add props. It can be a little hard to
 understand how powerful this is until you hover over the component name or props
 and see the power of the `#[component]` macro combined with rust-analyzer here.
 
+> #### Advanced Topic: `#[component(transparent)]`
+>
+> All Leptos components return `-> impl IntoView`. Some, though, need to return
+> some data directly without any additional wrapping. These can be marked with
+> `#[component(transparent)]`, in which case they return exactly the value they
+> return, without the rendering system transforming them in any way.
+>
+> This is mostly used in two situations:
+>
+> 1. Creating wrappers around `<Suspense/>` or `<Transition/>`, which return a
+>    transparent suspense structure to integrate with SSR and hydration properly.
+> 2. Refactoring `<Route/>` definitions for `leptos_router` out into separate
+>    components, because `<Route/>` is a transparent component that returns a
+>    `RouteDefinition` struct rather than a view.
+>
+> In general, you should not need to use transparent components unless you are
+> creating custom wrapping components that fall into one of these two categories.
+
 [Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/3-components-50t2e7?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A7%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A7%7D%5D)
 
 <iframe src="https://codesandbox.io/p/sandbox/3-components-50t2e7?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A7%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A7%7D%5D" width="100%" height="1000px" style="max-height: 100vh"></iframe>

docs/book/src/view/05_forms.md

@@ -19,7 +19,8 @@ There are two important things to remember:
 2. The `value` _attribute_ only sets the initial value of the input, i.e., it
    only updates the input up to the point that you begin typing. The `value`
    _property_ continues updating the input after that. You usually want to set
-   `prop:value` for this reason.
+   `prop:value` for this reason. (The same is true for `checked` and `prop:checked` 
+   on an `<input type="checkbox">`.)
 
 ```rust
 let (name, set_name) = create_signal("Controlled".to_string());
@@ -42,6 +43,33 @@ view! {
 }
 ```
 
+> #### Why do you need `prop:value`?
+> 
+> Web browsers are the most ubiquitous and stable platform for rendering graphical user interfaces in existence. They have also maintained an incredible backwards compatibility over their three decades of existence. Inevitably, this means there are some quirks.
+> 
+> One odd quirk is that there is a distinction between HTML attributes and DOM element properties, i.e., between something called an “attribute” which is parsed from HTML and can be set on a DOM element with `.setAttribute()`, and something called a “property” which is a field of the JavaScript class representation of that parsed HTML element.
+>
+> In the case of an `<input value=...>`, setting the `value` *attribute* is defined as setting the initial value for the input, and setting `value` *property* sets its current value. It maybe easiest to understand this by opening `about:blank` and running the following JavaScript in the browser console, line by line:
+> 
+> ```js
+> // create an input and append it to the DOM
+> const el = document.createElement("input")
+> document.body.appendChild(el)
+> 
+> el.setAttribute("value", "test") // updates the input
+> el.setAttribute("value", "another test") // updates the input again
+> 
+> // now go and type into the input: delete some characters, etc.
+> 
+> el.setAttribute("value", "one more time?") 
+> // nothing should have changed. setting the "initial value" does nothing now
+> 
+> // however...
+> el.value = "But this works"
+> ```
+>
+> Many other frontend frameworks conflate attributes and properties, or create a special case for inputs that sets the value correctly. Maybe Leptos should do this too; but for now, I prefer giving users the maximum amount of control over whether they’re setting an attribute or a property, and doing my best to educate people about the actual underlying browser behavior rather than obscuring it.
+
 ## Uncontrolled Inputs
 
 In an "uncontrolled input," the browser controls the state of the input element.

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

@@ -148,10 +148,10 @@ This _works_, for sure. But if you added a log, you might be surprised
 
 ```rust
 let message = move || if value() > 5 {
-    log!("{}: rendering Big", value());
+    logging::log!("{}: rendering Big", value());
     "Big"
 } else {
-    log!("{}: rendering Small", value());
+    logging::log!("{}: rendering Small", value());
     "Small"
 };
 ```
@@ -208,7 +208,8 @@ view! {
 
 `<Show/>` memoizes the `when` condition, so it only renders its `<Small/>` once,
 continuing to show the same component until `value` is greater than five;
-then it renders `<Big/>` once, continuing to show it indefinitely.
+then it renders `<Big/>` once, continuing to show it indefinitely or until `value`
+goes below five and then renders `<Small/>` again.
 
 This is a helpful tool to avoid rerendering when using dynamic `if` expressions.
 As always, there's some overhead: for a very simple node (like updating a single

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

@@ -72,10 +72,7 @@ pub fn App() -> impl IntoView {
 
 
 #[component]
-pub fn ButtonB<F>(
-
-    on_click: F,
-) -> impl IntoView
+pub fn ButtonB<F>(on_click: F) -> impl IntoView
 where
     F: Fn(MouseEvent) + 'static,
 {

docs/book/src/view/09_component_children.md

@@ -47,7 +47,6 @@ Let’s define a component that takes some children and a render prop.
 ```rust
 #[component]
 pub fn TakesChildren<F, IV>(
-
     /// Takes a function (type F) that returns anything that can be
     /// converted into a View (type IV)
     render_prop: F,

docs/book/src/view/builder.md

@@ -0,0 +1,98 @@
+# No Macros: The View Builder Syntax
+
+> If you’re perfectly happy with the `view!` macro syntax described so far, you’re welcome to skip this chapter. The builder syntax described in this section is always available, but never required.
+
+For one reason or another, many developers would prefer to avoid macros. Perhaps you don’t like the limited `rustfmt` support. (Although, you should check out [`leptosfmt`](https://github.com/bram209/leptosfmt), which is an excellent tool!) Perhaps you worry about the effect of macros on compile time. Perhaps you prefer the aesthetics of pure Rust syntax, or you have trouble context-switching between an HTML-like syntax and your Rust code. Or perhaps you want more flexibility in how you create and manipulate HTML elements than the `view` macro provides.
+
+If you fall into any of those camps, the builder syntax may be for you.
+
+The `view` macro expands an HTML-like syntax to a series of Rust functions and method calls. If you’d rather not use the `view` macro, you can simply use that expanded syntax yourself. And it’s actually pretty nice!
+
+First off, if you want you can even drop the `#[component]` macro: a component is just a setup function that creates your view, so you can define a component as a simple function call:
+
+```rust
+pub fn counter(initial_value: i32, step: u32) -> impl IntoView { }
+```
+
+Elements are created by calling a function with the same name as the HTML element:
+
+```rust
+p()
+```
+
+You can add children to the element with [`.child()`](https://docs.rs/leptos/latest/leptos/struct.HtmlElement.html#method.child), which takes a single child or a tuple or array of types that implement [`IntoView`](https://docs.rs/leptos/latest/leptos/trait.IntoView.html).
+
+```rust
+p().child((em().child("Big, "), strong().child("bold "), "text"))
+```
+
+Attributes are added with [`.attr()`](https://docs.rs/leptos/latest/leptos/struct.HtmlElement.html#method.attr). This can take any of the same types that you could pass as an attribute into the view macro (types that implement [`IntoAttribute`](https://docs.rs/leptos/latest/leptos/trait.IntoAttribute.html)).
+
+```rust
+p().attr("id", "foo").attr("data-count", move || count().to_string())
+```
+
+Similarly, the `class:`, `prop:`, and `style:` syntaxes map directly onto [`.class()`](https://docs.rs/leptos/latest/leptos/struct.HtmlElement.html#method.class), [`.prop()`](https://docs.rs/leptos/latest/leptos/struct.HtmlElement.html#method.prop), and [`.style()`](https://docs.rs/leptos/latest/leptos/struct.HtmlElement.html#method.style) methods.
+
+Event listeners can be added with [`.on()`](https://docs.rs/leptos/latest/leptos/struct.HtmlElement.html#method.on). Typed events found in [`leptos::ev`](https://docs.rs/leptos/latest/leptos/ev/index.html) prevent typos in event names and allow for correct type inference in the callback function.
+
+```rust
+button()
+    .on(ev::click, move |_| set_count.update(|count| count.clear()))
+    .child("Clear")
+```
+
+> Many additional methods can be found in the [`HtmlElement`](https://docs.rs/leptos/latest/leptos/struct.HtmlElement.html#method.child) docs, including some methods that are not directly available in the `view` macro.
+
+All of this adds up to a very Rusty syntax to build full-featured views, if you prefer this style.
+
+```rust
+/// A simple counter view.
+// A component is really just a function call: it runs once to create the DOM and reactive system
+pub fn counter(initial_value: i32, step: u32) -> impl IntoView {
+    let (count, set_count) = create_signal(0);
+
+    div()
+        .child((
+            button()
+                // typed events found in leptos::ev
+                // 1) prevent typos in event names
+                // 2) allow for correct type inference in callbacks
+                .on(ev::click, move |_| set_count.update(|count| count.clear()))
+                .child("Clear"),
+            button()
+                .on(ev::click, move |_| {
+                    set_count.update(|count| count.decrease())
+                })
+                .child("-1"),
+            span().child(("Value: ", move || count.get().value(), "!")),
+            button()
+                .on(ev::click, move |_| {
+                    set_count.update(|count| count.increase())
+                })
+                .child("+1"),
+        ))
+}
+```
+
+This also has the benefit of being more flexible: because these are all plain Rust functions and methods, it’s easier to use them in things like iterator adapters without any additional “magic”:
+
+```rust
+// take some set of attribute names and values
+let attrs: Vec<(&str, AttributeValue)> = todo!();
+// you can use the builder syntax to “spread” these onto the
+// element in a way that’s not possible with the view macro
+let p = attrs
+    .into_iter()
+    .fold(p(), |el, (name, value)| el.attr(name, value));
+
+```
+
+> ## Performance Note
+>
+> One caveat: the `view` macro applies significant optimizations in server-side-rendering (SSR) mode to improve HTML rendering performance significantly (think 2-4x faster, depending on the characteristics of any given app). It does this by analyzing your `view` at compile time and converting the static parts into simple HTML strings, rather than expanding them into the builder syntax.
+>
+> This means two things:
+>
+> 1. The builder syntax and `view` macro should not be mixed, or should only be mixed very carefully: at least in SSR mode, the output of the `view` should be treated as a “black box” that can’t have additional builder methods applied to it without causing inconsistencies.
+> 2. Using the builder syntax will result in less-than-optimal SSR performance. It won’t be slow, by any means (and it’s worth running your own benchmarks in any case), just slower than the `view`-optimized version.

examples/Makefile.toml

@@ -5,34 +5,35 @@ CARGO_MAKE_EXTEND_WORKSPACE_MAKEFILE = true
 CARGO_MAKE_CARGO_BUILD_TEST_FLAGS = ""
 CARGO_MAKE_WORKSPACE_EMULATION = true
 CARGO_MAKE_CRATE_WORKSPACE_MEMBERS = [
-    "animated_show",
-    "counter",
-    "counter_isomorphic",
-    "counters",
-    "counters_stable",
-    "counter_url_query,
-    "counter_without_macros",
-    "error_boundary",
-    "errors_axum",
-    "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",
+  "animated_show",
+  "counter",
+  "counter_isomorphic",
+  "counters",
+  "counters_stable",
+  "counter_url_query",
+  "counter_without_macros",
+  "error_boundary",
+  "errors_axum",
+  "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",
+  "suspense_tests",
+  "tailwind",
+  "tailwind_csr_trunk",
+  "timer",
+  "todo_app_sqlite",
+  "todo_app_sqlite_axum",
+  "todo_app_sqlite_viz",
+  "todomvc",
 ]
 
 [tasks.gen-members]
@@ -40,7 +41,7 @@ workspace = false
 description = "Generate the list of workspace members"
 script = '''
 examples=$(ls | 
-grep -v README.md | 
+grep -v .md | 
 grep -v Makefile.toml | 
 grep -v cargo-make | 
 grep -v gtk | 
@@ -48,10 +49,12 @@ jq -R -s -c 'split("\n")[:-1]')
 echo "CARGO_MAKE_CRATE_WORKSPACE_MEMBERS = $examples"
 '''
 
-[tasks.test-info]
+[tasks.test-report]
 workspace = false
-description = "report ci test runners for each example - Option [all]"
+description = "report web testing technology used by examples - OPTION: [all]"
 script = '''
+set -emu
+
 BOLD="\e[1m"
 GREEN="\e[0;32m"
 ITALIC="\e[3m"
@@ -59,63 +62,92 @@ YELLOW="\e[0;33m"
 RESET="\e[0m"
 
 echo
-echo "${YELLOW}CI test runners by example...${RESET}"
+echo "${YELLOW}Web Test Technology${RESET}"
 echo
 
-examples=$(ls | 
-grep -v README.md | 
-grep -v Makefile.toml | 
-grep -v cargo-make | 
-grep -v gtk |
-sort -u | 
-awk '{print $0 ", "}')
+makefile_paths=$(find . -name Makefile.toml -not -path '*/target/*' -not -path '*/node_modules/*' |
+  sed 's%./%%' |
+  sed 's%/Makefile.toml%%' |
+  grep -v Makefile.toml |
+  sort -u)
 
-example_root_dir=$(pwd)
+start_path=$(pwd)
 
-for example_dir in $examples
-do
-  clean_name=$(echo $example_dir | sed 's%,%%')
-  cd $clean_name
+for path in $makefile_paths; do
+  cd $path
 
-  c_tests=$(grep -rl --fixed-strings "#[test]" | wc -l)
-  rs_tests=$(grep -rl --fixed-strings "#[rstest]" | wc -l)
-  w_configs=$(grep -rl "\/wasm-test.toml\"" | wc -l)
-  pw_configs=$(grep -rl "\/playwright-test.toml\"" | wc -l)
-  cl_configs=$(grep -rl "\/cargo-leptos-test.toml\"" | wc -l)
+  crate_symbols=
 
-  test_runner=
+  pw_count=$(find . -name playwright.config.ts | wc -l)
 
-  if [ $c_tests -gt 0 ]; then
-    test_runner="-C"
-  fi
+  while read -r line; do
+      case $line in
+      *"cucumber"*)
+          crate_symbols=$crate_symbols"C"
+          ;;
+      *"fantoccini"*)
+          crate_symbols=$crate_symbols"D"
+          ;;
+      esac
+  done <"./Cargo.toml"
 
-  if [ $rs_tests -gt 0 ]; then
-    test_runner=$test_runner"-R"
-  fi
+  while read -r line; do
+    case $line in
+      *"cargo-make/wasm-test.toml"*)
+          crate_symbols=$crate_symbols"W"
+        ;;
+      *"cargo-make/playwright-test.toml"*)
+          crate_symbols=$crate_symbols"P"
+          crate_symbols=$crate_symbols"N"
+        ;;
+      *"cargo-make/playwright-trunk-test.toml"*)
+          crate_symbols=$crate_symbols"P"
+          crate_symbols=$crate_symbols"T"
+        ;;
+      *"cargo-make/trunk_server.toml"*)
+          crate_symbols=$crate_symbols"T"
+        ;;
+      *"cargo-make/cargo-leptos-webdriver-test.toml"*)
+          crate_symbols=$crate_symbols"L"
+        ;;
+      *"cargo-make/cargo-leptos-test.toml"*)
+          crate_symbols=$crate_symbols"L"
+          if [ $pw_count -gt 0 ]; then
+            crate_symbols=$crate_symbols"P"
+          fi
+        ;;
+    esac
+  done <"./Makefile.toml"
 
-  if [ $w_configs -gt 0 ]; then
-    test_runner=$test_runner"-W"
-  fi
+  # Sort list of tools
+  sorted_crate_symbols=$(echo ${crate_symbols} | grep -o . | sort | tr -d "\n") 
 
-  if [ $pw_configs -gt 0 ]; then
-    test_runner=$test_runner"-P"
-  fi
-
-  if [ $cl_configs -gt 0 ]; then
-    test_runner=$test_runner"-L"
-  fi
-  
-  if [ ! -z "$1" ]; then
+  formatted_crate_symbols=" ➤ ${BOLD}${YELLOW}${sorted_crate_symbols}${RESET}"
+  crate_line=$path
+  if [ ! -z ${1+x} ]; then
     # Show all examples
-    echo "$clean_name ${BOLD}${test_runner}${RESET}"
-  elif [ ! -z $test_runner ]; then
+    if [ ! -z $crate_symbols ]; then
+      crate_line=$crate_line$formatted_crate_symbols
+    fi
+    echo $crate_line
+  elif [ ! -z $crate_symbols ]; then
     # Filter out examples that do not run tests in `ci`
-    echo "$clean_name ${BOLD}${test_runner}${RESET}"
+    crate_line=$crate_line$formatted_crate_symbols
+    echo $crate_line
   fi
 
-  cd $example_root_dir
+  cd ${start_path}
 done
+
+c="${BOLD}${YELLOW}C${RESET} = Cucumber"
+d="${BOLD}${YELLOW}D${RESET} = WebDriver"
+l="${BOLD}${YELLOW}L${RESET} = Cargo Leptos"
+n="${BOLD}${YELLOW}N${RESET} = Node"
+p="${BOLD}${YELLOW}P${RESET} = Playwright"
+t="${BOLD}${YELLOW}T${RESET} = Trunk"
+w="${BOLD}${YELLOW}W${RESET} = WASM"
+
 echo
-echo "${ITALIC}Test Runners: C = Cargo Test, L = Cargo Leptos Test, P = Playwright Test, R = RS Test, W = WASM Test${RESET}"
+echo "${ITALIC}Keys:${RESET} $c, $d, $l, $n, $p, $t, $w"
 echo
 '''

examples/README.md

@@ -1,7 +1,45 @@
-# Examples
+# Examples README
+
+## Main Branch
 
 The examples in this directory are all built and tested against the current `main` branch.
 
-To the extent that new features have been released or breaking changes have been made since the previous release, the examples are compatible with the `main` branch and not the current release.
+To the extent that new features have been released or breaking changes have been made since the previous release, the examples are compatible with the `main` branch but not the current release.
 
-To see the examples as they were at the time of the `0.3.0` release, [click here](https://github.com/leptos-rs/leptos/tree/v0.3.0/examples).
+To see the examples as they were at the time of the `0.4.9` release, [click here](https://github.com/leptos-rs/leptos/tree/v0.4.9/examples).
+
+## Cargo Make
+
+[Cargo Make](https://sagiegurari.github.io/cargo-make/) is used to build, test, and run examples.
+
+Here are the highlights.
+
+- Extendable custom task files are located in the [cargo-make](./cargo-make/) directory
+- Running a task will automatically install `cargo` dependencies 
+- Each `Makefile.toml` file must extend the [cargo-make/main.toml](./cargo-make/main.toml) file
+- [cargo-make](./cargo-make/) files that end in `*-test.toml` configure web testing strategies
+- Run `cargo make test-report` to learn which examples have web tests
+
+## Getting Started
+
+Follow these steps to get any example up and running.
+
+1. `cd` to the example root directory
+2. Run `cargo make ci` to setup and test the example
+3. Run `cargo make start` to run the example
+4. Open the client URL in the console output (<http://127.0.0.1:8080> or <http://127.0.0.1:3000> by default)
+
+## Prerequisites
+
+Example projects depend on the following tools. Please install them as needed.
+
+- [Rust](https://www.rust-lang.org/)
+- Nightly Rust
+  - Run `rustup toolchain install nightly`
+  - Run `rustup target add wasm32-unknown-unknown`
+- [Cargo Make](https://sagiegurari.github.io/cargo-make/)
+  - Run `cargo install --force cargo-make`
+  - Setup a command alias like `alias cm='cargo make'` to reduce typing (**_Optional_**)
+- [Node Version Manager](https://github.com/nvm-sh/nvm/) (**_Optional_**)
+- [Node.js](https://nodejs.org/)
+- [pnpm](https://pnpm.io/) (**_Optional_**)

examples/SSR_NOTES.md

@@ -0,0 +1,68 @@
+# Server Side Rendering
+
+## Cargo Leptos
+
+cargo-leptos is now the easiest and most featureful way to build server side rendered apps with hydration. It provides automatic recompilation of client and server code, wasm optimisation, CSS minification, and more! Check out more about it [here](https://github.com/akesson/cargo-leptos)
+
+1. Install cargo-leptos
+
+```bash
+cargo install --locked cargo-leptos
+```
+
+2. Build the site in watch mode, recompiling on file changes
+
+```bash
+cargo leptos watch
+```
+
+Open browser on [http://localhost:3000/](http://localhost:3000/)
+
+3. When ready to deploy, run
+
+```bash
+cargo leptos build --release
+```
+
+## WASM Pack
+
+To run it as a server side app with hydration, you'll need to have wasm-pack installed.
+
+0. Edit the `[package.metadata.leptos]` section and set `site-root` to `"."`. For examples with CSS you also want to change the path of the `<StyleSheet / >` component in the root component to point towards the CSS file in the root. This tells leptos that the WASM/JS files generated by wasm-pack are available at `./pkg` and that the CSS files are no longer processed by cargo-leptos. Building to alternative folders is not supported at this time. You'll also want to edit the call to `get_configuration()` to pass in `Some(Cargo.toml)`, so that Leptos will read the settings instead of cargo-leptos. If you do so, your file/folder names cannot include dashes.
+
+1. Install wasm-pack
+
+```bash
+cargo install wasm-pack
+```
+
+2. Build the Webassembly used to hydrate the HTML from the server
+
+```bash
+wasm-pack build --target=web --debug --no-default-features --features=hydrate
+```
+
+3. Run the server to serve the Webassembly, JS, and HTML
+
+```bash
+cargo run --no-default-features --features=ssr
+```
+
+### Server Side Rendering With Hydration
+
+To run it as a server side app with hydration, first you should run
+
+```bash
+wasm-pack build --target=web --debug --no-default-features --features=hydrate
+```
+
+to generate the WebAssembly to hydrate the HTML delivered from the server.
+
+Then run the server with `cargo run` to serve the server side rendered HTML and the WASM bundle for hydration.
+
+```bash
+cargo run --no-default-features --features=ssr
+```
+
+> Note that if your hydration code changes, you will have to rerun the wasm-pack command above before running
+> `cargo run`

examples/animated_show/Makefile.toml

@@ -1 +1,4 @@
-extend = [{ path = "../cargo-make/main.toml" }]
+extend = [
+    { path = "../cargo-make/main.toml" },
+    { path = "../cargo-make/trunk_server.toml" },
+]

examples/animated_show/README.md

@@ -1,9 +1,10 @@
-# `<AnimatedShow>` combined with CSS animations
+# Animated Show Example
 
 This is a very simple example of the `<AnimatedShow>` component.
 
-This component is an extension for the `<Show>` component and it will not take in a fallback, but it will unmount the
-component from the DOM after a given duration. This makes it possible to have really easy unmount animations with just
+The `<AnimatedShow>` component is an extension for the `<Show>` component and it will not take in a fallback, but it will unmount the component from the DOM after a given duration. This makes it possible to have really easy unmount animations with just
 CSS.
 
-Just execute `trunk serve` to start the demo.
+## Getting Started
+
+See the [Examples README](../README.md) for setup and run instructions.

examples/animated_show/src/lib.rs

@@ -6,7 +6,7 @@ pub fn App() -> impl IntoView {
     let show = create_rw_signal(false);
 
     // the CSS classes in this example are just written directly inside the `index.html`
-    view! { cx,
+    view! {
         <div
             class="hover-me"
             on:mouseenter=move |_| show.set(true)

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

@@ -1,6 +1,4 @@
-[tasks.integration-test]
-dependencies = ["cargo-leptos-e2e"]
+extend = { path = "./cargo-leptos.toml" }
 
-[tasks.cargo-leptos-e2e]
-command = "cargo"
-args = ["leptos", "end-to-end"]
+[tasks.integration-test]
+dependencies = ["install-cargo-leptos", "cargo-leptos-e2e"]

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

@@ -0,0 +1,7 @@
+extend = [
+    { path = "./cargo-leptos.toml" },
+    { path = "../cargo-make/webdriver.toml" },
+]
+
+[tasks.integration-test]
+dependencies = ["install-cargo-leptos", "start-webdriver", "cargo-leptos-e2e"]

examples/cargo-make/cargo-leptos.toml

@@ -0,0 +1,32 @@
+[tasks.install-cargo-leptos]
+install_crate = { crate_name = "cargo-leptos", binary = "cargo-leptos", test_arg = "--help" }
+
+[tasks.cargo-leptos-e2e]
+command = "cargo"
+args = ["leptos", "end-to-end"]
+
+[tasks.build]
+clear = true
+command = "cargo"
+args = ["leptos", "build"]
+
+[tasks.check]
+clear = true
+dependencies = ["check-debug", "check-release"]
+
+[tasks.check-debug]
+toolchain = "nightly"
+command = "cargo"
+args = ["check-all-features"]
+install_crate = "cargo-all-features"
+
+[tasks.check-release]
+toolchain = "nightly"
+command = "cargo"
+args = ["check-all-features", "--release"]
+install_crate = "cargo-all-features"
+
+[tasks.start-client]
+dependencies = ["install-cargo-leptos"]
+command = "cargo"
+args = ["leptos", "watch"]

examples/cargo-make/clean.toml

@@ -1,18 +1,19 @@
 [tasks.clean]
 dependencies = [
-    "clean-cargo",
-    "clean-trunk",
-    "clean-node_modules",
-    "clean-playwright",
+  "clean-cargo",
+  "clean-trunk",
+  "clean-node_modules",
+  "clean-playwright",
 ]
 
 [tasks.clean-cargo]
-command = "cargo"
-args = ["clean"]
+command = "rm"
+args = ["-rf", "target"]
 
 [tasks.clean-trunk]
-command = "trunk"
-args = ["clean"]
+script = '''
+find . -type d -name dist | xargs rm -rf
+'''
 
 [tasks.clean-node_modules]
 script = '''

examples/cargo-make/client-process.toml

@@ -0,0 +1,34 @@
+[tasks.start-client]
+
+[tasks.stop-client]
+condition = { env_set = ["CLIENT_PROCESS_NAME"] }
+script = '''
+  if [ ! -z $(pidof ${CLIENT_PROCESS_NAME}) ]; then
+    pkill -ef ${CLIENT_PROCESS_NAME}
+  fi
+'''
+
+[tasks.client-status]
+condition = { env_set = ["CLIENT_PROCESS_NAME"] }
+script = '''
+  if [ -z $(pidof ${CLIENT_PROCESS_NAME}) ]; then
+    echo "  ${CLIENT_PROCESS_NAME} is not running"
+  else
+    echo "  ${CLIENT_PROCESS_NAME} is up"
+  fi
+'''
+
+[tasks.maybe-start-client]
+condition = { env_set = ["CLIENT_PROCESS_NAME"] }
+script = '''
+  if [ -z $(pidof ${CLIENT_PROCESS_NAME}) ]; then
+    echo "  Starting ${CLIENT_PROCESS_NAME}"
+    if [ -z ${SPAWN_CLIENT_PROCESS} ];then
+      cargo make start-client ${@} &
+    else
+      cargo make start-client ${@}
+    fi
+  else
+    echo "  ${CLIENT_PROCESS_NAME} is already started"
+  fi
+'''

examples/cargo-make/main.toml

@@ -1,8 +1,9 @@
 extend = [
-    { path = "../cargo-make/compile.toml" },
-    { path = "../cargo-make/clean.toml" },
-    { path = "../cargo-make/lint.toml" },
-    { path = "../cargo-make/node.toml" },
+    { path = "./compile.toml" },
+    { path = "./clean.toml" },
+    { path = "./lint.toml" },
+    { path = "./node.toml" },
+    { path = "./process.toml" },
 ]
 
 # CI Stages

examples/cargo-make/playwright-trunk-test.toml

@@ -0,0 +1,14 @@
+extend = [
+    { path = "../cargo-make/playwright.toml" },
+    { path = "../cargo-make/trunk_server.toml" },
+]
+
+[tasks.integration-test]
+description = "Run integration test with automated start and stop of processes"
+env = { SPAWN_CLIENT_PROCESS = "1" }
+dependencies = ["start", "wait-one", "test-playwright", "stop"]
+
+[tasks.wait-one]
+script = '''
+sleep 1
+'''

examples/cargo-make/process.toml

@@ -0,0 +1,13 @@
+extend = [
+    { path = "./client-process.toml" },
+    { path = "./server-process.toml" },
+]
+
+[tasks.start]
+dependencies = ["maybe-start-server", "maybe-start-client"]
+
+[tasks.status]
+dependencies = ["server-status", "client-status"]
+
+[tasks.stop]
+dependencies = ["stop-client", "stop-server"]

examples/cargo-make/server-process.toml

@@ -0,0 +1,34 @@
+[tasks.start-server]
+
+[tasks.stop-server]
+condition = { env_set = ["SERVER_PROCESS_NAME"] }
+script = '''
+  if [ ! -z $(pidof ${SERVER_PROCESS_NAME}) ]; then
+    pkill -ef ${SERVER_PROCESS_NAME}
+  fi
+'''
+
+[tasks.server-status]
+condition = { env_set = ["SERVER_PROCESS_NAME"] }
+script = '''
+  if [ -z $(pidof ${SERVER_PROCESS_NAME}) ]; then
+    echo "  ${SERVER_PROCESS_NAME} is not running"
+  else
+    echo "  ${SERVER_PROCESS_NAME} is up"
+  fi
+'''
+
+[tasks.maybe-start-server]
+condition = { env_set = ["SERVER_PROCESS_NAME"] }
+script = '''
+  YELLOW="\e[0;33m"
+  RESET="\e[0m"
+
+  if [ -z $(pidof ${SERVER_PROCESS_NAME}) ]; then
+    echo "  Starting ${SERVER_PROCESS_NAME}"
+    echo "  ${YELLOW}>> Run cargo make stop to end process${RESET}"
+    cargo make start-server ${@} & 
+  else
+    echo "  ${SERVER_PROCESS_NAME} is already started"
+  fi
+'''

examples/cargo-make/trunk_server.toml

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

examples/cargo-make/webdriver.toml

@@ -0,0 +1,30 @@
+[tasks.start-webdriver]
+script = '''
+  BOLD="\e[1m"
+  GREEN="\e[0;32m"
+  RED="\e[0;31m"
+  RESET="\e[0m"
+
+  if command -v chromedriver; then
+    if [ -z $(pidof chromedriver) ]; then
+      chromedriver --port=4444 &
+    fi
+  else
+    echo "${RED}${BOLD}ERROR${RESET} - chromedriver is required by this task"
+    exit 1
+  fi
+'''
+
+[tasks.stop-webdriver]
+script = '''
+  pkill -f "chromedriver"
+'''
+
+[tasks.webdriver-status]
+script = '''
+  if [ -z $(pidof chromedriver) ]; then
+    echo chromedriver is not running
+  else
+    echo chromedriver is up
+  fi
+'''

examples/counter/Makefile.toml

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

examples/counter/README.md

@@ -2,6 +2,6 @@
 
 This example creates a simple counter in a client side rendered app with Rust and WASM!
 
-To run it, just issue the `trunk serve --open` command in the example root. This will build the app, run it, and open a new browser to serve it.
+## Getting Started
 
-> If you don't have `trunk` installed, [click here for install instructions.](https://trunkrs.dev/)
+See the [Examples README](../README.md) for setup and run instructions.

examples/counter_isomorphic/Cargo.toml

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

examples/counter_isomorphic/Makefile.toml

@@ -1 +1,8 @@
-extend = [{ path = "../cargo-make/main.toml" }]
+extend = [
+    { path = "../cargo-make/main.toml" },
+    { path = "../cargo-make/cargo-leptos.toml" },
+]
+
+[env]
+
+CLIENT_PROCESS_NAME = "counter_isomorphic"

examples/counter_isomorphic/README.md

@@ -2,42 +2,6 @@
 
 This example demonstrates how to use a function isomorphically, to run a server side function from the browser and receive a result.
 
-## Client Side Rendering
-For this example the server must store the counter state since it can be modified by many users.
-This means it is not possible to produce a working CSR-only version as a non-static server is required.
+## Getting Started
 
-## Server Side Rendering with cargo-leptos
-cargo-leptos is now the easiest and most featureful way to build server side rendered apps with hydration. It provides automatic recompilation of client and server code, wasm optimisation, CSS minification, and more! Check out more about it [here](https://github.com/akesson/cargo-leptos)
-
-1. Install cargo-leptos
-```bash
-cargo install --locked cargo-leptos
-``` 
-2. Build the site in watch mode, recompiling on file changes
-```bash
-cargo leptos watch
-```
-
-Open browser on [http://localhost:3000/](http://localhost:3000/)
-
-3. When ready to deploy, run
-```bash
-cargo leptos build --release
-```
-
-## Server Side Rendering without cargo-leptos
-To run it as a server side app with hydration, you'll need to have wasm-pack installed.
-
-0. Edit the `[package.metadata.leptos]` section and set `site-root` to `"."`. For examples with CSS you also want to change the path of the `<StyleSheet / >` component in the root component to point towards the CSS file in the root. This tells leptos that the WASM/JS files generated by wasm-pack are available at `./pkg` and that the CSS files are no longer processed by cargo-leptos. Building to alternative folders is not supported at this time. You'll also want to edit the call to `get_configuration()` to pass in `Some(Cargo.toml)`, so that Leptos will read the settings instead of cargo-leptos. If you do so, your file/folder names cannot include dashes.
-1. Install wasm-pack
-```bash
-cargo install wasm-pack
-```
-2. Build the Webassembly used to hydrate the HTML from the server
-```bash
-wasm-pack build --target=web --debug --no-default-features --features=hydrate
-```
-3. Run the server to serve the Webassembly, JS, and HTML 
-```bash
-cargo run --no-default-features --features=ssr
-```
+See the [Examples README](../README.md) for setup and run instructions.

examples/counter_isomorphic/src/counters.rs

@@ -15,13 +15,12 @@ cfg_if! {
     }
 }
 
-// "/api" is an optional prefix that allows you to locate server functions wherever you'd like on the server
-#[server(GetServerCount, "/api")]
+#[server]
 pub async fn get_server_count() -> Result<i32, ServerFnError> {
     Ok(COUNT.load(Ordering::Relaxed))
 }
 
-#[server(AdjustServerCount, "/api")]
+#[server]
 pub async fn adjust_server_count(
     delta: i32,
     msg: String,
@@ -33,7 +32,7 @@ pub async fn adjust_server_count(
     Ok(new)
 }
 
-#[server(ClearServerCount, "/api")]
+#[server]
 pub async fn clear_server_count() -> Result<i32, ServerFnError> {
     COUNT.store(0, Ordering::Relaxed);
     _ = COUNT_CHANNEL.send(&0).await;
@@ -112,9 +111,9 @@ pub fn Counter() -> impl IntoView {
     );
 
     let value =
-        move || counter.read().map(|count| count.unwrap_or(0)).unwrap_or(0);
+        move || counter.get().map(|count| count.unwrap_or(0)).unwrap_or(0);
     let error_msg = move || {
-        counter.read().and_then(|res| match res {
+        counter.get().and_then(|res| match res {
             Ok(_) => None,
             Err(e) => Some(e),
         })
@@ -147,6 +146,8 @@ pub fn Counter() -> impl IntoView {
 // but uses HTML forms to submit the actions
 #[component]
 pub fn FormCounter() -> impl IntoView {
+    // these struct names are auto-generated by #[server]
+    // they are just the PascalCased versions of the function names
     let adjust = create_server_action::<AdjustServerCount>();
     let clear = create_server_action::<ClearServerCount>();
 
@@ -159,7 +160,7 @@ pub fn FormCounter() -> impl IntoView {
     );
     let value = move || {
         log::debug!("FormCounter looking for value");
-        counter.read().and_then(|n| n.ok()).unwrap_or(0)
+        counter.get().and_then(|n| n.ok()).unwrap_or(0)
     };
 
     view! {

examples/counter_url_query/Makefile.toml

@@ -1 +1,4 @@
-extend = [{ path = "../cargo-make/main.toml" }]
+extend = [
+    { path = "../cargo-make/main.toml" },
+    { path = "../cargo-make/trunk_server.toml" },
+]

examples/counter_url_query/README.md

@@ -2,6 +2,6 @@
 
 This example creates a simple counter whose state is persisted and synced in the url with query params.
 
-To run it, just issue the `trunk serve --open` command in the example root. This will build the app, run it, and open a new browser to serve it.
+## Getting Started
 
-> If you don't have `trunk` installed, [click here for install instructions.](https://trunkrs.dev/)
+See the [Examples README](../README.md) for setup and run instructions.

examples/counter_without_macros/Makefile.toml

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

examples/counter_without_macros/README.md

@@ -2,6 +2,6 @@
 
 This example is the same like the `counter` but it's written without using macros and can be build with stable Rust.
 
-To run it, just issue the `trunk serve --open` command in the example root. This will build the app, run it, and open a new browser to serve it.
+## Getting Started
 
-Issue the `cargo make test-flow` command to run unit and wasm tests.
+See the [Examples README](../README.md) for setup and run instructions.

examples/counter_without_macros/src/lib.rs

@@ -3,44 +3,30 @@ use leptos::{ev, html::*, *};
 /// A simple counter view.
 // A component is really just a function call: it runs once to create the DOM and reactive system
 pub fn counter(initial_value: i32, step: u32) -> impl IntoView {
-    let (count, set_count) = create_signal(Count::new(initial_value, step));
+    let count = RwSignal::new(Count::new(initial_value, step));
 
-    // elements are created by calling a function with a Scope argument
     // the function name is the same as the HTML tag name
     div()
         // children can be added with .child()
         // this takes any type that implements IntoView as its argument
         // for example, a string or an HtmlElement<_>
-        .child(
+        // it can also take an array of types that impl IntoView
+        // or a tuple of up to 26 objects that impl IntoView
+        .child((
             button()
                 // typed events found in leptos::ev
                 // 1) prevent typos in event names
                 // 2) allow for correct type inference in callbacks
-                .on(ev::click, move |_| set_count.update(|count| count.clear()))
+                .on(ev::click, move |_| count.update(Count::clear))
                 .child("Clear"),
-        )
-        .child(
             button()
-                .on(ev::click, move |_| {
-                    set_count.update(|count| count.decrease())
-                })
+                .on(ev::click, move |_| count.update(Count::decrease))
                 .child("-1"),
-        )
-        .child(
-            span()
-                .child("Value: ")
-                // reactive values are passed to .child() as a tuple
-                // (Scope, [child function]) so an effect can be created
-                .child(move || count.get().value())
-                .child("!"),
-        )
-        .child(
+            span().child(("Value: ", move || count.get().value(), "!")),
             button()
-                .on(ev::click, move |_| {
-                    set_count.update(|count| count.increase())
-                })
+                .on(ev::click, move |_| count.update(Count::increase))
                 .child("+1"),
-        )
+        ))
 }
 
 #[derive(Debug, Clone)]

examples/counters/Makefile.toml

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

examples/counters/README.md

@@ -2,8 +2,6 @@
 
 This example showcases a basic leptos app with many counters. It is a good example of how to setup a basic reactive app with signals and effects, and how to interact with browser events.
 
-## Client Side Rendering
+## Getting Started
 
-To run it as a client-side app, you can issue `trunk serve --open` in the root. This will build the entire app into one CSR bundle.
-
-> If you don't have `trunk` installed, [click here for install instructions.](https://trunkrs.dev/)
+See the [Examples README](../README.md) for setup and run instructions.

examples/counters/src/lib.rs

@@ -65,7 +65,7 @@ pub fn Counters() -> impl IntoView {
                 <For
                     each=counters
                     key=|counter| counter.0
-                    view=move |(id, (value, set_value)): (usize, (ReadSignal<i32>, WriteSignal<i32>))| {
+                    children=move |(id, (value, set_value)): (usize, (ReadSignal<i32>, WriteSignal<i32>))| {
                         view! {
                             <Counter id value set_value/>
                         }
@@ -88,9 +88,17 @@ fn Counter(
         set_value(event_target_value(&ev).parse::<i32>().unwrap_or_default())
     };
 
-    // just an example of how a cleanup function works
     // this will run when the scope is disposed, i.e., when this row is deleted
-    on_cleanup(|| log::debug!("deleted a row"));
+    // because the signal was created in the parent scope, it won't be disposed
+    // of until the parent scope is. but we no longer need it, so we'll dispose of
+    // it when this row is deleted, instead. if we don't dispose of it here,
+    // this memory will "leak," i.e., the signal will continue to exist until the
+    // parent component is removed. in the case of this component, where it's the
+    // root, that's the lifetime of the program.
+    on_cleanup(move || {
+        log::debug!("deleted a row");
+        value.dispose();
+    });
 
     view! {
         <li>

examples/counters_stable/Cargo.toml

@@ -5,12 +5,15 @@ edition = "2021"
 
 [dependencies]
 leptos = { path = "../../leptos", features = ["csr"] }
+leptos_meta = { path = "../../meta", features = ["csr"] }
 log = "0.4"
 console_log = "1"
 console_error_panic_hook = "0.1.7"
 
 [dev-dependencies]
-wasm-bindgen-test = "0.3.0"
+wasm-bindgen = "0.2.87"
+wasm-bindgen-test = "0.3.37"
+pretty_assertions = "1.4.0"
 
 [dev-dependencies.web-sys]
 features = [

examples/counters_stable/Makefile.toml

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

examples/counters_stable/README.md

@@ -2,8 +2,6 @@
 
 This example showcases a basic Leptos app with many counters. It is a good example of how to setup a basic reactive app with signals and effects, and how to interact with browser events. Unlike the other counters example, it will compile on Rust stable, because it has the `stable` feature enabled.
 
-## Client Side Rendering
+## Getting Started
 
-To run it as a client-side app, you can issue `trunk serve --open` in the root. This will build the entire app into one CSR bundle.
-
-> If you don't have `trunk` installed, [click here for install instructions.](https://trunkrs.dev/)
+See the [Examples README](../README.md) for setup and run instructions.

examples/counters_stable/index.html

@@ -1,8 +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>
-</html>
+  <head>
+    <link data-trunk rel="rust" data-wasm-opt="z" data-weak-refs />
+  </head>
+  <body></body>
+</html>

examples/counters_stable/src/lib.rs

@@ -0,0 +1,118 @@
+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() -> impl IntoView {
+    let (next_counter_id, set_next_counter_id) = create_signal(0);
+    let (counters, set_counters) = create_signal::<CounterHolder>(vec![]);
+    provide_context(CounterUpdater { set_counters });
+
+    let add_counter = move |_| {
+        let id = next_counter_id.get();
+        let sig = create_signal(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(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! {
+        <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}
+                    children=move |(id, (value, set_value))| {
+                        view! {
+                            <Counter id value set_value/>
+                        }
+                    }
+                />
+            </ul>
+        </div>
+    }
+}
+
+#[component]
+fn Counter(
+    id: usize,
+    value: ReadSignal<i32>,
+    set_value: WriteSignal<i32>,
+) -> impl IntoView {
+    let CounterUpdater { set_counters } = use_context().unwrap();
+
+    let input = move |ev| {
+        set_value
+            .set(event_target_value(&ev).parse::<i32>().unwrap_or_default())
+    };
+
+    // this will run when the scope is disposed, i.e., when this row is deleted
+    // because the signal was created in the parent scope, it won't be disposed
+    // of until the parent scope is. but we no longer need it, so we'll dispose of
+    // it when this row is deleted, instead. if we don't dispose of it here,
+    // this memory will "leak," i.e., the signal will continue to exist until the
+    // parent component is removed. in the case of this component, where it's the
+    // root, that's the lifetime of the program.
+    on_cleanup(move || {
+        log::debug!("deleted a row");
+        value.dispose();
+    });
+
+    view! {
+        <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,106 +6,3 @@ fn main() {
     console_error_panic_hook::set_once();
     mount_to_body(|| view! { <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() -> impl IntoView {
-    let (next_counter_id, set_next_counter_id) = create_signal(0);
-    let (counters, set_counters) = create_signal::<CounterHolder>(vec![]);
-    provide_context(CounterUpdater { set_counters });
-
-    let add_counter = move |_| {
-        let id = next_counter_id.get();
-        let sig = create_signal(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(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! {
-        <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 |(id, (value, set_value))| {
-                        view! {
-                            <Counter id value set_value/>
-                        }
-                    }
-                />
-            </ul>
-        </div>
-    }
-}
-
-#[component]
-fn Counter(
-    id: usize,
-    value: ReadSignal<i32>,
-    set_value: WriteSignal<i32>,
-) -> impl IntoView {
-    let CounterUpdater { set_counters } = use_context().unwrap();
-
-    let input = move |ev| {
-        set_value
-            .set(event_target_value(&ev).parse::<i32>().unwrap_or_default())
-    };
-
-    view! {
-        <li>
-            <button id="decrement_count" on:click=move |_| set_value.update(move |value| *value -= 1)>"-1"</button>
-            <input type="text"
-                prop:value={move || value.get().to_string()}
-                on:input=input
-            />
-            <span>{value}</span>
-            <button id="increment_count" on:click=move |_| set_value.update(move |value| *value += 1)>"+1"</button>
-            <button on:click=move |_| set_counters.update(move |counters| counters.retain(|(counter_id, _)| counter_id != &id))>"x"</button>
-        </li>
-    }
-}

examples/counters_stable/tests/web/add_1k_counters.rs

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

examples/counters_stable/tests/web/add_counter.rs

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

examples/counters_stable/tests/web/clear_counters.rs

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

examples/counters_stable/tests/web/decrement_counter.rs

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

examples/counters_stable/tests/web/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(|| view! { <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);
+}