feat: add reactive lenses into signals

* refactor(workflows): split setup

* test((verify-changed-examples): simulate  change

* refactor(verify-changes-examples): inline os setup

* refactor(verify-changed-examples): skip w/o change

* chore(verify-changed-examples): remove simulated change

* refactor(verify-changed-examples): revert inline

* refactor(verify-changes-examples): extract example changed

* fix(verify-changed-examples): pull up example changed

* refactor(verify-change-examples): extract matrix

* refactor(verify-changed-examples): pass input

* refactor(verify-changed-examples): rename workflow

* ci(workflows): install chromedriver if needed

* fix(ci-changed-examples): pass input from json

* perf(run-cargo-make-task): maybe install chromedriver

* fix((run-cargo-make-task): maybe install chromedriver

* perf(run-cargo-make-task): maybe install playwrigh deps

* fix(run-cargo-make-task): maybe install playwrigh deps

* chore(suspsense_tests): retry e2e

* refactor(verify-changed-examples): rename calls

* refactor(run-cargo-make-test): remove playwright count

.github/workflows/check-examples.yml

@@ -9,64 +9,18 @@ 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:

.github/workflows/check-stable.yml

@@ -11,8 +11,13 @@ env:
   CARGO_REGISTRIES_CRATES_IO_PROTOCOL: sparse
 
 jobs:
+  get-leptos-changed:
+    uses: ./.github/workflows/get-leptos-changed.yml
+
   test:
     name: Check examples ${{ matrix.os }} (using rustc ${{ matrix.rust }})
+    needs: [get-leptos-changed]
+    if: needs.get-leptos-changed.outputs.leptos_changed == 'true'
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:

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

@@ -0,0 +1,31 @@
+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"

.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:

.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
@@ -51,21 +45,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/README.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 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: 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,9 +1,8 @@
 name: Deploy book
 on:
   push:
-    paths: ['docs/book/**']
-    branches:
-      - main
+    tags:
+      - '*-?v[0-9]+*'
 
 jobs:
   deploy:
@@ -34,4 +33,4 @@ jobs:
         mv ../book/* .
         git add .
         git commit -m "Deploy book $GITHUB_SHA to gh-pages"
-        git push --force --set-upstream origin gh-pages
+        git push --force --set-upstream origin gh-pages

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

@@ -9,6 +9,7 @@ on:
       cargo_make_task:
         required: true
         type: string
+
 env:
   CARGO_TERM_COLOR: always
   CARGO_REGISTRIES_CRATES_IO_PROTOCOL: sparse
@@ -26,11 +27,6 @@ jobs:
 
     steps:
       # Setup environment
-      - name: Install playwright browser dependencies
-        run: |
-          sudo apt-get update
-          sudo apt-get install libegl1 libvpx7 libevent-2.1-7 libopus0 libopengl0 libwoff1 libharfbuzz-icu0 libgstreamer-plugins-base1.0-0 libgstreamer-gl1.0-0 libhyphen0 libmanette-0.2-0 libgles2 gstreamer1.0-libav
-
       - uses: actions/checkout@v3
 
       - name: Setup Rust
@@ -84,12 +80,35 @@ 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: |
+          playwright_count=$(find ${{inputs.directory}} -name playwright.config.ts | wc -l)
+          if [ $playwright_count -eq 1 ]; then
+              echo playwright required
+              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
+          else
+              echo playwright is not required
+          fi
+
       # 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,16 @@ 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"

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);

benchmarks/src/reactive.rs

@@ -7,15 +7,15 @@ fn leptos_deep_creation(b: &mut Bencher) {
     let runtime = create_runtime();
 
     b.iter(|| {
-        create_scope(runtime, |cx| {
-            let signal = create_rw_signal(cx, 0);
+        create_scope(runtime, || {
+            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(cx, move |_| prev.get() + 1));
+                    memos.push(create_memo(move |_| prev.get() + 1));
                 } else {
-                    memos.push(create_memo(cx, move |_| signal.get() + 1));
+                    memos.push(create_memo(move |_| signal.get() + 1));
                 }
             }
         })
@@ -31,14 +31,14 @@ fn leptos_deep_update(b: &mut Bencher) {
     let runtime = create_runtime();
 
     b.iter(|| {
-        create_scope(runtime, |cx| {
-            let signal = create_rw_signal(cx, 0);
+        create_scope(runtime, || {
+            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(cx, move |_| prev.get() + 1));
+                    memos.push(create_memo(move |_| prev.get() + 1));
                 } else {
-                    memos.push(create_memo(cx, move |_| signal.get() + 1));
+                    memos.push(create_memo(move |_| signal.get() + 1));
                 }
             }
             signal.set(1);
@@ -56,12 +56,11 @@ 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<_>>();
+        create_scope(runtime, || {
+            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(cx, move |_| {
+            let memo = create_memo(move |_| {
                 reads.iter().map(|r| r.get()).sum::<i32>()
             });
             assert_eq!(memo(), 499500);
@@ -78,10 +77,10 @@ fn leptos_fanning_out(b: &mut Bencher) {
     let runtime = create_runtime();
 
     b.iter(|| {
-        create_scope(runtime, |cx| {
-            let sig = create_rw_signal(cx, 0);
+        create_scope(runtime, || {
+            let sig = create_rw_signal(0);
             let memos = (0..1000)
-                .map(|_| create_memo(cx, move |_| sig.get()))
+                .map(|_| create_memo(move |_| sig.get()))
                 .collect::<Vec<_>>();
             assert_eq!(memos.iter().map(|m| m.get()).sum::<i32>(), 0);
             sig.set(1);
@@ -99,17 +98,16 @@ fn leptos_narrowing_update(b: &mut Bencher) {
     let runtime = create_runtime();
 
     b.iter(|| {
-        create_scope(runtime, |cx| {
+        create_scope(runtime, || {
             let acc = Rc::new(Cell::new(0));
-            let sigs =
-                (0..1000).map(|n| create_signal(cx, n)).collect::<Vec<_>>();
+            let sigs = (0..1000).map(|n| create_signal(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 |_| {
+            let memo = create_memo(move |_| {
                 reads.iter().map(|r| r.get()).sum::<i32>()
             });
             assert_eq!(memo(), 499500);
-            create_isomorphic_effect(cx, {
+            create_isomorphic_effect({
                 let acc = Rc::clone(&acc);
                 move |_| {
                     acc.set(memo());
@@ -141,9 +139,9 @@ fn leptos_scope_creation_and_disposal(b: &mut Bencher) {
             .map(|_| {
                 create_scope(runtime, {
                     let acc = Rc::clone(&acc);
-                    move |cx| {
-                        let (r, w) = create_signal(cx, 0);
-                        create_isomorphic_effect(cx, {
+                    move || {
+                        let (r, w) = create_signal(0);
+                        create_isomorphic_effect({
                             move |_| {
                                 acc.set(r());
                             }
@@ -163,7 +161,9 @@ fn leptos_scope_creation_and_disposal(b: &mut Bencher) {
 
 #[bench]
 fn rs_deep_update(b: &mut Bencher) {
-    use reactive_signals::{Scope, Signal, signal, runtimes::ClientRuntime, types::Func};
+    use reactive_signals::{
+        runtimes::ClientRuntime, signal, types::Func, Scope, Signal,
+    };
 
     let sc = ClientRuntime::new_root_scope();
     b.iter(|| {
@@ -184,7 +184,9 @@ fn rs_deep_update(b: &mut Bencher) {
 
 #[bench]
 fn rs_fanning_out(b: &mut Bencher) {
-    use reactive_signals::{Scope, Signal, signal, runtimes::ClientRuntime, types::Func};
+    use reactive_signals::{
+        runtimes::ClientRuntime, signal, types::Func, Scope, Signal,
+    };
     let cx = ClientRuntime::new_root_scope();
 
     b.iter(|| {
@@ -200,18 +202,17 @@ fn rs_fanning_out(b: &mut Bencher) {
 
 #[bench]
 fn rs_narrowing_update(b: &mut Bencher) {
-    use reactive_signals::{Scope, Signal, signal, runtimes::ClientRuntime, types::Func};
+    use reactive_signals::{
+        runtimes::ClientRuntime, signal, types::Func, Scope, Signal,
+    };
     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 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>()
-            }
+            move || sigs.iter().map(|r| r.get()).sum::<i32>()
         });
         assert_eq!(memo.get(), 499500);
         signal!(cx, {

benchmarks/src/ssr.rs

@@ -7,7 +7,7 @@ fn leptos_ssr_bench(b: &mut Bencher) {
 		leptos_dom::HydrationCtx::reset_id();
 		_ = create_scope(create_runtime(), |cx| {
 			#[component]
-			fn Counter(cx: Scope, initial: i32) -> impl IntoView {
+			fn Counter(initial: i32) -> impl IntoView {
 				let (value, set_value) = create_signal(cx, initial);
 				view! {
 					cx,

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()/> }
+                            view=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

@@ -12,8 +12,8 @@ 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);
     });

docs/book/src/01_introduction.md

@@ -17,4 +17,4 @@ 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.**
+> 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

@@ -26,7 +26,7 @@ cargo init leptos-tutorial
 cargo add leptos --features=csr,nightly
 ```
 
-Or you can leave off `nighly` if you're using stable Rust
+Or you can leave off `nightly` if you're using stable Rust
 
 ```bash
 cargo add leptos --features=csr

docs/book/src/SUMMARY.md

@@ -43,5 +43,6 @@
   - [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)

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/11_suspense.md

@@ -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
+        bind: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_website /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_website"]
+```
+
+> Read more: [`gnu` and `musl` build files for Leptos apps](https://github.com/leptos-rs/leptos/issues/1152#issuecomment-1634916088).

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

@@ -109,6 +109,34 @@ 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/router/16_routes.md

@@ -94,7 +94,7 @@ 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.
 

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>
@@ -205,7 +205,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/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/testing.md

@@ -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 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

@@ -224,11 +224,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
@@ -294,11 +293,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 +306,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 +335,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 +348,8 @@ fn ProgressBar(
 }
 
 #[component]
-pub fn App(cx: Scope) -> impl IntoView {
-    view! { cx,
+pub fn App() -> impl IntoView {
+    view! {
         <ProgressBar/>
     }
 }
@@ -397,6 +394,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

@@ -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

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]
@@ -48,9 +49,9 @@ jq -R -s -c 'split("\n")[:-1]')
 echo "CARGO_MAKE_CRATE_WORKSPACE_MEMBERS = $examples"
 '''
 
-[tasks.test-info]
+[tasks.test-runner-report]
 workspace = false
-description = "report ci test runners for each example - Option [all]"
+description = "report ci test runners for each example - OPTION: [all]"
 script = '''
 BOLD="\e[1m"
 GREEN="\e[0;32m"
@@ -59,63 +60,53 @@ YELLOW="\e[0;33m"
 RESET="\e[0m"
 
 echo
-echo "${YELLOW}CI test runners by example...${RESET}"
+echo "${YELLOW}Test Runner Report${RESET}"
+echo "${ITALIC}Pass the option \"all\" to show all the examples${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/*' |
+  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
-
-  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)
+for path in $makefile_paths; do
+  cd $path
 
   test_runner=
 
-  if [ $c_tests -gt 0 ]; then
+  test_count=$(grep -rl -E "#\[(test|rstest)\]" | wc -l)
+  if [ $test_count -gt 0 ]; then
     test_runner="-C"
   fi
 
-  if [ $rs_tests -gt 0 ]; then
-    test_runner=$test_runner"-R"
-  fi
+  while read -r line; do
+    case $line in
+      *"wasm-test.toml"*)
+          test_runner=$test_runner"-W"
+        ;;
+      *"playwright-test.toml"*)
+          test_runner=$test_runner"-P"
+        ;;
+      *"cargo-leptos-test.toml"*)
+          test_runner=$test_runner"-L"
+        ;;
+    esac
+  done <"./Makefile.toml"
 
-  if [ $w_configs -gt 0 ]; then
-    test_runner=$test_runner"-W"
-  fi
-
-  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
     # Show all examples
-    echo "$clean_name ${BOLD}${test_runner}${RESET}"
+    echo "$path ${BOLD}${test_runner}${RESET}"
   elif [ ! -z $test_runner ]; then
     # Filter out examples that do not run tests in `ci`
-    echo "$clean_name ${BOLD}${test_runner}${RESET}"
+    echo "$path ${BOLD}${test_runner}${RESET}"
   fi
 
-  cd $example_root_dir
+  cd ${start_path}
 done
 echo
-echo "${ITALIC}Test Runners: C = Cargo Test, L = Cargo Leptos Test, P = Playwright Test, R = RS Test, W = WASM Test${RESET}"
+echo "${ITALIC}Runners: C = Cargo Test, L = Cargo Leptos Test, P = Playwright Test, W = WASM Test${RESET}"
 echo
 '''

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,5 +1,7 @@
+extend = { path = "./cargo-leptos.toml" }
+
 [tasks.integration-test]
-dependencies = ["cargo-leptos-e2e"]
+dependencies = ["install-cargo-leptos", "cargo-leptos-e2e"]
 
 [tasks.cargo-leptos-e2e]
 command = "cargo"

examples/cargo-make/cargo-leptos.toml

@@ -0,0 +1,55 @@
+[tasks.install-cargo-leptos]
+install_crate = { crate_name = "cargo-leptos", binary = "cargo-leptos", test_arg = "--help" }
+
+[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]
+command = "cargo"
+args = ["leptos", "watch"]
+
+[tasks.stop-client]
+condition = { env_set = ["APP_PROCESS_NAME"] }
+script = '''
+  if [ ! -z $(pidof ${APP_PROCESS_NAME}) ]; then
+    pkill -f todo_app_sqlite
+  fi
+
+  if [ ! -z $(pidof ${APP_PROCESS_NAME}) ]; then
+    pkill -f cargo-leptos
+  fi
+'''
+
+[tasks.client-status]
+condition = { env_set = ["APP_PROCESS_NAME"] }
+script = '''
+  if [ -z $(pidof ${APP_PROCESS_NAME}) ]; then
+    echo "  ${APP_PROCESS_NAME} is not running"
+  else
+    echo "  ${APP_PROCESS_NAME} is up"
+  fi
+
+  if [ -z $(pidof cargo-leptos) ]; then
+    echo "  cargo-leptos is not running"
+  else
+    echo "  cargo-leptos is up"
+  fi
+'''

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_isomorphic/src/counters.rs

@@ -112,9 +112,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),
         })
@@ -159,7 +159,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_without_macros/src/lib.rs

@@ -11,29 +11,27 @@ pub fn counter(initial_value: i32, step: u32) -> impl IntoView {
         // 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()))
                 .child("Clear"),
-        )
-        .child(
             button()
                 .on(ev::click, move |_| {
                     set_count.update(|count| 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(
             button()
                 .on(ev::click, move |_| {

examples/fetch/src/lib.rs

@@ -67,14 +67,12 @@ pub fn fetch_example() -> impl IntoView {
     // the renderer can handle Option<_> and Result<_> states
     // by displaying nothing for None if the resource is still loading
     // and by using the ErrorBoundary fallback to catch Err(_)
-    // so we'll just implement our happy path and let the framework handle the rest
+    // so we'll just use `.and_then()` to map over the happy path
     let cats_view = move || {
-        cats.read().map(|data| {
-            data.map(|data| {
-                data.iter()
-                    .map(|s| view! { <p><img src={s}/></p> })
-                    .collect_view()
-            })
+        cats.and_then(|data| {
+            data.iter()
+                .map(|s| view! { <p><img src={s}/></p> })
+                .collect_view()
         })
     };
 

examples/hackernews/src/api.rs

@@ -17,6 +17,14 @@ where
     let abort_controller = web_sys::AbortController::new().ok();
     let abort_signal = abort_controller.as_ref().map(|a| a.signal());
 
+    // abort in-flight requests if the Scope is disposed
+    // i.e., if we've navigated away from this page
+    leptos::on_cleanup(move || {
+        if let Some(abort_controller) = abort_controller {
+            abort_controller.abort()
+        }
+    });
+
     let json = gloo_net::http::Request::get(path)
         .abort_signal(abort_signal.as_ref())
         .send()
@@ -27,13 +35,6 @@ where
         .await
         .ok()?;
 
-    // abort in-flight requests if the Scope is disposed
-    // i.e., if we've navigated away from this page
-    leptos::on_cleanup(move || {
-        if let Some(abort_controller) = abort_controller {
-            abort_controller.abort()
-        }
-    });
     T::de(&json).ok()
 }
 

examples/hackernews/src/lib.rs

@@ -18,7 +18,9 @@ pub fn App() -> impl IntoView {
         // adding `set_is_routing` causes the router to wait for async data to load on new pages
         <Router set_is_routing>
             // shows a progress bar while async data are loading
-            <RoutingProgress is_routing max_time=std::time::Duration::from_millis(250)/>
+            <div class="routing-progress">
+                <RoutingProgress is_routing max_time=std::time::Duration::from_millis(250)/>
+            </div>
             <Nav />
             <main>
                 <Routes>

examples/hackernews/src/main.rs

@@ -26,12 +26,7 @@ cfg_if! {
 
             let addr = conf.leptos_options.site_addr;
             // Generate the list of routes in your Leptos App
-
-            eprintln!("\n\ngenerating routes\n\n");
-
-            let routes = generate_route_list(|| view! { <App/> });
-
-            eprintln!("\n\ndone generating routes\n\n");
+            let routes = generate_route_list(App);
 
             HttpServer::new(move || {
                 let leptos_options = &conf.leptos_options;
@@ -41,7 +36,7 @@ cfg_if! {
                     .service(css)
                     .service(favicon)
                     .route("/api/{tail:.*}", leptos_actix::handle_server_fns())
-                    .leptos_routes(leptos_options.to_owned(), routes.to_owned(), || view! { <App/> })
+                    .leptos_routes(leptos_options.to_owned(), routes.to_owned(), App)
                     .service(Files::new("/", site_root))
                 //.wrap(middleware::Compress::default())
             })

examples/hackernews/src/routes/nav.rs

@@ -21,7 +21,7 @@ pub fn Nav() -> impl IntoView {
                 <A href="/job">
                     <strong>"Jobs"</strong>
                 </A>
-                <a class="github" href="http://github.com/gbj/leptos" target="_blank" rel="noreferrer">
+                <a class="github" href="http://github.com/leptos-rs/leptos" target="_blank" rel="noreferrer">
                     "Built with Leptos"
                 </a>
             </nav>

examples/hackernews/src/routes/stories.rs

@@ -37,7 +37,7 @@ pub fn Stories() -> impl IntoView {
 
     let hide_more_link = move || {
         pending()
-            || stories.read().unwrap_or(None).unwrap_or_default().len() < 28
+            || stories.get().unwrap_or(None).unwrap_or_default().len() < 28
     };
 
     view! {
@@ -86,7 +86,7 @@ pub fn Stories() -> impl IntoView {
                         fallback=move || view! {  <p>"Loading..."</p> }
                         set_pending=set_pending.into()
                     >
-                        {move || match stories.read() {
+                        {move || match stories.get() {
                             None => None,
                             Some(None) => Some(view! {  <p>"Error loading stories."</p> }.into_any()),
                             Some(Some(stories)) => {

examples/hackernews/src/routes/story.rs

@@ -19,7 +19,7 @@ pub fn Story() -> impl IntoView {
     );
     let meta_description = move || {
         story
-            .read()
+            .get()
             .and_then(|story| story.map(|story| story.title))
             .unwrap_or_else(|| "Loading story...".to_string())
     };
@@ -28,7 +28,7 @@ pub fn Story() -> impl IntoView {
         <>
             <Meta name="description" content=meta_description/>
                 <Suspense fallback=|| view! { "Loading..." }>
-                    {move || story.read().map(|story| match story {
+                    {move || story.get().map(|story| match story {
                         None => view! {  <div class="item-view">"Error loading this story."</div> },
                         Some(story) => view! {
                             <div class="item-view">

examples/hackernews/src/routes/users.rs

@@ -18,7 +18,7 @@ pub fn User() -> impl IntoView {
     view! {
         <div class="user-view">
             <Suspense fallback=|| view! { "Loading..." }>
-                {move || user.read().map(|user| match user {
+                {move || user.get().map(|user| match user {
                     None => view! {  <h1>"User not found."</h1> }.into_view(),
                     Some(user) => view! {
                         <div>

examples/hackernews/style.css

@@ -323,4 +323,9 @@ a {
 
 .user-view .links a {
 	text-decoration: underline
+}
+
+.routing-progress, .routing-progress progress {
+	height: 10px;
+	width: 100%;
 }

examples/hackernews_axum/src/api.rs

@@ -17,6 +17,14 @@ where
     let abort_controller = web_sys::AbortController::new().ok();
     let abort_signal = abort_controller.as_ref().map(|a| a.signal());
 
+    // abort in-flight requests if the Scope is disposed
+    // i.e., if we've navigated away from this page
+    leptos::on_cleanup(move || {
+        if let Some(abort_controller) = abort_controller {
+            abort_controller.abort()
+        }
+    });
+
     let json = gloo_net::http::Request::get(path)
         .abort_signal(abort_signal.as_ref())
         .send()
@@ -27,12 +35,6 @@ where
         .await
         .ok()?;
 
-    // abort in-flight requests if e.g., we've navigated away from this page
-    leptos::on_cleanup(move || {
-        if let Some(abort_controller) = abort_controller {
-            abort_controller.abort()
-        }
-    });
     T::de(&json).ok()
 }
 

examples/hackernews_axum/src/routes/nav.rs

@@ -21,7 +21,7 @@ pub fn Nav() -> impl IntoView {
                 <A href="/job">
                     <strong>"Jobs"</strong>
                 </A>
-                <a class="github" href="http://github.com/gbj/leptos" target="_blank" rel="noreferrer">
+                <a class="github" href="http://github.com/leptos-rs/leptos" target="_blank" rel="noreferrer">
                     "Built with Leptos"
                 </a>
             </nav>

examples/hackernews_axum/src/routes/stories.rs

@@ -37,7 +37,7 @@ pub fn Stories() -> impl IntoView {
 
     let hide_more_link = move || {
         pending()
-            || stories.read().unwrap_or(None).unwrap_or_default().len() < 28
+            || stories.get().unwrap_or(None).unwrap_or_default().len() < 28
     };
 
     view! {
@@ -86,7 +86,7 @@ pub fn Stories() -> impl IntoView {
                         fallback=move || view! { <p>"Loading..."</p> }
                         set_pending=set_pending.into()
                     >
-                        {move || match stories.read() {
+                        {move || match stories.get() {
                             None => None,
                             Some(None) => Some(view! { <p>"Error loading stories."</p> }.into_any()),
                             Some(Some(stories)) => {

examples/hackernews_axum/src/routes/story.rs

@@ -19,7 +19,7 @@ pub fn Story() -> impl IntoView {
     );
     let meta_description = move || {
         story
-            .read()
+            .get()
             .and_then(|story| story.map(|story| story.title))
             .unwrap_or_else(|| "Loading story...".to_string())
     };
@@ -28,7 +28,7 @@ pub fn Story() -> impl IntoView {
         <>
             <Meta name="description" content=meta_description/>
                 <Suspense fallback=|| view! {  "Loading..." }>
-                    {move || story.read().map(|story| match story {
+                    {move || story.get().map(|story| match story {
                         None => view! { <div class="item-view">"Error loading this story."</div> },
                         Some(story) => view! {
                             <div class="item-view">

examples/hackernews_axum/src/routes/users.rs

@@ -18,7 +18,7 @@ pub fn User() -> impl IntoView {
     view! {
         <div class="user-view">
             <Suspense fallback=|| view! {  "Loading..." }>
-                {move || user.read().map(|user| match user {
+                {move || user.get().map(|user| match user {
                     None => view! { <h1>"User not found."</h1> }.into_any(),
                     Some(user) => view! {
                         <div>

examples/login_with_token_csr_only/client/src/lib.rs

@@ -115,7 +115,7 @@ pub fn App() -> impl IntoView {
                                         log::info!("Successfully logged in");
                                         authorized_api.update(|v| *v = Some(api));
                                         let navigate = use_navigate();
-                                        navigate(Page::Home.path(), Default::default()).expect("Home route");
+                                        navigate(Page::Home.path(), Default::default());
                                         fetch_user_info.dispatch(());
                                     }
                                 />

examples/router/src/lib.rs

@@ -87,7 +87,7 @@ pub fn ContactList() -> impl IntoView {
     let location = use_location();
     let contacts = create_resource(move || location.search.get(), get_contacts);
     let contacts = move || {
-        contacts.read().map(|contacts| {
+        contacts.get().map(|contacts| {
             // this data doesn't change frequently so we can use .map().collect() instead of a keyed <For/>
             contacts
                 .into_iter()
@@ -147,7 +147,7 @@ pub fn Contact() -> impl IntoView {
         log!("params = {:#?}", params.get());
     });
 
-    let contact_display = move || match contact.read() {
+    let contact_display = move || match contact.get() {
         // None => loading, but will be caught by Suspense fallback
         // I'm only doing this explicitly for the example
         None => None,
@@ -198,7 +198,7 @@ pub fn About() -> impl IntoView {
             // <button on:click> to navigate is an *anti-pattern*
             // you should ordinarily use a link instead,
             // both semantically and so your link will work before WASM loads
-            <button on:click=move |_| { _ = navigate("/", Default::default()); }>
+            <button on:click=move |_| navigate("/", Default::default())>
                 "Home"
             </button>
             <h1>"About"</h1>

examples/session_auth_axum/src/main.rs

@@ -33,7 +33,8 @@ if #[cfg(feature = "ssr")] {
     }
 
     async fn leptos_routes_handler(auth_session: AuthSession, State(app_state): State<AppState>, req: Request<AxumBody>) -> Response{
-            let handler = leptos_axum::render_app_to_stream_with_context(app_state.leptos_options.clone(),
+            let handler = leptos_axum::render_route_with_context(app_state.leptos_options.clone(),
+            app_state.routes.clone(),
             move || {
                 provide_context(auth_session.clone());
                 provide_context(app_state.pool.clone());
@@ -84,6 +85,7 @@ if #[cfg(feature = "ssr")] {
         let app_state = AppState{
             leptos_options,
             pool: pool.clone(),
+            routes: routes.clone(),
         };
 
         // build our application with a route

examples/session_auth_axum/src/state.rs

@@ -5,13 +5,14 @@ cfg_if! {
 use leptos::LeptosOptions;
 use sqlx::SqlitePool;
 use axum::extract::FromRef;
-
+use leptos_router::RouteListing;
 /// This takes advantage of Axum's SubStates feature by deriving FromRef. This is the only way to have more than one
 /// item in Axum's State. Leptos requires you to have leptosOptions in your State struct for the leptos route handlers
 #[derive(FromRef, Debug, Clone)]
 pub struct AppState{
     pub leptos_options: LeptosOptions,
-    pub pool: SqlitePool
+    pub pool: SqlitePool,
+    pub routes: Vec<RouteListing>,
 }
     }
 }

examples/session_auth_axum/src/todo.rs

@@ -147,7 +147,7 @@ pub fn TodoApp() -> impl IntoView {
                     fallback=move || view! {<span>"Loading..."</span>}
                 >
                 {move || {
-                    user.read().map(|user| match user {
+                    user.get().map(|user| match user {
                         Err(e) => view! {
                             <A href="/signup">"Signup"</A>", "
                             <A href="/login">"Login"</A>", "
@@ -215,7 +215,7 @@ pub fn Todos() -> impl IntoView {
                     {move || {
                         let existing_todos = {
                             move || {
-                                todos.read()
+                                todos.get()
                                     .map(move |todos| match todos {
                                         Err(e) => {
                                             view! { <pre class="error">"Server Error: " {e.to_string()}</pre>}.into_view()

examples/ssr_modes/src/app.rs

@@ -27,6 +27,11 @@ pub fn App() -> impl IntoView {
                         view=Post
                         ssr=SsrMode::Async
                     />
+                    <Route
+                        path="/post_in_order/:id"
+                        view=Post
+                        ssr=SsrMode::InOrder
+                    />
                 </Routes>
             </main>
         </Router>
@@ -39,14 +44,16 @@ fn HomePage() -> impl IntoView {
     let posts =
         create_resource(|| (), |_| async { list_post_metadata().await });
     let posts_view = move || {
-        posts.with(|posts| posts
-            .clone()
-            .map(|posts| {
-                posts.iter()
-                .map(|post| view! { <li><a href=format!("/post/{}", post.id)>{&post.title}</a></li>})
-                .collect_view()
-            })
-        )
+        posts.and_then(|posts| {
+                        posts.iter()
+                            .map(|post| view! {
+                                <li>
+                                    <a href=format!("/post/{}", post.id)>{&post.title}</a> "|"
+                                    <a href=format!("/post_in_order/{}", post.id)>{&post.title}"(in order)"</a>
+                                </li>
+                            })
+                            .collect_view()
+                    })
     };
 
     view! {
@@ -81,21 +88,22 @@ fn Post() -> impl IntoView {
         }
     });
 
+    // this view needs to take the `Scope` from the `<Suspense/>`, not
+    // from the parent component, so we take that as an argument and
+    // pass it in under the `<Suspense/>` so that it is correct
     let post_view = move || {
-        post.with(|post| {
-            post.clone().map(|post| {
-                view! {
-                    // render content
-                    <h1>{&post.title}</h1>
-                    <p>{&post.content}</p>
+        post.and_then(|post| {
+            view! {
+                // render content
+                <h1>{&post.title}</h1>
+                <p>{&post.content}</p>
 
-                    // since we're using async rendering for this page,
-                    // this metadata should be included in the actual HTML <head>
-                    // when it's first served
-                    <Title text=post.title/>
-                    <Meta name="description" content=post.content/>
-                }
-            })
+                // since we're using async rendering for this page,
+                // this metadata should be included in the actual HTML <head>
+                // when it's first served
+                <Title text=post.title.clone()/>
+                <Meta name="description" content=post.content.clone()/>
+            }
         })
     };
 

examples/ssr_modes_axum/src/app.rs

@@ -43,22 +43,23 @@ fn HomePage() -> impl IntoView {
     // load the posts
     let posts =
         create_resource(|| (), |_| async { list_post_metadata().await });
+    let posts_view = move || {
+        posts.and_then(|posts| {
+            posts.iter()
+                .map(|post| view! {
+                    <li>
+                        <a href=format!("/post/{}", post.id)>{&post.title}</a> "|"
+                        <a href=format!("/post_in_order/{}", post.id)>{&post.title}"(in order)"</a>
+                    </li>
+                })
+                .collect_view()
+        })
+    };
 
     view! {
         <h1>"My Great Blog"</h1>
         <Suspense fallback=move || view! { <p>"Loading posts..."</p> }>
-            <ul>
-                {move || {
-                    posts.with(|posts| posts
-                        .clone()
-                        .map(|posts| {
-                            posts.iter()
-                            .map(|post| view! { <li><a href=format!("/post/{}", post.id)>{&post.title}</a> "|" <a href=format!("/post_in_order/{}", post.id)>{&post.title}"(in order)"</a></li>})
-                            .collect_view()
-                        })
-                    )
-                }}
-            </ul>
+            <ul>{posts_view}</ul>
         </Suspense>
     }
 }
@@ -91,23 +92,19 @@ fn Post() -> impl IntoView {
     // from the parent component, so we take that as an argument and
     // pass it in under the `<Suspense/>` so that it is correct
     let post_view = move || {
-        move || {
-            post.with(|post| {
-                post.clone().map(|post| {
-                    view! {
-                        // render content
-                        <h1>{&post.title}</h1>
-                        <p>{&post.content}</p>
+        post.and_then(|post| {
+            view! {
+                // render content
+                <h1>{&post.title}</h1>
+                <p>{&post.content}</p>
 
-                        // since we're using async rendering for this page,
-                        // this metadata should be included in the actual HTML <head>
-                        // when it's first served
-                        <Title text=post.title/>
-                        <Meta name="description" content=post.content/>
-                    }
-                })
-            })
-        }
+                // since we're using async rendering for this page,
+                // this metadata should be included in the actual HTML <head>
+                // when it's first served
+                <Title text=post.title.clone()/>
+                <Meta name="description" content=post.content.clone()/>
+            }
+        })
     };
 
     view! {

examples/suspense_tests/Cargo.toml

@@ -1,5 +1,5 @@
 [package]
-name = "leptos_start"
+name = "suspense_tests"
 version = "0.1.0"
 edition = "2021"
 
@@ -12,9 +12,9 @@ actix-web = { version = "4", optional = true, features = ["macros"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 cfg-if = "1"
-leptos = { path = "../../..", features = ["serde"] }
-leptos_actix = { path = "../../../../integrations/actix", optional = true }
-leptos_router = { path = "../../../../router" }
+leptos = { path = "../../leptos", features = ["serde"] }
+leptos_actix = { path = "../../integrations/actix", optional = true }
+leptos_router = { path = "../../router" }
 log = "0.4"
 simple_logger = "4"
 wasm-bindgen = "0.2.87"
@@ -34,7 +34,7 @@ ssr = [
 
 [package.metadata.leptos]
 # The name used by wasm-bindgen/cargo-leptos for the JS/WASM bundle. Defaults to the crate name   
-output-name = "leptos_start"
+output-name = "suspense_tests"
 # The site root folder is where cargo-leptos generate all output. WARNING: all content of this folder will be erased on a rebuild. Use it in your server setup.
 site-root = "target/site"
 # The site-root relative folder where all compiled output (JS, WASM and CSS) is written
@@ -47,8 +47,8 @@ reload-port = 3001
 # [Optional] Command to use when running end2end tests. It will run in the end2end dir.
 #   [Windows] for non-WSL use "npx.cmd playwright test"
 #   This binary name can be checked in Powershell with Get-Command npx
-end2end-cmd = "npx playwright test"
-end2end-dir = "end2end"
+end2end-cmd = "cargo make test-ui"
+end2end-dir = "e2e"
 #  The browserlist query used for optimizing the CSS.
 browserquery = "defaults"
 # Set by cargo-leptos watch when building with that tool. Controls whether autoreload JS will be included in the head
@@ -74,5 +74,3 @@ lib-features = ["hydrate"]
 #
 # Optional. Defaults to false.
 lib-default-features = false
-
-[workspace]

examples/suspense_tests/Makefile.toml

@@ -0,0 +1,24 @@
+extend = [
+    { path = "../cargo-make/main.toml" },
+    { path = "../cargo-make/webdriver.toml" },
+    { path = "../cargo-make/cargo-leptos.toml" },
+]
+
+[env]
+APP_PROCESS_NAME = "suspense_tests"
+
+[tasks.integration-test]
+dependencies = [
+    "install-cargo-leptos",
+    "start-webdriver",
+    "test-e2e-with-auto-start",
+]
+
+[tasks.test-e2e-with-auto-start]
+command = "cargo"
+args = ["leptos", "end-to-end"]
+
+[tasks.test-ui]
+cwd = "./e2e"
+command = "cargo"
+args = ["make", "test-ui", "${@}"]

examples/suspense_tests/README.md

@@ -47,15 +47,35 @@ After running a `cargo leptos build --release` the minimum files needed are:
 
 Copy these files to your remote server. The directory structure should be:
 ```text
-leptos_start
+suspense_tests
 site/
 ```
 Set the following enviornment variables (updating for your project as needed):
 ```text
-LEPTOS_OUTPUT_NAME="leptos_start"
+LEPTOS_OUTPUT_NAME="suspense_tests"
 LEPTOS_SITE_ROOT="site"
 LEPTOS_SITE_PKG_DIR="pkg"
 LEPTOS_SITE_ADDR="127.0.0.1:3000"
 LEPTOS_RELOAD_PORT="3001"
 ```
 Finally, run the server binary.
+
+## Testing
+
+This example includes quality checks and end-to-end testing.
+
+To get started run this once.
+
+```bash
+cargo make ci
+```
+
+To only run the UI tests...
+
+```bash
+cargo make start-webdriver
+cargo leptos watch # or cargo run...
+cargo make test-ui
+```
+
+_See the [E2E README](./e2e/README.md) for more information about the testing strategy._

examples/suspense_tests/e2e/Cargo.toml

@@ -0,0 +1,18 @@
+[package]
+name = "suspense_tests_e2e"
+version = "0.1.0"
+edition = "2021"
+
+[dev-dependencies]
+anyhow = "1.0.72"
+async-trait = "0.1.72"
+cucumber = "0.19.1"
+fantoccini = "0.19.3"
+pretty_assertions = "1.4.0"
+serde_json = "1.0.104"
+tokio = { version = "1.29.1", features = ["macros", "rt-multi-thread", "time"] }
+url = "2.4.0"
+
+[[test]]
+name = "app_suite"
+harness = false    # Allow Cucumber to print output instead of libtest

examples/suspense_tests/e2e/Makefile.toml

@@ -0,0 +1,20 @@
+extend = { path = "../../cargo-make/main.toml" }
+
+[tasks.test]
+env = { RUN_AUTOMATICALLY = false }
+condition = { env_true = ["RUN_AUTOMATICALLY"] }
+
+[tasks.ci]
+
+[tasks.test-ui]
+command = "cargo"
+args = [
+    "test",
+    "--test",
+    "app_suite",
+    "--",
+    "--retry",
+    "2",
+    "--fail-fast",
+    "${@}",
+]

examples/suspense_tests/e2e/README.md

@@ -0,0 +1,34 @@
+# E2E Testing
+
+This example demonstrates e2e testing with Rust using executable requirements.
+
+## Testing Stack
+
+|    |      Role      |  Description |
+|---|---|---|
+| [Cucumber](https://github.com/cucumber-rs/cucumber/tree/main) | Test Runner | Run [Gherkin](https://cucumber.io/docs/gherkin/reference/) specifications as Rust tests |
+| [Fantoccini](https://github.com/jonhoo/fantoccini/tree/main) | Browser Client | Interact with web pages through WebDriver |
+| [Cargo Leptos ](https://github.com/leptos-rs/cargo-leptos) | Build Tool |  Compile example and start the server and end-2-end tests |
+| [chromedriver](https://chromedriver.chromium.org/downloads) | WebDriver | Provide WebDriver for Chrome
+
+## Testing Organization
+
+Testing is organized around what a user can do and see/not see. Test scenarios are grouped by the **user action** and the **object** of that action. This makes it easier to locate and reason about requirements.
+
+Here is a brief overview of how things fit together.
+
+```bash
+features
+└── {action}_{object}.feature   # Specify test scenarios
+tests
+├── fixtures
+│   ├── action.rs               # Perform a user action (click, type, etc.)
+│   ├── check.rs                # Assert what a user can see/not see
+│   ├── find.rs                 # Query page elements
+│   ├── mod.rs
+│   └── world
+│       ├── action_steps.rs     # Map Gherkin steps to user actions
+│       ├── check_steps.rs      # Map Gherkin steps to user expectations
+│       └── mod.rs
+└── app_suite.rs                # Test main 
+```

examples/suspense_tests/e2e/features/click_inside_component_count.feature

@@ -0,0 +1,19 @@
+@click_inside_component_count
+Feature: Click Inside Component Count
+
+    Background:
+
+        Given I see the app
+
+    Scenario Outline: Should increase the count
+
+        Given I select the mode <Mode>
+        And I select the component Inside Component
+        When I click the count 3 times
+        Then I see the count is 3
+
+        Examples:
+            | Mode         |
+            | Out-of-Order |
+            | In-Order     |
+            | Async        |

examples/suspense_tests/e2e/features/click_nested_count.feature

@@ -0,0 +1,19 @@
+@click_nested_count
+Feature: Click Nested Count
+
+    Background:
+
+        Given I see the app
+
+    Scenario Outline: Should increase the count
+
+        Given I select the mode <Mode>
+        And I select the component Nested
+        When I click the count 3 times
+        Then I see the count is 3
+
+        Examples:
+            | Mode         |
+            | Out-of-Order |
+            | In-Order     |
+            | Async        |

examples/suspense_tests/e2e/features/click_nested_inside_count.feature

@@ -0,0 +1,19 @@
+@click_nested_inside_count
+Feature: Click Nested Inside Count
+
+    Background:
+
+        Given I see the app
+
+    Scenario Outline: Should increase the count
+
+        Given I select the mode <Mode>
+        And I select the component Nested (resource created inside)
+        When I click the count 3 times
+        Then I see the count is 3
+
+        Examples:
+            | Mode         |
+            | Out-of-Order |
+            | In-Order     |
+            | Async        |

examples/suspense_tests/e2e/features/click_no_resources_count_1.feature

@@ -0,0 +1,20 @@
+@click_no_resources_counts
+Feature: Click No Resources Count (1)
+
+    Background:
+
+        Given I see the app
+
+    Scenario Outline: Should increase the first and second counts
+
+        Given I select the mode <Mode>
+        And I select the component No Resources
+        When I click the first count 3 times
+        Then I see the first count is 3
+        And I see the second count is 3
+
+        Examples:
+            | Mode         |
+            | Out-of-Order |
+            | In-Order     |
+            | Async        |

examples/suspense_tests/e2e/features/click_no_resources_count_2.feature

@@ -0,0 +1,20 @@
+@click_no_resources_counts_2
+Feature: Click No Resources Count (2)
+
+    Background:
+
+        Given I see the app
+
+    Scenario Outline: Should increase the first and second counts
+
+        Given I select the mode <Mode>
+        And I select the component No Resources
+        When I click the second count 3 times
+        Then I see the first count is 3
+        And I see the second count is 3
+
+        Examples:
+            | Mode         |
+            | Out-of-Order |
+            | In-Order     |
+            | Async        |

examples/suspense_tests/e2e/features/click_parallel_count_1.feature

@@ -0,0 +1,20 @@
+@click_parallel_counts_1
+Feature: Click Parallel Count (1)
+
+    Background:
+
+        Given I see the app
+
+    Scenario Outline: Should increase the first and second counts
+
+        Given I select the mode <Mode>
+        And I select the component Parallel
+        When I click the first count 3 times
+        Then I see the first count is 3
+        And I see the second count is 3
+
+        Examples:
+            | Mode         |
+            | Out-of-Order |
+            | In-Order     |
+            | Async        |

examples/suspense_tests/e2e/features/click_parallel_count_2.feature

@@ -0,0 +1,20 @@
+@click_parallel_counts_2
+Feature: Click Parallel Count (2)
+
+    Background:
+
+        Given I see the app
+
+    Scenario Outline: Should increase the first and second counts
+
+        Given I select the mode <Mode>
+        And I select the component Parallel
+        When I click the second count 3 times
+        Then I see the first count is 3
+        And I see the second count is 3
+
+        Examples:
+            | Mode         |
+            | Out-of-Order |
+            | In-Order     |
+            | Async        |

examples/suspense_tests/e2e/features/click_single_count.feature

@@ -0,0 +1,19 @@
+@click_single_count
+Feature: Click Single Count
+
+    Background:
+
+        Given I see the app
+
+    Scenario Outline: Should increase the count
+
+        Given I select the mode <Mode>
+        And I select the component Single
+        When I click the count 3 times
+        Then I see the count is 3
+
+        Examples:
+            | Mode         |
+            | Out-of-Order |
+            | In-Order     |
+            | Async        |

examples/suspense_tests/e2e/features/open_app.feature

@@ -0,0 +1,7 @@
+@open_app
+Feature: Open App
+
+  @open_app-title
+  Scenario: Should see the initial page title
+    When I open the app
+    Then I see the page title is Out-of-Order

examples/suspense_tests/e2e/features/view_inside_component.feature

@@ -0,0 +1,55 @@
+@view_inside_component
+Feature: View Inside Component
+
+    Background:
+
+        Given I see the app
+
+    @view_inside_component
+    Scenario Outline: Should see the page title
+        Given I select the mode <Mode>
+        When I select the component Inside Component
+        Then I see the page title is <Mode>
+
+        Examples:
+            | Mode         |
+            | Out-of-Order |
+            | In-Order     |
+            | Async        |
+
+    @view_inside_component-one
+    Scenario Outline: Should see the one second message
+        Given I select the mode <Mode>
+        When I select the component Inside Component
+        Then I see the one second message is One Second: Loaded 1!
+
+        Examples:
+            | Mode         |
+            | Out-of-Order |
+            | In-Order     |
+            | Async        |
+
+    @view_inside_component-inside
+    Scenario Outline: Should see the inside message
+        Given I select the mode <Mode>
+        When I select the component Inside Component
+        Then I see the inside message is Suspense inside another component should work.
+
+        Examples:
+            | Mode         |
+            | Out-of-Order |
+            | In-Order     |
+            | Async        |
+
+    @view_inside_component-following
+    Scenario Outline: Should see the following message
+        Given I select the mode <Mode>
+        When I select the component Inside Component
+        Then I see the following message is Children following Suspense should hydrate properly.
+
+        Examples:
+            | Mode         |
+            | Out-of-Order |
+            | In-Order     |
+            | Async        |
+

examples/suspense_tests/e2e/features/view_nested.feature

@@ -0,0 +1,45 @@
+@view_nested
+Feature: View Nested
+
+    Background:
+
+        Given I see the app
+
+    @view_nested-title
+    Scenario Outline: Should see the page title
+        Given I select the mode <Mode>
+        When I select the component Nested
+        Then I see the page title is <Mode>
+
+        Examples:
+            | Mode         |
+            | Out-of-Order |
+            | In-Order     |
+            | Async        |
+
+    @view_nested-one
+    Scenario Outline: Should see the one second message
+
+        Given I select the mode <Mode>
+        When I select the component Nested
+        Then I see the one second message is One Second: Loaded 1!
+
+        Examples:
+            | Mode         |
+            | Out-of-Order |
+            | In-Order     |
+            | Async        |
+
+    @view_nested-two
+    Scenario Outline: Should see the two second message
+
+        Given I select the mode <Mode>
+        When I select the component Nested
+        Then I see the two second message is Two Second: Loaded 2!
+
+        Examples:
+            | Mode         |
+            | Out-of-Order |
+            | In-Order     |
+            | Async        |
+

examples/suspense_tests/e2e/features/view_nested_inside.feature

@@ -0,0 +1,42 @@
+@view_nested_inside
+Feature: View Nested Inside
+
+    Background:
+
+        Given I see the app
+
+    @view_nested_inside-title
+    Scenario Outline: Should see the page title
+        Given I select the mode <Mode>
+        When I select the component Nested (resource created inside)
+        Then I see the page title is <Mode>
+
+        Examples:
+            | Mode         |
+            | Out-of-Order |
+            | In-Order     |
+            | Async        |
+
+    @view_nested_inside-one
+    Scenario Outline: Should see the one second message
+        Given I select the mode <Mode>
+        When I select the component Nested (resource created inside)
+        Then I see the one second message is One Second: Loaded 1!
+
+        Examples:
+            | Mode         |
+            | Out-of-Order |
+            | In-Order     |
+            | Async        |
+
+    @view_nested_inside-two
+    Scenario Outline: Should see the two second message
+        Given I select the mode <Mode>
+        When I select the component Nested (resource created inside)
+        Then I see the two second message is Loaded 2 (created inside first suspense)!: Ok(())
+
+        Examples:
+            | Mode         |
+            | Out-of-Order |
+            | In-Order     |
+            | Async        |

examples/suspense_tests/e2e/features/view_no_resources.feature

@@ -0,0 +1,42 @@
+@view_no_resources
+Feature: view No Resources
+
+    Background:
+
+        Given I see the app
+
+    @view_no_resources-title
+    Scenario Outline: Should see the page title
+        Given I select the mode <Mode>
+        When I select the component No Resources
+        Then I see the page title is <Mode>
+
+        Examples:
+            | Mode         |
+            | Out-of-Order |
+            | In-Order     |
+            | Async        |
+
+    @view_no_resources-another
+    Scenario Outline: Should see the inside message
+        Given I select the mode <Mode>
+        When I select the component No Resources
+        Then I see the inside message is Children inside Suspense should hydrate properly.
+
+        Examples:
+            | Mode         |
+            | Out-of-Order |
+            | In-Order     |
+            | Async        |
+
+    @view_no_resources-following
+    Scenario Outline: Should see the following message
+        Given I select the mode <Mode>
+        When I select the component No Resources
+        Then I see the following message is Children following Suspense should hydrate properly.
+
+        Examples:
+            | Mode         |
+            | Out-of-Order |
+            | In-Order     |
+            | Async        |

examples/suspense_tests/e2e/features/view_parallel.feature

@@ -0,0 +1,42 @@
+@view_parallel
+Feature: View Parallel
+
+    Background:
+
+        Given I see the app
+
+    @view_parallel-title
+    Scenario Outline: Should see the page title
+        Given I select the mode <Mode>
+        When I select the component Parallel
+        Then I see the page title is <Mode>
+
+        Examples:
+            | Mode         |
+            | Out-of-Order |
+            | In-Order     |
+            | Async        |
+
+    @view_parallel-one
+    Scenario Outline: Should see the one second message
+        Given I select the mode <Mode>
+        When I select the component Parallel
+        Then I see the one second message is One Second: Loaded 1!
+
+        Examples:
+            | Mode         |
+            | Out-of-Order |
+            | In-Order     |
+            | Async        |
+
+    @view_parallel-two
+    Scenario Outline: Should see the two second message
+        Given I select the mode <Mode>
+        When I select the component Parallel
+        Then I see the two second message is Two Second: Loaded 2!
+
+        Examples:
+            | Mode         |
+            | Out-of-Order |
+            | In-Order     |
+            | Async        |

examples/suspense_tests/e2e/features/view_single.feature

@@ -0,0 +1,42 @@
+@view_single
+Feature: View Single
+
+    Background:
+
+        Given I see the app
+
+    @view_single-title
+    Scenario Outline: Should see the page title
+        Given I select the mode <Mode>
+        When I select the component Single
+        Then I see the page title is <Mode>
+
+        Examples:
+            | Mode         |
+            | Out-of-Order |
+            | In-Order     |
+            | Async        |
+
+    @view_single-one
+    Scenario Outline: Should see the one second message
+        Given I select the mode <Mode>
+        When I select the component Single
+        Then I see the one second message is One Second: Loaded 1!
+
+        Examples:
+            | Mode         |
+            | Out-of-Order |
+            | In-Order     |
+            | Async        |
+
+    @view_single-following
+    Scenario Outline: Should see the following message
+        Given I select the mode <Mode>
+        When I select the component Single
+        Then I see the following message is Children following Suspense should hydrate properly.
+
+        Examples:
+            | Mode         |
+            | Out-of-Order |
+            | In-Order     |
+            | Async        |

examples/suspense_tests/e2e/tests/app_suite.rs

@@ -0,0 +1,14 @@
+mod fixtures;
+
+use anyhow::Result;
+use cucumber::World;
+use fixtures::world::AppWorld;
+
+#[tokio::main]
+async fn main() -> Result<()> {
+    AppWorld::cucumber()
+        .fail_on_skipped()
+        .run_and_exit("./features")
+        .await;
+    Ok(())
+}

examples/suspense_tests/e2e/tests/fixtures/action.rs

@@ -0,0 +1,39 @@
+use super::{find, world::HOST};
+use anyhow::Result;
+use fantoccini::{Client, Locator};
+use std::result::Result::Ok;
+
+pub async fn goto_path(client: &Client, path: &str) -> Result<()> {
+    let url = format!("{}{}", HOST, path);
+    client.goto(&url).await?;
+
+    Ok(())
+}
+
+pub async fn click_link(client: &Client, text: &str) -> Result<()> {
+    let link = client
+        .wait()
+        .for_element(Locator::LinkText(text))
+        .await
+        .expect(format!("Link not found by `{}`", text).as_str());
+
+    link.click().await?;
+
+    Ok(())
+}
+
+pub async fn click_first_button(client: &Client) -> Result<()> {
+    let counter_button = find::first_button(client).await?;
+
+    counter_button.click().await?;
+
+    Ok(())
+}
+
+pub async fn click_second_button(client: &Client) -> Result<()> {
+    let counter_button = find::second_button(client).await?;
+
+    counter_button.click().await?;
+
+    Ok(())
+}

examples/suspense_tests/e2e/tests/fixtures/check.rs

@@ -0,0 +1,65 @@
+use crate::fixtures::find;
+use anyhow::{Ok, Result};
+use fantoccini::Client;
+use pretty_assertions::assert_eq;
+
+pub async fn page_title_is(client: &Client, expected_text: &str) -> Result<()> {
+    let actual = find::page_title(client).await?;
+    assert_eq!(&actual, expected_text);
+
+    Ok(())
+}
+
+pub async fn loaded_one_message_is(
+    client: &Client,
+    expected_text: &str,
+) -> Result<()> {
+    let actual = find::loaded_one_message(client).await?;
+    assert_eq!(&actual, expected_text);
+
+    Ok(())
+}
+
+pub async fn loaded_two_message_is(
+    client: &Client,
+    expected_text: &str,
+) -> Result<()> {
+    let actual = find::loaded_two_message(client).await?;
+    assert_eq!(&actual, expected_text);
+
+    Ok(())
+}
+
+pub async fn inside_message_is(
+    client: &Client,
+    expected_text: &str,
+) -> Result<()> {
+    let actual = find::inside_message(client).await?;
+    assert_eq!(&actual, expected_text);
+
+    Ok(())
+}
+
+pub async fn following_message_is(
+    client: &Client,
+    expected_text: &str,
+) -> Result<()> {
+    let actual = find::following_message(client).await?;
+    assert_eq!(&actual, expected_text);
+
+    Ok(())
+}
+
+pub async fn first_count_is(client: &Client, expected: u32) -> Result<()> {
+    let actual = find::first_count(client).await?;
+    assert_eq!(actual, expected);
+
+    Ok(())
+}
+
+pub async fn second_count_is(client: &Client, expected: u32) -> Result<()> {
+    let actual = find::second_count(client).await?;
+    assert_eq!(actual, expected);
+
+    Ok(())
+}

examples/suspense_tests/e2e/tests/fixtures/find.rs

@@ -0,0 +1,89 @@
+use anyhow::{Ok, Result};
+use fantoccini::{elements::Element, Client, Locator};
+
+pub async fn page_title(client: &Client) -> Result<String> {
+    let selector = "h1";
+    let element = client
+        .wait()
+        .for_element(Locator::Css(selector))
+        .await
+        .expect(
+            format!("Page title not found by Css selector `{}`", selector)
+                .as_str(),
+        );
+
+    let text = element.text().await?;
+
+    Ok(text)
+}
+
+pub async fn loaded_one_message(client: &Client) -> Result<String> {
+    let text = component_message(client, "loaded-1").await?;
+
+    Ok(text)
+}
+
+pub async fn loaded_two_message(client: &Client) -> Result<String> {
+    let text = component_message(client, "loaded-2").await?;
+
+    Ok(text)
+}
+
+pub async fn following_message(client: &Client) -> Result<String> {
+    let text = component_message(client, "following-message").await?;
+
+    Ok(text)
+}
+
+pub async fn inside_message(client: &Client) -> Result<String> {
+    let text = component_message(client, "inside-message").await?;
+
+    Ok(text)
+}
+
+pub async fn first_count(client: &Client) -> Result<u32> {
+    let element = first_button(client).await?;
+    let text = element.text().await?;
+    let count = text.parse::<u32>().unwrap();
+
+    Ok(count)
+}
+
+pub async fn first_button(client: &Client) -> Result<Element> {
+    let counter_button = client
+        .wait()
+        .for_element(Locator::Css("button"))
+        .await
+        .expect("First button not found");
+
+    Ok(counter_button)
+}
+
+pub async fn second_count(client: &Client) -> Result<u32> {
+    let element = second_button(client).await?;
+    let text = element.text().await?;
+    let count = text.parse::<u32>().unwrap();
+
+    Ok(count)
+}
+
+pub async fn second_button(client: &Client) -> Result<Element> {
+    let counter_button = client
+        .wait()
+        .for_element(Locator::Id("second-count"))
+        .await
+        .expect("Second button not found");
+
+    Ok(counter_button)
+}
+
+async fn component_message(client: &Client, id: &str) -> Result<String> {
+    let element =
+        client.wait().for_element(Locator::Id(id)).await.expect(
+            format!("loaded message not found by id `{}`", id).as_str(),
+        );
+
+    let text = element.text().await?;
+
+    Ok(text)
+}

examples/suspense_tests/e2e/tests/fixtures/mod.rs

@@ -0,0 +1,4 @@
+pub mod action;
+pub mod check;
+pub mod find;
+pub mod world;

examples/suspense_tests/e2e/tests/fixtures/world/action_steps.rs

@@ -0,0 +1,61 @@
+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 = r"^I select the mode (.*)$")]
+async fn i_select_the_mode(world: &mut AppWorld, text: String) -> Result<()> {
+    let client = &world.client;
+    action::click_link(client, &text).await?;
+
+    Ok(())
+}
+
+#[given(regex = r"^I select the component (.*)$")]
+#[when(regex = "^I select the component (.*)$")]
+async fn i_select_the_component(
+    world: &mut AppWorld,
+    text: String,
+) -> Result<()> {
+    let client = &world.client;
+    action::click_link(client, &text).await?;
+
+    Ok(())
+}
+
+#[when(expr = "I click the first count {int} times")]
+#[when(expr = "I click the count {int} times")]
+async fn i_click_the_first_button_n_times(
+    world: &mut AppWorld,
+    times: u32,
+) -> Result<()> {
+    let client = &world.client;
+
+    for _ in 1..=times {
+        action::click_first_button(client).await?;
+    }
+
+    Ok(())
+}
+
+#[when(expr = "I click the second count {int} times")]
+async fn i_click_the_second_button_n_times(
+    world: &mut AppWorld,
+    times: u32,
+) -> Result<()> {
+    let client = &world.client;
+
+    for _ in 1..=times {
+        action::click_second_button(client).await?;
+    }
+
+    Ok(())
+}

examples/suspense_tests/e2e/tests/fixtures/world/check_steps.rs

@@ -0,0 +1,81 @@
+use crate::fixtures::{check, world::AppWorld};
+use anyhow::{Ok, Result};
+use cucumber::then;
+
+#[then(regex = r"^I see the page title is (.*)$")]
+async fn i_see_the_page_title_is(
+    world: &mut AppWorld,
+    text: String,
+) -> Result<()> {
+    let client = &world.client;
+    check::page_title_is(client, &text).await?;
+
+    Ok(())
+}
+
+#[then(regex = r"^I see the one second message is (.*)$")]
+async fn i_see_the_one_second_message_is(
+    world: &mut AppWorld,
+    text: String,
+) -> Result<()> {
+    let client = &world.client;
+    check::loaded_one_message_is(client, &text).await?;
+
+    Ok(())
+}
+
+#[then(regex = r"^I see the two second message is (.*)$")]
+async fn i_see_the_two_second_message_is(
+    world: &mut AppWorld,
+    text: String,
+) -> Result<()> {
+    let client = &world.client;
+    check::loaded_two_message_is(client, &text).await?;
+
+    Ok(())
+}
+
+#[then(regex = r"^I see the following message is (.*)$")]
+async fn i_see_the_following_message_is(
+    world: &mut AppWorld,
+    text: String,
+) -> Result<()> {
+    let client = &world.client;
+    check::following_message_is(client, &text).await?;
+
+    Ok(())
+}
+
+#[then(regex = r"^I see the inside message is (.*)$")]
+async fn i_see_the_inside_message_is(
+    world: &mut AppWorld,
+    text: String,
+) -> Result<()> {
+    let client = &world.client;
+    check::inside_message_is(client, &text).await?;
+
+    Ok(())
+}
+
+#[then(expr = "I see the first count is {int}")]
+#[then(expr = "I see the count is {int}")]
+async fn i_see_the_first_count_is(
+    world: &mut AppWorld,
+    expected: u32,
+) -> Result<()> {
+    let client = &world.client;
+    check::first_count_is(client, expected).await?;
+
+    Ok(())
+}
+
+#[then(expr = "I see the second count is {int}")]
+async fn i_see_the_second_count_is(
+    world: &mut AppWorld,
+    expected: u32,
+) -> Result<()> {
+    let client = &world.client;
+    check::second_count_is(client, expected).await?;
+
+    Ok(())
+}

examples/suspense_tests/e2e/tests/fixtures/world/mod.rs

@@ -0,0 +1,39 @@
+pub mod action_steps;
+pub mod check_steps;
+
+use anyhow::Result;
+use cucumber::World;
+use fantoccini::{
+    error::NewSessionError, wd::Capabilities, Client, ClientBuilder,
+};
+
+pub const HOST: &str = "http://127.0.0.1:3000";
+
+#[derive(Debug, World)]
+#[world(init = Self::new)]
+pub struct AppWorld {
+    pub client: Client,
+}
+
+impl AppWorld {
+    async fn new() -> Result<Self, anyhow::Error> {
+        let webdriver_client = build_client().await?;
+
+        Ok(Self {
+            client: webdriver_client,
+        })
+    }
+}
+
+async fn build_client() -> Result<Client, NewSessionError> {
+    let mut cap = Capabilities::new();
+    let arg = serde_json::from_str("{\"args\": [\"-headless\"]}").unwrap();
+    cap.insert("goog:chromeOptions".to_string(), arg);
+
+    let client = ClientBuilder::native()
+        .capabilities(cap)
+        .connect("http://localhost:4444")
+        .await?;
+
+    Ok(client)
+}

examples/suspense_tests/src/app.rs

@@ -1,32 +1,21 @@
 use leptos::*;
 use leptos_router::*;
 
-#[server(OneSecondFn "/api")]
-async fn one_second_fn() -> Result<String, ServerFnError> {
-    use actix_web::dev::ConnectionInfo;
-    use leptos_actix::extract;
+const WAIT_ONE_SECOND: u64 = 1;
+const WAIT_TWO_SECONDS: u64 = 2;
 
-    tokio::time::sleep(tokio::time::Duration::from_secs(1)).await;
+#[server(FirstWaitFn "/api")]
+async fn first_wait_fn(seconds: u64) -> Result<(), ServerFnError> {
+    tokio::time::sleep(tokio::time::Duration::from_secs(seconds)).await;
 
-    Ok(extract(|info: ConnectionInfo| async move {
-        eprintln!("one-second {:?}", current_runtime());
-        format!("{:?}", current_runtime())
-    })
-    .await?)
+    Ok(())
 }
 
-#[server(TwoSecondFn "/api")]
-async fn two_second_fn() -> Result<String, ServerFnError> {
-    use actix_web::dev::ConnectionInfo;
-    use leptos_actix::extract;
+#[server(SecondWaitFn "/api")]
+async fn second_wait_fn(seconds: u64) -> Result<(), ServerFnError> {
+    tokio::time::sleep(tokio::time::Duration::from_secs(seconds)).await;
 
-    tokio::time::sleep(tokio::time::Duration::from_secs(2)).await;
-
-    Ok(extract(|info: ConnectionInfo| async move {
-        eprintln!("two-second {:?}", current_runtime());
-        format!("{:?}", current_runtime())
-    })
-    .await?)
+    Ok(())
 }
 
 #[component]
@@ -43,8 +32,8 @@ pub fn App() -> impl IntoView {
         }
     "#;
     view! {
+
         <style>{style}</style>
-        <pre>{format!("{:?}", current_runtime())}</pre>
         <Router>
             <nav>
                 <A href="/out-of-order">"Out-of-Order"</A>
@@ -55,7 +44,7 @@ pub fn App() -> impl IntoView {
                 <Routes>
                     <Route
                         path=""
-                        view=|| view! {  <Redirect path="/out-of-order"/> }
+                        view=|| view! { <Redirect path="/out-of-order"/> }
                     />
                     // out-of-order
                     <Route
@@ -129,23 +118,22 @@ fn SecondaryNav() -> impl IntoView {
 
 #[component]
 fn Nested() -> impl IntoView {
-    let one_second = create_resource(|| (), |_| one_second_fn());
-    let two_second = create_resource(|| (), |_| two_second_fn());
+    let one_second = create_resource(|| WAIT_ONE_SECOND, first_wait_fn);
+    let two_second = create_resource(|| WAIT_TWO_SECONDS, second_wait_fn);
     let (count, set_count) = create_signal(0);
 
     view! {
         <div>
             <Suspense fallback=|| "Loading 1...">
-                "One Second: "
                 {move || {
-                    one_second.read()
+                    one_second.get().map(|_| view! {
+                        <p id="loaded-1">"One Second: Loaded 1!"</p>
+                    })
                 }}
-                <br/><br/>
                 <Suspense fallback=|| "Loading 2...">
-                    "Two Second: "
                     {move || {
-                        two_second.read().map(|_| view! {
-                            "Loaded 2!"
+                        two_second.get().map(|_| view! {
+                            <p id="loaded-2">"Two Second: Loaded 2!"</p>
                             <button on:click=move |_| set_count.update(|n| *n += 1)>
                                 {count}
                             </button>
@@ -159,26 +147,28 @@ fn Nested() -> impl IntoView {
 
 #[component]
 fn NestedResourceInside() -> impl IntoView {
-    let one_second = create_resource(|| (), |_| one_second_fn());
+    let one_second = create_resource(|| WAIT_ONE_SECOND, first_wait_fn);
     let (count, set_count) = create_signal(0);
 
     view! {
         <div>
             <Suspense fallback=|| "Loading 1...">
-                "One Second: "
-                {move || {
-                    one_second.read().map(|_| {
+                   {move || {
+                    one_second.get().map(|_| {
                         let two_second = create_resource(|| (), move |_| async move {
-                            two_second_fn().await
+                            leptos::log!("creating two_second resource");
+                            second_wait_fn(WAIT_TWO_SECONDS).await
                         });
                         view! {
-                            <p>{move || one_second.read()}</p>
+                            {move || one_second.get().map(|_|
+                                view! {
+                                    <p id="loaded-1">"One Second: Loaded 1!"</p>
+                                }
+                            )}
                             <Suspense fallback=|| "Loading 2...">
-                                "Two Second: "
                                 {move || {
-                                    two_second.read().map(|x| view! {
-                                        "Loaded 2 (created inside first suspense)!: "
-                                        {format!("{x:?}")}
+                                    two_second.get().map(|x| view! {
+                                        <span id="loaded-2">"Loaded 2 (created inside first suspense)!: " {format!("{x:?}")}</span>
                                         <button on:click=move |_| set_count.update(|n| *n += 1)>
                                             {count}
                                         </button>
@@ -195,30 +185,27 @@ fn NestedResourceInside() -> impl IntoView {
 
 #[component]
 fn Parallel() -> impl IntoView {
-    let one_second = create_resource(|| (), |_| one_second_fn());
-    let two_second = create_resource(|| (), |_| two_second_fn());
+    let one_second = create_resource(|| WAIT_ONE_SECOND, first_wait_fn);
+    let two_second = create_resource(|| WAIT_TWO_SECONDS, second_wait_fn);
     let (count, set_count) = create_signal(0);
 
     view! {
         <div>
             <Suspense fallback=|| "Loading 1...">
-                "One Second: "
                 {move || {
-                    one_second.read().map(move |n| view! {
-                        {n}
+                    one_second.get().map(move |_| view! {
+                        <p id="loaded-1">"One Second: Loaded 1!"</p>
                         <button on:click=move |_| set_count.update(|n| *n += 1)>
                             {count}
                         </button>
                     })
                 }}
             </Suspense>
-            <br/><br/>
             <Suspense fallback=|| "Loading 2...">
-                "Two Second: "
                 {move || {
-                    two_second.read().map(move |n| view! {
-                        {n}
-                        <button on:click=move |_| set_count.update(|n| *n += 1)>
+                    two_second.get().map(move |_| view! {
+                        <p id="loaded-2">"Two Second: Loaded 2!"</p>
+                        <button id="second-count" on:click=move |_| set_count.update(|n| *n += 1)>
                             {count}
                         </button>
                     })
@@ -230,18 +217,19 @@ fn Parallel() -> impl IntoView {
 
 #[component]
 fn Single() -> impl IntoView {
-    let one_second = create_resource(|| (), |_| one_second_fn());
+    let one_second = create_resource(|| WAIT_ONE_SECOND, first_wait_fn);
     let (count, set_count) = create_signal(0);
 
     view! {
         <div>
             <Suspense fallback=|| "Loading 1...">
-                "One Second: "
-                {move || {
-                    one_second.read().map(|_| "Loaded 1!")
-                }}
+            {move || {
+                one_second.get().map(|_| view! {
+                    <p id="loaded-1">"One Second: Loaded 1!"</p>
+                })
+            }}
             </Suspense>
-            <p>"Children following " <code>"<Suspense/>"</code> " should hydrate properly."</p>
+            <p id="following-message">"Children following Suspense should hydrate properly."</p>
             <div>
                 <button on:click=move |_| set_count.update(|n| *n += 1)>
                     {count}
@@ -257,9 +245,9 @@ fn InsideComponent() -> impl IntoView {
 
     view! {
         <div>
-            <p><code>"<Suspense/>"</code> " inside another component should work."</p>
+            <p id="inside-message">"Suspense inside another component should work."</p>
             <InsideComponentChild/>
-            <p>"Children following " <code>"<Suspense/>"</code> " should hydrate properly."</p>
+            <p id="following-message">"Children following Suspense should hydrate properly."</p>
             <div>
                 <button on:click=move |_| set_count.update(|n| *n += 1)>
                     {count}
@@ -271,13 +259,14 @@ fn InsideComponent() -> impl IntoView {
 
 #[component]
 fn InsideComponentChild() -> impl IntoView {
-    let one_second = create_resource(|| (), |_| one_second_fn());
+    let one_second = create_resource(|| WAIT_ONE_SECOND, first_wait_fn);
     view! {
         <Suspense fallback=|| "Loading 1...">
-            "One Second: "
-            {move || {
-                one_second.read().map(|_| "Loaded 1!")
-            }}
+        {move || {
+            one_second.get().map(|_| view! {
+                <p id="loaded-1">"One Second: Loaded 1!"</p>
+            })
+        }}
         </Suspense>
     }
 }
@@ -289,14 +278,14 @@ fn None() -> impl IntoView {
     view! {
         <div>
             <Suspense fallback=|| "Loading 1...">
-                <div>"Children inside Suspense should hydrate properly."</div>
+                <p id="inside-message">"Children inside Suspense should hydrate properly."</p>
                 <button on:click=move |_| set_count.update(|n| *n += 1)>
                     {count}
                 </button>
             </Suspense>
-            <p>"Children following " <code>"<Suspense/>"</code> " should hydrate properly."</p>
+            <p id="following-message">"Children following Suspense should hydrate properly."</p>
             <div>
-                <button on:click=move |_| set_count.update(|n| *n += 1)>
+                <button id="second-count" on:click=move |_| set_count.update(|n| *n += 1)>
                     {count}
                 </button>
             </div>

examples/suspense_tests/src/main.rs

@@ -5,7 +5,7 @@ async fn main() -> std::io::Result<()> {
     use actix_web::*;
     use leptos::*;
     use leptos_actix::{generate_route_list, LeptosRoutes};
-    use leptos_start::app::*;
+    use suspense_tests::app::*;
 
     let conf = get_configuration(None).await.unwrap();
     let addr = conf.leptos_options.site_addr;

examples/todo_app_sqlite/Cargo.toml

@@ -64,7 +64,8 @@ site-addr = "127.0.0.1:3000"
 # The port to use for automatic reload monitoring
 reload-port = 3001
 # [Optional] Command to use when running end2end tests. It will run in the end2end dir.
-end2end-cmd = "npx playwright test"
+end2end-cmd = "cargo make test-ui"
+end2end-dir = "e2e"
 #  The browserlist query used for optimizing the CSS.
 browserquery = "defaults"
 # Set by cargo-leptos watch when building with tha tool. Controls whether autoreload JS will be included in the head

examples/todo_app_sqlite/Makefile.toml

@@ -1,17 +1,24 @@
-extend = { path = "../cargo-make/main.toml" }
+extend = [
+  { path = "../cargo-make/main.toml" },
+  { path = "../cargo-make/webdriver.toml" },
+  { path = "../cargo-make/cargo-leptos.toml" },
+]
 
-[tasks.check]
-clear = true
-dependencies = ["check-debug", "check-release"]
+[env]
+APP_PROCESS_NAME = "todo_app_sqlite"
 
-[tasks.check-debug]
-toolchain = "nightly"
+[tasks.integration-test]
+dependencies = [
+  "install-cargo-leptos",
+  "start-webdriver",
+  "test-e2e-with-auto-start",
+]
+
+[tasks.test-e2e-with-auto-start]
 command = "cargo"
-args = ["check-all-features"]
-install_crate = "cargo-all-features"
+args = ["leptos", "end-to-end"]
 
-[tasks.check-release]
-toolchain = "nightly"
+[tasks.test-ui]
+cwd = "./e2e"
 command = "cargo"
-args = ["check-all-features", "--release"]
-install_crate = "cargo-all-features"
+args = ["make", "test-ui", "${@}"]

examples/todo_app_sqlite/README.md

@@ -52,3 +52,23 @@ wasm-pack build --target=web --debug --no-default-features --features=hydrate
 ```bash
 cargo run --no-default-features --features=ssr
 ```
+
+## Testing
+
+This example includes quality checks and end-to-end testing.
+
+To get started run this once.
+
+```bash
+cargo make ci
+```
+
+To only run the UI tests...
+
+```bash
+cargo make start-webdriver
+cargo leptos watch # or cargo run...
+cargo make test-ui
+```
+
+_See the [E2E README](./e2e/README.md) for more information about the testing strategy._