differentiate suspense/errorboundary

.github/workflows/check-examples.yml

@@ -14,7 +14,6 @@ jobs:
     runs-on: ubuntu-latest
     outputs:
       matrix: ${{ steps.set-matrix.outputs.matrix }}
-      source_changed: ${{ steps.set-source-changed.outputs.source_changed }}
     steps:
       - name: Checkout
         uses: actions/checkout@v3
@@ -35,36 +34,9 @@ jobs:
           echo "Example Directories: $examples"
           echo "matrix={\"directory\":$examples}" >> "$GITHUB_OUTPUT"
 
-      - name: Get source files that changed
-        id: changed-source
-        uses: tj-actions/changed-files@v36
-        with:
-          files: |
-            integrations
-            leptos
-            leptos_config
-            leptos_dom
-            leptos_hot_reload
-            leptos_macro
-            leptos_reactive
-            leptos_server
-            meta
-            router
-            server_fn
-            server_fn_macro
-
-      - name: List source files that changed
-        run: echo '${{ steps.changed-source.outputs.all_changed_files }}'
-
-      - name: Set source_changed
-        id: set-source-changed
-        run: |
-          echo "source_changed=${{ steps.changed-source.outputs.any_changed }}" >> "$GITHUB_OUTPUT"
-
   matrix-job:
     name: Check
     needs: [setup]
-    if: needs.setup.outputs.source_changed == 'true'
     strategy:
       matrix: ${{ fromJSON(needs.setup.outputs.matrix) }}
       fail-fast: false

.github/workflows/ci.yml

@@ -9,45 +9,8 @@ on:
       - main
 
 jobs:
-  setup:
-    name: Detect Changes
-    runs-on: ubuntu-latest
-    outputs:
-      source_changed: ${{ steps.set-source-changed.outputs.source_changed }}
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - 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:

ARCHITECTURE.md

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

CONTRIBUTING.md

@@ -70,25 +70,6 @@ are a few guidelines that will make it a better experience for everyone:
   `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

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

Makefile.toml

@@ -20,18 +20,6 @@ cwd = "examples"
 command = "cargo"
 args = ["make", "ci-clean"]
 
-[tasks.check-examples]
-workspace = false
-cwd = "examples"
-command = "cargo"
-args = ["make", "check-clean"]
-
-[tasks.build-examples]
-workspace = false
-cwd = "examples"
-command = "cargo"
-args = ["make", "build-clean"]
-
 [tasks.clean-examples]
 workspace = false
 cwd = "examples"

README.md

@@ -88,6 +88,8 @@ targets = ["wasm32-unknown-unknown"]
 
 The `nightly` feature enables the function call syntax for accessing and setting signals, as opposed to `.get()` and `.set()`. This leads to a consistent mental model in which accessing a reactive value of any kind (a signal, memo, or derived signal) is always represented as a function call. This is only possible with nightly Rust and the `nightly` feature.
 
+> Note: The `nightly` feature is present on the main branch version right now, but not in 0.3.x. For 0.3.x, nightly is the default and `stable` has a special feature.
+
 ## `cargo-leptos`
 
 [`cargo-leptos`](https://github.com/leptos-rs/cargo-leptos) is a build tool that's designed to make it easy to build apps that run on both the client and the server, with seamless integration. The best way to get started with a real Leptos project right now is to use `cargo-leptos` and our starter templates for [Actix](https://github.com/leptos-rs/start) or [Axum](https://github.com/leptos-rs/start-axum).
@@ -105,7 +107,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, 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.
+_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.
 
 ### Is it production ready?
 

cargo-make/lint.toml

@@ -1,11 +1,9 @@
-[tasks.lint]
-dependencies = ["check-format-flow", "clippy-each-feature"]
+[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}"]
-
-[tasks.clippy-each-feature]
-dependencies = ["install-clippy"]
-command = "cargo"
-args = ["hack", "clippy", "--all", "--each-feature", "--no-dev-deps"]

cargo-make/main.toml

@@ -13,3 +13,6 @@ RUSTFLAGS = "-D warnings"
 
 [tasks.ci]
 dependencies = ["lint", "test"]
+
+[tasks.lint]
+dependencies = ["check-format-flow"]

docs/COMMON_BUGS.md

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

docs/book/src/02_getting_started.md

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

docs/book/src/15_global_state.md

@@ -29,15 +29,15 @@ all its children and descendants using `provide_context`.
 
 ```rust
 #[component]
