v0.4.9

* test(suspense-tests): add e2e tests (closes #1519)

test(suspense_tests): load nested

test(suspense_tests): load parallel

test(suspsense_tests): load nested inside

test(suspense_tests): load single

test(suspense_tests): load inside component

test(suspense_tests): load no resources

test(suspense_tests): click nested count

test(suspense_tests): click inside component count

test(suspense_tests): click nested inside count

test(suspense_tests): click single count

test(suspense_tests): click parallel counts

test(suspense_tests): click no resources count

refactor(suspense_tests): change view strategy

* fix(suspense_tests): let_unit_value

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,39 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**Leptos Dependencies**
+
+Please copy and paste the Leptos dependencies and features from your `Cargo.toml`.
+
+For example:
+```toml
+leptos = { version = "0.3", features = ["serde"] }
+leptos_axum = { version = "0.3", optional = true }
+leptos_meta = { version = "0.3"}
+leptos_router = { version = "0.3"}
+```
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,7 @@
+contact_links:
+  - name: Support or Question
+    url: https://github.com/leptos-rs/leptos/discussions/new?category=q-a
+    about: Do you need help figuring out how to do something, or want some help troubleshooting a bug? You can ask in our Discussions section.
+  - name: Discord Discussions
+    url: https://discord.gg/YdRAhS7eQB
+    about: For more informal, real-time conversation and support, you can join our Discord server.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/workflows/check-examples.yml

@@ -1,45 +1,74 @@
-name: Test
+name: Check Examples
 
 on:
   push:
-    branches: [main]
+    branches:
+      - main
   pull_request:
-    branches: [main]
-
-env:
-  CARGO_TERM_COLOR: always
+    branches:
+      - main
 
 jobs:
-  test:
-    name: Check examples ${{ matrix.os }} (using rustc ${{ matrix.rust }})
-    runs-on: ${{ matrix.os }}
-    strategy:
-      matrix:
-        rust:
-          - nightly
-        os:
-          - ubuntu-latest
-
+  setup:
+    name: Get Examples
+    runs-on: ubuntu-latest
+    outputs:
+      matrix: ${{ steps.set-matrix.outputs.matrix }}
+      source_changed: ${{ steps.set-source-changed.outputs.source_changed }}
     steps:
-      - uses: actions/checkout@v3
+      - name: Checkout
+        uses: actions/checkout@v3
 
-      - name: Setup Rust
-        uses: actions-rs/toolchain@v1
+      - 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: Get source files that changed
+        id: changed-source
+        uses: tj-actions/changed-files@v36
         with:
-          toolchain: ${{ matrix.rust }}
-          override: true
-          components: rustfmt
+          files: |
+            integrations
+            leptos
+            leptos_config
+            leptos_dom
+            leptos_hot_reload
+            leptos_macro
+            leptos_reactive
+            leptos_server
+            meta
+            router
+            server_fn
+            server_fn_macro
 
-      - name: Add wasm32-unknown-unknown
-        run: rustup target add wasm32-unknown-unknown
+      - name: List source files that changed
+        run: echo '${{ steps.changed-source.outputs.all_changed_files }}'
 
-      - name: Setup cargo-make
-        uses: davidB/rust-cargo-make@v1
+      - name: Set source_changed
+        id: set-source-changed
+        run: |
+          echo "source_changed=${{ steps.changed-source.outputs.any_changed }}" >> "$GITHUB_OUTPUT"
 
-      - name: Cargo generate-lockfile
-        run: cargo generate-lockfile
-
-      - uses: Swatinem/rust-cache@v2
-
-      - name: Run cargo check on all examples
-        run: cargo make check-examples
+  matrix-job:
+    name: Check
+    needs: [setup]
+    if: needs.setup.outputs.source_changed == 'true'
+    strategy:
+      matrix: ${{ fromJSON(needs.setup.outputs.matrix) }}
+      fail-fast: false
+    uses: ./.github/workflows/run-cargo-make-task.yml
+    with:
+      directory: ${{ matrix.directory }}
+      cargo_make_task: "check"

.github/workflows/check-stable.yml

@@ -1,4 +1,4 @@
-name: Test
+name: Check stable
 
 on:
   push:
@@ -8,10 +8,48 @@ on:
 
 env:
   CARGO_TERM_COLOR: always
+  CARGO_REGISTRIES_CRATES_IO_PROTOCOL: sparse
 
 jobs:
+  setup:
+    name: Detect Changes
+    runs-on: ubuntu-latest
+    outputs:
+      source_changed: ${{ steps.set-source-changed.outputs.source_changed }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - 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"
+
   test:
     name: Check examples ${{ matrix.os }} (using rustc ${{ matrix.rust }})
+    needs: [setup]
+    if: needs.setup.outputs.source_changed == 'true'
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:

.github/workflows/check.yml

@@ -1,45 +0,0 @@
-name: Test
-
-on:
-  push:
-    branches: [main]
-  pull_request:
-    branches: [main]
-
-env:
-  CARGO_TERM_COLOR: always
-
-jobs:
-  test:
-    name: Run `cargo check` ${{ matrix.os }} (using rustc ${{ matrix.rust }})
-    runs-on: ${{ matrix.os }}
-    strategy:
-      matrix:
-        rust:
-          - nightly
-        os:
-          - ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v3
-
-      - name: Setup Rust
-        uses: actions-rs/toolchain@v1
-        with:
-          toolchain: ${{ matrix.rust }}
-          override: true
-          components: rustfmt
-
-      - name: Add wasm32-unknown-unknown
-        run: rustup target add wasm32-unknown-unknown
-
-      - name: Setup cargo-make
-        uses: davidB/rust-cargo-make@v1
-
-      - name: Cargo generate-lockfile
-        run: cargo generate-lockfile
-
-      - uses: Swatinem/rust-cache@v2
-
-      - name: Run cargo check on all libraries
-        run: cargo make --profile=github-actions check

.github/workflows/ci.yml

@@ -0,0 +1,75 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  setup:
+    name: Detect Changes
+    runs-on: ubuntu-latest
+    outputs:
+      source_changed: ${{ steps.set-source-changed.outputs.source_changed }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - 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: [setup]
+    if: needs.setup.outputs.source_changed == 'true'
+    strategy:
+      matrix:
+        directory:
+          [
+            integrations/actix,
+            integrations/axum,
+            integrations/viz,
+            integrations/utils,
+            leptos,
+            leptos_config,
+            leptos_dom,
+            leptos_hot_reload,
+            leptos_macro,
+            leptos_reactive,
+            leptos_server,
+            meta,
+            router,
+            server_fn,
+            server_fn/server_fn_macro_default,
+            server_fn_macro,
+          ]
+    uses: ./.github/workflows/run-cargo-make-task.yml
+    with:
+      directory: ${{ matrix.directory }}
+      cargo_make_task: "ci"

.github/workflows/fmt.yml

@@ -1,34 +0,0 @@
-name: Test
-
-on:
-  push:
-    branches: [main]
-  pull_request:
-    branches: [main]
-
-env:
-  CARGO_TERM_COLOR: always
-
-jobs:
-  test:
-    name: Run rustfmt
-    runs-on: ${{ matrix.os }}
-    strategy:
-      matrix:
-        rust:
-          - nightly
-        os:
-          - ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v3
-
-      - name: Setup Rust
-        uses: actions-rs/toolchain@v1
-        with:
-          toolchain: ${{ matrix.rust }}
-          override: true
-          components: rustfmt
-
-      - name: Run Rustfmt
-        run: cargo fmt -- --check

.github/workflows/publish-book.yml

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

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

@@ -0,0 +1,100 @@
+name: Run Task
+
+on:
+  workflow_call:
+    inputs:
+      directory:
+        required: true
+        type: string
+      cargo_make_task:
+        required: true
+        type: string
+env:
+  CARGO_TERM_COLOR: always
+  CARGO_REGISTRIES_CRATES_IO_PROTOCOL: sparse
+
+jobs:
+  test:
+    name: Run ${{ matrix.os }} (using rustc ${{ matrix.rust }})
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        rust:
+          - nightly
+        os:
+          - ubuntu-latest
+
+    steps:
+      # Setup environment
+      - name: Install playwright browser dependencies
+        run: |
+          sudo apt-get update
+          sudo apt-get install libegl1 libvpx7 libevent-2.1-7 libopus0 libopengl0 libwoff1 libharfbuzz-icu0 libgstreamer-plugins-base1.0-0 libgstreamer-gl1.0-0 libhyphen0 libmanette-0.2-0 libgles2 gstreamer1.0-libav
+
+      - uses: actions/checkout@v3
+
+      - name: Setup Rust
+        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: Install Trunk
+        uses: jetli/trunk-action@v0.4.0
+        with:
+          version: "latest"
+
+      - name: Print Trunk Version
+        run: trunk --version
+
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        id: pnpm-install
+        with:
+          version: 8
+          run_install: false
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install Chrome Webriver
+        run: |
+          sudo apt-get update
+          sudo apt-get install chromium-chromedriver
+
+      # Run Cargo Make Task
+      - name: ${{ inputs.cargo_make_task }}
+        run: |
+          if [ "${{ inputs.directory }}" = "INTERNAL" ]; then
+            echo No verification required
+          else
+            cd ${{ inputs.directory }}
+            cargo make --profile=github-actions ${{ inputs.cargo_make_task }}
+          fi

.github/workflows/test.yml

@@ -1,45 +0,0 @@
-name: Test
-
-on:
-  push:
-    branches: [main]
-  pull_request:
-    branches: [main]
-
-env:
-  CARGO_TERM_COLOR: always
-
-jobs:
-  test:
-    name: Run tests ${{ matrix.os }} (using rustc ${{ matrix.rust }})
-    runs-on: ${{ matrix.os }}
-    strategy:
-      matrix:
-        rust:
-          - nightly
-        os:
-          - ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v3
-
-      - name: Setup Rust
-        uses: actions-rs/toolchain@v1
-        with:
-          toolchain: ${{ matrix.rust }}
-          override: true
-          components: rustfmt
-
-      - name: Add wasm32-unknown-unknown
-        run: rustup target add wasm32-unknown-unknown
-
-      - name: Setup cargo-make
-        uses: davidB/rust-cargo-make@v1
-
-      - name: Cargo generate-lockfile
-        run: cargo generate-lockfile
-
-      - uses: Swatinem/rust-cache@v2
-
-      - name: Run tests with all features
-        run: cargo make --profile=github-actions test

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

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

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

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

ARCHITECTURE.md

@@ -0,0 +1,231 @@
+# Architecture
+
+The goal of this document is to make it easier for contributors (and anyone
+who’s interested!) to understand the architecture of the framework.
+
+The whole Leptos framework is built from a series of layers. Each of these layers
+depends on the one below it, but each can be used independently from the ones
+built on top of it. While running a command like `cargo leptos new --git 
+leptos-rs/start` pulls in the whole framework, it’s important to remember that
+none of this is magic: each layer of that onion can be stripped away and
+reimplemented, configured, or adapted as needed, incrementally.
+
+> Everything that follows will assume you have a good working understanding
+> of the framework. There will be explanations of how some parts of it work
+> or fit together, but these are not docs. They assume you know what I’m
+> talking about.
+
+## The Reactive System: `leptos_reactive`
+
+The reactive system allows you to define dynamic values (signals),
+the relationships between them (derived signals and memos), and the side effects
+that run in response to them (effects).
+
+These concepts are completely independent of the DOM and can be used to drive
+any kind of reactive updates. The reactive system is based on the assumption
+that data is relatively cheap, and side effects are relatively expensive. Its
+goal is to minimize those side effects (like updating the DOM or making a network
+requests) as infrequently as possible.
+
+The reactive system is implemented as a single data structure that exists at
+runtime. In exchange for giving ownership over a value to the reactive system
+(by creating a signal), you receive a `Copy + 'static` identifier for its
+location in the reactive system. This enables most of the ergonomics of storing
+and sharing state, the use of callback closures without lifetime issues, etc.
+This is implemented by storing signals in a slotmap arena. The signal, memo,
+and scope types that are exposed to users simply carry around an index into that
+slotmap.
+
+> Items owned by the reactive system are dropped when the corresponding reactive
+> scope is dropped, i.e., when the component or section of the UI they’re
+> created in is removed. In a sense, Leptos implements a “garbage collector”
+> in which the lifetime of data is tied to the lifetime of the UI, not Rust’s
+> lexical scopes.
+
+## The DOM Renderer: `leptos_dom`
+
+The reactive system can be used to drive any kinds of side effects. One very
+common side effect is calling an imperative method, for example to update the
+DOM.
+
+The entire DOM renderer is built on top of the reactive system. It provides
+a builder pattern that can be used to create DOM elements dynamically.
+
+The renderer assumes, as a convention, that dynamic attributes, classes,
+styles, and children are defined by being passed a `Fn() -> T`, where their
+static equivalents just receive `T`. There’s nothing about this that is
+divinely ordained, but it’s a useful convention because it allows us to use
+zero-overhead derived signals as one of several ways to indicate dynamic
+content.
+
+`leptos_dom` also contains code for server-side rendering of the same
+UI views to HTML, either for out-of-order streaming (`src/ssr.rs`) or
+in-order streaming/async rendering (`src/ssr_in_order.rs`).
+
+## The Macros: `leptos_macro`
+
+It’s entirely possible to write Leptos code with no macros at all. The
+`view` and `component` macros, the most common, can be replaced by
+the builder syntax and simple functions (see the `counter_without_macros`
+example). But the macros enable a JSX-like syntax for describing views.
+
+This package also contains the `Params` derive macro used for typed
+queries and route params in the router.
+
+### Macro-based Optimizations
+
+Leptos 0.0.x was built much more heavily on macros. Taking its cues  
+from SolidJS, the `view` macro emitted different code for CSR, SSR, and
+hydration, optimizing each. The CSR/hydrate versions worked by compiling
+the view to an HTML template string, cloning that `<template>`, and
+traversing the DOM to set up reactivity. The SSR version worked similarly
+by compiling the static parts of the view to strings at compile time,
+reducing the amount of work that needed to be done on each request.
+
+Proc macros are hard, and this system was brittle. 0.1 introduced a
+more robust renderer, including the builder syntax, and rebuilt the `view`
+macro to use that builder syntax instead. It moved the optimized-but-buggy
+CSR version of the macro to a more-limited `template` macro.
+
+The `view` macro now separately optimizes SSR to use the same static-string
+optimizations, which (by our benchmarks) makes Leptos about 3-4x faster
+than similar Rust frontend frameworks in its HTML rendering.
+
+> The optimization is pretty straightforward. Consider the following view:
+>
+> ```rust
+> view! { cx,
+>   <main class="text-center">
+>     <div class="flex-col">
+>       <button>"Click me."</button>
+>       <p class="italic">"Text."</p>
+>     </div>
+>   </main>
+> }
+> ```
+>
+> Internally, with the builder this is something like
+>
+> ```rust
+> Element {
+>   tag: "main",
+>   attrs: vec![("class", "text-center")],
+>   children: vec![
+> 	  Element {
+> 		tag: "div",
+> 		attrs: vec![("class", "flex-col")],
+>       children: vec![
+>         Element {
+> 	        tag: "button",
+> 			attrs: vec![],
+> 			children: vec!["Click me"]
+>         },
+>         Element {
+> 	        tag: "p",
+> 			attrs: vec![("class", "italic")],
+> 			children: vec!["Text"]
+>         }
+>       ]
+> 	  }
+>   ]
+> }
+> ```
+>
+> This is a _bunch_ of small allocations and separate strings,
+> and in early 0.1 versions we used a `SmallVec` for children and
+> attributes and actually caused some stack overflows.
+>
+> But if you look at the view itself you can see that none of this
+> will _ever_ change. So we can actually optimize it at compile
+> time to a single `&'static str`:
+>
+> ```rust
+> r#"<main class="text-center">
+>     <div class="flex-col">
+>       <button>"Click me."</button>
+>       <p class="italic">"Text."</p>
+>     </div>
+>   </main>"#
+> ```
+
+## Server Functions (`leptos_server`, `server_fn`, and `server_fn_macro`)
+
+Server functions are a framework-agnostic shorthand for converting
+a function, whose body can only be run on the server, into an ad hoc
+REST API endpoint, and then generating code on the client to call that
+endpoint when you call the function.
+
+These are inspired by Solid/Bling’s `server$` functions, and there’s
+similar work being done in a number of other JavaScript frameworks.
+
+RPC is not a new idea, but these kinds of server functions may be.
+Specifically, by using web standards (defaulting to `POST`/`GET` requests
+with URL-encoded form data) they allow easy graceful degradation and the
+use of the `<form>` element.
+
+This function is split across three packages so that `server_fn` and
+`server_fn_macro` can be used by other frameworks. `leptos_server`
+includes some Leptos-specific reactive functionality (like actions).
+
+## `leptos`
+
+This package is built on and reexports most of the layers already
+mentioned, and implements a number of control-flow components (`<Show/>`,
+`<ErrorBoundary/>`, `<For/>`, `<Suspense/>`, `<Transition/>`) that use
+public APIs of the other packages.
+
+This is the main entrypoint for users, but is relatively light itself.
+
+## `leptos_meta`
+
+This package exists to allow you to work with tags normally found in
+the `<head>`, from within your components.
+
+It is implemented as a distinct package, rather than part of
+`leptos_dom`, on the principle that “what can be implemented in userland,
+should be.” The framework can be used without it, so it’s not in core.
+
+## `leptos_router`
+
+The router originates as a direct port of `solid-router`, which is the
+origin of most of its terminology, architecture, and route-matching logic.
+
+Subsequent developments (like animated routing, and managing route transitions
+given the lack of `useTransition` in Leptos) have caused it to diverge
+slightly from Solid’s exact code, but it is still very closely related.
+
+The core principle here is “nested routing,” dividing a single page
+into independently-rendered parts. This is described in some detail in the docs.
+
+Like `leptos_meta`, it is implemented as a distinct package, because it
+can be replaced with another router or with none. The framework can be used
+without it, so it’s not in core.
+
+## Server Integrations
+
+The server integrations are the most “frameworky” layer of the whole framework.
+These **do** assume the use of `leptos`, `leptos_router`, and `leptos_meta`.
+They specifically draw routing data from `leptos_router`, and inject the
+metadata from `leptos_meta` into the `<head>` appropriately.
+
+But of course, if you one day create `leptos-helmet` and `leptos-better-router`,
+you can create new server integrations that plug them into the SSR rendering
+methods from `leptos_dom` instead. Everything involved is quite modular.
+
+These packages essentially provide helpers that save the templates and user apps
+from including a huge amount of boilerplate to connect the various other packages
+correctly. Again, early versions of the framework examples are illustrative here
+for reference: they include large amounts of manual SSR route handling, etc.
+
+## `cargo-leptos` helpers
+
+`leptos_config` and `leptos_hot_reload` exist to support two different features
+of `cargo-leptos`, namely its configuration and its view-patching/hot-reloading 
+features.
+
+It’s important to say that the main feature `cargo-leptos` remains its ability
+to conveniently tie together different build tooling, compiling your app to
+WASM for the browser, building the server version, pulling in SASS and
+Tailwind, etc. It is an extremely good build tool, not a magic formula. Each
+of the examples includes instructions for how to run the examples without
+`cargo-leptos`.

CODE_OF_CONDUCT.md

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

CONTRIBUTING.md

@@ -0,0 +1,94 @@
+# Contributing to Leptos
+
+Thanks for your interesting in contributing to Leptos! This is a truly
+community-driven framework, and while we have a central maintainer (@gbj)
+large parts of the renderer, reactive system, and server integrations have
+all been written by other contributors. Contributions are always welcome.
+
+Participation in this community is governed by a [Code of Conduct](./CODE_OF_CONDUCT.md).
+Some of the most active conversations around development take place on our
+[Discord server](https://discord.gg/YdRAhS7eQB).
+
+This guide seeks to
+
+- describe some of the framework’s values (in a technical, not an ethical, sense)
+- provide a high-level overview of how the pieces of the framework fit together
+- orient you to the organization of this repository
+
+## Values
+
+Leptos, as a framework, reflects certain technical values:
+
+- **Expose primitives rather than imposing patterns.** Provide building blocks
+  that users can combine together to build up more complex behavior, rather than
+  requiring users follow certain templates, file formats, etc. e.g., components
+  are defined as functions, rather than a bespoke single-file component format.
+  The reactive system feeds into the rendering system, rather than being defined
+  by it.
+- **Bottom-up over top-down.** If you envision a user’s application as a tree
+  (like an HTML document), push meaning toward the leaves of the tree. e.g., If data
+  needs to be loaded, load it in a granular primitive (resources) rather than a
+  route- or page-level data structure.
+- **Performance by default.** When possible, users should only pay for what they
+  use. e.g., we don’t make all component props reactive by default. This is
+  because doing so would force the overhead of a reactive prop onto props that don’t
+  need to be reactive.
+- **Full-stack performance.** Performance can’t be limited to a single metric,
+  whether that’s a DOM rendering benchmark, WASM binary size, or server response
+  time. Use methods like HTTP streaming and progressive enhancement to enable
+  applications to load, become interactive, and respond as quickly as possible.
+- **Use safe Rust.** There’s no need for `unsafe` Rust in the framework, and
+  avoiding it at all costs reduces the maintenance and testing burden significantly.
+- **Embrace Rust semantics.** Especially in things like UI templating, use Rust
+  semantics or extend them in a predictable way with control-flow components
+  rather than overloading the meaning of Rust terms like `if` or `for` in a
+  framework-specific way.
+- **Enhance ergonomics without obfuscating what’s happening.** This is by far
+  the hardest to achieve. It’s often the case that adding additional layers to
+  improve DX (like a custom build tool and starter templates) comes across as
+  “too magic” to some people who haven’t had to build the same things manually.
+  When possible, make it easier to see how the pieces fit together, without
+  sacrificing the improved DX.
+
+## Processes
+
+We do not have PR templates or formal processes for approving PRs. But there
+are a few guidelines that will make it a better experience for everyone:
+
+- Run `cargo fmt` before submitting your code.
+- Keep PRs limited to addressing one feature or one issue, in general. In some
+  cases (e.g., “reduce allocations in the reactive system”) this may touch a number
+  of different areas, but is still conceptually one thing.
+- If it’s an unsolicited PR not linked to an open issue, please include a
+  specific explanation for what it’s trying to achieve. For example: “When I
+  was trying to deploy my app under _circumstances X_, I found that the way
+  _function Z_ was implemented caused _issue Z_. This PR should fix that by
+  _solution._”
+- Our CI tests every PR against all the existing examples, sometimes requiring
+  compilation for both server and client side, etc. It’s thorough but slow. If
+  you want to run CI locally to reduce frustration, you can do that by installing
+  `cargo-make` and using `cargo make check && cargo make test && cargo make
+check-examples`.
+
+## Before Submitting a PR
+
+We have a fairly extensive CI setup that runs both lints (like `rustfmt` and `clippy`) 
+and tests on PRs. You can run most of these locally if you have `cargo-make` installed.
+
+If you added an example, make sure to add it to the list in `examples/Makefile.toml`.
+
+From the root directory of the repo, run 
+- `cargo +nightly fmt`
+- `cargo +nightly make check`
+- `cargo +nightly make test`
+- `cargo +nightly make check-examples`
+- `cargo +nightly make --profile=github-actions ci`
+
+If you modified an example:
+- `cd examples/your_example`
+- `cargo +nightly fmt -- --config-path ../..`
+- `cargo +nightly make --profile=github-actions verify-flow`
+
+## Architecture
+
+See [ARCHITECTURE.md](./ARCHITECTURE.md).

Cargo.toml

@@ -1,4 +1,5 @@
 [workspace]
+resolver = "2"
 members = [
   # core
   "leptos",
@@ -25,22 +26,22 @@ members = [
 exclude = ["benchmarks", "examples"]
 
 [workspace.package]
-version = "0.3.0-alpha"
+version = "0.4.9"
 
 [workspace.dependencies]
-leptos = { path = "./leptos", default-features = false, version = "0.3.0-alpha" }
-leptos_dom = { path = "./leptos_dom", default-features = false, version = "0.3.0-alpha" }
-leptos_hot_reload = { path = "./leptos_hot_reload", version = "0.3.0-alpha" }
-leptos_macro = { path = "./leptos_macro", default-features = false, version = "0.3.0-alpha" }
-leptos_reactive = { path = "./leptos_reactive", default-features = false, version = "0.3.0-alpha" }
-leptos_server = { path = "./leptos_server", default-features = false, version = "0.3.0-alpha" }
-server_fn = { path = "./server_fn", default-features = false, version = "0.3.0-alpha" }
-server_fn_macro = { path = "./server_fn_macro", default-features = false, version = "0.3.0-alpha" }
-server_fn_macro_default = { path = "./server_fn/server_fn_macro_default", default-features = false, version = "0.3.0-alpha" }
-leptos_config = { path = "./leptos_config", default-features = false, version = "0.3.0-alpha" }
-leptos_router = { path = "./router", version = "0.3.0-alpha" }
-leptos_meta = { path = "./meta", default-features = false, version = "0.3.0-alpha" }
-leptos_integration_utils = { path = "./integrations/utils", version = "0.3.0-alpha" }
+leptos = { path = "./leptos", version = "0.4.9" }
+leptos_dom = { path = "./leptos_dom", version = "0.4.9" }
+leptos_hot_reload = { path = "./leptos_hot_reload", version = "0.4.9" }
+leptos_macro = { path = "./leptos_macro", version = "0.4.9" }
+leptos_reactive = { path = "./leptos_reactive", version = "0.4.9" }
+leptos_server = { path = "./leptos_server", version = "0.4.9" }
+server_fn = { path = "./server_fn", version = "0.4.9" }
+server_fn_macro = { path = "./server_fn_macro", version = "0.4.9" }
+server_fn_macro_default = { path = "./server_fn/server_fn_macro_default", version = "0.4.9" }
+leptos_config = { path = "./leptos_config", version = "0.4.9" }
+leptos_router = { path = "./router", version = "0.4.9" }
+leptos_meta = { path = "./meta", version = "0.4.9" }
+leptos_integration_utils = { path = "./integrations/utils", version = "0.4.9" }
 
 [profile.release]
 codegen-units = 1

Makefile.toml

@@ -3,108 +3,37 @@
 #     cargo install --force cargo-make
 ############
 
-[config]
-# make tasks run at the workspace root
-default_to_workspace = false
-
-[tasks.check]
-clear = true
-dependencies = [
-	"check-all",
-	"check-wasm",
-	"check-all-release",
-	"check-wasm-release",
-]
-
-[tasks.check-all]
-command = "cargo"
-args = ["+nightly", "check-all-features"]
-install_crate = "cargo-all-features"
-
-[tasks.check-wasm]
-clear = true
-dependencies = [{ name = "check-wasm", path = "leptos" }]
-
-[tasks.check-all-release]
-command = "cargo"
-args = ["+nightly", "check-all-features"]
-install_crate = "cargo-all-features"
-
-[tasks.check-wasm-release]
-clear = true
-dependencies = [{ name = "check-wasm-release", path = "leptos" }]
-
-[tasks.check-examples]
-clear = true
-dependencies = [
-	{ name = "check", path = "examples/counter" },
-	{ name = "check", path = "examples/counter_isomorphic" },
-	{ name = "check", path = "examples/counters" },
-	{ name = "check", path = "examples/error_boundary" },
-	{ name = "check", path = "examples/errors_axum" },
-	{ name = "check", path = "examples/fetch" },
-	{ name = "check", path = "examples/hackernews" },
-	{ name = "check", path = "examples/hackernews_axum" },
-	{ name = "check", path = "examples/login_with_token_csr_only" },
-	{ name = "check", path = "examples/parent_child" },
-	{ name = "check", path = "examples/router" },
-	{ name = "check", path = "examples/session_auth_axum" },
-	{ name = "check", path = "examples/slots" },
-	{ name = "check", path = "examples/ssr_modes" },
-	{ name = "check", path = "examples/ssr_modes_axum" },
-	{ name = "check", path = "examples/tailwind" },
-	{ name = "check", path = "examples/tailwind_csr_trunk" },
-	{ name = "check", path = "examples/todo_app_sqlite" },
-	{ name = "check", path = "examples/todo_app_sqlite_axum" },
-	{ name = "check", path = "examples/todo_app_sqlite_viz" },
-	{ name = "check", path = "examples/todomvc" },
-]
+[env]
+CARGO_MAKE_EXTEND_WORKSPACE_MAKEFILE = true
 
 [tasks.check-stable]
+workspace = false
 clear = true
 dependencies = [
 	{ name = "check", path = "examples/counter_without_macros" },
 	{ name = "check", path = "examples/counters_stable" },
 ]
 
-[tasks.test]
-clear = true
-dependencies = ["test-all", "test-leptos_macro-example", "doc-leptos_macro-example"]
-
-[tasks.test-all]
-command = "cargo"
-args = ["+nightly", "test-all-features"]
-install_crate = "cargo-all-features"
-
-[tasks.test-leptos_macro-example]
-description = "Tests the leptos_macro/example to check if macro handles doc comments correctly"
-command = "cargo"
-args = ["+nightly", "test", "--doc"]
-cwd = "leptos_macro/example"
-install_crate = false
-
-[tasks.doc-leptos_macro-example]
-description = "Docs the leptos_macro/example to check if macro handles doc comments correctly"
-command = "cargo"
-args = ["+nightly", "doc"]
-cwd = "leptos_macro/example"
-install_crate = false
-
-[tasks.test-examples]
-description = "Run all unit and web tests for examples"
+[tasks.ci-examples]
+workspace = false
 cwd = "examples"
 command = "cargo"
-args = ["make", "test-unit-and-web"]
+args = ["make", "ci-clean"]
 
-[tasks.verify-examples]
-description = "Run all quality checks and tests for examples"
+[tasks.check-examples]
+workspace = false
 cwd = "examples"
 command = "cargo"
-args = ["make", "verify-flow"]
+args = ["make", "check-clean"]
 
-[env]
-RUSTFLAGS = ""
-LEPTOS_OUTPUT_NAME="ci" # allows examples to check/build without cargo-leptos
+[tasks.build-examples]
+workspace = false
+cwd = "examples"
+command = "cargo"
+args = ["make", "build-clean"]
 
-[env.github-actions]
-RUSTFLAGS = "-D warnings"
+[tasks.clean-examples]
+workspace = false
+cwd = "examples"
+command = "cargo"
+args = ["make", "clean"]

README.md

@@ -8,6 +8,8 @@
 [![Discord](https://img.shields.io/discord/1031524867910148188?color=%237289DA&label=discord)](https://discord.gg/YdRAhS7eQB)
 [![Matrix](https://img.shields.io/badge/Matrix-leptos-grey?logo=matrix&labelColor=white&logoColor=black)](https://matrix.to/#/#leptos:matrix.org)
 
+[Website](https://leptos.dev) | [Book](https://leptos-rs.github.io/leptos/) | [Docs.rs](https://docs.rs/leptos/latest/leptos/) | [Playground](https://codesandbox.io/p/sandbox/leptos-rtfggt?file=%2Fsrc%2Fmain.rs%3A1%2C1) | [Discord](https://discord.gg/YdRAhS7eQB)
+
 # Leptos
 
 ```rust
@@ -66,7 +68,7 @@ Here are some resources for learning more about Leptos:
 
 ## `nightly` Note
 
-Most of the examples assume you’re using `nightly` version of Rust. For this, you can either set your toolchain globally or on per-project basis.
+Most of the examples assume you’re using `nightly` version of Rust and the `nightly` feature of Leptos. To use `nightly` Rust, you can either set your toolchain globally or on per-project basis.
 
 To set `nightly` as a default toolchain for all projects (and add the ability to compile Rust to WebAssembly, if you haven’t already):
 
@@ -84,13 +86,7 @@ channel = "nightly"
 targets = ["wasm32-unknown-unknown"]
 ```
 
-If you’re on `stable`, note the following:
-
-1. You need to enable the `"stable"` flag in `Cargo.toml`: `leptos = { version = "0.2", features = ["stable"] }`
-2. `nightly` enables the function call syntax for accessing and setting signals. If you’re using `stable`,
-   you’ll just call `.get()`, `.set()`, or `.update()` manually. Check out the
-   [`counters_stable` example](https://github.com/leptos-rs/leptos/blob/main/examples/counters_stable/src/main.rs)
-   for examples of the correct API.
+The `nightly` feature enables the function call syntax for accessing and setting signals, as opposed to `.get()` and `.set()`. This leads to a consistent mental model in which accessing a reactive value of any kind (a signal, memo, or derived signal) is always represented as a function call. This is only possible with nightly Rust and the `nightly` feature.
 
 ## `cargo-leptos`
 
@@ -109,7 +105,7 @@ Open browser to [http://localhost:3000/](http://localhost:3000/).
 
 ### What’s up with the name?
 
-_Leptos_ (λεπτός) is an ancient Greek word meaning “thin, light, refine, fine-grained.” To me, a classicist and not a dog owner, it evokes the lightweight reactive system that powers the framework. I've since learned the same word is at the root of the medical term “leptospirosis,” a blood infection that affects humans and animals... My bad. No dogs were harmed in the creation of this framework.
+_Leptos_ (λεπτός) is an ancient Greek word meaning “thin, light, refined, fine-grained.” To me, a classicist and not a dog owner, it evokes the lightweight reactive system that powers the framework. I've since learned the same word is at the root of the medical term “leptospirosis,” a blood infection that affects humans and animals... My bad. No dogs were harmed in the creation of this framework.
 
 ### Is it production ready?
 

benchmarks/Cargo.toml

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

cargo-make/check.toml

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

cargo-make/lint.toml

@@ -0,0 +1,11 @@
+[tasks.lint]
+dependencies = ["check-format-flow", "clippy-each-feature"]
+
+[tasks.check-format]
+env = { LEPTOS_PROJECT_DIRECTORY = "../" }
+args = ["fmt", "--", "--check", "--config-path", "${LEPTOS_PROJECT_DIRECTORY}"]
+
+[tasks.clippy-each-feature]
+dependencies = ["install-clippy"]
+command = "cargo"
+args = ["hack", "clippy", "--all", "--each-feature", "--no-dev-deps"]

cargo-make/main.toml

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

cargo-make/test.toml

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

docs/book/book.toml

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

docs/book/src/01_introduction.md

@@ -17,4 +17,4 @@ understand Leptos.
 
 You can find more detailed docs for each part of the API at [Docs.rs](https://docs.rs/leptos/latest/leptos/).
 
-**The guide is a work in progress.**
+> The source code for the book is available [here](https://github.com/leptos-rs/leptos/tree/main/docs/book). PRs for typos or clarification are always welcome.

docs/book/src/02_getting_started.md

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

docs/book/src/14_create_effect.md

@@ -1,112 +0,0 @@
-# Responding to Changes with `create_effect`
-
-Believe it or not, we’ve made it this far without having mentioned half of the reactive system: effects.
-
-Leptos is built on a fine-grained reactive system, which means that individual reactive values (“signals,” sometimes known as observables) trigger rerunning the code that reacts to them (“effects,” sometimes known as observers). These two halves of the reactive system are inter-dependent. Without effects, signals can change within the reactive system but never be observed in a way that interacts with the outside world. Without signals, effects run once but never again, as there’s no observable value to subscribe to.
-
-[`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(cx, 0);
-let (b, set_b) = create_signal(cx, 0);
-
-create_effect(cx, move |_| {
-  // immediately prints "Value: 0" and subscribes to `a`
-  log::debug!("Value: {}", a());
-});
-```
-
-The effect function is called with an argument containing whatever value it returned the last time it ran. On the initial run, this is `None`.
-
-By default, effects **do not run on the server**. This means you can call browser-specific APIs within the effect function without causing issues. If you need an effect to run on the server, use [`create_isomorphic_effect`](https://docs.rs/leptos_reactive/latest/leptos_reactive/fn.create_isomorphic_effect.html).
-
-## Autotracking and Dynamic Dependencies
-
-If you’re familiar with a framework like React, you might notice one key difference. React and similar frameworks typically require you to pass a “dependency array,” an explicit set of variables that determine when the effect should rerun.
-
-Because Leptos comes from the tradition of synchronous reactive programming, we don’t need this explicit dependency list. Instead, we automatically track dependencies depending on which signals are accessed within the effect.
-
-This has two effects (no pun intended). Dependencies are
-
-1. **Automatic**: You don’t need to maintain a dependency list, or worry about what should or shouldn’t be included. The framework simply tracks which signals might cause the effect to rerun, and handles it for you.
-2. **Dynamic**: The dependency list is cleared and updated every time the effect runs. If your effect contains a conditional (for example), only signals that are used in the current branch are tracked. This means that effects rerun the absolute minimum number of times.
-
-> If this sounds like magic, and if you want a deep dive into how automatic dependency tracking works, [check out this video](https://www.youtube.com/watch?v=GWB3vTWeLd4). (Apologies for the low volume!)
-
-## Effects as Zero-Cost-ish Abstraction
-
-While they’re not a “zero-cost abstraction” in the most technical sense—they require some additional memory use, exist at runtime, etc.—at a higher level, from the perspective of whatever expensive API calls or other work you’re doing within them, effects are a zero-cost abstraction. They rerun the absolute minimum number of times necessary, given how you’ve described them.
-
-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(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(cx, move |_| {
-    log(
-        cx,
-        if use_last() {
-            format!("{} {}", first(), last())
-        } else {
-            first()
-        },
-    )
-});
-```
-
-If `use_last` is `true`, effect should rerun whenever `first`, `last`, or `use_last` changes. But if I toggle `use_last` to `false`, a change in `last` will never cause the full name to change. In fact, `last` will be removed from the dependency list until `use_last` toggles again. This saves us from sending multiple unnecessary requests to the API if I change `last` multiple times while `use_last` is still `false`.
-
-## To `create_effect`, or not to `create_effect`?
-
-Effects are intended to run _side-effects_ of the system, not to synchronize state _within_ the system. In other words: don’t write to signals within effects.
-
-If you need to define a signal that depends on the value of other signals, use a derived signal or [`create_memo`](https://docs.rs/leptos_reactive/latest/leptos_reactive/fn.create_memo.html).
-
-If you need to synchronize some reactive value with the non-reactive world outside—like a web API, the console, the filesystem, or the DOM—create an effect.
-
-> If you’re curious for more information about when you should and shouldn’t use `create_effect`, [check out this video](https://www.youtube.com/watch?v=aQOFJQ2JkvQ) for a more in-depth consideration!
-
-## Effects and Rendering
-
-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(cx, 0);
-
-view! { cx,
-    <p>{count}</p>
-}
-```
-
-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(cx, 0);
-
-// create a DOM element
-let p = create_element("p");
-
-// create an effect to reactively update the text
-create_effect(cx, move |prev_value| {
-    // first, access the signal’s value and convert it to a string
-    let text = count().to_string();
-
-    // if this is different from the previous value, update the node
-    if prev_value != Some(text) {
-        p.set_text_content(&text);
-    }
-
-    // return this value so we can memoize the next update
-    text
-});
-```
-
-Every time `count` is updated, this effect wil rerun. This is what allows reactive, fine-grained updates to the DOM.
-
-[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/serene-thompson-40974n?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A2%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A2%7D%5D)
-
-<iframe src="https://codesandbox.io/p/sandbox/serene-thompson-40974n?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A2%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A2%7D%5D" width="100%" height="1000px" style="max-height: 100vh"></iframe>

docs/book/src/15_global_state.md

@@ -1,8 +1,8 @@
 # Global State Management
 
-So far, we've only been working with local state in components
-We've only seen how to communicate between parent and child components
-But there are also more general ways to manage global state
+So far, we've only been working with local state in components, and we’ve seen how to coordinate state between parent and child components. On occasion, there are times where people look for a more general solution for global state management that can work throughout an application.
+
+In general, **you do not need this chapter.** The typical pattern is to compose your application out of components, each of which manages its own local state, not to store all state in a global structure. However, there are some cases (like theming, saving user settings, or sharing data between components in different parts of your UI) in which you may want to use some kind of global state management.
 
 The three best approaches to global state are
 
@@ -12,19 +12,17 @@ The three best approaches to global state are
 
 ## Option #1: URL as Global State
 
-The next few sections of the tutorial will be about the router.
-So for now, we'll just look at options #2 and #3.
+In many ways, the URL is actually the best way to store global state. It can be accessed from any component, anywhere in your tree. There are native HTML elements like `<form>` and `<a>` that exist solely to update the URL. And it persists across page reloads and between devices; you can share a URL with a friend or send it from your phone to your laptop and any state stored in it will be replicated.
+
+The next few sections of the tutorial will be about the router, and we’ll get much more into these topics.
+
+But for now, we'll just look at options #2 and #3.
 
 ## Option #2: Passing Signals through Context
 
-In virtual DOM libraries like React, using the Context API to manage global
-state is a bad idea: because the entire app exists in a tree, changing
-some value provided high up in the tree can cause the whole app to render.
+In the section on [parent-child communication](view/08_parent_child.md), we saw that you can use `provide_context` to pass signal from a parent component to a child, and `use_context` to read it in the child. But `provide_context` works across any distance. If you want to create a global signal that holds some piece of state, you can provide it and access it via context anywhere in the descendants of the component where you provide it.
 
-In fine-grained reactive libraries like Leptos, this is simply not the case.
-You can create a signal in the root of your app and pass it down to other
-components using provide_context(). Changing it will only cause rerendering
-in the specific places it is actually used, not the whole app.
+A signal provided via context only causes reactive updates where it is read, not in any of the components in between, so it maintains the power of fine-grained reactive updates, even at a distance.
 
 We start by creating a signal in the root of the app and providing it to
 all its children and descendants using `provide_context`.
@@ -81,61 +79,72 @@ fn FancyMath(cx: Scope) -> impl IntoView {
 }
 ```
 
-This kind of “provide a signal in a parent, consume it in a child” should be familiar
-from the chapter on [parent-child interactions](./view/08_parent_child.md). The same
-pattern you use to communicate between parents and children works for grandparents and
-grandchildren, or any ancestors and descendants: in other words, between “global” state
-in the root component of your app and any other components anywhere else in the app.
-
-Because of the fine-grained nature of updates, this is usually all you need. However,
-in some cases with more complex state changes, you may want to use a slightly more
-structured approach to global state.
-
-## Option #3: Create a Global State Struct
-
-You can use this approach to build a single global data structure
-that holds the state for your whole app, and then access it by
-taking fine-grained slices using
-[`create_slice`](https://docs.rs/leptos/latest/leptos/fn.create_slice.html)
-or [`create_memo`](https://docs.rs/leptos/latest/leptos/fn.create_memo.html),
-so that changing one part of the state doesn't cause parts of your
-app that depend on other parts of the state to change.
-
-You can begin by defining a simple state struct:
+Note that this same pattern can be applied to more complex state. If you have multiple fields you want to update independently, you can do that by providing some struct of signals:
 
 ```rust
-#[derive(Default, Clone, Debug)]
+#[derive(Copy, Clone, Debug)]
 struct GlobalState {
-    count: u32,
-    name: String,
+    count: RwSignal<i32>,
+    name: RwSignal<String>
 }
-```
 
-Provide it in the root of your app so it’s available everywhere.
+impl GlobalState {
+    pub fn new(cx: Scope) -> Self {
+        Self {
+            count: create_rw_signal(cx, 0),
+            name: create_rw_signal(cx, "Bob".to_string())
+        }
+    }
+}
 
-```rust
 #[component]
 fn App(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(cx, GlobalState::default());
-    provide_context(cx, state);
+    provide_context(cx, GlobalState::new(cx));
 
-    // ...
+    // etc.
 }
 ```
 
-Then child components can access “slices” of that state with fine-grained
-updates via `create_slice`. Each slice signal only updates when the particular
-piece of the larger struct it accesses updates. This means you can create a single
-root signal, and then take independent, fine-grained slices of it in different
-components, each of which can update without notifying the others of changes.
+## Option #3: Create a Global State Struct and Slices
+
+You may find it cumbersome to wrap each field of a structure in a separate signal like this. In some cases, it can be useful to create a plain struct with non-reactive fields, and then wrap that in a signal.
+
+```rust
+#[derive(Copy, Clone, Debug, Default)]
+struct GlobalState {
+    count: i32,
+    name: String
+}
+
+#[component]
+fn App(cx: Scope) -> impl IntoView {
+    provide_context(cx, create_rw_signal(GlobalState::default()));
+
+    // etc.
+}
+```
+
+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>>(cx);
+view! { cx,
+    <button on:click=move |_| state.update(|n| *n += 1)>"+1"</button>
+    <p>{move || state.with(|state| state.name.clone())}</p>
+}
+```
+
+In this example, clicking the button will cause the text inside `<p>` to be updated, cloning `state.name` again! Because signals are the atomic unit of reactivity, updating any field of the signal triggers updates to everything that depends on the signal.
+
+There’s a better way. You can take fine-grained, reactive slices by using [`create_memo`](https://docs.rs/leptos/latest/leptos/fn.create_memo.html) or [`create_slice`](https://docs.rs/leptos/latest/leptos/fn.create_slice.html) (which uses `create_memo` but also provides a setter). “Memoizing” a value means creating a new reactive value which will only update when it changes. “Memoizing a slice” means creating a new reactive value which will only update when some field of the state struct updates.
+
+Here, instead of reading from the state signal directly, we create “slices” of that state with fine-grained updates via `create_slice`. Each slice signal only updates when the particular piece of the larger struct it accesses updates. This means you can create a single root signal, and then take independent, fine-grained slices of it in different components, each of which can update without notifying the others of changes.
 
 ```rust
 /// A component that updates the count in the global state.
 #[component]
 fn GlobalStateCounter(cx: Scope) -> impl IntoView {
-    let state = use_context::<RwSignal<GlobalState>>(cx).expect("state to have been provided");
+    let state = expect_context::<RwSignal<GlobalState>>(cx);
 
     // `create_slice` lets us create a "lens" into the data
     let (count, set_count) = create_slice(
@@ -169,6 +178,227 @@ somewhere else that only takes `state.name`, clicking the button won’t cause
 that other slice to update. This allows you to combine the benefits of a top-down
 data flow and of fine-grained reactive updates.
 
+> **Note**: There are some significant drawbacks to this approach. Both signals and memos need to own their values, so a memo will need to clone the field’s value on every change. The most natural way to manage state in a framework like Leptos is always to provide signals that are as locally-scoped and fine-grained as they can be, not to hoist everything up into global state. But when you _do_ need some kind of global state, `create_slice` can be a useful tool.
+
 [Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/1-basic-component-forked-8bte19?selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A2%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A2%7D%5D&file=%2Fsrc%2Fmain.rs)
 
-<iframe src="https://codesandbox.io/p/sandbox/1-basic-component-forked-8bte19?selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A2%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A2%7D%5D&file=%2Fsrc%2Fmain.rs" width="100%" height="1000px" style="max-height: 100vh">
+<iframe src="https://codesandbox.io/p/sandbox/1-basic-component-forked-8bte19?selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A2%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A2%7D%5D&file=%2Fsrc%2Fmain.rs" width="100%" height="1000px" style="max-height: 100vh"></iframe>
+
+<details>
+<summary>CodeSandbox Source</summary>
+
+```rust
+use leptos::*;
+
+// So far, we've only been working with local state in components
+// We've only seen how to communicate between parent and child components
+// But there are also more general ways to manage global state
+//
+// The three best approaches to global state are
+// 1. Using the router to drive global state via the URL
+// 2. Passing signals through context
+// 3. Creating a global state struct and creating lenses into it with `create_slice`
+//
+// Option #1: URL as Global State
+// The next few sections of the tutorial will be about the router.
+// So for now, we'll just look at options #2 and #3.
+
+// Option #2: Pass Signals through Context
+//
+// In virtual DOM libraries like React, using the Context API to manage global
+// state is a bad idea: because the entire app exists in a tree, changing
+// some value provided high up in the tree can cause the whole app to render.
+//
+// In fine-grained reactive libraries like Leptos, this is simply not the case.
+// You can create a signal in the root of your app and pass it down to other
+// 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(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(cx, 0);
+    // we'll pass the setter to specific components,
+    // but provide the count itself to the whole app via context
+    provide_context(cx, count);
+
+    view! { cx,
+        <h1>"Option 2: Passing Signals"</h1>
+        // SetterButton is allowed to modify the count
+        <SetterButton set_count/>
+        // These consumers can only read from it
+        // But we could give them write access by passing `set_count` if we wanted
+        <div style="display: flex">
+            <FancyMath/>
+            <ListItems/>
+        </div>
+    }
+}
+
+/// A button that increments our global counter.
+#[component]
+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"
+            </button>
+        </div>
+    }
+}
+
+/// A component that does some "fancy" math with the global count
+#[component]
+fn FancyMath(cx: Scope) -> impl IntoView {
+    // here we consume the global count signal with `use_context`
+    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! { cx,
+        <div class="consumer blue">
+            "The number "
+            <strong>{count}</strong>
+            {move || if is_even() {
+                " is"
+            } else {
+                " is not"
+            }}
+            " even."
+        </div>
+    }
+}
+
+/// A component that shows a list of items generated from the global count.
+#[component]
+fn ListItems(cx: Scope) -> impl IntoView {
+    // again, consume the global count signal with `use_context`
+    let count = use_context::<ReadSignal<u32>>(cx).expect("there to be a `count` signal provided");
+
+    let squares = move || {
+        (0..count())
+            .map(|n| view! { cx, <li>{n}<sup>"2"</sup> " is " {n * n}</li> })
+            .collect::<Vec<_>>()
+    };
+
+    view! { cx,
+        <div class="consumer green">
+            <ul>{squares}</ul>
+        </div>
+    }
+}
+
+// Option #3: Create a Global State Struct
+//
+// You can use this approach to build a single global data structure
+// that holds the state for your whole app, and then access it by
+// taking fine-grained slices using `create_slice` or `create_memo`,
+// so that changing one part of the state doesn't cause parts of your
+// app that depend on other parts of the state to change.
+
+#[derive(Default, Clone, Debug)]
+struct GlobalState {
+    count: u32,
+    name: String,
+}
+
+#[component]
+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(cx, GlobalState::default());
+    provide_context(cx, state);
+
+    view! { cx,
+        <h1>"Option 3: Passing Signals"</h1>
+        <div class="red consumer" style="width: 100%">
+            <h2>"Current Global State"</h2>
+            <pre>
+                {move || {
+                    format!("{:#?}", state.get())
+                }}
+            </pre>
+        </div>
+        <div style="display: flex">
+            <GlobalStateCounter/>
+            <GlobalStateInput/>
+        </div>
+    }
+}
+
+/// A component that updates the count in the global state.
+#[component]
+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
+        |state| state.count,
+        // our setter describes how to mutate that slice, given a new value
+        |state, n| state.count = n,
+    );
+
+    view! { cx,
+        <div class="consumer blue">
+            <button
+                on:click=move |_| {
+                    set_count(count() + 1);
+                }
+            >
+                "Increment Global Count"
+            </button>
+            <br/>
+            <span>"Count is: " {count}</span>
+        </div>
+    }
+}
+
+/// A component that updates the count in the global state.
+#[component]
+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
+        |state| state.name.clone(),
+        // our setter describes how to mutate that slice, given a new value
+        |state, n| state.name = n,
+    );
+
+    view! { cx,
+        <div class="consumer green">
+            <input
+                type="text"
+                prop:value=name
+                on:input=move |ev| {
+                    set_name(event_target_value(&ev));
+                }
+            />
+            <br/>
+            <span>"Name is: " {name}</span>
+        </div>
+    }
+}
+// This `main` function is the entry point into the app
+// It just mounts our component to the <body>
+// Because we defined it as `fn App`, we can now use it in a
+// template as <App/>
+fn main() {
+    leptos::mount_to_body(|cx| view! { cx, <Option2/><Option3/> })
+}
+
+```
+
+</details>
+</preview>

docs/book/src/SUMMARY.md

@@ -12,7 +12,10 @@
   - [Error Handling](./view/07_errors.md)
   - [Parent-Child Communication](./view/08_parent_child.md)
   - [Passing Children to Components](./view/09_component_children.md)
-- [Interlude: Reactivity and Functions](./interlude_functions.md)
+- [Reactivity](./reactivity/README.md)
+  - [Working with Signals](./reactivity/working_with_signals.md)
+  - [Responding to Changes with `create_effect`](./reactivity/14_create_effect.md)
+  - [Interlude: Reactivity and Functions](./reactivity/interlude_functions.md)
 - [Testing](./testing.md)
 - [Async](./async/README.md)
   - [Loading Data with Resources](./async/10_resources.md)
@@ -20,7 +23,6 @@
   - [Transition](./async/12_transition.md)
   - [Actions](./async/13_actions.md)
 - [Interlude: Projecting Children](./interlude_projecting_children.md)
-- [Responding to Changes with `create_effect`](./14_create_effect.md)
 - [Global State Management](./15_global_state.md)
 - [Router](./router/README.md)
   - [Defining `<Routes/>`](./router/16_routes.md)
@@ -29,23 +31,18 @@
   - [`<A/>`](./router/19_a.md)
   - [`<Form/>`](./router/20_form.md)
 - [Interlude: Styling](./interlude_styling.md)
-- [Metadata]()
+- [Metadata](./metadata.md)
 - [Server Side Rendering](./ssr/README.md)
   - [`cargo-leptos`](./ssr/21_cargo_leptos.md)
   - [The Life of a Page Load](./ssr/22_life_cycle.md)
   - [Async Rendering and SSR “Modes”](./ssr/23_ssr_modes.md)
-  - [Hydration Footguns](./ssr/24_hydration_bugs.md)
-- [Server Functions]()
-- [Request/Response]()
-  - [Extractors]()
-    - [Axum]()
-    - [Actix]()
-  - [Headers]()
-  - [Cookies]()
-- [Building Full-Stack Apps]()
-  - [Actions]()
-  - [Forms]()
-  - [`<ActionForm/>`s]()
-  - [Turning off WebAssembly]()
-- [Advanced Reactivity]()
+  - [Hydration Bugs](./ssr/24_hydration_bugs.md)
+- [Working with the Server](./server/README.md)
+  - [Server Functions](./server/25_server_functions.md)
+  - [Extractors](./server/26_extractors.md)
+  - [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)
 - [Appendix: Optimizing WASM Binary Size](./appendix_binary_size.md)

docs/book/src/appendix_binary_size.md

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

docs/book/src/appendix_reactive_graph.md

@@ -0,0 +1,243 @@
+# Appendix: How does the Reactive System Work?
+
+You don’t need to know very much about how the reactive system actually works in order to use the library successfully. But it’s always useful to understand what’s going on behind the scenes once you start working with the framework at an advanced level.
+
+The reactive primitives you use are divided into three sets:
+
+- **Signals** (`ReadSignal`/`WriteSignal`, `RwSignal`, `Resource`, `Trigger`) Values you can actively change to trigger reactive updates.
+- **Computations** (`Memo`s) Values that depend on signals (or other computations) and derive a new reactive value through some pure computation.
+- **Effects** Observers that listen to changes in some signals or computations and run a function, causing some side effect.
+
+Derived signals are a kind of non-primitve computation: as plain closures, they simply allow you to refactor some repeated signal-based computation into a reusable function that can be called in multiple places, but they are not represented in the reactive system itself.
+
+All the other primitives actually exist in the reactive system as nodes in a reactive graph.
+
+Most of the work of the reactive system consists of propagating changes from signals to effects, possibly through some intervening memos.
+
+The assumption of the reactive system is that effects (like rendering to the DOM or making a network request) are orders of magnitude more expensive than things like updating a Rust data structure inside your app.
+
+So the **primary goal** of the reactive system is to **run effects as infrequently as possible**.
+
+Leptos does this through the construction of a reactive graph.
+
+> Leptos’s current reactive system is based heavily on the [Reactively](https://github.com/modderme123/reactively) library for JavaScript. You can read Milo’s article “[Super-Charging Fine-Grained Reactivity](https://dev.to/modderme123/super-charging-fine-grained-reactive-performance-47ph)” for an excellent account of its algorithm, as well as fine-grained reactivity in general—including some beautiful diagrams!
+
+## The Reactive Graph
+
+Signals, memos, and effects all share three characteristics:
+
+- **Value** They have a current value: either the signal’s value, or (for memos and effects) the value returned by the previous run, if any.
+- **Sources** Any other reactive primitives they depend on. (For signals, this is an empty set.)
+- **Subscribers** Any other reactive primitives that depend on them. (For effects, this is an empty set.)
+
+In reality then, signals, memos, and effects are just conventional names for one generic concept of a “node” in a reactive graph. Signals are always “root nodes,” with no sources/parents. Effects are always “leaf nodes,” with no subscribers. Memos typically have both sources and subscribers.
+
+### Simple Dependencies
+
+So imagine the following code:
+
+```rust
+// A
+let (name, set_name) = create_signal(cx, "Alice");
+
+// B
+let name_upper = create_memo(cx, move |_| name.with(|n| n.to_uppercase()));
+
+// C
+create_effect(cx, 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(cx, "Alice");
+
+// B
+let name_upper = create_memo(cx, move |_| name.with(|n| n.to_uppercase()));
+
+// C
+let name_len = create_memo(cx, move |_| name.len());
+
+// D
+create_effect(cx, move |_| {
+	log!("len = {}", name_len());
+});
+
+// E
+create_effect(cx, 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(cx, "Alice");
+
+// B
+let name_upper = create_memo(cx, move |_| name.with(|n| n.to_uppercase()));
+
+// C
+let name_len = create_memo(cx, move |_| name.len());
+
+// D
+create_effect(cx, 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(cx, 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(cx, move |_| {
+  d()
+});
+create_effect(cx, move |_| {
+  engrave_text_into_bar_of_gold(&text());
+});
+```

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

@@ -53,3 +53,89 @@ Resources also provide a `refetch()` method that allows you to manually reload t
 [Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/10-async-resources-4z0qt3?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A3%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A3%7D%5D)
 
 <iframe src="https://codesandbox.io/p/sandbox/10-async-resources-4z0qt3?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A3%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A3%7D%5D" width="100%" height="1000px" style="max-height: 100vh"></iframe>
+
+<details>
+<summary>CodeSandbox Source</summary>
+
+```rust
+use gloo_timers::future::TimeoutFuture;
+use leptos::*;
+
+// Here we define an async function
+// This could be anything: a network request, database read, etc.
+// Here, we just multiply a number by 10
+async fn load_data(value: i32) -> i32 {
+    // fake a one-second delay
+    TimeoutFuture::new(1_000).await;
+    value * 10
+}
+
+#[component]
+fn App(cx: Scope) -> impl IntoView {
+    // this count is our synchronous, local state
+    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
+        // it takes the source signal's value as its argument
+        // and does some async work
+        |value| async move { load_data(value).await },
+    );
+    // whenever the source signal changes, the loader reloads
+
+    // 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(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(cx)
+            .map(|value| format!("Server returned {value:?}"))
+            // This loading state will only show before the first load
+            .unwrap_or_else(|| "Loading...".into())
+    };
+
+    // the resource's loading() method gives us a
+    // signal to indicate whether it's currently loading
+    let loading = async_data.loading();
+    let is_loading = move || if loading() { "Loading..." } else { "Idle." };
+
+    view! { cx,
+        <button
+            on:click=move |_| {
+                set_count.update(|n| *n += 1);
+            }
+        >
+            "Click me"
+        </button>
+        <p>
+            <code>"stable"</code>": " {move || stable.read(cx)}
+        </p>
+        <p>
+            <code>"count"</code>": " {count}
+        </p>
+        <p>
+            <code>"async_value"</code>": "
+            {async_result}
+            <br/>
+            {is_loading}
+        </p>
+    }
+}
+
+fn main() {
+    leptos::mount_to_body(|cx| view! { cx, <App/> })
+}
+
+```
+
+</details>
+</preview>

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

@@ -69,6 +69,89 @@ 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! { cx,
+    <Await
+        // `future` provides the `Future` to be resolved
+        future=|cx| 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>
+
+<details>
+<summary>CodeSandbox Source</summary>
+
+```rust
+use gloo_timers::future::TimeoutFuture;
+use leptos::*;
+
+async fn important_api_call(name: String) -> String {
+    TimeoutFuture::new(1_000).await;
+    name.to_ascii_uppercase()
+}
+
+#[component]
+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! { cx,
+        <input
+            on:input=move |ev| {
+                set_name(event_target_value(&ev));
+            }
+            prop:value=name
+        />
+        <p><code>"name:"</code> {name}</p>
+        <Suspense
+            // the fallback will show whenever a resource
+            // read "under" the suspense is loading
+            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(cx)}
+            </p>
+        </Suspense>
+    }
+}
+
+fn main() {
+    leptos::mount_to_body(|cx| view! { cx, <App/> })
+}
+
+```
+
+</details>
+</preview>

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

@@ -9,3 +9,76 @@ This example shows how you can create a simple tabbed contact list with `<Transi
 [Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/12-transition-sn38sd?selection=%5B%7B%22endColumn%22%3A15%2C%22endLineNumber%22%3A2%2C%22startColumn%22%3A15%2C%22startLineNumber%22%3A2%7D%5D&file=%2Fsrc%2Fmain.rs)
 
 <iframe src="https://codesandbox.io/p/sandbox/12-transition-sn38sd?selection=%5B%7B%22endColumn%22%3A15%2C%22endLineNumber%22%3A2%2C%22startColumn%22%3A15%2C%22startLineNumber%22%3A2%7D%5D&file=%2Fsrc%2Fmain.rs" width="100%" height="1000px" style="max-height: 100vh"></iframe>
+
+<details>
+<summary>CodeSandbox Source</summary>
+
+```rust
+use gloo_timers::future::TimeoutFuture;
+use leptos::*;
+
+async fn important_api_call(id: usize) -> String {
+    TimeoutFuture::new(1_000).await;
+    match id {
+        0 => "Alice",
+        1 => "Bob",
+        2 => "Carol",
+        _ => "User not found",
+    }
+    .to_string()
+}
+
+#[component]
+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(cx, tab, |tab| async move { important_api_call(tab).await });
+
+    view! { cx,
+        <div class="buttons">
+            <button
+                on:click=move |_| set_tab(0)
+                class:selected=move || tab() == 0
+            >
+                "Tab A"
+            </button>
+            <button
+                on:click=move |_| set_tab(1)
+                class:selected=move || tab() == 1
+            >
+                "Tab B"
+            </button>
+            <button
+                on:click=move |_| set_tab(2)
+                class:selected=move || tab() == 2
+            >
+                "Tab C"
+            </button>
+            {move || if user_data.loading().get() {
+                "Loading..."
+            } else {
+                ""
+            }}
+        </div>
+        <Transition
+            // the fallback will show initially
+            // on subsequent reloads, the current child will
+            // continue showing
+            fallback=move || view! { cx, <p>"Loading..."</p> }
+        >
+            <p>
+                {move || user_data.read(cx)}
+            </p>
+        </Transition>
+    }
+}
+
+fn main() {
+    leptos::mount_to_body(|cx| view! { cx, <App/> })
+}
+
+```
+
+</details>
+</preview>

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

@@ -11,7 +11,7 @@ Actions and resources seem similar, but they represent fundamentally different t
 Say we have some `async` function we want to run.
 
 ```rust
-async fn add_todo(new_title: &str) -> Uuid {
+async fn add_todo_request(new_title: &str) -> Uuid {
     /* do some stuff on the server to add a new todo */
 }
 ```
@@ -41,16 +41,16 @@ async fn add_todo(new_title: &str) -> Uuid {
 So in this case, all we need to do to create an action is
 
 ```rust
-let add_todo = create_action(cx, |input: &String| {
+let add_todo_action = create_action(cx, |input: &String| {
     let input = input.to_owned();
-    async move { add_todo(&input).await }
+    async move { add_todo_request(&input).await }
 });
 ```
 
-Rather than calling `add_todo` directly, we’ll call it with `.dispatch()`, as in
+Rather than calling `add_todo_action` directly, we’ll call it with `.dispatch()`, as in
 
 ```rust
-add_todo.dispatch("Some value".to_string());
+add_todo_action.dispatch("Some value".to_string());
 ```
 
 You can do this from an event listener, a timeout, or anywhere; because `.dispatch()` isn’t an `async` function, it can be called from a synchronous context.
@@ -58,9 +58,9 @@ You can do this from an event listener, a timeout, or anywhere; because `.dispat
 Actions provide access to a few signals that synchronize between the asynchronous action you’re calling and the synchronous reactive system:
 
 ```rust
-let submitted = add_todo.input(); // RwSignal<Option<String>>
-let pending = add_todo.pending(); // ReadSignal<bool>
-let todo_id = add_todo.value(); // RwSignal<Option<Uuid>>
+let submitted = add_todo_action.input(); // RwSignal<Option<String>>
+let pending = add_todo_action.pending(); // ReadSignal<bool>
+let todo_id = add_todo_action.value(); // RwSignal<Option<Uuid>>
 ```
 
 This makes it easy to track the current state of your request, show a loading indicator, or do “optimistic UI” based on the assumption that the submission will succeed.
@@ -73,7 +73,7 @@ view! { cx,
         on:submit=move |ev| {
             ev.prevent_default(); // don't reload the page...
             let input = input_ref.get().expect("input to exist");
-            add_todo.dispatch(input.value());
+            add_todo_action.dispatch(input.value());
         }
     >
         <label>
@@ -94,3 +94,83 @@ Now, there’s a chance this all seems a little over-complicated, or maybe too r
 [Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/10-async-resources-forked-hgpfp0?selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A4%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A4%7D%5D&file=%2Fsrc%2Fmain.rs)
 
 <iframe src="https://codesandbox.io/p/sandbox/10-async-resources-forked-hgpfp0?selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A4%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A4%7D%5D&file=%2Fsrc%2Fmain.rs" width="100%" height="1000px" style="max-height: 100vh"></iframe>
+
+<details>
+<summary>CodeSandbox Source</summary>
+
+```rust
+use gloo_timers::future::TimeoutFuture;
+use leptos::{html::Input, *};
+use uuid::Uuid;
+
+// Here we define an async function
+// This could be anything: a network request, database read, etc.
+// Think of it as a mutation: some imperative async action you run,
+// whereas a resource would be some async data you load
+async fn add_todo(text: &str) -> Uuid {
+    _ = text;
+    // fake a one-second delay
+    TimeoutFuture::new(1_000).await;
+    // pretend this is a post ID or something
+    Uuid::new_v4()
+}
+
+#[component]
+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(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
+        let input = input.to_owned();
+        async move { add_todo(&input).await }
+    });
+
+    // actions provide a bunch of synchronous, reactive variables
+    // that tell us different things about the state of the action
+    let submitted = add_todo.input();
+    let pending = add_todo.pending();
+    let todo_id = add_todo.value();
+
+    let input_ref = create_node_ref::<Input>(cx);
+
+    view! { cx,
+        <form
+            on:submit=move |ev| {
+                ev.prevent_default(); // don't reload the page...
+                let input = input_ref.get().expect("input to exist");
+                add_todo.dispatch(input.value());
+            }
+        >
+            <label>
+                "What do you need to do?"
+                <input type="text"
+                    node_ref=input_ref
+                />
+            </label>
+            <button type="submit">"Add Todo"</button>
+        </form>
+        <p>{move || pending().then(|| "Loading...")}</p>
+        <p>
+            "Submitted: "
+            <code>{move || format!("{:#?}", submitted())}</code>
+        </p>
+        <p>
+            "Pending: "
+            <code>{move || format!("{:#?}", pending())}</code>
+        </p>
+        <p>
+            "Todo ID: "
+            <code>{move || format!("{:#?}", todo_id())}</code>
+        </p>
+    }
+}
+
+fn main() {
+    leptos::mount_to_body(|cx| view! { cx, <App/> })
+}
+```
+
+</details>
+</preview>

docs/book/src/async/README.md

@@ -2,8 +2,8 @@
 
 So far we’ve only been working with synchronous users interfaces: You provide some input,
 the app immediately processes it and updates the interface. This is great, but is a tiny
-subset of what web applications do. In particular, most web apps have to deal with some kind
-of asynchronous data loading, usually loading something from an API.
+subset of what web applications do. In particular, most web apps have to deal with some kind of asynchronous data loading, usually loading something from an API.
+
+Asynchronous data is notoriously hard to integrate with the synchronous parts of your code. Leptos provides a cross-platform [`spawn_local`](https://docs.rs/leptos/latest/leptos/fn.spawn_local.html) function that makes it easy to run a `Future`, but there’s much more to it than that.
 
-Asynchronous data is notoriously hard to integrate with the synchronous parts of your code.
 In this chapter, we’ll see how Leptos helps smooth out that process for you.

docs/book/src/deployment.md

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

docs/book/src/interlude_projecting_children.md

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

docs/book/src/metadata.md

@@ -0,0 +1,49 @@
+# Metadata
+
+So far, everything we’ve rendered has been inside the `<body>` of the HTML document. And this makes sense. After all, everything you can see on a web page lives inside the `<body>`.
+
+However, there are plenty of occasions where you might want to update something inside the `<head>` of the document using the same reactive primitives and component patterns you use for your UI.
+
+That’s where the [`leptos_meta`](https://docs.rs/leptos_meta/latest/leptos_meta/) package comes in.
+
+## Metadata Components
+
+`leptos_meta` provides special components that let you inject data from inside components anywhere in your application into the `<head>`:
+
+[`<Title/>`](https://docs.rs/leptos_meta/latest/leptos_meta/fn.Title.html) allows you to set the document’s title from any component. It also takes a `formatter` function that can be used to apply the same format to the title set by other pages. So, for example, if you put `<Title formatter=|text| format!("{text} — My Awesome Site")/>` in your `<App/>` component, and then `<Title text="Page 1"/>` and `<Title text="Page 2"/>` on your routes, you’ll get `Page 1 — My Awesome Site` and `Page 2 — My Awesome Site`.
+
+[`<Link/>`](https://docs.rs/leptos_meta/latest/leptos_meta/fn.Link.html) takes the standard attributes of the `<link>` element.
+
+[`<Stylesheet/>`](https://docs.rs/leptos_meta/latest/leptos_meta/fn.Stylesheet.html) creates a `<link rel="stylesheet">` with the `href` you give.
+
+[`<Style/>`](https://docs.rs/leptos_meta/latest/leptos_meta/fn.Style.html) creates a `<style>` with the children you pass in (usually a string). You can use this to import some custom CSS from another file at compile time `<Style>{include_str!("my_route.css")}</Style>`.
+
+[`<Meta/>`](https://docs.rs/leptos_meta/latest/leptos_meta/fn.Meta.html) lets you set `<meta>` tags with descriptions and other metadata.
+
+## `<Script/>` and `<script>`
+
+`leptos_meta` also provides a [`<Script/>`](https://docs.rs/leptos_meta/latest/leptos_meta/fn.Script.html) component, and it’s worth pausing here for a second. All of the other components we’ve considered inject `<head>`-only elements in the `<head>`. But a `<script>` can also be included in the body.
+
+There’s a very simple way to determine whether you should use a capital-S `<Script/>` component or a lowercase-s `<script>` element: the `<Script/>` component will be rendered in the `<head>`, and the `<script>` element will be rendered wherever in the `<body>` of your user interface you put it in, alongside other normal HTML elements. These cause JavaScript to load and run at different times, so use whichever is appropriate to your needs.
+
+## `<Body/>` and `<Html/>`
+
+There are even a couple elements designed to make semantic HTML and styling easier. [`<Html/>`](https://docs.rs/leptos_meta/latest/leptos_meta/fn.Html.html) lets you set the `lang` and `dir` on your `<html>` tag from your application code. `<Html/>` and [`<Body/>`](https://docs.rs/leptos_meta/latest/leptos_meta/fn.Html.html) both have `class` props that let you set their respective `class` attributes, which is sometimes needed by CSS frameworks for styling.
+
+`<Body/>` and `<Html/>` both also have `attributes` props which can be used to set any number of additional attributes on them via the [`AdditionalAttributes`](https://docs.rs/leptos/latest/leptos/struct.AdditionalAttributes.html) type:
+
+```rust
+<Html
+	lang="he"
+	dir="rtl"
+	attributes=AdditionalAttributes::from(vec![("data-theme", "dark")])
+/>
+```
+
+## Metadata and Server Rendering
+
+Now, some of this is useful in any scenario, but some of it is especially important for search-engine optimization (SEO). Making sure you have things like appropriate `<title>` and `<meta>` tags is crucial. Modern search engine crawlers do handle client-side rendering, i.e., apps that are shipped as an empty `index.html` and rendered entirely in JS/WASM. But they prefer to receive pages in which your app has been rendered to actual HTML, with metadata in the `<head>`.
+
+This is exactly what `leptos_meta` is for. And in fact, during server rendering, this is exactly what it does: collect all the `<head>` content you’ve declared by using its components throughout your application, and then inject it into the actual `<head>`.
+
+But I’m getting ahead of myself. We haven’t actually talked about server-side rendering yet. As a matter of fact... Let’s do that next!

docs/book/src/progressive_enhancement/README.md

@@ -0,0 +1,36 @@
+# Progressive Enhancement (and Graceful Degradation)
+
+I’ve been driving around Boston for about fifteen years. If you don’t know Boston, let me tell you: Massachusetts has some of the most aggressive drivers(and pedestrians!) in the world. I’ve learned to practice what’s sometimes called “defensive driving”: assuming that someone’s about to swerve in front of you at an intersection when you have the right of way, preparing for a pedestrian to cross into the street at any moment, and driving accordingly.
+
+“Progressive enhancement” is the “defensive driving” of web design. Or really, that’s “graceful degradation,” although they’re two sides of the same coin, or the same process, from two different directions.
+
+**Progressive enhancement**, in this context, means beginning with a simple HTML site or application that works for any user who arrives at your page, and gradually enhancing it with layers of additional features: CSS for styling, JavaScript for interactivity, WebAssembly for Rust-powered interactivity; using particular Web APIs for a richer experience if they’re available and as needed.
+
+**Graceful degradation** means handling failure gracefully when parts of that stack of enhancement *aren’t* available. Here are some sources of failure your users might encounter in your app:
+- Their browser doesn’t support WebAssembly because it needs to be updated.
+- Their browser can’t support WebAssembly because browser updates are limited to newer OS versions, which can’t be installed on the device. (Looking at you, Apple.)
+- They have WASM turned off for security or privacy reasons.
+- They have JavaScript turned off for security or privacy reasons.
+- JavaScript isn’t supported on their device (for example, some accessibility devices only support HTML browsing)
+- The JavaScript (or WASM) never arrived at their device because they walked outside and lost WiFi.
+- They stepped onto a subway car after loading the initial page and subsequent navigations can’t load data.
+- ... and so on.
+
+How much of your app still works if one of these holds true? Two of them? Three? 
+
+If the answer is something like “95%... okay, then 90%... okay, then 75%,” that’s graceful degradation. If the answer is “my app shows a blank screen unless everything works correctly,” that’s... rapid unscheduled disassembly.
+
+**Graceful degradation is especially important for WASM apps,** because WASM is the newest and least-likely-to-be-supported of the four languages that run in the browser (HTML, CSS, JS, WASM).
+
+Luckily, we’ve got some tools to help.
+
+## Defensive Design
+
+There are a few practices that can help your apps degrade more gracefully:
+1. **Server-side rendering.** Without SSR, your app simply doesn’t work without both JS and WASM loading. In some cases this may be appropriate (think internal apps gated behind a login) but in others it’s simply broken.
+2. **Native HTML elements.** Use HTML elements that do the things that you want, without additional code: `<a>` for navigation (including to hashes within the page), `<details>` for an accordion, `<form>` to persist information in the URL, etc.
+3. **URL-driven state.** The more of your global state is stored in the URL (as a route param or part of the query string), the more of the page can be generated during server rendering and updated by an `<a>` or a `<form>`, which means that not only navigations but state changes can work without JS/WASM.
+4. **[`SsrMode::PartiallyBlocked` or `SsrMode::InOrder`](https://docs.rs/leptos_router/latest/leptos_router/enum.SsrMode.html).** Out-of-order streaming requires a small amount of inline JS, but can fail if 1) the connection is broken halfway through the response or 2) the client’s device doesn’t support JS. Async streaming will give a complete HTML page, but only after all resources load. In-order streaming begins showing pieces of the page sooner, in top-down order. “Partially-blocked” SSR builds on out-of-order streaming by replacing `<Suspense/>` fragments that read from blocking resources on the server. This adds marginally to the initial response time (because of the `O(n)` string replacement work), in exchange for a more complete initial HTML response. This can be a good choice for situations in which there’s a clear distinction between “more important” and “less important” content, e.g., blog post vs. comments, or product info vs. reviews. If you choose to block on all the content, you’ve essentially recreated async rendering.
+5. **Leaning on `<form>`s.** There’s been a bit of a `<form>` renaissance recently, and it’s no surprise. The ability of a `<form>` to manage complicated `POST` or `GET` requests in an easily-enhanced way makes it a powerful tool for graceful degradation. The example in [the `<Form/>` chapter](../router/20_form.md), for example, would work fine with no JS/WASM: because it uses a `<form method="GET">` to persist state in the URL, it works with pure HTML by making normal HTTP requests and then progressively enhances to use client-side navigations instead.
+
+There’s one final feature of the framework that we haven’t seen yet, and which builds on this characteristic of forms to build powerful applications: the `<ActionForm/>`.

docs/book/src/progressive_enhancement/action_form.md

@@ -0,0 +1,56 @@
+# `<ActionForm/>`
+
+[`<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. 
+
+```rust
+#[server(AddTodo, "/api")]
+pub async fn add_todo(title: String) -> Result<(), ServerFnError> {
+    todo!()
+}
+
+#[component]
+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! { cx,
+		<ActionForm action=add_todo>
+			<label>
+				"Add a Todo"
+				// `title` matches the `title` argument to `add_todo`
+				<input type="text" name="title"/>
+			</label>
+			<input type="submit" value="Add"/>
+		</ActionForm>
+	}
+}
+```
+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
+
+Because the `<ActionForm/>` is just a `<form>`, it fires a `submit` event. You can use either HTML validation, or your own client-side validation logic in an `on:submit`. Just call `ev.prevent_default()` to prevent submission.
+
+The [`FromFormData`](https://docs.rs/leptos_router/latest/leptos_router/trait.FromFormData.html) trait can be helpful here, for attempting to parse your server function’s data type from the submitted form.
+
+```rust
+let on_submit = move |ev| {
+	let data = AddTodo::from_event(&ev);
+	// silly example of validation: if the todo is "nope!", nope it
+	if data.is_err() || data.unwrap().title == "nope!" {
+		// ev.prevent_default() will prevent form submission
+		ev.prevent_default();
+	}
+}
+```

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

@@ -0,0 +1,334 @@
+# Responding to Changes with `create_effect`
+
+We’ve made it this far without having mentioned half of the reactive system: effects.
+
+Reactivity works in two halves: updating individual reactive values (“signals”) notifies the pieces of code that depend on them (“effects”) that they need to run again. These two halves of the reactive system are inter-dependent. Without effects, signals can change within the reactive system but never be observed in a way that interacts with the outside world. Without signals, effects run once but never again, as there’s no observable value to subscribe to. Effects are quite literally “side effects” of the reactive system: they exist to synchronize the reactive system with the non-reactive world outside it.
+
+Hidden behind the whole reactive DOM renderer that we’ve seen so far is a function called `create_effect`.
+
+[`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(cx, 0);
+let (b, set_b) = create_signal(cx, 0);
+
+create_effect(cx, move |_| {
+  // immediately prints "Value: 0" and subscribes to `a`
+  log::debug!("Value: {}", a());
+});
+```
+
+The effect function is called with an argument containing whatever value it returned the last time it ran. On the initial run, this is `None`.
+
+By default, effects **do not run on the server**. This means you can call browser-specific APIs within the effect function without causing issues. If you need an effect to run on the server, use [`create_isomorphic_effect`](https://docs.rs/leptos_reactive/latest/leptos_reactive/fn.create_isomorphic_effect.html).
+
+## Autotracking and Dynamic Dependencies
+
+If you’re familiar with a framework like React, you might notice one key difference. React and similar frameworks typically require you to pass a “dependency array,” an explicit set of variables that determine when the effect should rerun.
+
+Because Leptos comes from the tradition of synchronous reactive programming, we don’t need this explicit dependency list. Instead, we automatically track dependencies depending on which signals are accessed within the effect.
+
+This has two effects (no pun intended). Dependencies are:
+
+1. **Automatic**: You don’t need to maintain a dependency list, or worry about what should or shouldn’t be included. The framework simply tracks which signals might cause the effect to rerun, and handles it for you.
+2. **Dynamic**: The dependency list is cleared and updated every time the effect runs. If your effect contains a conditional (for example), only signals that are used in the current branch are tracked. This means that effects rerun the absolute minimum number of times.
+
+> If this sounds like magic, and if you want a deep dive into how automatic dependency tracking works, [check out this video](https://www.youtube.com/watch?v=GWB3vTWeLd4). (Apologies for the low volume!)
+
+## Effects as Zero-Cost-ish Abstraction
+
+While they’re not a “zero-cost abstraction” in the most technical sense—they require some additional memory use, exist at runtime, etc.—at a higher level, from the perspective of whatever expensive API calls or other work you’re doing within them, effects are a zero-cost abstraction. They rerun the absolute minimum number of times necessary, given how you’ve described them.
+
+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(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(cx, move |_| {
+    log(
+        cx,
+        if use_last() {
+            format!("{} {}", first(), last())
+        } else {
+            first()
+        },
+    )
+});
+```
+
+If `use_last` is `true`, effect should rerun whenever `first`, `last`, or `use_last` changes. But if I toggle `use_last` to `false`, a change in `last` will never cause the full name to change. In fact, `last` will be removed from the dependency list until `use_last` toggles again. This saves us from sending multiple unnecessary requests to the API if I change `last` multiple times while `use_last` is still `false`.
+
+## To `create_effect`, or not to `create_effect`?
+
+Effects are intended to run _side-effects_ of the system, not to synchronize state _within_ the system. In other words: don’t write to signals within effects.
+
+If you need to define a signal that depends on the value of other signals, use a derived signal or [`create_memo`](https://docs.rs/leptos_reactive/latest/leptos_reactive/fn.create_memo.html).
+
+If you need to synchronize some reactive value with the non-reactive world outside—like a web API, the console, the filesystem, or the DOM—create an effect.
+
+> If you’re curious for more information about when you should and shouldn’t use `create_effect`, [check out this video](https://www.youtube.com/watch?v=aQOFJQ2JkvQ) for a more in-depth consideration!
+
+## Effects and Rendering
+
+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(cx, 0);
+
+view! { cx,
+    <p>{count}</p>
+}
+```
+
+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(cx, 0);
+
+// create a DOM element
+let p = create_element("p");
+
+// create an effect to reactively update the text
+create_effect(cx, move |prev_value| {
+    // first, access the signal’s value and convert it to a string
+    let text = count().to_string();
+
+    // if this is different from the previous value, update the node
+    if prev_value != Some(text) {
+        p.set_text_content(&text);
+    }
+
+    // return this value so we can memoize the next update
+    text
+});
+```
+
+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(cx, 0);
+
+let stop = watch(
+    cx,
+    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>
+
+<details>
+<summary>CodeSandbox Source</summary>
+
+```rust
+use leptos::html::Input;
+use leptos::*;
+
+#[component]
+fn App(cx: Scope) -> impl IntoView {
+    // Just making a visible log here
+    // You can ignore this...
+    let log = create_rw_signal::<Vec<String>>(cx, vec![]);
+    let logged = move || log().join("\n");
+    provide_context(cx, log);
+
+    view! { cx,
+        <CreateAnEffect/>
+        <pre>{logged}</pre>
+    }
+}
+
+#[component]
+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(cx, move |_| {
+        log(
+            cx,
+            if use_last() {
+                format!("{}  {}", first(), last())
+            } else {
+                first()
+            },
+        )
+    });
+
+    view! { cx,
+        <h1><code>"create_effect"</code> " Version"</h1>
+        <form>
+            <label>
+                "First Name"
+                <input type="text" name="first" prop:value=first
+                    on:change=move |ev| set_first(event_target_value(&ev))
+                />
+            </label>
+            <label>
+                "Last Name"
+                <input type="text" name="last" prop:value=last
+                    on:change=move |ev| set_last(event_target_value(&ev))
+                />
+            </label>
+            <label>
+                "Show Last Name"
+                <input type="checkbox" name="use_last" prop:checked=use_last
+                    on:change=move |ev| set_use_last(event_target_checked(&ev))
+                />
+            </label>
+        </form>
+    }
+}
+
+#[component]
+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(cx, "      listener");
+        let first = first.get().unwrap();
+        let last = last.get().unwrap();
+        let use_last = use_last.get().unwrap();
+        let this_one = if use_last.checked() {
+            format!("{} {}", first.value(), last.value())
+        } else {
+            first.value()
+        };
+
+        if this_one != prev_name {
+            log(cx, &this_one);
+            prev_name = this_one;
+        }
+    };
+
+    view! { cx,
+        <h1>"Manual Version"</h1>
+        <form on:change=on_change>
+            <label>
+                "First Name"
+                <input type="text" name="first"
+                    node_ref=first
+                />
+            </label>
+            <label>
+                "Last Name"
+                <input type="text" name="last"
+                    node_ref=last
+                />
+            </label>
+            <label>
+                "Show Last Name"
+                <input type="checkbox" name="use_last"
+                    checked
+                    node_ref=use_last
+                />
+            </label>
+        </form>
+    }
+}
+
+#[component]
+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(cx, Option::<String>::None);
+
+    create_effect(cx, move |_| {
+        if !my_value.get().is_empty() {
+            set_optional_my_value(Some(my_value.get()));
+        } else {
+            set_optional_my_value(None);
+        }
+    });*/
+
+    // Do this
+    let my_optional_value =
+        move || (!my_value.with(String::is_empty)).then(|| Some(my_value.get()));
+
+    view! { cx,
+        <input
+            prop:value=my_value
+            on:input= move |ev| set_my_value(event_target_value(&ev))
+        />
+
+        <p>
+            <code>"my_optional_value"</code>
+            " is "
+            <code>
+                <Show
+                    when=move || my_optional_value().is_some()
+                    fallback=|cx| view! { cx, "None" }
+                >
+                    "Some(\"" {my_optional_value().unwrap()} "\")"
+                </Show>
+            </code>
+        </p>
+    }
+}
+
+/*#[component]
+pub fn Show<F, W, IV>(
+    /// The scope the component is running in
+    cx: Scope,
+    /// The components Show wraps
+    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
+    fallback: F,
+) -> impl IntoView
+where
+    W: Fn() -> bool + 'static,
+    F: Fn(Scope) -> IV + 'static,
+    IV: IntoView,
+{
+    let memoized_when = create_memo(cx, move |_| when());
+
+    move || match memoized_when.get() {
+        true => children(cx).into_view(cx),
+        false => fallback(cx).into_view(cx),
+    }
+}*/
+
+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(|cx| view! { cx, <App/> })
+}
+
+```
+
+</details>
+</preview>

docs/book/src/reactivity/README.md

@@ -0,0 +1,5 @@
+# Reactivity
+
+Leptos is built on top of a fine-grained reactive system, designed to run expensive side effects (like rendering something in a browser, or making a network request) as infrequently as possible in response to change, reactive values.
+
+So far we’ve seen signals in action. These chapters will go into a bit more depth, and look at effects, which are the other half of the story.

docs/book/src/reactivity/interlude_functions.md

@@ -68,7 +68,7 @@ pub fn SimpleCounter(cx: Scope) -> impl IntoView {
 
 The `SimpleCounter` function itself runs once. The `value` signal is created once. The framework hands off the `increment` function to the browser as an event listener. When you click the button, the browser calls `increment`, which updates `value` via `set_value`. And that updates the single text node represented in our view by `{value}`.
 
-Closures are key to reactivity. They provide the framework with the ability to rerun the smallest possible unit of your application in responsive to a change.
+Closures are key to reactivity. They provide the framework with the ability to rerun the smallest possible unit of your application in response to a change.
 
 So remember two things:
 

docs/book/src/reactivity/working_with_signals.md

@@ -0,0 +1,106 @@
+# Working with Signals
+
+So far we’ve used some simple examples of [`create_signal`](https://docs.rs/leptos/latest/leptos/fn.create_signal.html), which returns a [`ReadSignal`](https://docs.rs/leptos/latest/leptos/struct.ReadSignal.html) getter and a [`WriteSignal`](https://docs.rs/leptos/latest/leptos/struct.WriteSignal.html) setter.
+
+## Getting and Setting
+
+There are four basic signal operations:
+
+1. [`.get()`](https://docs.rs/leptos/latest/leptos/struct.ReadSignal.html#impl-SignalGet%3CT%3E-for-ReadSignal%3CT%3E) clones the current value of the signal and tracks any future changes to the value reactively.
+2. [`.with()`](https://docs.rs/leptos/latest/leptos/struct.ReadSignal.html#impl-SignalWith%3CT%3E-for-ReadSignal%3CT%3E) takes a function, which receives the current value of the signal by reference (`&T`), and tracks any future changes.
+3. [`.set()`](https://docs.rs/leptos/latest/leptos/struct.WriteSignal.html#impl-SignalSet%3CT%3E-for-WriteSignal%3CT%3E) replaces the current value of the signal and notifies any subscribers that they need to update.
+4. [`.update()`](https://docs.rs/leptos/latest/leptos/struct.WriteSignal.html#impl-SignalUpdate%3CT%3E-for-WriteSignal%3CT%3E) takes a function, which receives a mutable reference to the current value of the signal (`&mut T`), and notifies any subscribers that they need to update. (`.update()` doesn’t return the value returned by the closure, but you can use [`.try_update()`](https://docs.rs/leptos/latest/leptos/trait.SignalUpdate.html#tymethod.try_update) if you need to; for example, if you’re removing an item from a `Vec<_>` and want the removed item.)
+
+Calling a `ReadSignal` as a function is syntax sugar for `.get()`. Calling a `WriteSignal` as a function is syntax sugar for `.set()`. So
+
+```rust
+let (count, set_count) = create_signal(cx, 0);
+set_count(1);
+log!(count());
+```
+
+is the same as
+
+```rust
+let (count, set_count) = create_signal(cx, 0);
+set_count.set(1);
+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)`.
+
+But of course, `.get()` and `.set()` (or the plain function-call forms!) are much nicer syntax.
+
+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(cx, Vec::new());
+if names().is_empty() {
+	set_names(vec!["Alice".to_string()]);
+}
+```
+
+In terms of logic, this is simple enough, but it’s hiding some significant inefficiencies. Remember that `names().is_empty()` is sugar for `names.get().is_empty()`, which clones the value (it’s `names.with(|n| n.clone()).is_empty()`). This means we clone the whole `Vec<String>`, run `is_empty()`, and then immediately throw away the clone.
+
+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(cx, Vec::new());
+if names.with(|names| names.is_empty()) {
+	set_names.update(|names| names.push("Alice".to_string()));
+}
+```
+
+Now our function simply takes `names` by reference to run `is_empty()`, avoiding that clone.
+
+And if you have Clippy on, or if you have sharp eyes, you may notice we can make this even neater:
+
+```rust
+if names.with(Vec::is_empty) {
+	// ...
+}
+```
+
+After all, `.with()` simply takes a function that takes the value by reference. Since `Vec::is_empty` takes `&self`, we can pass it in directly and avoid the unncessary closure.
+
+## 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(cx, 1);
+let derived_signal_double_count = 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.
+
+```rust
+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(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.
+
+In most situations, it’s best to rewrite things such that there’s a clear, top-down data flow based on derived signals or memos. But this isn’t the end of the world.
+
+> I’m intentionally not providing an example here. Read the [`create_effect`](https://docs.rs/leptos/latest/leptos/fn.create_effect.html) docs to figure out how this would work.

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

@@ -24,7 +24,7 @@ use leptos_router::*;
 
 Routing behavior is provided by the [`<Router/>`](https://docs.rs/leptos_router/latest/leptos_router/fn.Router.html) component. This should usually be somewhere near the root of your application, the rest of the app.
 
-> You shouldn’t try to use multiple `<Router/>`s in your app. Remember that the router drives global state: if you have multiple routers, which ones decides what to do when the URL changes?
+> You shouldn’t try to use multiple `<Router/>`s in your app. Remember that the router drives global state: if you have multiple routers, which one decides what to do when the URL changes?
 
 Let’s start with a simple `<App/>` component using the router:
 
@@ -34,7 +34,7 @@ use leptos_router::*;
 
 #[component]
 pub fn App(cx: Scope) -> impl IntoView {
-  view! {
+  view! { cx,
     <Router>
       <nav>
         /* ... */
@@ -59,7 +59,7 @@ use leptos_router::*;
 
 #[component]
 pub fn App(cx: Scope) -> impl IntoView {
-  view! {
+  view! { cx,
     <Router>
       <nav>
         /* ... */
@@ -87,15 +87,17 @@ The `view` is a function that takes a `Scope` and returns a view.
 
 ```rust
 <Routes>
-  <Route path="/" view=|cx| view! { cx, <Home/> }/>
-  <Route path="/users" view=|cx| view! { cx, <Users/> }/>
-  <Route path="/users/:id" view=|cx| view! { cx, <UserProfile/> }/>
-  <Route path="/*any" view=|cx| view! { cx, <NotFound/> }/>
+  <Route path="/" view=Home/>
+  <Route path="/users" view=Users/>
+  <Route path="/users/:id" view=UserProfile/>
+  <Route path="/*any" view=NotFound/>
 </Routes>
 ```
 
-> The router scores each route to see how good a match it is, so you can define your routes in any order.
+> `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.
 
+Note that you can define your routes in any order. The router scores each route to see how good a match it is, rather than simply trying to match them top to bottom.
+
 Simple enough?

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

@@ -4,10 +4,10 @@ We just defined the following set of routes:
 
 ```rust
 <Routes>
-  <Route path="/" view=|cx| view! { cx, <Home /> }/>
-  <Route path="/users" view=|cx| view! { cx, <Users /> }/>
-  <Route path="/users/:id" view=|cx| view! { cx, <UserProfile /> }/>
-  <Route path="/*any" view=|cx| view! { cx, <NotFound /> }/>
+  <Route path="/" view=Home/>
+  <Route path="/users" view=Users/>
+  <Route path="/users/:id" view=UserProfile/>
+  <Route path="/*any" view=NotFound/>
 </Routes>
 ```
 
@@ -17,11 +17,11 @@ Well... you can!
 
 ```rust
 <Routes>
-  <Route path="/" view=|cx| view! { cx, <Home /> }/>
-  <Route path="/users" view=|cx| view! { cx, <Users /> }>
-    <Route path=":id" view=|cx| view! { cx, <UserProfile /> }/>
+  <Route path="/" view=Home/>
+  <Route path="/users" view=Users>
+    <Route path=":id" view=UserProfile/>
   </Route>
-  <Route path="/*any" view=|cx| view! { cx, <NotFound /> }/>
+  <Route path="/*any" view=NotFound/>
 </Routes>
 ```
 
@@ -39,8 +39,8 @@ Let’s look back at our practical example.
 
 ```rust
 <Routes>
-  <Route path="/users" view=|cx| view! { cx, <Users /> }/>
-  <Route path="/users/:id" view=|cx| view! { cx, <UserProfile /> }/>
+  <Route path="/users" view=Users/>
+  <Route path="/users/:id" view=UserProfile/>
 </Routes>
 ```
 
@@ -53,8 +53,8 @@ Let’s say I use nested routes instead:
 
 ```rust
 <Routes>
-  <Route path="/users" view=|cx| view! { cx, <Users /> }>
-    <Route path=":id" view=|cx| view! { cx, <UserProfile /> }/>
+  <Route path="/users" view=Users>
+    <Route path=":id" view=UserProfile/>
   </Route>
 </Routes>
 ```
@@ -68,9 +68,9 @@ I actually need to add a fallback route
 
 ```rust
 <Routes>
-  <Route path="/users" view=|cx| view! { cx, <Users /> }>
-    <Route path=":id" view=|cx| view! { cx, <UserProfile /> }/>
-    <Route path="" view=|cx| view! { cx, <NoUser /> }/>
+  <Route path="/users" view=Users>
+    <Route path=":id" view=UserProfile/>
+    <Route path="" view=NoUser/>
   </Route>
 </Routes>
 ```
@@ -94,8 +94,8 @@ You can easily define this with nested routes
 
 ```rust
 <Routes>
-  <Route path="/contacts" view=|cx| view! { cx, <ContactList/> }>
-    <Route path=":id" view=|cx| view! { cx, <ContactInfo/> }/>
+  <Route path="/contacts" view=ContactList>
+    <Route path=":id" view=ContactInfo/>
     <Route path="" view=|cx| view! { cx,
       <p>"Select a contact to view more info."</p>
     }/>
@@ -107,11 +107,11 @@ You can go even deeper. Say you want to have tabs for each contact’s address,
 
 ```rust
 <Routes>
-  <Route path="/contacts" view=|cx| view! { cx, <ContactList/> }>
-    <Route path=":id" view=|cx| view! { cx, <ContactInfo/> }>
-      <Route path="" view=|cx| view! { cx, <EmailAndPhone/> }/>
-      <Route path="address" view=|cx| view! { cx, <Address/> }/>
-      <Route path="messages" view=|cx| view! { cx, <Messages/> }/>
+  <Route path="/contacts" view=ContactList>
+    <Route path=":id" view=ContactInfo>
+      <Route path="" view=EmailAndPhone/>
+      <Route path="address" view=Address/>
+      <Route path="messages" view=Messages/>
     </Route>
     <Route path="" view=|cx| view! { cx,
       <p>"Select a contact to view more info."</p>
@@ -124,7 +124,7 @@ You can go even deeper. Say you want to have tabs for each contact’s address,
 
 ## `<Outlet/>`
 
-Parent routes do not automatically render their nested routes. After all, they are just components; they don’t know exactly where they should render their children, and “just stick at at the end of the parent component” is not a great answer.
+Parent routes do not automatically render their nested routes. After all, they are just components; they don’t know exactly where they should render their children, and “just stick it at the end of the parent component” is not a great answer.
 
 Instead, you tell a parent component where to render any nested components with an `<Outlet/>` component. The `<Outlet/>` simply renders one of two things:
 
@@ -170,3 +170,118 @@ In fact, in this case, we don’t even need to rerender the `<Contact/>` compone
 [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)
 
 <iframe src="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" width="100%" height="1000px" style="max-height: 100vh"></iframe>
+
+<details>
+<summary>CodeSandbox Source</summary>
+
+```rust
+use leptos::*;
+use leptos_router::*;
+
+#[component]
+fn App(cx: Scope) -> impl IntoView {
+    view! { cx,
+        <Router>
+            <h1>"Contact App"</h1>
+            // this <nav> will show on every routes,
+            // because it's outside the <Routes/>
+            // note: we can just use normal <a> tags
+            // and the router will use client-side navigation
+            <nav>
+                <h2>"Navigation"</h2>
+                <a href="/">"Home"</a>
+                <a href="/contacts">"Contacts"</a>
+            </nav>
+            <main>
+                <Routes>
+                    // / just has an un-nested "Home"
+                    <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=|cx| view! { cx,
+                                <div class="tab">
+                                    "(Contact Info)"
+                                </div>
+                            }/>
+                            <Route path="conversations" view=|cx| view! { cx,
+                                <div class="tab">
+                                    "(Conversations)"
+                                </div>
+                            }/>
+                        </Route>
+                        // if no id specified, fall back
+                        <Route path="" view=|cx| view! { cx,
+                            <div class="select-user">
+                                "Select a user to view contact info."
+                            </div>
+                        }/>
+                    </Route>
+                </Routes>
+            </main>
+        </Router>
+    }
+}
+
+#[component]
+fn ContactList(cx: Scope) -> impl IntoView {
+    view! { cx,
+        <div class="contact-list">
+            // here's our contact list component itself
+            <div class="contact-list-contacts">
+                <h3>"Contacts"</h3>
+                <A href="alice">"Alice"</A>
+                <A href="bob">"Bob"</A>
+                <A href="steve">"Steve"</A>
+            </div>
+
+            // <Outlet/> will show the nested child route
+            // we can position this outlet wherever we want
+            // within the layout
+            <Outlet/>
+        </div>
+    }
+}
+
+#[component]
+fn ContactInfo(cx: Scope) -> impl IntoView {
+    // we can access the :id param reactively with `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
+    let name = move || match id().as_str() {
+        "alice" => "Alice",
+        "bob" => "Bob",
+        "steve" => "Steve",
+        _ => "User not found.",
+    };
+
+    view! { cx,
+        <div class="contact-info">
+            <h4>{name}</h4>
+            <div class="tabs">
+                <A href="" exact=true>"Contact Info"</A>
+                <A href="conversations">"Conversations"</A>
+            </div>
+
+            // <Outlet/> here is the tabs that are nested
+            // underneath the /contacts/:id route
+            <Outlet/>
+        </div>
+    }
+}
+
+fn main() {
+    leptos::mount_to_body(|cx| view! { cx, <App/> })
+}
+
+```
+
+</details>
+</preview>

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

@@ -36,10 +36,18 @@ struct ContactSearch {
 ```
 
 > Note: The `Params` derive macro is located at `leptos::Params`, and the `Params` trait is at `leptos_router::Params`. If you avoid using glob imports like `use leptos::*;`, make sure you’re importing the right one for the derive macro.
+>
+> If you are not using the `nightly` feature, you will get the error
+>
+> ```
+> no function or associated item named `into_param` found for struct `std::string::String` in the current scope
+> ```
+>
+> At the moment, supporting both `T: FromStr` and `Option<T>` for typed params requires a nightly feature. You can fix this by simply changing the struct to use `q: Option<String>` instead of `q: String`.
 
 Now we can use them in a component. Imagine a URL that has both params and a query, like `/contacts/:id?q=Search`.
 
-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.
+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>(cx);
@@ -70,10 +78,126 @@ let id = move || {
 This can get a little messy: deriving a signal that wraps an `Option<_>` or `Result<_>` can involve a couple steps. But it’s worth doing this for two reasons:
 
 1. It’s correct, i.e., it forces you to consider the cases, “What if the user doesn’t pass a value for this query field? What if they pass an invalid value?”
-2. It’s performant. Specifically, when you navigate between different paths that match the same `<Route/>` with only params or the query changing, you can get fine-grained updates to different parts of your app without rerendering. For example, navigating between different contacts in our contact-list example does a targeted update to the name field (and eventually contact info) without needing to replacing or rerender the wrapping `<Contact/>`. This is what fine-grained reactivity is for.
+2. It’s performant. Specifically, when you navigate between different paths that match the same `<Route/>` with only params or the query changing, you can get fine-grained updates to different parts of your app without rerendering. For example, navigating between different contacts in our contact-list example does a targeted update to the name field (and eventually contact info) without needing to replace or rerender the wrapping `<Contact/>`. This is what fine-grained reactivity is for.
 
-> This is the same example from the previous section. The router is such an integrated system that it makes sense to provide a single example highlighting multiple features, even if we haven’t explain them all yet.
+> This is the same example from the previous section. The router is such an integrated system that it makes sense to provide a single example highlighting multiple features, even if we haven’t explained them all yet.
 
 [Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/16-router-fy4tjv?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A3%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A3%7D%5D)
 
 <iframe src="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" width="100%" height="1000px" style="max-height: 100vh"></iframe>
+
+<details>
+<summary>CodeSandbox Source</summary>
+
+```rust
+use leptos::*;
+use leptos_router::*;
+
+#[component]
+fn App(cx: Scope) -> impl IntoView {
+    view! { cx,
+        <Router>
+            <h1>"Contact App"</h1>
+            // this <nav> will show on every routes,
+            // because it's outside the <Routes/>
+            // note: we can just use normal <a> tags
+            // and the router will use client-side navigation
+            <nav>
+                <h2>"Navigation"</h2>
+                <a href="/">"Home"</a>
+                <a href="/contacts">"Contacts"</a>
+            </nav>
+            <main>
+                <Routes>
+                    // / just has an un-nested "Home"
+                    <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=|cx| view! { cx,
+                                <div class="tab">
+                                    "(Contact Info)"
+                                </div>
+                            }/>
+                            <Route path="conversations" view=|cx| view! { cx,
+                                <div class="tab">
+                                    "(Conversations)"
+                                </div>
+                            }/>
+                        </Route>
+                        // if no id specified, fall back
+                        <Route path="" view=|cx| view! { cx,
+                            <div class="select-user">
+                                "Select a user to view contact info."
+                            </div>
+                        }/>
+                    </Route>
+                </Routes>
+            </main>
+        </Router>
+    }
+}
+
+#[component]
+fn ContactList(cx: Scope) -> impl IntoView {
+    view! { cx,
+        <div class="contact-list">
+            // here's our contact list component itself
+            <div class="contact-list-contacts">
+                <h3>"Contacts"</h3>
+                <A href="alice">"Alice"</A>
+                <A href="bob">"Bob"</A>
+                <A href="steve">"Steve"</A>
+            </div>
+
+            // <Outlet/> will show the nested child route
+            // we can position this outlet wherever we want
+            // within the layout
+            <Outlet/>
+        </div>
+    }
+}
+
+#[component]
+fn ContactInfo(cx: Scope) -> impl IntoView {
+    // we can access the :id param reactively with `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
+    let name = move || match id().as_str() {
+        "alice" => "Alice",
+        "bob" => "Bob",
+        "steve" => "Steve",
+        _ => "User not found.",
+    };
+
+    view! { cx,
+        <div class="contact-info">
+            <h4>{name}</h4>
+            <div class="tabs">
+                <A href="" exact=true>"Contact Info"</A>
+                <A href="conversations">"Conversations"</A>
+            </div>
+
+            // <Outlet/> here is the tabs that are nested
+            // underneath the /contacts/:id route
+            <Outlet/>
+        </div>
+    }
+}
+
+fn main() {
+    leptos::mount_to_body(|cx| view! { cx, <App/> })
+}
+
+```
+
+</details>
+</preview>

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

@@ -11,13 +11,145 @@ The router will bail out of handling an `<a>` click under a number of situations
 
 In other words, the router will only try to do a client-side navigation when it’s pretty sure it can handle it, and it will upgrade every `<a>` element to get this special behavior.
 
+> This also means that if you need to opt out of client-side routing, you can do so easily. For example, if you have a link to another page on the same domain, but which isn’t part of your Leptos app, you can just use `<a rel="external">` to tell the router it isn’t something it can handle.
+
 The router also provides an [`<A>`](https://docs.rs/leptos_router/latest/leptos_router/fn.A.html) component, which does two additional things:
 
 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(cx);
+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)
 
 <iframe src="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" width="100%" height="1000px" style="max-height: 100vh"></iframe>
+
+<details>
+<summary>CodeSandbox Source</summary>
+
+```rust
+use leptos::*;
+use leptos_router::*;
+
+#[component]
+fn App(cx: Scope) -> impl IntoView {
+    view! { cx,
+        <Router>
+            <h1>"Contact App"</h1>
+            // this <nav> will show on every routes,
+            // because it's outside the <Routes/>
+            // note: we can just use normal <a> tags
+            // and the router will use client-side navigation
+            <nav>
+                <h2>"Navigation"</h2>
+                <a href="/">"Home"</a>
+                <a href="/contacts">"Contacts"</a>
+            </nav>
+            <main>
+                <Routes>
+                    // / just has an un-nested "Home"
+                    <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=|cx| view! { cx,
+                                <div class="tab">
+                                    "(Contact Info)"
+                                </div>
+                            }/>
+                            <Route path="conversations" view=|cx| view! { cx,
+                                <div class="tab">
+                                    "(Conversations)"
+                                </div>
+                            }/>
+                        </Route>
+                        // if no id specified, fall back
+                        <Route path="" view=|cx| view! { cx,
+                            <div class="select-user">
+                                "Select a user to view contact info."
+                            </div>
+                        }/>
+                    </Route>
+                </Routes>
+            </main>
+        </Router>
+    }
+}
+
+#[component]
+fn ContactList(cx: Scope) -> impl IntoView {
+    view! { cx,
+        <div class="contact-list">
+            // here's our contact list component itself
+            <div class="contact-list-contacts">
+                <h3>"Contacts"</h3>
+                <A href="alice">"Alice"</A>
+                <A href="bob">"Bob"</A>
+                <A href="steve">"Steve"</A>
+            </div>
+
+            // <Outlet/> will show the nested child route
+            // we can position this outlet wherever we want
+            // within the layout
+            <Outlet/>
+        </div>
+    }
+}
+
+#[component]
+fn ContactInfo(cx: Scope) -> impl IntoView {
+    // we can access the :id param reactively with `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
+    let name = move || match id().as_str() {
+        "alice" => "Alice",
+        "bob" => "Bob",
+        "steve" => "Steve",
+        _ => "User not found.",
+    };
+
+    view! { cx,
+        <div class="contact-info">
+            <h4>{name}</h4>
+            <div class="tabs">
+                <A href="" exact=true>"Contact Info"</A>
+                <A href="conversations">"Conversations"</A>
+            </div>
+
+            // <Outlet/> here is the tabs that are nested
+            // underneath the /contacts/:id route
+            <Outlet/>
+        </div>
+    }
+}
+
+fn main() {
+    leptos::mount_to_body(|cx| view! { cx, <App/> })
+}
+
+```
+
+</details>
+</preview>

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

@@ -1,12 +1,12 @@
 # The `<Form/>` Component
 
-Links and forms sometimes seem completely unrelated. But in fact, they work in very similar ways.
+Links and forms sometimes seem completely unrelated. But, in fact, they work in very similar ways.
 
 In plain HTML, there are three ways to navigate to another page:
 
-1. An `<a>` element that links to another page. Navigates to the URL in its `href` attribute with the `GET` HTTP method.
-2. A `<form method="GET">`. Navigates to the URL in its `action` attribute with the `GET` HTTP method and the form data from its inputs encoded in the URL query string.
-3. A `<form method="POST">`. Navigates to the URL in its `action` attribute with the `POST` HTTP method and the form data from its inputs encoded in the body of the request.
+1. An `<a>` element that links to another page: Navigates to the URL in its `href` attribute with the `GET` HTTP method.
+2. A `<form method="GET">`: Navigates to the URL in its `action` attribute with the `GET` HTTP method and the form data from its inputs encoded in the URL query string.
+3. A `<form method="POST">`: Navigates to the URL in its `action` attribute with the `POST` HTTP method and the form data from its inputs encoded in the body of the request.
 
 Since we have a client-side router, we can do client-side link navigations without reloading the page, i.e., without a full round-trip to the server and back. It makes sense that we can do client-side form navigations in the same way.
 
@@ -65,3 +65,117 @@ You’ll notice that this version drops the `Submit` button. Instead, we add an
 [Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/16-router-forked-hrrt3h?file=%2Fsrc%2Fmain.rs)
 
 <iframe src="https://codesandbox.io/p/sandbox/16-router-forked-hrrt3h?file=%2Fsrc%2Fmain.rs" width="100%" height="1000px" style="max-height: 100vh"></iframe>
+
+<details>
+<summary>CodeSandbox Source</summary>
+
+```rust
+use leptos::*;
+use leptos_router::*;
+
+#[component]
+fn App(cx: Scope) -> impl IntoView {
+    view! { cx,
+        <Router>
+            <h1><code>"<Form/>"</code></h1>
+            <main>
+                <Routes>
+                    <Route path="" view=FormExample/>
+                </Routes>
+            </main>
+        </Router>
+    }
+}
+
+#[component]
+pub fn FormExample(cx: Scope) -> impl IntoView {
+    // reactive access to URL query
+    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! { cx,
+        // read out the URL query strings
+        <table>
+            <tr>
+                <td><code>"name"</code></td>
+                <td>{name}</td>
+            </tr>
+            <tr>
+                <td><code>"number"</code></td>
+                <td>{number}</td>
+            </tr>
+            <tr>
+                <td><code>"select"</code></td>
+                <td>{select}</td>
+            </tr>
+        </table>
+        // <Form/> will navigate whenever submitted
+        <h2>"Manual Submission"</h2>
+        <Form method="GET" action="">
+            // input names determine query string key
+            <input type="text" name="name" value=name/>
+            <input type="number" name="number" value=number/>
+            <select name="select">
+                // `selected` will set which starts as selected
+                <option selected=move || select() == "A">
+                    "A"
+                </option>
+                <option selected=move || select() == "B">
+                    "B"
+                </option>
+                <option selected=move || select() == "C">
+                    "C"
+                </option>
+            </select>
+            // submitting should cause a client-side
+            // navigation, not a full reload
+            <input type="submit"/>
+        </Form>
+        // This <Form/> uses some JavaScript to submit
+        // on every input
+        <h2>"Automatic Submission"</h2>
+        <Form method="GET" action="">
+            <input
+                type="text"
+                name="name"
+                value=name
+                // this oninput attribute will cause the
+                // form to submit on every input to the field
+                oninput="this.form.requestSubmit()"
+            />
+            <input
+                type="number"
+                name="number"
+                value=number
+                oninput="this.form.requestSubmit()"
+            />
+            <select name="select"
+                onchange="this.form.requestSubmit()"
+            >
+                <option selected=move || select() == "A">
+                    "A"
+                </option>
+                <option selected=move || select() == "B">
+                    "B"
+                </option>
+                <option selected=move || select() == "C">
+                    "C"
+                </option>
+            </select>
+            // submitting should cause a client-side
+            // navigation, not a full reload
+            <input type="submit"/>
+        </Form>
+    }
+}
+
+fn main() {
+    leptos::mount_to_body(|cx| view! { cx, <App/> })
+}
+
+```
+
+</details>
+</preview>

docs/book/src/router/README.md

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

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

@@ -0,0 +1,124 @@
+# Server Functions
+
+If you’re creating anything beyond a toy app, you’ll need to run code on the server all the time: reading from or writing to a database that only runs on the server, running expensive computations using libraries you don’t want to ship down to the client, accessing APIs that need to be called from the server rather than the client for CORS reasons or because you need a secret API key that’s stored on the server and definitely shouldn’t be shipped down to a user’s browser.
+
+Traditionally, this is done by separating your server and client code, and by setting up something like a REST API or GraphQL API to allow your client to fetch and mutate data on the server. This is fine, but it requires you to write and maintain your code in multiple separate places (client-side code for fetching, server-side functions to run), as well as creating a third thing to manage, which is the API contract between the two.
+
+Leptos is one of a number of modern frameworks that introduce the concept of **server functions**. Server functions have two key characteristics:
+
+1. Server functions are **co-located** with your component code, so that you can organize your work by feature, not by technology. For example, you might have a “dark mode” feature that should persist a user’s dark/light mode preference across sessions, and be applied during server rendering so there’s no flicker. This requires a component that needs to be interactive on the client, and some work to be done on the server (setting a cookie, maybe even storing a user in a database.) Traditionally, this feature might end up being split between two different locations in your code, one in your “frontend” and one in your “backend.” With server functions, you’ll probably just write them both in one `dark_mode.rs` and forget about it.
+2. Server functions are **isomorphic**, i.e., they can be called either from the server or the browser. This is done by generating code differently for the two platforms. On the server, a server function simply runs. In the browser, the server function’s body is replaced with a stub that actually makes a fetch request to the server, serializing the arguments into the request and deserializing the return value from the response. But on either end, the function can simply be called: you can create an `add_todo` function that writes to your database, and simply call it from a click handler on a button in the browser!
+
+## Using Server Functions
+
+Actually, I kind of like that example. What would it look like? It’s pretty simple, actually.
+
+```rust
+// todo.rs
+
+#[server(AddTodo, "/api")]
+pub async fn add_todo(title: String) -> Result<(), ServerFnError> {
+    let mut conn = db().await?;
+
+    match sqlx::query("INSERT INTO todos (title, completed) VALUES ($1, false)")
+        .bind(title)
+        .execute(&mut conn)
+        .await
+    {
+        Ok(_row) => Ok(()),
+        Err(e) => Err(ServerFnError::ServerError(e.to_string())),
+    }
+}
+
+#[component]
+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;
+            });
+        }>
+            "Add Todo"
+        </button>
+	}
+}
+```
+
+You’ll notice a couple things here right away:
+
+- Server functions can use server-only dependencies, like `sqlx`, and can access server-only resources, like our database.
+- Server functions are `async`. Even if they only did synchronous work on the server, the function signature would still need to be `async`, because calling them from the browser _must_ be asynchronous.
+- Server functions return `Result<T, ServerFnError>`. Again, even if they only do infallible work on the server, this is true, because `ServerFnError`’s variants include the various things that can be wrong during the process of making a network request.
+- Server functions can be called from the client. Take a look at our click handler. This is code that will _only ever_ run on the client. But it can call the function `add_todo` (using `spawn_local` to run the `Future`) as if it were an ordinary async function:
+
+```rust
+move |_| {
+	spawn_local(async {
+		add_todo("So much to do!".to_string()).await;
+	});
+}
+```
+
+- Server functions are top-level functions defined with `fn`. Unlike event listeners, derived signals, and most everything else in Leptos, they are not closures! As `fn` calls, they have no access to the reactive state of your app or anything else that is not passed in as an argument. And again, this makes perfect sense: When you make a request to the server, the server doesn’t have access to client state unless you send it explicitly. (Otherwise we’d have to serialize the whole reactive system and send it across the wire with every request, which—while it served classic ASP for a while—is a really bad idea.)
+- Server function arguments and return values both need to be serializable with `serde`. Again, hopefully this makes sense: while function arguments in general don’t need to be serialized, calling a server function from the browser means serializing the arguments and sending them over HTTP.
+
+There are a few things to note about the way you define a server function, too.
+
+- Server functions are created by using the [`#[server]` macro](https://docs.rs/leptos_server/latest/leptos_server/index.html#server) to annotate a top-level function, which can be defined anywhere.
+- We provide the macro a type name. The type name is used internally as a container to hold, serialize, and deserialize the arguments.
+- 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 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:
+
+```rust
+#[server(AddTodo, "/api", "Url")]
+#[server(AddTodo, "/api", "GetJson")]
+#[server(AddTodo, "/api", "Cbor")]
+#[server(AddTodo, "/api", "GetCbor")]
+```
+
+The four options use different combinations of HTTP verbs and encoding methods:
+
+| Name              | Method | Request     | Response |
+| ----------------- | ------ | ----------- | -------- |
+| **Url** (default) | POST   | URL encoded | JSON     |
+| **GetJson**       | GET    | URL encoded | JSON     |
+| **Cbor**          | POST   | CBOR        | CBOR     |
+| **GetCbor**       | GET    | URL encoded | CBOR     |
+
+In other words, you have two choices:
+
+- `GET` or `POST`? This has implications for things like browser or CDN caching; while `POST` requests should not be cached, `GET` requests can be.
+- Plain text (arguments sent with URL/form encoding, results sent as JSON) or a binary format (CBOR, encoded as a base64 string)?
+
+**But remember**: Leptos will handle all the details of this encoding and decoding for you. When you use a server function, it looks just like calling any other asynchronous function!
+
+> **Why not `PUT` or `DELETE`? Why URL/form encoding, and not JSON?**
+>
+> These are reasonable questions. Much of the web is built on REST API patterns that encourage the use of semantic HTTP methods like `DELETE` to delete an item from a database, and many devs are accustomed to sending data to APIs in the JSON format.
+> 
+> The reason we use `POST` or `GET` with URL-encoded data by default is the `<form>` support. For better or for worse, HTML forms don’t support `PUT` or `DELETE`, and they don’t support sending JSON. This means that if you use anything but a `GET` or `POST` request with URL-encoded data, it can only work once WASM has loaded. As we’ll see [in a later chapter](../progressive_enhancement), this isn’t always a great idea.
+> 
+> The CBOR encoding is suported for historical reasons; an earlier version of server functions used a URL encoding that didn’t support nested objects like structs or vectors as server function arguments, which CBOR did. But note that the CBOR forms encounter the same issue as `PUT`, `DELETE`, or JSON: they do not degrade gracefully if the WASM version of your app is not available.
+
+## An Important Note on Security
+
+Server functions are a cool technology, but it’s very important to remember. **Server functions are not magic; they’re syntax sugar for defining a public API.** The _body_ of a server function is never made public; it’s just part of your server binary. But the server function is a publicly accessible API endpoint, and it’s return value is just a JSON or similar blob. You should _never_ return something sensitive from a server function.
+
+## Integrating Server Functions with Leptos
+
+So far, everything I’ve said is actually framework agnostic. (And in fact, the Leptos server function crate has been integrated into Dioxus as well!) Server functions are simply a way of defining a function-like RPC call that leans on Web standards like HTTP requests and URL encoding.
+
+But in a way, they also provide the last missing primitive in our story so far. Because a server function is just a plain Rust async function, it integrates perfectly with the async Leptos primitives we discussed [earlier](https://leptos-rs.github.io/leptos/async/index.html). So you can easily integrate your server functions with the rest of your applications:
+
+- Create **resources** that call the server function to load data from the server
+- Read these resources under `<Suspense/>` or `<Transition/>` to enable streaming SSR and fallback states while data loads.
+- Create **actions** that call the server function to mutate data on the server
+
+The final section of this book will make this a little more concrete by introducing patterns that use progressively-enhanced HTML forms to run these server actions.
+
+But in the next few chapters, we’ll actually take a look at some of the details of what you might want to do with your server functions, including the best ways to integrate with the powerful extractors provided by the Actix and Axum server frameworks.

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

@@ -0,0 +1,87 @@
+# Extractors
+
+The server functions we looked at in the last chapter showed how to run code on the server, and integrate it with the user interface you’re rendering in the browser. But they didn’t show you much about how to actually use your server to its full potential.
+
+## Server Frameworks
+
+We call Leptos a “full-stack” framework, but “full-stack” is always a misnomer (after all, it never means everything from the browser to your power company.) For us, “full stack” means that your Leptos app can run in the browser, and can run on the server, and can integrate the two, drawing together the unique features available in each; as we’ve seen in the book so far, a button click on the browser can drive a database read on the server, both written in the same Rust module. But Leptos itself doesn’t provide the server (or the database, or the operating system, or the firmware, or the electrical cables...)
+
+Instead, Leptos provides integrations for the two most popular Rust web server frameworks, Actix Web ([`leptos_actix`](https://docs.rs/leptos_actix/latest/leptos_actix/)) and Axum ([`leptos_axum`](https://docs.rs/leptos_axum/latest/leptos_axum/)). We’ve built integrations with each server’s router so that you can simply plug your Leptos app into an existing server with `.leptos_routes()`, and easily handle server function calls.
+
+> If you haven’t seen our [Actix](https://github.com/leptos-rs/start) and [Axum](https://github.com/leptos-rs/start-axum) templates, now’s a good time to check them out.
+
+## Using Extractors
+
+Both Actix and Axum handlers are built on the same powerful idea of **extractors**. Extractors “extract” typed data from an HTTP request, allowing you to access server-specific data easily.
+
+Leptos provides `extract` helper functions to let you use these extractors directly in your server functions, with a convenient syntax very similar to handlers for each framework.
+
+### Actix Extractors
+
+The [`extract` function in `leptos_actix`](https://docs.rs/leptos_actix/latest/leptos_actix/fn.extract.html) takes a handler function as its argument. The handler follows similar rules to an Actix handler: it is an async function that receives arguments that will be extracted from the request and returns some value. The handler function receives that extracted data as its arguments, and can do further `async` work on them inside the body of the `async move` block. It returns whatever value you return back out into the server function.
+
+```rust
+
+#[server(ActixExtract, "/api")]
+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(cx,
+        |search: Query<Search>, connection: ConnectionInfo| async move {
+            format!(
+                "search = {}\nconnection = {:?}",
+                search.q,
+                connection
+            )
+        },
+    )
+    .await
+}
+```
+
+## Axum Extractors
+
+The syntax for the [`leptos_axum::extract`](https://docs.rs/leptos_axum/latest/leptos_axum/fn.extract.html) function is very similar. (**Note**: This is available on the git main branch, but has not been released as of writing.) Note that Axum extractors return a `Result`, so you’ll need to add something to handle the error case.
+
+```rust
+#[server(AxumExtract, "/api")]
+pub async fn axum_extract(cx: Scope) -> Result<String, ServerFnError> {
+    use axum::{extract::Query, http::Method};
+    use leptos_axum::extract;
+
+    extract(cx, |method: Method, res: Query<MyQuery>| async move {
+            format!("{method:?} and {}", res.q)
+        },
+    )
+    .await
+    .map_err(|e| ServerFnError::ServerError("Could not extract method and query...".to_string()))
+}
+```
+
+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).
+
+## A Note about Data-Loading Patterns
+
+Because Actix and (especially) Axum are built on the idea of a single round-trip HTTP request and response, you typically run extractors near the “top” of your application (i.e., before you start rendering) and use the extracted data to determine how that should be rendered. Before you render a `<button>`, you load all the data your app could need. And any given route handler needs to know all the data that will need to be extracted by that route.
+
+But Leptos integrates both the client and the server, and it’s important to be able to refresh small pieces of your UI with new data from the server without forcing a full reload of all the data. So Leptos likes to push data loading “down” in your application, as far towards the leaves of your user interface as possible. When you click a `<button>`, it can refresh just the data it needs. This is exactly what server functions are for: they give you granular access to data to be loaded and reloaded.
+
+The `extract()` functions let you combine both models by using extractors in your server functions. You get access to the full power of route extractors, while decentralizing knowledge of what needs to be extracted down to your individual components. This makes it easier to refactor and reorganize routes: you don’t need to specify all the data a route needs up front.

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

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

docs/book/src/server/README.md

@@ -0,0 +1,11 @@
+# Working with the Server
+
+The previous section described the process of server-side rendering, using the server to generate an HTML version of the page that will become interactive in the browser. So far, everything has been “isomorphic” or “universal”; in other words, your app has had the “same (_iso_) shape (_morphe_)” on the client and the server.
+
+But a server can do a lot more than just render HTML! In fact, a server can do a whole bunch of things your browser _can’t,_ like reading from and writing to a SQL database.
+
+If you’re used to building JavaScript frontend apps, you’re probably used to calling out to some kind of REST API to do this sort of server work. If you’re used to building sites with PHP or Python or Ruby (or Java or C# or...), this server-side work is your bread and butter, and it’s the client-side interactivity that tends to be an afterthought.
+
+With Leptos, you can do both: not only in the same language, not only sharing the same types, but even in the same files!
+
+This section will talk about how to build the uniquely-server-side parts of your application.

docs/book/src/ssr/21_cargo_leptos.md

@@ -32,6 +32,6 @@ cargo leptos watch
 
 Once your app has compiled you can open up your browser to [`http://localhost:3000`](http://localhost:3000) to see it.
 
-`cargo-leptos` has lots of additional features and built in tools. You can learn more [in its `README`](https://github.com/leptos-rs/leptos/blob/main/examples/hackernews/src/api.rs).
+`cargo-leptos` has lots of additional features and built in tools. You can learn more [in its `README`](https://github.com/leptos-rs/cargo-leptos/blob/main/README.md).
 
 But what exactly is happening when you open our browser to `localhost:3000`? Well, read on to find out.

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

@@ -8,7 +8,12 @@ If you’ve ever listened to streaming music or watched a video online, I’m su
 
 Let me say a little more about what I mean.
 
-Leptos supports all four different of these different ways to render HTML that includes asynchronous data.
+Leptos supports all four different modes of rendering HTML that includes asynchronous data:
+
+1. [Synchronous Rendering](#synchronous-rendering)
+1. [Async Rendering](#async-rendering)
+1. [In-Order streaming](#in-order-streaming)
+1. [Out-of-Order Streaming](#out-of-order-streaming)
 
 ## Synchronous Rendering
 
@@ -62,6 +67,16 @@ If you’re using server-side rendering, the synchronous mode is almost never wh
   - Able to show the fallback loading state and dynamically replace it, instead of showing blank sections for un-loaded data.
 - _Cons_: Requires JavaScript to be enabled for suspended fragments to appear in correct order. (This small chunk of JS streamed down in a `<script>` tag alongside the `<template>` tag that contains the rendered `<Suspense/>` fragment, so it does not need to load any additional JS files.)
 
+5. **Partially-blocked streaming**: “Partially-blocked” streaming is useful when you have multiple separate `<Suspense/>` components on the page. If one of them reads from one or more “blocking resources” (see below), the fallback will not be sent; rather, the server will wait until that `<Suspense/>` has resolved and then replace the fallback with the resolved fragment on the server, which means that it is included in the initial HTML response and appears even if JavaScript is disabled or not supported. Other `<Suspense/>` stream in out of order as usual.
+
+This is useful when you have multiple `<Suspense/>` on the page, and one is more important than the other: think of a blog post and comments, or product information and reviews. It is _not_ useful if there’s only one `<Suspense/>`, or if every `<Suspense/>` reads from blocking resources. In those cases it is a slower form of `async` rendering.
+
+- _Pros_: Works if JavaScript is disabled or not supported on the user’s device.
+- _Cons_
+  - Slower initial response time than out-of-order.
+  - Marginally overall response due to additional work on the server.
+  - No fallback state shown.
+
 ## Using SSR Modes
 
 Because it offers the best blend of performance characteristics, Leptos defaults to out-of-order streaming. But it’s really simple to opt into these different modes. You do it by adding an `ssr` property onto one or more of your `<Route/>` components, like in the [`ssr_modes` example](https://github.com/leptos-rs/leptos/blob/main/examples/ssr_modes/src/app.rs).
@@ -69,13 +84,13 @@ Because it offers the best blend of performance characteristics, Leptos defaults
 ```rust
 <Routes>
 	// We’ll load the home page with out-of-order streaming and <Suspense/>
-	<Route path="" view=|cx| view! { cx, <HomePage/> }/>
+	<Route path="" view=HomePage/>
 
 	// We'll load the posts with async rendering, so they can set
 	// the title and metadata *after* loading the data
 	<Route
 		path="/post/:id"
-		view=|cx| view! { cx, <Post/> }
+		view=Post
 		ssr=SsrMode::Async
 	/>
 </Routes>

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

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

docs/book/src/testing.md

@@ -53,128 +53,149 @@ pub fn TodoApp(cx: Scope) -> impl IntoView {
 In general, the less of your logic is wrapped into your components themselves, the
 more idiomatic your code will feel and the easier it will be to test.
 
-## 2. Test components with `wasm-bindgen-test`
+## 2. Test components with end-to-end (`e2e`) testing
 
-[`wasm-bindgen-test`](https://crates.io/crates/wasm-bindgen-test) is a great utility
-for integrating or end-to-end testing WebAssembly apps in a headless browser.
+Our [`examples`](https://github.com/leptos-rs/leptos/tree/main/examples) directory has several examples with extensive end-to-end testing, using different testing tools.
 
-To use this testing utility, you need to add `wasm-bindgen-test` to your `Cargo.toml`:
+The easiest way to see how to use these is to take a look at the test examples themselves:
 
-```toml
-[dev-dependencies]
-wasm-bindgen-test = "0.3.0"
-```
+### `wasm-bindgen-test` with [`counter`](https://github.com/leptos-rs/leptos/blob/main/examples/counter/tests/web.rs)
 
-You should create tests in a separate `tests` directory. You can then run your tests in the browser of your choice:
+This is a fairly simple manual testing setup that uses the [`wasm-pack test`](https://rustwasm.github.io/wasm-pack/book/commands/test.html) command.
 
-```bash
-wasm-pack test --firefox
-```
-
-> 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/mod.rs).
-
-First, we set up the testing environment.
+#### Sample Test
 
 ```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();
-    document.body().unwrap().append_child(&test_wrapper);
+    let _ = document.body().unwrap().append_child(&test_wrapper);
 
-    // start by rendering our counter and mounting it to the DOM
-    // note that we start at the initial value of 10
     mount_to(
         test_wrapper.clone().unchecked_into(),
         |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>();
+
+    clear.click();
+
+    assert_eq!(
+        div.outer_html(),
+        /* HTML expected */
+    );
+```
+
+### [`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);
 }
 ```
 
-We’ll use some manual DOM operations to grab the `<div>` that wraps
-the whole component, as well as the `clear` button.
+### [Playwright with `counters_stable`](https://github.com/leptos-rs/leptos/tree/main/examples/counters_stable/e2e)
 
-```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>();
-```
+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.
 
-Now we can use ordinary DOM APIs to simulate user interaction.
+#### Sample Test
 
-```rust
-// now let's click the `clear` button
-clear.click();
-```
+```js
+import { test, expect } from "@playwright/test";
+import { CountersPage } from "./fixtures/counters_page";
 
-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.
+test.describe("Increment Count", () => {
+  test("should increase the total count", async ({ page }) => {
+    const ui = new CountersPage(page);
+    await ui.goto();
+    await ui.addCounter();
 
-```rust
-assert_eq!(
-    div.outer_html(),
-    // here we spawn a mini reactive system 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(cx, 0);
+    await ui.incrementCount();
+    await ui.incrementCount();
+    await ui.incrementCount();
 
-        // we can remove the event listeners because they're not rendered to HTML
-        view! { cx,
-            <div>
-                <button>"Clear"</button>
-                <button>"-1"</button>
-                <span>"Value: " {value} "!"</span>
-                <button>"+1"</button>
-            </div>
-        }
-        // 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()
-    })
-);
-```
-
-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.
-
-```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()
+    await expect(ui.total).toHaveText("3");
+  });
 });
 ```
 
-This is only a very limited introduction to testing. But I hope it’s useful as you begin to build applications.
+### [Gherkin/Cucumber Tests with `todo_app_sqlite`](https://github.com/leptos-rs/leptos/blob/main/examples/todo_app_sqlite/e2e/README.md)
 
-> For more, see [the testing section of the `wasm-bindgen` guide](https://rustwasm.github.io/wasm-bindgen/wasm-bindgen-test/index.html#testing-on-wasm32-unknown-unknown-with-wasm-bindgen-test).
+You can integrate any testing tool you’d like into this flow. This example uses Cucumber, a testing framework based on natural language.
+
+```
+@add_todo
+Feature: Add Todo
+
+    Background:
+        Given I see the app
+
+    @add_todo-see
+    Scenario: Should see the todo
+        Given I set the todo as Buy Bread
+        When I click the Add button
+        Then I see the todo named Buy Bread
+
+    # @allow.skipped
+    @add_todo-style
+    Scenario: Should see the pending todo
+        When I add a todo as Buy Oranges
+        Then I see the pending todo
+```
+
+The definitions for these actions are defined in Rust code.
+
+```rust
+use crate::fixtures::{action, world::AppWorld};
+use anyhow::{Ok, Result};
+use cucumber::{given, when};
+
+#[given("I see the app")]
+#[when("I open the app")]
+async fn i_open_the_app(world: &mut AppWorld) -> Result<()> {
+    let client = &world.client;
+    action::goto_path(client, "").await?;
+
+    Ok(())
+}
+
+#[given(regex = "^I add a todo as (.*)$")]
+#[when(regex = "^I add a todo as (.*)$")]
+async fn i_add_a_todo_titled(world: &mut AppWorld, text: String) -> Result<()> {
+    let client = &world.client;
+    action::add_todo(client, text.as_str()).await?;
+
+    Ok(())
+}
+
+// etc.
+```
+
+### Learning More
+
+Feel free to check out the CI setup in the Leptos repo to learn more about how to use these tools in your own application. All of these testing methods are run regularly against actual Leptos example apps.

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

@@ -28,7 +28,7 @@ fn App(cx: Scope) -> impl IntoView {
     view! { cx,
         <button
             on:click=move |_| {
-                set_count.update(|n| *n += 1);
+                set_count(3);
             }
         >
             "Click me: "
@@ -78,8 +78,7 @@ This returns a `(getter, setter)` tuple. To access the current value, you’ll
 use `count.get()` (or, on `nightly` Rust, the shorthand `count()`). To set the
 current value, you’ll call `set_count.set(...)` (or `set_count(...)`).
 
-> `.get()` clones the value and `.set()` overwrites it. In many cases, it’s more
-> efficient to use `.with()` or `.update()`; check out the docs for [`ReadSignal`](https://docs.rs/leptos/latest/leptos/struct.ReadSignal.html) and [`WriteSignal`](https://docs.rs/leptos/latest/leptos/struct.WriteSignal.html) if you’d like to learn more about those trade-offs at this point.
+> `.get()` clones the value and `.set()` overwrites it. In many cases, it’s more efficient to use `.with()` or `.update()`; check out the docs for [`ReadSignal`](https://docs.rs/leptos/latest/leptos/struct.ReadSignal.html) and [`WriteSignal`](https://docs.rs/leptos/latest/leptos/struct.WriteSignal.html) if you’d like to learn more about those trade-offs at this point.
 
 ## The View
 
@@ -90,7 +89,8 @@ view! { cx,
     <button
         // define an event listener with on:
         on:click=move |_| {
-            set_count.update(|n| *n += 1);
+            // on stable, this is set_count.set(3);
+            set_count(3);
         }
     >
         // text nodes are wrapped in quotation marks
@@ -139,9 +139,19 @@ view! { cx,
 Remember—and this is _very important_—only functions are reactive. This means that
 `{count}` and `{count()}` do very different things in your view. `{count}` passes
 in a function, telling the framework to update the view every time `count` changes.
-`{count()}` access the value of `count` once, and passes an `i32` into the view,
+`{count()}` accesses the value of `count` once, and passes an `i32` into the view,
 rendering it once, unreactively. You can see the difference in the CodeSandbox below!
 
+Let’s make one final change. `set_count(3)` is a pretty useless thing for a click handler to do. Let’s replace “set this value to 3” with “increment this value by 1”:
+
+```rust
+move |_| {
+    set_count.update(|n| *n += 1);
+}
+```
+
+You can see here that while `set_count` just sets the value, `set_count.update()` gives us a mutable reference and mutates the value in place. Either one will trigger a reactive update in our UI.
+
 > Throughout this tutorial, we’ll use CodeSandbox to show interactive examples. To
 > show the browser in the sandbox, you may need to click `Add DevTools >
 Other Previews > 8080.` Hover over any of the variables to show Rust-Analyzer details
@@ -150,3 +160,67 @@ Other Previews > 8080.` Hover over any of the variables to show Rust-Analyzer de
 [Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/1-basic-component-3d74p3?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A31%2C%22endLineNumber%22%3A19%2C%22startColumn%22%3A31%2C%22startLineNumber%22%3A19%7D%5D)
 
 <iframe src="https://codesandbox.io/p/sandbox/1-basic-component-3d74p3?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A31%2C%22endLineNumber%22%3A19%2C%22startColumn%22%3A31%2C%22startLineNumber%22%3A19%7D%5D" width="100%" height="1000px" style="max-height: 100vh"></iframe>
+
+<details>
+<summary>CodeSandbox Source</summary>
+
+```rust
+use leptos::*;
+
+// The #[component] macro marks a function as a reusable component
+// Components are the building blocks of your user interface
+// They define a reusable unit of behavior
+#[component]
+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(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! { cx,
+        <button
+            // on:click will run whenever the `click` event fires
+            // every event handler is defined as `on:{eventname}`
+
+            // we're able to move `set_count` into the closure
+            // because signals are Copy and 'static
+            on:click=move |_| {
+                set_count.update(|n| *n += 1);
+            }
+        >
+            // text nodes in RSX should be wrapped in quotes,
+            // like a normal Rust string
+            "Click me"
+        </button>
+        <p>
+            <strong>"Reactive: "</strong>
+            // you can insert Rust expressions as values in the DOM
+            // by wrapping them in curly braces
+            // if you pass in a function, it will reactively update
+            {move || count.get()}
+        </p>
+        <p>
+            <strong>"Reactive shorthand: "</strong>
+            // signals are functions, so we can remove the wrapping closure
+            {count}
+        </p>
+        <p>
+            <strong>"Not reactive: "</strong>
+            // NOTE: if you write {count()}, this will *not* be reactive
+            // it simply gets the value of count once
+            {count()}
+        </p>
+    }
+}
+
+// This `main` function is the entry point into the app
+// It just mounts our component to the <body>
+// Because we defined it as `fn App`, we can now use it in a
+// template as <App/>
+fn main() {
+    leptos::mount_to_body(|cx| view! { cx, <App/> })
+}
+```

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

@@ -1,10 +1,10 @@
-# `view`: Dynamic Attributes and Classes
+# `view`: Dynamic Classes, Styles and Attributes
 
 So far we’ve seen how to use the `view` macro to create event listeners and to
 create dynamic text by passing a function (such as a signal) into the view.
 
 But of course there are other things you might want to update in your user interface.
-In this section, we’ll look at how to update attributes and classes dynamically,
+In this section, we’ll look at how to update classes, styles and attributes dynamically,
 and we’ll introduce the concept of a **derived signal**.
 
 Let’s start with a simple component that should be familiar: click a button to
@@ -52,12 +52,42 @@ reactively update when the signal changes.
 Now every time I click the button, the text should toggle between red and black as
 the number switches between even and odd.
 
+Some CSS class names can’t be directly parsed by the `view` macro, especially if they include a mix of dashes and numbers or other characters. In that case, you can use a tuple syntax: `class=("name", value)` still directly updates a single class.
+
+```rust
+class=("button-20", move || count() % 2 == 1)
+```
+
 > If you’re following along, make sure you go into your `index.html` and add something like this:
-> 
+>
 > ```html
-> <style>.red { color: red; }</style>
+> <style>
+>   .red {
+>     color: red;
+>   }
+> </style>
 > ```
 
+## Dynamic Styles
+
+Individual CSS properties can be directly updated with a similar `style:` syntax.
+
+```rust
+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)
+        style:top=move || format!("{}px", y() + 100)
+        style:background-color=move || format!("rgb({}, {}, 100)", x(), y())
+        style=("--columns", x)
+    >
+        "Moves when coordinates change"
+    </div>
+}
+```
+
 ## Dynamic Attributes
 
 The same applies to plain attributes. Passing a plain string or primitive value to
@@ -114,11 +144,92 @@ let double_count = move || count() * 2;
 Derived signals let you create reactive computed values that can be used in multiple
 places in your application with minimal overhead.
 
-> Note: Using a derived signal like this means that the calculation runs once per
-> signal change per place we access `double_count`; in other words, twice. This is a
-> very cheap calculation, so that’s fine. We’ll look at memos in a later chapter, which
-> are designed to solve this problem for expensive calculations.
+Note: Using a derived signal like this means that the calculation runs once per
+signal change per place we access `double_count`; in other words, twice. This is a
+very cheap calculation, so that’s fine. We’ll look at memos in a later chapter, which
+are designed to solve this problem for expensive calculations.
+
+> #### Advanced Topic: Injecting Raw HTML
+>
+> The `view` macro provides support for an additional attribute, `inner_html`, which
+> can be used to directly set the HTML contents of any element, wiping out any other
+> children you’ve given it. Note that this does _not_ escape the HTML you provide. You
+> should make sure that it only contains trusted input or that any HTML entities are
+> escaped, to prevent cross-site scripting (XSS) attacks.
+>
+> ```rust
+> let html = "<p>This HTML will be injected.</p>";
+> view! { cx,
+>   <div inner_html=html/>
+> }
+> ```
+>
+> [Click here for the full `view` macros docs](https://docs.rs/leptos/latest/leptos/macro.view.html).
 
 [Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/2-dynamic-attribute-pqyvzl?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A2%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A2%7D%5D)
 
 <iframe src="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" width="100%" height="1000px" style="max-height: 100vh"></iframe>
+
+<details>
+<summary>Code Sandbox Source</summary>
+
+```rust
+use leptos::*;
+
+#[component]
+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! { cx,
+        <button
+            on:click=move |_| {
+                set_count.update(|n| *n += 1);
+            }
+            // the class: syntax reactively updates a single class
+            // here, we'll set the `red` class when `count` is odd
+            class:red=move || count() % 2 == 1
+        >
+            "Click me"
+        </button>
+        // NOTE: self-closing tags like <br> need an explicit /
+        <br/>
+
+        // We'll update this progress bar every time `count` changes
+        <progress
+            // static attributes work as in HTML
+            max="50"
+
+            // passing a function to an attribute
+            // reactively sets that attribute
+            // signals are functions, so this <=> `move || count.get()`
+            value=count
+        >
+        </progress>
+        <br/>
+
+        // This progress bar will use `double_count`
+        // so it should move twice as fast!
+        <progress
+            max="50"
+            // derived signals are functions, so they can also
+            // reactive update the DOM
+            value=double_count
+        >
+        </progress>
+        <p>"Count: " {count}</p>
+        <p>"Double Count: " {double_count}</p>
+    }
+}
+
+fn main() {
+    leptos::mount_to_body(|cx| view! { cx, <App/> })
+}
+```
+
+</details>
+</preview>

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

@@ -15,7 +15,7 @@ You _could_ do this by just creating two `<progress>` elements:
 let (count, set_count) = create_signal(cx, 0);
 let double_count = move || count() * 2;
 
-view! {
+view! { cx,
     <progress
         max="50"
         value=count
@@ -98,18 +98,6 @@ notice that you can easily tell the difference between an element and a componen
 because components always have `PascalCase` names. You pass the `progress` prop
 in as if it were an HTML element attribute. Simple.
 
-> ### Important Note
->
-> For every `Component`, Leptos generates a corresponding `ComponentProps` type. This
-> is what allows us to have named props, when Rust does not have named function parameters.
-> If you’re defining a component in one module and importing it into another, make
-> sure you include this `ComponentProps` type:
->
-> `use progress_bar::{ProgressBar, ProgressBarProps};`
->
-> **Note**: This is still true as of `0.2.5`, but the requirement has been removed on `main`
-> and will not apply to later versions.
-
 ### Reactive and Static Props
 
 You’ll notice that throughout this example, `progress` takes a reactive
@@ -231,9 +219,25 @@ where
 This is a perfectly reasonable way to write this component: `progress` now takes
 any value that implements this `Fn()` trait.
 
-> Note that generic component props _cannot_ be specified inline (as `<F: Fn() -> i32>`)
-> or as `progress: impl Fn() -> i32 + 'static,`, in part because they’re actually used to generate
-> a `struct ProgressBarProps`, and struct fields cannot be `impl` types.
+This generic can also be specified inline:
+
+```rust
+#[component]
+fn ProgressBar<F: Fn() -> i32 + 'static>(
+    cx: Scope,
+    #[prop(default = 100)] max: u16,
+    progress: F,
+) -> impl IntoView {
+    view! { cx,
+        <progress
+            max=max
+            value=progress
+        />
+    }
+}
+```
+
+> Note that generic component props _can’t_ be specified with an `impl` yet (`progress: impl Fn() -> i32 + 'static,`), in part because they’re actually used to generate a `struct ProgressBarProps`, and struct fields cannot be `impl` types. The `#[component]` macro may be further improved in the future to allow inline `impl` generic props.
 
 ### `into` Props
 
@@ -283,6 +287,81 @@ fn App(cx: Scope) -> impl IntoView {
 }
 ```
 
+### Optional Generic Props
+
+Note that you can’t specify optional generic props for a component. Let’s see what would happen if you try:
+
+```rust,compile_fail
+#[component]
+fn ProgressBar<F: Fn() -> i32 + 'static>(
+    cx: Scope,
+    #[prop(optional)] progress: Option<F>,
+) -> impl IntoView {
+    progress.map(|progress| {
+        view! { cx,
+            <progress
+                max=100
+                value=progress
+            />
+        }
+    })
+}
+
+#[component]
+pub fn App(cx: Scope) -> impl IntoView {
+    view! { cx,
+        <ProgressBar/>
+    }
+}
+```
+
+Rust helpfully gives the error
+
+```
+xx |         <ProgressBar/>
+   |          ^^^^^^^^^^^ cannot infer type of the type parameter `F` declared on the function `ProgressBar`
+   |
+help: consider specifying the generic argument
+   |
+xx |         <ProgressBar::<F>/>
+   |                     +++++
+```
+
+There are just two problems:
+
+1. Leptos’s view macro doesn’t support specifying a generic on a component with this turbofish syntax.
+2. Even if you could, specifying the correct type here is not possible; closures and functions in general are unnameable types. The compiler can display them with a shorthand, but you can’t specify them.
+
+However, you can get around this by providing a concrete type using `Box<dyn _>` or `&dyn _`:
+
+```rust
+#[component]
+fn ProgressBar(
+    cx: Scope,
+    #[prop(optional)] progress: Option<Box<dyn Fn() -> i32>>,
+) -> impl IntoView {
+    progress.map(|progress| {
+        view! { cx,
+            <progress
+                max=100
+                value=progress
+            />
+        }
+    })
+}
+
+#[component]
+pub fn App(cx: Scope) -> impl IntoView {
+    view! { cx,
+        <ProgressBar/>
+    }
+}
+```
+
+Because the Rust compiler now knows the concrete type of the prop, and therefore its size in memory even in the `None` case, this compiles fine.
+
+> In this particular case, `&dyn Fn() -> i32` will cause lifetime issues, but in other cases, it may be a possibility.
+
 ## Documenting Components
 
 This is one of the least essential but most important sections of this book.
@@ -318,6 +397,98 @@ 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>
+
+<details>
+<summary>CodeSandbox Source</summary>
+
+```rust
+use leptos::*;
+
+// Composing different components together is how we build
+// user interfaces. Here, we'll define a resuable <ProgressBar/>.
+// You'll see how doc comments can be used to document components
+// and their properties.
+
+/// 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)]
+    /// The maximum value of the progress bar.
+    max: u16,
+    // Will run `.into()` on the value passed into the prop.
+    #[prop(into)]
+    // `Signal<T>` is a wrapper for several reactive types.
+    // It can be helpful in component APIs like this, where we
+    // might want to take any kind of reactive value
+    /// How much progress should be displayed.
+    progress: Signal<i32>,
+) -> impl IntoView {
+    view! { cx,
+        <progress
+            max={max}
+            value=progress
+        />
+        <br/>
+    }
+}
+
+#[component]
+fn App(cx: Scope) -> impl IntoView {
+    let (count, set_count) = create_signal(cx, 0);
+
+    let double_count = move || count() * 2;
+
+    view! { cx,
+        <button
+            on:click=move |_| {
+                set_count.update(|n| *n += 1);
+            }
+        >
+            "Click me"
+        </button>
+        <br/>
+        // If you have this open in CodeSandbox or an editor with
+        // rust-analyzer support, try hovering over `ProgressBar`,
+        // `max`, or `progress` to see the docs we defined above
+        <ProgressBar max=50 progress=count/>
+        // Let's use the default max value on this one
+        // the default is 100, so it should move half as fast
+        <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(cx, double_count)/>
+    }
+}
+
+fn main() {
+    leptos::mount_to_body(|cx| view! { cx, <App/> })
+}
+```
+
+</details>
+</preview>

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

@@ -106,3 +106,162 @@ Check out the `<DynamicList/>` component below for an example.
 [Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/4-iteration-sglt1o?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A6%2C%22endLineNumber%22%3A55%2C%22startColumn%22%3A5%2C%22startLineNumber%22%3A31%7D%5D)
 
 <iframe src="https://codesandbox.io/p/sandbox/4-iteration-sglt1o?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A6%2C%22endLineNumber%22%3A55%2C%22startColumn%22%3A5%2C%22startLineNumber%22%3A31%7D%5D" width="100%" height="1000px" style="max-height: 100vh"></iframe>
+
+<details>
+<summary>CodeSandbox Source</summary>
+
+```rust
+use leptos::*;
+
+// Iteration is a very common task in most applications.
+// So how do you take a list of data and render it in the DOM?
+// This example will show you the two ways:
+// 1) for mostly-static lists, using Rust iterators
+// 2) for lists that grow, shrink, or move items, using <For/>
+
+#[component]
+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>
+        <StaticList length=5/>
+        <h2>"Dynamic List"</h2>
+        <p>"Use this pattern if the rows in your list will change."</p>
+        <DynamicList initial_length=5/>
+    }
+}
+
+/// A list of counters, without the ability
+/// 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(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! { cx,
+                <li>
+                    <button
+                        on:click=move |_| set_count.update(|n| *n += 1)
+                    >
+                        {count}
+                    </button>
+                </li>
+            }
+        })
+        .collect::<Vec<_>>();
+
+    // 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! { cx,
+        <ul>{counter_buttons}</ul>
+    }
+}
+
+/// A list of counters that allows you to add or
+/// remove counters.
+#[component]
+fn DynamicList(
+    cx: Scope,
+    /// The number of counters to begin with.
+    initial_length: usize,
+) -> impl IntoView {
+    // This dynamic list will use the <For/> component.
+    // <For/> is a keyed list. This means that each row
+    // has a defined key. If the key does not change, the row
+    // will not be re-rendered. When the list changes, only
+    // the minimum number of changes will be made to the DOM.
+
+    // `next_counter_id` will let us generate unique IDs
+    // we do this by simply incrementing the ID by one
+    // each time we create a counter
+    let mut next_counter_id = initial_length;
+
+    // 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(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(cx, initial_counters);
+
+    let add_counter = move |_| {
+        // create a signal for the new counter
+        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`
+            // we can just use normal Vec methods like `push`
+            counters.push((next_counter_id, sig))
+        });
+        // increment the ID so it's always unique
+        next_counter_id += 1;
+    };
+
+    view! { cx,
+        <div>
+            <button on:click=add_counter>
+                "Add Counter"
+            </button>
+            <ul>
+                // The <For/> component is central here
+                // This allows for efficient, key list rendering
+                <For
+                    // `each` takes any function that returns an iterator
+                    // this should usually be a signal or derived signal
+                    // if it's not reactive, just render a Vec<_> instead of <For/>
+                    each=counters
+                    // the key should be unique and stable for each row
+                    // using an index is usually a bad idea, unless your list
+                    // can only grow, because moving items around inside the list
+                    // means their indices will change and they will all rerender
+                    key=|counter| counter.0
+                    // the view function receives each item from your `each` iterator
+                    // and returns a view
+                    view=move |cx, (id, (count, set_count))| {
+                        view! { cx,
+                            <li>
+                                <button
+                                    on:click=move |_| set_count.update(|n| *n += 1)
+                                >
+                                    {count}
+                                </button>
+                                <button
+                                    on:click=move |_| {
+                                        set_counters.update(|counters| {
+                                            counters.retain(|(counter_id, _)| counter_id != &id)
+                                        });
+                                    }
+                                >
+                                    "Remove"
+                                </button>
+                            </li>
+                        }
+                    }
+                />
+            </ul>
+        </div>
+    }
+}
+
+fn main() {
+    leptos::mount_to_body(|cx| view! { cx, <App/> })
+}
+
+```
+
+</details>
+</preview>

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

@@ -19,7 +19,8 @@ There are two important things to remember:
 2. The `value` _attribute_ only sets the initial value of the input, i.e., it
    only updates the input up to the point that you begin typing. The `value`
    _property_ continues updating the input after that. You usually want to set
-   `prop:value` for this reason.
+   `prop:value` for this reason. (The same is true for `checked` and `prop:checked` 
+   on an `<input type="checkbox">`.)
 
 ```rust
 let (name, set_name) = create_signal(cx, "Controlled".to_string());
@@ -42,6 +43,33 @@ view! { cx,
 }
 ```
 
+> #### 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.
@@ -112,3 +140,112 @@ The view should be pretty self-explanatory by now. Note two things:
 [Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/5-form-inputs-ih9m62?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A12%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A12%7D%5D)
 
 <iframe src="https://codesandbox.io/p/sandbox/5-form-inputs-ih9m62?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A12%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A12%7D%5D" width="100%" height="1000px" style="max-height: 100vh"></iframe>
+
+<details>
+<summary>CodeSandbox Source</summary>
+
+```rust
+use leptos::{ev::SubmitEvent, *};
+
+#[component]
+fn App(cx: Scope) -> impl IntoView {
+    view! { cx,
+        <h2>"Controlled Component"</h2>
+        <ControlledComponent/>
+        <h2>"Uncontrolled Component"</h2>
+        <UncontrolledComponent/>
+    }
+}
+
+#[component]
+fn ControlledComponent(cx: Scope) -> impl IntoView {
+    // create a signal to hold the value
+    let (name, set_name) = create_signal(cx, "Controlled".to_string());
+
+    view! { cx,
+        <input type="text"
+            // fire an event whenever the input changes
+            on:input=move |ev| {
+                // event_target_value is a Leptos helper function
+                // it functions the same way as event.target.value
+                // in JavaScript, but smooths out some of the typecasting
+                // necessary to make this work in Rust
+                set_name(event_target_value(&ev));
+            }
+
+            // the `prop:` syntax lets you update a DOM property,
+            // rather than an attribute.
+            //
+            // IMPORTANT: the `value` *attribute* only sets the
+            // initial value, until you have made a change.
+            // The `value` *property* sets the current value.
+            // This is a quirk of the DOM; I didn't invent it.
+            // Other frameworks gloss this over; I think it's
+            // more important to give you access to the browser
+            // as it really works.
+            //
+            // tl;dr: use prop:value for form inputs
+            prop:value=name
+        />
+        <p>"Name is: " {name}</p>
+    }
+}
+
+#[component]
+fn UncontrolledComponent(cx: Scope) -> impl IntoView {
+    // import the type for <input>
+    use leptos::html::Input;
+
+    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(cx);
+
+    // fires when the form `submit` event happens
+    // this will store the value of the <input> in our signal
+    let on_submit = move |ev: SubmitEvent| {
+        // stop the page from reloading!
+        ev.prevent_default();
+
+        // here, we'll extract the value from the input
+        let value = input_element()
+            // event handlers can only fire after the view
+            // is mounted to the DOM, so the `NodeRef` will be `Some`
+            .expect("<input> to exist")
+            // `NodeRef` implements `Deref` for the DOM element type
+            // this means we can call`HtmlInputElement::value()`
+            // to get the current value of the input
+            .value();
+        set_name(value);
+    };
+
+    view! { cx,
+        <form on:submit=on_submit>
+            <input type="text"
+                // here, we use the `value` *attribute* to set only
+                // the initial value, letting the browser maintain
+                // the state after that
+                value=name
+
+                // store a reference to this input in `input_element`
+                node_ref=input_element
+            />
+            <input type="submit" value="Submit"/>
+        </form>
+        <p>"Name is: " {name}</p>
+    }
+}
+
+// This `main` function is the entry point into the app
+// It just mounts our component to the <body>
+// Because we defined it as `fn App`, we can now use it in a
+// template as <App/>
+fn main() {
+    leptos::mount_to_body(|cx| view! { cx, <App/> })
+}
+
+```
+
+</details>
+</preview>

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

@@ -198,7 +198,7 @@ let (value, set_value) = create_signal(cx, 0);
 
 view! { cx,
   <Show
-    when=move || value() > 5
+    when=move || { value() > 5 }
     fallback=|cx| view! { cx, <Small/> }
   >
     <Big/>
@@ -208,7 +208,8 @@ view! { cx,
 
 `<Show/>` memoizes the `when` condition, so it only renders its `<Small/>` once,
 continuing to show the same component until `value` is greater than five;
-then it renders `<Big/>` once, continuing to show it indefinitely.
+then it renders `<Big/>` once, continuing to show it indefinitely or until `value`
+goes below five and then renders `<Small/>` again.
 
 This is a helpful tool to avoid rerendering when using dynamic `if` expressions.
 As always, there's some overhead: for a very simple node (like updating a single
@@ -285,3 +286,100 @@ view! { cx,
 [Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/6-control-flow-in-view-zttwfx?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/6-control-flow-in-view-zttwfx?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>
+
+<details>
+<summary>CodeSandbox Source</summary>
+
+```rust
+use leptos::*;
+
+#[component]
+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! { cx,
+        <h1>"Control Flow"</h1>
+
+        // Simple UI to update and show a value
+        <button on:click=move |_| set_value.update(|n| *n += 1)>
+            "+1"
+        </button>
+        <p>"Value is: " {value}</p>
+
+        <hr/>
+
+        <h2><code>"Option<T>"</code></h2>
+        // For any `T` that implements `IntoView`,
+        // so does `Option<T>`
+
+        <p>{odd_text}</p>
+        // This means you can use `Option` methods on it
+        <p>{move || odd_text().map(|text| text.len())}</p>
+
+        <h2>"Conditional Logic"</h2>
+        // You can do dynamic conditional if-then-else
+        // logic in several ways
+        //
+        // a. An "if" expression in a function
+        //    This will simply re-render every time the value
+        //    changes, which makes it good for lightweight UI
+        <p>
+            {move || if is_odd() {
+                "Odd"
+            } else {
+                "Even"
+            }}
+        </p>
+
+        // b. Toggling some kind of class
+        //    This is smart for an element that's going to
+        //    toggled often, because it doesn't destroy
+        //    it in between states
+        //    (you can find the `hidden` class in `index.html`)
+        <p class:hidden=is_odd>"Appears if even."</p>
+
+        // c. The <Show/> component
+        //    This only renders the fallback and the child
+        //    once, lazily, and toggles between them when
+        //    needed. This makes it more efficient in many cases
+        //    than a {move || if ...} block
+        <Show when=is_odd
+            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! { 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(cx)` (for all view types)
+        {move || match is_odd() {
+            true if value() == 1 => {
+                // <pre> returns HtmlElement<Pre>
+                view! { cx, <pre>"One"</pre> }.into_any()
+            },
+            false if value() == 2 => {
+                // <p> returns HtmlElement<P>
+                // so we convert into a more generic type
+                view! { cx, <p>"Two"</p> }.into_any()
+            }
+            _ => view! { cx, <textarea>{value()}</textarea> }.into_any()
+        }}
+    }
+}
+
+fn main() {
+    leptos::mount_to_body(|cx| view! { cx, <App/> })
+}
+
+```
+
+</details>
+</preview>

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

@@ -19,7 +19,7 @@ fn NumericInput(cx: Scope) -> impl IntoView {
     view! { cx,
         <label>
             "Type a number (or not!)"
-            <input type="number" on:input=on_input/>
+            <input on:input=on_input/>
             <p>
                 "You entered "
                 <strong>{value}</strong>
@@ -69,7 +69,7 @@ fn NumericInput(cx: Scope) -> impl IntoView {
         <h1>"Error Handling"</h1>
         <label>
             "Type a number (or something that's not a number!)"
-            <input type="number" on:input=on_input/>
+            <input on:input=on_input/>
             <ErrorBoundary
                 // the fallback receives a signal containing current errors
                 fallback=|cx, errors| view! { cx,
@@ -113,3 +113,64 @@ an `<ErrorBoundary/>` will appear again.
 [Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/7-error-handling-and-error-boundaries-sroncx?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/7-error-handling-and-error-boundaries-sroncx?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>
+
+<details>
+<summary>CodeSandbox Source</summary>
+
+```rust
+use leptos::*;
+
+#[component]
+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! { cx,
+        <h1>"Error Handling"</h1>
+        <label>
+            "Type a number (or something that's not a number!)"
+            <input type="number" on:input=on_input/>
+            // If an `Err(_) had been rendered inside the <ErrorBoundary/>,
+            // the fallback will be displayed. Otherwise, the children of the
+            // <ErrorBoundary/> will be displayed.
+            <ErrorBoundary
+                // the fallback receives a signal containing current errors
+                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! { cx, <li>{e.to_string()}</li>})
+                                .collect::<Vec<_>>()
+                            }
+                        </ul>
+                    </div>
+                }
+            >
+                <p>
+                    "You entered "
+                    // because `value` is `Result<i32, _>`,
+                    // it will render the `i32` if it is `Ok`,
+                    // and render nothing and trigger the error boundary
+                    // if it is `Err`. It's a signal, so this will dynamically
+                    // update when `value` changes
+                    <strong>{value}</strong>
+                </p>
+            </ErrorBoundary>
+        </label>
+    }
+}
+
+fn main() {
+    leptos::mount_to_body(|cx| view! { cx, <App/> })
+}
+
+```
+
+</details>
+</preview>

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

@@ -117,7 +117,7 @@ pub fn App(cx: Scope) -> impl IntoView {
 
 
 #[component]
-pub fn ButtonC<F>(cx: Scope) -> impl IntoView {
+pub fn ButtonC(cx: Scope) -> impl IntoView {
     view! { cx,
         <button>"Toggle"</button>
     }
@@ -288,3 +288,150 @@ signals and effects, all the way down.
 [Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/8-parent-child-communication-84we8m?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A3%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A3%7D%5D)
 
 <iframe src="https://codesandbox.io/p/sandbox/8-parent-child-communication-84we8m?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A3%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A3%7D%5D" width="100%" height="1000px" style="max-height: 100vh"></iframe>
+
+<details>
+<summary>CodeSandbox Source</summary>
+
+```rust
+use leptos::{ev::MouseEvent, *};
+
+// This highlights four different ways that child components can communicate
+// with their parent:
+// 1) <ButtonA/>: passing a WriteSignal as one of the child component props,
+//    for the child component to write into and the parent to read
+// 2) <ButtonB/>: passing a closure as one of the child component props, for
+//    the child component to call
+// 3) <ButtonC/>: adding an `on:` event listener to a component
+// 4) <ButtonD/>: providing a context that is used in the component (rather than prop drilling)
+
+#[derive(Copy, Clone)]
+struct SmallcapsContext(WriteSignal<bool>);
+
+#[component]
+pub fn App(cx: Scope) -> impl IntoView {
+    // just some signals to toggle three classes on our <p>
+    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(cx, SmallcapsContext(set_smallcaps));
+
+    view! {
+        cx,
+        <main>
+            <p
+                // class: attributes take F: Fn() => bool, and these signals all implement Fn()
+                class:red=red
+                class:right=right
+                class:italics=italics
+                class:smallcaps=smallcaps
+            >
+                "Lorem ipsum sit dolor amet."
+            </p>
+
+            // Button A: pass the signal setter
+            <ButtonA setter=set_red/>
+
+            // Button B: pass a closure
+            <ButtonB on_click=move |_| set_right.update(|value| *value = !*value)/>
+
+            // Button B: use a regular event listener
+            // setting an event listener on a component like this applies it
+            // to each of the top-level elements the component returns
+            <ButtonC on:click=move |_| set_italics.update(|value| *value = !*value)/>
+
+            // Button D gets its setter from context rather than props
+            <ButtonD/>
+        </main>
+    }
+}
+
+/// 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)
+        >
+            "Toggle Red"
+        </button>
+    }
+}
+
+/// 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
+where
+    F: Fn(MouseEvent) + 'static,
+{
+    view! {
+        cx,
+        <button
+            on:click=on_click
+        >
+            "Toggle Right"
+        </button>
+    }
+
+    // just a note: in an ordinary function ButtonB could take on_click: impl Fn(MouseEvent) + 'static
+    // and save you from typing out the generic
+    // the component macro actually expands to define a
+    //
+    // struct ButtonBProps<F> where F: Fn(MouseEvent) + 'static {
+    //   on_click: F
+    // }
+    //
+    // this is what allows us to have named props in our component invocation,
+    // instead of an ordered list of function arguments
+    // if Rust ever had named function arguments we could drop this requirement
+}
+
+/// 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(cx: Scope) -> impl IntoView {
+    view! {
+        cx,
+        <button>
+            "Toggle Italics"
+        </button>
+    }
+}
+
+/// 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(cx: Scope) -> impl IntoView {
+    let setter = use_context::<SmallcapsContext>(cx).unwrap().0;
+
+    view! {
+        cx,
+        <button
+            on:click=move |_| setter.update(|value| *value = !*value)
+        >
+            "Toggle Small Caps"
+        </button>
+    }
+}
+
+fn main() {
+    leptos::mount_to_body(|cx| view! { cx, <App/> })
+}
+
+```
+
+</details>
+</preview>

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

@@ -115,14 +115,118 @@ Calling it like this will create a list:
 
 ```rust
 view! { cx,
-    <WrappedChildren>
+    <WrapsChildren>
         "A"
         "B"
         "C"
-    </WrappedChildren>
+    </WrapsChildren>
 }
 ```
 
 [Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/9-component-children-2wrdfd?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A12%2C%22endLineNumber%22%3A19%2C%22startColumn%22%3A12%2C%22startLineNumber%22%3A19%7D%5D)
 
 <iframe src="https://codesandbox.io/p/sandbox/9-component-children-2wrdfd?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A12%2C%22endLineNumber%22%3A19%2C%22startColumn%22%3A12%2C%22startLineNumber%22%3A19%7D%5D" width="100%" height="1000px" style="max-height: 100vh"></iframe>
+
+<details>
+<summary>CodeSandbox Source</summary>
+
+```rust
+use leptos::*;
+
+// Often, you want to pass some kind of child view to another
+// component. There are two basic patterns for doing this:
+// - "render props": creating a component prop that takes a function
+//   that creates a view
+// - the `children` prop: a special property that contains content
+//   passed as the children of a component in your view, not as a
+//   property
+
+#[component]
+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! { cx,
+            <p>"Length: " {len}</p>
+        }
+    };
+
+    view! { cx,
+        // This component just displays the two kinds of children,
+        // embedding them in some other markup
+        <TakesChildren
+            // for component props, you can shorthand
+            // `render_prop=render_prop` => `render_prop`
+            // (this doesn't work for HTML element attributes)
+            render_prop
+        >
+            // these look just like the children of an HTML element
+            <p>"Here's a child."</p>
+            <p>"Here's another child."</p>
+        </TakesChildren>
+        <hr/>
+        // This component actually iterates over and wraps the children
+        <WrapsChildren>
+            <p>"Here's a child."</p>
+            <p>"Here's another child."</p>
+        </WrapsChildren>
+    }
+}
+
+/// 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(Scope) -> Fragment>`
+    /// ... aren't you glad we named it `Children` instead?
+    children: Children,
+) -> impl IntoView
+where
+    F: Fn() -> IV,
+    IV: IntoView,
+{
+    view! { cx,
+        <h1><code>"<TakesChildren/>"</code></h1>
+        <h2>"Render Prop"</h2>
+        {render_prop()}
+        <hr/>
+        <h2>"Children"</h2>
+        {children(cx)}
+    }
+}
+
+/// Wraps each child in an `<li>` and embeds them in a `<ul>`.
+#[component]
+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(cx)
+        .nodes
+        .into_iter()
+        .map(|child| view! { cx, <li>{child}</li> })
+        .collect::<Vec<_>>();
+
+    view! { cx,
+        <h1><code>"<WrapsChildren/>"</code></h1>
+        // wrap our wrapped children in a UL
+        <ul>{children}</ul>
+    }
+}
+
+fn main() {
+    leptos::mount_to_body(|cx| view! { cx, <App/> })
+}
+
+```
+
+</details>
+</preview>

examples/Makefile.toml

@@ -1,56 +1,112 @@
-extend = [{ path = "./cargo-make/common.toml" }]
+extend = [{ path = "./cargo-make/main.toml" }]
 
 [env]
 CARGO_MAKE_EXTEND_WORKSPACE_MAKEFILE = true
 CARGO_MAKE_CARGO_BUILD_TEST_FLAGS = ""
 CARGO_MAKE_WORKSPACE_EMULATION = true
 CARGO_MAKE_CRATE_WORKSPACE_MEMBERS = [
-    "counter",
-    "counter_isomorphic",
-    "counters",
-    "counters_stable",
-    "counter_without_macros",
-    "error_boundary",
-    "errors_axum",
-    "fetch",
-    "hackernews",
-    "hackernews_axum",
-    "login_with_token_csr_only",
-    "parent_child",
-    "router",
-    "session_auth_axum",
-    "ssr_modes",
-    "ssr_modes_axum",
-    "tailwind",
-    "tailwind_csr_trunk",
-    "todo_app_sqlite",
-    "todo_app_sqlite_axum",
-    "todo_app_sqlite_viz",
-    "todomvc",
+  "animated_show",
+  "counter",
+  "counter_isomorphic",
+  "counters",
+  "counters_stable",
+  "counter_url_query",
+  "counter_without_macros",
+  "error_boundary",
+  "errors_axum",
+  "fetch",
+  "hackernews",
+  "hackernews_axum",
+  "js-framework-benchmark",
+  "leptos-tailwind-axum",
+  "login_with_token_csr_only",
+  "parent_child",
+  "router",
+  "session_auth_axum",
+  "slots",
+  "ssr_modes",
+  "ssr_modes_axum",
+  "suspense_tests",
+  "tailwind",
+  "tailwind_csr_trunk",
+  "timer",
+  "todo_app_sqlite",
+  "todo_app_sqlite_axum",
+  "todo_app_sqlite_viz",
+  "todomvc",
 ]
 
-[tasks.verify-flow]
-description = "Provides pre and post hooks for verify"
-dependencies = ["pre-verify-flow", "verify", "post-verify-flow"]
+[tasks.gen-members]
+workspace = false
+description = "Generate the list of workspace members"
+script = '''
+examples=$(ls | 
+grep -v README.md | 
+grep -v Makefile.toml | 
+grep -v cargo-make | 
+grep -v gtk | 
+jq -R -s -c 'split("\n")[:-1]')
+echo "CARGO_MAKE_CRATE_WORKSPACE_MEMBERS = $examples"
+'''
 
-[tasks.verify]
-description = "Run all quality checks and tests"
-dependencies = ["check-style", "test-unit-and-web"]
+[tasks.test-runner-report]
+workspace = false
+description = "report ci test runners for each example - OPTION: [all]"
+script = '''
+BOLD="\e[1m"
+GREEN="\e[0;32m"
+ITALIC="\e[3m"
+YELLOW="\e[0;33m"
+RESET="\e[0m"
 
-[tasks.test-unit-and-web]
-description = "Run all unit and web tests"
-dependencies = ["test-flow", "web-test-flow"]
+echo
+echo "${YELLOW}Test Runner Report${RESET}"
+echo "${ITALIC}Pass the option \"all\" to show all the examples${RESET}"
+echo
 
-[tasks.pre-verify-flow]
+makefile_paths=$(find . -name Makefile.toml -not -path '*/target/*' |
+  sed 's%./%%' |
+  sed 's%/Makefile.toml%%' |
+  grep -v Makefile.toml |
+  sort -u)
 
-[tasks.post-verify-flow]
+start_path=$(pwd)
 
-[tasks.web-test-flow]
-description = "Provides pre and post hooks for web-test"
-dependencies = ["pre-web-test-flow", "web-test", "post-web-test-flow"]
+for path in $makefile_paths; do
+  cd $path
 
-[tasks.pre-web-test-flow]
+  test_runner=
 
-[tasks.web-test]
+  test_count=$(grep -rl -E "#\[(test|rstest)\]" | wc -l)
+  if [ $test_count -gt 0 ]; then
+    test_runner="-C"
+  fi
 
-[tasks.post-web-test-flow]
+  while read -r line; do
+    case $line in
+      *"wasm-test.toml"*)
+          test_runner=$test_runner"-W"
+        ;;
+      *"playwright-test.toml"*)
+          test_runner=$test_runner"-P"
+        ;;
+      *"cargo-leptos-test.toml"*)
+          test_runner=$test_runner"-L"
+        ;;
+    esac
+  done <"./Makefile.toml"
+
+  if [ ! -z "$1" ]; then
+    # Show all examples
+    echo "$path ${BOLD}${test_runner}${RESET}"
+  elif [ ! -z $test_runner ]; then
+    # Filter out examples that do not run tests in `ci`
+    echo "$path ${BOLD}${test_runner}${RESET}"
+  fi
+
+  cd ${start_path}
+done
+echo
+echo "${ITALIC}Runners: C = Cargo Test, L = Cargo Leptos Test, P = Playwright Test, W = WASM Test${RESET}"
+echo
+'''

examples/README.md

@@ -0,0 +1,7 @@
+# Examples
+
+The examples in this directory are all built and tested against the current `main` branch.
+
+To the extent that new features have been released or breaking changes have been made since the previous release, the examples are compatible with the `main` branch and not the current release.
+
+To 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/Cargo.toml

@@ -0,0 +1,14 @@
+[package]
+name = "animated-show"
+version = "0.1.0"
+edition = "2021"
+
+[profile.release]
+codegen-units = 1
+lto = true
+
+[dependencies]
+leptos = { path = "../../leptos", features = ["csr"] }
+console_log = "1"
+log = "0.4"
+console_error_panic_hook = "0.1.7"

examples/animated_show/Makefile.toml

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

examples/animated_show/README.md

@@ -0,0 +1,9 @@
+# `<AnimatedShow>` combined with CSS animations
+
+This is a very simple example of the `<AnimatedShow>` component.
+
+This component is an extension for the `<Show>` component and it will not take in a fallback, but it will unmount the
+component from the DOM after a given duration. This makes it possible to have really easy unmount animations with just
+CSS.
+
+Just execute `trunk serve` to start the demo.

examples/animated_show/index.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<link data-trunk rel="rust" data-wasm-opt="z"/>
+		<link data-trunk rel="icon" type="image/ico" href="/public/favicon.ico"/>
+		<style>
+			.hover-me {
+				width: 100px;
+				margin: 1rem;
+				padding: 1rem;
+				text-align: center;
+				cursor: pointer;
+				border: 1px solid grey;
+			}
+			.here-i-am {
+				width: 100px;
+				margin: 1rem;
+				padding: 1rem;
+				text-align: center;
+				color: white;
+				font-weight: bold;
+				background: black;
+			}
+
+			@keyframes fade-in {
+				from { opacity: 0; }
+				to { opacity: 1; }
+			}
+			@keyframes fade-out {
+				from { opacity: 1; }
+				to { opacity: 0; }
+			}
+			.fade-in-1000 {
+				animation: 1000ms fade-in forwards;
+			}
+			.fade-out-1000 {
+				animation: 1000ms fade-out forwards;
+			}
+		</style>
+	</head>
+	<body></body>
+</html>

examples/animated_show/src/lib.rs

@@ -0,0 +1,34 @@
+use core::time::Duration;
+use leptos::*;
+
+#[component]
+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! { cx,
+        <div
+            class="hover-me"
+            on:mouseenter=move |_| show.set(true)
+            on:mouseleave=move |_| show.set(false)
+        >
+            "Hover Me"
+        </div>
+
+        <AnimatedShow
+            when=show
+            // optional CSS class which will be applied if `when == true`
+            show_class="fade-in-1000"
+            // optional CSS class which will be applied if `when == false` and before the
+            // `hide_delay` starts -> makes CSS unmount animations really easy
+            hide_class="fade-out-1000"
+            // the given unmount delay which should match your unmount animation duration
+            hide_delay=Duration::from_millis(1000)
+        >
+            // provide any `Children` inside here
+            <div class="here-i-am">
+                "Here I Am!"
+            </div>
+        </AnimatedShow>
+    }
+}

examples/animated_show/src/main.rs

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

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

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

examples/cargo-make/cargo-leptos.toml

@@ -0,0 +1,55 @@
+[tasks.install-cargo-leptos]
+install_crate = { crate_name = "cargo-leptos", binary = "cargo-leptos", test_arg = "--help" }
+
+[tasks.build]
+clear = true
+command = "cargo"
+args = ["leptos", "build"]
+
+[tasks.check]
+clear = true
+dependencies = ["check-debug", "check-release"]
+
+[tasks.check-debug]
+toolchain = "nightly"
+command = "cargo"
+args = ["check-all-features"]
+install_crate = "cargo-all-features"
+
+[tasks.check-release]
+toolchain = "nightly"
+command = "cargo"
+args = ["check-all-features", "--release"]
+install_crate = "cargo-all-features"
+
+[tasks.start-client]
+command = "cargo"
+args = ["leptos", "watch"]
+
+[tasks.stop-client]
+condition = { env_set = ["APP_PROCESS_NAME"] }
+script = '''
+  if [ ! -z $(pidof ${APP_PROCESS_NAME}) ]; then
+    pkill -f todo_app_sqlite
+  fi
+
+  if [ ! -z $(pidof ${APP_PROCESS_NAME}) ]; then
+    pkill -f cargo-leptos
+  fi
+'''
+
+[tasks.client-status]
+condition = { env_set = ["APP_PROCESS_NAME"] }
+script = '''
+  if [ -z $(pidof ${APP_PROCESS_NAME}) ]; then
+    echo "  ${APP_PROCESS_NAME} is not running"
+  else
+    echo "  ${APP_PROCESS_NAME} is up"
+  fi
+
+  if [ -z $(pidof cargo-leptos) ]; then
+    echo "  cargo-leptos is not running"
+  else
+    echo "  cargo-leptos is up"
+  fi
+'''

examples/cargo-make/clean.toml

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

examples/cargo-make/common.toml

@@ -1,14 +0,0 @@
-[env]
-CARGO_MAKE_CLIPPY_ARGS = "--all-targets -- -D warnings"
-
-[tasks.check-style]
-description = "Check for style violations"
-dependencies = ["check-format-flow", "clippy-flow"]
-
-[tasks.verify-local]
-description = "Run all quality checks and tests from an example directory"
-dependencies = ["check-style", "test-local"]
-
-[tasks.test-local]
-description = "Run all tests from an example directory"
-dependencies = ["test", "web-test"]

examples/cargo-make/compile.toml

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

examples/cargo-make/lint.toml

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

examples/cargo-make/main.toml

@@ -0,0 +1,41 @@
+extend = [
+    { path = "../cargo-make/compile.toml" },
+    { path = "../cargo-make/clean.toml" },
+    { path = "../cargo-make/lint.toml" },
+    { path = "../cargo-make/node.toml" },
+]
+
+# CI Stages
+
+[tasks.ci]
+dependencies = ["prepare", "lint", "build", "test-flow", "integration-test"]
+
+[tasks.prepare]
+dependencies = ["setup-node"]
+
+[tasks.lint]
+dependencies = ["check-style"]
+
+[tasks.integration-test]
+
+# Support Local Runs
+
+[tasks.ci-clean]
+dependencies = ["ci", "clean"]
+
+[tasks.check-clean]
+dependencies = ["check", "clean"]
+
+[tasks.build-clean]
+dependencies = ["build", "clean"]
+
+# ALIASES
+
+[tasks.verify-flow]
+alias = "ci"
+
+[tasks.t]
+dependencies = ["test-flow"]
+
+[tasks.it]
+alias = "integration-test"

examples/cargo-make/node.toml

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

examples/cargo-make/playwright-test.toml

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

examples/cargo-make/playwright.toml

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

examples/cargo-make/trunk_server.toml

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

examples/cargo-make/wasm-test.toml

@@ -0,0 +1,11 @@
+[tasks.test]
+env = { RUN_CARGO_TEST = false }
+condition = { env_true = ["RUN_CARGO_TEST"] }
+
+[tasks.post-test]
+dependencies = ["test-wasm"]
+
+[tasks.test-wasm]
+env = { CARGO_MAKE_WASM_TEST_ARGS = "--headless --chrome" }
+command = "cargo"
+args = ["make", "wasm-pack-test"]

examples/cargo-make/wasm-web-test.toml

@@ -1,4 +0,0 @@
-[tasks.web-test]
-env = { CARGO_MAKE_WASM_TEST_ARGS = "--headless --chrome" }
-command = "cargo"
-args = ["make", "wasm-pack-test"]

examples/cargo-make/webdriver.toml

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

examples/counter/Cargo.toml

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

examples/counter/Makefile.toml

@@ -1,14 +1,4 @@
 extend = [
-    { path = "../cargo-make/common.toml" },
-    { path = "../cargo-make/wasm-web-test.toml" },
+    { path = "../cargo-make/main.toml" },
+    { path = "../cargo-make/wasm-test.toml" },
 ]
-
-[tasks.build]
-command = "cargo"
-args = ["+nightly", "build-all-features"]
-install_crate = "cargo-all-features"
-
-[tasks.check]
-command = "cargo"
-args = ["+nightly", "check-all-features"]
-install_crate = "cargo-all-features"

examples/counter_isomorphic/Cargo.toml

@@ -19,19 +19,17 @@ console_error_panic_hook = "0.1"
 futures = "0.3"
 cfg-if = "1"
 lazy_static = "1"
-leptos = { path = "../../leptos", default-features = false, features = [
-	"serde",
-] }
+leptos = { path = "../../leptos" }
 leptos_actix = { path = "../../integrations/actix", optional = true }
-leptos_meta = { path = "../../meta", default-features = false }
-leptos_router = { path = "../../router", default-features = false }
+leptos_meta = { path = "../../meta" }
+leptos_router = { path = "../../router" }
 log = "0.4"
 gloo-net = { git = "https://github.com/rustwasm/gloo" }
-wasm-bindgen = "0.2"
+wasm-bindgen = "=0.2.87"
 serde = { version = "1", features = ["derive"] }
 
 [features]
-default = []
+default = ["nightly"]
 hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"]
 ssr = [
 	"dep:actix-files",
@@ -41,10 +39,10 @@ ssr = [
 	"leptos_meta/ssr",
 	"leptos_router/ssr",
 ]
-stable = ["leptos/stable", "leptos_router/stable"]
+nightly = ["leptos/nightly", "leptos_router/nightly"]
 
 [package.metadata.cargo-all-features]
-denylist = ["actix-files", "actix-web", "leptos_actix", "stable"]
+denylist = ["actix-files", "actix-web", "leptos_actix", "nightly"]
 skip_feature_sets = [["ssr", "hydrate"]]
 
 [package.metadata.leptos]

examples/counter_isomorphic/Makefile.toml

@@ -1,9 +1 @@
-[tasks.build]
-command = "cargo"
-args = ["+nightly", "build-all-features"]
-install_crate = "cargo-all-features"
-
-[tasks.check]
-command = "cargo"
-args = ["+nightly", "check-all-features"]
-install_crate = "cargo-all-features"
+extend = [{ path = "../cargo-make/main.toml" }]

examples/counter_isomorphic/src/counters.rs

@@ -1,27 +1,20 @@
+use cfg_if::cfg_if;
 use leptos::*;
-use leptos_router::*;
 use leptos_meta::*;
+use leptos_router::*;
 
-#[cfg(feature = "ssr")]
-use std::sync::atomic::{AtomicI32, Ordering};
+cfg_if! {
+    if #[cfg(feature = "ssr")] {
+        use std::sync::atomic::{AtomicI32, Ordering};
+        use broadcaster::BroadcastChannel;
+        static COUNT: AtomicI32 = AtomicI32::new(0);
 
-#[cfg(feature = "ssr")]
-use broadcaster::BroadcastChannel;
-
-#[cfg(feature = "ssr")]
-pub fn register_server_functions() {
-    _ = GetServerCount::register();
-    _ = AdjustServerCount::register();
-    _ = ClearServerCount::register();
+        lazy_static::lazy_static! {
+            pub static ref COUNT_CHANNEL: BroadcastChannel<i32> = BroadcastChannel::new();
+        }
+    }
 }
 
-#[cfg(feature = "ssr")]
-static COUNT: AtomicI32 = AtomicI32::new(0);
-
-#[cfg(feature = "ssr")]
-lazy_static::lazy_static! {
-    pub static ref COUNT_CHANNEL: BroadcastChannel<i32> = BroadcastChannel::new();
-}
 // "/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> {
@@ -29,7 +22,10 @@ pub async fn get_server_count() -> Result<i32, ServerFnError> {
 }
 
 #[server(AdjustServerCount, "/api")]
-pub async fn adjust_server_count(delta: i32, msg: String) -> Result<i32, ServerFnError> {
+pub async fn adjust_server_count(
+    delta: i32,
+    msg: String,
+) -> Result<i32, ServerFnError> {
     let new = COUNT.load(Ordering::Relaxed) + delta;
     COUNT.store(new, Ordering::Relaxed);
     _ = COUNT_CHANNEL.send(&new).await;
@@ -46,36 +42,35 @@ pub async fn clear_server_count() -> Result<i32, ServerFnError> {
 #[component]
 pub fn Counters(cx: Scope) -> impl IntoView {
     provide_meta_context(cx);
-    view! {
-        cx,
+    view! { cx,
         <Router>
             <header>
                 <h1>"Server-Side Counters"</h1>
                 <p>"Each of these counters stores its data in the same variable on the server."</p>
-                <p>"The value is shared across connections. Try opening this is another browser tab to see what I mean."</p>
+                <p>
+                    "The value is shared across connections. Try opening this is another browser tab to see what I mean."
+                </p>
             </header>
             <nav>
                 <ul>
-                    <li><A href="">"Simple"</A></li>
-                    <li><A href="form">"Form-Based"</A></li>
-                    <li><A href="multi">"Multi-User"</A></li>
+                    <li>
+                        <A href="">"Simple"</A>
+                    </li>
+                    <li>
+                        <A href="form">"Form-Based"</A>
+                    </li>
+                    <li>
+                        <A href="multi">"Multi-User"</A>
+                    </li>
                 </ul>
             </nav>
             <Link rel="shortcut icon" type_="image/ico" href="/favicon.ico"/>
             <main>
                 <Routes>
-                    <Route path="" view=|cx| view! {
-                        cx,
-                        <Counter/>
-                    }/>
-                    <Route path="form" view=|cx| view! {
-                        cx,
-                        <FormCounter/>
-                    }/>
-                    <Route path="multi" view=|cx| view! {
-                        cx,
-                        <MultiuserCounter/>
-                    }/>
+                    <Route path="" view=Counter/>
+                    <Route path="form" view=FormCounter/>
+                    <Route path="multi" view=MultiuserCounter/>
+                    <Route path="multi" view=NotFound/>
                 </Routes>
             </main>
         </Router>
@@ -93,33 +88,47 @@ pub fn Counter(cx: Scope) -> impl IntoView {
     let clear = create_action(cx, |_| clear_server_count());
     let counter = create_resource(
         cx,
-        move || (dec.version().get(), inc.version().get(), clear.version().get()),
+        move || {
+            (
+                dec.version().get(),
+                inc.version().get(),
+                clear.version().get(),
+            )
+        },
         |_| get_server_count(),
     );
 
-    let value = move || counter.read(cx).map(|count| count.unwrap_or(0)).unwrap_or(0);
-    let error_msg = move || {
+    let value = move || {
         counter
             .read(cx)
-            .map(|res| match res {
-                Ok(_) => None,
-                Err(e) => Some(e),
-            })
-            .flatten()
+            .map(|count| count.unwrap_or(0))
+            .unwrap_or(0)
+    };
+    let error_msg = move || {
+        counter.read(cx).and_then(|res| match res {
+            Ok(_) => None,
+            Err(e) => Some(e),
+        })
     };
 
-    view! {
-        cx,
+    view! { cx,
         <div>
             <h2>"Simple Counter"</h2>
-            <p>"This counter sets the value on the server and automatically reloads the new value."</p>
+            <p>
+                "This counter sets the value on the server and automatically reloads the new value."
+            </p>
             <div>
                 <button on:click=move |_| clear.dispatch(())>"Clear"</button>
                 <button on:click=move |_| dec.dispatch(())>"-1"</button>
                 <span>"Value: " {value} "!"</span>
                 <button on:click=move |_| inc.dispatch(())>"+1"</button>
             </div>
-            {move || error_msg().map(|msg| view! { cx, <p>"Error: " {msg.to_string()}</p>})}
+            {move || {
+                error_msg()
+                    .map(|msg| {
+                        view! { cx, <p>"Error: " {msg.to_string()}</p> }
+                    })
+            }}
         </div>
     }
 }
@@ -142,27 +151,19 @@ pub fn FormCounter(cx: Scope) -> impl IntoView {
     );
     let value = move || {
         log::debug!("FormCounter looking for value");
-        counter
-            .read(cx)
-            .map(|n| n.ok())
-            .flatten()
-            .map(|n| n)
-            .unwrap_or(0)
+        counter.read(cx).and_then(|n| n.ok()).unwrap_or(0)
     };
 
-    view! {
-        cx,
+    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>
+            <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"/>
@@ -185,26 +186,32 @@ pub fn FormCounter(cx: Scope) -> impl IntoView {
 // This is the primitive pattern for live chat, collaborative editing, etc.
 #[component]
 pub fn MultiuserCounter(cx: Scope) -> impl IntoView {
-    let dec = 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 dec =
+        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 = {
         use futures::StreamExt;
 
-        let mut source = gloo_net::eventsource::futures::EventSource::new("/api/events")
-            .expect("couldn't connect to SSE stream");
+        let mut source =
+            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().map(|value| {
-                match value {
-                    Ok(value) => {
-                        value.1.data().as_string().expect("expected string value")
-                    },
+            source
+                .subscribe("message")
+                .unwrap()
+                .map(|value| match value {
+                    Ok(value) => value
+                        .1
+                        .data()
+                        .as_string()
+                        .expect("expected string value"),
                     Err(_) => "0".to_string(),
-                }
-            })
+                }),
         );
 
         on_cleanup(cx, move || source.close());
@@ -212,20 +219,33 @@ pub fn MultiuserCounter(cx: Scope) -> impl IntoView {
     };
 
     #[cfg(feature = "ssr")]
-    let (multiplayer_value, _) =
-        create_signal(cx, None::<i32>);
+    let (multiplayer_value, _) = create_signal(cx, None::<i32>);
 
-    view! {
-        cx,
+    view! { cx,
         <div>
             <h2>"Multi-User Counter"</h2>
-            <p>"This one uses server-sent events (SSE) to live-update when other users make changes."</p>
+            <p>
+                "This one uses server-sent events (SSE) to live-update when other users make changes."
+            </p>
             <div>
                 <button on:click=move |_| clear.dispatch(())>"Clear"</button>
                 <button on:click=move |_| dec.dispatch(())>"-1"</button>
-                <span>"Multiplayer Value: " {move || multiplayer_value.get().unwrap_or_default().to_string()}</span>
+                <span>
+                    "Multiplayer Value: " {move || multiplayer_value.get().unwrap_or_default()}
+                </span>
                 <button on:click=move |_| inc.dispatch(())>"+1"</button>
             </div>
         </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

@@ -1,10 +1,10 @@
 use cfg_if::cfg_if;
-use leptos::*;
 pub mod counters;
 
 // Needs to be in lib.rs AFAIK because wasm-bindgen needs us to be compiling a lib. I may be wrong.
 cfg_if! {
     if #[cfg(feature = "hydrate")] {
+        use leptos::*;
         use wasm_bindgen::prelude::wasm_bindgen;
         use crate::counters::*;
 

examples/counter_isomorphic/src/main.rs

@@ -1,11 +1,11 @@
 use cfg_if::cfg_if;
-use leptos::*;
 mod counters;
 
 // boilerplate to run in different modes
 cfg_if! {
     // server-only stuff
     if #[cfg(feature = "ssr")] {
+        use leptos::*;
         use actix_files::{Files};
         use actix_web::*;
         use crate::counters::*;
@@ -31,13 +31,18 @@ cfg_if! {
         #[actix_web::main]
         async fn main() -> std::io::Result<()> {
 
-            crate::counters::register_server_functions();
+            // Explicit server function registration is no longer required
+            // on the main branch. On 0.3.0 and earlier, uncomment the lines
+            // below to register the server functions.
+            // _ = GetServerCount::register();
+            // _ = AdjustServerCount::register();
+            // _ = ClearServerCount::register();
 
             // Setting this to None means we'll be using cargo-leptos and its env vars.
             // when not using cargo-leptos None must be replaced with Some("Cargo.toml")
             let conf = get_configuration(None).await.unwrap();
 
-            let addr = conf.leptos_options.site_addr.clone();
+            let addr = conf.leptos_options.site_addr;
             let routes = generate_route_list(|cx| view! { cx, <Counters/> });
 
             HttpServer::new(move || {
@@ -47,15 +52,36 @@ cfg_if! {
                 App::new()
                     .service(counter_events)
                     .route("/api/{tail:.*}", leptos_actix::handle_server_fns())
-                    .leptos_routes(leptos_options.to_owned(), routes.to_owned(), |cx| view! { cx, <Counters/> })
-                    .service(Files::new("/", &site_root))
+                    // serve JS/WASM/CSS from `pkg`
+                    .service(Files::new("/pkg", format!("{site_root}/pkg")))
+                    // serve other assets from the `assets` directory
+                    .service(Files::new("/assets", site_root))
+                    // serve the favicon from /favicon.ico
+                    .service(favicon)
+                    .leptos_routes(
+                        leptos_options.to_owned(),
+                        routes.to_owned(),
+                        Counters,
+                    )
+                    .app_data(web::Data::new(leptos_options.to_owned()))
                     //.wrap(middleware::Compress::default())
             })
             .bind(&addr)?
             .run()
             .await
         }
+
+        #[actix_web::get("favicon.ico")]
+        async fn favicon(
+            leptos_options: actix_web::web::Data<leptos::LeptosOptions>,
+        ) -> actix_web::Result<actix_files::NamedFile> {
+            let leptos_options = leptos_options.into_inner();
+            let site_root = &leptos_options.site_root;
+            Ok(actix_files::NamedFile::open(format!(
+                "{site_root}/favicon.ico"
+            ))?)
         }
+    }
 
     // client-only main for Trunk
     else {

examples/counter_url_query/Cargo.toml

@@ -0,0 +1,20 @@
+[package]
+name = "counter_url_query"
+version = "0.1.0"
+edition = "2021"
+
+[profile.release]
+codegen-units = 1
+lto = true
+
+[dependencies]
+leptos = { path = "../../leptos", features = ["csr", "nightly"] }
+leptos_router = { path = "../../router", features = ["csr"] }
+console_log = "1"
+log = "0.4"
+console_error_panic_hook = "0.1.7"
+
+[dev-dependencies]
+wasm-bindgen = "0.2"
+wasm-bindgen-test = "0.3.0"
+web-sys = "0.3"