chore: fix SSR tests

* added Callback to documentation and examples.
Also reduced code duplication in Callback implementation.

* added back the closure event callback example

README.md

@@ -10,6 +10,8 @@
 
 [Website](https://leptos.dev) | [Book](https://leptos-rs.github.io/leptos/) | [Docs.rs](https://docs.rs/leptos/latest/leptos/) | [Playground](https://codesandbox.io/p/sandbox/leptos-rtfggt?file=%2Fsrc%2Fmain.rs%3A1%2C1) | [Discord](https://discord.gg/YdRAhS7eQB)
 
+You can find a list of useful libraries and example projects at [`awesome-leptos`](https://github.com/leptos-rs/awesome-leptos).
+
 # Leptos
 
 ```rust

docs/book/src/02_getting_started.md

@@ -36,13 +36,23 @@ cargo add leptos --features=csr
 
 > Using `nightly` Rust, and the `nightly` feature in Leptos enables the function-call syntax for signal getters and setters that is used in most of this book.
 >
-> To use `nightly` Rust, you can run
+> To use nightly Rust, you can either opt into nightly for all your Rust projects by running
 >
 > ```bash
 > rustup toolchain install nightly
 > rustup default nightly
 > ```
 >
+> or only for this project
+>
+> ```bash
+> rustup toolchain install nightly
+> cd <into your project>
+> rustup override set nightly
+> ```
+>
+> [See here for more details.](https://doc.rust-lang.org/book/appendix-07-nightly-rust.html)
+> 
 > If you’d rather use stable Rust with Leptos, you can do that too. In the guide and examples, you’ll just use the [`ReadSignal::get()`](https://docs.rs/leptos/latest/leptos/struct.ReadSignal.html#impl-SignalGet%3CT%3E-for-ReadSignal%3CT%3E) and [`WriteSignal::set()`](https://docs.rs/leptos/latest/leptos/struct.WriteSignal.html#impl-SignalGet%3CT%3E-for-ReadSignal%3CT%3E) methods instead of calling signal getters and setters as functions.
 
 Make sure you've added the `wasm32-unknown-unknown` target so that Rust can compile your code to WebAssembly to run in the browser.

docs/book/src/15_global_state.md

@@ -180,9 +180,9 @@ data flow and of fine-grained reactive updates.
 
 > **Note**: There are some significant drawbacks to this approach. Both signals and memos need to own their values, so a memo will need to clone the field’s value on every change. The most natural way to manage state in a framework like Leptos is always to provide signals that are as locally-scoped and fine-grained as they can be, not to hoist everything up into global state. But when you _do_ need some kind of global state, `create_slice` can be a useful tool.
 
-[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/1-basic-component-forked-8bte19?selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A2%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A2%7D%5D&file=%2Fsrc%2Fmain.rs)
+[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/15-global-state-0-5-8c2ff6?file=%2Fsrc%2Fmain.rs%3A1%2C2)
 
-<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>
+<iframe src="https://codesandbox.io/p/sandbox/15-global-state-0-5-8c2ff6?file=%2Fsrc%2Fmain.rs%3A1%2C2" width="100%" height="1000px" style="max-height: 100vh"></iframe>
 
 <details>
 <summary>CodeSandbox Source</summary>
@@ -396,7 +396,6 @@ fn GlobalStateInput() -> impl IntoView {
 fn main() {
     leptos::mount_to_body(|| view! { <Option2/><Option3/> })
 }
-
 ```
 
 </details>

docs/book/src/SUMMARY.md

@@ -7,6 +7,7 @@
   - [Dynamic Attributes](./view/02_dynamic_attributes.md)
   - [Components and Props](./view/03_components.md)
   - [Iteration](./view/04_iteration.md)
+  - [Iterating over More Complex Data](./view/04b_iteration.md)
   - [Forms and Inputs](./view/05_forms.md)
   - [Control Flow](./view/06_control_flow.md)
   - [Error Handling](./view/07_errors.md)
@@ -45,6 +46,7 @@
 - [Progressive Enhancement and Graceful Degradation](./progressive_enhancement/README.md)
   - [`<ActionForm/>`s](./progressive_enhancement/action_form.md)
 - [Deployment](./deployment.md)
+- [Guide: Islands](./islands.md)
 - [Appendix: How Does the Reactive System Work?](./appendix_reactive_graph.md)
 - [Appendix: Optimizing WASM Binary Size](./appendix_binary_size.md)
 - [Appendix: Some Small DX Improvements](./appendix_dx.md)

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

@@ -30,7 +30,7 @@ To create a resource that simply runs once, you can pass a non-reactive, empty s
 let once = create_resource(|| (), |_| 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 `.get()` or `.with(|data| /* */)`. These work just like `.get()` and `.with()` on a signal—`get` 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.
 
 So, you can show the current state of a resource in your view:
 
@@ -38,7 +38,7 @@ So, you can show the current state of a resource in your view:
 let once = create_resource(|| (), |_| async move { load_data().await });
 view! {
     <h1>"My Data"</h1>
-    {move || match once.read() {
+    {move || match once.get() {
         None => view! { <p>"Loading..."</p> }.into_view(),
         Some(data) => view! { <ShowData data/> }.into_view()
     }}
@@ -47,9 +47,9 @@ view! {
 
 Resources also provide a `refetch()` method that allows you to manually reload the data (for example, in response to a button click) and a `loading()` method that returns a `ReadSignal<bool>` indicating whether the resource is currently loading or not.
 
-[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)
+[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/10-resources-0-5-9jq86q?file=%2Fsrc%2Fmain.rs%3A1%2C2)
 
-<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>
+<iframe src="https://codesandbox.io/p/sandbox/10-resources-0-5-9jq86q?file=%2Fsrc%2Fmain.rs%3A1%2C2" width="100%" height="1000px" style="max-height: 100vh"></iframe>
 
 <details>
 <summary>CodeSandbox Source</summary>
@@ -74,7 +74,6 @@ fn App() -> impl IntoView {
 
     // 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
@@ -89,12 +88,12 @@ fn App() -> impl IntoView {
     // 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()
+    // we can access the resource values with .get()
     // 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()
+            .get()
             .map(|value| format!("Server returned {value:?}"))
             // This loading state will only show before the first load
             .unwrap_or_else(|| "Loading...".into())
@@ -114,7 +113,7 @@ fn App() -> impl IntoView {
             "Click me"
         </button>
         <p>
-            <code>"stable"</code>": " {move || stable.read()}
+            <code>"stable"</code>": " {move || stable.get()}
         </p>
         <p>
             <code>"count"</code>": " {count}
@@ -129,9 +128,8 @@ fn App() -> impl IntoView {
 }
 
 fn main() {
-    leptos::mount_to_body(|| view! { <App/> })
+    leptos::mount_to_body(App)
 }
-
 ```
 
 </details>

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

@@ -8,7 +8,7 @@ let once = create_resource(count, |count| async move { load_a(count).await });
 
 view! {
     <h1>"My Data"</h1>
-    {move || match once.read() {
+    {move || match once.get() {
         None => view! { <p>"Loading..."</p> }.into_view(),
         Some(data) => view! { <ShowData data/> }.into_view()
     }}
@@ -25,7 +25,7 @@ let b = create_resource(count2, |count| async move { load_b(count).await });
 
 view! {
     <h1>"My Data"</h1>
-    {move || match (a.read(), b.read()) {
+    {move || match (a.get(), b.get()) {
         (Some(a), Some(b)) => view! {
             <ShowA a/>
             <ShowA b/>
@@ -53,12 +53,12 @@ view! {
         <h2>"My Data"</h2>
         <h3>"A"</h3>
         {move || {
-            a.read()
+            a.get()
                 .map(|a| view! { <ShowA a/> })
         }}
         <h3>"B"</h3>
         {move || {
-            b.read()
+            b.get()
                 .map(|b| view! { <ShowB b/> })
         }}
     </Suspense>
@@ -97,9 +97,9 @@ view! {
 }
 ```
 
-[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/11-suspense-907niv?file=%2Fsrc%2Fmain.rs)
+[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/11-suspense-0-5-qzpgqs?file=%2Fsrc%2Fmain.rs%3A1%2C1)
 
-<iframe src="https://codesandbox.io/p/sandbox/11-suspense-907niv?file=%2Fsrc%2Fmain.rs" width="100%" height="1000px" style="max-height: 100vh"></iframe>
+<iframe src="https://codesandbox.io/p/sandbox/11-suspense-0-5-qzpgqs?file=%2Fsrc%2Fmain.rs%3A1%2C1" width="100%" height="1000px" style="max-height: 100vh"></iframe>
 
 <details>
 <summary>CodeSandbox Source</summary>
@@ -141,16 +141,15 @@ fn App() -> impl IntoView {
             // and then whenever any resources has been resolved
             <p>
                 "Your shouting name is "
-                {move || async_data.read()}
+                {move || async_data.get()}
             </p>
         </Suspense>
     }
 }
 
 fn main() {
-    leptos::mount_to_body(|| view! { <App/> })
+    leptos::mount_to_body(App)
 }
-
 ```
 
 </details>

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

@@ -6,9 +6,9 @@ You’ll notice in the `<Suspense/>` example that if you keep reloading the data
 
 This example shows how you can create a simple tabbed contact list with `<Transition/>`. When you select a new tab, it continues showing the current contact until the new data loads. This can be a much better user experience than constantly falling back to a loading message.
 
-[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)
+[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/12-transition-0-5-2jg5lz?file=%2Fsrc%2Fmain.rs%3A1%2C1)
 
-<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>
+<iframe src="https://codesandbox.io/p/sandbox/12-transition-0-5-2jg5lz?file=%2Fsrc%2Fmain.rs%3A1%2C1" width="100%" height="1000px" style="max-height: 100vh"></iframe>
 
 <details>
 <summary>CodeSandbox Source</summary>
@@ -75,9 +75,8 @@ fn App() -> impl IntoView {
 }
 
 fn main() {
-    leptos::mount_to_body(|| view! { <App/> })
+    leptos::mount_to_body(App)
 }
-
 ```
 
 </details>

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

@@ -91,9 +91,9 @@ view! {
 
 Now, there’s a chance this all seems a little over-complicated, or maybe too restricted. I wanted to include actions here, alongside resources, as the missing piece of the puzzle. In a real Leptos app, you’ll actually most often use actions alongside server functions, [`create_server_action`](https://docs.rs/leptos/latest/leptos/fn.create_server_action.html), and the [`<ActionForm/>`](https://docs.rs/leptos_router/latest/leptos_router/fn.ActionForm.html) component to create really powerful progressively-enhanced forms. So if this primitive seems useless to you... Don’t worry! Maybe it will make sense later. (Or check out our [`todo_app_sqlite`](https://github.com/leptos-rs/leptos/blob/main/examples/todo_app_sqlite/src/todo.rs) example now.)
 
-[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)
+[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/13-actions-0-5-8xk35v?file=%2Fsrc%2Fmain.rs%3A1%2C1)
 
-<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>
+<iframe src="https://codesandbox.io/p/sandbox/13-actions-0-5-8xk35v?file=%2Fsrc%2Fmain.rs%3A1%2C1" width="100%" height="1000px" style="max-height: 100vh"></iframe>
 
 <details>
 <summary>CodeSandbox Source</summary>
@@ -168,7 +168,7 @@ fn App() -> impl IntoView {
 }
 
 fn main() {
-    leptos::mount_to_body(|| view! { <App/> })
+    leptos::mount_to_body(App)
 }
 ```
 

docs/book/src/deployment.md

@@ -54,7 +54,7 @@ RUN cargo leptos build --release -vv
 
 FROM rustlang/rust:nightly-bullseye as runner
 # Copy the server binary to the /app directory
-COPY --from=builder /app/target/server/release/leptos_start /app/
+COPY --from=builder /app/target/release/leptos-start /app/
 # /target/site contains our JS/WASM/CSS, etc.
 COPY --from=builder /app/target/site /app/site
 # Copy Cargo.toml if it’s needed at runtime

docs/book/src/interlude_styling.md

@@ -36,7 +36,7 @@ fn Home() -> impl IntoView {
 }
 ```
 
-It can be a little complicated to set up the Tailwind integration at first, but you can check out our two examples of how to use Tailwind with a [client-side-rendered `trunk` application](https://github.com/leptos-rs/leptos/tree/main/examples/tailwind_csr_trunk) or with a [server-rendered `cargo-leptos` application](https://github.com/leptos-rs/leptos/tree/main/examples/tailwind). `cargo-leptos` also has some [built-in Tailwind support](https://github.com/leptos-rs/cargo-leptos#site-parameters) that you can use as an alternative to Tailwind’s CLI.
+It can be a little complicated to set up the Tailwind integration at first, but you can check out our two examples of how to use Tailwind with a [client-side-rendered `trunk` application](https://github.com/leptos-rs/leptos/tree/main/examples/tailwind_csr) or with a [server-rendered `cargo-leptos` application](https://github.com/leptos-rs/leptos/tree/main/examples/tailwind_actix). `cargo-leptos` also has some [built-in Tailwind support](https://github.com/leptos-rs/cargo-leptos#site-parameters) that you can use as an alternative to Tailwind’s CLI.
 
 ## Stylers: Compile-time CSS Extraction
 

docs/book/src/islands.md

@@ -0,0 +1,489 @@
+# Guide: Islands
+
+Leptos 0.5 introduces the new `experimental-islands` feature. This guide will walk through the islands feature and core concepts, while implementing a demo app using the islands architecture.
+
+## The Islands Architecture
+
+The dominant JavaScript frontend frameworks (React, Vue, Svelte, Solid, Angular) all originated as frameworks for building client-rendered single-page apps (SPAs). The initial page load is rendered to HTML, then hydrated, and subsequent navigations are handled directly in the client. (Hence “single page”: everything happens from a single page load from the server, even if there is client-side routing later.) Each of these frameworks later added server-side rendering to improve initial load times, SEO, and user experience.
+
+This means that by default, the entire app is interactive. It also means that the entire app has to be shipped to the client as JavaScript in order to be hydrated. Leptos has followed this same pattern.
+
+> You can read more in the chapters on [server-side rendering](./ssr/22_life_cycle.md).
+
+But it’s also possible to work in the opposite direction. Rather than taking an entirely-interactive app, rendering it to HTML on the server, and then hydrating it in the browser, you can begin with a plain HTML page and add small areas of interactivity. This is the traditional format for any website or app before the 2010s: your browser makes a series of requests to the server and returns the HTML for each new page in response. After the rise of “single-page apps” (SPA), this approach has sometimes become known as a “multi-page app” (MPA) by comparison.
+
+The phrase “islands architecture” has emerged recently to describe the approach of beginning with a “sea” of server-rendered HTML pages, and adding “islands” of interactivity throughout the page.
+
+> ### Additional Reading
+>
+> The rest of this guide will look at how to use islands with Leptos. For more background on the approach in general, check out some of the articles below:
+>
+> - Jason Miller, [“Islands Architecture”](https://jasonformat.com/islands-architecture/), Jason Miller
+> - Ryan Carniato, [“Islands & Server Components & Resumability, Oh My!”](https://dev.to/this-is-learning/islands-server-components-resumability-oh-my-319d)
+> - [“Islands Architectures”](https://www.patterns.dev/posts/islands-architecture) on patterns.dev
+> - [Astro Islands](https://docs.astro.build/en/concepts/islands/)
+
+## Activating Islands Mode
+
+Let’s start with a fresh `cargo-leptos` app:
+
+```bash
+cargo leptos new --git leptos-rs/start
+```
+
+> I’m using Actix because I like it. Feel free to use Axum; there should be approximately no server-specific differences in this guide.
+
+I’m just going to run
+
+```bash
+cargo leptos build
+```
+
+in the background while I fire up my editor and keep writing.
+
+The first thing I’ll do is to add the `experimental-islands` feature in my `Cargo.toml`. I need to add this to both `leptos` and `leptos_actix`:
+
+```toml
+leptos = { version = "0.5", features = ["nightly", "experimental-islands"] }
+leptos_actix = { version = "0.5", optional = true, features = [
+  "experimental-islands",
+] }
+```
+
+Next I’m going to modify the `hydrate` function exported from `src/lib.rs`. I’m going to remove the line that calls `leptos::mount_to_body(App)` and replace it with
+
+```rust
+leptos::leptos_dom::HydrationCtx::stop_hydrating();
+```
+
+Each “island” we create will actually act as its own entrypoint, so our `hydrate()` function just says “okay, hydration’s done now.”
+
+Okay, now fire up your `cargo leptos watch` and go to [`http://localhost:3000`](http://localhost:3000) (or wherever).
+
+Click the button, and...
+
+Nothing happens!
+
+Perfect.
+
+## Using Islands
+
+Nothing happens because we’ve just totally inverted the mental model of our app. Rather than being interactive by default and hydrating everything, the app is now plain HTML by default, and we need to opt into interactivity.
+
+This has a big effect on WASM binary sizes: if I compile in release mode, this app is a measly 24kb of WASM (uncompressed), compared to 355kb in non-islands mode. (355kb is quite large for a “Hello, world!” It’s really just all the code related to client-side routing, which isn’t being used in the demo.)
+
+When we click the button, nothing happens, because our whole page is static.
+
+So how do we make something happen?
+
+Let’s turn the `HomePage` component into an island!
+
+Here was the non-interactive version:
+
+```rust
+#[component]
+fn HomePage() -> impl IntoView {
+    // Creates a reactive value to update the button
+    let (count, set_count) = create_signal(0);
+    let on_click = move |_| set_count.update(|count| *count += 1);
+
+    view! {
+        <h1>"Welcome to Leptos!"</h1>
+        <button on:click=on_click>"Click Me: " {count}</button>
+    }
+}
+```
+
+Here’s the interactive version:
+
+```rust
+#[island]
+fn HomePage() -> impl IntoView {
+    // Creates a reactive value to update the button
+    let (count, set_count) = create_signal(0);
+    let on_click = move |_| set_count.update(|count| *count += 1);
+
+    view! {
+        <h1>"Welcome to Leptos!"</h1>
+        <button on:click=on_click>"Click Me: " {count}</button>
+    }
+}
+```
+
+Now when I click the button, it works!
+
+The `#[island]` macro works exactly like the `#[component]` macro, except that in islands mode, it designates this as an interactive island. If we check the binary size again, this is 166kb uncompressed in release mode; much larger than the 24kb totally static version, but much smaller than the 355kb fully-hydrated version.
+
+If you open up the source for the page now, you’ll see that your `HomePage` island has been rendered as a special `<leptos-island>` HTML element which specifies which component should be used to hydrate it:
+
+```html
+<leptos-island data-component="HomePage" data-hkc="0-0-0">
+  <h1 data-hk="0-0-2">Welcome to Leptos!</h1>
+  <button data-hk="0-0-3">
+    Click Me:
+    <!-- <DynChild> -->11<!-- </DynChild> -->
+  </button>
+</leptos-island>
+```
+
+The typical Leptos hydration keys and markers are only present inside the island, only the island is hydrated.
+
+## Using Islands Effectively
+
+Remember that _only_ code within an `#[island]` needs to be compiled to WASM and shipped to the browser. This means that islands should be as small and specific as possible. My `HomePage`, for example, would be better broken apart into a regular component and an island:
+
+```rust
+#[component]
+fn HomePage() -> impl IntoView {
+    view! {
+        <h1>"Welcome to Leptos!"</h1>
+        <Counter/>
+    }
+}
+
+#[island]
+fn Counter() -> impl IntoView {
+    // Creates a reactive value to update the button
+    let (count, set_count) = create_signal(0);
+    let on_click = move |_| set_count.update(|count| *count += 1);
+
+    view! {
+        <button on:click=on_click>"Click Me: " {count}</button>
+    }
+}
+```
+
+Now the `<h1>` doesn’t need to be included in the client bundle, or hydrated. This seems like a silly distinction now; but note that you can now add as much inert HTML content as you want to the `HomePage` itself, and the WASM binary size will remain exactly the same.
+
+In regular hydration mode, your WASM binary size grows as a function of the size/complexity of your app. In islands mode, your WASM binary grows as a function of the amount of interactivity in your app. You can add as much non-interactive content as you want, outside islands, and it will not increase that binary size.
+
+## Unlocking Superpowers
+
+So, this 50% reduction in WASM binary size is nice. But really, what’s the point?
+
+The point comes when you combine two key facts:
+
+1. Code inside `#[component]` functions now _only_ runs on the server.
+2. Children and props can be passed from the server to islands, without being included in the WASM binary.
+
+This means you can run server-only code directly in the body of a component, and pass it directly into the children. Certain tasks that take a complex blend of server functions and Suspense in fully-hydrated apps can be done inline in islands.
+
+We’re going to rely on a third fact in the rest of this demo:
+
+3. Context can be passed between otherwise-independent islands.
+
+So, instead of our counter demo, let’s make something a little more fun: a tabbed interface that reads data from files on the server.
+
+## Passing Server Children to Islands
+
+One of the most powerful things about islands is that you can pass server-rendered children into an island, without the island needing to know anything about them. Islands hydrate their own content, but not children that are passed to them.
+
+As Dan Abramov of React put it (in the very similar context of RSCs), islands aren’t really islands: they’re donuts. You can pass server-only content directly into the “donut hole,” as it were, allowing you to create tiny atolls of interactivity, surrounded on _both_ sides by the sea of inert server HTML.
+
+> In the demo code included below, I added some styles to show all server content as a light-blue “sea,” and all islands as light-green “land.” Hopefully that will help picture what I’m talking about!
+
+To continue with the demo: I’m going to create a `Tabs` component. Switching between tabs will require some interactivity, so of course this will be an island. Let’s start simple for now:
+
+```rust
+#[island]
+fn Tabs(labels: Vec<String>) -> impl IntoView {
+    let buttons = labels
+        .into_iter()
+        .map(|label| view! { <button>{label}</button> })
+        .collect_view();
+    view! {
+        <div style="display: flex; width: 100%; justify-content: space-between;">
+            {buttons}
+        </div>
+    }
+}
+```
+
+Oops. This gives me an error
+
+```
+error[E0463]: can't find crate for `serde`
+  --> src/app.rs:43:1
+   |
+43 | #[island]
+   | ^^^^^^^^^ can't find crate
+```
+
+Easy fix: let’s `cargo add serde --features=derive`. The `#[island]` macro wants to pull in `serde` here because it needs to serialize and deserialize the `labels` prop.
+
+Now let’s update the `HomePage` to use `Tabs`.
+
+```rust
+#[component]
+fn HomePage() -> impl IntoView {
+	// these are the files we’re going to read
+    let files = ["a.txt", "b.txt", "c.txt"];
+	// the tab labels will just be the file names
+	let labels = files.iter().copied().map(Into::into).collect();
+    view! {
+        <h1>"Welcome to Leptos!"</h1>
+        <p>"Click any of the tabs below to read a recipe."</p>
+        <Tabs labels/>
+    }
+}
+```
+
+If you take a look in the DOM inspector, you’ll see the island is now something like
+
+```html
+<leptos-island
+  data-component="Tabs"
+  data-hkc="0-0-0"
+  data-props='{"labels":["a.txt","b.txt","c.txt"]}'
+></leptos-island>
+```
+
+Our `labels` prop is getting serialized to JSON and stored in an HTML attribute so it can be used to hydrate the island.
+
+Now let’s add some tabs. For the moment, a `Tab` island will be really simple:
+
+```rust
+#[island]
+fn Tab(index: usize, children: Children) -> impl IntoView {
+    view! {
+        <div>{children()}</div>
+    }
+}
+```
+
+Each tab, for now will just be a `<div>` wrapping its children.
+
+Our `Tabs` component will also get some children: for now, let’s just show them all.
+
+```rust
+#[island]
+fn Tabs(labels: Vec<String>, children: Children) -> impl IntoView {
+    let buttons = labels
+        .into_iter()
+        .map(|label| view! { <button>{label}</button> })
+        .collect_view();
+    view! {
+        <div style="display: flex; width: 100%; justify-content: space-around;">
+            {buttons}
+        </div>
+        {children()}
+    }
+}
+```
+
+Okay, now let’s go back into the `HomePage`. We’re going to create the list of tabs to put into our tab box.
+
+```rust
+#[component]
+fn HomePage() -> impl IntoView {
+    let files = ["a.txt", "b.txt", "c.txt"];
+    let labels = files.iter().copied().map(Into::into).collect();
+	let tabs = move || {
+        files
+            .into_iter()
+            .enumerate()
+            .map(|(index, filename)| {
+                let content = std::fs::read_to_string(filename).unwrap();
+                view! {
+                    <Tab index>
+                        <h2>{filename.to_string()}</h2>
+                        <p>{content}</p>
+                    </Tab>
+                }
+            })
+            .collect_view()
+    };
+
+    view! {
+        <h1>"Welcome to Leptos!"</h1>
+        <p>"Click any of the tabs below to read a recipe."</p>
+        <Tabs labels>
+            <div>{tabs()}</div>
+        </Tabs>
+    }
+}
+```
+
+Uh... What?
+
+If you’re used to using Leptos, you know that you just can’t do this. All code in the body of components has to run on the server (to be rendered to HTML) and in the browser (to hydrate), so you can’t just call `std::fs`; it will panic, because there’s no access to the local filesystem (and certainly not to the server filesystem!) in the browser. This would be a security nightmare!
+
+Except... wait. We’re in islands mode. This `HomePage` component _really does_ only run on the server. So we can, in fact, just use ordinary server code like this.
+
+> **Is this a dumb example?** Yes! Synchronously reading from three different local files in a `.map()` is not a good choice in real life. The point here is just to demonstrate that this is, definitely, server-only content.
+
+Go ahead and create three files in the root of the project called `a.txt`, `b.txt`, and `c.txt`, and fill them in with whatever content you’d like.
+
+Refresh the page and you should see the content in the browser. Edit the files and refresh again; it will be updated.
+
+You can pass server-only content from a `#[component]` into the children of an `#[island]`, without the island needing to know anything about how to access that data or render that content.
+
+**This is really important.** Passing server `children` to islands means that you can keep islands small. Ideally, you don’t want to slap and `#[island]` around a whole chunk of your page. You want to break that chunk out into an interactive piece, which can be an `#[island]`, and a bunch of additional server content that can be passed to that island as `children`, so that the non-interactive subsections of an interactive part of the page can be kept out of the WASM binary.
+
+## Passing Context Between Islands
+
+These aren’t really “tabs” yet: they just show every tab, all the time. So let’s add some simple logic to our `Tabs` and `Tab` components.
+
+We’ll modify `Tabs` to create a simple `selected` signal. We provide the read half via context, and set the value of the signal whenever someone clicks one of our buttons.
+
+```rust
+#[island]
+fn Tabs(labels: Vec<String>, children: Children) -> impl IntoView {
+    let (selected, set_selected) = create_signal(0);
+    provide_context(selected);
+
+    let buttons = labels
+        .into_iter()
+        .enumerate()
+        .map(|(index, label)| view! {
+            <button on:click=move |_| set_selected(index)>
+                {label}
+            </button>
+        })
+        .collect_view();
+// ...
+```
+
+And let’s modify the `Tab` island to use that context to show or hide itself:
+
+```rust
+#[island]
+fn Tab(children: Children) -> impl IntoView {
+    let selected = expect_context::<ReadSignal<usize>>();
+    view! {
+        <div style:display=move || if selected() {
+            "block"
+        } else {
+            "none"
+        }>
+// ...
+```
+
+Now the tabs behave exactly as I’d expect. `Tabs` passes the signal via context to each `Tab`, which uses it to determine whether it should be open or not.
+
+> That’s why in `HomePage`, I made `let tabs = move ||` a function, and called it like `{tabs()}`: creating the tabs lazily this way meant that the `Tabs` island would already have provided the `selected` context by the time each `Tab` went looking for it.
+
+Our complete tabs demo is about 220kb uncompressed: not the smallest demo in the world, but still about a third smaller than the counter button! Just for kicks, I built the same demo without islands mode, using `#[server]` functions and `Suspense`. and it was 429kb. So again, this was about a 50% savings in binary size. And this app includes quite minimal server-only content: remember that as we add additional server-only components and pages, this 220 will not grow.
+
+## Overview
+
+This demo may seem pretty basic. It is. But there are a number of immediate takeaways:
+
+- **50% WASM binary size reduction**, which means measurable improvements in time to interactivity and initial load times for clients.
+- **Reduced HTML page size.** This one is less obvious, but it’s true and important: HTML generated from `#[component]`s doesn’t need all the hydration IDs and other boilerplate added.
+- **Reduced data serialization costs.** Creating a resource and reading it on the client means you need to serialize the data, so it can be used for hydration. If you’ve also read that data to create HTML in a `Suspense`, you end up with “double data,” i.e., the same exact data is both rendered to HTML and serialized as JSON, increasing the size of responses, and therefore slowing them down.
+- **Easily use server-only APIs** inside a `#[component]` as if it were a normal, native Rust function running on the server—which, in islands mode, it is!
+- **Reduced `#[server]`/`create_resource`/`Suspense` boilerplate** for loading server data.
+
+## Future Exploration
+
+The `experimental-islands` feature included in 0.5 reflects work at the cutting edge of what frontend web frameworks are exploring right now. As it stands, our islands approach is very similar to Astro (before its recent View Transitions support): it allows you to build a traditional server-rendered, multi-page app and pretty seamlessly integrate islands of interactivity.
+
+There are some small improvements that will be easy to add. For example, we can do something very much like Astro's View Transitions approach:
+
+- add client-side routing for islands apps by fetching subsequent navigations from the server and replacing the HTML document with the new one
+- add animated transitions between the old and new document using the View Transitions API
+- support explicit persistent islands, i.e., islands that you can mark with unique IDs (something like `persist:searchbar` on the component in the view), which can be copied over from the old to the new document without losing their current state
+
+There are other, larger architectural changes that I’m [not sold on yet](https://github.com/leptos-rs/leptos/issues/1830).
+
+## Additional Information
+
+Check out the [islands PR](https://github.com/leptos-rs/leptos/pull/1660), [roadmap](https://github.com/leptos-rs/leptos/issues/1830), and [Hackernews demo](https://github.com/leptos-rs/leptos/tree/main/examples/hackernews_islands_axum) for additional discussion.
+
+## Demo Code
+
+```rust
+use leptos::*;
+use leptos_router::*;
+
+#[component]
+pub fn App() -> impl IntoView {
+    view! {
+        <Router>
+            <main style="background-color: lightblue; padding: 10px">
+                <Routes>
+                    <Route path="" view=HomePage/>
+                </Routes>
+            </main>
+        </Router>
+    }
+}
+
+/// Renders the home page of your application.
+#[component]
+fn HomePage() -> impl IntoView {
+    let files = ["a.txt", "b.txt", "c.txt"];
+    let labels = files.iter().copied().map(Into::into).collect();
+    let tabs = move || {
+        files
+            .into_iter()
+            .enumerate()
+            .map(|(index, filename)| {
+                let content = std::fs::read_to_string(filename).unwrap();
+                view! {
+                    <Tab index>
+                        <div style="background-color: lightblue; padding: 10px">
+                            <h2>{filename.to_string()}</h2>
+                            <p>{content}</p>
+                        </div>
+                    </Tab>
+                }
+            })
+            .collect_view()
+    };
+
+    view! {
+        <h1>"Welcome to Leptos!"</h1>
+        <p>"Click any of the tabs below to read a recipe."</p>
+        <Tabs labels>
+            <div>{tabs()}</div>
+        </Tabs>
+    }
+}
+
+#[island]
+fn Tabs(labels: Vec<String>, children: Children) -> impl IntoView {
+    let (selected, set_selected) = create_signal(0);
+    provide_context(selected);
+
+    let buttons = labels
+        .into_iter()
+        .enumerate()
+        .map(|(index, label)| {
+            view! {
+                <button on:click=move |_| set_selected(index)>
+                    {label}
+                </button>
+            }
+        })
+        .collect_view();
+    view! {
+        <div
+            style="display: flex; width: 100%; justify-content: space-around;\
+            background-color: lightgreen; padding: 10px;"
+        >
+            {buttons}
+        </div>
+        {children()}
+    }
+}
+
+#[island]
+fn Tab(index: usize, children: Children) -> impl IntoView {
+    let selected = expect_context::<ReadSignal<usize>>();
+    view! {
+        <div
+            style:background-color="lightgreen"
+            style:padding="10px"
+            style:display=move || if selected() == index {
+                "block"
+            } else {
+                "none"
+            }
+        >
+            {children()}
+        </div>
+    }
+}
+```

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

@@ -135,9 +135,9 @@ stop(); // stop watching
 set_num.set(2); // (nothing happens)
 ```
 
-[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/serene-thompson-40974n?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A2%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A2%7D%5D)
+[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/14-effect-0-5-d6hkch?file=%2Fsrc%2Fmain.rs%3A1%2C1)
 
-<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>
+<iframe src="https://codesandbox.io/p/sandbox/14-effect-0-5-d6hkch?file=%2Fsrc%2Fmain.rs%3A1%2C1" width="100%" height="1000px" style="max-height: 100vh"></iframe>
 
 <details>
 <summary>CodeSandbox Source</summary>
@@ -293,10 +293,8 @@ fn EffectVsDerivedSignal() -> impl IntoView {
     }
 }
 
-/*#[component]
+#[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
@@ -315,17 +313,16 @@ where
         true => children().into_view(),
         false => fallback().into_view(),
     }
-}*/
+}
 
-fn log(std::fmt::Display) {
+fn log(msg: impl 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/> })
+    leptos::mount_to_body(App)
 }
-
 ```
 
 </details>

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

@@ -204,9 +204,9 @@ In fact, in this case, we don’t even need to rerender the `<Contact/>` compone
 
 > This sandbox includes a couple features (like nested routing) discussed in this section and the previous one, and a couple we’ll cover in the rest of this chapter. The router is such an integrated system that it makes sense to provide a single example, so don’t be surprised if there’s anything you don’t understand.
 
-[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)
+[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/16-router-0-5-4xp4zz?file=%2Fsrc%2Fmain.rs%3A102%2C2)
 
-<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>
+<iframe src="https://codesandbox.io/p/sandbox/16-router-0-5-4xp4zz?file=%2Fsrc%2Fmain.rs%3A102%2C2" width="100%" height="1000px" style="max-height: 100vh"></iframe>
 
 <details>
 <summary>CodeSandbox Source</summary>
@@ -316,9 +316,8 @@ fn ContactInfo() -> impl IntoView {
 }
 
 fn main() {
-    leptos::mount_to_body(|| view! { <App/> })
+    leptos::mount_to_body(App)
 }
-
 ```
 
 </details>

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

@@ -82,9 +82,9 @@ This can get a little messy: deriving a signal that wraps an `Option<_>` or `Res
 
 > This is the same example from the previous section. The router is such an integrated system that it makes sense to provide a single example highlighting multiple features, even if we haven’t explained them all yet.
 
-[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/16-router-fy4tjv?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A3%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A3%7D%5D)
+[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/16-router-0-5-4xp4zz?file=%2Fsrc%2Fmain.rs%3A102%2C2)
 
-<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>
+<iframe src="https://codesandbox.io/p/sandbox/16-router-0-5-4xp4zz?file=%2Fsrc%2Fmain.rs%3A102%2C2" width="100%" height="1000px" style="max-height: 100vh"></iframe>
 
 <details>
 <summary>CodeSandbox Source</summary>
@@ -117,7 +117,7 @@ fn App() -> impl IntoView {
                     <Route
                         path="/contacts"
                         view=ContactList
-                    >
+                      >
                         // if no id specified, fall back
                         <Route path=":id" view=ContactInfo>
                             <Route path="" view=|| view! {
@@ -194,9 +194,8 @@ fn ContactInfo() -> impl IntoView {
 }
 
 fn main() {
-    leptos::mount_to_body(|| view! { <App/> })
+    leptos::mount_to_body(App)
 }
-
 ```
 
 </details>

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

@@ -35,9 +35,9 @@ The second argument here is a set of [`NavigateOptions`](https://docs.rs/leptos_
 
 > Once again, this is the same example. Check out the relative `<A/>` components, and take a look at the CSS in `index.html` to see the ARIA-based styling.
 
-[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/16-router-fy4tjv?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A3%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A3%7D%5D)
+[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/16-router-0-5-4xp4zz?file=%2Fsrc%2Fmain.rs%3A102%2C2)
 
-<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>
+<iframe src="https://codesandbox.io/p/sandbox/16-router-0-5-4xp4zz?file=%2Fsrc%2Fmain.rs%3A102%2C2" width="100%" height="1000px" style="max-height: 100vh"></iframe>
 
 <details>
 <summary>CodeSandbox Source</summary>
@@ -70,7 +70,7 @@ fn App() -> impl IntoView {
                     <Route
                         path="/contacts"
                         view=ContactList
-                    >
+                      >
                         // if no id specified, fall back
                         <Route path=":id" view=ContactInfo>
                             <Route path="" view=|| view! {
@@ -147,9 +147,8 @@ fn ContactInfo() -> impl IntoView {
 }
 
 fn main() {
-    leptos::mount_to_body(|| view! { <App/> })
+    leptos::mount_to_body(App)
 }
-
 ```
 
 </details>

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

@@ -62,9 +62,9 @@ view! {
 
 You’ll notice that this version drops the `Submit` button. Instead, we add an `oninput` attribute to the input. Note that this is _not_ `on:input`, which would listen for the `input` event and run some Rust code. Without the colon, `oninput` is the plain HTML attribute. So the string is actually a JavaScript string. `this.form` gives us the form the input is attached to. `requestSubmit()` fires the `submit` event on the `<form>`, which is caught by `<Form/>` just as if we had clicked a `Submit` button. Now the form will “navigate” on every keystroke or input to keep the URL (and therefore the search) perfectly in sync with the user’s input as they type.
 
-[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/16-router-forked-hrrt3h?file=%2Fsrc%2Fmain.rs)
+[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/20-form-0-5-9g7v9p?file=%2Fsrc%2Fmain.rs%3A1%2C1)
 
-<iframe src="https://codesandbox.io/p/sandbox/16-router-forked-hrrt3h?file=%2Fsrc%2Fmain.rs" width="100%" height="1000px" style="max-height: 100vh"></iframe>
+<iframe src="https://codesandbox.io/p/sandbox/20-form-0-5-9g7v9p?file=%2Fsrc%2Fmain.rs%3A1%2C1" width="100%" height="1000px" style="max-height: 100vh"></iframe>
 
 <details>
 <summary>CodeSandbox Source</summary>
@@ -172,9 +172,8 @@ pub fn FormExample() -> impl IntoView {
 }
 
 fn main() {
-    leptos::mount_to_body(|| view! { <App/> })
+    leptos::mount_to_body(App)
 }
-
 ```
 
 </details>

docs/book/src/testing.md

@@ -86,7 +86,6 @@ fn clear() {
 
     clear.click();
 
-```rust
 assert_eq!(
     div.outer_html(),
     // here we spawn a mini reactive system to render the test case
@@ -108,6 +107,7 @@ assert_eq!(
         .outer_html()
     })
 );
+}
 ````
 
 ### [`wasm-bindgen-test` with `counters_stable`](https://github.com/leptos-rs/leptos/tree/main/examples/counters_stable/tests/web)

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

@@ -156,9 +156,9 @@ You can see here that while `set_count` just sets the value, `set_count.update()
 Other Previews > 8080.` Hover over any of the variables to show Rust-Analyzer details
 > and docs for what’s going on. Feel free to fork the examples to play with them yourself!
 
-[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)
+[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/1-basic-component-3d74p3?file=%2Fsrc%2Fmain.rs%3A1%2C1)
 
-<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>
+<iframe src="https://codesandbox.io/p/sandbox/1-basic-component-3d74p3?file=%2Fsrc%2Fmain.rs%3A1%2C1" width="100%" height="1000px" style="max-height: 100vh"></iframe>
 
 <details>
 <summary>CodeSandbox Source</summary>

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

@@ -145,9 +145,10 @@ Derived signals let you create reactive computed values that can be used in mult
 places in your application with minimal overhead.
 
 Note: Using a derived signal like this means that the calculation runs once per
-signal change and once per place we access `double_count`; in other words, twice. This is a
-very cheap calculation, so that’s fine. We’ll look at memos in a later chapter, which
-are designed to solve this problem for expensive calculations.
+signal change (when `count()` changes) and once per place we access `double_count`;
+in other words, twice. This is a very cheap calculation, so that’s fine.
+We’ll look at memos in a later chapter, which re designed to solve this problem
+for expensive calculations.
 
 > #### Advanced Topic: Injecting Raw HTML
 >
@@ -166,9 +167,9 @@ are designed to solve this problem for expensive calculations.
 >
 > [Click here for the full `view` macros docs](https://docs.rs/leptos/latest/leptos/macro.view.html).
 
-[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/2-dynamic-attribute-pqyvzl?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A2%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A2%7D%5D)
+[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/2-dynamic-attributes-0-5-lwdrpm?file=%2Fsrc%2Fmain.rs%3A1%2C1)
 
-<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>
+<iframe src="https://codesandbox.io/p/sandbox/2-dynamic-attributes-0-5-lwdrpm?file=%2Fsrc%2Fmain.rs%3A1%2C1" width="100%" height="1000px" style="max-height: 100vh"></iframe>
 
 <details>
 <summary>Code Sandbox Source</summary>
@@ -227,7 +228,33 @@ fn App() -> impl IntoView {
 }
 
 fn main() {
-    leptos::mount_to_body(|| view! { <App/> })
+    leptos::mount_to_body(App)
+}
+
+            // 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(App)
 }
 ```
 

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

@@ -404,9 +404,9 @@ and see the power of the `#[component]` macro combined with rust-analyzer here.
 > In general, you should not need to use transparent components unless you are
 > creating custom wrapping components that fall into one of these two categories.
 
-[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/3-components-50t2e7?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A7%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A7%7D%5D)
+[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/3-components-0-5-5vvl69?file=%2Fsrc%2Fmain.rs%3A1%2C1)
 
-<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>
+<iframe src="https://codesandbox.io/p/sandbox/3-components-0-5-5vvl69?file=%2Fsrc%2Fmain.rs%3A1%2C1" width="100%" height="1000px" style="max-height: 100vh"></iframe>
 
 <details>
 <summary>CodeSandbox Source</summary>
@@ -473,7 +473,7 @@ fn App() -> impl IntoView {
 }
 
 fn main() {
-    leptos::mount_to_body(|| view! { <App/> })
+    leptos::mount_to_body(App)
 }
 ```
 

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

@@ -5,7 +5,7 @@ iterating over a list of items is a common task in web applications. Reconciling
 the differences between changing sets of items can also be one of the trickiest
 tasks for a framework to handle well.
 
-Leptos supports to two different patterns for iterating over items:
+Leptos supports two different patterns for iterating over items:
 
 1. For static views: `Vec<_>`
 2. For dynamic lists: `<For/>`
@@ -51,7 +51,8 @@ The fact that the _list_ is static doesn’t mean the interface needs to be stat
 You can render dynamic items as part of a static list.
 
 ```rust
-// create a list of N signals
+// create a list of 5 signals
+let length = 5;
 let counters = (1..=length).map(|idx| create_signal(idx));
 
 // each item manages a reactive view
@@ -86,7 +87,7 @@ keyed dynamic list. It takes three props:
 
 - `each`: a function (such as a signal) that returns the items `T` to be iterated over
 - `key`: a key function that takes `&T` and returns a stable, unique key or ID
-- `view`: renders each `T` into a view
+- `children`: renders each `T` into a view
 
 `key` is, well, the key. You can add, remove, and move items within the list. As
 long as each item’s key is stable over time, the framework does not need to rerender
@@ -103,9 +104,9 @@ it is generated, and using that as an ID for the key function.
 
 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)
+[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/4-iteration-0-5-pwdn2y?file=%2Fsrc%2Fmain.rs%3A1%2C1)
 
-<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>
+<iframe src="https://codesandbox.io/p/sandbox/4-iteration-0-5-pwdn2y?file=%2Fsrc%2Fmain.rs%3A1%2C1" width="100%" height="1000px" style="max-height: 100vh"></iframe>
 
 <details>
 <summary>CodeSandbox Source</summary>
@@ -136,7 +137,6 @@ fn App() -> impl IntoView {
 /// to add or remove any.
 #[component]
 fn StaticList(
-
     /// How many counters to include in this list.
     length: usize,
 ) -> impl IntoView {
@@ -172,7 +172,6 @@ fn StaticList(
 /// remove counters.
 #[component]
 fn DynamicList(
-
     /// The number of counters to begin with.
     initial_length: usize,
 ) -> impl IntoView {
@@ -258,9 +257,8 @@ fn DynamicList(
 }
 
 fn main() {
-    leptos::mount_to_body(|| view! { <App/> })
+    leptos::mount_to_body(App)
 }
-
 ```
 
 </details>

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

@@ -0,0 +1,278 @@
+# Iterating over More Complex Data with `<For/>`
+
+This chapter goes into iteration over nested data structures in a bit
+more depth. It belongs here with the other chapter on iteration, but feel
+free to skip it and come back if you’d like to stick with simpler subjects
+for now.
+
+## The Problem
+
+I just said that the framework does not rerender any of the items in one of the
+rows, unless the key has changed. This probably makes sense at first, but it can
+easily trip you up.
+
+Let’s consider an example in which each of the items in our row is some data structure.
+Imagine, for example, that the items come from some JSON array of keys and values:
+
+```rust
+#[derive(Debug, Clone)]
+struct DatabaseEntry {
+    key: String,
+    value: i32,
+}
+```
+
+Let’s define a simple component that will iterate over the rows and display each one:
+
+```rust
+#[component]
+pub fn App() -> impl IntoView {
+	// start with a set of three rows
+    let (data, set_data) = create_signal(vec![
+        DatabaseEntry {
+            key: "foo".to_string(),
+            value: 10,
+        },
+        DatabaseEntry {
+            key: "bar".to_string(),
+            value: 20,
+        },
+        DatabaseEntry {
+            key: "baz".to_string(),
+            value: 15,
+        },
+    ]);
+    view! {
+		// when we click, update each row,
+		// doubling its value
+        <button on:click=move |_| {
+            set_data.update(|data| {
+                for row in data {
+                    row.value *= 2;
+                }
+            });
+			// log the new value of the signal
+            logging::log!("{:?}", data.get());
+        }>
+            "Update Values"
+        </button>
+		// iterate over the rows and display each value
+        <For
+            each=data
+            key=|state| state.key.clone()
+            let:child
+        >
+            <p>{child.value}</p>
+        </For>
+    }
+}
+```
+
+> Note the `let:child` syntax here. In the previous chapter we introduced `<For/>`
+> with a `children` prop. We can actually create this value directly in the children
+> of the `<For/>` component, without breaking out of the `view` macro: the `let:child`
+> combined with `<p>{child.value}</p>` above is the equivalent of
+>
+> ```rust
+> children=|child| view! { <p>{child.value}</p> }
+> ```
+
+When you click the `Update Values` button... nothing happens. Or rather:
+the signal is updated, the new value is logged, but the `{child.value}`
+for each row doesn’t update.
+
+Let’s see: is that because we forgot to add a closure to make it reactive?
+Let’s try `{move || child.value}`.
+
+...Nope. Still nothing.
+
+Here’s the problem: as I said, each row is only rerendered when the key changes.
+We’ve updated the value for each row, but not the key for any of the rows, so
+nothing has rerendered. And if you look at the type of `child.value`, it’s a plain
+`i32`, not a reactive `ReadSignal<i32>` or something. This means that even if we
+wrap a closure around it, the value in this row will never update.
+
+We have three possible solutions:
+
+1. change the `key` so that it always updates when the data structure changes
+2. change the `value` so that it’s reactive
+3. take a reactive slice of the data structure instead of using each row directly
+
+## Option 1: Change the Key
+
+Each row is only rerendered when the key changes. Our rows above didn’t rerender,
+because the key didn’t change. So: why not just force the key to change?
+
+```rust
+<For
+	each=data
+	key=|state| (state.key.clone(), state.value)
+	let:child
+>
+	<p>{child.value}</p>
+</For>
+```
+
+Now we include both the key and the value in the `key`. This means that whenever the
+value of a row changes, `<For/>` will treat it as if it’s an entirely new row, and
+replace the previous one.
+
+### Pros
+
+This is very easy. We can make it even easier by deriving `PartialEq`, `Eq`, and `Hash`
+on `DatabaseEntry`, in which case we could just `key=|state| state.clone()`.
+
+### Cons
+
+**This is the least efficient of the three options.** Every time the value of a row
+changes, it throws out the previous `<p>` element and replaces it with an entirely new
+one. Rather than making a fine-grained update to the text node, in other words, it really
+does rerender the entire row on every change, and this is expensive in proportion to how
+complex the UI of the row is.
+
+You’ll notice we also end up cloning the whole data structure so that `<For/>` can hold
+onto a copy of the key. For more complex structures, this can become a bad idea fast!
+
+## Option 2: Nested Signals
+
+If we do want that fine-grained reactivity for the value, one option is to wrap the `value`
+of each row in a signal.
+
+```rust
+#[derive(Debug, Clone)]
+struct DatabaseEntry {
+    key: String,
+    value: RwSignal<i32>,
+}
+```
+
+`RwSignal<_>` is a “read-write signal,” which combines the getter and setter in one object.
+I’m using it here because it’s a little easier to store in a struct than separate getters
+and setters.
+
+```rust
+#[component]
+pub fn App() -> impl IntoView {
+	// start with a set of three rows
+    let (data, set_data) = create_signal(vec![
+        DatabaseEntry {
+            key: "foo".to_string(),
+            value: create_rw_signal(10),
+        },
+        DatabaseEntry {
+            key: "bar".to_string(),
+            value: create_rw_signal(20),
+        },
+        DatabaseEntry {
+            key: "baz".to_string(),
+            value: create_rw_signal(15),
+        },
+    ]);
+    view! {
+		// when we click, update each row,
+		// doubling its value
+        <button on:click=move |_| {
+            data.with(|data| {
+                for row in data {
+                    row.value.update(|value| *value *= 2);
+                }
+            });
+			// log the new value of the signal
+            logging::log!("{:?}", data.get());
+        }>
+            "Update Values"
+        </button>
+		// iterate over the rows and display each value
+        <For
+            each=data
+            key=|state| state.key.clone()
+            let:child
+        >
+            <p>{child.value}</p>
+        </For>
+    }
+}
+```
+
+This version works! And if you look in the DOM inspector in your browser, you’ll
+see that unlike in the previous version, in this version only the individual text
+nodes are updated. Passing the signal directly into `{child.value}` works, as
+signals do keep their reactivity if you pass them into the view.
+
+Note that I changed the `set_data.update()` to a `data.with()`. `.with()` is the
+non-cloning way of accessing a signal’s value. In this case, we are only updating
+the internal values, not updating the list of values: because signals maintain their
+own state, we don’t actual need to update the `data` signal at all, so the immutable
+`.with()` is fine here.
+
+> In fact, this version doesn’t update `data`, so the `<For/>` is essentially a static
+> list as in the last chapter, and this could just be a plain iterator. But the `<For/>`
+> is useful if we want to add or remove rows in the future.
+
+### Pros
+
+This is the most efficient option, and fits directly with the rest of the mental model
+of the framework: values that change over time are wrapped in signals so the interface
+can respond to them.
+
+### Cons
+
+Nested reactivity can be cumbersome if you’re receiving data from an API or another
+data source you don’t control, and you don’t want to create a different struct wrapping
+each field in a signal.
+
+## Option 3: Memoized Slices
+
+Leptos provides a primitive called [`create_memo`](https://docs.rs/leptos/latest/leptos/fn.create_memo.html),
+which creates a derived computation that only triggers a reactive update when its value
+has changed.
+
+This allows you to create reactive values for subfields of a larger data structure,
+without needing to wrap the fields of that structure in signals.
+
+Most of the application can remain the same as the initial (broken) version, but the `<For/>`
+will be updated to this:
+
+```rust
+<For
+    each=move || data().into_iter().enumerate()
+    key=|(_, state)| state.key.clone()
+    children=move |(index, _)| {
+        let value = create_memo(move |_| {
+            data.with(|data| data.get(index).map(|d| d.value).unwrap_or(0))
+        });
+        view! {
+            <p>{value}</p>
+        }
+    }
+/>
+```
+
+You’ll notice a few differences here:
+
+- we convert the `data` signal into an enumerated iterator
+- we use the `children` prop explicitly, to make it easier to run some non-`view` code
+- we define a `value` memo and use that in the view. This `value` field doesn’t actually
+  use the `child` being passed into each row. Instead, it uses the index and reaches back
+  into the original `data` to get the value.
+
+Every time `data` changes, now, each memo will be recalculated. If its value has changed,
+it will update its text node, without rerendering the whole row.
+
+## Pros
+
+We get the same fine-grained reactivity of the signal-wrapped version, without needing to
+wrap the data in signals.
+
+## Cons
+
+It’s a bit more complex to set up this memo-per-row inside the `<For/>` loop rather than
+using nested signals. For example, you’ll notice that we have to guard against the possibility
+that the `data[index]` would panic by using `data.get(index)`, because this memo may be 
+triggered to re-run once just after the row is removed. (This is because the memo for each row
+and the whole `<For/>` both depend on the same `data` signal, and the order of execution for
+multiple reactive values that depend on the same signal isn’t guaranteed.)
+
+Note also that while memos memoize their reactive changes, the same
+calculation does need to re-run to check the value every time, so nested reactive signals
+will still be more efficient for pinpoint updates here.

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

@@ -19,7 +19,7 @@ There are two important things to remember:
 2. The `value` _attribute_ only sets the initial value of the input, i.e., it
    only updates the input up to the point that you begin typing. The `value`
    _property_ continues updating the input after that. You usually want to set
-   `prop:value` for this reason. (The same is true for `checked` and `prop:checked` 
+   `prop:value` for this reason. (The same is true for `checked` and `prop:checked`
    on an `<input type="checkbox">`.)
 
 ```rust
@@ -44,28 +44,28 @@ view! {
 ```
 
 > #### Why do you need `prop:value`?
-> 
+>
 > Web browsers are the most ubiquitous and stable platform for rendering graphical user interfaces in existence. They have also maintained an incredible backwards compatibility over their three decades of existence. Inevitably, this means there are some quirks.
-> 
+>
 > One odd quirk is that there is a distinction between HTML attributes and DOM element properties, i.e., between something called an “attribute” which is parsed from HTML and can be set on a DOM element with `.setAttribute()`, and something called a “property” which is a field of the JavaScript class representation of that parsed HTML element.
 >
-> In the case of an `<input value=...>`, setting the `value` *attribute* is defined as setting the initial value for the input, and setting `value` *property* sets its current value. It maybe easiest to understand this by opening `about:blank` and running the following JavaScript in the browser console, line by line:
-> 
+> In the case of an `<input value=...>`, setting the `value` _attribute_ is defined as setting the initial value for the input, and setting `value` _property_ sets its current value. It maybe easiest to understand this by opening `about:blank` and running the following JavaScript in the browser console, line by line:
+>
 > ```js
 > // create an input and append it to the DOM
-> const el = document.createElement("input")
-> document.body.appendChild(el)
-> 
-> el.setAttribute("value", "test") // updates the input
-> el.setAttribute("value", "another test") // updates the input again
-> 
+> const el = document.createElement("input");
+> document.body.appendChild(el);
+>
+> el.setAttribute("value", "test"); // updates the input
+> el.setAttribute("value", "another test"); // updates the input again
+>
 > // now go and type into the input: delete some characters, etc.
-> 
-> el.setAttribute("value", "one more time?") 
+>
+> el.setAttribute("value", "one more time?");
 > // nothing should have changed. setting the "initial value" does nothing now
-> 
+>
 > // however...
-> el.value = "But this works"
+> el.value = "But this works";
 > ```
 >
 > Many other frontend frameworks conflate attributes and properties, or create a special case for inputs that sets the value correctly. Maybe Leptos should do this too; but for now, I prefer giving users the maximum amount of control over whether they’re setting an attribute or a property, and doing my best to educate people about the actual underlying browser behavior rather than obscuring it.
@@ -137,9 +137,9 @@ The view should be pretty self-explanatory by now. Note two things:
 2. We use `node_ref` to fill the `NodeRef`. (Older examples sometimes use `_ref`.
    They are the same thing, but `node_ref` has better rust-analyzer support.)
 
-[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)
+[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/5-forms-0-5-rf2t7c?file=%2Fsrc%2Fmain.rs%3A1%2C1)
 
-<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>
+<iframe src="https://codesandbox.io/p/sandbox/5-forms-0-5-rf2t7c?file=%2Fsrc%2Fmain.rs%3A1%2C1" width="100%" height="1000px" style="max-height: 100vh"></iframe>
 
 <details>
 <summary>CodeSandbox Source</summary>
@@ -242,9 +242,8 @@ fn UncontrolledComponent() -> impl IntoView {
 // Because we defined it as `fn App`, we can now use it in a
 // template as <App/>
 fn main() {
-    leptos::mount_to_body(|| view! { <App/> })
+    leptos::mount_to_body(App)
 }
-
 ```
 
 </details>

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

@@ -283,9 +283,9 @@ 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)
+[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/6-control-flow-0-5-4yn7qz?file=%2Fsrc%2Fmain.rs%3A1%2C1)
 
-<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>
+<iframe src="https://codesandbox.io/p/sandbox/6-control-flow-0-5-4yn7qz?file=%2Fsrc%2Fmain.rs%3A1%2C1" width="100%" height="1000px" style="max-height: 100vh"></iframe>
 
 <details>
 <summary>CodeSandbox Source</summary>
@@ -376,9 +376,8 @@ fn App() -> impl IntoView {
 }
 
 fn main() {
-    leptos::mount_to_body(|| view! { <App/> })
+    leptos::mount_to_body(App)
 }
-
 ```
 
 </details>

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

@@ -110,9 +110,9 @@ Not a number! Errors:
 If you fix the error, the error message will disappear and the content you’re wrapping in
 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)
+[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/7-errors-0-5-5mptv9?file=%2Fsrc%2Fmain.rs%3A1%2C1)
 
-<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>
+<iframe src="https://codesandbox.io/p/sandbox/7-errors-0-5-5mptv9?file=%2Fsrc%2Fmain.rs%3A1%2C1" width="100%" height="1000px" style="max-height: 100vh"></iframe>
 
 <details>
 <summary>CodeSandbox Source</summary>
@@ -167,9 +167,8 @@ fn App() -> impl IntoView {
 }
 
 fn main() {
-    leptos::mount_to_body(|| view! { <App/> })
+    leptos::mount_to_body(App)
 }
-
 ```
 
 </details>

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

@@ -72,9 +72,7 @@ pub fn App() -> impl IntoView {
 
 
 #[component]
-pub fn ButtonB<F>(on_click: F) -> impl IntoView
-where
-    F: Fn(MouseEvent) + 'static,
+pub fn ButtonB(#[prop(into)] on_click: Callback<MouseEvent>) -> impl IntoView
 {
     view! {
         <button on:click=on_click>
@@ -90,10 +88,50 @@ of keeping local state local, preventing the problem of spaghetti mutation. But
 the logic to mutate that signal needs to exist up in `<App/>`, not down in `<ButtonB/>`. These
 are real trade-offs, not a simple right-or-wrong choice.
 
+> Note the way we use the `Callback<In, Out>` type. This is basically a
+> wrapper around a closure `Fn(In) -> Out` that is also `Copy` and makes it
+> easy to pass around.
+> 
+> We also used the `#[prop(into)]` attribute so we can pass a normal closure into
+> `on_click`. Please see the [chapter "`into` Props"](./03_components.md#into-props) for more details.
+
+### 2.1 Use Closure instead of `Callback`
+
+You can use a Rust closure `Fn(MouseEvent)` directly instead of `Callback`:
+
+```rust
+#[component]
+pub fn App() -> impl IntoView {
+    let (toggled, set_toggled) = create_signal(false);
+    view! {
+        <p>"Toggled? " {toggled}</p>
+        <ButtonB on_click=move |_| set_toggled.update(|value| *value = !*value)/>
+    }
+}
+
+
+#[component]
+pub fn ButtonB<F>(on_click: F) -> impl IntoView
+where
+    F: Fn(MouseEvent) + 'static,
+pub fn ButtonB(#[prop(into)] on_click: Callback<MouseEvent>) -> impl IntoView
+{
+    view! {
+        <button on:click=on_click>
+            "Toggle"
+        </button>
+    }
+}
+```
+
+The code is very similar in this case. On more advanced use-cases using a
+closure might require some cloning compared to using a `Callback`.
+
 > Note the way we declare the generic type `F` here for the callback. If you’re
 > confused, look back at the [generic props](./03_components.html#generic-props) section
 > of the chapter on components.
 
+
 ## 3. Use an Event Listener
 
 You can actually write Option 2 in a slightly different way. If the callback maps directly onto
@@ -188,7 +226,7 @@ pub fn App() -> impl IntoView {
 }
 
 #[component]
-pub fn Layout(d: WriteSignal<bool>) -> impl IntoView {
+pub fn Layout(set_toggled: WriteSignal<bool>) -> impl IntoView {
     view! {
         <header>
             <h1>"My Page"</h1>
@@ -200,7 +238,7 @@ pub fn Layout(d: WriteSignal<bool>) -> impl IntoView {
 }
 
 #[component]
-pub fn Content(d: WriteSignal<bool>) -> impl IntoView {
+pub fn Content(set_toggled: WriteSignal<bool>) -> impl IntoView {
     view! {
         <div class="content">
             <ButtonD set_toggled/>
@@ -209,7 +247,7 @@ pub fn Content(d: WriteSignal<bool>) -> impl IntoView {
 }
 
 #[component]
-pub fn ButtonD<F>(d: WriteSignal<bool>) -> impl IntoView {
+pub fn ButtonD<F>(set_toggled: WriteSignal<bool>) -> impl IntoView {
     todo!()
 }
 ```
@@ -282,9 +320,9 @@ in `<ButtonD/>` and a single text node in `<App/>`. It’s as if the components
 themselves don’t exist at all. And, well... at runtime, they don’t. It’s just
 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)
+[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/8-parent-child-0-5-7rz7qd?file=%2Fsrc%2Fmain.rs%3A1%2C2)
 
-<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>
+<iframe src="https://codesandbox.io/p/sandbox/8-parent-child-0-5-7rz7qd?file=%2Fsrc%2Fmain.rs%3A1%2C2" width="100%" height="1000px" style="max-height: 100vh"></iframe>
 
 <details>
 <summary>CodeSandbox Source</summary>
@@ -318,7 +356,6 @@ pub fn App() -> impl IntoView {
     provide_context(SmallcapsContext(set_smallcaps));
 
     view! {
-
         <main>
             <p
                 // class: attributes take F: Fn() => bool, and these signals all implement Fn()
@@ -350,12 +387,10 @@ pub fn App() -> impl IntoView {
 /// 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)
         >
@@ -367,7 +402,6 @@ pub fn ButtonA(
 /// 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
@@ -375,7 +409,6 @@ where
     F: Fn(MouseEvent) + 'static,
 {
     view! {
-
         <button
             on:click=on_click
         >
@@ -401,7 +434,6 @@ where
 #[component]
 pub fn ButtonC() -> impl IntoView {
     view! {
-
         <button>
             "Toggle Italics"
         </button>
@@ -415,7 +447,6 @@ pub fn ButtonD() -> impl IntoView {
     let setter = use_context::<SmallcapsContext>().unwrap().0;
 
     view! {
-
         <button
             on:click=move |_| setter.update(|value| *value = !*value)
         >
@@ -425,9 +456,8 @@ pub fn ButtonD() -> impl IntoView {
 }
 
 fn main() {
-    leptos::mount_to_body(|| view! { <App/> })
+    leptos::mount_to_body(App)
 }
-
 ```
 
 </details>

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

@@ -96,7 +96,7 @@ a component that takes its children and turns them into an unordered list.
 
 ```rust
 #[component]
-pub fn WrapsChildren(Children) -> impl IntoView {
+pub fn WrapsChildren(children: Children) -> impl IntoView {
     // Fragment has `nodes` field that contains a Vec<View>
     let children = children()
         .nodes
@@ -122,9 +122,9 @@ view! {
 }
 ```
 
-[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)
+[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/9-component-children-0-5-m4jwhp?file=%2Fsrc%2Fmain.rs%3A1%2C1)
 
-<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>
+<iframe src="https://codesandbox.io/p/sandbox/9-component-children-0-5-m4jwhp?file=%2Fsrc%2Fmain.rs%3A1%2C1" width="100%" height="1000px" style="max-height: 100vh"></iframe>
 
 <details>
 <summary>CodeSandbox Source</summary>
@@ -178,7 +178,6 @@ pub fn App() -> impl IntoView {
 /// 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,
@@ -203,7 +202,7 @@ where
 
 /// Wraps each child in an `<li>` and embeds them in a `<ul>`.
 #[component]
-pub fn WrapsChildren(Children) -> impl IntoView {
+pub fn WrapsChildren(children: 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
@@ -222,9 +221,8 @@ pub fn WrapsChildren(Children) -> impl IntoView {
 }
 
 fn main() {
-    leptos::mount_to_body(|| view! { <App/> })
+    leptos::mount_to_body(App)
 }
-
 ```
 
 </details>

examples/Makefile.toml

@@ -18,7 +18,6 @@ CARGO_MAKE_CRATE_WORKSPACE_MEMBERS = [
   "hackernews",
   "hackernews_axum",
   "js-framework-benchmark",
-  "leptos-tailwind-axum",
   "login_with_token_csr_only",
   "parent_child",
   "router",
@@ -27,8 +26,9 @@ CARGO_MAKE_CRATE_WORKSPACE_MEMBERS = [
   "ssr_modes",
   "ssr_modes_axum",
   "suspense_tests",
-  "tailwind",
-  "tailwind_csr_trunk",
+  "tailwind_actix",
+  "tailwind_csr",
+  "tailwind_axum",
   "timer",
   "todo_app_sqlite",
   "todo_app_sqlite_axum",

examples/README.md

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

examples/directives/.cargo/config.toml

@@ -0,0 +1,2 @@
+[build]
+rustflags = ["--cfg=web_sys_unstable_apis"]

examples/directives/Cargo.toml

@@ -0,0 +1,17 @@
+[package]
+name = "directives"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+leptos = { path = "../../leptos", features = ["csr", "nightly"] }
+log = "0.4"
+console_log = "1"
+console_error_panic_hook = "0.1.7"
+web-sys = { version = "0.3", features = ["Clipboard", "Navigator"] }
+
+[dev-dependencies]
+wasm-bindgen-test = "0.3.0"
+wasm-bindgen = "0.2"
+web-sys = "0.3"
+gloo-timers = { version = "0.3", features = ["futures"] }

examples/directives/Makefile.toml

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

examples/directives/README.md

@@ -0,0 +1,7 @@
+# Leptos Directives Example
+
+This example showcases a basic leptos app that shows how to write and use directives. 
+
+## Getting Started
+
+See the [Examples README](../README.md) for setup and run instructions.

examples/directives/index.html

@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<link data-trunk rel="rust" data-wasm-opt="z" data-weak-refs/>
+	</head>
+	<body></body>
+</html>

examples/directives/rust-toolchain.toml

@@ -0,0 +1,3 @@
+
+[toolchain]
+channel = "nightly"

examples/directives/src/lib.rs

@@ -0,0 +1,51 @@
+use leptos::{ev::click, html::AnyElement, *};
+
+pub fn highlight(el: HtmlElement<AnyElement>) {
+    let mut highlighted = false;
+
+    let _ = el.clone().on(click, move |_| {
+        highlighted = !highlighted;
+
+        if highlighted {
+            let _ = el.clone().style("background-color", "yellow");
+        } else {
+            let _ = el.clone().style("background-color", "transparent");
+        }
+    });
+}
+
+pub fn copy_to_clipboard(el: HtmlElement<AnyElement>, content: &str) {
+    let content = content.to_string();
+
+    let _ = el.clone().on(click, move |evt| {
+        evt.prevent_default();
+        evt.stop_propagation();
+
+        let _ = window()
+            .navigator()
+            .clipboard()
+            .expect("navigator.clipboard to be available")
+            .write_text(&content);
+
+        let _ = el.clone().inner_html(format!("Copied \"{}\"", &content));
+    });
+}
+
+#[component]
+pub fn SomeComponent() -> impl IntoView {
+    view! {
+        <p>Some paragraphs</p>
+        <p>that can be clicked</p>
+        <p>in order to highlight them</p>
+    }
+}
+
+#[component]
+pub fn App() -> impl IntoView {
+    let data = "Hello World!";
+
+    view! {
+        <a href="#" use:copy_to_clipboard=data>"Copy \"" {data} "\" to clipboard"</a>
+        <SomeComponent use:highlight />
+    }
+}

examples/directives/src/main.rs

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

examples/directives/tests/web.rs

@@ -0,0 +1,58 @@
+use gloo_timers::future::sleep;
+use std::time::Duration;
+use wasm_bindgen::JsCast;
+use wasm_bindgen_test::*;
+
+wasm_bindgen_test_configure!(run_in_browser);
+use directives::App;
+use leptos::*;
+use web_sys::HtmlElement;
+
+#[wasm_bindgen_test]
+async fn test_directives() {
+    mount_to_body(|| view! { <App/> });
+    sleep(Duration::ZERO).await;
+
+    let document = leptos::document();
+    let paragraphs = document.query_selector_all("p").unwrap();
+
+    assert_eq!(paragraphs.length(), 3);
+
+    for i in 0..paragraphs.length() {
+        println!("i: {}", i);
+        let p = paragraphs
+            .item(i)
+            .unwrap()
+            .dyn_into::<HtmlElement>()
+            .unwrap();
+        assert_eq!(
+            p.style().get_property_value("background-color").unwrap(),
+            ""
+        );
+
+        p.click();
+
+        assert_eq!(
+            p.style().get_property_value("background-color").unwrap(),
+            "yellow"
+        );
+
+        p.click();
+
+        assert_eq!(
+            p.style().get_property_value("background-color").unwrap(),
+            "transparent"
+        );
+    }
+
+    let a = document
+        .query_selector("a")
+        .unwrap()
+        .unwrap()
+        .dyn_into::<HtmlElement>()
+        .unwrap();
+    assert_eq!(a.inner_html(), "Copy \"Hello World!\" to clipboard");
+
+    a.click();
+    assert_eq!(a.inner_html(), "Copied \"Hello World!\"");
+}

examples/hackernews_islands_axum/Cargo.toml

@@ -39,7 +39,6 @@ tokio = { version = "1.22.0", features = ["full"], optional = true }
 http = { version = "0.2.8", optional = true }
 web-sys = { version = "0.3", features = ["AbortController", "AbortSignal"] }
 wasm-bindgen = "0.2"
-wee_alloc = "0.4.5"
 lazy_static = "1.4.0"
 
 [features]

examples/hackernews_islands_axum/src/lib.rs

@@ -36,12 +36,6 @@ cfg_if! {
     if #[cfg(feature = "hydrate")] {
         use wasm_bindgen::prelude::wasm_bindgen;
 
-        extern crate wee_alloc;
-
-        // Use `wee_alloc` as the global allocator.
-        #[global_allocator]
-        static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
-
         #[wasm_bindgen]
         pub fn hydrate() {
             #[cfg(debug_assertions)]

examples/hackernews_islands_axum/src/main.rs

@@ -4,7 +4,6 @@ mod ssr_imports {
     pub use hackernews_islands::fallback::file_and_error_handler;
     pub use leptos::*;
     pub use leptos_axum::{generate_route_list, LeptosRoutes};
-    pub use tower_http::{compression::CompressionLayer, services::ServeFile};
 }
 
 #[cfg(feature = "ssr")]

examples/hackernews_js_fetch/.cargo/config.toml

@@ -1,2 +0,0 @@
-[build]
-target = "wasm32-unknown-unknown"

examples/hackernews_js_fetch/Cargo.toml

@@ -27,15 +27,20 @@ reqwest = { version = "0.11.13", features = ["json"] }
 axum = { version = "0.6", default-features = false, optional = true }
 tower = { version = "0.4.13", optional = true }
 http = { version = "0.2.8", optional = true }
-web-sys = { version = "0.3", features = ["AbortController", "AbortSignal", "Request", "Response"] }
+web-sys = { version = "0.3", features = [
+  "AbortController",
+  "AbortSignal",
+  "Request",
+  "Response",
+] }
 wasm-bindgen = "0.2"
-wasm-bindgen-futures = { version = "0.4.37", features = ["futures-core-03-stream"], optional = true }
+wasm-bindgen-futures = { version = "0.4.37", features = [
+  "futures-core-03-stream",
+], optional = true }
 axum-js-fetch = { version = "0.2.1", optional = true }
 lazy_static = "1.4.0"
 
 [features]
-default = ["csr"]
-csr = ["leptos/csr", "leptos_meta/csr", "leptos_router/csr"]
 hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"]
 ssr = [
   "dep:tower",
@@ -51,7 +56,7 @@ ssr = [
 
 [package.metadata.cargo-all-features]
 denylist = ["axum", "tower", "http", "leptos_axum"]
-skip_feature_sets = [["csr", "ssr"], ["csr", "hydrate"], ["ssr", "hydrate"]]
+skip_feature_sets = [["ssr", "hydrate"]]
 
 [package.metadata.leptos]
 # The name used by wasm-bindgen/cargo-leptos for the JS/WASM bundle. Defaults to the crate name

examples/hackernews_js_fetch/src/api.rs

@@ -17,8 +17,7 @@ where
     let abort_controller = web_sys::AbortController::new().ok();
     let abort_signal = abort_controller.as_ref().map(|a| a.signal());
 
-    // abort in-flight requests if the Scope is disposed
-    // i.e., if we've navigated away from this page
+    // abort in-flight requests if, e.g., we've navigated away from this page
     leptos::on_cleanup(move || {
         if let Some(abort_controller) = abort_controller {
             abort_controller.abort()

examples/hackernews_js_fetch/src/lib.rs

@@ -2,42 +2,35 @@ use cfg_if::cfg_if;
 use leptos::{component, view, IntoView};
 use leptos_meta::*;
 use leptos_router::*;
-use log::{info, Level};
 mod api;
 pub mod error_template;
 pub mod fallback;
 mod routes;
-use routes::{counters::*, nav::*, stories::*, story::*, users::*};
+use routes::{nav::*, stories::*, story::*, users::*};
+use wasm_bindgen::prelude::wasm_bindgen;
 
 #[component]
 pub fn App() -> impl IntoView {
     provide_meta_context();
     view! {
-
-        <>
-            <Link rel="shortcut icon" type_="image/ico" href="/public/favicon.ico"/>
-            <Stylesheet id="leptos" href="/public/style.css"/>
-            <Meta name="description" content="Leptos implementation of a HackerNews demo."/>
-            <Router>
-                <Nav />
-                <main>
-                    <Routes>
-                        <Route path="users/:id" view=User/>
-                        <Route path="stories/:id" view=Story/>
-                        <Route path=":stories?" view=Stories/>
-                        <Route path="counter" view=Counter/>
-                    </Routes>
-                </main>
-            </Router>
-        </>
+        <Link rel="shortcut icon" type_="image/ico" href="/public/favicon.ico"/>
+        <Stylesheet id="leptos" href="/public/style.css"/>
+        <Meta name="description" content="Leptos implementation of a HackerNews demo."/>
+        <Router>
+            <Nav />
+            <main>
+                <Routes>
+                    <Route path="users/:id" view=User/>
+                    <Route path="stories/:id" view=Story/>
+                    <Route path=":stories?" view=Stories/>
+                </Routes>
+            </main>
+        </Router>
     }
 }
 
-// Needs to be in lib.rs AFAIK because wasm-bindgen needs us to be compiling a lib. I may be wrong.
 cfg_if! {
     if #[cfg(feature = "hydrate")] {
-        use wasm_bindgen::prelude::wasm_bindgen;
-
         #[wasm_bindgen]
         pub fn hydrate() {
             _ = console_log::init_with_level(log::Level::Debug);
@@ -53,8 +46,8 @@ cfg_if! {
         routing::post
     };
     use leptos_axum::{generate_route_list, LeptosRoutes};
-    use wasm_bindgen::prelude::*;
     use leptos::*;
+    use log::{info, Level};
 
     #[wasm_bindgen]
     pub struct Handler(axum_js_fetch::App);
@@ -66,13 +59,8 @@ cfg_if! {
             console_error_panic_hook::set_once();
 
             let leptos_options = LeptosOptions::builder().output_name("client").site_pkg_dir("pkg").build();
-
-
             let routes = generate_route_list(App);
 
-            ClearServerCount::register_explicit().unwrap();
-            AdjustServerCount::register_explicit().unwrap();
-            GetServerCount::register_explicit().unwrap();
             // build our application with a route
             let app: axum::Router<(), axum::body::Body> = Router::new()
             .leptos_routes(&leptos_options, routes, || view! { <App/> } )

examples/hackernews_js_fetch/src/routes.rs

@@ -1,4 +1,3 @@
-pub mod counters;
 pub mod nav;
 pub mod stories;
 pub mod story;

examples/hackernews_js_fetch/src/routes/counters.rs

@@ -1,79 +0,0 @@
-/// This file is mostly copied from the counters isomorphic example
-/// just to demonstrate server actions in wasm
-use leptos::*;
-use std::sync::atomic::{AtomicI32, Ordering};
-static COUNT: AtomicI32 = AtomicI32::new(0);
-
-// "/api" is an optional prefix that allows you to locate server functions wherever you'd like on the server
-#[server(GetServerCount, "/api")]
-pub async fn get_server_count() -> Result<i32, ServerFnError> {
-    Ok(COUNT.load(Ordering::Relaxed))
-}
-
-#[server(AdjustServerCount, "/api")]
-pub async fn adjust_server_count(
-    delta: i32,
-    msg: String,
-) -> Result<i32, ServerFnError> {
-    let new = COUNT.load(Ordering::Relaxed) + delta;
-    COUNT.store(new, Ordering::Relaxed);
-    println!("message = {:?}", msg);
-    Ok(new)
-}
-
-#[server(ClearServerCount, "/api")]
-pub async fn clear_server_count() -> Result<i32, ServerFnError> {
-    COUNT.store(0, Ordering::Relaxed);
-    Ok(0)
-}
-
-// This is an example of "single-user" server functions
-// The counter value is loaded from the server, and re-fetches whenever
-// 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());
-    let counter = create_resource(
-        move || {
-            (
-                dec.version().get(),
-                inc.version().get(),
-                clear.version().get(),
-            )
-        },
-        |_| get_server_count(),
-    );
-
-    let value =
-        move || counter.get().map(|count| count.unwrap_or(0)).unwrap_or(0);
-    let error_msg = move || {
-        counter.get().and_then(|res| match res {
-            Ok(_) => None,
-            Err(e) => Some(e),
-        })
-    };
-
-    view! {
-        <div>
-            <h2>"Simple Counter"</h2>
-            <p>
-                "This counter sets the value on the server and automatically reloads the new value."
-            </p>
-            <div>
-                <button on:click=move |_| clear.dispatch(())>"Clear"</button>
-                <button on:click=move |_| dec.dispatch(())>"-1"</button>
-                <span>"Value: " {value}</span>
-                <button on:click=move |_| inc.dispatch(())>"+1"</button>
-            </div>
-            {move || {
-                error_msg()
-                    .map(|msg| {
-                        view! { <p>"Error: " {msg.to_string()}</p> }
-                    })
-            }}
-        </div>
-    }
-}

examples/hackernews_js_fetch/src/routes/stories.rs

@@ -36,12 +36,11 @@ pub fn Stories() -> impl IntoView {
     let (pending, set_pending) = create_signal(false);
 
     let hide_more_link = move || {
-        pending()
-            || stories.get().unwrap_or(None).unwrap_or_default().len() < 28
+        stories.get().unwrap_or(None).unwrap_or_default().len() < 28
+            || pending()
     };
 
     view! {
-
         <div class="news-view">
             <div class="news-list-nav">
                 <span>
@@ -65,30 +64,26 @@ pub fn Stories() -> impl IntoView {
                     }}
                 </span>
                 <span>"page " {page}</span>
-                <Transition
-                    fallback=move || view! {  <p>"Loading..."</p> }
+                <span class="page-link"
+                    class:disabled=hide_more_link
+                    aria-hidden=hide_more_link
                 >
-                    <span class="page-link"
-                        class:disabled=move || hide_more_link()
-                        aria-hidden=move || hide_more_link()
+                    <a href=move || format!("/{}?page={}", story_type(), page() + 1)
+                        aria-label="Next Page"
                     >
-                        <a href=move || format!("/{}?page={}", story_type(), page() + 1)
-                            aria-label="Next Page"
-                        >
-                            "more >"
-                        </a>
-                    </span>
-                </Transition>
+                        "more >"
+                    </a>
+                </span>
             </div>
             <main class="news-list">
                 <div>
                     <Transition
-                        fallback=move || view! {  <p>"Loading..."</p> }
+                        fallback=move || view! { <p>"Loading..."</p> }
                         set_pending
                     >
                         {move || match stories.get() {
                             None => None,
-                            Some(None) => Some(view! {  <p>"Error loading stories."</p> }.into_any()),
+                            Some(None) => Some(view! { <p>"Error loading stories."</p> }.into_any()),
                             Some(Some(stories)) => {
                                 Some(view! {
                                     <ul>
@@ -127,7 +122,7 @@ fn Story(story: api::Story) -> impl IntoView {
                     }.into_view()
                 } else {
                     let title = story.title.clone();
-                    view! {  <A href=format!("/stories/{}", story.id)>{title.clone()}</A> }.into_view()
+                    view! { <A href=format!("/stories/{}", story.id)>{title.clone()}</A> }.into_view()
                 }}
             </span>
             <br />
@@ -136,7 +131,7 @@ fn Story(story: api::Story) -> impl IntoView {
                     view! {
                         <span>
                             {"by "}
-                            {story.user.map(|user| view ! { <A href=format!("/users/{user}")>{user.clone()}</A>})}
+                            {story.user.map(|user| view ! {  <A href=format!("/users/{user}")>{user.clone()}</A>})}
                             {format!(" {} | ", story.time_ago)}
                             <A href=format!("/stories/{}", story.id)>
                                 {if story.comments_count.unwrap_or_default() > 0 {
@@ -149,7 +144,7 @@ fn Story(story: api::Story) -> impl IntoView {
                     }.into_view()
                 } else {
                     let title = story.title.clone();
-                    view! {  <A href=format!("/item/{}", story.id)>{title.clone()}</A> }.into_view()
+                    view! { <A href=format!("/item/{}", story.id)>{title.clone()}</A> }.into_view()
                 }}
             </span>
             {(story.story_type != "link").then(|| view! {

examples/hackernews_js_fetch/src/routes/story.rs

@@ -25,50 +25,47 @@ pub fn Story() -> impl IntoView {
     };
 
     view! {
-        <>
+        <Suspense fallback=|| view! {  "Loading..." }>
             <Meta name="description" content=meta_description/>
-                <Suspense fallback=|| view! { "Loading..." }>
-                    {move || story.get().map(|story| match story {
-                        None => view! {  <div class="item-view">"Error loading this story."</div> },
-                        Some(story) => view! {
-                            <div class="item-view">
-                                <div class="item-view-header">
-                                <a href=story.url target="_blank">
-                                    <h1>{story.title}</h1>
-                                </a>
-                                <span class="host">
-                                    "("{story.domain}")"
-                                </span>
-                                {story.user.map(|user| view! {  <p class="meta">
-                                    {story.points}
-                                    " points | by "
-                                    <A href=format!("/users/{user}")>{user.clone()}</A>
-                                    {format!(" {}", story.time_ago)}
-                                </p>})}
-                                </div>
-                                <div class="item-view-comments">
-                                <p class="item-view-comments-header">
-                                    {if story.comments_count.unwrap_or_default() > 0 {
-                                        format!("{} comments", story.comments_count.unwrap_or_default())
-                                    } else {
-                                        "No comments yet.".into()
-                                    }}
-                                </p>
-                                <ul class="comment-children">
-                                    <For
-                                        each=move || story.comments.clone().unwrap_or_default()
-                                        key=|comment| comment.id
-                                        let:comment
-                                    >
-                                        <Comment comment/>
-                                    </For>
-                                </ul>
-                            </div>
+            {move || story.get().map(|story| match story {
+                None => view! { <div class="item-view">"Error loading this story."</div> },
+                Some(story) => view! {
+                    <div class="item-view">
+                        <div class="item-view-header">
+                        <a href=story.url target="_blank">
+                            <h1>{story.title}</h1>
+                        </a>
+                        <span class="host">
+                            "("{story.domain}")"
+                        </span>
+                        {story.user.map(|user| view! { <p class="meta">
+                            {story.points}
+                            " points | by "
+                            <A href=format!("/users/{user}")>{user.clone()}</A>
+                            {format!(" {}", story.time_ago)}
+                        </p>})}
                         </div>
-                    }})
-                }
-            </Suspense>
-        </>
+                        <div class="item-view-comments">
+                        <p class="item-view-comments-header">
+                            {if story.comments_count.unwrap_or_default() > 0 {
+                                format!("{} comments", story.comments_count.unwrap_or_default())
+                            } else {
+                                "No comments yet.".into()
+                            }}
+                        </p>
+                        <ul class="comment-children">
+                            <For
+                                each=move || story.comments.clone().unwrap_or_default()
+                                key=|comment| comment.id
+                                let:comment
+                            >
+                                <Comment comment />
+                            </For>
+                        </ul>
+                    </div>
+                </div>
+            }})}
+        </Suspense>
     }
 }
 

examples/hackernews_js_fetch/src/routes/users.rs

@@ -17,9 +17,9 @@ pub fn User() -> impl IntoView {
     );
     view! {
         <div class="user-view">
-            <Suspense fallback=|| view! { "Loading..." }>
+            <Suspense fallback=|| view! {  "Loading..." }>
                 {move || user.get().map(|user| match user {
-                    None => view! {  <h1>"User not found."</h1> }.into_any(),
+                    None => view! { <h1>"User not found."</h1> }.into_any(),
                     Some(user) => view! {
                         <div>
                             <h1>"User: " {&user.id}</h1>
@@ -30,7 +30,7 @@ pub fn User() -> impl IntoView {
                                 <li>
                                 <span class="label">"Karma: "</span> {user.karma}
                                 </li>
-                                {user.about.as_ref().map(|about| view! {  <li inner_html=about class="about"></li> })}
+                                {user.about.as_ref().map(|about| view! { <li inner_html=about class="about"></li> })}
                             </ul>
                             <p class="links">
                                 <a href=format!("https://news.ycombinator.com/submitted?id={}", user.id)>"submissions"</a>

examples/login_with_token_csr_only/client/src/components/navbar.rs

@@ -3,10 +3,10 @@ use leptos::*;
 use leptos_router::*;
 
 #[component]
-pub fn NavBar<F>(logged_in: Signal<bool>, on_logout: F) -> impl IntoView
-where
-    F: Fn() + 'static + Clone,
-{
+pub fn NavBar(
+    logged_in: Signal<bool>,
+    #[prop(into)] on_logout: Callback<()>,
+) -> impl IntoView {
     view! {
         <nav>
             <Show
@@ -21,10 +21,7 @@ where
             >
                 <a
                     href="#"
-                    on:click={
-                        let on_logout = on_logout.clone();
-                        move |_| on_logout()
-                    }
+                    on:click=move |_| on_logout.call(())
                 >
                     "Logout"
                 </a>

examples/login_with_token_csr_only/client/src/lib.rs

@@ -57,7 +57,7 @@ pub fn App() -> impl IntoView {
 
     // -- callbacks -- //
 
-    let on_logout = move || {
+    let on_logout = move |_| {
         logout.dispatch(());
     };
 

examples/login_with_token_csr_only/client/src/pages/login.rs

@@ -8,10 +8,10 @@ use leptos::*;
 use leptos_router::*;
 
 #[component]
-pub fn Login<F>(api: UnauthorizedApi, on_success: F) -> impl IntoView
-where
-    F: Fn(AuthorizedApi) + 'static + Clone,
-{
+pub fn Login(
+    api: UnauthorizedApi,
+    #[prop(into)] on_success: Callback<AuthorizedApi>,
+) -> impl IntoView {
     let (login_error, set_login_error) = create_signal(None::<String>);
     let (wait_for_response, set_wait_for_response) = create_signal(false);
 
@@ -21,7 +21,6 @@ where
             let email = email.to_string();
             let password = password.to_string();
             let credentials = Credentials { email, password };
-            let on_success = on_success.clone();
             async move {
                 set_wait_for_response.update(|w| *w = true);
                 let result = api.login(&credentials).await;
@@ -29,7 +28,7 @@ where
                 match result {
                     Ok(res) => {
                         set_login_error.update(|e| *e = None);
-                        on_success(res);
+                        on_success.call(res);
                     }
                     Err(err) => {
                         let msg = match err {

examples/parent_child/rust-toolchain.toml

@@ -0,0 +1,3 @@
+
+[toolchain]
+channel = "nightly"

examples/parent_child/src/lib.rs

@@ -74,13 +74,11 @@ pub fn ButtonA(
 
 /// Button B receives a closure
 #[component]
-pub fn ButtonB<F>(
+pub fn ButtonB(
     /// Callback that will be invoked when the button is clicked.
-    on_click: F,
-) -> impl IntoView
-where
-    F: Fn(MouseEvent) + 'static,
-{
+    #[prop(into)]
+    on_click: Callback<MouseEvent>,
+) -> impl IntoView {
     view! {
 
         <button
@@ -89,18 +87,6 @@ where
             "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

examples/portal/Cargo.toml

@@ -0,0 +1,15 @@
+[package]
+name = "portal"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+leptos = { path = "../../leptos", features = ["csr", "nightly"] }
+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"
+web-sys = "0.3"

examples/portal/Makefile.toml

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

examples/portal/README.md

@@ -0,0 +1,7 @@
+# Leptos Portal Example
+
+This example showcases a basic leptos app with a portal.
+
+## Getting Started
+
+See the [Examples README](../README.md) for setup and run instructions.

examples/portal/index.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<link data-trunk rel="rust" data-wasm-opt="z" data-weak-refs/>
+	</head>
+	<body>
+		<div id="app"></div>
+	</body>
+</html>

examples/portal/src/lib.rs

@@ -0,0 +1,34 @@
+use leptos::*;
+
+#[component]
+pub fn App() -> impl IntoView {
+    let (show_overlay, set_show_overlay) = create_signal(false);
+    let (show_inside_overlay, set_show_inside_overlay) = create_signal(false);
+
+    view! {
+        <div>
+            <button id="btn-show" on:click=move |_| set_show_overlay(true)>
+                Show Overlay
+            </button>
+
+            <Show when=show_overlay fallback=|| ()>
+                <div>Show</div>
+                <Portal mount=document().get_element_by_id("app").unwrap()>
+                    <div style="position: fixed; z-index: 10; width: 100vw; height: 100vh; top: 0; left: 0; background: rgba(0, 0, 0, 0.8); color: white;">
+                        <p>This is in the body element</p>
+                        <button id="btn-hide" on:click=move |_| set_show_overlay(false)>
+                            Close Overlay
+                        </button>
+                        <button id="btn-toggle" on:click=move |_| set_show_inside_overlay(!show_inside_overlay())>
+                            Toggle inner
+                        </button>
+
+                        <Show when=show_inside_overlay fallback=|| view! { "Hidden" }>
+                            Visible
+                        </Show>
+                    </div>
+                </Portal>
+            </Show>
+        </div>
+    }
+}

examples/portal/src/main.rs

@@ -0,0 +1,15 @@
+use leptos::*;
+use portal::App;
+use wasm_bindgen::JsCast;
+
+fn main() {
+    _ = console_log::init_with_level(log::Level::Debug);
+    console_error_panic_hook::set_once();
+    mount_to(
+        leptos::document()
+            .get_element_by_id("app")
+            .unwrap()
+            .unchecked_into(),
+        || view! { <App/> },
+    )
+}

examples/portal/tests/web.rs

@@ -0,0 +1,60 @@
+use wasm_bindgen::JsCast;
+use wasm_bindgen_test::*;
+
+wasm_bindgen_test_configure!(run_in_browser);
+use leptos::*;
+use portal::App;
+use web_sys::HtmlButtonElement;
+
+#[wasm_bindgen_test]
+fn portal() {
+    let document = leptos::document();
+    let body = document.body().unwrap();
+
+    let div = document.create_element("div").unwrap();
+    div.set_id("app");
+    let _ = body.append_child(&div);
+
+    mount_to(div.clone().unchecked_into(), || view! { <App/> });
+
+    let show_button = document
+        .get_element_by_id("btn-show")
+        .unwrap()
+        .unchecked_into::<HtmlButtonElement>();
+
+    show_button.click();
+
+    // next_tick().await;
+
+    // check HTML
+    assert_eq!(
+        div.inner_html(),
+            "<!-- <App> --><div><button id=\"btn-show\">\n                Show Overlay\n            </button><!-- <Show> --><!-- <DynChild> --><!-- <> --><div>Show</div><!-- <Portal> --><!-- <() /> --><!-- </Portal> --><!-- </> --><!-- </DynChild> --><!-- </Show> --></div><!-- </App> --><div><!-- <> --><div style=\"position: fixed; z-index: 10; width: 100vw; height: 100vh; top: 0; left: 0; background: rgba(0, 0, 0, 0.8); color: white;\"><p>This is in the body element</p><button id=\"btn-hide\">\n                            Close Overlay\n                        </button><button id=\"btn-toggle\">\n                            Toggle inner\n                        </button><!-- <Show> --><!-- <DynChild> -->Hidden<!-- </DynChild> --><!-- </Show> --></div><!-- </> --></div>"
+        );
+
+    let toggle_button = document
+        .get_element_by_id("btn-toggle")
+        .unwrap()
+        .unchecked_into::<HtmlButtonElement>();
+
+    toggle_button.click();
+
+    assert_eq!(
+        div.inner_html(),
+            "<!-- <App> --><div><button id=\"btn-show\">\n                Show Overlay\n            </button><!-- <Show> --><!-- <DynChild> --><!-- <> --><div>Show</div><!-- <Portal> --><!-- <() /> --><!-- </Portal> --><!-- </> --><!-- </DynChild> --><!-- </Show> --></div><!-- </App> --><div><!-- <> --><div style=\"position: fixed; z-index: 10; width: 100vw; height: 100vh; top: 0; left: 0; background: rgba(0, 0, 0, 0.8); color: white;\"><p>This is in the body element</p><button id=\"btn-hide\">\n                            Close Overlay\n                        </button><button id=\"btn-toggle\">\n                            Toggle inner\n                        </button><!-- <Show> --><!-- <DynChild> --><!-- <> -->\n                            Visible\n                        <!-- </> --><!-- </DynChild> --><!-- </Show> --></div><!-- </> --></div>"
+        );
+
+    let hide_button = document
+        .get_element_by_id("btn-hide")
+        .unwrap()
+        .unchecked_into::<HtmlButtonElement>();
+
+    hide_button.click();
+
+    assert_eq!(
+        div.inner_html(),
+        "<!-- <App> --><div><button id=\"btn-show\">\n                Show \
+         Overlay\n            </button><!-- <Show> --><!-- <DynChild> --><!-- \
+         <() /> --><!-- </DynChild> --><!-- </Show> --></div><!-- </App> -->"
+    );
+}

examples/tailwind_actix/rust-toolchain.toml

@@ -0,0 +1,2 @@
+[toolchain]
+channel = "nightly"

examples/tailwind_axum/rust-toolchain.toml

@@ -0,0 +1,3 @@
+
+[toolchain]
+channel = "nightly"