fix: render empty dynamic text node in HTML as (closes #1382)

.github/workflows/check-examples.yml

@@ -9,21 +9,66 @@ on:
       - main
 
 jobs:
-  get-leptos-changed:
-    uses: ./.github/workflows/get-leptos-changed.yml
+  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-examples-matrix:
-    uses: ./.github/workflows/get-examples-matrix.yml
+      - name: Install JQ Tool
+        uses: mbround18/install-jq@v1
 
-  test:
+      - 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:
     name: Check
-    needs: [get-leptos-changed, get-examples-matrix]
-    if: needs.get-leptos-changed.outputs.leptos_changed == 'true'
+    needs: [setup]
+    if: needs.setup.outputs.source_changed == 'true'
     strategy:
-      matrix: ${{ fromJSON(needs.get-examples-matrix.outputs.matrix) }}
+      matrix: ${{ fromJSON(needs.setup.outputs.matrix) }}
       fail-fast: false
     uses: ./.github/workflows/run-cargo-make-task.yml
     with:
       directory: ${{ matrix.directory }}
       cargo_make_task: "check"
-      toolchain: nightly

.github/workflows/check-stable.yml

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

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

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

.github/workflows/ci.yml

@@ -9,13 +9,45 @@ on:
       - main
 
 jobs:
-  get-leptos-changed:
-    uses: ./.github/workflows/get-leptos-changed.yml
+  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
 
-  test:
+      - 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:
     name: CI
-    needs: [get-leptos-changed]
-    if: needs.get-leptos-changed.outputs.leptos_changed == 'true'
+    needs: [setup]
+    if: needs.setup.outputs.source_changed == 'true'
     strategy:
       matrix:
         directory:
@@ -41,4 +73,3 @@ jobs:
     with:
       directory: ${{ matrix.directory }}
       cargo_make_task: "ci"
-      toolchain: nightly

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

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

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

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

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

@@ -1,4 +1,4 @@
-name: CI Examples
+name: Verify All Examples
 
 on:
   workflow_dispatch:
@@ -10,17 +10,38 @@ on:
     - cron: "0 8 * * *"
 
 jobs:
-  get-examples-matrix:
-    uses: ./.github/workflows/get-examples-matrix.yml
+  setup:
+    name: Get Examples
+    runs-on: ubuntu-latest
+    outputs:
+      matrix: ${{ steps.set-matrix.outputs.matrix }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
 
-  test:
-    name: CI
-    needs: [get-examples-matrix]
+      - name: Install JQ Tool
+        uses: mbround18/install-jq@v1
+
+      - name: Set Matrix
+        id: set-matrix
+        run: |
+          examples=$(ls examples | 
+          awk '{print "examples/" $0}' | 
+          grep -v examples/README.md | 
+          grep -v examples/Makefile.toml | 
+          grep -v examples/cargo-make | 
+          grep -v examples/gtk | 
+          jq -R -s -c 'split("\n")[:-1]')
+          echo "Example Directories: $examples"
+          echo "matrix={\"directory\":$examples}" >> "$GITHUB_OUTPUT"
+
+  matrix-job:
+    name: Verify
+    needs: [setup]
     strategy:
-      matrix: ${{ fromJSON(needs.get-examples-matrix.outputs.matrix) }}
+      matrix: ${{ fromJSON(needs.setup.outputs.matrix) }}
       fail-fast: false
     uses: ./.github/workflows/run-cargo-make-task.yml
     with:
       directory: ${{ matrix.directory }}
-      cargo_make_task: "ci"
-      toolchain: nightly
+      cargo_make_task: "verify-flow"

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

@@ -1,20 +1,16 @@
-name: Changed Examples Matrix Call
+name: Verify Changed Examples
 
 on:
-  workflow_call:
-    inputs:
-      example_changed:
-        description: "Example Changed"
-        required: true
-        type: boolean
-    outputs:
-      matrix:
-        description: "Matrix"
-        value: ${{ jobs.get-example-changed.outputs.matrix }}
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
 
 jobs:
-  get-example-changed:
-    name: Get Changed Example Matrix
+  setup:
+    name: Get Changes
     runs-on: ubuntu-latest
     outputs:
       matrix: ${{ steps.set-matrix.outputs.matrix }}
@@ -24,6 +20,16 @@ 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
@@ -45,10 +51,21 @@ jobs:
       - name: Set Matrix
         id: set-matrix
         run: |
-          if [ ${{ inputs.example_changed }} == 'true' ]; then
+          if [ ${{ steps.changed-files.outputs.any_changed }} == 'true' ]; then
             # Create matrix with changed directories
             echo "matrix={\"directory\":${{ steps.changed-dirs.outputs.all_changed_files }}}" >> "$GITHUB_OUTPUT"
           else
             # Create matrix with one item to prevent an empty vector error
-            echo "matrix={\"directory\":[\"NO_CHANGE\"]}" >> "$GITHUB_OUTPUT"
+            echo "matrix={\"directory\":[\"INTERNAL\"]}" >> "$GITHUB_OUTPUT"
           fi
+
+  matrix-job:
+    name: Verify
+    needs: [setup]
+    strategy:
+      matrix: ${{ fromJSON(needs.setup.outputs.matrix) }}
+      fail-fast: false
+    uses: ./.github/workflows/run-cargo-make-task.yml
+    with:
+      directory: ${{ matrix.directory }}
+      cargo_make_task: "verify-flow"

.gitignore

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

Cargo.toml

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

README.md

@@ -16,9 +16,9 @@
 use leptos::*;
 
 #[component]
-pub fn SimpleCounter(initial_value: i32) -> impl IntoView {
+pub fn SimpleCounter(cx: Scope, initial_value: i32) -> impl IntoView {
     // create a reactive signal with the initial value
-    let (value, set_value) = create_signal(initial_value);
+    let (value, set_value) = create_signal(cx, 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,29 +27,23 @@ pub fn SimpleCounter(initial_value: i32) -> impl IntoView {
     let increment = move |_| set_value.update(|value| *value += 1);
 
     // create user interfaces with the declarative `view!` macro
-    view! {
+    view! { cx,
         <div>
-            <button on:click=clear>Clear</button>
-            <button on:click=decrement>-1</button>
-            // text nodes can be quoted or unquoted
+            <button on:click=clear>"Clear"</button>
+            <button on:click=decrement>"-1"</button>
             <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(|| view! {
-        <SimpleCounter initial_value=3 />
-    })
+    mount_to_body(|cx| view! { cx,  <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.
@@ -119,7 +113,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, in terms of architecture.
+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.
 
 2. **Are there bugs?**
 
@@ -158,13 +152,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(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(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.)_
 - **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(0); // a signal
+  let (count, set_count) = create_signal(cx, 0); // a signal
   let double_count = move || count() * 2; // a derived signal
-  let memoized_count = create_memo(move |_| count() * 3); // a memo
+  let memoized_count = create_memo(cx, move |_| count() * 3); // a memo
   // all are accessed by calling them
   assert_eq!(count(), 0);
   assert_eq!(double_count(), 0);

SECURITY.md

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

benchmarks/src/reactive.rs

@@ -7,15 +7,15 @@ fn leptos_deep_creation(b: &mut Bencher) {
     let runtime = create_runtime();
 
     b.iter(|| {
-        create_scope(runtime, || {
-            let signal = create_rw_signal(0);
+        create_scope(runtime, |cx| {
+            let signal = create_rw_signal(cx, 0);
             let mut memos = Vec::<Memo<usize>>::new();
             for _ in 0..1000usize {
                 let prev = memos.last().copied();
                 if let Some(prev) = prev {
-                    memos.push(create_memo(move |_| prev.get() + 1));
+                    memos.push(create_memo(cx, move |_| prev.get() + 1));
                 } else {
-                    memos.push(create_memo(move |_| signal.get() + 1));
+                    memos.push(create_memo(cx, move |_| signal.get() + 1));
                 }
             }
         })
@@ -31,14 +31,14 @@ fn leptos_deep_update(b: &mut Bencher) {
     let runtime = create_runtime();
 
     b.iter(|| {
-        create_scope(runtime, || {
-            let signal = create_rw_signal(0);
+        create_scope(runtime, |cx| {
+            let signal = create_rw_signal(cx, 0);
             let mut memos = Vec::<Memo<usize>>::new();
             for _ in 0..1000usize {
                 if let Some(prev) = memos.last().copied() {
-                    memos.push(create_memo(move |_| prev.get() + 1));
+                    memos.push(create_memo(cx, move |_| prev.get() + 1));
                 } else {
-                    memos.push(create_memo(move |_| signal.get() + 1));
+                    memos.push(create_memo(cx, move |_| signal.get() + 1));
                 }
             }
             signal.set(1);
@@ -56,11 +56,12 @@ fn leptos_narrowing_down(b: &mut Bencher) {
     let runtime = create_runtime();
 
     b.iter(|| {
-        create_scope(runtime, || {
-            let sigs = (0..1000).map(|n| create_signal(n)).collect::<Vec<_>>();
+        create_scope(runtime, |cx| {
+            let sigs =
+                (0..1000).map(|n| create_signal(cx, n)).collect::<Vec<_>>();
             let reads = sigs.iter().map(|(r, _)| *r).collect::<Vec<_>>();
             let writes = sigs.iter().map(|(_, w)| *w).collect::<Vec<_>>();
-            let memo = create_memo(move |_| {
+            let memo = create_memo(cx, move |_| {
                 reads.iter().map(|r| r.get()).sum::<i32>()
             });
             assert_eq!(memo(), 499500);
@@ -77,10 +78,10 @@ fn leptos_fanning_out(b: &mut Bencher) {
     let runtime = create_runtime();
 
     b.iter(|| {
-        create_scope(runtime, || {
-            let sig = create_rw_signal(0);
+        create_scope(runtime, |cx| {
+            let sig = create_rw_signal(cx, 0);
             let memos = (0..1000)
-                .map(|_| create_memo(move |_| sig.get()))
+                .map(|_| create_memo(cx, move |_| sig.get()))
                 .collect::<Vec<_>>();
             assert_eq!(memos.iter().map(|m| m.get()).sum::<i32>(), 0);
             sig.set(1);
@@ -98,16 +99,17 @@ fn leptos_narrowing_update(b: &mut Bencher) {
     let runtime = create_runtime();
 
     b.iter(|| {
-        create_scope(runtime, || {
+        create_scope(runtime, |cx| {
             let acc = Rc::new(Cell::new(0));
-            let sigs = (0..1000).map(|n| create_signal(n)).collect::<Vec<_>>();
+            let sigs =
+                (0..1000).map(|n| create_signal(cx, n)).collect::<Vec<_>>();
             let reads = sigs.iter().map(|(r, _)| *r).collect::<Vec<_>>();
             let writes = sigs.iter().map(|(_, w)| *w).collect::<Vec<_>>();
-            let memo = create_memo(move |_| {
+            let memo = create_memo(cx, move |_| {
                 reads.iter().map(|r| r.get()).sum::<i32>()
             });
             assert_eq!(memo(), 499500);
-            create_isomorphic_effect({
+            create_isomorphic_effect(cx, {
                 let acc = Rc::clone(&acc);
                 move |_| {
                     acc.set(memo());
@@ -139,9 +141,9 @@ fn leptos_scope_creation_and_disposal(b: &mut Bencher) {
             .map(|_| {
                 create_scope(runtime, {
                     let acc = Rc::clone(&acc);
-                    move || {
-                        let (r, w) = create_signal(0);
-                        create_isomorphic_effect({
+                    move |cx| {
+                        let (r, w) = create_signal(cx, 0);
+                        create_isomorphic_effect(cx, {
                             move |_| {
                                 acc.set(r());
                             }
@@ -161,9 +163,7 @@ fn leptos_scope_creation_and_disposal(b: &mut Bencher) {
 
 #[bench]
 fn rs_deep_update(b: &mut Bencher) {
-    use reactive_signals::{
-        runtimes::ClientRuntime, signal, types::Func, Scope, Signal,
-    };
+    use reactive_signals::{Scope, Signal, signal, runtimes::ClientRuntime, types::Func};
 
     let sc = ClientRuntime::new_root_scope();
     b.iter(|| {
@@ -184,9 +184,7 @@ fn rs_deep_update(b: &mut Bencher) {
 
 #[bench]
 fn rs_fanning_out(b: &mut Bencher) {
-    use reactive_signals::{
-        runtimes::ClientRuntime, signal, types::Func, Scope, Signal,
-    };
+    use reactive_signals::{Scope, Signal, signal, runtimes::ClientRuntime, types::Func};
     let cx = ClientRuntime::new_root_scope();
 
     b.iter(|| {
@@ -202,17 +200,18 @@ fn rs_fanning_out(b: &mut Bencher) {
 
 #[bench]
 fn rs_narrowing_update(b: &mut Bencher) {
-    use reactive_signals::{
-        runtimes::ClientRuntime, signal, types::Func, Scope, Signal,
-    };
+    use reactive_signals::{Scope, Signal, signal, runtimes::ClientRuntime, types::Func};
     let cx = ClientRuntime::new_root_scope();
 
     b.iter(|| {
         let acc = Rc::new(Cell::new(0));
-        let sigs = (0..1000).map(|n| signal!(cx, n)).collect::<Vec<_>>();
+        let 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(initial: i32) -> impl IntoView {
+			fn Counter(cx: Scope, 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 wasm_bindgen::JsCast;
 use web_sys::HtmlInputElement;
+use wasm_bindgen::JsCast;
 
 #[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() -> Self {
+    pub fn new(cx: Scope) -> Self {
         Self(vec![])
     }
 
-    pub fn new_with_1000() -> Self {
+    pub fn new_with_1000(cx: Scope) -> Self {
         let todos = (0..1000)
-            .map(|id| Todo::new(id, format!("Todo #{id}")))
+            .map(|id| Todo::new(cx, id, format!("Todo #{id}")))
             .collect();
         Self(todos)
     }
@@ -72,17 +72,13 @@ pub struct Todo {
 }
 
 impl Todo {
-    pub fn new(id: usize, title: String) -> Self {
-        Self::new_with_completed(id, title, false)
+    pub fn new(cx: Scope, id: usize, title: String) -> Self {
+        Self::new_with_completed(cx, id, title, false)
     }
 
-    pub fn new_with_completed(
-        id: usize,
-        title: String,
-        completed: bool,
-    ) -> Self {
-        let (title, set_title) = create_signal(title);
-        let (completed, set_completed) = create_signal(completed);
+    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);
         Self {
             id,
             title,
@@ -102,7 +98,7 @@ const ESCAPE_KEY: u32 = 27;
 const ENTER_KEY: u32 = 13;
 
 #[component]
-pub fn TodoMVC(todos: Todos) -> impl IntoView {
+pub fn TodoMVC(cx: Scope, todos: Todos) -> impl IntoView {
     let mut next_id = todos
         .0
         .iter()
@@ -111,10 +107,10 @@ pub fn TodoMVC(todos: Todos) -> impl IntoView {
         .map(|last| last + 1)
         .unwrap_or(0);
 
-    let (todos, set_todos) = create_signal(todos);
-    provide_context(set_todos);
+    let (todos, set_todos) = create_signal(cx, todos);
+    provide_context(cx, set_todos);
 
-    let (mode, set_mode) = create_signal(Mode::All);
+    let (mode, set_mode) = create_signal(cx, Mode::All);
 
     let add_todo = move |ev: web_sys::KeyboardEvent| {
         let target = event_target::<HtmlInputElement>(&ev);
@@ -124,7 +120,7 @@ pub fn TodoMVC(todos: Todos) -> impl IntoView {
             let title = event_target_value(&ev);
             let title = title.trim();
             if !title.is_empty() {
-                let new = Todo::new(next_id, title.to_string());
+                let new = Todo::new(cx, next_id, title.to_string());
                 set_todos.update(|t| t.add(new));
                 next_id += 1;
                 target.set_value("");
@@ -132,7 +128,7 @@ pub fn TodoMVC(todos: Todos) -> impl IntoView {
         }
     };
 
-    let filtered_todos = create_memo::<Vec<Todo>>(move |_| {
+    let filtered_todos = create_memo::<Vec<Todo>>(cx, move |_| {
         todos.with(|todos| match mode.get() {
             Mode::All => todos.0.to_vec(),
             Mode::Active => todos
@@ -152,7 +148,7 @@ pub fn TodoMVC(todos: Todos) -> impl IntoView {
 
     // effect to serialize to JSON
     // this does reactive reads, so it will automatically serialize on any relevant change
-    create_effect(move |_| {
+    create_effect(cx, move |_| {
         if let Ok(Some(storage)) = window().local_storage() {
             let objs = todos
                 .get()
@@ -167,7 +163,7 @@ pub fn TodoMVC(todos: Todos) -> impl IntoView {
         }
     });
 
-    view! { 
+    view! { cx,
         <main>
             <section class="todoapp">
                 <header class="header">
@@ -192,8 +188,8 @@ pub fn TodoMVC(todos: Todos) -> impl IntoView {
                         <For
                             each=filtered_todos
                             key=|todo| todo.id
-                            view=move |todo: Todo| {
-                                view! { <Todo todo=todo.clone()/> }
+                            view=move |cx, todo: Todo| {
+                                view! { cx, <Todo todo=todo.clone()/> }
                             }
                         />
                     </ul>
@@ -240,14 +236,14 @@ pub fn TodoMVC(todos: Todos) -> impl IntoView {
                 <p>"Part of " <a href="http://todomvc.com">"TodoMVC"</a></p>
             </footer>
         </main>
-    }.into_view()
+    }.into_view(cx)
 }
 
 #[component]
-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();
+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);
 
     let save = move |value: &str| {
         let value = value.trim();
@@ -259,7 +255,7 @@ pub fn Todo(todo: Todo) -> impl IntoView {
         set_editing(false);
     };
 
-    view! { 
+    view! { cx,
         <li class="todo" class:editing=editing class:completed=move || (todo.completed)()>
             <div class="view">
                 <input class="toggle" type="checkbox" prop:checked=move || (todo.completed)()/>
@@ -272,7 +268,7 @@ pub fn Todo(todo: Todo) -> impl IntoView {
             {move || {
                 editing()
                     .then(|| {
-                        view! { 
+                        view! { cx,
                             <input
                                 class="edit"
                                 class:hidden=move || !(editing)()
@@ -323,8 +319,8 @@ pub struct TodoSerialized {
 }
 
 impl TodoSerialized {
-    pub fn into_todo(self, ) -> Todo {
-        Todo::new_with_completed(self.id, self.title, self.completed)
+    pub fn into_todo(self, cx: Scope) -> Todo {
+        Todo::new_with_completed(cx, 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(|| {
-            view! { <TodoMVC todos=Todos::new()/> }
+        let html = ::leptos::ssr::render_to_string(|cx| {
+            view! { cx, <TodoMVC todos=Todos::new(cx)/> }
         });
         assert!(html.len() > 1);
     });

docs/COMMON_BUGS.md

@@ -9,10 +9,10 @@ This document is intended as a running list of common issues, with example code
 **Issue**: Sometimes you want to update a reactive signal in a way that depends on another signal.
 
 ```rust
-let (a, set_a) = create_signal(0);
-let (b, set_b) = create_signal(false);
+let (a, set_a) = create_signal(cx, 0);
+let (b, set_b) = create_signal(cx, false);
 
-create_effect(move |_| {
+create_effect(cx, move |_| {
 	if a() > 5 {
 		set_b(true);
 	}
@@ -24,7 +24,7 @@ This creates an inefficient chain of updates, and can easily lead to infinite lo
 **Solution**: Follow the rule, _What can be derived, should be derived._ In this case, this has the benefit of massively reducing the code size, too!
 
 ```rust
-let (a, set_a) = create_signal(0);
+let (a, set_a) = create_signal(cx, 0);
 let b = move || a () > 5;
 ```
 
@@ -34,19 +34,19 @@ Sometimes you have nested signals: for example, hash-map that can change over ti
 
 ```rust
 #[component]
-pub fn App() -> impl IntoView {
-    let resources = create_rw_signal(HashMap::new());
+pub fn App(cx: Scope) -> impl IntoView {
+    let resources = create_rw_signal(cx, HashMap::new());
 
     let update = move |id: usize| {
         resources.update(|resources| {
             resources
                 .entry(id)
-                .or_insert_with(|| create_rw_signal(0))
+                .or_insert_with(|| create_rw_signal(cx, 0))
                 .update(|amount| *amount += 1)
         })
     };
 
-    view! {
+    view! { cx,
         <div>
             <pre>{move || format!("{:#?}", resources.get().into_iter().map(|(id, resource)| (id, resource.get())).collect::<Vec<_>>())}</pre>
             <button on:click=move |_| update(1)>"+"</button>
@@ -55,17 +55,17 @@ pub fn App() -> impl IntoView {
 }
 ```
 
-Clicking the button twice will cause a panic, because of the nested signal _read_. Calling the `update` function on `resources` immediately takes out a mutable borrow on `resources`, then updates the `resource` signal—which re-runs the effect that reads from the signals, which tries to immutably access `resources` and panics. It's the nested update here which causes a problem, because the inner update triggers and effect that tries to read both signals while the outer is still updating.
+Clicking the button twice will cause a panic, because of the nested signal *read*. Calling the `update` function on `resources` immediately takes out a mutable borrow on `resources`, then updates the `resource` signal—which re-runs the effect that reads from the signals, which tries to immutably access `resources` and panics. It's the nested update here which causes a problem, because the inner update triggers and effect that tries to read both signals while the outer is still updating.
 
-You can fix this fairly easily by using the [`batch()`](https://docs.rs/leptos/latest/leptos/fn.batch.html) method:
+You can fix this fairly easily by using the [`Scope::batch()`](https://docs.rs/leptos/latest/leptos/struct.Scope.html#method.batch) method:
 
 ```rust
     let update = move |id: usize| {
-        batch(move || {
+        cx.batch(move || {
             resources.update(|resources| {
                 resources
                     .entry(id)
-                    .or_insert_with(|| create_rw_signal(0))
+                    .or_insert_with(|| create_rw_signal(cx, 0))
                     .update(|amount| *amount += 1)
             })
         });
@@ -83,11 +83,11 @@ Many DOM attributes can be updated either by setting an attribute on the DOM nod
 This means that in practice, attributes like `value` or `checked` on an `<input/>` element only update the _default_ value for the `<input/>`. If you want to reactively update the value, you should use `prop:value` instead to set the `value` property.
 
 ```rust
-let (a, set_a) = create_signal("Starting value".to_string());
+let (a, set_a) = create_signal(cx, "Starting value".to_string());
 let on_input = move |ev| set_a(event_target_value(&ev));
 
 view! {
-
+	cx,
 	// ❌ reactivity doesn't work as expected: typing only updates the default
 	//    of each input, so if you start typing in the second input, it won't
 	//    update the first one
@@ -97,11 +97,11 @@ view! {
 ```
 
 ```rust
-let (a, set_a) = create_signal("Starting value".to_string());
+let (a, set_a) = create_signal(cx, "Starting value".to_string());
 let on_input = move |ev| set_a(event_target_value(&ev));
 
 view! {
-
+	cx,
 	// ✅ works as intended by setting the value *property*
 	<input prop:value=a on:input=on_input />
 	<input prop:value=a on:input=on_input />

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 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.
+**The guide is a work in progress.**

docs/book/src/02_getting_started.md

@@ -27,7 +27,6 @@ cargo add leptos --features=csr,nightly
 ```
 
 Or you can leave off `nightly` if you're using stable Rust
-
 ```bash
 cargo add leptos --features=csr
 ```
@@ -65,7 +64,7 @@ And add a simple “Hello, world!” to your `main.rs`
 use leptos::*;
 
 fn main() {
-    mount_to_body(|| view! { <p>"Hello, world!"</p> })
+    mount_to_body(|cx| view! { cx,  <p>"Hello, world!"</p> })
 }
 ```
 

docs/book/src/15_global_state.md

@@ -29,15 +29,15 @@ all its children and descendants using `provide_context`.
 
 ```rust
 #[component]
-fn App() -> impl IntoView {
+fn App(cx: Scope) -> impl IntoView {
     // here we create a signal in the root that can be consumed
     // anywhere in the app.
-    let (count, set_count) = create_signal(0);
+    let (count, set_count) = create_signal(cx, 0);
     // we'll pass the setter to specific components,
     // but provide the count itself to the whole app via context
-    provide_context(count);
+    provide_context(cx, count);
 
-    view! {
+    view! { cx,
         // SetterButton is allowed to modify the count
         <SetterButton set_count/>
         // These consumers can only read from it
@@ -57,14 +57,14 @@ fn App() -> impl IntoView {
 ```rust
 /// A component that does some "fancy" math with the global count
 #[component]
-fn FancyMath() -> impl IntoView {
+fn FancyMath(cx: Scope) -> impl IntoView {
     // here we consume the global count signal with `use_context`
-    let count = use_context::<ReadSignal<u32>>()
+    let count = use_context::<ReadSignal<u32>>(cx)
         // we know we just provided this in the parent component
         .expect("there to be a `count` signal provided");
     let is_even = move || count() & 1 == 0;
 
-    view! {
+    view! { cx,
         <div class="consumer blue">
             "The number "
             <strong>{count}</strong>
@@ -89,17 +89,17 @@ struct GlobalState {
 }
 
 impl GlobalState {
-    pub fn new() -> Self {
+    pub fn new(cx: Scope) -> Self {
         Self {
-            count: create_rw_signal(0),
-            name: create_rw_signal("Bob".to_string())
+            count: create_rw_signal(cx, 0),
+            name: create_rw_signal(cx, "Bob".to_string())
         }
     }
 }
 
 #[component]
-fn App() -> impl IntoView {
-    provide_context(GlobalState::new());
+fn App(cx: Scope) -> impl IntoView {
+    provide_context(cx, GlobalState::new(cx));
 
     // etc.
 }
@@ -117,8 +117,8 @@ struct GlobalState {
 }
 
 #[component]
-fn App() -> impl IntoView {
-    provide_context(create_rw_signal(GlobalState::default()));
+fn App(cx: Scope) -> impl IntoView {
+    provide_context(cx, create_rw_signal(GlobalState::default()));
 
     // etc.
 }
@@ -127,8 +127,8 @@ fn App() -> impl IntoView {
 But there’s a problem: because our whole state is wrapped in one signal, updating the value of one field will cause reactive updates in parts of the UI that only depend on the other.
 
 ```rust
-let state = expect_context::<RwSignal<GlobalState>>();
-view! {
+let state = expect_context::<RwSignal<GlobalState>>(cx);
+view! { cx,
     <button on:click=move |_| state.update(|n| *n += 1)>"+1"</button>
     <p>{move || state.with(|state| state.name.clone())}</p>
 }
@@ -143,12 +143,12 @@ Here, instead of reading from the state signal directly, we create “slices”
 ```rust
 /// A component that updates the count in the global state.
 #[component]
-fn GlobalStateCounter() -> impl IntoView {
-    let state = expect_context::<RwSignal<GlobalState>>();
+fn GlobalStateCounter(cx: Scope) -> impl IntoView {
+    let state = expect_context::<RwSignal<GlobalState>>(cx);
 
     // `create_slice` lets us create a "lens" into the data
     let (count, set_count) = create_slice(
-
+        cx,
         // we take a slice *from* `state`
         state,
         // our getter returns a "slice" of the data
@@ -157,7 +157,7 @@ fn GlobalStateCounter() -> impl IntoView {
         |state, n| state.count = n,
     );
 
-    view! {
+    view! { cx,
         <div class="consumer blue">
             <button
                 on:click=move |_| {
@@ -214,15 +214,15 @@ use leptos::*;
 // components using provide_context(). Changing it will only cause rerendering
 // in the specific places it is actually used, not the whole app.
 #[component]
-fn Option2() -> impl IntoView {
+fn Option2(cx: Scope) -> impl IntoView {
     // here we create a signal in the root that can be consumed
     // anywhere in the app.
-    let (count, set_count) = create_signal(0);
+    let (count, set_count) = create_signal(cx, 0);
     // we'll pass the setter to specific components,
     // but provide the count itself to the whole app via context
-    provide_context(count);
+    provide_context(cx, count);
 
-    view! {
+    view! { cx,
         <h1>"Option 2: Passing Signals"</h1>
         // SetterButton is allowed to modify the count
         <SetterButton set_count/>
@@ -237,8 +237,8 @@ fn Option2() -> impl IntoView {
 
 /// A button that increments our global counter.
 #[component]
-fn SetterButton(set_count: WriteSignal<u32>) -> impl IntoView {
-    view! {
+fn SetterButton(cx: Scope, set_count: WriteSignal<u32>) -> impl IntoView {
+    view! { cx,
         <div class="provider red">
             <button on:click=move |_| set_count.update(|count| *count += 1)>
                 "Increment Global Count"
@@ -249,14 +249,14 @@ fn SetterButton(set_count: WriteSignal<u32>) -> impl IntoView {
 
 /// A component that does some "fancy" math with the global count
 #[component]
-fn FancyMath() -> impl IntoView {
+fn FancyMath(cx: Scope) -> impl IntoView {
     // here we consume the global count signal with `use_context`
-    let count = use_context::<ReadSignal<u32>>()
+    let count = use_context::<ReadSignal<u32>>(cx)
         // we know we just provided this in the parent component
         .expect("there to be a `count` signal provided");
     let is_even = move || count() & 1 == 0;
 
-    view! {
+    view! { cx,
         <div class="consumer blue">
             "The number "
             <strong>{count}</strong>
@@ -272,17 +272,17 @@ fn FancyMath() -> impl IntoView {
 
 /// A component that shows a list of items generated from the global count.
 #[component]
-fn ListItems() -> impl IntoView {
+fn ListItems(cx: Scope) -> impl IntoView {
     // again, consume the global count signal with `use_context`
-    let count = use_context::<ReadSignal<u32>>().expect("there to be a `count` signal provided");
+    let count = use_context::<ReadSignal<u32>>(cx).expect("there to be a `count` signal provided");
 
     let squares = move || {
         (0..count())
-            .map(|n| view! { <li>{n}<sup>"2"</sup> " is " {n * n}</li> })
+            .map(|n| view! { cx, <li>{n}<sup>"2"</sup> " is " {n * n}</li> })
             .collect::<Vec<_>>()
     };
 
-    view! {
+    view! { cx,
         <div class="consumer green">
             <ul>{squares}</ul>
         </div>
@@ -304,13 +304,13 @@ struct GlobalState {
 }
 
 #[component]
-fn Option3() -> impl IntoView {
+fn Option3(cx: Scope) -> impl IntoView {
     // we'll provide a single signal that holds the whole state
     // each component will be responsible for creating its own "lens" into it
-    let state = create_rw_signal(GlobalState::default());
-    provide_context(state);
+    let state = create_rw_signal(cx, GlobalState::default());
+    provide_context(cx, state);
 
-    view! {
+    view! { cx,
         <h1>"Option 3: Passing Signals"</h1>
         <div class="red consumer" style="width: 100%">
             <h2>"Current Global State"</h2>
@@ -329,12 +329,12 @@ fn Option3() -> impl IntoView {
 
 /// A component that updates the count in the global state.
 #[component]
-fn GlobalStateCounter() -> impl IntoView {
-    let state = use_context::<RwSignal<GlobalState>>().expect("state to have been provided");
+fn GlobalStateCounter(cx: Scope) -> impl IntoView {
+    let state = use_context::<RwSignal<GlobalState>>(cx).expect("state to have been provided");
 
     // `create_slice` lets us create a "lens" into the data
     let (count, set_count) = create_slice(
-
+        cx,
         // we take a slice *from* `state`
         state,
         // our getter returns a "slice" of the data
@@ -343,7 +343,7 @@ fn GlobalStateCounter() -> impl IntoView {
         |state, n| state.count = n,
     );
 
-    view! {
+    view! { cx,
         <div class="consumer blue">
             <button
                 on:click=move |_| {
@@ -360,13 +360,14 @@ fn GlobalStateCounter() -> impl IntoView {
 
 /// A component that updates the count in the global state.
 #[component]
-fn GlobalStateInput() -> impl IntoView {
-    let state = use_context::<RwSignal<GlobalState>>().expect("state to have been provided");
+fn GlobalStateInput(cx: Scope) -> impl IntoView {
+    let state = use_context::<RwSignal<GlobalState>>(cx).expect("state to have been provided");
 
     // this slice is completely independent of the `count` slice
     // that we created in the other component
     // neither of them will cause the other to rerun
     let (name, set_name) = create_slice(
+        cx,
         // we take a slice *from* `state`
         state,
         // our getter returns a "slice" of the data
@@ -375,7 +376,7 @@ fn GlobalStateInput() -> impl IntoView {
         |state, n| state.name = n,
     );
 
-    view! {
+    view! { cx,
         <div class="consumer green">
             <input
                 type="text"
@@ -394,7 +395,7 @@ fn GlobalStateInput() -> impl IntoView {
 // Because we defined it as `fn App`, we can now use it in a
 // template as <App/>
 fn main() {
-    leptos::mount_to_body(|| view! { <Option2/><Option3/> })
+    leptos::mount_to_body(|cx| view! { cx, <Option2/><Option3/> })
 }
 
 ```

docs/book/src/SUMMARY.md

@@ -12,7 +12,6 @@
   - [Error Handling](./view/07_errors.md)
   - [Parent-Child Communication](./view/08_parent_child.md)
   - [Passing Children to Components](./view/09_component_children.md)
-  - [No Macros: The View Builder Syntax](./view/builder.md)
 - [Reactivity](./reactivity/README.md)
   - [Working with Signals](./reactivity/working_with_signals.md)
   - [Responding to Changes with `create_effect`](./reactivity/14_create_effect.md)
@@ -44,6 +43,5 @@
   - [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.md)
-- [Appendix: How Does the Reactive System Work?](./appendix_reactive_graph.md)
+- [Deployment]()
 - [Appendix: Optimizing WASM Binary Size](./appendix_binary_size.md)

docs/book/src/appendix_reactive_graph.md

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

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

@@ -2,7 +2,7 @@
 
 A [Resource](https://docs.rs/leptos/latest/leptos/struct.Resource.html) is a reactive data structure that reflects the current state of an asynchronous task, allowing you to integrate asynchronous `Future`s into the synchronous reactive system. Rather than waiting for its data to load with `.await`, you transform the `Future` into a signal that returns `Some(T)` if it has resolved, and `None` if it’s still pending.
 
-You do this by using the [`create_resource`](https://docs.rs/leptos/latest/leptos/fn.create_resource.html) function. This takes two arguments:
+You do this by using the [`create_resource`](https://docs.rs/leptos/latest/leptos/fn.create_resource.html) function. This takes two arguments (other than the ubiquitous `cx`):
 
 1. a source signal, which will generate a new `Future` whenever it changes
 2. a fetcher function, which takes the data from that signal and returns a `Future`
@@ -11,14 +11,14 @@ Here’s an example
 
 ```rust
 // our source signal: some synchronous, local state
-let (count, set_count) = create_signal(0);
+let (count, set_count) = create_signal(cx, 0);
 
 // our resource
-let async_data = create_resource(
+let async_data = create_resource(cx,
     count,
     // every time `count` changes, this will run
     |value| async move {
-        logging::log!("loading data from API");
+        log!("loading data from API");
         load_data(value).await
     },
 );
@@ -27,20 +27,23 @@ let async_data = create_resource(
 To create a resource that simply runs once, you can pass a non-reactive, empty source signal:
 
 ```rust
-let once = create_resource(|| (), |_| async move { load_data().await });
+let once = create_resource(cx, || (), |_| async move { load_data().await });
 ```
 
-To access the value you can use `.read()` or `.with(|data| /* */)`. These work just like `.get()` and `.with()` on a signal—`read` clones the value and returns it, `with` applies a closure to it—but for any `Resource<_, T>`, they always return `Option<T>`, not `T`: because it’s always possible that your resource is still loading.
+To access the value you can use `.read(cx)` or `.with(cx, |data| /* */)`. These work just like `.get()` and `.with()` on a signal—`read` clones the value and returns it, `with` applies a closure to it—but with two differences
+
+1. For any `Resource<_, T>`, they always return `Option<T>`, not `T`: because it’s always possible that your resource is still loading.
+2. They take a `Scope` argument. You’ll see why in the next chapter, on `<Suspense/>`.
 
 So, you can show the current state of a resource in your view:
 
 ```rust
-let once = create_resource(|| (), |_| async move { load_data().await });
-view! {
+let once = create_resource(cx, || (), |_| async move { load_data().await });
+view! { cx,
     <h1>"My Data"</h1>
-    {move || match once.read() {
-        None => view! { <p>"Loading..."</p> }.into_view(),
-        Some(data) => view! { <ShowData data/> }.into_view()
+    {move || match once.read(cx) {
+        None => view! { cx, <p>"Loading..."</p> }.into_view(cx),
+        Some(data) => view! { cx, <ShowData data/> }.into_view(cx)
     }}
 }
 ```
@@ -68,13 +71,13 @@ async fn load_data(value: i32) -> i32 {
 }
 
 #[component]
-fn App() -> impl IntoView {
+fn App(cx: Scope) -> impl IntoView {
     // this count is our synchronous, local state
-    let (count, set_count) = create_signal(0);
+    let (count, set_count) = create_signal(cx, 0);
 
     // create_resource takes two arguments after its scope
     let async_data = create_resource(
-
+        cx,
         // the first is the "source signal"
         count,
         // the second is the loader
@@ -87,14 +90,14 @@ fn App() -> impl IntoView {
     // you can also create resources that only load once
     // just return the unit type () from the source signal
     // that doesn't depend on anything: we just load it once
-    let stable = create_resource(|| (), |_| async move { load_data(1).await });
+    let stable = create_resource(cx, || (), |_| async move { load_data(1).await });
 
     // we can access the resource values with .read()
     // this will reactively return None before the Future has resolved
     // and update to Some(T) when it has resolved
     let async_result = move || {
         async_data
-            .read()
+            .read(cx)
             .map(|value| format!("Server returned {value:?}"))
             // This loading state will only show before the first load
             .unwrap_or_else(|| "Loading...".into())
@@ -105,7 +108,7 @@ fn App() -> impl IntoView {
     let loading = async_data.loading();
     let is_loading = move || if loading() { "Loading..." } else { "Idle." };
 
-    view! {
+    view! { cx,
         <button
             on:click=move |_| {
                 set_count.update(|n| *n += 1);
@@ -114,7 +117,7 @@ fn App() -> impl IntoView {
             "Click me"
         </button>
         <p>
-            <code>"stable"</code>": " {move || stable.read()}
+            <code>"stable"</code>": " {move || stable.read(cx)}
         </p>
         <p>
             <code>"count"</code>": " {count}
@@ -129,7 +132,7 @@ fn App() -> impl IntoView {
 }
 
 fn main() {
-    leptos::mount_to_body(|| view! { <App/> })
+    leptos::mount_to_body(|cx| view! { cx, <App/> })
 }
 
 ```

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

@@ -3,14 +3,14 @@
 In the previous chapter, we showed how you can create a simple loading screen to show some fallback while a resource is loading.
 
 ```rust
-let (count, set_count) = create_signal(0);
-let once = create_resource(count, |count| async move { load_a(count).await });
+let (count, set_count) = create_signal(cx, 0);
+let a = create_resource(cx, count, |count| async move { load_a(count).await });
 
-view! {
+view! { cx,
     <h1>"My Data"</h1>
-    {move || match once.read() {
-        None => view! { <p>"Loading..."</p> }.into_view(),
-        Some(data) => view! { <ShowData data/> }.into_view()
+    {move || match once.read(cx) {
+        None => view! { cx, <p>"Loading..."</p> }.into_view(cx),
+        Some(data) => view! { cx, <ShowData data/> }.into_view(cx)
     }}
 }
 ```
@@ -18,19 +18,19 @@ view! {
 But what if we have two resources, and want to wait for both of them?
 
 ```rust
-let (count, set_count) = create_signal(0);
-let (count2, set_count2) = create_signal(0);
-let a = create_resource(count, |count| async move { load_a(count).await });
-let b = create_resource(count2, |count| async move { load_b(count).await });
+let (count, set_count) = create_signal(cx, 0);
+let (count2, set_count2) = create_signal(cx, 0);
+let a = create_resource(cx, count, |count| async move { load_a(count).await });
+let b = create_resource(cx, count2, |count| async move { load_b(count).await });
 
-view! {
+view! { cx,
     <h1>"My Data"</h1>
-    {move || match (a.read(), b.read()) {
-        (Some(a), Some(b)) => view! {
+    {move || match (a.read(cx), b.read(cx)) {
+        (Some(a), Some(b)) => view! { cx,
             <ShowA a/>
             <ShowA b/>
-        }.into_view(),
-        _ => view! { <p>"Loading..."</p> }.into_view()
+        }.into_view(cx),
+        _ => view! { cx, <p>"Loading..."</p> }.into_view(cx)
     }}
 }
 ```
@@ -40,26 +40,26 @@ That’s not _so_ bad, but it’s kind of annoying. What if we could invert the
 The [`<Suspense/>`](https://docs.rs/leptos/latest/leptos/fn.Suspense.html) component lets us do exactly that. You give it a `fallback` prop and children, one or more of which usually involves reading from a resource. Reading from a resource “under” a `<Suspense/>` (i.e., in one of its children) registers that resource with the `<Suspense/>`. If it’s still waiting for resources to load, it shows the `fallback`. When they’ve all loaded, it shows the children.
 
 ```rust
-let (count, set_count) = create_signal(0);
-let (count2, set_count2) = create_signal(0);
-let a = create_resource(count, |count| async move { load_a(count).await });
-let b = create_resource(count2, |count| async move { load_b(count).await });
+let (count, set_count) = create_signal(cx, 0);
+let (count2, set_count2) = create_signal(cx, 0);
+let a = create_resource(cx, count, |count| async move { load_a(count).await });
+let b = create_resource(cx, count2, |count| async move { load_b(count).await });
 
-view! {
+view! { cx,
     <h1>"My Data"</h1>
     <Suspense
-        fallback=move || view! { <p>"Loading..."</p> }
+        fallback=move || view! { cx, <p>"Loading..."</p> }
     >
         <h2>"My Data"</h2>
         <h3>"A"</h3>
         {move || {
-            a.read()
-                .map(|a| view! { <ShowA a/> })
+            a.read(cx)
+                .map(|a| view! { cx, <ShowA a/> })
         }}
         <h3>"B"</h3>
         {move || {
-            b.read()
-                .map(|b| view! { <ShowB b/> })
+            b.read(cx)
+                .map(|b| view! { cx, <ShowB b/> })
         }}
     </Suspense>
 }
@@ -69,34 +69,6 @@ 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>
@@ -114,17 +86,17 @@ async fn important_api_call(name: String) -> String {
 }
 
 #[component]
-fn App() -> impl IntoView {
-    let (name, set_name) = create_signal("Bill".to_string());
+fn App(cx: Scope) -> impl IntoView {
+    let (name, set_name) = create_signal(cx, "Bill".to_string());
 
     // this will reload every time `name` changes
     let async_data = create_resource(
-
+        cx,
         name,
         |name| async move { important_api_call(name).await },
     );
 
-    view! {
+    view! { cx,
         <input
             on:input=move |ev| {
                 set_name(event_target_value(&ev));
@@ -135,20 +107,20 @@ fn App() -> impl IntoView {
         <Suspense
             // the fallback will show whenever a resource
             // read "under" the suspense is loading
-            fallback=move || view! { <p>"Loading..."</p> }
+            fallback=move || view! { cx, <p>"Loading..."</p> }
         >
             // the children will be rendered once initially,
             // and then whenever any resources has been resolved
             <p>
                 "Your shouting name is "
-                {move || async_data.read()}
+                {move || async_data.read(cx)}
             </p>
         </Suspense>
     }
 }
 
 fn main() {
-    leptos::mount_to_body(|| view! { <App/> })
+    leptos::mount_to_body(|cx| view! { cx, <App/> })
 }
 
 ```

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

@@ -29,13 +29,13 @@ async fn important_api_call(id: usize) -> String {
 }
 
 #[component]
-fn App() -> impl IntoView {
-    let (tab, set_tab) = create_signal(0);
+fn App(cx: Scope) -> impl IntoView {
+    let (tab, set_tab) = create_signal(cx, 0);
 
     // this will reload every time `tab` changes
-    let user_data = create_resource(tab, |tab| async move { important_api_call(tab).await });
+    let user_data = create_resource(cx, tab, |tab| async move { important_api_call(tab).await });
 
-    view! {
+    view! { cx,
         <div class="buttons">
             <button
                 on:click=move |_| set_tab(0)
@@ -65,17 +65,17 @@ fn App() -> impl IntoView {
             // the fallback will show initially
             // on subsequent reloads, the current child will
             // continue showing
-            fallback=move || view! { <p>"Loading..."</p> }
+            fallback=move || view! { cx, <p>"Loading..."</p> }
         >
             <p>
-                {move || user_data.read()}
+                {move || user_data.read(cx)}
             </p>
         </Transition>
     }
 }
 
 fn main() {
-    leptos::mount_to_body(|| view! { <App/> })
+    leptos::mount_to_body(|cx| view! { cx, <App/> })
 }
 
 ```

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

@@ -16,22 +16,22 @@ async fn add_todo_request(new_title: &str) -> Uuid {
 }
 ```
 
-`create_action` takes an `async` function that takes a reference to a single argument, which you could think of as its “input type.”
+`create_action` takes a reactive `Scope` and an `async` function that takes a reference to a single argument, which you could think of as its “input type.”
 
 > The input is always a single type. If you want to pass in multiple arguments, you can do it with a struct or tuple.
 >
 > ```rust
 > // if there's a single argument, just use that
-> let action1 = create_action(|input: &String| {
+> let action1 = create_action(cx, |input: &String| {
 >    let input = input.clone();
 >    async move { todo!() }
 > });
 >
 > // if there are no arguments, use the unit type `()`
-> let action2 = create_action(|input: &()| async { todo!() });
+> let action2 = create_action(cx, |input: &()| async { todo!() });
 >
 > // if there are multiple arguments, use a tuple
-> let action3 = create_action(
+> let action3 = create_action(cx,
 >   |input: &(usize, String)| async { todo!() }
 > );
 > ```
@@ -41,7 +41,7 @@ async fn add_todo_request(new_title: &str) -> Uuid {
 So in this case, all we need to do to create an action is
 
 ```rust
-let add_todo_action = create_action(|input: &String| {
+let add_todo_action = create_action(cx, |input: &String| {
     let input = input.to_owned();
     async move { add_todo_request(&input).await }
 });
@@ -66,9 +66,9 @@ let todo_id = add_todo_action.value(); // RwSignal<Option<Uuid>>
 This makes it easy to track the current state of your request, show a loading indicator, or do “optimistic UI” based on the assumption that the submission will succeed.
 
 ```rust
-let input_ref = create_node_ref::<Input>();
+let input_ref = create_node_ref::<Input>(cx);
 
-view! {
+view! { cx,
     <form
         on:submit=move |ev| {
             ev.prevent_default(); // don't reload the page...
@@ -116,10 +116,10 @@ async fn add_todo(text: &str) -> Uuid {
 }
 
 #[component]
-fn App() -> impl IntoView {
+fn App(cx: Scope) -> impl IntoView {
     // an action takes an async function with single argument
     // it can be a simple type, a struct, or ()
-    let add_todo = create_action(|input: &String| {
+    let add_todo = create_action(cx, |input: &String| {
         // the input is a reference, but we need the Future to own it
         // this is important: we need to clone and move into the Future
         // so it has a 'static lifetime
@@ -133,9 +133,9 @@ fn App() -> impl IntoView {
     let pending = add_todo.pending();
     let todo_id = add_todo.value();
 
-    let input_ref = create_node_ref::<Input>();
+    let input_ref = create_node_ref::<Input>(cx);
 
-    view! {
+    view! { cx,
         <form
             on:submit=move |ev| {
                 ev.prevent_default(); // don't reload the page...
@@ -168,7 +168,7 @@ fn App() -> impl IntoView {
 }
 
 fn main() {
-    leptos::mount_to_body(|| view! { <App/> })
+    leptos::mount_to_body(|cx| view! { cx, <App/> })
 }
 ```
 

docs/book/src/deployment.md

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

docs/book/src/interlude_projecting_children.md

@@ -7,12 +7,12 @@ As you build components you may occasionally find yourself wanting to “project
 Consider the following:
 
 ```rust
-pub fn LoggedIn<F, IV>(fallback: F, children: ChildrenFn) -> impl IntoView
+pub fn LoggedIn<F, IV>(cx: Scope, fallback: F, children: ChildrenFn) -> impl IntoView
 where
-    F: Fn() -> IV + 'static,
+    F: Fn(Scope) -> IV + 'static,
     IV: IntoView,
 {
-    view! {
+    view! { cx,
         <Suspense
             fallback=|| ()
         >
@@ -22,7 +22,7 @@ where
                 when=move || todo!()
                 fallback=fallback
             >
-				{children()}
+				{children(cx)}
 			</Show>
         </Suspense>
     }
@@ -50,16 +50,18 @@ If you want to really understand the issue here, it may help to look at the expa
 
 ```rust
 Suspense(
+    cx,
     ::leptos::component_props_builder(&Suspense)
         .fallback(|| ())
         .children({
             // fallback and children are moved into this closure
-            Box::new(move || {
+            Box::new(move |cx| {
                 {
                     // fallback and children captured here
                     leptos::Fragment::lazy(|| {
                         vec![
                             (Show(
+                                cx,
                                 ::leptos::component_props_builder(&Show)
                                     .when(|| true)
 									// but fallback is moved into Show here
@@ -68,7 +70,7 @@ Suspense(
                                     .children(children)
                                     .build(),
                             )
-                            .into_view()),
+                            .into_view(cx)),
                         ]
                     })
                 }
@@ -89,22 +91,22 @@ We can solve this problem by using the [`store_value`](https://docs.rs/leptos/la
 In this case, it’s really simple:
 
 ```rust
-pub fn LoggedIn<F, IV>(F, children: ChildrenFn) -> impl IntoView
+pub fn LoggedIn<F, IV>(cx: Scope, fallback: F, children: ChildrenFn) -> impl IntoView
 where
-    F: Fn() -> IV + 'static,
+    F: Fn(Scope) -> IV + 'static,
     IV: IntoView,
 {
-    let fallback = store_value(fallback);
-    let children = store_value(children);
-    view! {
+    let fallback = store_value(cx, fallback);
+    let children = store_value(cx, children);
+    view! { cx,
         <Suspense
             fallback=|| ()
         >
             <Show
                 when=|| todo!()
-                fallback=move || fallback.with_value(|fallback| fallback())
+                fallback=move |cx| fallback.with_value(|fallback| fallback(cx))
             >
-                {children.with_value(|children| children())}
+                {children.with_value(|children| children(cx))}
             </Show>
         </Suspense>
     }
@@ -123,9 +125,9 @@ Consider this example
 
 ```rust
 #[component]
-pub fn App() -> impl IntoView {
+pub fn App(cx: Scope) -> impl IntoView {
     let name = "Alice".to_string();
-    view! {
+    view! { cx,
         <Outer>
             <Inner>
                 <Inmost name=name.clone()/>
@@ -135,18 +137,18 @@ pub fn App() -> impl IntoView {
 }
 
 #[component]
-pub fn Outer(ChildrenFn) -> impl IntoView {
-    children()
+pub fn Outer(cx: Scope, children: ChildrenFn) -> impl IntoView {
+    children(cx)
 }
 
 #[component]
-pub fn Inner(ChildrenFn) -> impl IntoView {
-    children()
+pub fn Inner(cx: Scope, children: ChildrenFn) -> impl IntoView {
+    children(cx)
 }
 
 #[component]
-pub fn Inmost(ng) -> impl IntoView {
-    view! {
+pub fn Inmost(cx: Scope, name: String) -> impl IntoView {
+    view! { cx,
         <p>{name}</p>
     }
 }
@@ -163,7 +165,7 @@ It’s captured through multiple levels of children that need to run more than o
 In this case, the `clone:` syntax comes in handy. Calling `clone:name` will clone `name` _before_ moving it into `<Inner/>`’s children, which solves our ownership issue.
 
 ```rust
-view! {
+view! { cx,
 	<Outer>
 		<Inner clone:name>
 			<Inmost name=name.clone()/>

docs/book/src/interlude_styling.md

@@ -14,10 +14,10 @@ This allows you to write components like this:
 
 ```rust
 #[component]
-fn Home() -> impl IntoView {
-    let (count, set_count) = create_signal(0);
+fn Home(cx: Scope) -> impl IntoView {
+    let (count, set_count) = create_signal(cx, 0);
 
-    view! {
+    view! { cx,
         <main class="my-0 mx-auto max-w-3xl text-center">
             <h2 class="p-6 text-4xl">"Welcome to Leptos with Tailwind"</h2>
             <p class="px-10 pb-10 text-left">"Tailwind will scan your Rust files for Tailwind class names and compile them into a CSS file."</p>
@@ -48,7 +48,7 @@ This allows you to write components like this:
 use stylers::style;
 
 #[component]
-pub fn App() -> impl IntoView {
+pub fn App(cx: Scope) -> impl IntoView {
     let styler_class = style! { "App",
         #two{
             color: blue;
@@ -74,7 +74,7 @@ pub fn App() -> impl IntoView {
         }
     };
 
-    view! { class = styler_class,
+    view! { cx, class = styler_class,
         <div class="one">
             <h1 id="two">"Hello"</h1>
             <h2>"World"</h2>
@@ -93,7 +93,7 @@ pub fn App() -> impl IntoView {
 use styled::style;
 
 #[component]
-pub fn MyComponent() -> impl IntoView {
+pub fn MyComponent(cx: Scope) -> impl IntoView {
     let styles = style!(
       div {
         background-color: red;
@@ -101,7 +101,7 @@ pub fn MyComponent() -> impl IntoView {
       }
     );
 
-    styled::view! { styles,
+    styled::view! { cx, styles,
         <div>"This text should be red with white text."</div>
     }
 }

docs/book/src/progressive_enhancement/action_form.md

@@ -3,13 +3,12 @@
 [`<ActionForm/>`](https://docs.rs/leptos_router/latest/leptos_router/fn.ActionForm.html) is a specialized `<Form/>` that takes a server action, and automatically dispatches it on form submission. This allows you to call a server function directly from a `<form>`, even without JS/WASM.
 
 The process is simple:
-
 1. Define a server function using the [`#[server]` macro](https://docs.rs/leptos/latest/leptos/attr.server.html) (see [Server Functions](../server/25_server_functions.md).)
 2. Create an action using [`create_server_action`](https://docs.rs/leptos/latest/leptos/fn.create_server_action.html), specifying the type of the server function you’ve defined.
 3. Create an `<ActionForm/>`, providing the server action in the `action` prop.
 4. Pass the named arguments to the server function as form fields with the same names.
 
-> **Note:** `<ActionForm/>` only works with the default URL-encoded `POST` encoding for server functions, to ensure graceful degradation/correct behavior as an HTML form.
+> **Note:** `<ActionForm/>` only works with the default URL-encoded `POST` encoding for server functions, to ensure graceful degradation/correct behavior as an HTML form. 
 
 ```rust
 #[server(AddTodo, "/api")]
@@ -18,14 +17,14 @@ pub async fn add_todo(title: String) -> Result<(), ServerFnError> {
 }
 
 #[component]
-fn AddTodo() -> impl IntoView {
-	let add_todo = create_server_action::<AddTodo>();
+fn AddTodo(cx: Scope) -> impl IntoView {
+	let add_todo = create_server_action::<AddTodo>(cx);
 	// holds the latest *returned* value from the server
 	let value = add_todo.value();
 	// check if the server has returned an error
 	let has_error = move || value.with(|val| matches!(val, Some(Err(_))));
 
-	view! {
+	view! { cx,
 		<ActionForm action=add_todo>
 			<label>
 				"Add a Todo"
@@ -37,7 +36,6 @@ fn AddTodo() -> impl IntoView {
 	}
 }
 ```
-
 It’s really that easy. With JS/WASM, your form will submit without a page reload, storing its most recent submission in the `.input()` signal of the action, its pending status in `.pending()`, and so on. (See the [`Action`](https://docs.rs/leptos/latest/leptos/struct.Action.html) docs for a refresher, if you need.) Without JS/WASM, your form will submit with a page reload. If you call a `redirect` function (from `leptos_axum` or `leptos_actix`) it will redirect to the correct page. By default, it will redirect back to the page you’re currently on. The power of HTML, HTTP, and isomorphic rendering mean that your `<ActionForm/>` simply works, even with no JS/WASM.
 
 ## Client-Side Validation
@@ -55,4 +53,4 @@ let on_submit = move |ev| {
 		ev.prevent_default();
 	}
 }
-```
+```

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

@@ -9,10 +9,10 @@ Hidden behind the whole reactive DOM renderer that we’ve seen so far is a func
 [`create_effect`](https://docs.rs/leptos_reactive/latest/leptos_reactive/fn.create_effect.html) takes a function as its argument. It immediately runs the function. If you access any reactive signal inside that function, it registers the fact that the effect depends on that signal with the reactive runtime. Whenever one of the signals that the effect depends on changes, the effect runs again.
 
 ```rust
-let (a, set_a) = create_signal(0);
-let (b, set_b) = create_signal(0);
+let (a, set_a) = create_signal(cx, 0);
+let (b, set_b) = create_signal(cx, 0);
 
-create_effect(move |_| {
+create_effect(cx, move |_| {
   // immediately prints "Value: 0" and subscribes to `a`
   log::debug!("Value: {}", a());
 });
@@ -42,14 +42,15 @@ While they’re not a “zero-cost abstraction” in the most technical sense—
 Imagine that I’m creating some kind of chat software, and I want people to be able to display their full name, or just their first name, and to notify the server whenever their name changes:
 
 ```rust
-let (first, set_first) = create_signal(String::new());
-let (last, set_last) = create_signal(String::new());
-let (use_last, set_use_last) = create_signal(true);
+let (first, set_first) = create_signal(cx, String::new());
+let (last, set_last) = create_signal(cx, String::new());
+let (use_last, set_use_last) = create_signal(cx, true);
 
 // this will add the name to the log
 // any time one of the source signals changes
-create_effect(move |_| {
+create_effect(cx, move |_| {
     log(
+        cx,
         if use_last() {
             format!("{} {}", first(), last())
         } else {
@@ -76,9 +77,9 @@ If you need to synchronize some reactive value with the non-reactive world outsi
 We’ve managed to get this far without mentioning effects because they’re built into the Leptos DOM renderer. We’ve seen that you can create a signal and pass it into the `view` macro, and it will update the relevant DOM node whenever the signal changes:
 
 ```rust
-let (count, set_count) = create_signal(0);
+let (count, set_count) = create_signal(cx, 0);
 
-view! {
+view! { cx,
     <p>{count}</p>
 }
 ```
@@ -86,13 +87,13 @@ view! {
 This works because the framework essentially creates an effect wrapping this update. You can imagine Leptos translating this view into something like this:
 
 ```rust
-let (count, set_count) = create_signal(0);
+let (count, set_count) = create_signal(cx, 0);
 
 // create a DOM element
 let p = create_element("p");
 
 // create an effect to reactively update the text
-create_effect(move |prev_value| {
+create_effect(cx, move |prev_value| {
     // first, access the signal’s value and convert it to a string
     let text = count().to_string();
 
@@ -108,33 +109,6 @@ 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>
@@ -147,30 +121,30 @@ use leptos::html::Input;
 use leptos::*;
 
 #[component]
-fn App() -> impl IntoView {
+fn App(cx: Scope) -> impl IntoView {
     // Just making a visible log here
     // You can ignore this...
-    let log = create_rw_signal::<Vec<String>>(vec![]);
+    let log = create_rw_signal::<Vec<String>>(cx, vec![]);
     let logged = move || log().join("\n");
-    provide_context(log);
+    provide_context(cx, log);
 
-    view! {
+    view! { cx,
         <CreateAnEffect/>
         <pre>{logged}</pre>
     }
 }
 
 #[component]
-fn CreateAnEffect() -> impl IntoView {
-    let (first, set_first) = create_signal(String::new());
-    let (last, set_last) = create_signal(String::new());
-    let (use_last, set_use_last) = create_signal(true);
+fn CreateAnEffect(cx: Scope) -> impl IntoView {
+    let (first, set_first) = create_signal(cx, String::new());
+    let (last, set_last) = create_signal(cx, String::new());
+    let (use_last, set_use_last) = create_signal(cx, true);
 
     // this will add the name to the log
     // any time one of the source signals changes
-    create_effect(move |_| {
+    create_effect(cx, move |_| {
         log(
-
+            cx,
             if use_last() {
                 format!("{}  {}", first(), last())
             } else {
@@ -179,7 +153,7 @@ fn CreateAnEffect() -> impl IntoView {
         )
     });
 
-    view! {
+    view! { cx,
         <h1><code>"create_effect"</code> " Version"</h1>
         <form>
             <label>
@@ -205,14 +179,14 @@ fn CreateAnEffect() -> impl IntoView {
 }
 
 #[component]
-fn ManualVersion() -> impl IntoView {
-    let first = create_node_ref::<Input>();
-    let last = create_node_ref::<Input>();
-    let use_last = create_node_ref::<Input>();
+fn ManualVersion(cx: Scope) -> impl IntoView {
+    let first = create_node_ref::<Input>(cx);
+    let last = create_node_ref::<Input>(cx);
+    let use_last = create_node_ref::<Input>(cx);
 
     let mut prev_name = String::new();
     let on_change = move |_| {
-        log("      listener");
+        log(cx, "      listener");
         let first = first.get().unwrap();
         let last = last.get().unwrap();
         let use_last = use_last.get().unwrap();
@@ -223,12 +197,12 @@ fn ManualVersion() -> impl IntoView {
         };
 
         if this_one != prev_name {
-            log(&this_one);
+            log(cx, &this_one);
             prev_name = this_one;
         }
     };
 
-    view! {
+    view! { cx,
         <h1>"Manual Version"</h1>
         <form on:change=on_change>
             <label>
@@ -255,12 +229,12 @@ fn ManualVersion() -> impl IntoView {
 }
 
 #[component]
-fn EffectVsDerivedSignal() -> impl IntoView {
-    let (my_value, set_my_value) = create_signal(String::new());
+fn EffectVsDerivedSignal(cx: Scope) -> impl IntoView {
+    let (my_value, set_my_value) = create_signal(cx, String::new());
     // Don't do this.
-    /*let (my_optional_value, set_optional_my_value) = create_signal(Option::<String>::None);
+    /*let (my_optional_value, set_optional_my_value) = create_signal(cx, Option::<String>::None);
 
-    create_effect(move |_| {
+    create_effect(cx, move |_| {
         if !my_value.get().is_empty() {
             set_optional_my_value(Some(my_value.get()));
         } else {
@@ -272,7 +246,7 @@ fn EffectVsDerivedSignal() -> impl IntoView {
     let my_optional_value =
         move || (!my_value.with(String::is_empty)).then(|| Some(my_value.get()));
 
-    view! {
+    view! { cx,
         <input
             prop:value=my_value
             on:input= move |ev| set_my_value(event_target_value(&ev))
@@ -284,7 +258,7 @@ fn EffectVsDerivedSignal() -> impl IntoView {
             <code>
                 <Show
                     when=move || my_optional_value().is_some()
-                    fallback=|| view! { "None" }
+                    fallback=|cx| view! { cx, "None" }
                 >
                     "Some(\"" {my_optional_value().unwrap()} "\")"
                 </Show>
@@ -296,9 +270,9 @@ fn EffectVsDerivedSignal() -> impl IntoView {
 /*#[component]
 pub fn Show<F, W, IV>(
     /// The scope the component is running in
-
+    cx: Scope,
     /// The components Show wraps
-    children: Box<dyn Fn() -> Fragment>,
+    children: Box<dyn Fn(Scope) -> Fragment>,
     /// A closure that returns a bool that determines whether this thing runs
     when: W,
     /// A closure that returns what gets rendered if the when statement is false
@@ -306,24 +280,24 @@ pub fn Show<F, W, IV>(
 ) -> impl IntoView
 where
     W: Fn() -> bool + 'static,
-    F: Fn() -> IV + 'static,
+    F: Fn(Scope) -> IV + 'static,
     IV: IntoView,
 {
-    let memoized_when = create_memo(move |_| when());
+    let memoized_when = create_memo(cx, move |_| when());
 
     move || match memoized_when.get() {
-        true => children().into_view(),
-        false => fallback().into_view(),
+        true => children(cx).into_view(cx),
+        false => fallback(cx).into_view(cx),
     }
 }*/
 
-fn log(std::fmt::Display) {
-    let log = use_context::<RwSignal<Vec<String>>>().unwrap();
+fn log(cx: Scope, msg: impl std::fmt::Display) {
+    let log = use_context::<RwSignal<Vec<String>>>(cx).unwrap();
     log.update(|log| log.push(msg.to_string()));
 }
 
 fn main() {
-    leptos::mount_to_body(|| view! { <App/> })
+    leptos::mount_to_body(|cx| view! { cx, <App/> })
 }
 
 ```

docs/book/src/reactivity/interlude_functions.md

@@ -6,7 +6,7 @@ application. It sometimes looks a little silly:
 
 ```rust
 // a signal holds a value, and can be updated
-let (count, set_count) = create_signal(0);
+let (count, set_count) = create_signal(cx, 0);
 
 // a derived signal is a function that accesses other signals
 let double_count = move || count() * 2;
@@ -19,11 +19,11 @@ let text = move || if count_is_odd() {
 
 // an effect automatically tracks the signals it depends on
 // and reruns when they change
-create_effect(move |_| {
-    logging::log!("text = {}", text());
+create_effect(cx, move |_| {
+    log!("text = {}", text());
 });
 
-view! {
+view! { cx,
     <p>{move || text().to_uppercase()}</p>
 }
 ```
@@ -53,12 +53,12 @@ Take our typical `<SimpleCounter/>` example in its simplest form:
 
 ```rust
 #[component]
-pub fn SimpleCounter() -> impl IntoView {
-    let (value, set_value) = create_signal(0);
+pub fn SimpleCounter(cx: Scope) -> impl IntoView {
+    let (value, set_value) = create_signal(cx, 0);
 
     let increment = move |_| set_value.update(|value| *value += 1);
 
-    view! {
+    view! { cx,
         <button on:click=increment>
             {value}
         </button>

docs/book/src/reactivity/working_with_signals.md

@@ -14,17 +14,17 @@ There are four basic signal operations:
 Calling a `ReadSignal` as a function is syntax sugar for `.get()`. Calling a `WriteSignal` as a function is syntax sugar for `.set()`. So
 
 ```rust
-let (count, set_count) = create_signal(0);
+let (count, set_count) = create_signal(cx, 0);
 set_count(1);
-logging::log!(count());
+log!(count());
 ```
 
 is the same as
 
 ```rust
-let (count, set_count) = create_signal(0);
+let (count, set_count) = create_signal(cx, 0);
 set_count.set(1);
-logging::log!(count.get());
+log!(count.get());
 ```
 
 You might notice that `.get()` and `.set()` can be implemented in terms of `.with()` and `.update()`. In other words, `count.get()` is identical with `count.with(|n| n.clone())`, and `count.set(1)` is implemented by doing `count.update(|n| *n = 1)`.
@@ -36,7 +36,7 @@ However, there are some very good use cases for `.with()` and `.update()`.
 For example, consider a signal that holds a `Vec<String>`.
 
 ```rust
-let (names, set_names) = create_signal(Vec::new());
+let (names, set_names) = create_signal(cx, Vec::new());
 if names().is_empty() {
 	set_names(vec!["Alice".to_string()]);
 }
@@ -47,7 +47,7 @@ In terms of logic, this is simple enough, but it’s hiding some significant ine
 Likewise, `set_names` replaces the value with a whole new `Vec<_>`. This is fine, but we might as well just mutate the original `Vec<_>` in place.
 
 ```rust
-let (names, set_names) = create_signal(Vec::new());
+let (names, set_names) = create_signal(cx, Vec::new());
 if names.with(|names| names.is_empty()) {
 	set_names.update(|names| names.push("Alice".to_string()));
 }
@@ -63,46 +63,40 @@ if names.with(Vec::is_empty) {
 }
 ```
 
-After all, `.with()` simply takes a function that takes the value by reference. Since `Vec::is_empty` takes `&self`, we can pass it in directly and avoid the unnecessary closure.
+After all, `.with()` simply takes a function that takes the value by reference. Since `Vec::is_empty` takes `&self`, we can pass it in directly and avoid the unncessary closure.
 
 ## Making signals depend on each other
 
 Often people ask about situations in which some signal needs to change based on some other signal’s value. There are three good ways to do this, and one that’s less than ideal but okay under controlled circumstances.
 
 ### Good Options
-
 **1) B is a function of A.** Create a signal for A and a derived signal or memo for B.
 
 ```rust
-let (count, set_count) = create_signal(1);
+let (count, set_count) = create_signal(cx, 1);
 let derived_signal_double_count = move || count() * 2;
-let memoized_double_count = create_memo(move |_| count() * 2);
+let memoized_double_count = create_memo(cx, move |_| count() * 2);
 ```
-
 > For guidance on whether to use a derived signal or a memo, see the docs for [`create_memo`](https://docs.rs/leptos/latest/leptos/fn.create_memo.html)
->
-> **2) C is a function of A and some other thing B.** Create signals for A and B and a derived signal or memo for C.
+> 
+**2) C is a function of A and some other thing B.** Create signals for A and B and a derived signal or memo for C.
 
 ```rust
-let (first_name, set_first_name) = create_signal("Bridget".to_string());
-let (last_name, set_last_name) = create_signal("Jones".to_string());
+let (first_name, set_first_name) = create_signal(cx, "Bridget".to_string());
+let (last_name, set_last_name) = create_signal(cx, "Jones".to_string());
 let full_name = move || format!("{} {}", first_name(), last_name());
 ```
-
 **3) A and B are independent signals, but sometimes updated at the same time.** When you make the call to update A, make a separate call to update B.
-
 ```rust
-let (age, set_age) = create_signal(32);
-let (favorite_number, set_favorite_number) = create_signal(42);
+let (age, set_age) = create_signal(cx, 32);
+let (favorite_number, set_favorite_number) = create_signal(cx, 42);
 // use this to handle a click on a `Clear` button
 let clear_handler = move |_| {
   set_age(0);
   set_favorite_number(0);
 };
 ```
-
 ### If you really must...
-
 **4) Create an effect to write to B whenever A changes.** This is officially discouraged, for several reasons:
 a) It will always be less efficient, as it means every time A updates you do two full trips through the reactive process. (You set A, which causes the effect to run, as well as any other effects that depend on A. Then you set B, which causes any effects that depend on B to run.)
 b) It increases your chances of accidentally creating things like infinite loops or over-re-running effects. This is the kind of ping-ponging, reactive spaghetti code that was common in the early 2010s and that we try to avoid with things like read-write segregation and discouraging writing to signals from effects.

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

@@ -33,8 +33,8 @@ use leptos::*;
 use leptos_router::*;
 
 #[component]
-pub fn App() -> impl IntoView {
-  view! {
+pub fn App(cx: Scope) -> impl IntoView {
+  view! { cx,
     <Router>
       <nav>
         /* ... */
@@ -58,8 +58,8 @@ use leptos::*;
 use leptos_router::*;
 
 #[component]
-pub fn App() -> impl IntoView {
-  view! {
+pub fn App(cx: Scope) -> impl IntoView {
+  view! { cx,
     <Router>
       <nav>
         /* ... */
@@ -83,18 +83,18 @@ The `path` can include
 - dynamic, named parameters beginning with a colon (`/:id`),
 - and/or a wildcard beginning with an asterisk (`/user/*any`)
 
-The `view` is a function that returns a view. Any component with no props works here, as does a closure that returns some view.
+The `view` is a function that takes a `Scope` and returns a view.
 
 ```rust
 <Routes>
   <Route path="/" view=Home/>
   <Route path="/users" view=Users/>
   <Route path="/users/:id" view=UserProfile/>
-  <Route path="/*any" view=|| view! { <h1>"Not Found"</h1> }/>
+  <Route path="/*any" view=NotFound/>
 </Routes>
 ```
 
-> `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/> }`.
+> `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/> }`.
 
 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=|| view! {
+    <Route path="" view=|cx| view! { cx,
       <p>"Select a contact to view more info."</p>
     }/>
   </Route>
@@ -113,7 +113,7 @@ You can go even deeper. Say you want to have tabs for each contact’s address,
       <Route path="address" view=Address/>
       <Route path="messages" view=Messages/>
     </Route>
-    <Route path="" view=|| view! {
+    <Route path="" view=|cx| view! { cx,
       <p>"Select a contact to view more info."</p>
     }/>
   </Route>
@@ -135,15 +135,15 @@ That’s all! But it’s important to know and to remember, because it’s a com
 
 ```rust
 #[component]
-pub fn ContactList() -> impl IntoView {
+pub fn ContactList(cx: Scope) -> impl IntoView {
   let contacts = todo!();
 
-  view! {
+  view! { cx,
     <div style="display: flex">
       // the contact list
       <For each=contacts
         key=|contact| contact.id
-        view=|contact| todo!()
+        view=|cx, contact| todo!()
       >
       // the nested child, if any
       // don’t forget this!
@@ -179,8 +179,8 @@ use leptos::*;
 use leptos_router::*;
 
 #[component]
-fn App() -> impl IntoView {
-    view! {
+fn App(cx: Scope) -> impl IntoView {
+    view! { cx,
         <Router>
             <h1>"Contact App"</h1>
             // this <nav> will show on every routes,
@@ -195,29 +195,28 @@ fn App() -> impl IntoView {
             <main>
                 <Routes>
                     // / just has an un-nested "Home"
-                    <Route path="/" view=|| view! {
+                    <Route path="/" view=|cx| view! { cx,
                         <h3>"Home"</h3>
                     }/>
                     // /contacts has nested routes
                     <Route
                         path="/contacts"
                         view=ContactList
-                      >
                         // if no id specified, fall back
                         <Route path=":id" view=ContactInfo>
-                            <Route path="" view=|| view! {
+                            <Route path="" view=|cx| view! { cx,
                                 <div class="tab">
                                     "(Contact Info)"
                                 </div>
                             }/>
-                            <Route path="conversations" view=|| view! {
+                            <Route path="conversations" view=|cx| view! { cx,
                                 <div class="tab">
                                     "(Conversations)"
                                 </div>
                             }/>
                         </Route>
                         // if no id specified, fall back
-                        <Route path="" view=|| view! {
+                        <Route path="" view=|cx| view! { cx,
                             <div class="select-user">
                                 "Select a user to view contact info."
                             </div>
@@ -230,8 +229,8 @@ fn App() -> impl IntoView {
 }
 
 #[component]
-fn ContactList() -> impl IntoView {
-    view! {
+fn ContactList(cx: Scope) -> impl IntoView {
+    view! { cx,
         <div class="contact-list">
             // here's our contact list component itself
             <div class="contact-list-contacts">
@@ -250,9 +249,9 @@ fn ContactList() -> impl IntoView {
 }
 
 #[component]
-fn ContactInfo() -> impl IntoView {
+fn ContactInfo(cx: Scope) -> impl IntoView {
     // we can access the :id param reactively with `use_params_map`
-    let params = use_params_map();
+    let params = use_params_map(cx);
     let id = move || params.with(|params| params.get("id").cloned().unwrap_or_default());
 
     // imagine we're loading data from an API here
@@ -263,7 +262,7 @@ fn ContactInfo() -> impl IntoView {
         _ => "User not found.",
     };
 
-    view! {
+    view! { cx,
         <div class="contact-info">
             <h4>{name}</h4>
             <div class="tabs">
@@ -279,7 +278,7 @@ fn ContactInfo() -> impl IntoView {
 }
 
 fn main() {
-    leptos::mount_to_body(|| view! { <App/> })
+    leptos::mount_to_body(|cx| view! { cx, <App/> })
 }
 
 ```

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

@@ -50,8 +50,8 @@ Now we can use them in a component. Imagine a URL that has both params and a que
 The typed versions return `Memo<Result<T, _>>`. It’s a Memo so it reacts to changes in the URL. It’s a `Result` because the params or query need to be parsed from the URL, and may or may not be valid.
 
 ```rust
-let params = use_params::<ContactParams>();
-let query = use_query::<ContactSearch>();
+let params = use_params::<ContactParams>(cx);
+let query = use_query::<ContactSearch>(cx);
 
 // id: || -> usize
 let id = move || {
@@ -66,8 +66,8 @@ let id = move || {
 The untyped versions return `Memo<ParamsMap>`. Again, it’s memo to react to changes in the URL. [`ParamsMap`](https://docs.rs/leptos_router/0.2.3/leptos_router/struct.ParamsMap.html) behaves a lot like any other map type, with a `.get()` method that returns `Option<&String>`.
 
 ```rust
-let params = use_params_map();
-let query = use_query_map();
+let params = use_params_map(cx);
+let query = use_query_map(cx);
 
 // id: || -> Option<String>
 let id = move || {
@@ -94,8 +94,8 @@ use leptos::*;
 use leptos_router::*;
 
 #[component]
-fn App() -> impl IntoView {
-    view! {
+fn App(cx: Scope) -> impl IntoView {
+    view! { cx,
         <Router>
             <h1>"Contact App"</h1>
             // this <nav> will show on every routes,
@@ -110,7 +110,7 @@ fn App() -> impl IntoView {
             <main>
                 <Routes>
                     // / just has an un-nested "Home"
-                    <Route path="/" view=|| view! {
+                    <Route path="/" view=|cx| view! { cx,
                         <h3>"Home"</h3>
                     }/>
                     // /contacts has nested routes
@@ -120,19 +120,19 @@ fn App() -> impl IntoView {
                     >
                         // if no id specified, fall back
                         <Route path=":id" view=ContactInfo>
-                            <Route path="" view=|| view! {
+                            <Route path="" view=|cx| view! { cx,
                                 <div class="tab">
                                     "(Contact Info)"
                                 </div>
                             }/>
-                            <Route path="conversations" view=|| view! {
+                            <Route path="conversations" view=|cx| view! { cx,
                                 <div class="tab">
                                     "(Conversations)"
                                 </div>
                             }/>
                         </Route>
                         // if no id specified, fall back
-                        <Route path="" view=|| view! {
+                        <Route path="" view=|cx| view! { cx,
                             <div class="select-user">
                                 "Select a user to view contact info."
                             </div>
@@ -145,8 +145,8 @@ fn App() -> impl IntoView {
 }
 
 #[component]
-fn ContactList() -> impl IntoView {
-    view! {
+fn ContactList(cx: Scope) -> impl IntoView {
+    view! { cx,
         <div class="contact-list">
             // here's our contact list component itself
             <div class="contact-list-contacts">
@@ -165,9 +165,9 @@ fn ContactList() -> impl IntoView {
 }
 
 #[component]
-fn ContactInfo() -> impl IntoView {
+fn ContactInfo(cx: Scope) -> impl IntoView {
     // we can access the :id param reactively with `use_params_map`
-    let params = use_params_map();
+    let params = use_params_map(cx);
     let id = move || params.with(|params| params.get("id").cloned().unwrap_or_default());
 
     // imagine we're loading data from an API here
@@ -178,7 +178,7 @@ fn ContactInfo() -> impl IntoView {
         _ => "User not found.",
     };
 
-    view! {
+    view! { cx,
         <div class="contact-info">
             <h4>{name}</h4>
             <div class="tabs">
@@ -194,7 +194,7 @@ fn ContactInfo() -> impl IntoView {
 }
 
 fn main() {
-    leptos::mount_to_body(|| view! { <App/> })
+    leptos::mount_to_body(|cx| view! { cx, <App/> })
 }
 
 ```

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

@@ -18,21 +18,6 @@ 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)
@@ -47,8 +32,8 @@ use leptos::*;
 use leptos_router::*;
 
 #[component]
-fn App() -> impl IntoView {
-    view! {
+fn App(cx: Scope) -> impl IntoView {
+    view! { cx,
         <Router>
             <h1>"Contact App"</h1>
             // this <nav> will show on every routes,
@@ -63,7 +48,7 @@ fn App() -> impl IntoView {
             <main>
                 <Routes>
                     // / just has an un-nested "Home"
-                    <Route path="/" view=|| view! {
+                    <Route path="/" view=|cx| view! { cx,
                         <h3>"Home"</h3>
                     }/>
                     // /contacts has nested routes
@@ -73,19 +58,19 @@ fn App() -> impl IntoView {
                     >
                         // if no id specified, fall back
                         <Route path=":id" view=ContactInfo>
-                            <Route path="" view=|| view! {
+                            <Route path="" view=|cx| view! { cx,
                                 <div class="tab">
                                     "(Contact Info)"
                                 </div>
                             }/>
-                            <Route path="conversations" view=|| view! {
+                            <Route path="conversations" view=|cx| view! { cx,
                                 <div class="tab">
                                     "(Conversations)"
                                 </div>
                             }/>
                         </Route>
                         // if no id specified, fall back
-                        <Route path="" view=|| view! {
+                        <Route path="" view=|cx| view! { cx,
                             <div class="select-user">
                                 "Select a user to view contact info."
                             </div>
@@ -98,8 +83,8 @@ fn App() -> impl IntoView {
 }
 
 #[component]
-fn ContactList() -> impl IntoView {
-    view! {
+fn ContactList(cx: Scope) -> impl IntoView {
+    view! { cx,
         <div class="contact-list">
             // here's our contact list component itself
             <div class="contact-list-contacts">
@@ -118,9 +103,9 @@ fn ContactList() -> impl IntoView {
 }
 
 #[component]
-fn ContactInfo() -> impl IntoView {
+fn ContactInfo(cx: Scope) -> impl IntoView {
     // we can access the :id param reactively with `use_params_map`
-    let params = use_params_map();
+    let params = use_params_map(cx);
     let id = move || params.with(|params| params.get("id").cloned().unwrap_or_default());
 
     // imagine we're loading data from an API here
@@ -131,7 +116,7 @@ fn ContactInfo() -> impl IntoView {
         _ => "User not found.",
     };
 
-    view! {
+    view! { cx,
         <div class="contact-info">
             <h4>{name}</h4>
             <div class="tabs">
@@ -147,7 +132,7 @@ fn ContactInfo() -> impl IntoView {
 }
 
 fn main() {
-    leptos::mount_to_body(|| view! { <App/> })
+    leptos::mount_to_body(|cx| view! { cx, <App/> })
 }
 
 ```

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

@@ -24,15 +24,15 @@ async fn fetch_results() {
 }
 
 #[component]
-pub fn FormExample() -> impl IntoView {
+pub fn FormExample(cx: Scope) -> impl IntoView {
     // reactive access to URL query strings
-    let query = use_query_map();
+    let query = use_query_map(cx);
 	// search stored as ?q=
     let search = move || query().get("q").cloned().unwrap_or_default();
 	// a resource driven by the search string
-	let search_results = create_resource(search, fetch_results);
+	let search_results = create_resource(cx, search, fetch_results);
 
-	view! {
+	view! { cx,
 		<Form method="GET" action="">
 			<input type="search" name="search" value=search/>
 			<input type="submit"/>
@@ -51,7 +51,7 @@ This is a great pattern. The data flow is extremely clear: all data flows from t
 We can actually take it a step further and do something kind of clever:
 
 ```rust
-view! {
+view! { cx,
 	<Form method="GET" action="">
 		<input type="search" name="search" value=search
 			oninput="this.form.requestSubmit()"
@@ -74,8 +74,8 @@ use leptos::*;
 use leptos_router::*;
 
 #[component]
-fn App() -> impl IntoView {
-    view! {
+fn App(cx: Scope) -> impl IntoView {
+    view! { cx,
         <Router>
             <h1><code>"<Form/>"</code></h1>
             <main>
@@ -88,14 +88,14 @@ fn App() -> impl IntoView {
 }
 
 #[component]
-pub fn FormExample() -> impl IntoView {
+pub fn FormExample(cx: Scope) -> impl IntoView {
     // reactive access to URL query
-    let query = use_query_map();
+    let query = use_query_map(cx);
     let name = move || query().get("name").cloned().unwrap_or_default();
     let number = move || query().get("number").cloned().unwrap_or_default();
     let select = move || query().get("select").cloned().unwrap_or_default();
 
-    view! {
+    view! { cx,
         // read out the URL query strings
         <table>
             <tr>
@@ -172,7 +172,7 @@ pub fn FormExample() -> impl IntoView {
 }
 
 fn main() {
-    leptos::mount_to_body(|| view! { <App/> })
+    leptos::mount_to_body(|cx| view! { cx, <App/> })
 }
 
 ```

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

@@ -31,8 +31,9 @@ pub async fn add_todo(title: String) -> Result<(), ServerFnError> {
 }
 
 #[component]
-pub fn BusyButton() -> impl IntoView {
+pub fn BusyButton(cx: Scope) -> impl IntoView {
 	view! {
+        cx,
         <button on:click=move |_| {
             spawn_local(async {
                 add_todo("So much to do!".to_string()).await;
@@ -69,18 +70,6 @@ There are a few things to note about the way you define a server function, too.
 - We provide the macro a path. This is a prefix for the path at which we’ll mount a server function handler on our server. (See examples for [Actix](https://github.com/leptos-rs/leptos/blob/main/examples/todo_app_sqlite/src/main.rs#L44) and [Axum](https://github.com/leptos-rs/leptos/blob/598523cd9d0d775b017cb721e41ebae9349f01e2/examples/todo_app_sqlite_axum/src/main.rs#L51).)
 - You’ll need to have `serde` as a dependency with the `derive` featured enabled for the macro to work properly. You can easily add it to `Cargo.toml` with `cargo add serde --features=derive`.
 
-## Server Function URL Prefixes
-
-You can optionally define a specific URL prefix to be used in the definition of the server function.
-This is done by providing an optional 2nd argument to the `#[server]` macro.
-By default the URL prefix will be `/api`, if not specified.
-Here are some examples:
-
-```rust
-#[server(AddTodo)]         // will use the default URL prefix of `/api`
-#[server(AddTodo, "/foo")] // will use the URL prefix of `/foo`
-```
-
 ## Server Function Encodings
 
 By default, the server function call is a `POST` request that serializes the arguments as URL-encoded form data in the body of the request. (This means that server functions can be called from HTML forms, which we’ll see in a future chapter.) But there are a few other methods supported. Optionally, we can provide another argument to the `#[server]` macro to specify an alternate encoding:
@@ -111,26 +100,11 @@ In other words, you have two choices:
 > **Why not `PUT` or `DELETE`? Why URL/form encoding, and not JSON?**
 >
 > These are reasonable questions. Much of the web is built on REST API patterns that encourage the use of semantic HTTP methods like `DELETE` to delete an item from a database, and many devs are accustomed to sending data to APIs in the JSON format.
->
+> 
 > The reason we use `POST` or `GET` with URL-encoded data by default is the `<form>` support. For better or for worse, HTML forms don’t support `PUT` or `DELETE`, and they don’t support sending JSON. This means that if you use anything but a `GET` or `POST` request with URL-encoded data, it can only work once WASM has loaded. As we’ll see [in a later chapter](../progressive_enhancement), this isn’t always a great idea.
->
+> 
 > The CBOR encoding is suported for historical reasons; an earlier version of server functions used a URL encoding that didn’t support nested objects like structs or vectors as server function arguments, which CBOR did. But note that the CBOR forms encounter the same issue as `PUT`, `DELETE`, or JSON: they do not degrade gracefully if the WASM version of your app is not available.
 
-
-## Server Functions Endpoint Paths
-
-By default, a unique path will be generated. You can optionally define a specific endpoint path to be used in the URL. This is done by providing an optional 4th argument to the `#[server]` macro. Leptos will generate the complete path by concatenating the URL prefix (2nd argument) and the endpoint path (4th argument).
-For example,
-
-```rust
-#[server(MyServerFnType, "/api", "Url", "hello")]
-```
-will generate a server function endpoint at `/api/hello` that accepts a POST request.
-
-> **Can I use the same server function endpoint path with multiple encodings?**
->
-> No. Different server functions must have unique paths. The `#[server]` macro automatically generates unique paths, but you need to be careful if you choose to specify the complete path manually, as the server looks up server functions by their path.
-
 ## An Important Note on Security
 
 Server functions are a cool technology, but it’s very important to remember. **Server functions are not magic; they’re syntax sugar for defining a public API.** The _body_ of a server function is never made public; it’s just part of your server binary. But the server function is a publicly accessible API endpoint, and it’s return value is just a JSON or similar blob. You should _never_ return something sensitive from a server function.

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

@@ -23,12 +23,12 @@ The [`extract` function in `leptos_actix`](https://docs.rs/leptos_actix/latest/l
 ```rust
 
 #[server(ActixExtract, "/api")]
-pub async fn actix_extract() -> Result<String, ServerFnError> {
+pub async fn actix_extract(cx: Scope) -> Result<String, ServerFnError> {
 	use leptos_actix::extract;
     use actix_web::dev::ConnectionInfo;
     use actix_web::web::{Data, Query};
 
-    extract(
+    extract(cx,
         |search: Query<Search>, connection: ConnectionInfo| async move {
             format!(
                 "search = {}\nconnection = {:?}",
@@ -47,11 +47,11 @@ The syntax for the [`leptos_axum::extract`](https://docs.rs/leptos_axum/latest/l
 
 ```rust
 #[server(AxumExtract, "/api")]
-pub async fn axum_extract() -> Result<String, ServerFnError> {
+pub async fn axum_extract(cx: Scope) -> Result<String, ServerFnError> {
     use axum::{extract::Query, http::Method};
     use leptos_axum::extract;
 
-    extract(|method: Method, res: Query<MyQuery>| async move {
+    extract(cx, |method: Method, res: Query<MyQuery>| async move {
             format!("{method:?} and {}", res.q)
         },
     )
@@ -62,21 +62,7 @@ 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.
 
-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).
+> Note: For now, the Axum `extract` function only supports extractors for which the state is `()`, i.e., you can't yet use it to extract `State(_)`. You can access `State(_)` by using a custom handler that extracts the state and then provides it via context. [Click here for an example](https://github.com/leptos-rs/leptos/blob/a5f73b441c079f9138102b3a7d8d4828f045448c/examples/session_auth_axum/src/main.rs#L91-L92).
 
 ## A Note about Data-Loading Patterns
 

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

@@ -8,12 +8,12 @@ Extractors provide an easy way to access request data inside server functions. L
 
 ```rust
 #[server(TeaAndCookies)]
-pub async fn tea_and_cookies() -> Result<(), ServerFnError> {
+pub async fn tea_and_cookies(cx: Scope) -> Result<(), ServerFnError> {
 	use actix_web::{cookie::Cookie, http::header, http::header::HeaderValue};
 	use leptos_actix::ResponseOptions;
 
 	// pull ResponseOptions from context
-	let response = expect_context::<ResponseOptions>();
+	let response = expect_context::<ResponseOptions>(cx);
 
 	// set the HTTP status code
 	response.set_status(StatusCode::IM_A_TEAPOT);
@@ -35,13 +35,14 @@ Here’s a simplified example from our [`session_auth_axum` example](https://git
 ```rust
 #[server(Login, "/api")]
 pub async fn login(
+    cx: Scope,
     username: String,
     password: String,
     remember: Option<String>,
 ) -> Result<(), ServerFnError> {
 	// pull the DB pool and auth provider from context
-    let pool = pool()?;
-    let auth = auth()?;
+    let pool = pool(cx)?;
+    let auth = auth(cx)?;
 
 	// check whether the user exists
     let user: User = User::get_from_username(username, &pool)
@@ -59,7 +60,7 @@ pub async fn login(
             auth.remember_user(remember.is_some());
 
 			// and redirect to the home page
-            leptos_axum::redirect("/");
+            leptos_axum::redirect(cx, "/");
             Ok(())
         }
 		// if not, return an error

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

@@ -110,14 +110,14 @@ With blocking resources, I can do something like this:
 
 ```rust
 #[component]
-pub fn BlogPost() -> impl IntoView {
-	let post_data = create_blocking_resource(/* load blog post */);
-	let comment_data = create_resource(/* load blog post */);
-	view! {
+pub fn BlogPost(cx: Scope) -> impl IntoView {
+	let post_data = create_blocking_resource(cx, /* load blog post */);
+	let comment_data = create_resource(cx, /* load blog post */);
+	view! { cx,
 		<Suspense fallback=|| ()>
 			{move || {
-				post_data.with(|data| {
-					view! {
+				post_data.with(cx, |data| {
+					view! { cx,
 						<Title text=data.title/>
 						<Meta name="description" content=data.excerpt/>
 						<article>

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

@@ -8,8 +8,8 @@ Put a log somewhere in your root component. (I usually call mine `<App/>`, but a
 
 ```rust
 #[component]
-pub fn App() -> impl IntoView {
-	logging::log!("where do I run?");
+pub fn App(cx: Scope) -> impl IntoView {
+	leptos::log!("where do I run?");
 	// ... whatever
 }
 ```
@@ -57,15 +57,15 @@ One way to create a bug is by creating a mismatch between the HTML that’s sent
 
 ```rust
 #[component]
-pub fn App() -> impl IntoView {
+pub fn App(cx: Scope) -> impl IntoView {
     let data = if cfg!(target_arch = "wasm32") {
         vec![0, 1, 2]
     } else {
         vec![]
     };
     data.into_iter()
-        .map(|value| view! { <span>{value}</span> })
-        .collect_view()
+        .map(|value| view! { cx, <span>{value}</span> })
+        .collect_view(cx)
 }
 ```
 
@@ -87,12 +87,49 @@ The WASM version of your app, running in the browser, expects to find three item
 
 It’s pretty rare that you do this intentionally, but it could happen from somehow running different logic on the server and in the browser. If you’re seeing warnings like this and you don’t think it’s your fault, it’s much more likely that it’s a bug with `<Suspense/>` or something. Feel free to go ahead and open an [issue](https://github.com/leptos-rs/leptos/issues) or [discussion](https://github.com/leptos-rs/leptos/discussions) on GitHub for help.
 
+### Mutating the DOM during rendering
+
+This is a slightly more common way to create a client/server mismatch: updating a signal _during rendering_ in a way that mutates the view.
+
+```rust
+#[component]
+pub fn App(cx: Scope) -> impl IntoView {
+    let (loaded, set_loaded) = create_signal(cx, false);
+
+    // create_effect only runs on the client
+    create_effect(cx, move |_| {
+        // do something like reading from localStorage
+        set_loaded(true);
+    });
+
+    move || {
+        if loaded() {
+            view! { cx, <p>"Hello, world!"</p> }.into_any()
+        } else {
+            view! { cx, <div class="loading">"Loading..."</div> }.into_any()
+        }
+    }
+}
+```
+
+This one gives us the scary panic
+
+```
+panicked at 'assertion failed: `(left == right)`
+  left: `"DIV"`,
+ right: `"P"`: SSR and CSR elements have the same hydration key but different node kinds.
+```
+
+And a handy link to this page!
+
+The problem here is that `create_effect` runs **immediately** and **synchronously**, but only in the browser. As a result, on the server, `loaded` is false, and a `<div>` is rendered. But on the browser, by the time the view is being rendered, `loaded` has already been set to `true`, and the browser is expecting to find a `<p>`.
+
 #### Solution
 
 You can simply tell the effect to wait a tick before updating the signal, by using something like `request_animation_frame`, which will set a short timeout and then update the signal before the next frame.
 
 ```rust
-create_effect(move |_| {
+create_effect(cx, move |_| {
     // do something like reading from localStorage
     request_animation_frame(move || set_loaded(true));
 });
@@ -126,10 +163,10 @@ For example, say that I want to store something in the browser’s `localStorage
 
 ```rust
 #[component]
-pub fn App() -> impl IntoView {
+pub fn App(cx: Scope) -> impl IntoView {
     use gloo_storage::Storage;
 	let storage = gloo_storage::LocalStorage::raw();
-	logging::log!("{storage:?}");
+	leptos::log!("{storage:?}");
 }
 ```
 
@@ -139,11 +176,11 @@ But if I wrap it in an effect...
 
 ```rust
 #[component]
-pub fn App() -> impl IntoView {
+pub fn App(cx: Scope) -> impl IntoView {
     use gloo_storage::Storage;
-    create_effect(move |_| {
+    create_effect(cx, move |_| {
         let storage = gloo_storage::LocalStorage::raw();
-		logging::log!("{storage:?}");
+		leptos::log!("{storage:?}");
     });
 }
 ```

docs/book/src/testing.md

@@ -14,8 +14,8 @@ For example, instead of embedding logic in a component directly like this:
 
 ```rust
 #[component]
-pub fn TodoApp() -> impl IntoView {
-    let (todos, set_todos) = create_signal(vec![Todo { /* ... */ }]);
+pub fn TodoApp(cx: Scope) -> impl IntoView {
+    let (todos, set_todos) = create_signal(cx, vec![Todo { /* ... */ }]);
     // ⚠️ this is hard to test because it's embedded in the component
     let num_remaining = move || todos.with(|todos| {
         todos.iter().filter(|todo| !todo.completed).sum()
@@ -37,14 +37,14 @@ impl Todos {
 #[cfg(test)]
 mod tests {
     #[test]
-    fn test_remaining() {
+    fn test_remaining {
         // ...
     }
 }
 
 #[component]
-pub fn TodoApp() -> impl IntoView {
-    let (todos, set_todos) = create_signal(Todos(vec![Todo { /* ... */ }]));
+pub fn TodoApp(cx: Scope) -> impl IntoView {
+    let (todos, set_todos) = create_signal(cx, Todos(vec![Todo { /* ... */ }]));
     // ✅ this has a test associated with it
     let num_remaining = move || todos.with(Todos::num_remaining);
 }
@@ -53,49 +53,98 @@ 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 end-to-end (`e2e`) testing
+## 2. Test components with `wasm-bindgen-test`
 
-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.
+[`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.
 
-The easiest way to see how to use these is to take a look at the test examples themselves:
+To use this testing utility, you need to add `wasm-bindgen-test` to your `Cargo.toml`:
 
-### `wasm-bindgen-test` with [`counter`](https://github.com/leptos-rs/leptos/blob/main/examples/counter/tests/web.rs)
+```toml
+[dev-dependencies]
+wasm-bindgen-test = "0.3.0"
+```
 
-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.
+You should create tests in a separate `tests` directory. You can then run your tests in the browser of your choice:
 
-#### Sample Test
+```bash
+wasm-pack test --firefox
+```
 
-````rust
+> 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]
 #[wasm_bindgen_test]
 fn clear() {
     let document = leptos::document();
     let test_wrapper = document.create_element("section").unwrap();
-    let _ = document.body().unwrap().append_child(&test_wrapper);
+    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/> },
+        |cx| view! { cx, <SimpleCounter initial_value=10 step=1/> },
     );
+}
+```
 
-    let div = test_wrapper.query_selector("div").unwrap().unwrap();
-    let clear = test_wrapper
-        .query_selector("button")
-        .unwrap()
-        .unwrap()
-        .unchecked_into::<web_sys::HtmlElement>();
+We’ll use some manual DOM operations to grab the `<div>` that wraps
+the whole component, as well as the `clear` button.
 
-    clear.click();
+```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.
 
 ```rust
 assert_eq!(
     div.outer_html(),
     // here we spawn a mini reactive system to render the test case
-    run_scope(create_runtime(), || {
+    run_scope(create_runtime(), |cx| {
         // it's as if we're creating it with a value of 0, right?
-        let (value, set_value) = create_signal(0);
+        let (value, set_value) = create_signal(cx, 0);
 
         // we can remove the event listeners because they're not rendered to HTML
-        view! {
+        view! { cx,
             <div>
                 <button>"Clear"</button>
                 <button>"-1"</button>
@@ -108,112 +157,24 @@ assert_eq!(
         .outer_html()
     })
 );
-````
-
-### [`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
-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)
+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.
 
-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");
-  });
+```rust
+assert_eq!(test_wrapper.inner_html(), {
+    let comparison_wrapper = document.create_element("section").unwrap();
+    leptos::mount_to(
+        comparison_wrapper.clone().unchecked_into(),
+        |cx| view! { cx, <SimpleCounter initial_value=0 step=1/>},
+    );
+    comparison_wrapper.inner_html()
 });
 ```
 
-### [Gherkin/Cucumber Tests with `todo_app_sqlite`](https://github.com/leptos-rs/leptos/blob/main/examples/todo_app_sqlite/e2e/README.md)
+This is only a very limited introduction to testing. But I hope it’s useful as you begin to build applications.
 
-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.
+> 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).

docs/book/src/view/01_basic_component.md

@@ -13,7 +13,7 @@ DOM, with self-contained, defined behavior. Unlike HTML elements, they are in
 
 ```rust
 fn main() {
-    leptos::mount_to_body(|| view! { <App/> })
+    leptos::mount_to_body(|cx| view! { cx, <App/> })
 }
 ```
 
@@ -22,10 +22,10 @@ I’ll give you the whole thing up front, then walk through it line by line.
 
 ```rust
 #[component]
-fn App() -> impl IntoView {
-    let (count, set_count) = create_signal(0);
+fn App(cx: Scope) -> impl IntoView {
+    let (count, set_count) = create_signal(cx, 0);
 
-    view! {
+    view! { cx,
         <button
             on:click=move |_| {
                 set_count(3);
@@ -49,17 +49,18 @@ used as a component in your Leptos application. We’ll see some of the other fe
 this macro in a couple chapters.
 
 ```rust
-fn App() -> impl IntoView
+fn App(cx: Scope) -> impl IntoView
 ```
 
 Every component is a function with the following characteristics
 
-1. It takes zero or more arguments of any type.
-2. It returns `impl IntoView`, which is an opaque type that includes
+1. It takes a reactive [`Scope`](https://docs.rs/leptos/latest/leptos/struct.Scope.html)
+   as its first argument. This `Scope` is our entrypoint into the reactive system.
+   By convention, it’s usually named `cx`.
+2. You can include other arguments, which will be available as component “props.”
+3. Component functions return `impl IntoView`, which is an opaque type that includes
    anything you could return from a Leptos `view`.
 
-> Component function arguments are gathered together into a single props struct which is built by the `view` macro as needed.
-
 ## The Component Body
 
 The body of the component function is a set-up function that runs once, not a
@@ -68,7 +69,7 @@ few reactive variables, define any side effects that run in response to those va
 changing, and describe the user interface.
 
 ```rust
-let (count, set_count) = create_signal(0);
+let (count, set_count) = create_signal(cx, 0);
 ```
 
 [`create_signal`](https://docs.rs/leptos/latest/leptos/fn.create_signal.html)
@@ -84,7 +85,7 @@ current value, you’ll call `set_count.set(...)` (or `set_count(...)`).
 Leptos defines user interfaces using a JSX-like format via the [`view`](https://docs.rs/leptos/latest/leptos/macro.view.html) macro.
 
 ```rust
-view! {
+view! { cx,
     <button
         // define an event listener with on:
         on:click=move |_| {
@@ -126,7 +127,7 @@ Leptos with `nightly` Rust, signals are already functions, so the closure is unn
 As a result, you can write a simpler view:
 
 ```rust
-view! {
+view! { cx,
     <button /* ... */>
         "Click me: "
         // identical to {move || count.get()}
@@ -170,16 +171,16 @@ use leptos::*;
 // Components are the building blocks of your user interface
 // They define a reusable unit of behavior
 #[component]
-fn App() -> impl IntoView {
+fn App(cx: Scope) -> impl IntoView {
     // here we create a reactive signal
     // and get a (getter, setter) pair
     // signals are the basic unit of change in the framework
     // we'll talk more about them later
-    let (count, set_count) = create_signal(0);
+    let (count, set_count) = create_signal(cx, 0);
 
     // the `view` macro is how we define the user interface
     // it uses an HTML-like format that can accept certain Rust values
-    view! {
+    view! { cx,
         <button
             // on:click will run whenever the `click` event fires
             // every event handler is defined as `on:{eventname}`
@@ -220,6 +221,6 @@ fn App() -> impl IntoView {
 // Because we defined it as `fn App`, we can now use it in a
 // template as <App/>
 fn main() {
-    leptos::mount_to_body(|| view! { <App/> })
+    leptos::mount_to_body(|cx| view! { cx, <App/> })
 }
 ```

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

@@ -12,10 +12,10 @@ increment a counter.
 
 ```rust
 #[component]
-fn App() -> impl IntoView {
-    let (count, set_count) = create_signal(0);
+fn App(cx: Scope) -> impl IntoView {
+    let (count, set_count) = create_signal(cx, 0);
 
-    view! {
+    view! { cx,
         <button
             on:click=move |_| {
                 set_count.update(|n| *n += 1);
@@ -73,9 +73,9 @@ class=("button-20", move || count() % 2 == 1)
 Individual CSS properties can be directly updated with a similar `style:` syntax.
 
 ```rust
-let (x, set_x) = create_signal(0);
-let (y, set_y) = create_signal(0);
-view! {
+let (x, set_x) = create_signal(cx, 0);
+let (y, set_y) = create_signal(cx, 0);
+view! { cx,
     <div
         style="position: absolute"
         style:left=move || format!("{}px", x() + 100)
@@ -144,27 +144,10 @@ 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 and once per place we access `double_count`; in other words, twice. This is a
-very cheap calculation, so that’s fine. We’ll look at memos in a later chapter, which
-are designed to solve this problem for expensive calculations.
-
-> #### Advanced Topic: Injecting Raw HTML
->
-> The `view` macro provides support for an additional attribute, `inner_html`, which
-> can be used to directly set the HTML contents of any element, wiping out any other
-> children you’ve given it. Note that this does _not_ escape the HTML you provide. You
-> should make sure that it only contains trusted input or that any HTML entities are
-> escaped, to prevent cross-site scripting (XSS) attacks.
->
-> ```rust
-> let html = "<p>This HTML will be injected.</p>";
-> view! {
->   <div inner_html=html/>
-> }
-> ```
->
-> [Click here for the full `view` macros docs](https://docs.rs/leptos/latest/leptos/macro.view.html).
+> 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.
 
 [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)
 
@@ -177,15 +160,15 @@ are designed to solve this problem for expensive calculations.
 use leptos::*;
 
 #[component]
-fn App() -> impl IntoView {
-    let (count, set_count) = create_signal(0);
+fn App(cx: Scope) -> impl IntoView {
+    let (count, set_count) = create_signal(cx, 0);
 
     // a "derived signal" is a function that accesses other signals
     // we can use this to create reactive values that depend on the
     // values of one or more other signals
     let double_count = move || count() * 2;
 
-    view! {
+    view! { cx,
         <button
             on:click=move |_| {
                 set_count.update(|n| *n += 1);
@@ -227,7 +210,7 @@ fn App() -> impl IntoView {
 }
 
 fn main() {
-    leptos::mount_to_body(|| view! { <App/> })
+    leptos::mount_to_body(|cx| view! { cx, <App/> })
 }
 ```
 

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

@@ -12,10 +12,10 @@ per click.
 You _could_ do this by just creating two `<progress>` elements:
 
 ```rust
-let (count, set_count) = create_signal(0);
+let (count, set_count) = create_signal(cx, 0);
 let double_count = move || count() * 2;
 
-view! {
+view! { cx,
     <progress
         max="50"
         value=count
@@ -35,8 +35,10 @@ Instead, let’s create a `<ProgressBar/>` component.
 
 ```rust
 #[component]
-fn ProgressBar() -> impl IntoView {
-    view! {
+fn ProgressBar(
+    cx: Scope
+) -> impl IntoView {
+    view! { cx,
         <progress
             max="50"
             // hmm... where will we get this from?
@@ -62,9 +64,10 @@ In Leptos, you define props by giving additional arguments to the component func
 ```rust
 #[component]
 fn ProgressBar(
+    cx: Scope,
     progress: ReadSignal<i32>
 ) -> impl IntoView {
-    view! {
+    view! { cx,
         <progress
             max="50"
             // now this works
@@ -78,9 +81,9 @@ Now we can use our component in the main `<App/>` component’s view.
 
 ```rust
 #[component]
-fn App() -> impl IntoView {
-    let (count, set_count) = create_signal(0);
-    view! {
+fn App(cx: Scope) -> impl IntoView {
+    let (count, set_count) = create_signal(cx, 0);
+    view! { cx,
         <button on:click=move |_| { set_count.update(|n| *n += 1); }>
             "Click me"
         </button>
@@ -115,13 +118,14 @@ argument to the component function with `#[prop(optional)]`.
 ```rust
 #[component]
 fn ProgressBar(
+    cx: Scope,
     // mark this prop optional
     // you can specify it or not when you use <ProgressBar/>
     #[prop(optional)]
     max: u16,
     progress: ReadSignal<i32>
 ) -> impl IntoView {
-    view! {
+    view! { cx,
         <progress
             max=max
             value=progress
@@ -145,11 +149,12 @@ with `#[prop(default = ...)`.
 ```rust
 #[component]
 fn ProgressBar(
+    cx: Scope,
     #[prop(default = 100)]
     max: u16,
     progress: ReadSignal<i32>
 ) -> impl IntoView {
-    view! {
+    view! { cx,
         <progress
             max=max
             value=progress
@@ -166,11 +171,11 @@ as the `progress` prop on another `<ProgressBar/>`.
 
 ```rust
 #[component]
-fn App() -> impl IntoView {
-    let (count, set_count) = create_signal(0);
+fn App(cx: Scope) -> impl IntoView {
+    let (count, set_count) = create_signal(cx, 0);
     let double_count = move || count() * 2;
 
-    view! {
+    view! { cx,
         <button on:click=move |_| { set_count.update(|n| *n += 1); }>
             "Click me"
         </button>
@@ -194,6 +199,7 @@ implement the trait `Fn() -> i32`. So you could use a generic component:
 ```rust
 #[component]
 fn ProgressBar<F>(
+    cx: Scope,
     #[prop(default = 100)]
     max: u16,
     progress: F
@@ -201,7 +207,7 @@ fn ProgressBar<F>(
 where
     F: Fn() -> i32 + 'static,
 {
-    view! {
+    view! { cx,
         <progress
             max=max
             value=progress
@@ -218,10 +224,11 @@ 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! {
+    view! { cx,
         <progress
             max=max
             value=progress
@@ -248,13 +255,14 @@ reactive value.
 ```rust
 #[component]
 fn ProgressBar(
+    cx: Scope,
     #[prop(default = 100)]
     max: u16,
     #[prop(into)]
     progress: Signal<i32>
 ) -> impl IntoView
 {
-    view! {
+    view! { cx,
         <progress
             max=max
             value=progress
@@ -263,18 +271,18 @@ fn ProgressBar(
 }
 
 #[component]
-fn App() -> impl IntoView {
-    let (count, set_count) = create_signal(0);
+fn App(cx: Scope) -> impl IntoView {
+    let (count, set_count) = create_signal(cx, 0);
     let double_count = move || count() * 2;
 
-    view! {
+    view! { cx,
         <button on:click=move |_| { set_count.update(|n| *n += 1); }>
             "Click me"
         </button>
         // .into() converts `ReadSignal` to `Signal`
         <ProgressBar progress=count/>
         // use `Signal::derive()` to wrap a derived signal
-        <ProgressBar progress=Signal::derive(double_count)/>
+        <ProgressBar progress=Signal::derive(cx, double_count)/>
     }
 }
 ```
@@ -286,10 +294,11 @@ 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! {
+        view! { cx,
             <progress
                 max=100
                 value=progress
@@ -299,8 +308,8 @@ fn ProgressBar<F: Fn() -> i32 + 'static>(
 }
 
 #[component]
-pub fn App() -> impl IntoView {
-    view! {
+pub fn App(cx: Scope) -> impl IntoView {
+    view! { cx,
         <ProgressBar/>
     }
 }
@@ -328,10 +337,11 @@ 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! {
+        view! { cx,
             <progress
                 max=100
                 value=progress
@@ -341,8 +351,8 @@ fn ProgressBar(
 }
 
 #[component]
-pub fn App() -> impl IntoView {
-    view! {
+pub fn App(cx: Scope) -> impl IntoView {
+    view! { cx,
         <ProgressBar/>
     }
 }
@@ -366,6 +376,7 @@ component function, and each one of the props:
 /// Shows progress toward a goal.
 #[component]
 fn ProgressBar(
+    cx: Scope,
     /// The maximum value of the progress bar.
     #[prop(default = 100)]
     max: u16,
@@ -386,24 +397,6 @@ 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>
@@ -422,6 +415,8 @@ use leptos::*;
 /// Shows progress toward a goal.
 #[component]
 fn ProgressBar(
+    // All components take a reactive `Scope` as the first argument
+    cx: Scope,
     // Marks this as an optional prop. It will default to the default
     // value of its type, i.e., 0.
     #[prop(default = 100)]
@@ -435,7 +430,7 @@ fn ProgressBar(
     /// How much progress should be displayed.
     progress: Signal<i32>,
 ) -> impl IntoView {
-    view! {
+    view! { cx,
         <progress
             max={max}
             value=progress
@@ -445,12 +440,12 @@ fn ProgressBar(
 }
 
 #[component]
-fn App() -> impl IntoView {
-    let (count, set_count) = create_signal(0);
+fn App(cx: Scope) -> impl IntoView {
+    let (count, set_count) = create_signal(cx, 0);
 
     let double_count = move || count() * 2;
 
-    view! {
+    view! { cx,
         <button
             on:click=move |_| {
                 set_count.update(|n| *n += 1);
@@ -468,12 +463,12 @@ fn App() -> impl IntoView {
         <ProgressBar progress=count/>
         // Signal::derive creates a Signal wrapper from our derived signal
         // using double_count means it should move twice as fast
-        <ProgressBar max=50 progress=Signal::derive(double_count)/>
+        <ProgressBar max=50 progress=Signal::derive(cx, double_count)/>
     }
 }
 
 fn main() {
-    leptos::mount_to_body(|| view! { <App/> })
+    leptos::mount_to_body(|cx| view! { cx, <App/> })
 }
 ```
 

docs/book/src/view/04_iteration.md

@@ -19,30 +19,30 @@ any `Vec<IV> where IV: IntoView` into your view. In other words, if you can rend
 
 ```rust
 let values = vec![0, 1, 2];
-view! {
+view! { cx,
     // this will just render "012"
     <p>{values.clone()}</p>
     // or we can wrap them in <li>
     <ul>
         {values.into_iter()
-            .map(|n| view! { <li>{n}</li>})
+            .map(|n| view! { cx, <li>{n}</li>})
             .collect::<Vec<_>>()}
     </ul>
 }
 ```
 
-Leptos also provides a `.collect_view()` helper function that allows you to collect any iterator of `T: IntoView` into `Vec<View>`.
+Leptos also provides a `.collect_view(cx)` helper function that allows you to collect any iterator of `T: IntoView` into `Vec<View>`.
 
 ```rust
 let values = vec![0, 1, 2];
-view! {
+view! { cx,
     // this will just render "012"
     <p>{values.clone()}</p>
     // or we can wrap them in <li>
     <ul>
         {values.into_iter()
-            .map(|n| view! { <li>{n}</li>})
-            .collect_view()}
+            .map(|n| view! { cx, <li>{n}</li>})
+            .collect_view(cx)}
     </ul>
 }
 ```
@@ -52,13 +52,13 @@ You can render dynamic items as part of a static list.
 
 ```rust
 // create a list of N signals
-let counters = (1..=length).map(|idx| create_signal(idx));
+let counters = (1..=length).map(|idx| create_signal(cx, idx));
 
 // each item manages a reactive view
 // but the list itself will never change
 let counter_buttons = counters
     .map(|(count, set_count)| {
-        view! {
+        view! { cx,
             <li>
                 <button
                     on:click=move |_| set_count.update(|n| *n += 1)
@@ -68,9 +68,9 @@ let counter_buttons = counters
             </li>
         }
     })
-    .collect_view();
+    .collect_view(cx);
 
-view! {
+view! { cx,
     <ul>{counter_buttons}</ul>
 }
 ```
@@ -120,8 +120,8 @@ use leptos::*;
 // 2) for lists that grow, shrink, or move items, using <For/>
 
 #[component]
-fn App() -> impl IntoView {
-    view! {
+fn App(cx: Scope) -> impl IntoView {
+    view! { cx,
         <h1>"Iteration"</h1>
         <h2>"Static List"</h2>
         <p>"Use this pattern if the list itself is static."</p>
@@ -136,19 +136,19 @@ fn App() -> impl IntoView {
 /// to add or remove any.
 #[component]
 fn StaticList(
-
+    cx: Scope,
     /// How many counters to include in this list.
     length: usize,
 ) -> impl IntoView {
     // create counter signals that start at incrementing numbers
-    let counters = (1..=length).map(|idx| create_signal(idx));
+    let counters = (1..=length).map(|idx| create_signal(cx, idx));
 
     // when you have a list that doesn't change, you can
     // manipulate it using ordinary Rust iterators
     // and collect it into a Vec<_> to insert it into the DOM
     let counter_buttons = counters
         .map(|(count, set_count)| {
-            view! {
+            view! { cx,
                 <li>
                     <button
                         on:click=move |_| set_count.update(|n| *n += 1)
@@ -163,7 +163,7 @@ fn StaticList(
     // Note that if `counter_buttons` were a reactive list
     // and its value changed, this would be very inefficient:
     // it would rerender every row every time the list changed.
-    view! {
+    view! { cx,
         <ul>{counter_buttons}</ul>
     }
 }
@@ -172,7 +172,7 @@ fn StaticList(
 /// remove counters.
 #[component]
 fn DynamicList(
-
+    cx: Scope,
     /// The number of counters to begin with.
     initial_length: usize,
 ) -> impl IntoView {
@@ -190,17 +190,17 @@ fn DynamicList(
     // we generate an initial list as in <StaticList/>
     // but this time we include the ID along with the signal
     let initial_counters = (0..initial_length)
-        .map(|id| (id, create_signal(id + 1)))
+        .map(|id| (id, create_signal(cx, id + 1)))
         .collect::<Vec<_>>();
 
     // now we store that initial list in a signal
     // this way, we'll be able to modify the list over time,
     // adding and removing counters, and it will change reactively
-    let (counters, set_counters) = create_signal(initial_counters);
+    let (counters, set_counters) = create_signal(cx, initial_counters);
 
     let add_counter = move |_| {
         // create a signal for the new counter
-        let sig = create_signal(next_counter_id + 1);
+        let sig = create_signal(cx, next_counter_id + 1);
         // add this counter to the list of counters
         set_counters.update(move |counters| {
             // since `.update()` gives us `&mut T`
@@ -211,7 +211,7 @@ fn DynamicList(
         next_counter_id += 1;
     };
 
-    view! {
+    view! { cx,
         <div>
             <button on:click=add_counter>
                 "Add Counter"
@@ -231,8 +231,8 @@ fn DynamicList(
                     key=|counter| counter.0
                     // the view function receives each item from your `each` iterator
                     // and returns a view
-                    view=move |(id, (count, set_count))| {
-                        view! {
+                    view=move |cx, (id, (count, set_count))| {
+                        view! { cx,
                             <li>
                                 <button
                                     on:click=move |_| set_count.update(|n| *n += 1)
@@ -258,7 +258,7 @@ fn DynamicList(
 }
 
 fn main() {
-    leptos::mount_to_body(|| view! { <App/> })
+    leptos::mount_to_body(|cx| view! { cx, <App/> })
 }
 
 ```

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

@@ -19,13 +19,12 @@ 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. (The same is true for `checked` and `prop:checked` 
-   on an `<input type="checkbox">`.)
+   `prop:value` for this reason.
 
 ```rust
-let (name, set_name) = create_signal("Controlled".to_string());
+let (name, set_name) = create_signal(cx, "Controlled".to_string());
 
-view! {
+view! { cx,
     <input type="text"
         on:input=move |ev| {
             // event_target_value is a Leptos helper function
@@ -43,33 +42,6 @@ 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.
@@ -81,9 +53,9 @@ In this example, we only notify the framework when the `<form>` fires a `submit`
 event.
 
 ```rust
-let (name, set_name) = create_signal("Uncontrolled".to_string());
+let (name, set_name) = create_signal(cx, "Uncontrolled".to_string());
 
-let input_element: NodeRef<Input> = create_node_ref();
+let input_element: NodeRef<Input> = create_node_ref(cx);
 ```
 
 `NodeRef` is a kind of reactive smart pointer: we can use it to access the
@@ -117,7 +89,7 @@ We can then call `.value()` to get the value out of the input, because `NodeRef`
 gives us access to a correctly-typed HTML element.
 
 ```rust
-view! {
+view! { cx,
     <form on:submit=on_submit>
         <input type="text"
             value=name
@@ -148,8 +120,8 @@ The view should be pretty self-explanatory by now. Note two things:
 use leptos::{ev::SubmitEvent, *};
 
 #[component]
-fn App() -> impl IntoView {
-    view! {
+fn App(cx: Scope) -> impl IntoView {
+    view! { cx,
         <h2>"Controlled Component"</h2>
         <ControlledComponent/>
         <h2>"Uncontrolled Component"</h2>
@@ -158,11 +130,11 @@ fn App() -> impl IntoView {
 }
 
 #[component]
-fn ControlledComponent() -> impl IntoView {
+fn ControlledComponent(cx: Scope) -> impl IntoView {
     // create a signal to hold the value
-    let (name, set_name) = create_signal("Controlled".to_string());
+    let (name, set_name) = create_signal(cx, "Controlled".to_string());
 
-    view! {
+    view! { cx,
         <input type="text"
             // fire an event whenever the input changes
             on:input=move |ev| {
@@ -192,15 +164,15 @@ fn ControlledComponent() -> impl IntoView {
 }
 
 #[component]
-fn UncontrolledComponent() -> impl IntoView {
+fn UncontrolledComponent(cx: Scope) -> impl IntoView {
     // import the type for <input>
     use leptos::html::Input;
 
-    let (name, set_name) = create_signal("Uncontrolled".to_string());
+    let (name, set_name) = create_signal(cx, "Uncontrolled".to_string());
 
     // we'll use a NodeRef to store a reference to the input element
     // this will be filled when the element is created
-    let input_element: NodeRef<Input> = create_node_ref();
+    let input_element: NodeRef<Input> = create_node_ref(cx);
 
     // fires when the form `submit` event happens
     // this will store the value of the <input> in our signal
@@ -220,7 +192,7 @@ fn UncontrolledComponent() -> impl IntoView {
         set_name(value);
     };
 
-    view! {
+    view! { cx,
         <form on:submit=on_submit>
             <input type="text"
                 // here, we use the `value` *attribute* to set only
@@ -242,7 +214,7 @@ fn UncontrolledComponent() -> impl IntoView {
 // Because we defined it as `fn App`, we can now use it in a
 // template as <App/>
 fn main() {
-    leptos::mount_to_body(|| view! { <App/> })
+    leptos::mount_to_body(|cx| view! { cx, <App/> })
 }
 
 ```

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

@@ -38,7 +38,7 @@ special knowledge.
 For example, let’s start with a simple signal and derived signal:
 
 ```rust
-let (value, set_value) = create_signal(0);
+let (value, set_value) = create_signal(cx, 0);
 let is_odd = move || value() & 1 == 1;
 ```
 
@@ -54,7 +54,7 @@ Let’s say I want to render some text if the number is odd, and some other text
 if it’s even. Well, how about this?
 
 ```rust
-view! {
+view! { cx,
     <p>
     {move || if is_odd() {
         "Odd"
@@ -81,7 +81,7 @@ let message = move || {
     }
 };
 
-view! {
+view! { cx,
     <p>{message}</p>
 }
 ```
@@ -90,7 +90,7 @@ This works fine. We can make it a little shorter if we’d like, using `bool::th
 
 ```rust
 let message = move || is_odd().then(|| "Ding ding ding!");
-view! {
+view! { cx,
     <p>{message}</p>
 }
 ```
@@ -112,7 +112,7 @@ let message = move || {
         _ => "Even"
     }
 };
-view! {
+view! { cx,
     <p>{message}</p>
 }
 ```
@@ -131,7 +131,7 @@ above, where the value switches from even to odd on every change, this is fine.
 But consider the following example:
 
 ```rust
-let (value, set_value) = create_signal(0);
+let (value, set_value) = create_signal(cx, 0);
 
 let message = move || if value() > 5 {
     "Big"
@@ -139,7 +139,7 @@ let message = move || if value() > 5 {
     "Small"
 };
 
-view! {
+view! { cx,
     <p>{message}</p>
 }
 ```
@@ -148,10 +148,10 @@ This _works_, for sure. But if you added a log, you might be surprised
 
 ```rust
 let message = move || if value() > 5 {
-    logging::log!("{}: rendering Big", value());
+    log!("{}: rendering Big", value());
     "Big"
 } else {
-    logging::log!("{}: rendering Small", value());
+    log!("{}: rendering Small", value());
     "Small"
 };
 ```
@@ -194,12 +194,12 @@ the answer. You pass it a `when` condition function, a `fallback` to be shown if
 the `when` function returns `false`, and children to be rendered if `when` is `true`.
 
 ```rust
-let (value, set_value) = create_signal(0);
+let (value, set_value) = create_signal(cx, 0);
 
-view! {
+view! { cx,
   <Show
     when=move || { value() > 5 }
-    fallback=|| view! { <Small/> }
+    fallback=|cx| view! { cx, <Small/> }
   >
     <Big/>
   </Show>
@@ -208,8 +208,7 @@ 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 or until `value`
-goes below five and then renders `<Small/>` again.
+then it renders `<Big/>` once, continuing to show it indefinitely.
 
 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
@@ -228,19 +227,19 @@ can be a little annoying if you’re returning different HTML elements from
 different branches of a conditional:
 
 ```rust,compile_error
-view! {
+view! { cx,
     <main>
         {move || match is_odd() {
             true if value() == 1 => {
                 // returns HtmlElement<Pre>
-                view! { <pre>"One"</pre> }
+                view! { cx, <pre>"One"</pre> }
             },
             false if value() == 2 => {
                 // returns HtmlElement<P>
-                view! { <p>"Two"</p> }
+                view! { cx, <p>"Two"</p> }
             }
             // returns HtmlElement<Textarea>
-            _ => view! { <textarea>{value()}</textarea> }
+            _ => view! { cx, <textarea>{value()}</textarea> }
         }}
     </main>
 }
@@ -260,24 +259,24 @@ to get yourself out of this situation:
 1. If you have multiple `HtmlElement` types, convert them to `HtmlElement<AnyElement>`
    with [`.into_any()`](https://docs.rs/leptos/latest/leptos/struct.HtmlElement.html#method.into_any)
 2. If you have a variety of view types that are not all `HtmlElement`, convert them to
-   `View`s with [`.into_view()`](https://docs.rs/leptos/latest/leptos/trait.IntoView.html#tymethod.into_view).
+   `View`s with [`.into_view(cx)`](https://docs.rs/leptos/latest/leptos/trait.IntoView.html#tymethod.into_view).
 
 Here’s the same example, with the conversion added:
 
 ```rust,compile_error
-view! {
+view! { cx,
     <main>
         {move || match is_odd() {
             true if value() == 1 => {
                 // returns HtmlElement<Pre>
-                view! { <pre>"One"</pre> }.into_any()
+                view! { cx, <pre>"One"</pre> }.into_any()
             },
             false if value() == 2 => {
                 // returns HtmlElement<P>
-                view! { <p>"Two"</p> }.into_any()
+                view! { cx, <p>"Two"</p> }.into_any()
             }
             // returns HtmlElement<Textarea>
-            _ => view! { <textarea>{value()}</textarea> }.into_any()
+            _ => view! { cx, <textarea>{value()}</textarea> }.into_any()
         }}
     </main>
 }
@@ -294,12 +293,12 @@ view! {
 use leptos::*;
 
 #[component]
-fn App() -> impl IntoView {
-    let (value, set_value) = create_signal(0);
+fn App(cx: Scope) -> impl IntoView {
+    let (value, set_value) = create_signal(cx, 0);
     let is_odd = move || value() & 1 == 1;
     let odd_text = move || if is_odd() { Some("How odd!") } else { None };
 
-    view! {
+    view! { cx,
         <h1>"Control Flow"</h1>
 
         // Simple UI to update and show a value
@@ -346,37 +345,37 @@ fn App() -> impl IntoView {
         //    needed. This makes it more efficient in many cases
         //    than a {move || if ...} block
         <Show when=is_odd
-            fallback=|| view! { <p>"Even steven"</p> }
+            fallback=|cx| view! { cx, <p>"Even steven"</p> }
         >
             <p>"Oddment"</p>
         </Show>
 
         // d. Because `bool::then()` converts a `bool` to
         //    `Option`, you can use it to create a show/hide toggled
-        {move || is_odd().then(|| view! { <p>"Oddity!"</p> })}
+        {move || is_odd().then(|| view! { cx, <p>"Oddity!"</p> })}
 
         <h2>"Converting between Types"</h2>
         // e. Note: if branches return different types,
         //    you can convert between them with
         //    `.into_any()` (for different HTML element types)
-        //    or `.into_view()` (for all view types)
+        //    or `.into_view(cx)` (for all view types)
         {move || match is_odd() {
             true if value() == 1 => {
                 // <pre> returns HtmlElement<Pre>
-                view! { <pre>"One"</pre> }.into_any()
+                view! { cx, <pre>"One"</pre> }.into_any()
             },
             false if value() == 2 => {
                 // <p> returns HtmlElement<P>
                 // so we convert into a more generic type
-                view! { <p>"Two"</p> }.into_any()
+                view! { cx, <p>"Two"</p> }.into_any()
             }
-            _ => view! { <textarea>{value()}</textarea> }.into_any()
+            _ => view! { cx, <textarea>{value()}</textarea> }.into_any()
         }}
     }
 }
 
 fn main() {
-    leptos::mount_to_body(|| view! { <App/> })
+    leptos::mount_to_body(|cx| view! { cx, <App/> })
 }
 
 ```

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

@@ -10,16 +10,16 @@ Let’s start with a simple component to capture a number input.
 
 ```rust
 #[component]
-fn NumericInput() -> impl IntoView {
-    let (value, set_value) = create_signal(Ok(0));
+fn NumericInput(cx: Scope) -> impl IntoView {
+    let (value, set_value) = create_signal(cx, Ok(0));
 
     // when input changes, try to parse a number from the input
     let on_input = move |ev| set_value(event_target_value(&ev).parse::<i32>());
 
-    view! {
+    view! { cx,
         <label>
             "Type a number (or not!)"
-            <input type="number" on:input=on_input/>
+            <input on:input=on_input/>
             <p>
                 "You entered "
                 <strong>{value}</strong>
@@ -60,27 +60,27 @@ Let’s add an `<ErrorBoundary/>` to this example.
 
 ```rust
 #[component]
-fn NumericInput() -> impl IntoView {
-    let (value, set_value) = create_signal(Ok(0));
+fn NumericInput(cx: Scope) -> impl IntoView {
+    let (value, set_value) = create_signal(cx, Ok(0));
 
     let on_input = move |ev| set_value(event_target_value(&ev).parse::<i32>());
 
-    view! {
+    view! { cx,
         <h1>"Error Handling"</h1>
         <label>
             "Type a number (or something that's not a number!)"
-            <input type="number" on:input=on_input/>
+            <input on:input=on_input/>
             <ErrorBoundary
                 // the fallback receives a signal containing current errors
-                fallback=|errors| view! {
+                fallback=|cx, errors| view! { cx,
                     <div class="error">
                         <p>"Not a number! Errors: "</p>
                         // we can render a list of errors as strings, if we'd like
                         <ul>
                             {move || errors.get()
                                 .into_iter()
-                                .map(|(_, e)| view! { <li>{e.to_string()}</li>})
-                                .collect_view()
+                                .map(|(_, e)| view! { cx, <li>{e.to_string()}</li>})
+                                .collect_view(cx)
                             }
                         </ul>
                     </div>
@@ -121,13 +121,13 @@ an `<ErrorBoundary/>` will appear again.
 use leptos::*;
 
 #[component]
-fn App() -> impl IntoView {
-    let (value, set_value) = create_signal(Ok(0));
+fn App(cx: Scope) -> impl IntoView {
+    let (value, set_value) = create_signal(cx, Ok(0));
 
     // when input changes, try to parse a number from the input
     let on_input = move |ev| set_value(event_target_value(&ev).parse::<i32>());
 
-    view! {
+    view! { cx,
         <h1>"Error Handling"</h1>
         <label>
             "Type a number (or something that's not a number!)"
@@ -137,7 +137,7 @@ fn App() -> impl IntoView {
             // <ErrorBoundary/> will be displayed.
             <ErrorBoundary
                 // the fallback receives a signal containing current errors
-                fallback=|errors| view! {
+                fallback=|cx, errors| view! { cx,
                     <div class="error">
                         <p>"Not a number! Errors: "</p>
                         // we can render a list of errors
@@ -145,7 +145,7 @@ fn App() -> impl IntoView {
                         <ul>
                             {move || errors.get()
                                 .into_iter()
-                                .map(|(_, e)| view! { <li>{e.to_string()}</li>})
+                                .map(|(_, e)| view! { cx, <li>{e.to_string()}</li>})
                                 .collect::<Vec<_>>()
                             }
                         </ul>
@@ -167,7 +167,7 @@ fn App() -> impl IntoView {
 }
 
 fn main() {
-    leptos::mount_to_body(|| view! { <App/> })
+    leptos::mount_to_body(|cx| view! { cx, <App/> })
 }
 
 ```

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

@@ -29,17 +29,17 @@ it in the child. This lets you manipulate the state of the parent from the child
 
 ```rust
 #[component]
-pub fn App() -> impl IntoView {
-    let (toggled, set_toggled) = create_signal(false);
-    view! {
+pub fn App(cx: Scope) -> impl IntoView {
+    let (toggled, set_toggled) = create_signal(cx, false);
+    view! { cx,
         <p>"Toggled? " {toggled}</p>
         <ButtonA setter=set_toggled/>
     }
 }
 
 #[component]
-pub fn ButtonA(setter: WriteSignal<bool>) -> impl IntoView {
-    view! {
+pub fn ButtonA(cx: Scope, setter: WriteSignal<bool>) -> impl IntoView {
+    view! { cx,
         <button
             on:click=move |_| setter.update(|value| *value = !*value)
         >
@@ -62,9 +62,9 @@ Another approach would be to pass a callback to the child: say, `on_click`.
 
 ```rust
 #[component]
-pub fn App() -> impl IntoView {
-    let (toggled, set_toggled) = create_signal(false);
-    view! {
+pub fn App(cx: Scope) -> impl IntoView {
+    let (toggled, set_toggled) = create_signal(cx, false);
+    view! { cx,
         <p>"Toggled? " {toggled}</p>
         <ButtonB on_click=move |_| set_toggled.update(|value| *value = !*value)/>
     }
@@ -72,11 +72,14 @@ pub fn App() -> impl IntoView {
 
 
 #[component]
-pub fn ButtonB<F>(on_click: F) -> impl IntoView
+pub fn ButtonB<F>(
+    cx: Scope,
+    on_click: F,
+) -> impl IntoView
 where
     F: Fn(MouseEvent) + 'static,
 {
-    view! {
+    view! { cx,
         <button on:click=on_click>
             "Toggle"
         </button>
@@ -102,9 +105,9 @@ in your `view` macro in `<App/>`.
 
 ```rust
 #[component]
-pub fn App() -> impl IntoView {
-    let (toggled, set_toggled) = create_signal(false);
-    view! {
+pub fn App(cx: Scope) -> impl IntoView {
+    let (toggled, set_toggled) = create_signal(cx, false);
+    view! { cx,
         <p>"Toggled? " {toggled}</p>
         // note the on:click instead of on_click
         // this is the same syntax as an HTML element event listener
@@ -114,8 +117,8 @@ pub fn App() -> impl IntoView {
 
 
 #[component]
-pub fn ButtonC<F>() -> impl IntoView {
-    view! {
+pub fn ButtonC(cx: Scope) -> impl IntoView {
+    view! { cx,
         <button>"Toggle"</button>
     }
 }
@@ -138,17 +141,17 @@ tree:
 
 ```rust
 #[component]
-pub fn App() -> impl IntoView {
-    let (toggled, set_toggled) = create_signal(false);
-    view! {
+pub fn App(cx: Scope) -> impl IntoView {
+    let (toggled, set_toggled) = create_signal(cx, false);
+    view! { cx,
         <p>"Toggled? " {toggled}</p>
         <Layout/>
     }
 }
 
 #[component]
-pub fn Layout() -> impl IntoView {
-    view! {
+pub fn Layout(cx: Scope) -> impl IntoView {
+    view! { cx,
         <header>
             <h1>"My Page"</h1>
         </header>
@@ -159,8 +162,8 @@ pub fn Layout() -> impl IntoView {
 }
 
 #[component]
-pub fn Content() -> impl IntoView {
-    view! {
+pub fn Content(cx: Scope) -> impl IntoView {
+    view! { cx,
         <div class="content">
             <ButtonD/>
         </div>
@@ -168,7 +171,7 @@ pub fn Content() -> impl IntoView {
 }
 
 #[component]
-pub fn ButtonD<F>() -> impl IntoView {
+pub fn ButtonD<F>(cx: Scope) -> impl IntoView {
     todo!()
 }
 ```
@@ -179,17 +182,17 @@ pass your `WriteSignal` to its props. You could do what’s sometimes called
 
 ```rust
 #[component]
-pub fn App() -> impl IntoView {
-    let (toggled, set_toggled) = create_signal(false);
-    view! {
+pub fn App(cx: Scope) -> impl IntoView {
+    let (toggled, set_toggled) = create_signal(cx, false);
+    view! { cx,
         <p>"Toggled? " {toggled}</p>
         <Layout set_toggled/>
     }
 }
 
 #[component]
-pub fn Layout(d: WriteSignal<bool>) -> impl IntoView {
-    view! {
+pub fn Layout(cx: Scope, set_toggled: WriteSignal<bool>) -> impl IntoView {
+    view! { cx,
         <header>
             <h1>"My Page"</h1>
         </header>
@@ -200,8 +203,8 @@ pub fn Layout(d: WriteSignal<bool>) -> impl IntoView {
 }
 
 #[component]
-pub fn Content(d: WriteSignal<bool>) -> impl IntoView {
-    view! {
+pub fn Content(cx: Scope, set_toggled: WriteSignal<bool>) -> impl IntoView {
+    view! { cx,
         <div class="content">
             <ButtonD set_toggled/>
         </div>
@@ -209,7 +212,7 @@ pub fn Content(d: WriteSignal<bool>) -> impl IntoView {
 }
 
 #[component]
-pub fn ButtonD<F>(d: WriteSignal<bool>) -> impl IntoView {
+pub fn ButtonD<F>(cx: Scope, set_toggled: WriteSignal<bool>) -> impl IntoView {
     todo!()
 }
 ```
@@ -234,13 +237,13 @@ unnecessary prop drilling.
 
 ```rust
 #[component]
-pub fn App() -> impl IntoView {
-    let (toggled, set_toggled) = create_signal(false);
+pub fn App(cx: Scope) -> impl IntoView {
+    let (toggled, set_toggled) = create_signal(cx, false);
 
     // share `set_toggled` with all children of this component
-    provide_context(set_toggled);
+    provide_context(cx, set_toggled);
 
-    view! {
+    view! { cx,
         <p>"Toggled? " {toggled}</p>
         <Layout/>
     }
@@ -249,14 +252,14 @@ pub fn App() -> impl IntoView {
 // <Layout/> and <Content/> omitted
 
 #[component]
-pub fn ButtonD() -> impl IntoView {
+pub fn ButtonD(cx: Scope) -> impl IntoView {
     // use_context searches up the context tree, hoping to
     // find a `WriteSignal<bool>`
     // in this case, I .expect() because I know I provided it
-    let setter = use_context::<WriteSignal<bool>>()
+    let setter = use_context::<WriteSignal<bool>>(cx)
         .expect("to have found the setter provided");
 
-    view! {
+    view! { cx,
         <button
             on:click=move |_| setter.update(|value| *value = !*value)
         >
@@ -305,20 +308,20 @@ use leptos::{ev::MouseEvent, *};
 struct SmallcapsContext(WriteSignal<bool>);
 
 #[component]
-pub fn App() -> impl IntoView {
+pub fn App(cx: Scope) -> impl IntoView {
     // just some signals to toggle three classes on our <p>
-    let (red, set_red) = create_signal(false);
-    let (right, set_right) = create_signal(false);
-    let (italics, set_italics) = create_signal(false);
-    let (smallcaps, set_smallcaps) = create_signal(false);
+    let (red, set_red) = create_signal(cx, false);
+    let (right, set_right) = create_signal(cx, false);
+    let (italics, set_italics) = create_signal(cx, false);
+    let (smallcaps, set_smallcaps) = create_signal(cx, false);
 
     // the newtype pattern isn't *necessary* here but is a good practice
     // it avoids confusion with other possible future `WriteSignal<bool>` contexts
     // and makes it easier to refer to it in ButtonC
-    provide_context(SmallcapsContext(set_smallcaps));
+    provide_context(cx, SmallcapsContext(set_smallcaps));
 
     view! {
-
+        cx,
         <main>
             <p
                 // class: attributes take F: Fn() => bool, and these signals all implement Fn()
@@ -350,12 +353,12 @@ pub fn App() -> impl IntoView {
 /// Button A receives a signal setter and updates the signal itself
 #[component]
 pub fn ButtonA(
-
+    cx: Scope,
     /// Signal that will be toggled when the button is clicked.
     setter: WriteSignal<bool>,
 ) -> impl IntoView {
     view! {
-
+        cx,
         <button
             on:click=move |_| setter.update(|value| *value = !*value)
         >
@@ -367,7 +370,7 @@ pub fn ButtonA(
 /// Button B receives a closure
 #[component]
 pub fn ButtonB<F>(
-
+    cx: Scope,
     /// Callback that will be invoked when the button is clicked.
     on_click: F,
 ) -> impl IntoView
@@ -375,7 +378,7 @@ where
     F: Fn(MouseEvent) + 'static,
 {
     view! {
-
+        cx,
         <button
             on:click=on_click
         >
@@ -399,9 +402,9 @@ where
 /// Button C is a dummy: it renders a button but doesn't handle
 /// its click. Instead, the parent component adds an event listener.
 #[component]
-pub fn ButtonC() -> impl IntoView {
+pub fn ButtonC(cx: Scope) -> impl IntoView {
     view! {
-
+        cx,
         <button>
             "Toggle Italics"
         </button>
@@ -411,11 +414,11 @@ pub fn ButtonC() -> impl IntoView {
 /// Button D is very similar to Button A, but instead of passing the setter as a prop
 /// we get it from the context
 #[component]
-pub fn ButtonD() -> impl IntoView {
-    let setter = use_context::<SmallcapsContext>().unwrap().0;
+pub fn ButtonD(cx: Scope) -> impl IntoView {
+    let setter = use_context::<SmallcapsContext>(cx).unwrap().0;
 
     view! {
-
+        cx,
         <button
             on:click=move |_| setter.update(|value| *value = !*value)
         >
@@ -425,7 +428,7 @@ pub fn ButtonD() -> impl IntoView {
 }
 
 fn main() {
-    leptos::mount_to_body(|| view! { <App/> })
+    leptos::mount_to_body(|cx| view! { cx, <App/> })
 }
 
 ```

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

@@ -5,7 +5,7 @@ children into an HTML element. For example, imagine I have a `<FancyForm/>` comp
 that enhances an HTML `<form>`. I need some way to pass all its inputs.
 
 ```rust
-view! {
+view! { cx,
     <Form>
         <fieldset>
             <label>
@@ -28,12 +28,12 @@ other components:
 In fact, you’ve already seen these both in action in the [`<Show/>`](/view/06_control_flow.html#show) component:
 
 ```rust
-view! {
+view! { cx,
   <Show
     // `when` is a normal prop
     when=move || value() > 5
     // `fallback` is a "render prop": a function that returns a view
-    fallback=|| view! { <Small/> }
+    fallback=|cx| view! { cx, <Small/> }
   >
     // `<Big/>` (and anything else here)
     // will be given to the `children` prop
@@ -47,6 +47,7 @@ Let’s define a component that takes some children and a render prop.
 ```rust
 #[component]
 pub fn TakesChildren<F, IV>(
+    cx: Scope,
     /// Takes a function (type F) that returns anything that can be
     /// converted into a View (type IV)
     render_prop: F,
@@ -57,19 +58,19 @@ where
     F: Fn() -> IV,
     IV: IntoView,
 {
-    view! {
+    view! { cx,
         <h2>"Render Prop"</h2>
         {render_prop()}
 
         <h2>"Children"</h2>
-        {children()}
+        {children(cx)}
     }
 }
 ```
 
 `render_prop` and `children` are both functions, so we can call them to generate
 the appropriate views. `children`, in particular, is an alias for
-`Box<dyn FnOnce() -> Fragment>`. (Aren't you glad we named it `Children` instead?)
+`Box<dyn FnOnce(Scope) -> Fragment>`. (Aren't you glad we named it `Children` instead?)
 
 > If you need a `Fn` or `FnMut` here because you need to call `children` more than once,
 > we also provide `ChildrenFn` and `ChildrenMut` aliases.
@@ -77,8 +78,8 @@ the appropriate views. `children`, in particular, is an alias for
 We can use the component like this:
 
 ```rust
-view! {
-    <TakesChildren render_prop=|| view! { <p>"Hi, there!"</p> }>
+view! { cx,
+    <TakesChildren render_prop=|| view! { cx, <p>"Hi, there!"</p> }>
         // these get passed to `children`
         "Some text"
         <span>"A span"</span>
@@ -96,15 +97,15 @@ a component that takes its children and turns them into an unordered list.
 
 ```rust
 #[component]
-pub fn WrapsChildren(Children) -> impl IntoView {
+pub fn WrapsChildren(cx: Scope, children: Children) -> impl IntoView {
     // Fragment has `nodes` field that contains a Vec<View>
-    let children = children()
+    let children = children(cx)
         .nodes
         .into_iter()
-        .map(|child| view! { <li>{child}</li> })
-        .collect_view();
+        .map(|child| view! { cx, <li>{child}</li> })
+        .collect_view(cx);
 
-    view! {
+    view! { cx,
         <ul>{children}</ul>
     }
 }
@@ -113,7 +114,7 @@ pub fn WrapsChildren(Children) -> impl IntoView {
 Calling it like this will create a list:
 
 ```rust
-view! {
+view! { cx,
     <WrapsChildren>
         "A"
         "B"
@@ -141,19 +142,19 @@ use leptos::*;
 //   property
 
 #[component]
-pub fn App() -> impl IntoView {
-    let (items, set_items) = create_signal(vec![0, 1, 2]);
+pub fn App(cx: Scope) -> impl IntoView {
+    let (items, set_items) = create_signal(cx, vec![0, 1, 2]);
     let render_prop = move || {
         // items.with(...) reacts to the value without cloning
         // by applying a function. Here, we pass the `len` method
         // on a `Vec<_>` directly
         let len = move || items.with(Vec::len);
-        view! {
+        view! { cx,
             <p>"Length: " {len}</p>
         }
     };
 
-    view! {
+    view! { cx,
         // This component just displays the two kinds of children,
         // embedding them in some other markup
         <TakesChildren
@@ -178,12 +179,12 @@ pub fn App() -> impl IntoView {
 /// Displays a `render_prop` and some children within markup.
 #[component]
 pub fn TakesChildren<F, IV>(
-
+    cx: Scope,
     /// Takes a function (type F) that returns anything that can be
     /// converted into a View (type IV)
     render_prop: F,
     /// `children` takes the `Children` type
-    /// this is an alias for `Box<dyn FnOnce() -> Fragment>`
+    /// this is an alias for `Box<dyn FnOnce(Scope) -> Fragment>`
     /// ... aren't you glad we named it `Children` instead?
     children: Children,
 ) -> impl IntoView
@@ -191,30 +192,30 @@ where
     F: Fn() -> IV,
     IV: IntoView,
 {
-    view! {
+    view! { cx,
         <h1><code>"<TakesChildren/>"</code></h1>
         <h2>"Render Prop"</h2>
         {render_prop()}
         <hr/>
         <h2>"Children"</h2>
-        {children()}
+        {children(cx)}
     }
 }
 
 /// Wraps each child in an `<li>` and embeds them in a `<ul>`.
 #[component]
-pub fn WrapsChildren(Children) -> impl IntoView {
-    // children() returns a `Fragment`, which has a
+pub fn WrapsChildren(cx: Scope, children: Children) -> impl IntoView {
+    // children(cx) returns a `Fragment`, which has a
     // `nodes` field that contains a Vec<View>
     // this means we can iterate over the children
     // to create something new!
-    let children = children()
+    let children = children(cx)
         .nodes
         .into_iter()
-        .map(|child| view! { <li>{child}</li> })
+        .map(|child| view! { cx, <li>{child}</li> })
         .collect::<Vec<_>>();
 
-    view! {
+    view! { cx,
         <h1><code>"<WrapsChildren/>"</code></h1>
         // wrap our wrapped children in a UL
         <ul>{children}</ul>
@@ -222,7 +223,7 @@ pub fn WrapsChildren(Children) -> impl IntoView {
 }
 
 fn main() {
-    leptos::mount_to_body(|| view! { <App/> })
+    leptos::mount_to_body(|cx| view! { cx, <App/> })
 }
 
 ```

docs/book/src/view/builder.md

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

examples/Makefile.toml

@@ -26,7 +26,6 @@ CARGO_MAKE_CRATE_WORKSPACE_MEMBERS = [
   "slots",
   "ssr_modes",
   "ssr_modes_axum",
-  "suspense_tests",
   "tailwind",
   "tailwind_csr_trunk",
   "timer",
@@ -49,12 +48,10 @@ jq -R -s -c 'split("\n")[:-1]')
 echo "CARGO_MAKE_CRATE_WORKSPACE_MEMBERS = $examples"
 '''
 
-[tasks.test-report]
+[tasks.test-runner-report]
 workspace = false
-description = "report web testing technology used by examples - OPTION: [all]"
+description = "report ci test runners for each example - OPTION: [all]"
 script = '''
-set -emu
-
 BOLD="\e[1m"
 GREEN="\e[0;32m"
 ITALIC="\e[3m"
@@ -62,10 +59,11 @@ YELLOW="\e[0;33m"
 RESET="\e[0m"
 
 echo
-echo "${YELLOW}Web Test Technology${RESET}"
+echo "${YELLOW}Test Runner Report${RESET}"
+echo "${ITALIC}Pass the option \"all\" to show all the examples${RESET}"
 echo
 
-makefile_paths=$(find . -name Makefile.toml -not -path '*/target/*' -not -path '*/node_modules/*' |
+makefile_paths=$(find . -name Makefile.toml -not -path '*/target/*' |
   sed 's%./%%' |
   sed 's%/Makefile.toml%%' |
   grep -v Makefile.toml |
@@ -76,78 +74,38 @@ start_path=$(pwd)
 for path in $makefile_paths; do
   cd $path
 
-  crate_symbols=
+  test_runner=
 
-  pw_count=$(find . -name playwright.config.ts | wc -l)
-
-  while read -r line; do
-      case $line in
-      *"cucumber"*)
-          crate_symbols=$crate_symbols"C"
-          ;;
-      *"fantoccini"*)
-          crate_symbols=$crate_symbols"D"
-          ;;
-      esac
-  done <"./Cargo.toml"
+  test_count=$(grep -rl -E "#\[(test|rstest)\]" | wc -l)
+  if [ $test_count -gt 0 ]; then
+    test_runner="-C"
+  fi
 
   while read -r line; do
     case $line in
-      *"cargo-make/wasm-test.toml"*)
-          crate_symbols=$crate_symbols"W"
+      *"wasm-test.toml"*)
+          test_runner=$test_runner"-W"
         ;;
-      *"cargo-make/playwright-test.toml"*)
-          crate_symbols=$crate_symbols"P"
-          crate_symbols=$crate_symbols"N"
+      *"playwright-test.toml"*)
+          test_runner=$test_runner"-P"
         ;;
-      *"cargo-make/playwright-trunk-test.toml"*)
-          crate_symbols=$crate_symbols"P"
-          crate_symbols=$crate_symbols"T"
-        ;;
-      *"cargo-make/trunk_server.toml"*)
-          crate_symbols=$crate_symbols"T"
-        ;;
-      *"cargo-make/cargo-leptos-webdriver-test.toml"*)
-          crate_symbols=$crate_symbols"L"
-        ;;
-      *"cargo-make/cargo-leptos-test.toml"*)
-          crate_symbols=$crate_symbols"L"
-          if [ $pw_count -gt 0 ]; then
-            crate_symbols=$crate_symbols"P"
-          fi
+      *"cargo-leptos-test.toml"*)
+          test_runner=$test_runner"-L"
         ;;
     esac
   done <"./Makefile.toml"
 
-  # Sort list of tools
-  sorted_crate_symbols=$(echo ${crate_symbols} | grep -o . | sort | tr -d "\n") 
-
-  formatted_crate_symbols=" ➤ ${BOLD}${YELLOW}${sorted_crate_symbols}${RESET}"
-  crate_line=$path
-  if [ ! -z ${1+x} ]; then
+  if [ ! -z "$1" ]; then
     # Show all examples
-    if [ ! -z $crate_symbols ]; then
-      crate_line=$crate_line$formatted_crate_symbols
-    fi
-    echo $crate_line
-  elif [ ! -z $crate_symbols ]; then
+    echo "$path ${BOLD}${test_runner}${RESET}"
+  elif [ ! -z $test_runner ]; then
     # Filter out examples that do not run tests in `ci`
-    crate_line=$crate_line$formatted_crate_symbols
-    echo $crate_line
+    echo "$path ${BOLD}${test_runner}${RESET}"
   fi
 
   cd ${start_path}
 done
-
-c="${BOLD}${YELLOW}C${RESET} = Cucumber"
-d="${BOLD}${YELLOW}D${RESET} = WebDriver"
-l="${BOLD}${YELLOW}L${RESET} = Cargo Leptos"
-n="${BOLD}${YELLOW}N${RESET} = Node"
-p="${BOLD}${YELLOW}P${RESET} = Playwright"
-t="${BOLD}${YELLOW}T${RESET} = Trunk"
-w="${BOLD}${YELLOW}W${RESET} = WASM"
-
 echo
-echo "${ITALIC}Keys:${RESET} $c, $d, $l, $n, $p, $t, $w"
+echo "${ITALIC}Runners: C = Cargo Test, L = Cargo Leptos Test, P = Playwright Test, W = WASM Test${RESET}"
 echo
 '''

examples/README.md

@@ -4,4 +4,4 @@ The examples in this directory are all built and tested against the current `mai
 
 To the extent that new features have been released or breaking changes have been made since the previous release, the examples are compatible with the `main` branch and not the current release.
 
-To see the examples as they were at the time of the `0.3.0` release, [click here](https://github.com/leptos-rs/leptos/tree/v0.3.0/examples).
+To see the examples as they were at the time of the `0.3.0` release, [click here](https://github.com/leptos-rs/leptos/tree/v0.3.0/examples).

examples/animated_show/src/lib.rs

@@ -2,11 +2,11 @@ use core::time::Duration;
 use leptos::*;
 
 #[component]
-pub fn App() -> impl IntoView {
-    let show = create_rw_signal(false);
+pub fn App(cx: Scope) -> impl IntoView {
+    let show = create_rw_signal(cx, false);
 
     // the CSS classes in this example are just written directly inside the `index.html`
-    view! {
+    view! { cx,
         <div
             class="hover-me"
             on:mouseenter=move |_| show.set(true)

examples/animated_show/src/main.rs

@@ -4,5 +4,9 @@ use leptos::*;
 pub fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
-    mount_to_body(App);
+    mount_to_body(|cx| {
+        view! { cx,
+            <App />
+        }
+    })
 }

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

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

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

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

examples/cargo-make/cargo-leptos.toml

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

examples/cargo-make/clean.toml

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

examples/cargo-make/client-process.toml

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

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

@@ -1,17 +0,0 @@
-extend = [
-    { path = "../cargo-make/playwright.toml" },
-    { path = "../cargo-make/trunk_server.toml" },
-]
-
-[tasks.integration-test]
-dependencies = [
-    "maybe-start-client",
-    "wait-one",
-    "test-playwright",
-    "stop-client",
-]
-
-[tasks.wait-one]
-script = '''
-sleep 1
-'''

examples/cargo-make/trunk_server.toml

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

examples/cargo-make/webdriver.toml

@@ -1,30 +0,0 @@
-[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/src/lib.rs

@@ -5,14 +5,15 @@ use leptos::*;
 /// You can use doc comments like this to document your component.
 #[component]
 pub fn SimpleCounter(
+    cx: Scope,
     /// The starting value for the counter
     initial_value: i32,
     /// The change that should be applied each time the button is clicked.
     step: i32,
 ) -> impl IntoView {
-    let (value, set_value) = create_signal(initial_value);
+    let (value, set_value) = create_signal(cx, initial_value);
 
-    view! {
+    view! { cx,
         <div>
             <button on:click=move |_| set_value(0)>"Clear"</button>
             <button on:click=move |_| set_value.update(|value| *value -= step)>"-1"</button>

examples/counter/src/main.rs

@@ -4,8 +4,8 @@ use leptos::*;
 pub fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
-    mount_to_body(|| {
-        view! {
+    mount_to_body(|cx| {
+        view! { cx,
             <SimpleCounter
                 initial_value=0
                 step=1

examples/counter/tests/web.rs

@@ -15,7 +15,7 @@ fn clear() {
     // note that we start at the initial value of 10
     mount_to(
         test_wrapper.clone().unchecked_into(),
-        || view! { <SimpleCounter initial_value=10 step=1/> },
+        |cx| view! { cx, <SimpleCounter initial_value=10 step=1/> },
     );
 
     // now we extract the buttons by iterating over the DOM
@@ -32,17 +32,16 @@ fn clear() {
 
     // now let's test the <div> against the expected value
     // we can do this by testing its `outerHTML`
-    let runtime = create_runtime();
     assert_eq!(
         div.outer_html(),
         // here we spawn a mini reactive system, just to render the
         // test case
-        {
+        run_scope(create_runtime(), |cx| {
             // it's as if we're creating it with a value of 0, right?
-            let (value, _set_value) = create_signal(0);
+            let (value, _set_value) = create_signal(cx, 0);
 
             // we can remove the event listeners because they're not rendered to HTML
-            view! {
+            view! { cx,
                 <div>
                     <button>"Clear"</button>
                     <button>"-1"</button>
@@ -53,7 +52,7 @@ fn clear() {
             // the view returned an HtmlElement<Div>, which is a smart pointer for
             // a DOM element. So we can still just call .outer_html()
             .outer_html()
-        }
+        })
     );
 
     // There's actually an easier way to do this...
@@ -62,12 +61,10 @@ fn clear() {
         let comparison_wrapper = document.create_element("section").unwrap();
         leptos::mount_to(
             comparison_wrapper.clone().unchecked_into(),
-            || view! { <SimpleCounter initial_value=0 step=1/>},
+            |cx| view! { cx, <SimpleCounter initial_value=0 step=1/>},
         );
         comparison_wrapper.inner_html()
     });
-
-    runtime.dispose();
 }
 
 #[wasm_bindgen_test]
@@ -78,7 +75,7 @@ fn inc() {
 
     mount_to(
         test_wrapper.clone().unchecked_into(),
-        || view! { <SimpleCounter initial_value=0 step=1/> },
+        |cx| view! { cx, <SimpleCounter initial_value=0 step=1/> },
     );
 
     // You can do testing with vanilla DOM operations
@@ -121,14 +118,12 @@ fn inc() {
 
     assert_eq!(text.text_content(), Some("Value: 0!".to_string()));
 
-    let runtime = create_runtime();
-
     // Or you can test against a sample view!
     assert_eq!(
         div.outer_html(),
-        {
-            let (value, _) = create_signal(0);
-            view! {
+        run_scope(create_runtime(), |cx| {
+            let (value, _) = create_signal(cx, 0);
+            view! { cx,
                 <div>
                     <button>"Clear"</button>
                     <button>"-1"</button>
@@ -137,17 +132,17 @@ fn inc() {
                 </div>
             }
         }
-        .outer_html()
+        .outer_html())
     );
 
     inc.click();
 
     assert_eq!(
         div.outer_html(),
-        {
+        run_scope(create_runtime(), |cx| {
             // because we've clicked, it's as if the signal is starting at 1
-            let (value, _) = create_signal(1);
-            view! {
+            let (value, _) = create_signal(cx, 1);
+            view! { cx,
                 <div>
                     <button>"Clear"</button>
                     <button>"-1"</button>
@@ -156,8 +151,6 @@ fn inc() {
                 </div>
             }
         }
-        .outer_html()
+        .outer_html())
     );
-
-    runtime.dispose();
 }

examples/counter_isomorphic/Cargo.toml

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

examples/counter_isomorphic/src/counters.rs

@@ -15,12 +15,13 @@ cfg_if! {
     }
 }
 
-#[server]
+// "/api" is an optional prefix that allows you to locate server functions wherever you'd like on the server
+#[server(GetServerCount, "/api")]
 pub async fn get_server_count() -> Result<i32, ServerFnError> {
     Ok(COUNT.load(Ordering::Relaxed))
 }
 
-#[server]
+#[server(AdjustServerCount, "/api")]
 pub async fn adjust_server_count(
     delta: i32,
     msg: String,
@@ -32,16 +33,16 @@ pub async fn adjust_server_count(
     Ok(new)
 }
 
-#[server]
+#[server(ClearServerCount, "/api")]
 pub async fn clear_server_count() -> Result<i32, ServerFnError> {
     COUNT.store(0, Ordering::Relaxed);
     _ = COUNT_CHANNEL.send(&0).await;
     Ok(0)
 }
 #[component]
-pub fn Counters() -> impl IntoView {
-    provide_meta_context();
-    view! {
+pub fn Counters(cx: Scope) -> impl IntoView {
+    provide_meta_context(cx);
+    view! { cx,
         <Router>
             <header>
                 <h1>"Server-Side Counters"</h1>
@@ -66,24 +67,10 @@ pub fn Counters() -> impl IntoView {
             <Link rel="shortcut icon" type_="image/ico" href="/favicon.ico"/>
             <main>
                 <Routes>
-                    <Route
-                        path=""
-                        view=|| {
-                            view! { <Counter/> }
-                        }
-                    />
-                    <Route
-                        path="form"
-                        view=|| {
-                            view! { <FormCounter/> }
-                        }
-                    />
-                    <Route
-                        path="multi"
-                        view=|| {
-                            view! { <MultiuserCounter/> }
-                        }
-                    />
+                    <Route path="" view=Counter/>
+                    <Route path="form" view=FormCounter/>
+                    <Route path="multi" view=MultiuserCounter/>
+                    <Route path="multi" view=NotFound/>
                 </Routes>
             </main>
         </Router>
@@ -95,11 +82,12 @@ pub fn Counters() -> impl IntoView {
 // it's invalidated by one of the user's own actions
 // This is the typical pattern for a CRUD app
 #[component]
-pub fn Counter() -> impl IntoView {
-    let dec = create_action(|_| adjust_server_count(-1, "decing".into()));
-    let inc = create_action(|_| adjust_server_count(1, "incing".into()));
-    let clear = create_action(|_| clear_server_count());
+pub fn Counter(cx: Scope) -> impl IntoView {
+    let dec = create_action(cx, |_| adjust_server_count(-1, "decing".into()));
+    let inc = create_action(cx, |_| adjust_server_count(1, "incing".into()));
+    let clear = create_action(cx, |_| clear_server_count());
     let counter = create_resource(
+        cx,
         move || {
             (
                 dec.version().get(),
@@ -110,16 +98,20 @@ pub fn Counter() -> impl IntoView {
         |_| get_server_count(),
     );
 
-    let value =
-        move || counter.get().map(|count| count.unwrap_or(0)).unwrap_or(0);
+    let value = move || {
+        counter
+            .read(cx)
+            .map(|count| count.unwrap_or(0))
+            .unwrap_or(0)
+    };
     let error_msg = move || {
-        counter.get().and_then(|res| match res {
+        counter.read(cx).and_then(|res| match res {
             Ok(_) => None,
             Err(e) => Some(e),
         })
     };
 
-    view! {
+    view! { cx,
         <div>
             <h2>"Simple Counter"</h2>
             <p>
@@ -134,7 +126,7 @@ pub fn Counter() -> impl IntoView {
             {move || {
                 error_msg()
                     .map(|msg| {
-                        view! { <p>"Error: " {msg.to_string()}</p> }
+                        view! { cx, <p>"Error: " {msg.to_string()}</p> }
                     })
             }}
         </div>
@@ -145,13 +137,12 @@ pub fn Counter() -> impl IntoView {
 // It uses the same invalidation pattern as the plain counter,
 // but uses HTML forms to submit the actions
 #[component]
-pub fn FormCounter() -> impl IntoView {
-    // these struct names are auto-generated by #[server]
-    // they are just the PascalCased versions of the function names
-    let adjust = create_server_action::<AdjustServerCount>();
-    let clear = create_server_action::<ClearServerCount>();
+pub fn FormCounter(cx: Scope) -> impl IntoView {
+    let adjust = create_server_action::<AdjustServerCount>(cx);
+    let clear = create_server_action::<ClearServerCount>(cx);
 
     let counter = create_resource(
+        cx,
         move || (adjust.version().get(), clear.version().get()),
         |_| {
             log::debug!("FormCounter running fetcher");
@@ -160,23 +151,19 @@ pub fn FormCounter() -> impl IntoView {
     );
     let value = move || {
         log::debug!("FormCounter looking for value");
-        counter.get().and_then(|n| n.ok()).unwrap_or(0)
+        counter.read(cx).and_then(|n| n.ok()).unwrap_or(0)
     };
 
-    view! {
+    view! { cx,
         <div>
             <h2>"Form Counter"</h2>
             <p>
                 "This counter uses forms to set the value on the server. When progressively enhanced, it should behave identically to the “Simple Counter.”"
             </p>
             <div>
-                // calling a server function is the same as POSTing to its API URL
-                // so we can just do that with a form and button
                 <ActionForm action=clear>
                     <input type="submit" value="Clear"/>
                 </ActionForm>
-                // We can submit named arguments to the server functions
-                // by including them as input values with the same name
                 <ActionForm action=adjust>
                     <input type="hidden" name="delta" value="-1"/>
                     <input type="hidden" name="msg" value="form value down"/>
@@ -198,11 +185,12 @@ pub fn FormCounter() -> impl IntoView {
 // Whenever another user updates the value, it will update here
 // This is the primitive pattern for live chat, collaborative editing, etc.
 #[component]
-pub fn MultiuserCounter() -> impl IntoView {
+pub fn MultiuserCounter(cx: Scope) -> impl IntoView {
     let dec =
-        create_action(|_| adjust_server_count(-1, "dec dec goose".into()));
-    let inc = create_action(|_| adjust_server_count(1, "inc inc moose".into()));
-    let clear = create_action(|_| clear_server_count());
+        create_action(cx, |_| adjust_server_count(-1, "dec dec goose".into()));
+    let inc =
+        create_action(cx, |_| adjust_server_count(1, "inc inc moose".into()));
+    let clear = create_action(cx, |_| clear_server_count());
 
     #[cfg(not(feature = "ssr"))]
     let multiplayer_value = {
@@ -212,6 +200,7 @@ pub fn MultiuserCounter() -> impl IntoView {
             gloo_net::eventsource::futures::EventSource::new("/api/events")
                 .expect("couldn't connect to SSE stream");
         let s = create_signal_from_stream(
+            cx,
             source
                 .subscribe("message")
                 .unwrap()
@@ -225,14 +214,14 @@ pub fn MultiuserCounter() -> impl IntoView {
                 }),
         );
 
-        on_cleanup(move || source.close());
+        on_cleanup(cx, move || source.close());
         s
     };
 
     #[cfg(feature = "ssr")]
-    let (multiplayer_value, _) = create_signal(None::<i32>);
+    let (multiplayer_value, _) = create_signal(cx, None::<i32>);
 
-    view! {
+    view! { cx,
         <div>
             <h2>"Multi-User Counter"</h2>
             <p>
@@ -249,3 +238,14 @@ pub fn MultiuserCounter() -> impl IntoView {
         </div>
     }
 }
+
+#[component]
+fn NotFound(cx: Scope) -> impl IntoView {
+    #[cfg(feature = "ssr")]
+    {
+        let resp = expect_context::<leptos_actix::ResponseOptions>(cx);
+        resp.set_status(actix_web::http::StatusCode::NOT_FOUND);
+    }
+
+    view! { cx, <h1>"Not Found"</h1> }
+}

examples/counter_isomorphic/src/lib.rs

@@ -13,8 +13,8 @@ cfg_if! {
             _ = console_log::init_with_level(log::Level::Debug);
             console_error_panic_hook::set_once();
 
-            mount_to_body(|| {
-                view! { <Counters/> }
+            mount_to_body(|cx| {
+                view! { cx,  <Counters/> }
             });
         }
     }

examples/counter_isomorphic/src/main.rs

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

examples/counter_url_query/src/lib.rs

@@ -5,13 +5,13 @@ use leptos_router::*;
 ///
 /// You can use doc comments like this to document your component.
 #[component]
-pub fn SimpleQueryCounter() -> impl IntoView {
-    let (count, set_count) = create_query_signal::<i32>("count");
+pub fn SimpleQueryCounter(cx: Scope) -> impl IntoView {
+    let (count, set_count) = create_query_signal::<i32>(cx, "count");
     let clear = move |_| set_count(None);
     let decrement = move |_| set_count(Some(count().unwrap_or(0) - 1));
     let increment = move |_| set_count(Some(count().unwrap_or(0) + 1));
 
-    let (msg, set_msg) = create_query_signal::<String>("message");
+    let (msg, set_msg) = create_query_signal::<String>(cx, "message");
     let update_msg = move |ev| {
         let new_msg = event_target_value(&ev);
         if new_msg.is_empty() {
@@ -21,7 +21,7 @@ pub fn SimpleQueryCounter() -> impl IntoView {
         }
     };
 
-    view! {
+    view! { cx,
         <div>
             <button on:click=clear>"Clear"</button>
             <button on:click=decrement>"-1"</button>

examples/counter_url_query/src/main.rs

@@ -5,8 +5,8 @@ use leptos_router::*;
 pub fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
-    mount_to_body(|| {
-        view! {
+    mount_to_body(|cx| {
+        view! { cx,
             <Router>
                 <Routes>
                     <Route path="" view=SimpleQueryCounter />

examples/counter_without_macros/src/lib.rs

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

examples/counter_without_macros/src/main.rs

@@ -5,5 +5,5 @@ use leptos::*;
 pub fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
-    mount_to_body(|| counter(0, 1))
+    mount_to_body(|cx| counter(cx, 0, 1))
 }

examples/counter_without_macros/tests/web.rs

@@ -41,7 +41,7 @@ fn should_clear_counter() {
 
 fn open_counter() {
     remove_existing_counter();
-    mount_to_body(move || counter(0, 1));
+    mount_to_body(move |cx| counter(cx, 0, 1));
 }
 
 fn remove_existing_counter() {

examples/counters/src/lib.rs

@@ -10,14 +10,14 @@ struct CounterUpdater {
 }
 
 #[component]
-pub fn Counters() -> impl IntoView {
-    let (next_counter_id, set_next_counter_id) = create_signal(0);
-    let (counters, set_counters) = create_signal::<CounterHolder>(vec![]);
-    provide_context(CounterUpdater { set_counters });
+pub fn Counters(cx: Scope) -> impl IntoView {
+    let (next_counter_id, set_next_counter_id) = create_signal(cx, 0);
+    let (counters, set_counters) = create_signal::<CounterHolder>(cx, vec![]);
+    provide_context(cx, CounterUpdater { set_counters });
 
     let add_counter = move |_| {
         let id = next_counter_id();
-        let sig = create_signal(0);
+        let sig = create_signal(cx, 0);
         set_counters.update(move |counters| counters.push((id, sig)));
         set_next_counter_id.update(|id| *id += 1);
     };
@@ -25,7 +25,7 @@ pub fn Counters() -> impl IntoView {
     let add_many_counters = move |_| {
         let next_id = next_counter_id();
         let new_counters = (next_id..next_id + MANY_COUNTERS).map(|id| {
-            let signal = create_signal(0);
+            let signal = create_signal(cx, 0);
             (id, signal)
         });
 
@@ -37,7 +37,7 @@ pub fn Counters() -> impl IntoView {
         set_counters.update(|counters| counters.clear());
     };
 
-    view! {
+    view! { cx,
         <div>
             <button on:click=add_counter>
                 "Add Counter"
@@ -65,8 +65,8 @@ pub fn Counters() -> impl IntoView {
                 <For
                     each=counters
                     key=|counter| counter.0
-                    view=move |(id, (value, set_value)): (usize, (ReadSignal<i32>, WriteSignal<i32>))| {
-                        view! {
+                    view=move |cx, (id, (value, set_value)): (usize, (ReadSignal<i32>, WriteSignal<i32>))| {
+                        view! { cx,
                             <Counter id value set_value/>
                         }
                     }
@@ -78,11 +78,12 @@ pub fn Counters() -> impl IntoView {
 
 #[component]
 fn Counter(
+    cx: Scope,
     id: usize,
     value: ReadSignal<i32>,
     set_value: WriteSignal<i32>,
 ) -> impl IntoView {
-    let CounterUpdater { set_counters } = use_context().unwrap();
+    let CounterUpdater { set_counters } = use_context(cx).unwrap();
 
     let input = move |ev| {
         set_value(event_target_value(&ev).parse::<i32>().unwrap_or_default())
@@ -90,9 +91,9 @@ fn Counter(
 
     // just an example of how a cleanup function works
     // this will run when the scope is disposed, i.e., when this row is deleted
-    on_cleanup(|| log::debug!("deleted a row"));
+    on_cleanup(cx, || log::debug!("deleted a row"));
 
-    view! {
+    view! { cx,
         <li>
             <button on:click=move |_| set_value.update(move |value| *value -= 1)>"-1"</button>
             <input type="text"

examples/counters/src/main.rs

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

examples/counters/tests/web.rs

@@ -8,7 +8,7 @@ use web_sys::HtmlElement;
 
 #[wasm_bindgen_test]
 fn inc() {
-    mount_to_body(|| view! { <Counters/> });
+    mount_to_body(|cx| view! { cx,  <Counters/> });
 
     let document = leptos::document();
     let div = document.query_selector("div").unwrap().unwrap();

examples/counters_stable/Cargo.toml

@@ -13,7 +13,7 @@ console_error_panic_hook = "0.1.7"
 [dev-dependencies]
 wasm-bindgen = "0.2.87"
 wasm-bindgen-test = "0.3.37"
-pretty_assertions = "1.4.0"
+pretty_assertions = "1.3.0"
 
 [dev-dependencies.web-sys]
 features = [

examples/counters_stable/index.html

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

examples/counters_stable/src/lib.rs

@@ -11,14 +11,15 @@ struct CounterUpdater {
 }
 
 #[component]
-pub fn Counters() -> impl IntoView {
-    let (next_counter_id, set_next_counter_id) = create_signal(0);
-    let (counters, set_counters) = create_signal::<CounterHolder>(vec![]);
-    provide_context(CounterUpdater { set_counters });
+pub fn Counters(cx: Scope) -> impl IntoView {
+    let (next_counter_id, set_next_counter_id) = create_signal(cx, 0);
+    let (counters, set_counters) = create_signal::<CounterHolder>(cx, vec![]);
+    provide_context(cx, CounterUpdater { set_counters });
+    provide_meta_context(cx);
 
     let add_counter = move |_| {
         let id = next_counter_id.get();
-        let sig = create_signal(0);
+        let sig = create_signal(cx, 0);
         set_counters.update(move |counters| counters.push((id, sig)));
         set_next_counter_id.update(|id| *id += 1);
     };
@@ -26,7 +27,7 @@ pub fn Counters() -> impl IntoView {
     let add_many_counters = move |_| {
         let next_id = next_counter_id.get();
         let new_counters = (next_id..next_id + MANY_COUNTERS).map(|id| {
-            let signal = create_signal(0);
+            let signal = create_signal(cx, 0);
             (id, signal)
         });
 
@@ -38,7 +39,7 @@ pub fn Counters() -> impl IntoView {
         set_counters.update(|counters| counters.clear());
     };
 
-    view! {
+    view! { cx,
         <Title text="Counters (Stable)" />
         <div>
             <button on:click=add_counter>
@@ -67,8 +68,9 @@ pub fn Counters() -> impl IntoView {
                 <For
                     each={move || counters.get()}
                     key={|counter| counter.0}
-                    view=move |(id, (value, set_value))| {
+                    view=move |cx, (id, (value, set_value))| {
                         view! {
+                            cx,
                             <Counter id value set_value/>
                         }
                     }
@@ -80,18 +82,19 @@ pub fn Counters() -> impl IntoView {
 
 #[component]
 fn Counter(
+    cx: Scope,
     id: usize,
     value: ReadSignal<i32>,
     set_value: WriteSignal<i32>,
 ) -> impl IntoView {
-    let CounterUpdater { set_counters } = use_context().unwrap();
+    let CounterUpdater { set_counters } = use_context(cx).unwrap();
 
     let input = move |ev| {
         set_value
             .set(event_target_value(&ev).parse::<i32>().unwrap_or_default())
     };
 
-    view! {
+    view! { cx,
         <li>
             <button data-testid="decrement_count" on:click=move |_| set_value.update(move |value| *value -= 1)>"-1"</button>
             <input data-testid="counter_input" type="text"

examples/counters_stable/src/main.rs

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

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

@@ -40,7 +40,7 @@ pub fn remove_counter(index: u32) {
 
 pub fn view_counters() {
     remove_existing_counters();
-    mount_to_body(|| view! { <Counters/> });
+    mount_to_body(|cx| view! { cx,  <Counters/> });
 }
 
 // Results

examples/error_boundary/.gitignore

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

examples/error_boundary/Makefile.toml

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

examples/error_boundary/e2e/.gitignore

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

examples/error_boundary/e2e/package-lock.json

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

examples/error_boundary/e2e/package.json

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

examples/error_boundary/e2e/playwright.config.ts

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

examples/error_boundary/e2e/tests/clear_number.spec.ts

@@ -1,23 +0,0 @@
-import { test, expect } from "@playwright/test";
-import { HomePage } from "./fixtures/home_page";
-
-test.describe("Clear Number", () => {
-  test("should see the error message", async ({ page }) => {
-    const ui = new HomePage(page);
-    await ui.goto();
-
-    await ui.clearInput();
-
-    await expect(ui.errorMessage).toHaveText("Not a number! Errors: ");
-  });
-  test("should see the error list", async ({ page }) => {
-    const ui = new HomePage(page);
-    await ui.goto();
-
-    await ui.clearInput();
-
-    await expect(ui.errorList).toHaveText(
-      "cannot parse integer from empty string"
-    );
-  });
-});

examples/error_boundary/e2e/tests/click_down_arrow.spec.ts

@@ -1,17 +0,0 @@
-import { test, expect } from "@playwright/test";
-import { HomePage } from "./fixtures/home_page";
-
-test.describe("Click Down Arrow", () => {
-  test("should see the negative number", async ({ page }) => {
-    const ui = new HomePage(page);
-    await ui.goto();
-
-    await ui.clickDownArrow();
-    await ui.clickDownArrow();
-    await ui.clickDownArrow();
-    await ui.clickDownArrow();
-    await ui.clickDownArrow();
-
-    await expect(ui.successMessage).toHaveText("You entered -5");
-  });
-});

examples/error_boundary/e2e/tests/click_up_arrow.spec.ts

@@ -1,15 +0,0 @@
-import { test, expect } from "@playwright/test";
-import { HomePage } from "./fixtures/home_page";
-
-test.describe("Click Up Arrow", () => {
-  test("should see the positive number", async ({ page }) => {
-    const ui = new HomePage(page);
-    await ui.goto();
-
-    await ui.clickUpArrow();
-    await ui.clickUpArrow();
-    await ui.clickUpArrow();
-
-    await expect(ui.successMessage).toHaveText("You entered 3");
-  });
-});

examples/error_boundary/e2e/tests/fixtures/home_page.ts

@@ -1,56 +0,0 @@
-import { expect, Locator, Page } from "@playwright/test";
-
-export class HomePage {
-  readonly page: Page;
-  readonly pageTitle: Locator;
-  readonly numberInput: Locator;
-  readonly successMessage: Locator;
-  readonly errorMessage: Locator;
-
-  readonly errorList: Locator;
-
-  constructor(page: Page) {
-    this.page = page;
-
-    this.pageTitle = page.locator("h1");
-    this.numberInput = page.getByLabel(
-      "Type a number (or something that's not a number!)"
-    );
-    this.successMessage = page.locator("label p");
-    this.errorMessage = page.locator("div p");
-    this.errorList = page.getByRole("list");
-  }
-
-  async goto() {
-    await this.page.goto("/");
-  }
-
-  async enterNumber(count: string, index: number = 0) {
-    await Promise.all([
-      this.numberInput.waitFor(),
-      this.numberInput.fill(count),
-    ]);
-  }
-
-  async clickUpArrow() {
-    await Promise.all([
-      this.numberInput.waitFor(),
-      this.numberInput.press("ArrowUp"),
-    ]);
-  }
-
-  async clickDownArrow() {
-    await Promise.all([
-      this.numberInput.waitFor(),
-      this.numberInput.press("ArrowDown"),
-    ]);
-  }
-
-  async clearInput() {
-    await Promise.all([
-      this.numberInput.waitFor(),
-      this.clickUpArrow(),
-      this.numberInput.press("Backspace"),
-    ]);
-  }
-}

examples/error_boundary/e2e/tests/open_app.spec.ts

@@ -1,11 +0,0 @@
-import { test, expect } from "@playwright/test";
-import { HomePage } from "./fixtures/home_page";
-
-test.describe("Open App", () => {
-  test("should see the page title", async ({ page }) => {
-    const ui = new HomePage(page);
-    await ui.goto();
-
-    await expect(ui.pageTitle).toHaveText("Error Handling");
-  });
-});