-fn App() -> impl IntoView {
+fn App(cx: Scope) -> impl IntoView {
     // here we create a signal in the root that can be consumed
     // anywhere in the app.
-    let (count, set_count) = create_signal(0);
+    let (count, set_count) = create_signal(cx, 0);
     // we'll pass the setter to specific components,
     // but provide the count itself to the whole app via context
-    provide_context(count);
+    provide_context(cx, count);
 
-    view! {
+    view! { cx,
         // SetterButton is allowed to modify the count
         <SetterButton set_count/>
         // These consumers can only read from it
@@ -57,14 +57,14 @@ fn App() -> impl IntoView {
 ```rust
 /// A component that does some "fancy" math with the global count
 #[component]
-fn FancyMath() -> impl IntoView {
+fn FancyMath(cx: Scope) -> impl IntoView {
     // here we consume the global count signal with `use_context`
-    let count = use_context::<ReadSignal<u32>>()
+    let count = use_context::<ReadSignal<u32>>(cx)
         // we know we just provided this in the parent component
         .expect("there to be a `count` signal provided");
     let is_even = move || count() & 1 == 0;
 
-    view! {
+    view! { cx,
         <div class="consumer blue">
             "The number "
             <strong>{count}</strong>
@@ -89,17 +89,17 @@ struct GlobalState {
 }
 
 impl GlobalState {
-    pub fn new() -> Self {
+    pub fn new(cx: Scope) -> Self {
         Self {
-            count: create_rw_signal(0),
-            name: create_rw_signal("Bob".to_string())
+            count: create_rw_signal(cx, 0),
+            name: create_rw_signal(cx, "Bob".to_string())
         }
     }
 }
 
 #[component]
-fn App() -> impl IntoView {
-    provide_context(GlobalState::new());
+fn App(cx: Scope) -> impl IntoView {
+    provide_context(cx, GlobalState::new(cx));
 
     // etc.
 }
@@ -117,8 +117,8 @@ struct GlobalState {
 }
 
 #[component]
-fn App() -> impl IntoView {
-    provide_context(create_rw_signal(GlobalState::default()));
+fn App(cx: Scope) -> impl IntoView {
+    provide_context(cx, create_rw_signal(GlobalState::default()));
 
     // etc.
 }
@@ -127,8 +127,8 @@ fn App() -> impl IntoView {
 But there’s a problem: because our whole state is wrapped in one signal, updating the value of one field will cause reactive updates in parts of the UI that only depend on the other.
 
 ```rust
-let state = expect_context::<RwSignal<GlobalState>>();
-view! {
+let state = expect_context::<RwSignal<GlobalState>>(cx);
+view! { cx,
     <button on:click=move |_| state.update(|n| *n += 1)>"+1"</button>
     <p>{move || state.with(|state| state.name.clone())}</p>
 }
@@ -136,19 +136,19 @@ view! {
 
 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.
+There’s a better way. You can use 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() -> impl IntoView {
-    let state = expect_context::<RwSignal<GlobalState>>();
+fn GlobalStateCounter(cx: Scope) -> impl IntoView {
+    let state = expect_context::<RwSignal<GlobalState>>(cx);
 
     // `create_slice` lets us create a "lens" into the data
     let (count, set_count) = create_slice(
-
+        cx,
         // we take a slice *from* `state`
         state,
         // our getter returns a "slice" of the data
@@ -157,7 +157,7 @@ fn GlobalStateCounter() -> impl IntoView {
         |state, n| state.count = n,
     );
 
-    view! {
+    view! { cx,
         <div class="consumer blue">
             <button
                 on:click=move |_| {
@@ -183,222 +183,3 @@ data flow and of fine-grained reactive updates.
 [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>
-
-<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() -> impl IntoView {
-    // here we create a signal in the root that can be consumed
-    // anywhere in the app.
-    let (count, set_count) = create_signal(0);
-    // we'll pass the setter to specific components,
-    // but provide the count itself to the whole app via context
-    provide_context(count);
-
-    view! {
-        <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(set_count: WriteSignal<u32>) -> impl IntoView {
-    view! {
-        <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() -> impl IntoView {
-    // here we consume the global count signal with `use_context`
-    let count = use_context::<ReadSignal<u32>>()
-        // 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! {
-        <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() -> impl IntoView {
-    // again, consume the global count signal with `use_context`
-    let count = use_context::<ReadSignal<u32>>().expect("there to be a `count` signal provided");
-
-    let squares = move || {
-        (0..count())
-            .map(|n| view! { <li>{n}<sup>"2"</sup> " is " {n * n}</li> })
-            .collect::<Vec<_>>()
-    };
-
-    view! {
-        <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() -> impl IntoView {
-    // we'll provide a single signal that holds the whole state
-    // each component will be responsible for creating its own "lens" into it
-    let state = create_rw_signal(GlobalState::default());
-    provide_context(state);
-
-    view! {
-        <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() -> impl IntoView {
-    let state = use_context::<RwSignal<GlobalState>>().expect("state to have been provided");
-
-    // `create_slice` lets us create a "lens" into the data
-    let (count, set_count) = create_slice(
-
-        // 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! {
-        <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() -> impl IntoView {
-    let state = use_context::<RwSignal<GlobalState>>().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(
-
-        // 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! {
-        <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(|| view! { <Option2/><Option3/> })
-}
-
-```
-
-</details>
-</preview>

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

@@ -2,7 +2,7 @@
 
 A [Resource](https://docs.rs/leptos/latest/leptos/struct.Resource.html) is a reactive data structure that reflects the current state of an asynchronous task, allowing you to integrate asynchronous `Future`s into the synchronous reactive system. Rather than waiting for its data to load with `.await`, you transform the `Future` into a signal that returns `Some(T)` if it has resolved, and `None` if it’s still pending.
 
-You do this by using the [`create_resource`](https://docs.rs/leptos/latest/leptos/fn.create_resource.html) function. This takes two arguments:
+You do this by using the [`create_resource`](https://docs.rs/leptos/latest/leptos/fn.create_resource.html) function. This takes two arguments (other than the ubiquitous `cx`):
 
 1. a source signal, which will generate a new `Future` whenever it changes
 2. a fetcher function, which takes the data from that signal and returns a `Future`
@@ -11,10 +11,10 @@ Here’s an example
 
 ```rust
 // our source signal: some synchronous, local state
-let (count, set_count) = create_signal(0);
+let (count, set_count) = create_signal(cx, 0);
 
 // our resource
-let async_data = create_resource(
+let async_data = create_resource(cx,
     count,
     // every time `count` changes, this will run
     |value| async move {
@@ -27,20 +27,23 @@ let async_data = create_resource(
 To create a resource that simply runs once, you can pass a non-reactive, empty source signal:
 
 ```rust
-let once = create_resource(|| (), |_| async move { load_data().await });
+let once = create_resource(cx, || (), |_| async move { load_data().await });
 ```
 
-To access the value you can use `.read()` or `.with(|data| /* */)`. These work just like `.get()` and `.with()` on a signal—`read` clones the value and returns it, `with` applies a closure to it—but for any `Resource<_, T>`, they always return `Option<T>`, not `T`: because it’s always possible that your resource is still loading.
+To access the value you can use `.read(cx)` or `.with(cx, |data| /* */)`. These work just like `.get()` and `.with()` on a signal—`read` clones the value and returns it, `with` applies a closure to it—but with two differences
+
+1. For any `Resource<_, T>`, they always return `Option<T>`, not `T`: because it’s always possible that your resource is still loading.
+2. They take a `Scope` argument. You’ll see why in the next chapter, on `<Suspense/>`.
 
 So, you can show the current state of a resource in your view:
 
 ```rust
-let once = create_resource(|| (), |_| async move { load_data().await });
-view! {
+let once = create_resource(cx, || (), |_| async move { load_data().await });
+view! { cx,
     <h1>"My Data"</h1>
-    {move || match once.read() {
-        None => view! { <p>"Loading..."</p> }.into_view(),
-        Some(data) => view! { <ShowData data/> }.into_view()
+    {move || match once.read(cx) {
+        None => view! { cx, <p>"Loading..."</p> }.into_view(cx),
+        Some(data) => view! { cx, <ShowData data/> }.into_view(cx)
     }}
 }
 ```
@@ -50,89 +53,3 @@ 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() -> impl IntoView {
-    // this count is our synchronous, local state
-    let (count, set_count) = create_signal(0);
-
-    // create_resource takes two arguments after its scope
-    let async_data = create_resource(
-
-        // 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(|| (), |_| 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()
-            .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! {
-        <button
-            on:click=move |_| {
-                set_count.update(|n| *n += 1);
-            }
-        >
-            "Click me"
-        </button>
-        <p>
-            <code>"stable"</code>": " {move || stable.read()}
-        </p>
-        <p>
-            <code>"count"</code>": " {count}
-        </p>
-        <p>
-            <code>"async_value"</code>": "
-            {async_result}
-            <br/>
-            {is_loading}
-        </p>
-    }
-}
-
-fn main() {
-    leptos::mount_to_body(|| view! { <App/> })
-}
-
-```
-
-</details>
-</preview>

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

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

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

@@ -9,76 +9,3 @@ 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() -> impl IntoView {
-    let (tab, set_tab) = create_signal(0);
-
-    // this will reload every time `tab` changes
-    let user_data = create_resource(tab, |tab| async move { important_api_call(tab).await });
-
-    view! {
-        <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! { <p>"Loading..."</p> }
-        >
-            <p>
-                {move || user_data.read()}
-            </p>
-        </Transition>
-    }
-}
-
-fn main() {
-    leptos::mount_to_body(|| view! { <App/> })
-}
-
-```
-
-</details>
-</preview>

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

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

docs/book/src/interlude_projecting_children.md

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

docs/book/src/interlude_styling.md

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

docs/book/src/progressive_enhancement/action_form.md

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

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

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

docs/book/src/reactivity/interlude_functions.md

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

docs/book/src/reactivity/working_with_signals.md

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

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

@@ -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 one 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 ones decides what to do when the URL changes?
 
 Let’s start with a simple `<App/>` component using the router:
 
@@ -33,8 +33,8 @@ use leptos::*;
 use leptos_router::*;
 
 #[component]
-pub fn App() -> impl IntoView {
-  view! {
+pub fn App(cx: Scope) -> impl IntoView {
+  view! { cx,
     <Router>
       <nav>
         /* ... */
@@ -58,8 +58,8 @@ use leptos::*;
 use leptos_router::*;
 
 #[component]
-pub fn App() -> impl IntoView {
-  view! {
+pub fn App(cx: Scope) -> impl IntoView {
+  view! { cx,
     <Router>
       <nav>
         /* ... */
@@ -83,21 +83,19 @@ The `path` can include
 - dynamic, named parameters beginning with a colon (`/:id`),
 - and/or a wildcard beginning with an asterisk (`/user/*any`)
 
-The `view` is a function that returns a view. Any component with no props works here, as does a closure that returns some view.
+The `view` is a function that takes a `Scope` and returns a view.
 
 ```rust
 <Routes>
-  <Route path="/" view=Home/>
-  <Route path="/users" view=Users/>
-  <Route path="/users/:id" view=UserProfile/>
-  <Route path="/*any" view=|| view! { <h1>"Not Found"</h1> }/>
+  <Route path="/" 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/> }/>
 </Routes>
 ```
 
-> `view` takes a `Fn(Scope) -> impl IntoView`. If a component has no props, it is a function that takes `Scope` and returns `impl IntoView`, so it can be passed directly into the `view`. In this case, `view=Home` is just a shorthand for `|cx| view! { cx, <Home/> }`.
+> The router scores each route to see how good a match it is, so you can define your routes in any order.
 
 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=Home/>
-  <Route path="/users" view=Users/>
-  <Route path="/users/:id" view=UserProfile/>
-  <Route path="/*any" view=NotFound/>
+  <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 /> }/>
 </Routes>
 ```
 
@@ -17,11 +17,11 @@ Well... you can!
 
 ```rust
 <Routes>
-  <Route path="/" view=Home/>
-  <Route path="/users" view=Users>
-    <Route path=":id" view=UserProfile/>
+  <Route path="/" view=|cx| view! { cx, <Home /> }/>
+  <Route path="/users" view=|cx| view! { cx, <Users /> }>
+    <Route path=":id" view=|cx| view! { cx, <UserProfile /> }/>
   </Route>
-  <Route path="/*any" view=NotFound/>
+  <Route path="/*any" view=|cx| view! { cx, <NotFound /> }/>
 </Routes>
 ```
 
@@ -39,8 +39,8 @@ Let’s look back at our practical example.
 
 ```rust
 <Routes>
-  <Route path="/users" view=Users/>
-  <Route path="/users/:id" view=UserProfile/>
+  <Route path="/users" view=|cx| view! { cx, <Users /> }/>
+  <Route path="/users/:id" view=|cx| view! { cx, <UserProfile /> }/>
 </Routes>
 ```
 
@@ -53,8 +53,8 @@ Let’s say I use nested routes instead:
 
 ```rust
 <Routes>
-  <Route path="/users" view=Users>
-    <Route path=":id" view=UserProfile/>
+  <Route path="/users" view=|cx| view! { cx, <Users /> }>
+    <Route path=":id" view=|cx| view! { cx, <UserProfile /> }/>
   </Route>
 </Routes>
 ```
@@ -68,9 +68,9 @@ I actually need to add a fallback route
 
 ```rust
 <Routes>
-  <Route path="/users" view=Users>
-    <Route path=":id" view=UserProfile/>
-    <Route path="" view=NoUser/>
+  <Route path="/users" view=|cx| view! { cx, <Users /> }>
+    <Route path=":id" view=|cx| view! { cx, <UserProfile /> }/>
+    <Route path="" view=|cx| view! { cx, <NoUser /> }/>
   </Route>
 </Routes>
 ```
@@ -94,8 +94,8 @@ You can easily define this with nested routes
 
 ```rust
 <Routes>
-  <Route path="/contacts" view=ContactList>
-    <Route path=":id" view=ContactInfo/>
+  <Route path="/contacts" view=|cx| view! { cx, <ContactList/> }>
+    <Route path=":id" view=|cx| view! { cx, <ContactInfo/> }/>
     <Route path="" view=|cx| view! { cx,
       <p>"Select a contact to view more info."</p>
     }/>
@@ -107,13 +107,13 @@ You can go even deeper. Say you want to have tabs for each contact’s address,
 
 ```rust
 <Routes>
-  <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 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>
-    <Route path="" view=|| view! {
+    <Route path="" view=|cx| view! { cx,
       <p>"Select a contact to view more info."</p>
     }/>
   </Route>
@@ -135,15 +135,15 @@ That’s all! But it’s important to know and to remember, because it’s a com
 
 ```rust
 #[component]
-pub fn ContactList() -> impl IntoView {
+pub fn ContactList(cx: Scope) -> impl IntoView {
   let contacts = todo!();
 
-  view! {
+  view! { cx,
     <div style="display: flex">
       // the contact list
       <For each=contacts
         key=|contact| contact.id
-        view=|contact| todo!()
+        view=|cx, contact| todo!()
       >
       // the nested child, if any
       // don’t forget this!
@@ -170,119 +170,3 @@ 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() -> impl IntoView {
-    view! {
-        <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=|| view! {
-                        <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=|| view! {
-                                <div class="tab">
-                                    "(Conversations)"
-                                </div>
-                            }/>
-                        </Route>
-                        // if no id specified, fall back
-                        <Route path="" view=|| view! {
-                            <div class="select-user">
-                                "Select a user to view contact info."
-                            </div>
-                        }/>
-                    </Route>
-                </Routes>
-            </main>
-        </Router>
-    }
-}
-
-#[component]
-fn ContactList() -> impl IntoView {
-    view! {
-        <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() -> impl IntoView {
-    // we can access the :id param reactively with `use_params_map`
-    let params = use_params_map();
-    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! {
-        <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(|| view! { <App/> })
-}
-
-```
-
-</details>
-</preview>

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

@@ -36,22 +36,14 @@ 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.
 
 ```rust
-let params = use_params::<ContactParams>();
-let query = use_query::<ContactSearch>();
+let params = use_params::<ContactParams>(cx);
+let query = use_query::<ContactSearch>(cx);
 
 // id: || -> usize
 let id = move || {
@@ -66,8 +58,8 @@ let id = move || {
 The untyped versions return `Memo<ParamsMap>`. Again, it’s memo to react to changes in the URL. [`ParamsMap`](https://docs.rs/leptos_router/0.2.3/leptos_router/struct.ParamsMap.html) behaves a lot like any other map type, with a `.get()` method that returns `Option<&String>`.
 
 ```rust
-let params = use_params_map();
-let query = use_query_map();
+let params = use_params_map(cx);
+let query = use_query_map(cx);
 
 // id: || -> Option<String>
 let id = move || {
@@ -85,119 +77,3 @@ This can get a little messy: deriving a signal that wraps an `Option<_>` or `Res
 [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() -> impl IntoView {
-    view! {
-        <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=|| view! {
-                        <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=|| view! {
-                                <div class="tab">
-                                    "(Conversations)"
-                                </div>
-                            }/>
-                        </Route>
-                        // if no id specified, fall back
-                        <Route path="" view=|| view! {
-                            <div class="select-user">
-                                "Select a user to view contact info."
-                            </div>
-                        }/>
-                    </Route>
-                </Routes>
-            </main>
-        </Router>
-    }
-}
-
-#[component]
-fn ContactList() -> impl IntoView {
-    view! {
-        <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() -> impl IntoView {
-    // we can access the :id param reactively with `use_params_map`
-    let params = use_params_map();
-    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! {
-        <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(|| view! { <App/> })
-}
-
-```
-
-</details>
-</preview>

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

@@ -11,8 +11,6 @@ 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.
@@ -23,119 +21,3 @@ The router also provides an [`<A>`](https://docs.rs/leptos_router/latest/leptos_
 [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() -> impl IntoView {
-    view! {
-        <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=|| view! {
-                        <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=|| view! {
-                                <div class="tab">
-                                    "(Conversations)"
-                                </div>
-                            }/>
-                        </Route>
-                        // if no id specified, fall back
-                        <Route path="" view=|| view! {
-                            <div class="select-user">
-                                "Select a user to view contact info."
-                            </div>
-                        }/>
-                    </Route>
-                </Routes>
-            </main>
-        </Router>
-    }
-}
-
-#[component]
-fn ContactList() -> impl IntoView {
-    view! {
-        <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() -> impl IntoView {
-    // we can access the :id param reactively with `use_params_map`
-    let params = use_params_map();
-    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! {
-        <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(|| view! { <App/> })
-}
-
-```
-
-</details>
-</preview>

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

@@ -24,15 +24,15 @@ async fn fetch_results() {
 }
 
 #[component]
-pub fn FormExample() -> impl IntoView {
+pub fn FormExample(cx: Scope) -> impl IntoView {
     // reactive access to URL query strings
-    let query = use_query_map();
+    let query = use_query_map(cx);
 	// search stored as ?q=
     let search = move || query().get("q").cloned().unwrap_or_default();
 	// a resource driven by the search string
-	let search_results = create_resource(search, fetch_results);
+	let search_results = create_resource(cx, search, fetch_results);
 
-	view! {
+	view! { cx,
 		<Form method="GET" action="">
 			<input type="search" name="search" value=search/>
 			<input type="submit"/>
@@ -51,7 +51,7 @@ This is a great pattern. The data flow is extremely clear: all data flows from t
 We can actually take it a step further and do something kind of clever:
 
 ```rust
-view! {
+view! { cx,
 	<Form method="GET" action="">
 		<input type="search" name="search" value=search
 			oninput="this.form.requestSubmit()"
@@ -65,117 +65,3 @@ 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() -> impl IntoView {
-    view! {
-        <Router>
-            <h1><code>"<Form/>"</code></h1>
-            <main>
-                <Routes>
-                    <Route path="" view=FormExample/>
-                </Routes>
-            </main>
-        </Router>
-    }
-}
-
-#[component]
-pub fn FormExample() -> impl IntoView {
-    // reactive access to URL query
-    let query = use_query_map();
-    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! {
-        // 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(|| view! { <App/> })
-}
-
-```
-
-</details>
-</preview>

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

@@ -31,9 +31,9 @@ pub async fn add_todo(title: String) -> Result<(), ServerFnError> {
 }
 
 #[component]
-pub fn BusyButton() -> impl IntoView {
+pub fn BusyButton(cx: Scope) -> impl IntoView {
 	view! {
-
+        cx,
         <button on:click=move |_| {
             spawn_local(async {
                 add_todo("So much to do!".to_string()).await;
@@ -100,9 +100,9 @@ In other words, you have two choices:
 > **Why not `PUT` or `DELETE`? Why URL/form encoding, and not JSON?**
 >
 > These are reasonable questions. Much of the web is built on REST API patterns that encourage the use of semantic HTTP methods like `DELETE` to delete an item from a database, and many devs are accustomed to sending data to APIs in the JSON format.
->
+> 
 > The reason we use `POST` or `GET` with URL-encoded data by default is the `<form>` support. For better or for worse, HTML forms don’t support `PUT` or `DELETE`, and they don’t support sending JSON. This means that if you use anything but a `GET` or `POST` request with URL-encoded data, it can only work once WASM has loaded. As we’ll see [in a later chapter](../progressive_enhancement), this isn’t always a great idea.
->
+> 
 > The CBOR encoding is suported for historical reasons; an earlier version of server functions used a URL encoding that didn’t support nested objects like structs or vectors as server function arguments, which CBOR did. But note that the CBOR forms encounter the same issue as `PUT`, `DELETE`, or JSON: they do not degrade gracefully if the WASM version of your app is not available.
 
 ## An Important Note on Security
@@ -113,7 +113,7 @@ Server functions are a cool technology, but it’s very important to remember. *
 
 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:
+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](../async/README.md). 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.

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

@@ -6,9 +6,9 @@ The server functions we looked at in the last chapter showed how to run code on
 
 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.
+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_actix/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.
+> If 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
 
@@ -23,12 +23,12 @@ The [`extract` function in `leptos_actix`](https://docs.rs/leptos_actix/latest/l
 ```rust
 
 #[server(ActixExtract, "/api")]
-pub async fn actix_extract() -> Result<String, ServerFnError> {
+pub async fn actix_extract(cx: Scope) -> Result<String, ServerFnError> {
 	use leptos_actix::extract;
     use actix_web::dev::ConnectionInfo;
     use actix_web::web::{Data, Query};
 
-    extract(
+    extract(cx,
         |search: Query<Search>, connection: ConnectionInfo| async move {
             format!(
                 "search = {}\nconnection = {:?}",
@@ -43,15 +43,15 @@ pub async fn actix_extract() -> Result<String, ServerFnError> {
 
 ## 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.
+The syntax for the `leptos_axum::extract` 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() -> Result<String, ServerFnError> {
+pub async fn axum_extract(cx: Scope) -> Result<String, ServerFnError> {
     use axum::{extract::Query, http::Method};
     use leptos_axum::extract;
 
-    extract(|method: Method, res: Query<MyQuery>| async move {
+    extract(cx, |method: Method, res: Query<MyQuery>| async move {
             format!("{method:?} and {}", res.q)
         },
     )

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

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

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

@@ -8,12 +8,7 @@ If you’ve ever listened to streaming music or watched a video online, I’m su
 
 Let me say a little more about what I mean.
 
-Leptos supports all four different modes of rendering HTML that includes asynchronous data:
-
-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)
+Leptos supports all four different of these different ways to render HTML that includes asynchronous data.
 
 ## Synchronous Rendering
 
@@ -69,7 +64,7 @@ If you’re using server-side rendering, the synchronous mode is almost never wh
 
 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.
+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_
@@ -84,13 +79,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=HomePage/>
+	<Route path="" view=|cx| view! { cx, <HomePage/> }/>
 
 	// We'll load the posts with async rendering, so they can set
 	// the title and metadata *after* loading the data
 	<Route
 		path="/post/:id"
-		view=Post
+		view=|cx| view! { cx, <Post/> }
 		ssr=SsrMode::Async
 	/>
 </Routes>
@@ -110,14 +105,14 @@ With blocking resources, I can do something like this:
 
 ```rust
 #[component]
-pub fn BlogPost() -> impl IntoView {
-	let post_data = create_blocking_resource(/* load blog post */);
-	let comment_data = create_resource(/* load blog post */);
-	view! {
+pub fn BlogPost(cx: Scope) -> impl IntoView {
+	let post_data = create_blocking_resource(cx, /* load blog post */);
+	let comment_data = create_resource(cx, /* load blog post */);
+	view! { cx,
 		<Suspense fallback=|| ()>
 			{move || {
-				post_data.with(|data| {
-					view! {
+				post_data.with(cx, |data| {
+					view! { cx,
 						<Title text=data.title/>
 						<Meta name="description" content=data.excerpt/>
 						<article>

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

@@ -8,7 +8,7 @@ Put a log somewhere in your root component. (I usually call mine `<App/>`, but a
 
 ```rust
 #[component]
-pub fn App() -> impl IntoView {
+pub fn App(cx: Scope) -> impl IntoView {
 	leptos::log!("where do I run?");
 	// ... whatever
 }
@@ -57,15 +57,15 @@ One way to create a bug is by creating a mismatch between the HTML that’s sent
 
 ```rust
 #[component]
-pub fn App() -> impl IntoView {
+pub fn App(cx: Scope) -> impl IntoView {
     let data = if cfg!(target_arch = "wasm32") {
         vec![0, 1, 2]
     } else {
         vec![]
     };
     data.into_iter()
-        .map(|value| view! { <span>{value}</span> })
-        .collect_view()
+        .map(|value| view! { cx, <span>{value}</span> })
+        .collect_view(cx)
 }
 ```
 
@@ -93,20 +93,20 @@ This is a slightly more common way to create a client/server mismatch: updating
 
 ```rust
 #[component]
-pub fn App() -> impl IntoView {
-    let (loaded, set_loaded) = create_signal(false);
+pub fn App(cx: Scope) -> impl IntoView {
+    let (loaded, set_loaded) = create_signal(cx, false);
 
     // create_effect only runs on the client
-    create_effect(move |_| {
+    create_effect(cx, move |_| {
         // do something like reading from localStorage
         set_loaded(true);
     });
 
     move || {
         if loaded() {
-            view! { <p>"Hello, world!"</p> }.into_any()
+            view! { cx, <p>"Hello, world!"</p> }.into_any()
         } else {
-            view! { <div class="loading">"Loading..."</div> }.into_any()
+            view! { cx, <div class="loading">"Loading..."</div> }.into_any()
         }
     }
 }
@@ -129,7 +129,7 @@ The problem here is that `create_effect` runs **immediately** and **synchronousl
 You can simply tell the effect to wait a tick before updating the signal, by using something like `request_animation_frame`, which will set a short timeout and then update the signal before the next frame.
 
 ```rust
-create_effect(move |_| {
+create_effect(cx, move |_| {
     // do something like reading from localStorage
     request_animation_frame(move || set_loaded(true));
 });
@@ -163,7 +163,7 @@ For example, say that I want to store something in the browser’s `localStorage
 
 ```rust
 #[component]
-pub fn App() -> impl IntoView {
+pub fn App(cx: Scope) -> impl IntoView {
     use gloo_storage::Storage;
 	let storage = gloo_storage::LocalStorage::raw();
 	leptos::log!("{storage:?}");
@@ -176,9 +176,9 @@ But if I wrap it in an effect...
 
 ```rust
 #[component]
-pub fn App() -> impl IntoView {
+pub fn App(cx: Scope) -> impl IntoView {
     use gloo_storage::Storage;
-    create_effect(move |_| {
+    create_effect(cx, move |_| {
         let storage = gloo_storage::LocalStorage::raw();
 		leptos::log!("{storage:?}");
     });

docs/book/src/testing.md

@@ -14,8 +14,8 @@ For example, instead of embedding logic in a component directly like this:
 
 ```rust
 #[component]
-pub fn TodoApp() -> impl IntoView {
-    let (todos, set_todos) = create_signal(vec![Todo { /* ... */ }]);
+pub fn TodoApp(cx: Scope) -> impl IntoView {
+    let (todos, set_todos) = create_signal(cx, vec![Todo { /* ... */ }]);
     // ⚠️ this is hard to test because it's embedded in the component
     let num_remaining = move || todos.with(|todos| {
         todos.iter().filter(|todo| !todo.completed).sum()
@@ -43,8 +43,8 @@ mod tests {
 }
 
 #[component]
-pub fn TodoApp() -> impl IntoView {
-    let (todos, set_todos) = create_signal(Todos(vec![Todo { /* ... */ }]));
+pub fn TodoApp(cx: Scope) -> impl IntoView {
+    let (todos, set_todos) = create_signal(cx, Todos(vec![Todo { /* ... */ }]));
     // ✅ this has a test associated with it
     let num_remaining = move || todos.with(Todos::num_remaining);
 }
@@ -76,7 +76,7 @@ wasm-pack test --firefox
 ### Writing Your Tests
 
 Most tests will involve some combination of vanilla DOM manipulation and comparison to a `view`. For example, here’s a test [for the
-`counter` example](https://github.com/leptos-rs/leptos/blob/main/examples/counter/tests/web.rs).
+`counter` example](https://github.com/leptos-rs/leptos/blob/main/examples/counter/tests/mod.rs).
 
 First, we set up the testing environment.
 
@@ -105,7 +105,7 @@ fn clear() {
     // note that we start at the initial value of 10
     mount_to(
         test_wrapper.clone().unchecked_into(),
-        || view! { <SimpleCounter initial_value=10 step=1/> },
+        |cx| view! { cx, <SimpleCounter initial_value=10 step=1/> },
     );
 }
 ```
@@ -139,12 +139,12 @@ I like to test the whole view at once. We can do this by testing the element’s
 assert_eq!(
     div.outer_html(),
     // here we spawn a mini reactive system to render the test case
-    run_scope(create_runtime(), || {
+    run_scope(create_runtime(), |cx| {
         // it's as if we're creating it with a value of 0, right?
-        let (value, set_value) = create_signal(0);
+        let (value, set_value) = create_signal(cx, 0);
 
         // we can remove the event listeners because they're not rendered to HTML
-        view! {
+        view! { cx,
             <div>
                 <button>"Clear"</button>
                 <button>"-1"</button>
@@ -169,7 +169,7 @@ assert_eq!(test_wrapper.inner_html(), {
     let comparison_wrapper = document.create_element("section").unwrap();
     leptos::mount_to(
         comparison_wrapper.clone().unchecked_into(),
-        || view! { <SimpleCounter initial_value=0 step=1/>},
+        |cx| view! { cx, <SimpleCounter initial_value=0 step=1/>},
     );
     comparison_wrapper.inner_html()
 });

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

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

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

@@ -12,10 +12,10 @@ increment a counter.
 
 ```rust
 #[component]
-fn App() -> impl IntoView {
-    let (count, set_count) = create_signal(0);
+fn App(cx: Scope) -> impl IntoView {
+    let (count, set_count) = create_signal(cx, 0);
 
-    view! {
+    view! { cx,
         <button
             on:click=move |_| {
                 set_count.update(|n| *n += 1);
@@ -73,9 +73,9 @@ class=("button-20", move || count() % 2 == 1)
 Individual CSS properties can be directly updated with a similar `style:` syntax.
 
 ```rust
-let (x, set_x) = create_signal(0);
-let (y, set_y) = create_signal(0);
-view! {
+let (x, set_x) = create_signal(cx, 0);
+let (y, set_y) = create_signal(cx, 0);
+view! { cx,
     <div
         style="position: absolute"
         style:left=move || format!("{}px", x() + 100)
@@ -152,67 +152,3 @@ places in your application with minimal overhead.
 [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() -> impl IntoView {
-    let (count, set_count) = create_signal(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! {
-        <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(|| view! { <App/> })
-}
-```
-
-</details>
-</preview>

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

@@ -12,10 +12,10 @@ per click.
 You _could_ do this by just creating two `<progress>` elements:
 
 ```rust
-let (count, set_count) = create_signal(0);
+let (count, set_count) = create_signal(cx, 0);
 let double_count = move || count() * 2;
 
-view! {
+view! { cx,
     <progress
         max="50"
         value=count
@@ -36,9 +36,9 @@ Instead, let’s create a `<ProgressBar/>` component.
 ```rust
 #[component]
 fn ProgressBar(
-
+    cx: Scope
 ) -> impl IntoView {
-    view! {
+    view! { cx,
         <progress
             max="50"
             // hmm... where will we get this from?
@@ -64,10 +64,10 @@ In Leptos, you define props by giving additional arguments to the component func
 ```rust
 #[component]
 fn ProgressBar(
-
+    cx: Scope,
     progress: ReadSignal<i32>
 ) -> impl IntoView {
-    view! {
+    view! { cx,
         <progress
             max="50"
             // now this works
@@ -81,9 +81,9 @@ Now we can use our component in the main `<App/>` component’s view.
 
 ```rust
 #[component]
-fn App() -> impl IntoView {
-    let (count, set_count) = create_signal(0);
-    view! {
+fn App(cx: Scope) -> impl IntoView {
+    let (count, set_count) = create_signal(cx, 0);
+    view! { cx,
         <button on:click=move |_| { set_count.update(|n| *n += 1); }>
             "Click me"
         </button>
@@ -118,14 +118,14 @@ argument to the component function with `#[prop(optional)]`.
 ```rust
 #[component]
 fn ProgressBar(
-
+    cx: Scope,
     // mark this prop optional
     // you can specify it or not when you use <ProgressBar/>
     #[prop(optional)]
     max: u16,
     progress: ReadSignal<i32>
 ) -> impl IntoView {
-    view! {
+    view! { cx,
         <progress
             max=max
             value=progress
@@ -149,12 +149,12 @@ with `#[prop(default = ...)`.
 ```rust
 #[component]
 fn ProgressBar(
-
+    cx: Scope,
     #[prop(default = 100)]
     max: u16,
     progress: ReadSignal<i32>
 ) -> impl IntoView {
-    view! {
+    view! { cx,
         <progress
             max=max
             value=progress
@@ -171,11 +171,11 @@ as the `progress` prop on another `<ProgressBar/>`.
 
 ```rust
 #[component]
-fn App() -> impl IntoView {
-    let (count, set_count) = create_signal(0);
+fn App(cx: Scope) -> impl IntoView {
+    let (count, set_count) = create_signal(cx, 0);
     let double_count = move || count() * 2;
 
-    view! {
+    view! { cx,
         <button on:click=move |_| { set_count.update(|n| *n += 1); }>
             "Click me"
         </button>
@@ -199,7 +199,7 @@ implement the trait `Fn() -> i32`. So you could use a generic component:
 ```rust
 #[component]
 fn ProgressBar<F>(
-
+    cx: Scope,
     #[prop(default = 100)]
     max: u16,
     progress: F
@@ -207,7 +207,7 @@ fn ProgressBar<F>(
 where
     F: Fn() -> i32 + 'static,
 {
-    view! {
+    view! { cx,
         <progress
             max=max
             value=progress
@@ -219,25 +219,9 @@ where
 This is a perfectly reasonable way to write this component: `progress` now takes
 any value that implements this `Fn()` trait.
 
-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.
+> 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.
 
 ### `into` Props
 
@@ -255,14 +239,14 @@ reactive value.
 ```rust
 #[component]
 fn ProgressBar(
-
+    cx: Scope,
     #[prop(default = 100)]
     max: u16,
     #[prop(into)]
     progress: Signal<i32>
 ) -> impl IntoView
 {
-    view! {
+    view! { cx,
         <progress
             max=max
             value=progress
@@ -271,97 +255,22 @@ fn ProgressBar(
 }
 
 #[component]
-fn App() -> impl IntoView {
-    let (count, set_count) = create_signal(0);
+fn App(cx: Scope) -> impl IntoView {
+    let (count, set_count) = create_signal(cx, 0);
     let double_count = move || count() * 2;
 
-    view! {
+    view! { cx,
         <button on:click=move |_| { set_count.update(|n| *n += 1); }>
             "Click me"
         </button>
         // .into() converts `ReadSignal` to `Signal`
         <ProgressBar progress=count/>
         // use `Signal::derive()` to wrap a derived signal
-        <ProgressBar progress=Signal::derive(double_count)/>
+        <ProgressBar progress=Signal::derive(cx, double_count)/>
     }
 }
 ```
 
-### 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.
@@ -376,7 +285,7 @@ component function, and each one of the props:
 /// Shows progress toward a goal.
 #[component]
 fn ProgressBar(
-
+    cx: Scope,
     /// The maximum value of the progress bar.
     #[prop(default = 100)]
     max: u16,
@@ -400,75 +309,3 @@ and see the power of the `#[component]` macro combined with rust-analyzer here.
 [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(
-    // 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! {
-        <progress
-            max={max}
-            value=progress
-        />
-        <br/>
-    }
-}
-
-#[component]
-fn App() -> impl IntoView {
-    let (count, set_count) = create_signal(0);
-
-    let double_count = move || count() * 2;
-
-    view! {
-        <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(double_count)/>
-    }
-}
-
-fn main() {
-    leptos::mount_to_body(|| view! { <App/> })
-}
-```
-
-</details>
-</preview>

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

@@ -19,30 +19,30 @@ any `Vec<IV> where IV: IntoView` into your view. In other words, if you can rend
 
 ```rust
 let values = vec![0, 1, 2];
-view! {
+view! { cx,
     // this will just render "012"
     <p>{values.clone()}</p>
     // or we can wrap them in <li>
     <ul>
         {values.into_iter()
-            .map(|n| view! { <li>{n}</li>})
+            .map(|n| view! { cx, <li>{n}</li>})
             .collect::<Vec<_>>()}
     </ul>
 }
 ```
 
-Leptos also provides a `.collect_view()` helper function that allows you to collect any iterator of `T: IntoView` into `Vec<View>`.
+Leptos also provides a `.collect_view(cx)` helper function that allows you to collect any iterator of `T: IntoView` into `Vec<View>`.
 
 ```rust
 let values = vec![0, 1, 2];
-view! {
+view! { cx,
     // this will just render "012"
     <p>{values.clone()}</p>
     // or we can wrap them in <li>
     <ul>
         {values.into_iter()
-            .map(|n| view! { <li>{n}</li>})
-            .collect_view()}
+            .map(|n| view! { cx, <li>{n}</li>})
+            .collect_view(cx)}
     </ul>
 }
 ```
@@ -52,13 +52,13 @@ You can render dynamic items as part of a static list.
 
 ```rust
 // create a list of N signals
-let counters = (1..=length).map(|idx| create_signal(idx));
+let counters = (1..=length).map(|idx| create_signal(cx, idx));
 
 // each item manages a reactive view
 // but the list itself will never change
 let counter_buttons = counters
     .map(|(count, set_count)| {
-        view! {
+        view! { cx,
             <li>
                 <button
                     on:click=move |_| set_count.update(|n| *n += 1)
@@ -68,9 +68,9 @@ let counter_buttons = counters
             </li>
         }
     })
-    .collect_view();
+    .collect_view(cx);
 
-view! {
+view! { cx,
     <ul>{counter_buttons}</ul>
 }
 ```
@@ -106,162 +106,3 @@ 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() -> impl IntoView {
-    view! {
-        <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(
-
-    /// How many counters to include in this list.
-    length: usize,
-) -> impl IntoView {
-    // create counter signals that start at incrementing numbers
-    let counters = (1..=length).map(|idx| create_signal(idx));
-
-    // 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! {
-                <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! {
-        <ul>{counter_buttons}</ul>
-    }
-}
-
-/// A list of counters that allows you to add or
-/// remove counters.
-#[component]
-fn DynamicList(
-
-    /// 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(id + 1)))
-        .collect::<Vec<_>>();
-
-    // now we store that initial list in a signal
-    // this way, we'll be able to modify the list over time,
-    // adding and removing counters, and it will change reactively
-    let (counters, set_counters) = create_signal(initial_counters);
-
-    let add_counter = move |_| {
-        // create a signal for the new counter
-        let sig = create_signal(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! {
-        <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 |(id, (count, set_count))| {
-                        view! {
-                            <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(|| view! { <App/> })
-}
-
-```
-
-</details>
-</preview>

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

@@ -22,9 +22,9 @@ There are two important things to remember:
    `prop:value` for this reason.
 
 ```rust
-let (name, set_name) = create_signal("Controlled".to_string());
+let (name, set_name) = create_signal(cx, "Controlled".to_string());
 
-view! {
+view! { cx,
     <input type="text"
         on:input=move |ev| {
             // event_target_value is a Leptos helper function
@@ -53,9 +53,9 @@ In this example, we only notify the framework when the `<form>` fires a `submit`
 event.
 
 ```rust
-let (name, set_name) = create_signal("Uncontrolled".to_string());
+let (name, set_name) = create_signal(cx, "Uncontrolled".to_string());
 
-let input_element: NodeRef<Input> = create_node_ref();
+let input_element: NodeRef<Input> = create_node_ref(cx);
 ```
 
 `NodeRef` is a kind of reactive smart pointer: we can use it to access the
@@ -89,7 +89,7 @@ We can then call `.value()` to get the value out of the input, because `NodeRef`
 gives us access to a correctly-typed HTML element.
 
 ```rust
-view! {
+view! { cx,
     <form on:submit=on_submit>
         <input type="text"
             value=name
@@ -112,112 +112,3 @@ 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() -> impl IntoView {
-    view! {
-        <h2>"Controlled Component"</h2>
-        <ControlledComponent/>
-        <h2>"Uncontrolled Component"</h2>
-        <UncontrolledComponent/>
-    }
-}
-
-#[component]
-fn ControlledComponent() -> impl IntoView {
-    // create a signal to hold the value
-    let (name, set_name) = create_signal("Controlled".to_string());
-
-    view! {
-        <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() -> impl IntoView {
-    // import the type for <input>
-    use leptos::html::Input;
-
-    let (name, set_name) = create_signal("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();
-
-    // 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! {
-        <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(|| view! { <App/> })
-}
-
-```
-
-</details>
-</preview>

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

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

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

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

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

@@ -29,17 +29,17 @@ it in the child. This lets you manipulate the state of the parent from the child
 
 ```rust
 #[component]
-pub fn App() -> impl IntoView {
-    let (toggled, set_toggled) = create_signal(false);
-    view! {
+pub fn App(cx: Scope) -> impl IntoView {
+    let (toggled, set_toggled) = create_signal(cx, false);
+    view! { cx,
         <p>"Toggled? " {toggled}</p>
         <ButtonA setter=set_toggled/>
     }
 }
 
 #[component]
-pub fn ButtonA(setter: WriteSignal<bool>) -> impl IntoView {
-    view! {
+pub fn ButtonA(cx: Scope, setter: WriteSignal<bool>) -> impl IntoView {
+    view! { cx,
         <button
             on:click=move |_| setter.update(|value| *value = !*value)
         >
@@ -62,9 +62,9 @@ Another approach would be to pass a callback to the child: say, `on_click`.
 
 ```rust
 #[component]
-pub fn App() -> impl IntoView {
-    let (toggled, set_toggled) = create_signal(false);
-    view! {
+pub fn App(cx: Scope) -> impl IntoView {
+    let (toggled, set_toggled) = create_signal(cx, false);
+    view! { cx,
         <p>"Toggled? " {toggled}</p>
         <ButtonB on_click=move |_| set_toggled.update(|value| *value = !*value)/>
     }
@@ -73,13 +73,13 @@ pub fn App() -> impl IntoView {
 
 #[component]
 pub fn ButtonB<F>(
-
+    cx: Scope,
     on_click: F,
 ) -> impl IntoView
 where
     F: Fn(MouseEvent) + 'static,
 {
-    view! {
+    view! { cx,
         <button on:click=on_click>
             "Toggle"
         </button>
@@ -105,9 +105,9 @@ in your `view` macro in `<App/>`.
 
 ```rust
 #[component]
-pub fn App() -> impl IntoView {
-    let (toggled, set_toggled) = create_signal(false);
-    view! {
+pub fn App(cx: Scope) -> impl IntoView {
+    let (toggled, set_toggled) = create_signal(cx, false);
+    view! { cx,
         <p>"Toggled? " {toggled}</p>
         // note the on:click instead of on_click
         // this is the same syntax as an HTML element event listener
@@ -117,8 +117,8 @@ pub fn App() -> impl IntoView {
 
 
 #[component]
-pub fn ButtonC<F>() -> impl IntoView {
-    view! {
+pub fn ButtonC(cx: Scope) -> impl IntoView {
+    view! { cx,
         <button>"Toggle"</button>
     }
 }
@@ -141,17 +141,17 @@ tree:
 
 ```rust
 #[component]
-pub fn App() -> impl IntoView {
-    let (toggled, set_toggled) = create_signal(false);
-    view! {
+pub fn App(cx: Scope) -> impl IntoView {
+    let (toggled, set_toggled) = create_signal(cx, false);
+    view! { cx,
         <p>"Toggled? " {toggled}</p>
         <Layout/>
     }
 }
 
 #[component]
-pub fn Layout() -> impl IntoView {
-    view! {
+pub fn Layout(cx: Scope) -> impl IntoView {
+    view! { cx,
         <header>
             <h1>"My Page"</h1>
         </header>
@@ -162,8 +162,8 @@ pub fn Layout() -> impl IntoView {
 }
 
 #[component]
-pub fn Content() -> impl IntoView {
-    view! {
+pub fn Content(cx: Scope) -> impl IntoView {
+    view! { cx,
         <div class="content">
             <ButtonD/>
         </div>
@@ -171,7 +171,7 @@ pub fn Content() -> impl IntoView {
 }
 
 #[component]
-pub fn ButtonD<F>() -> impl IntoView {
+pub fn ButtonD<F>(cx: Scope) -> impl IntoView {
     todo!()
 }
 ```
@@ -182,17 +182,17 @@ pass your `WriteSignal` to its props. You could do what’s sometimes called
 
 ```rust
 #[component]
-pub fn App() -> impl IntoView {
-    let (toggled, set_toggled) = create_signal(false);
-    view! {
+pub fn App(cx: Scope) -> impl IntoView {
+    let (toggled, set_toggled) = create_signal(cx, false);
+    view! { cx,
         <p>"Toggled? " {toggled}</p>
         <Layout set_toggled/>
     }
 }
 
 #[component]
-pub fn Layout(d: WriteSignal<bool>) -> impl IntoView {
-    view! {
+pub fn Layout(cx: Scope, set_toggled: WriteSignal<bool>) -> impl IntoView {
+    view! { cx,
         <header>
             <h1>"My Page"</h1>
         </header>
@@ -203,8 +203,8 @@ pub fn Layout(d: WriteSignal<bool>) -> impl IntoView {
 }
 
 #[component]
-pub fn Content(d: WriteSignal<bool>) -> impl IntoView {
-    view! {
+pub fn Content(cx: Scope, set_toggled: WriteSignal<bool>) -> impl IntoView {
+    view! { cx,
         <div class="content">
             <ButtonD set_toggled/>
         </div>
@@ -212,7 +212,7 @@ pub fn Content(d: WriteSignal<bool>) -> impl IntoView {
 }
 
 #[component]
-pub fn ButtonD<F>(d: WriteSignal<bool>) -> impl IntoView {
+pub fn ButtonD<F>(cx: Scope, set_toggled: WriteSignal<bool>) -> impl IntoView {
     todo!()
 }
 ```
@@ -237,13 +237,13 @@ unnecessary prop drilling.
 
 ```rust
 #[component]
-pub fn App() -> impl IntoView {
-    let (toggled, set_toggled) = create_signal(false);
+pub fn App(cx: Scope) -> impl IntoView {
+    let (toggled, set_toggled) = create_signal(cx, false);
 
     // share `set_toggled` with all children of this component
-    provide_context(set_toggled);
+    provide_context(cx, set_toggled);
 
-    view! {
+    view! { cx,
         <p>"Toggled? " {toggled}</p>
         <Layout/>
     }
@@ -252,14 +252,14 @@ pub fn App() -> impl IntoView {
 // <Layout/> and <Content/> omitted
 
 #[component]
-pub fn ButtonD() -> impl IntoView {
+pub fn ButtonD(cx: Scope) -> impl IntoView {
     // use_context searches up the context tree, hoping to
     // find a `WriteSignal<bool>`
     // in this case, I .expect() because I know I provided it
-    let setter = use_context::<WriteSignal<bool>>()
+    let setter = use_context::<WriteSignal<bool>>(cx)
         .expect("to have found the setter provided");
 
-    view! {
+    view! { cx,
         <button
             on:click=move |_| setter.update(|value| *value = !*value)
         >
@@ -288,150 +288,3 @@ 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() -> impl IntoView {
-    // just some signals to toggle three classes on our <p>
-    let (red, set_red) = create_signal(false);
-    let (right, set_right) = create_signal(false);
-    let (italics, set_italics) = create_signal(false);
-    let (smallcaps, set_smallcaps) = create_signal(false);
-
-    // the newtype pattern isn't *necessary* here but is a good practice
-    // it avoids confusion with other possible future `WriteSignal<bool>` contexts
-    // and makes it easier to refer to it in ButtonC
-    provide_context(SmallcapsContext(set_smallcaps));
-
-    view! {
-
-        <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(
-
-    /// Signal that will be toggled when the button is clicked.
-    setter: WriteSignal<bool>,
-) -> impl IntoView {
-    view! {
-
-        <button
-            on:click=move |_| setter.update(|value| *value = !*value)
-        >
-            "Toggle Red"
-        </button>
-    }
-}
-
-/// Button B receives a closure
-#[component]
-pub fn ButtonB<F>(
-
-    /// Callback that will be invoked when the button is clicked.
-    on_click: F,
-) -> impl IntoView
-where
-    F: Fn(MouseEvent) + 'static,
-{
-    view! {
-
-        <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() -> impl IntoView {
-    view! {
-
-        <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() -> impl IntoView {
-    let setter = use_context::<SmallcapsContext>().unwrap().0;
-
-    view! {
-
-        <button
-            on:click=move |_| setter.update(|value| *value = !*value)
-        >
-            "Toggle Small Caps"
-        </button>
-    }
-}
-
-fn main() {
-    leptos::mount_to_body(|| view! { <App/> })
-}
-
-```
-
-</details>
-</preview>

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

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

examples/Makefile.toml

@@ -5,34 +5,32 @@ CARGO_MAKE_EXTEND_WORKSPACE_MAKEFILE = true
 CARGO_MAKE_CARGO_BUILD_TEST_FLAGS = ""
 CARGO_MAKE_WORKSPACE_EMULATION = true
 CARGO_MAKE_CRATE_WORKSPACE_MEMBERS = [
-  "animated_show",
-  "counter",
-  "counter_isomorphic",
-  "counters",
-  "counters_stable",
-  "counter_url_query",
-  "counter_without_macros",
-  "error_boundary",
-  "errors_axum",
-  "fetch",
-  "hackernews",
-  "hackernews_axum",
-  "js-framework-benchmark",
-  "leptos-tailwind-axum",
-  "login_with_token_csr_only",
-  "parent_child",
-  "router",
-  "session_auth_axum",
-  "slots",
-  "ssr_modes",
-  "ssr_modes_axum",
-  "tailwind",
-  "tailwind_csr_trunk",
-  "timer",
-  "todo_app_sqlite",
-  "todo_app_sqlite_axum",
-  "todo_app_sqlite_viz",
-  "todomvc",
+    "counter",
+    "counter_isomorphic",
+    "counters",
+    "counters_stable",
+    "counter_without_macros",
+    "error_boundary",
+    "errors_axum",
+    "fetch",
+    "hackernews",
+    "hackernews_axum",
+    "js-framework-benchmark",
+    "leptos-tailwind-axum",
+    "login_with_token_csr_only",
+    "parent_child",
+    "router",
+    "session_auth_axum",
+    "slots",
+    "ssr_modes",
+    "ssr_modes_axum",
+    "tailwind",
+    "tailwind_csr_trunk",
+    "timer",
+    "todo_app_sqlite",
+    "todo_app_sqlite_axum",
+    "todo_app_sqlite_viz",
+    "todomvc",
 ]
 
 [tasks.gen-members]
@@ -47,65 +45,3 @@ grep -v gtk |
 jq -R -s -c 'split("\n")[:-1]')
 echo "CARGO_MAKE_CRATE_WORKSPACE_MEMBERS = $examples"
 '''
-
-[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"
-
-echo
-echo "${YELLOW}Test Runner Report${RESET}"
-echo "${ITALIC}Pass the option \"all\" to show all the examples${RESET}"
-echo
-
-makefile_paths=$(find . -name Makefile.toml -not -path '*/target/*' |
-  sed 's%./%%' |
-  sed 's%/Makefile.toml%%' |
-  grep -v Makefile.toml |
-  sort -u)
-
-start_path=$(pwd)
-
-for path in $makefile_paths; do
-  cd $path
-
-  test_runner=
-
-  test_count=$(grep -rl -E "#\[(test|rstest)\]" | wc -l)
-  if [ $test_count -gt 0 ]; then
-    test_runner="-C"
-  fi
-
-  while read -r line; do
-    case $line in
-      *"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/animated_show/Cargo.toml

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

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

examples/animated_show/README.md

@@ -1,9 +0,0 @@
-# `<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

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

@@ -1,34 +0,0 @@
-use core::time::Duration;
-use leptos::*;
-
-#[component]
-pub fn App() -> impl IntoView {
-    let show = create_rw_signal(false);
-
-    // the CSS classes in this example are just written directly inside the `index.html`
-    view! {
-        <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

@@ -1,8 +0,0 @@
-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(App);
-}

examples/cargo-make/compile.toml

@@ -1,11 +0,0 @@
-[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/main.toml

@@ -1,5 +1,4 @@
 extend = [
-    { path = "../cargo-make/compile.toml" },
     { path = "../cargo-make/clean.toml" },
     { path = "../cargo-make/lint.toml" },
     { path = "../cargo-make/node.toml" },
@@ -10,6 +9,9 @@ extend = [
 [tasks.ci]
 dependencies = ["prepare", "lint", "build", "test-flow", "integration-test"]
 
+[tasks.ci-clean]
+dependencies = ["ci", "clean"]
+
 [tasks.prepare]
 dependencies = ["setup-node"]
 
@@ -18,17 +20,6 @@ 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]

examples/counter/Makefile.toml

@@ -2,3 +2,13 @@ extend = [
     { 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/src/lib.rs

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

examples/counter/src/main.rs

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

examples/counter/tests/web.rs

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

examples/counter_isomorphic/Cargo.toml

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

examples/counter_isomorphic/Makefile.toml

@@ -1 +1,11 @@
 extend = [{ path = "../cargo-make/main.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/src/counters.rs

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

examples/counter_isomorphic/src/lib.rs

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

examples/counter_isomorphic/src/main.rs

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

examples/counter_url_query/Cargo.toml

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

examples/counter_url_query/Makefile.toml

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

examples/counter_url_query/README.md

@@ -1,7 +0,0 @@
-# Leptos Query Counter Example
-
-This example creates a simple counter whose state is persisted and synced in the url with query params.
-
-To run it, just issue the `trunk serve --open` command in the example root. This will build the app, run it, and open a new browser to serve it.
-
-> If you don't have `trunk` installed, [click here for install instructions.](https://trunkrs.dev/)

examples/counter_url_query/index.html

@@ -1,8 +0,0 @@
-<!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"/>
-	</head>
-	<body></body>
-</html>

examples/counter_url_query/src/lib.rs

@@ -1,39 +0,0 @@
-use leptos::*;
-use leptos_router::*;
-
-/// A simple counter component.
-///
-/// You can use doc comments like this to document your component.
-#[component]
-pub fn SimpleQueryCounter() -> impl IntoView {
-    let (count, set_count) = create_query_signal::<i32>("count");
-    let clear = move |_| set_count(None);
-    let decrement = move |_| set_count(Some(count().unwrap_or(0) - 1));
-    let increment = move |_| set_count(Some(count().unwrap_or(0) + 1));
-
-    let (msg, set_msg) = create_query_signal::<String>("message");
-    let update_msg = move |ev| {
-        let new_msg = event_target_value(&ev);
-        if new_msg.is_empty() {
-            set_msg(None);
-        } else {
-            set_msg(Some(new_msg));
-        }
-    };
-
-    view! {
-        <div>
-            <button on:click=clear>"Clear"</button>
-            <button on:click=decrement>"-1"</button>
-            <span>"Value: " {move || count().unwrap_or(0)} "!"</span>
-            <button on:click=increment>"+1"</button>
-
-            <br />
-
-            <input
-                prop:value=move || msg().unwrap_or_default()
-                on:input=update_msg
-            />
-        </div>
-    }
-}

examples/counter_url_query/src/main.rs

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

examples/counter_without_macros/Makefile.toml

@@ -4,13 +4,11 @@ extend = [
 ]
 
 [tasks.build]
-toolchain = "stable"
 command = "cargo"
-args = ["build-all-features"]
+args = ["+stable", "build-all-features"]
 install_crate = "cargo-all-features"
 
 [tasks.check]
-toolchain = "stable"
 command = "cargo"
-args = ["check-all-features"]
+args = ["+stable", "check-all-features"]
 install_crate = "cargo-all-features"

examples/counter_without_macros/src/lib.rs

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

examples/counter_without_macros/src/main.rs

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

examples/counter_without_macros/tests/web.rs

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

examples/counters/Makefile.toml

@@ -2,3 +2,13 @@ extend = [
     { 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/counters/src/lib.rs

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

examples/counters/src/main.rs

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

examples/counters/tests/web.rs

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

examples/counters_stable/Cargo.toml

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

examples/counters_stable/Makefile.toml

@@ -1,17 +1,11 @@
 extend = [
     { path = "../cargo-make/main.toml" },
+    { path = "../cargo-make/wasm-test.toml" },
     { path = "../cargo-make/trunk_server.toml" },
     { path = "../cargo-make/playwright-test.toml" },
 ]
 
 [tasks.build]
-toolchain = "stable"
 command = "cargo"
-args = ["build-all-features"]
-install_crate = "cargo-all-features"
-
-[tasks.check]
-toolchain = "stable"
-command = "cargo"
-args = ["check-all-features"]
+args = ["+stable", "build-all-features"]
 install_crate = "cargo-all-features"

examples/counters_stable/src/lib.rs

@@ -0,0 +1,109 @@
+use leptos::*;
+use leptos_meta::*;
+
+const MANY_COUNTERS: usize = 1000;
+
+type CounterHolder = Vec<(usize, (ReadSignal<i32>, WriteSignal<i32>))>;
+
+#[derive(Copy, Clone)]
+struct CounterUpdater {
+    set_counters: WriteSignal<CounterHolder>,
+}
+
+#[component]
+pub fn Counters(cx: Scope) -> impl IntoView {
+    let (next_counter_id, set_next_counter_id) = create_signal(cx, 0);
+    let (counters, set_counters) = create_signal::<CounterHolder>(cx, vec![]);
+    provide_context(cx, CounterUpdater { set_counters });
+    provide_meta_context(cx);
+
+    let add_counter = move |_| {
+        let id = next_counter_id.get();
+        let sig = create_signal(cx, 0);
+        set_counters.update(move |counters| counters.push((id, sig)));
+        set_next_counter_id.update(|id| *id += 1);
+    };
+
+    let add_many_counters = move |_| {
+        let next_id = next_counter_id.get();
+        let new_counters = (next_id..next_id + MANY_COUNTERS).map(|id| {
+            let signal = create_signal(cx, 0);
+            (id, signal)
+        });
+
+        set_counters.update(move |counters| counters.extend(new_counters));
+        set_next_counter_id.update(|id| *id += MANY_COUNTERS);
+    };
+
+    let clear_counters = move |_| {
+        set_counters.update(|counters| counters.clear());
+    };
+
+    view! { cx,
+        <Title text="Counters (Stable)" />
+        <div>
+            <button on:click=add_counter>
+                "Add Counter"
+            </button>
+            <button on:click=add_many_counters>
+                {format!("Add {MANY_COUNTERS} Counters")}
+            </button>
+            <button on:click=clear_counters>
+                "Clear Counters"
+            </button>
+            <p>
+                "Total: "
+                <span data-testid="total">{move ||
+                    counters.get()
+                        .iter()
+                        .map(|(_, (count, _))| count.get())
+                        .sum::<i32>()
+                        .to_string()
+                }</span>
+                " from "
+                <span data-testid="counters">{move || counters.with(|counters| counters.len()).to_string()}</span>
+                " counters."
+            </p>
+            <ul>
+                <For
+                    each={move || counters.get()}
+                    key={|counter| counter.0}
+                    view=move |cx, (id, (value, set_value))| {
+                        view! {
+                            cx,
+                            <Counter id value set_value/>
+                        }
+                    }
+                />
+            </ul>
+        </div>
+    }
+}
+
+#[component]
+fn Counter(
+    cx: Scope,
+    id: usize,
+    value: ReadSignal<i32>,
+    set_value: WriteSignal<i32>,
+) -> impl IntoView {
+    let CounterUpdater { set_counters } = use_context(cx).unwrap();
+
+    let input = move |ev| {
+        set_value
+            .set(event_target_value(&ev).parse::<i32>().unwrap_or_default())
+    };
+
+    view! { cx,
+        <li>
+            <button data-testid="decrement_count" on:click=move |_| set_value.update(move |value| *value -= 1)>"-1"</button>
+            <input data-testid="counter_input" type="text"
+                prop:value={move || value.get().to_string()}
+                on:input=input
+            />
+            <span>{value}</span>
+            <button data-testid="increment_count" on:click=move |_| set_value.update(move |value| *value += 1)>"+1"</button>
+            <button data-testid="remove_counter" on:click=move |_| set_counters.update(move |counters| counters.retain(|(counter_id, _)| counter_id != &id))>"x"</button>
+        </li>
+    }
+}

examples/counters_stable/src/main.rs

@@ -1,110 +1,8 @@
+use counters_stable::Counters;
 use leptos::*;
 
 fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
-    mount_to_body(|| view! { <Counters/> })
-}
-
-const MANY_COUNTERS: usize = 1000;
-
-type CounterHolder = Vec<(usize, (ReadSignal<i32>, WriteSignal<i32>))>;
-
-#[derive(Copy, Clone)]
-struct CounterUpdater {
-    set_counters: WriteSignal<CounterHolder>,
-}
-
-#[component]
-pub fn Counters() -> impl IntoView {
-    let (next_counter_id, set_next_counter_id) = create_signal(0);
-    let (counters, set_counters) = create_signal::<CounterHolder>(vec![]);
-    provide_context(CounterUpdater { set_counters });
-
-    let add_counter = move |_| {
-        let id = next_counter_id.get();
-        let sig = create_signal(0);
-        set_counters.update(move |counters| counters.push((id, sig)));
-        set_next_counter_id.update(|id| *id += 1);
-    };
-
-    let add_many_counters = move |_| {
-        let next_id = next_counter_id.get();
-        let new_counters = (next_id..next_id + MANY_COUNTERS).map(|id| {
-            let signal = create_signal(0);
-            (id, signal)
-        });
-
-        set_counters.update(move |counters| counters.extend(new_counters));
-        set_next_counter_id.update(|id| *id += MANY_COUNTERS);
-    };
-
-    let clear_counters = move |_| {
-        set_counters.update(|counters| counters.clear());
-    };
-
-    view! {
-        <div>
-            <button on:click=add_counter>
-                "Add Counter"
-            </button>
-            <button on:click=add_many_counters>
-                {format!("Add {MANY_COUNTERS} Counters")}
-            </button>
-            <button on:click=clear_counters>
-                "Clear Counters"
-            </button>
-            <p>
-                "Total: "
-                <span data-testid="total">{move ||
-                    counters.get()
-                        .iter()
-                        .map(|(_, (count, _))| count.get())
-                        .sum::<i32>()
-                        .to_string()
-                }</span>
-                " from "
-                <span data-testid="counters">{move || counters.with(|counters| counters.len()).to_string()}</span>
-                " counters."
-            </p>
-            <ul>
-                <For
-                    each={move || counters.get()}
-                    key={|counter| counter.0}
-                    view=move |(id, (value, set_value))| {
-                        view! {
-                            <Counter id value set_value/>
-                        }
-                    }
-                />
-            </ul>
-        </div>
-    }
-}
-
-#[component]
-fn Counter(
-    id: usize,
-    value: ReadSignal<i32>,
-    set_value: WriteSignal<i32>,
-) -> impl IntoView {
-    let CounterUpdater { set_counters } = use_context().unwrap();
-
-    let input = move |ev| {
-        set_value
-            .set(event_target_value(&ev).parse::<i32>().unwrap_or_default())
-    };
-
-    view! {
-        <li>
-            <button id="decrement_count" on:click=move |_| set_value.update(move |value| *value -= 1)>"-1"</button>
-            <input type="text"
-                prop:value={move || value.get().to_string()}
-                on:input=input
-            />
-            <span>{value}</span>
-            <button id="increment_count" on:click=move |_| set_value.update(move |value| *value += 1)>"+1"</button>
-            <button on:click=move |_| set_counters.update(move |counters| counters.retain(|(counter_id, _)| counter_id != &id))>"x"</button>
-        </li>
-    }
+    mount_to_body(|cx| view! { cx,  <Counters/> })
 }

examples/counters_stable/tests/web/add_1k_counters.rs

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

examples/counters_stable/tests/web/add_counter.rs

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

examples/counters_stable/tests/web/clear_counters.rs

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

examples/counters_stable/tests/web/decrement_counter.rs

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

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

@@ -0,0 +1,112 @@
+use counters_stable::Counters;
+use leptos::*;
+use wasm_bindgen::JsCast;
+use web_sys::{Element, Event, EventInit, HtmlElement, HtmlInputElement};
+
+// Actions
+
+pub fn add_1k_counters() {
+    find_by_text("Add 1000 Counters").click();
+}
+
+pub fn add_counter() {
+    find_by_text("Add Counter").click();
+}
+
+pub fn clear_counters() {
+    find_by_text("Clear Counters").click();
+}
+
+pub fn decrement_counter(index: u32) {
+    counter_html_element(index, "decrement_count").click();
+}
+
+pub fn enter_count(index: u32, count: i32) {
+    let input = counter_input_element(index, "counter_input");
+    input.set_value(count.to_string().as_str());
+    let mut event_init = EventInit::new();
+    event_init.bubbles(true);
+    let event = Event::new_with_event_init_dict("input", &event_init).unwrap();
+    input.dispatch_event(&event).unwrap();
+}
+
+pub fn increment_counter(index: u32) {
+    counter_html_element(index, "increment_count").click();
+}
+
+pub fn remove_counter(index: u32) {
+    counter_html_element(index, "remove_counter").click();
+}
+
+pub fn view_counters() {
+    remove_existing_counters();
+    mount_to_body(|cx| view! { cx,  <Counters/> });
+}
+
+// Results
+
+pub fn counters() -> i32 {
+    data_test_id("counters").parse::<i32>().unwrap()
+}
+
+pub fn title() -> String {
+    leptos::document().title()
+}
+
+pub fn total() -> i32 {
+    data_test_id("total").parse::<i32>().unwrap()
+}
+
+// Internal
+
+fn counter_element(index: u32, text: &str) -> Element {
+    let selector =
+        format!("li:nth-child({}) [data-testid=\"{}\"]", index, text);
+    leptos::document()
+        .query_selector(&selector)
+        .unwrap()
+        .unwrap()
+}
+
+fn counter_html_element(index: u32, text: &str) -> HtmlElement {
+    counter_element(index, text)
+        .dyn_into::<HtmlElement>()
+        .unwrap()
+}
+
+fn counter_input_element(index: u32, text: &str) -> HtmlInputElement {
+    counter_element(index, text)
+        .dyn_into::<HtmlInputElement>()
+        .unwrap()
+}
+
+fn data_test_id(id: &str) -> String {
+    let selector = format!("[data-testid=\"{}\"]", id);
+    leptos::document()
+        .query_selector(&selector)
+        .unwrap()
+        .expect("counters not found")
+        .text_content()
+        .unwrap()
+}
+
+fn find_by_text(text: &str) -> HtmlElement {
+    let xpath = format!("//*[text()='{}']", text);
+    let document = leptos::document();
+    document
+        .evaluate(&xpath, &document)
+        .unwrap()
+        .iterate_next()
+        .unwrap()
+        .unwrap()
+        .dyn_into::<HtmlElement>()
+        .unwrap()
+}
+
+fn remove_existing_counters() {
+    if let Some(counter) =
+        leptos::document().query_selector("body div").unwrap()
+    {
+        counter.remove();
+    }
+}

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

@@ -0,0 +1 @@
+pub mod counters_page;

examples/counters_stable/tests/web/increment_counter.rs

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

examples/counters_stable/tests/web/main.rs

@@ -0,0 +1,16 @@
+use wasm_bindgen_test::*;
+
+// Test Suites
+pub mod add_1k_counters;
+pub mod add_counter;
+pub mod clear_counters;
+pub mod decrement_counter;
+pub mod enter_count;
+pub mod increment_counter;
+pub mod remove_counter;
+pub mod view_counters;
+
+pub mod fixtures;
+pub use fixtures::*;
+
+wasm_bindgen_test_configure!(run_in_browser);

examples/counters_stable/tests/web/remove_counter.rs

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

examples/counters_stable/tests/web/view_counters.rs

@@ -0,0 +1,22 @@
+use super::*;
+use crate::counters_page as ui;
+use pretty_assertions::assert_eq;
+
+#[wasm_bindgen_test]
+fn should_see_the_initial_counts() {
+    // When
+    ui::view_counters();
+
+    // Then
+    assert_eq!(ui::total(), 0);
+    assert_eq!(ui::counters(), 0);
+}
+
+#[wasm_bindgen_test]
+fn should_see_the_title() {
+    // When
+    ui::view_counters();
+
+    // Then
+    assert_eq!(ui::title(), "Counters (Stable)");
+}

examples/error_boundary/Makefile.toml

@@ -1 +1,11 @@
 extend = [{ path = "../cargo-make/main.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/error_boundary/src/lib.rs

@@ -1,23 +1,23 @@
 use leptos::*;
 
 #[component]
-pub fn App() -> impl IntoView {
-    let (value, set_value) = create_signal(Ok(0));
+pub fn App(cx: Scope) -> impl IntoView {
+    let (value, set_value) = create_signal(cx, Ok(0));
 
     // when input changes, try to parse a number from the input
     let on_input = move |ev| set_value(event_target_value(&ev).parse::<i32>());
 
-    view! {
+    view! { cx,
         <h1>"Error Handling"</h1>
         <label>
             "Type a number (or something that's not a number!)"
-            <input type="number" on:input=on_input/>
+            <input on:input=on_input/>
             // If an `Err(_) had been rendered inside the <ErrorBoundary/>,
             // the fallback will be displayed. Otherwise, the children of the
             // <ErrorBoundary/> will be displayed.
             <ErrorBoundary
                 // the fallback receives a signal containing current errors
-                fallback=|errors| view! {
+                fallback=|cx, errors| view! { cx,
                     <div class="error">
                         <p>"Not a number! Errors: "</p>
                         // we can render a list of errors
@@ -25,8 +25,8 @@ pub fn App() -> impl IntoView {
                         <ul>
                             {move || errors.get()
                                 .into_iter()
-                                .map(|(_, e)| view! { <li>{e.to_string()}</li>})
-                                .collect_view()
+                                .map(|(_, e)| view! { cx, <li>{e.to_string()}</li>})
+                                .collect_view(cx)
                             }
                         </ul>
                     </div>

examples/error_boundary/src/main.rs

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

examples/errors_axum/Makefile.toml

@@ -1 +1,11 @@
 extend = [{ path = "../cargo-make/main.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/errors_axum/src/error_template.rs

@@ -8,11 +8,12 @@ use leptos_axum::ResponseOptions;
 // Feel free to do more complicated things here than just displaying them.
 #[component]
 pub fn ErrorTemplate(
+    cx: Scope,
     #[prop(optional)] outside_errors: Option<Errors>,
     #[prop(optional)] errors: Option<RwSignal<Errors>>,
 ) -> impl IntoView {
     let errors = match outside_errors {
-        Some(e) => create_rw_signal(e),
+        Some(e) => create_rw_signal(cx, e),
         None => match errors {
             Some(e) => e,
             None => panic!("No Errors found and we expected errors!"),
@@ -22,7 +23,7 @@ pub fn ErrorTemplate(
     // Get Errors from Signal
     // Downcast lets us take a type that implements `std::error::Error`
     let errors: Vec<AppError> = errors
-        .get_untracked()
+        .get()
         .into_iter()
         .filter_map(|(_, v)| v.downcast_ref::<AppError>().cloned())
         .collect();
@@ -31,13 +32,13 @@ pub fn ErrorTemplate(
     // Only the response code for the first error is actually sent from the server
     // this may be customized by the specific application
     cfg_if! { if #[cfg(feature="ssr")] {
-        let response = use_context::<ResponseOptions>();
+        let response = use_context::<ResponseOptions>(cx);
         if let Some(response) = response {
             response.set_status(errors[0].status_code());
         }
     }}
 
-    view! {
+    view! { cx,
         <h1>{if errors.len() > 1 {"Errors"} else {"Error"}}</h1>
         <For
             // a function that returns the items we're iterating over; a signal is fine
@@ -45,10 +46,10 @@ pub fn ErrorTemplate(
             // a unique key for each item as a reference
             key=|(index, _)| *index
             // renders each item to a view
-            view=move |error| {
+            view=move |cx, error| {
                 let error_string = error.1.to_string();
                 let error_code= error.1.status_code();
-                view! {
+                view! { cx,
                     <h2>{error_code.to_string()}</h2>
                     <p>"Error: " {error_string}</p>
                 }

examples/errors_axum/src/fallback.rs

@@ -22,7 +22,7 @@ cfg_if! { if #[cfg(feature = "ssr")] {
         } else{
             let handler = leptos_axum::render_app_to_stream(
                 options.to_owned(),
-                move || view!{ <App/> }
+                move |cx| view!{ cx, <App/> }
             );
             handler(req).await.into_response()
         }

examples/errors_axum/src/landing.rs

@@ -14,27 +14,27 @@ pub async fn cause_internal_server_error() -> Result<(), ServerFnError> {
 }
 
 #[component]
-pub fn App() -> impl IntoView {
-    //let id = use_context::<String>();
-    provide_meta_context();
+pub fn App(cx: Scope) -> impl IntoView {
+    //let id = use_context::<String>(cx);
+    provide_meta_context(cx);
     view! {
-
+        cx,
         <Link rel="shortcut icon" type_="image/ico" href="/favicon.ico"/>
         <Stylesheet id="leptos" href="/pkg/errors_axum.css"/>
-        <Router fallback=|| {
+        <Router fallback=|cx| {
             let mut outside_errors = Errors::default();
             outside_errors.insert_with_default_key(AppError::NotFound);
-            view! {
+            view! { cx,
                 <ErrorTemplate outside_errors/>
             }
-            .into_view()
+            .into_view(cx)
         }>
             <header>
                 <h1>"Error Examples:"</h1>
             </header>
             <main>
                 <Routes>
-                    <Route path="" view=ExampleErrors/>
+                    <Route path="" view=|cx| view! { cx, <ExampleErrors/> }/>
                 </Routes>
             </main>
         </Router>
@@ -42,11 +42,11 @@ pub fn App() -> impl IntoView {
 }
 
 #[component]
-pub fn ExampleErrors() -> impl IntoView {
+pub fn ExampleErrors(cx: Scope) -> impl IntoView {
     let generate_internal_error =
-        create_server_action::<CauseInternalServerError>();
+        create_server_action::<CauseInternalServerError>(cx);
 
-    view! {
+    view! { cx,
         <p>
             "These links will load 404 pages since they do not exist. Verify with browser development tools: " <br/>
             <a href="/404">"This links to a page that does not exist"</a><br/>
@@ -63,7 +63,7 @@ pub fn ExampleErrors() -> impl IntoView {
         // note that the error boundaries could be placed above in the Router or lower down
         // in a particular route. The generated errors on the entire page contribute to the
         // final status code sent by the server when producing ssr pages.
-        <ErrorBoundary fallback=|errors| view!{ <ErrorTemplate errors=errors/>}>
+        <ErrorBoundary fallback=|cx, errors| view!{ cx, <ErrorTemplate errors=errors/>}>
             <ReturnsError/>
         </ErrorBoundary>
         </div>
@@ -71,6 +71,6 @@ pub fn ExampleErrors() -> impl IntoView {
 }
 
 #[component]
-pub fn ReturnsError() -> impl IntoView {
+pub fn ReturnsError(_cx: Scope) -> impl IntoView {
     Err::<String, AppError>(AppError::InternalServerError)
 }

examples/errors_axum/src/lib.rs

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

examples/errors_axum/src/main.rs

@@ -25,10 +25,10 @@ async fn custom_handler(
 ) -> Response {
     let handler = leptos_axum::render_app_to_stream_with_context(
         options.clone(),
-        move || {
-            provide_context(id.clone());
+        move |cx| {
+            provide_context(cx, id.clone());
         },
-        || view! { <App/> },
+        |cx| view! { cx, <App/> },
     );
     handler(req).await.into_response()
 }
@@ -48,13 +48,13 @@ async fn main() {
     let conf = get_configuration(None).await.unwrap();
     let leptos_options = conf.leptos_options;
     let addr = leptos_options.site_addr;
-    let routes = generate_route_list(|| view! { <App/> }).await;
+    let routes = generate_route_list(|cx| view! { cx, <App/> }).await;
 
     // build our application with a route
     let app = Router::new()
         .route("/api/*fn_name", post(leptos_axum::handle_server_fns))
         .route("/special/:id", get(custom_handler))
-        .leptos_routes(&leptos_options, routes, || view! { <App/> })
+        .leptos_routes(&leptos_options, routes, |cx| view! { cx, <App/> })
         .fallback(file_and_error_handler)
         .with_state(leptos_options);
 

examples/fetch/Makefile.toml

@@ -1 +1,11 @@
 extend = [{ path = "../cargo-make/main.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"