v0.5.4

* ci: run ci examples on leptos change

* chore(ci): simulate leptos source change

* ci(todo_app_sqlite_csr): increase retries

* ci: delete check examples workflow

* ci: rename ci examples workflow

* ci: run ci examples with stable toolchain

* chore(ci): remove simulated change

* ci: delete check stable workflow

.github/workflows/ci-examples.yml

@@ -1,4 +1,4 @@
-name: Check Examples
+name: CI Examples
 
 on:
   push:
@@ -11,12 +11,10 @@ on:
 jobs:
   get-leptos-changed:
     uses: ./.github/workflows/get-leptos-changed.yml
-
   get-examples-matrix:
     uses: ./.github/workflows/get-examples-matrix.yml
-
   test:
-    name: Check
+    name: CI
     needs: [get-leptos-changed, get-examples-matrix]
     if: needs.get-leptos-changed.outputs.leptos_changed == 'true'
     strategy:
@@ -25,5 +23,5 @@ jobs:
     uses: ./.github/workflows/run-cargo-make-task.yml
     with:
       directory: ${{ matrix.directory }}
-      cargo_make_task: "check"
+      cargo_make_task: "ci"
       toolchain: nightly

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

@@ -1,4 +1,4 @@
-name: Check stable
+name: CI Stable Examples
 
 on:
   push:
@@ -13,7 +13,7 @@ jobs:
     uses: ./.github/workflows/get-leptos-changed.yml
 
   test:
-    name: Check
+    name: CI
     needs: [get-leptos-changed]
     if: needs.get-leptos-changed.outputs.leptos_changed == 'true'
     strategy:
@@ -22,5 +22,5 @@ jobs:
     uses: ./.github/workflows/run-cargo-make-task.yml
     with:
       directory: ${{ matrix.directory }}
-      cargo_make_task: "check"
+      cargo_make_task: "ci"
       toolchain: stable

.github/workflows/get-changed-examples-matrix.yml

@@ -26,7 +26,7 @@ jobs:
 
       - name: Get example project directories that changed
         id: changed-dirs
-        uses: tj-actions/changed-files@v36
+        uses: tj-actions/changed-files@v39
         with:
           dir_names: true
           dir_names_max_depth: "2"

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

@@ -21,7 +21,7 @@ jobs:
 
       - name: Get example files that changed
         id: changed-files
-        uses: tj-actions/changed-files@v36
+        uses: tj-actions/changed-files@v39
         with:
           files: |
             examples

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

@@ -19,7 +19,7 @@ jobs:
 
       - name: Get source files that changed
         id: changed-source
-        uses: tj-actions/changed-files@v36
+        uses: tj-actions/changed-files@v39
         with:
           files: |
             integrations

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

@@ -53,7 +53,7 @@ jobs:
         run: trunk --version
 
       - name: Install Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
 

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

@@ -1,26 +0,0 @@
-name: CI Examples
-
-on:
-  workflow_dispatch:
-  push:
-    tags:
-      - v*
-  schedule:
-    # Run once a day at 3:00 AM EST
-    - cron: "0 8 * * *"
-
-jobs:
-  get-examples-matrix:
-    uses: ./.github/workflows/get-examples-matrix.yml
-
-  test:
-    name: CI
-    needs: [get-examples-matrix]
-    strategy:
-      matrix: ${{ fromJSON(needs.get-examples-matrix.outputs.matrix) }}
-      fail-fast: false
-    uses: ./.github/workflows/run-cargo-make-task.yml
-    with:
-      directory: ${{ matrix.directory }}
-      cargo_make_task: "ci"
-      toolchain: nightly

Cargo.toml

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

README.md

@@ -48,10 +48,6 @@ pub fn main() {
 }
 ```
 
-### Important Note
-
-This example, and the entire `main` branch, now reflect the upcoming `0.5.1` release. You can use `0.5.1` with the `0.5.1-beta` release on crates.io or by a git dependency on the `main` branch of this repo. [Click here for the 0.4.9 `README`](https://crates.io/crates/leptos).
-
 ## About the Framework
 
 Leptos is a full-stack, isomorphic Rust web framework leveraging fine-grained reactivity to build declarative user interfaces.

benchmarks/Cargo.toml

@@ -10,7 +10,10 @@ l0410 = { package = "leptos", version = "0.4.10", features = [
 ] }
 leptos = { path = "../leptos", features = ["ssr", "nightly"] }
 leptos_reactive = { path = "../leptos_reactive", features = ["ssr", "nightly"] }
-tachydom = { git = "https://github.com/gbj/tachys", features = ["nightly"] }
+tachydom = { git = "https://github.com/gbj/tachys", features = [
+	"nightly",
+	"leptos",
+] }
 tachy_maccy = { git = "https://github.com/gbj/tachys", features = ["nightly"] }
 sycamore = { version = "0.8", features = ["ssr"] }
 yew = { version = "0.20", features = ["ssr"] }

benchmarks/src/ssr.rs

@@ -30,8 +30,7 @@ fn leptos_ssr_bench(b: &mut Bencher) {
 
 			assert_eq!(
 				rendered,
-				"<main data-hk=\"0-0-1\"><h1 data-hk=\"0-0-2\">Welcome to our benchmark page.</h1><p data-hk=\"0-0-3\">Here&#x27;s some introductory text.</p><div data-hk=\"0-0-5\"><button data-hk=\"0-0-6\">-1</button><span data-hk=\"0-0-7\">Value: <!>1<!--hk=0-0-8-->!</span><button data-hk=\"0-0-9\">+1</button></div><!--hk=0-0-4--><div data-hk=\"0-0-11\"><button data-hk=\"0-0-12\">-1</button><span data-hk=\"0-0-13\">Value: <!>2<!--hk=0-0-14-->!</span><button data-hk=\"0-0-15\">+1</button></div><!--hk=0-0-10--><div data-hk=\"0-0-17\"><button data-hk=\"0-0-18\">-1</button><span data-hk=\"0-0-19\">Value: <!>3<!--hk=0-0-20-->!</span><button data-hk=\"0-0-21\">+1</button></div><!--hk=0-0-16--></main>"
-			);
+"<main data-hk=\"0-0-0-1\"><h1 data-hk=\"0-0-0-2\">Welcome to our benchmark page.</h1><p data-hk=\"0-0-0-3\">Here&#x27;s some introductory text.</p><div data-hk=\"0-0-0-5\"><button data-hk=\"0-0-0-6\">-1</button><span data-hk=\"0-0-0-7\">Value: <!>1<!--hk=0-0-0-8-->!</span><button data-hk=\"0-0-0-9\">+1</button></div><!--hk=0-0-0-4--><div data-hk=\"0-0-0-11\"><button data-hk=\"0-0-0-12\">-1</button><span data-hk=\"0-0-0-13\">Value: <!>2<!--hk=0-0-0-14-->!</span><button data-hk=\"0-0-0-15\">+1</button></div><!--hk=0-0-0-10--><div data-hk=\"0-0-0-17\"><button data-hk=\"0-0-0-18\">-1</button><span data-hk=\"0-0-0-19\">Value: <!>3<!--hk=0-0-0-20-->!</span><button data-hk=\"0-0-0-21\">+1</button></div><!--hk=0-0-0-16--></main>"			);
 	});
 	r.dispose();
 }
@@ -40,10 +39,15 @@ fn leptos_ssr_bench(b: &mut Bencher) {
 fn tachys_ssr_bench(b: &mut Bencher) {
 	use leptos::{create_runtime, create_signal, SignalGet, SignalUpdate};
 	use tachy_maccy::view;
-	use tachydom::view::Render;
+	use tachydom::view::{Render, RenderHtml};
+	use tachydom::html::element::ElementChild;
+	use tachydom::html::attribute::global::ClassAttribute;
+	use tachydom::html::attribute::global::GlobalAttributes;
+	use tachydom::html::attribute::global::OnAttribute;
+	use tachydom::renderer::dom::Dom;
 	let rt = create_runtime();
     b.iter(|| {
-		fn counter(initial: i32) -> impl Render {
+		fn counter(initial: i32) -> impl Render<Dom> + RenderHtml<Dom> {
 			let (value, set_value) = create_signal(initial);
 			view! {
 				<div>
@@ -54,7 +58,6 @@ fn tachys_ssr_bench(b: &mut Bencher) {
 			}
 		}
 
-		let mut buf = String::with_capacity(1024);
 		let rendered = view! { 
 			<main>
 				<h1>"Welcome to our benchmark page."</h1>
@@ -63,10 +66,9 @@ fn tachys_ssr_bench(b: &mut Bencher) {
 				{counter(2)}
 				{counter(3)}
 			</main>
-		};
-		rendered.to_html(&mut buf, &Default::default());
+		}.to_html();
 		assert_eq!(
-			buf,
+			rendered,
 			"<main><h1>Welcome to our benchmark page.</h1><p>Here's some introductory text.</p><div><button>-1</button><span>Value: <!>1<!>!</span><button>+1</button></div><div><button>-1</button><span>Value: <!>2<!>!</span><button>+1</button></div><div><button>-1</button><span>Value: <!>3<!>!</span><button>+1</button></div></main>"
 		);
 	});

benchmarks/src/todomvc/mod.rs

@@ -27,15 +27,12 @@ fn tachys_todomvc_ssr(b: &mut Bencher) {
     let runtime = create_runtime();
     b.iter(|| {
         use crate::todomvc::tachys::*;
-        use tachydom::view::Render;
+        use tachydom::view::{Render, RenderHtml};
 
-        let mut buf = String::new();
-        let rendered = TodoMVC(Todos::new());
-        rendered.to_html(&mut buf, &Default::default());
+        let rendered = TodoMVC(Todos::new()).to_html();
         assert_eq!(
-            buf,
-            "<main><section class=\"todoapp\"><header class=\"header\"><h1>todos</h1><input placeholder=\"What needs to be done?\" autofocus=\"\" class=\"new-todo\"></header><section class=\"main hidden\"><input id=\"toggle-all\" type=\"checkbox\" class=\"toggle-all\"><label for=\"toggle-all\">Mark all as complete</label><ul class=\"todo-list\"></ul></section><footer class=\"footer hidden\"><span class=\"todo-count\"><strong>0</strong><!> items<!> left</span><ul class=\"filters\"><li><a href=\"#/\" class=\"selected selected\">All</a></li><li><a href=\"#/active\" class=\"\">Active</a></li><li><a href=\"#/completed\" class=\"\">Completed</a></li></ul><button class=\"clear-completed hidden hidden\">Clear completed</button></footer></section><footer class=\"info\"><p>Double-click to edit a todo</p><p>Created by <a href=\"http://todomvc.com\">Greg Johnston</a></p><p>Part of <a href=\"http://todomvc.com\">TodoMVC</a></p></footer></main>"
-        );
+            rendered,
+"<main><section class=\"todoapp\"><header class=\"header\"><h1>todos</h1><input placeholder=\"What needs to be done?\" autofocus class=\"new-todo\"></header><section class=\"main hidden\"><input id=\"toggle-all\" type=\"checkbox\" class=\"toggle-all\"><label for=\"toggle-all\">Mark all as complete</label><ul class=\"todo-list\"></ul></section><footer class=\"footer hidden\"><span class=\"todo-count\"><strong>0</strong><!> items<!> left</span><ul class=\"filters\"><li><a href=\"#/\" class=\"selected selected\">All</a></li><li><a href=\"#/active\" class=\"\">Active</a></li><li><a href=\"#/completed\" class=\"\">Completed</a></li></ul><button class=\"clear-completed hidden hidden\">Clear completed</button></footer></section><footer class=\"info\"><p>Double-click to edit a todo</p><p>Created by <a href=\"http://todomvc.com\">Greg Johnston</a></p><p>Part of <a href=\"http://todomvc.com\">TodoMVC</a></p></footer></main>"        );
     });
     runtime.dispose();
 }
@@ -94,12 +91,10 @@ fn tachys_todomvc_ssr_with_1000(b: &mut Bencher) {
     let runtime = create_runtime();
     b.iter(|| {
         use crate::todomvc::tachys::*;
-        use tachydom::view::Render;
+        use tachydom::view::{Render, RenderHtml};
 
-        let mut buf = String::new();
-        let rendered = TodoMVC(Todos::new_with_1000());
-        rendered.to_html(&mut buf, &Default::default());
-        assert!(buf.len() > 20_000)
+        let rendered = TodoMVC(Todos::new_with_1000()).to_html();
+        assert!(rendered.len() > 20_000)
     });
     runtime.dispose();
 }

benchmarks/src/todomvc/tachys.rs

@@ -1,7 +1,14 @@
 pub use leptos_reactive::*;
 use miniserde::*;
 use tachy_maccy::view;
-use tachydom::view::Render;
+use tachydom::{
+    html::{
+        attribute::global::{ClassAttribute, GlobalAttributes, OnAttribute},
+        element::ElementChild,
+    },
+    renderer::dom::Dom,
+    view::{keyed::keyed, Render, RenderHtml},
+};
 use wasm_bindgen::JsCast;
 use web_sys::HtmlInputElement;
 
@@ -103,7 +110,7 @@ impl Todo {
 const ESCAPE_KEY: u32 = 27;
 const ENTER_KEY: u32 = 13;
 
-pub fn TodoMVC(todos: Todos) -> impl Render {
+pub fn TodoMVC(todos: Todos) -> impl Render<Dom> + RenderHtml<Dom> {
     let mut next_id = todos
         .0
         .iter()
@@ -178,7 +185,7 @@ pub fn TodoMVC(todos: Todos) -> impl Render {
                     <input
                         class="new-todo"
                         placeholder="What needs to be done?"
-                        autofocus=""
+                        autofocus
                     />
                 </header>
                 <section class="main" class:hidden=move || todos.with(|t| t.is_empty())>
@@ -191,7 +198,9 @@ pub fn TodoMVC(todos: Todos) -> impl Render {
                     />
                     <label r#for="toggle-all">"Mark all as complete"</label>
                     <ul class="todo-list">
-                        {filtered_todos.get().into_iter().map(Todo).collect::<Vec<_>>()}
+                        {move || {
+                            keyed(filtered_todos.get(), |todo| todo.id, Todo)
+                        }}
                     </ul>
                 </section>
                 <footer class="footer" class:hidden=move || todos.with(|t| t.is_empty())>
@@ -239,7 +248,7 @@ pub fn TodoMVC(todos: Todos) -> impl Render {
     }
 }
 
-pub fn Todo(todo: Todo) -> impl Render {
+pub fn Todo(todo: Todo) -> impl Render<Dom> + RenderHtml<Dom> {
     let (editing, set_editing) = create_signal(false);
     let set_todos = use_context::<WriteSignal<Todos>>().unwrap();
     //let input = NodeRef::new();

docs/book/README.md

@@ -12,3 +12,4 @@ mdbook serve
 ```
 
 It should be available at `http://localhost:3000`.
+

docs/book/book.toml

@@ -7,4 +7,4 @@ runnable = false
 
 [preprocessor.admonish]
 command = "mdbook-admonish"
-assets_version = "2.0.2" # do not edit: managed by `mdbook-admonish install`
+assets_version = "3.0.1" # do not edit: managed by `mdbook-admonish install`

docs/book/mdbook-admonish.css

@@ -1,31 +1,18 @@
 @charset "UTF-8";
 :root {
-  --md-admonition-icon--note:
-    url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z'/></svg>");
-  --md-admonition-icon--abstract:
-    url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17 9H7V7h10m0 6H7v-2h10m-3 6H7v-2h7M12 3a1 1 0 0 1 1 1 1 1 0 0 1-1 1 1 1 0 0 1-1-1 1 1 0 0 1 1-1m7 0h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z'/></svg>");
-  --md-admonition-icon--info:
-    url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2z'/></svg>");
-  --md-admonition-icon--tip:
-    url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17.66 11.2c-.23-.3-.51-.56-.77-.82-.67-.6-1.43-1.03-2.07-1.66C13.33 7.26 13 4.85 13.95 3c-.95.23-1.78.75-2.49 1.32-2.59 2.08-3.61 5.75-2.39 8.9.04.1.08.2.08.33 0 .22-.15.42-.35.5-.23.1-.47.04-.66-.12a.58.58 0 0 1-.14-.17c-1.13-1.43-1.31-3.48-.55-5.12C5.78 10 4.87 12.3 5 14.47c.06.5.12 1 .29 1.5.14.6.41 1.2.71 1.73 1.08 1.73 2.95 2.97 4.96 3.22 2.14.27 4.43-.12 6.07-1.6 1.83-1.66 2.47-4.32 1.53-6.6l-.13-.26c-.21-.46-.77-1.26-.77-1.26m-3.16 6.3c-.28.24-.74.5-1.1.6-1.12.4-2.24-.16-2.9-.82 1.19-.28 1.9-1.16 2.11-2.05.17-.8-.15-1.46-.28-2.23-.12-.74-.1-1.37.17-2.06.19.38.39.76.63 1.06.77 1 1.98 1.44 2.24 2.8.04.14.06.28.06.43.03.82-.33 1.72-.93 2.27z'/></svg>");
-  --md-admonition-icon--success:
-    url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m9 20.42-6.21-6.21 2.83-2.83L9 14.77l9.88-9.89 2.83 2.83L9 20.42z'/></svg>");
-  --md-admonition-icon--question:
-    url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m15.07 11.25-.9.92C13.45 12.89 13 13.5 13 15h-2v-.5c0-1.11.45-2.11 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41a2 2 0 0 0-2-2 2 2 0 0 0-2 2H8a4 4 0 0 1 4-4 4 4 0 0 1 4 4 3.2 3.2 0 0 1-.93 2.25M13 19h-2v-2h2M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10c0-5.53-4.5-10-10-10z'/></svg>");
-  --md-admonition-icon--warning:
-    url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 14h-2V9h2m0 9h-2v-2h2M1 21h22L12 2 1 21z'/></svg>");
-  --md-admonition-icon--failure:
-    url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6.91 17.09 4 12 9.09 6.91 4 4 6.91 9.09 12 4 17.09 6.91 20 12 14.91 17.09 20 20 17.09 14.91 12 20 6.91z'/></svg>");
-  --md-admonition-icon--danger:
-    url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11 15H6l7-14v8h5l-7 14v-8z'/></svg>");
-  --md-admonition-icon--bug:
-    url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 12h-4v-2h4m0 6h-4v-2h4m6-6h-2.81a5.985 5.985 0 0 0-1.82-1.96L17 4.41 15.59 3l-2.17 2.17a6.002 6.002 0 0 0-2.83 0L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8z'/></svg>");
-  --md-admonition-icon--example:
-    url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 13v-2h14v2H7m0 6v-2h14v2H7M7 7V5h14v2H7M3 8V5H2V4h2v4H3m-1 9v-1h3v4H2v-1h2v-.5H3v-1h1V17H2m2.25-7a.75.75 0 0 1 .75.75c0 .2-.08.39-.21.52L3.12 13H5v1H2v-.92L4 11H2v-1h2.25z'/></svg>");
-  --md-admonition-icon--quote:
-    url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 17h3l2-4V7h-6v6h3M6 17h3l2-4V7H5v6h3l-2 4z'/></svg>");
-  --md-details-icon:
-    url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59 16.58 13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.42Z'/></svg>");
+  --md-admonition-icon--admonish-note: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z'/></svg>");
+  --md-admonition-icon--admonish-abstract: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17 9H7V7h10m0 6H7v-2h10m-3 6H7v-2h7M12 3a1 1 0 0 1 1 1 1 1 0 0 1-1 1 1 1 0 0 1-1-1 1 1 0 0 1 1-1m7 0h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z'/></svg>");
+  --md-admonition-icon--admonish-info: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2z'/></svg>");
+  --md-admonition-icon--admonish-tip: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17.66 11.2c-.23-.3-.51-.56-.77-.82-.67-.6-1.43-1.03-2.07-1.66C13.33 7.26 13 4.85 13.95 3c-.95.23-1.78.75-2.49 1.32-2.59 2.08-3.61 5.75-2.39 8.9.04.1.08.2.08.33 0 .22-.15.42-.35.5-.23.1-.47.04-.66-.12a.58.58 0 0 1-.14-.17c-1.13-1.43-1.31-3.48-.55-5.12C5.78 10 4.87 12.3 5 14.47c.06.5.12 1 .29 1.5.14.6.41 1.2.71 1.73 1.08 1.73 2.95 2.97 4.96 3.22 2.14.27 4.43-.12 6.07-1.6 1.83-1.66 2.47-4.32 1.53-6.6l-.13-.26c-.21-.46-.77-1.26-.77-1.26m-3.16 6.3c-.28.24-.74.5-1.1.6-1.12.4-2.24-.16-2.9-.82 1.19-.28 1.9-1.16 2.11-2.05.17-.8-.15-1.46-.28-2.23-.12-.74-.1-1.37.17-2.06.19.38.39.76.63 1.06.77 1 1.98 1.44 2.24 2.8.04.14.06.28.06.43.03.82-.33 1.72-.93 2.27z'/></svg>");
+  --md-admonition-icon--admonish-success: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m9 20.42-6.21-6.21 2.83-2.83L9 14.77l9.88-9.89 2.83 2.83L9 20.42z'/></svg>");
+  --md-admonition-icon--admonish-question: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m15.07 11.25-.9.92C13.45 12.89 13 13.5 13 15h-2v-.5c0-1.11.45-2.11 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41a2 2 0 0 0-2-2 2 2 0 0 0-2 2H8a4 4 0 0 1 4-4 4 4 0 0 1 4 4 3.2 3.2 0 0 1-.93 2.25M13 19h-2v-2h2M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10c0-5.53-4.5-10-10-10z'/></svg>");
+  --md-admonition-icon--admonish-warning: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 14h-2V9h2m0 9h-2v-2h2M1 21h22L12 2 1 21z'/></svg>");
+  --md-admonition-icon--admonish-failure: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6.91 17.09 4 12 9.09 6.91 4 4 6.91 9.09 12 4 17.09 6.91 20 12 14.91 17.09 20 20 17.09 14.91 12 20 6.91z'/></svg>");
+  --md-admonition-icon--admonish-danger: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11 15H6l7-14v8h5l-7 14v-8z'/></svg>");
+  --md-admonition-icon--admonish-bug: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 12h-4v-2h4m0 6h-4v-2h4m6-6h-2.81a5.985 5.985 0 0 0-1.82-1.96L17 4.41 15.59 3l-2.17 2.17a6.002 6.002 0 0 0-2.83 0L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8z'/></svg>");
+  --md-admonition-icon--admonish-example: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 13v-2h14v2H7m0 6v-2h14v2H7M7 7V5h14v2H7M3 8V5H2V4h2v4H3m-1 9v-1h3v4H2v-1h2v-.5H3v-1h1V17H2m2.25-7a.75.75 0 0 1 .75.75c0 .2-.08.39-.21.52L3.12 13H5v1H2v-.92L4 11H2v-1h2.25z'/></svg>");
+  --md-admonition-icon--admonish-quote: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 17h3l2-4V7h-6v6h3M6 17h3l2-4V7H5v6h3l-2 4z'/></svg>");
+  --md-details-icon: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59 16.58 13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.42Z'/></svg>");
 }
 
 :is(.admonition) {
@@ -84,6 +71,8 @@ a.admonition-anchor-link::before {
   padding-inline: 4.4rem 1.2rem;
   font-weight: 700;
   background-color: rgba(68, 138, 255, 0.1);
+  print-color-adjust: exact;
+  -webkit-print-color-adjust: exact;
   display: flex;
 }
 :is(.admonition-title, summary.admonition-title) p {
@@ -99,6 +88,8 @@ html :is(.admonition-title, summary.admonition-title):last-child {
   width: 2rem;
   height: 2rem;
   background-color: #448aff;
+  print-color-adjust: exact;
+  -webkit-print-color-adjust: exact;
   mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"></svg>');
   -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"></svg>');
   mask-repeat: no-repeat;
@@ -132,204 +123,204 @@ details[open].admonition > summary.admonition-title::after {
   transform: rotate(90deg);
 }
 
-:is(.admonition):is(.note) {
+:is(.admonition):is(.admonish-note) {
   border-color: #448aff;
 }
 
-:is(.note) > :is(.admonition-title, summary.admonition-title) {
+:is(.admonish-note) > :is(.admonition-title, summary.admonition-title) {
   background-color: rgba(68, 138, 255, 0.1);
 }
-:is(.note) > :is(.admonition-title, summary.admonition-title)::before {
+:is(.admonish-note) > :is(.admonition-title, summary.admonition-title)::before {
   background-color: #448aff;
-  mask-image: var(--md-admonition-icon--note);
-  -webkit-mask-image: var(--md-admonition-icon--note);
+  mask-image: var(--md-admonition-icon--admonish-note);
+  -webkit-mask-image: var(--md-admonition-icon--admonish-note);
   mask-repeat: no-repeat;
   -webkit-mask-repeat: no-repeat;
   mask-size: contain;
   -webkit-mask-repeat: no-repeat;
 }
 
-:is(.admonition):is(.abstract, .summary, .tldr) {
+:is(.admonition):is(.admonish-abstract, .admonish-summary, .admonish-tldr) {
   border-color: #00b0ff;
 }
 
-:is(.abstract, .summary, .tldr) > :is(.admonition-title, summary.admonition-title) {
+:is(.admonish-abstract, .admonish-summary, .admonish-tldr) > :is(.admonition-title, summary.admonition-title) {
   background-color: rgba(0, 176, 255, 0.1);
 }
-:is(.abstract, .summary, .tldr) > :is(.admonition-title, summary.admonition-title)::before {
+:is(.admonish-abstract, .admonish-summary, .admonish-tldr) > :is(.admonition-title, summary.admonition-title)::before {
   background-color: #00b0ff;
-  mask-image: var(--md-admonition-icon--abstract);
-  -webkit-mask-image: var(--md-admonition-icon--abstract);
+  mask-image: var(--md-admonition-icon--admonish-abstract);
+  -webkit-mask-image: var(--md-admonition-icon--admonish-abstract);
   mask-repeat: no-repeat;
   -webkit-mask-repeat: no-repeat;
   mask-size: contain;
   -webkit-mask-repeat: no-repeat;
 }
 
-:is(.admonition):is(.info, .todo) {
+:is(.admonition):is(.admonish-info, .admonish-todo) {
   border-color: #00b8d4;
 }
 
-:is(.info, .todo) > :is(.admonition-title, summary.admonition-title) {
+:is(.admonish-info, .admonish-todo) > :is(.admonition-title, summary.admonition-title) {
   background-color: rgba(0, 184, 212, 0.1);
 }
-:is(.info, .todo) > :is(.admonition-title, summary.admonition-title)::before {
+:is(.admonish-info, .admonish-todo) > :is(.admonition-title, summary.admonition-title)::before {
   background-color: #00b8d4;
-  mask-image: var(--md-admonition-icon--info);
-  -webkit-mask-image: var(--md-admonition-icon--info);
+  mask-image: var(--md-admonition-icon--admonish-info);
+  -webkit-mask-image: var(--md-admonition-icon--admonish-info);
   mask-repeat: no-repeat;
   -webkit-mask-repeat: no-repeat;
   mask-size: contain;
   -webkit-mask-repeat: no-repeat;
 }
 
-:is(.admonition):is(.tip, .hint, .important) {
+:is(.admonition):is(.admonish-tip, .admonish-hint, .admonish-important) {
   border-color: #00bfa5;
 }
 
-:is(.tip, .hint, .important) > :is(.admonition-title, summary.admonition-title) {
+:is(.admonish-tip, .admonish-hint, .admonish-important) > :is(.admonition-title, summary.admonition-title) {
   background-color: rgba(0, 191, 165, 0.1);
 }
-:is(.tip, .hint, .important) > :is(.admonition-title, summary.admonition-title)::before {
+:is(.admonish-tip, .admonish-hint, .admonish-important) > :is(.admonition-title, summary.admonition-title)::before {
   background-color: #00bfa5;
-  mask-image: var(--md-admonition-icon--tip);
-  -webkit-mask-image: var(--md-admonition-icon--tip);
+  mask-image: var(--md-admonition-icon--admonish-tip);
+  -webkit-mask-image: var(--md-admonition-icon--admonish-tip);
   mask-repeat: no-repeat;
   -webkit-mask-repeat: no-repeat;
   mask-size: contain;
   -webkit-mask-repeat: no-repeat;
 }
 
-:is(.admonition):is(.success, .check, .done) {
+:is(.admonition):is(.admonish-success, .admonish-check, .admonish-done) {
   border-color: #00c853;
 }
 
-:is(.success, .check, .done) > :is(.admonition-title, summary.admonition-title) {
+:is(.admonish-success, .admonish-check, .admonish-done) > :is(.admonition-title, summary.admonition-title) {
   background-color: rgba(0, 200, 83, 0.1);
 }
-:is(.success, .check, .done) > :is(.admonition-title, summary.admonition-title)::before {
+:is(.admonish-success, .admonish-check, .admonish-done) > :is(.admonition-title, summary.admonition-title)::before {
   background-color: #00c853;
-  mask-image: var(--md-admonition-icon--success);
-  -webkit-mask-image: var(--md-admonition-icon--success);
+  mask-image: var(--md-admonition-icon--admonish-success);
+  -webkit-mask-image: var(--md-admonition-icon--admonish-success);
   mask-repeat: no-repeat;
   -webkit-mask-repeat: no-repeat;
   mask-size: contain;
   -webkit-mask-repeat: no-repeat;
 }
 
-:is(.admonition):is(.question, .help, .faq) {
+:is(.admonition):is(.admonish-question, .admonish-help, .admonish-faq) {
   border-color: #64dd17;
 }
 
-:is(.question, .help, .faq) > :is(.admonition-title, summary.admonition-title) {
+:is(.admonish-question, .admonish-help, .admonish-faq) > :is(.admonition-title, summary.admonition-title) {
   background-color: rgba(100, 221, 23, 0.1);
 }
-:is(.question, .help, .faq) > :is(.admonition-title, summary.admonition-title)::before {
+:is(.admonish-question, .admonish-help, .admonish-faq) > :is(.admonition-title, summary.admonition-title)::before {
   background-color: #64dd17;
-  mask-image: var(--md-admonition-icon--question);
-  -webkit-mask-image: var(--md-admonition-icon--question);
+  mask-image: var(--md-admonition-icon--admonish-question);
+  -webkit-mask-image: var(--md-admonition-icon--admonish-question);
   mask-repeat: no-repeat;
   -webkit-mask-repeat: no-repeat;
   mask-size: contain;
   -webkit-mask-repeat: no-repeat;
 }
 
-:is(.admonition):is(.warning, .caution, .attention) {
+:is(.admonition):is(.admonish-warning, .admonish-caution, .admonish-attention) {
   border-color: #ff9100;
 }
 
-:is(.warning, .caution, .attention) > :is(.admonition-title, summary.admonition-title) {
+:is(.admonish-warning, .admonish-caution, .admonish-attention) > :is(.admonition-title, summary.admonition-title) {
   background-color: rgba(255, 145, 0, 0.1);
 }
-:is(.warning, .caution, .attention) > :is(.admonition-title, summary.admonition-title)::before {
+:is(.admonish-warning, .admonish-caution, .admonish-attention) > :is(.admonition-title, summary.admonition-title)::before {
   background-color: #ff9100;
-  mask-image: var(--md-admonition-icon--warning);
-  -webkit-mask-image: var(--md-admonition-icon--warning);
+  mask-image: var(--md-admonition-icon--admonish-warning);
+  -webkit-mask-image: var(--md-admonition-icon--admonish-warning);
   mask-repeat: no-repeat;
   -webkit-mask-repeat: no-repeat;
   mask-size: contain;
   -webkit-mask-repeat: no-repeat;
 }
 
-:is(.admonition):is(.failure, .fail, .missing) {
+:is(.admonition):is(.admonish-failure, .admonish-fail, .admonish-missing) {
   border-color: #ff5252;
 }
 
-:is(.failure, .fail, .missing) > :is(.admonition-title, summary.admonition-title) {
+:is(.admonish-failure, .admonish-fail, .admonish-missing) > :is(.admonition-title, summary.admonition-title) {
   background-color: rgba(255, 82, 82, 0.1);
 }
-:is(.failure, .fail, .missing) > :is(.admonition-title, summary.admonition-title)::before {
+:is(.admonish-failure, .admonish-fail, .admonish-missing) > :is(.admonition-title, summary.admonition-title)::before {
   background-color: #ff5252;
-  mask-image: var(--md-admonition-icon--failure);
-  -webkit-mask-image: var(--md-admonition-icon--failure);
+  mask-image: var(--md-admonition-icon--admonish-failure);
+  -webkit-mask-image: var(--md-admonition-icon--admonish-failure);
   mask-repeat: no-repeat;
   -webkit-mask-repeat: no-repeat;
   mask-size: contain;
   -webkit-mask-repeat: no-repeat;
 }
 
-:is(.admonition):is(.danger, .error) {
+:is(.admonition):is(.admonish-danger, .admonish-error) {
   border-color: #ff1744;
 }
 
-:is(.danger, .error) > :is(.admonition-title, summary.admonition-title) {
+:is(.admonish-danger, .admonish-error) > :is(.admonition-title, summary.admonition-title) {
   background-color: rgba(255, 23, 68, 0.1);
 }
-:is(.danger, .error) > :is(.admonition-title, summary.admonition-title)::before {
+:is(.admonish-danger, .admonish-error) > :is(.admonition-title, summary.admonition-title)::before {
   background-color: #ff1744;
-  mask-image: var(--md-admonition-icon--danger);
-  -webkit-mask-image: var(--md-admonition-icon--danger);
+  mask-image: var(--md-admonition-icon--admonish-danger);
+  -webkit-mask-image: var(--md-admonition-icon--admonish-danger);
   mask-repeat: no-repeat;
   -webkit-mask-repeat: no-repeat;
   mask-size: contain;
   -webkit-mask-repeat: no-repeat;
 }
 
-:is(.admonition):is(.bug) {
+:is(.admonition):is(.admonish-bug) {
   border-color: #f50057;
 }
 
-:is(.bug) > :is(.admonition-title, summary.admonition-title) {
+:is(.admonish-bug) > :is(.admonition-title, summary.admonition-title) {
   background-color: rgba(245, 0, 87, 0.1);
 }
-:is(.bug) > :is(.admonition-title, summary.admonition-title)::before {
+:is(.admonish-bug) > :is(.admonition-title, summary.admonition-title)::before {
   background-color: #f50057;
-  mask-image: var(--md-admonition-icon--bug);
-  -webkit-mask-image: var(--md-admonition-icon--bug);
+  mask-image: var(--md-admonition-icon--admonish-bug);
+  -webkit-mask-image: var(--md-admonition-icon--admonish-bug);
   mask-repeat: no-repeat;
   -webkit-mask-repeat: no-repeat;
   mask-size: contain;
   -webkit-mask-repeat: no-repeat;
 }
 
-:is(.admonition):is(.example) {
+:is(.admonition):is(.admonish-example) {
   border-color: #7c4dff;
 }
 
-:is(.example) > :is(.admonition-title, summary.admonition-title) {
+:is(.admonish-example) > :is(.admonition-title, summary.admonition-title) {
   background-color: rgba(124, 77, 255, 0.1);
 }
-:is(.example) > :is(.admonition-title, summary.admonition-title)::before {
+:is(.admonish-example) > :is(.admonition-title, summary.admonition-title)::before {
   background-color: #7c4dff;
-  mask-image: var(--md-admonition-icon--example);
-  -webkit-mask-image: var(--md-admonition-icon--example);
+  mask-image: var(--md-admonition-icon--admonish-example);
+  -webkit-mask-image: var(--md-admonition-icon--admonish-example);
   mask-repeat: no-repeat;
   -webkit-mask-repeat: no-repeat;
   mask-size: contain;
   -webkit-mask-repeat: no-repeat;
 }
 
-:is(.admonition):is(.quote, .cite) {
+:is(.admonition):is(.admonish-quote, .admonish-cite) {
   border-color: #9e9e9e;
 }
 
-:is(.quote, .cite) > :is(.admonition-title, summary.admonition-title) {
+:is(.admonish-quote, .admonish-cite) > :is(.admonition-title, summary.admonition-title) {
   background-color: rgba(158, 158, 158, 0.1);
 }
-:is(.quote, .cite) > :is(.admonition-title, summary.admonition-title)::before {
+:is(.admonish-quote, .admonish-cite) > :is(.admonition-title, summary.admonition-title)::before {
   background-color: #9e9e9e;
-  mask-image: var(--md-admonition-icon--quote);
-  -webkit-mask-image: var(--md-admonition-icon--quote);
+  mask-image: var(--md-admonition-icon--admonish-quote);
+  -webkit-mask-image: var(--md-admonition-icon--admonish-quote);
   mask-repeat: no-repeat;
   -webkit-mask-repeat: no-repeat;
   mask-size: contain;
@@ -340,7 +331,8 @@ details[open].admonition > summary.admonition-title::after {
   background-color: var(--sidebar-bg);
 }
 
-.ayu :is(.admonition), .coal :is(.admonition) {
+.ayu :is(.admonition),
+.coal :is(.admonition) {
   background-color: var(--theme-hover);
 }
 

docs/book/src/SUMMARY.md

@@ -45,8 +45,8 @@
   - [Responses and Redirects](./server/27_response.md)
 - [Progressive Enhancement and Graceful Degradation](./progressive_enhancement/README.md)
   - [`<ActionForm/>`s](./progressive_enhancement/action_form.md)
-- [Deployment](./deployment.md)
+- [Deployment](./deployment/README.md)
+  - [Optimizing WASM Binary Size](./deployment/binary_size.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/appendix_dx.md

@@ -13,8 +13,8 @@ VSCode `settings.json`:
 ```json
 "rust-analyzer.procMacro.ignored": {
 	"leptos_macro": [
-		"server",
-		"component"
+		"component",
+		"server"
 	],
 }
 ```
@@ -30,8 +30,8 @@ require('lspconfig').rust_analyzer.setup {
       procMacro = {
         ignored = {
             leptos_macro = {
-                "server",
                 "component",
+                "server",
             },
         },
       },
@@ -45,7 +45,9 @@ Helix, in `.helix/languages.toml`:
 ```toml
 [[language]]
 name = "rust"
-config = { procMacro = {ignored = {leptos_macro = ["component"]}}}
+
+[language-server.rust-analyzer]
+config = { procMacro = { ignored = { leptos_macro = ["component", "server"] } } }
 ```
 
 ```admonish info

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

@@ -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-resources-0-5-9jq86q?file=%2Fsrc%2Fmain.rs%3A1%2C2)
+[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/10-resources-0-5-x6h5j6?file=%2Fsrc%2Fmain.rs%3A2%2C3)
 
-<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>
+<iframe src="https://codesandbox.io/p/sandbox/10-resources-0-5-9jq86q?file=%2Fsrc%2Fmain.rs%3A2%2C3" width="100%" height="1000px" style="max-height: 100vh"></iframe>
 
 <details>
 <summary>CodeSandbox Source</summary>

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

@@ -1,6 +1,6 @@
 # `<Transition/>`
 
-You’ll notice in the `<Suspense/>` example that if you keep reloading the data, it keeps flickering back to `"Loading..."`. Sometimes this is fine. For other times, there’s [`<Transition/>`](https://docs.rs/leptos/latest/leptos/fn.Suspense.html).
+You’ll notice in the `<Suspense/>` example that if you keep reloading the data, it keeps flickering back to `"Loading..."`. Sometimes this is fine. For other times, there’s [`<Transition/>`](https://docs.rs/leptos/latest/leptos/fn.Transition.html).
 
 `<Transition/>` behaves exactly the same as `<Suspense/>`, but instead of falling back every time, it only shows the fallback the first time. On all subsequent loads, it continues showing the old data until the new data are ready. This can be really handy to prevent the flickering effect, and to allow users to continue interacting with your application.
 

docs/book/src/deployment/README.md

@@ -6,6 +6,7 @@ There are as many ways to deploy a web application as there are developers, let
 
 1. Remember: Always deploy Rust apps built in `--release` mode, not debug mode. This has a huge effect on both performance and binary size.
 2. Test locally in release mode as well. The framework applies certain optimizations in release mode that it does not apply in debug mode, so it’s possible for bugs to surface at this point. (If your app behaves differently or you do encounter a bug, it’s likely a framework-level bug and you should open a GitHub issue with a reproduction.)
+3. See the chapter on "Optimizing WASM Binary Size" for additional tips and tricks to further improve the time-to-interactive metric for your WASM app on first load.
 
 > We asked users to submit their deployment setups to help with this chapter. I’ll quote from them below, but you can read the full thread [here](https://github.com/leptos-rs/leptos/issues/1152).
 
@@ -63,7 +64,6 @@ WORKDIR /app
 
 # Set any required env variables and
 ENV RUST_LOG="info"
-ENV APP_ENVIRONMENT="production"
 ENV LEPTOS_SITE_ADDR="0.0.0.0:8080"
 ENV LEPTOS_SITE_ROOT="site"
 EXPOSE 8080

docs/book/src/deployment/binary_size.md

@@ -1,4 +1,4 @@
-# Appendix: Optimizing WASM Binary Size
+# Optimizing WASM Binary Size
 
 One of the primary downsides of deploying a Rust/WebAssembly frontend app is that splitting a WASM file into smaller chunks to be dynamically loaded is significantly more difficult than splitting a JavaScript bundle. There have been experiments like [`wasm-split`](https://emscripten.org/docs/optimizing/Module-Splitting.html) in the Emscripten ecosystem but at present there’s no way to split and dynamically load a Rust/`wasm-bindgen` binary. This means that the whole WASM binary needs to be loaded before your app becomes interactive. Because the WASM format is designed for streaming compilation, WASM files are much faster to compile per kilobyte than JavaScript files. (For a deeper look, you can [read this great article from the Mozilla team](https://hacks.mozilla.org/2018/01/making-webassembly-even-faster-firefoxs-new-streaming-and-tiering-compiler/) on streaming WASM compilation.)
 
@@ -59,13 +59,13 @@ And you'll need to add `panic = "abort"` to `[profile.release]` in `Cargo.toml`.
 
 ## Things to Avoid
 
-There are certain crates that tend to inflate binary sizes. For example, the `regex` crate with its default features adds about 500kb to a WASM binary (largely because it has to pull in Unicode table data!) In a size-conscious setting, you might consider avoiding regexes in general, or even dropping down and calling browser APIs to use the built-in regex engine instead. (This is what `leptos_router` does on the few occasions it needs a regular expression.)
+There are certain crates that tend to inflate binary sizes. For example, the `regex` crate with its default features adds about 500kb to a WASM binary (largely because it has to pull in Unicode table data!). In a size-conscious setting, you might consider avoiding regexes in general, or even dropping down and calling browser APIs to use the built-in regex engine instead. (This is what `leptos_router` does on the few occasions it needs a regular expression.)
 
 In general, Rust’s commitment to runtime performance is sometimes at odds with a commitment to a small binary. For example, Rust monomorphizes generic functions, meaning it creates a distinct copy of the function for each generic type it’s called with. This is significantly faster than dynamic dispatch, but increases binary size. Leptos tries to balance runtime performance with binary size considerations pretty carefully; but you might find that writing code that uses many generics tends to increase binary size. For example, if you have a generic component with a lot of code in its body and call it with four different types, remember that the compiler could include four copies of that same code. Refactoring to use a concrete inner function or helper can often maintain performance and ergonomics while reducing binary size.
 
 ## A Final Thought
 
-Remember that in a server-rendered app, JS bundle size/WASM binary size affects only _one_ thing: time to interactivity on the first load. This is very important to a good user experience—nobody wants to click a button three times and have it do nothing because the interactive code is still loading—but it is not the only important measure.
+Remember that in a server-rendered app, JS bundle size/WASM binary size affects only _one_ thing: time to interactivity on the first load. This is very important to a good user experience: nobody wants to click a button three times and have it do nothing because the interactive code is still loading — but it's not the only important measure.
 
 It’s especially worth remembering that streaming in a single WASM binary means all subsequent navigations are nearly instantaneous, depending only on any additional data loading. Precisely because your WASM binary is _not_ bundle split, navigating to a new route does not require loading additional JS/WASM, as it does in nearly every JavaScript framework. Is this copium? Maybe. Or maybe it’s just an honest trade-off between the two approaches!
 

docs/book/src/metadata.md

@@ -28,7 +28,7 @@ There’s a very simple way to determine whether you should use a capital-S `<Sc
 
 ## `<Body/>` and `<Html/>`
 
-There are even a couple elements designed to make semantic HTML and styling easier. [`<Html/>`](https://docs.rs/leptos_meta/latest/leptos_meta/fn.Html.html) lets you set the `lang` and `dir` on your `<html>` tag from your application code. `<Html/>` and [`<Body/>`](https://docs.rs/leptos_meta/latest/leptos_meta/fn.Html.html) both have `class` props that let you set their respective `class` attributes, which is sometimes needed by CSS frameworks for styling.
+There are even a couple elements designed to make semantic HTML and styling easier. [`<Html/>`](https://docs.rs/leptos_meta/latest/leptos_meta/fn.Html.html) lets you set the `lang` and `dir` on your `<html>` tag from your application code. `<Html/>` and [`<Body/>`](https://docs.rs/leptos_meta/latest/leptos_meta/fn.Body.html) both have `class` props that let you set their respective `class` attributes, which is sometimes needed by CSS frameworks for styling.
 
 `<Body/>` and `<Html/>` both also have `attributes` props which can be used to set any number of additional attributes on them via the `attr:` syntax:
 

docs/book/src/progressive_enhancement/action_form.md

@@ -56,3 +56,45 @@ let on_submit = move |ev| {
 	}
 }
 ```
+
+## Complex Inputs
+
+Server function arguments that are structs with nested serializable fields should make use of indexing notation of `serde_qs`.
+
+```rust
+use leptos::*;
+use leptos_router::*;
+
+#[derive(serde::Serialize, serde::Deserialize, Debug, Clone)]
+struct HeftyData {
+    first_name: String,
+    last_name: String,
+}
+
+#[component]
+fn ComplexInput() -> impl IntoView {
+    let submit = Action::<VeryImportantFn, _>::server();
+
+    view! {
+      <ActionForm action=submit>
+        <input type="text" name="hefty_arg[first_name]" value="leptos"/>
+        <input
+          type="text"
+          name="hefty_arg[last_name]"
+          value="closures-everywhere"
+        />
+        <input type="submit"/>
+      </ActionForm>
+    }
+}
+
+#[server]
+async fn very_important_fn(
+    hefty_arg: HeftyData,
+) -> Result<(), ServerFnError> {
+    assert_eq!(hefty_arg.first_name.as_str(), "leptos");
+    assert_eq!(hefty_arg.last_name.as_str(), "closures-everywhere");
+    Ok(())
+}
+
+```

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

@@ -34,7 +34,7 @@ pub fn FormExample() -> impl IntoView {
 
 	view! {
 		<Form method="GET" action="">
-			<input type="search" name="search" value=search/>
+			<input type="search" name="q" value=search/>
 			<input type="submit"/>
 		</Form>
 		<Transition fallback=move || ()>
@@ -53,7 +53,7 @@ We can actually take it a step further and do something kind of clever:
 ```rust
 view! {
 	<Form method="GET" action="">
-		<input type="search" name="search" value=search
+		<input type="search" name="q" value=search
 			oninput="this.form.requestSubmit()"
 		/>
 	</Form>

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

@@ -158,4 +158,4 @@ In particular, you’ll sometimes see errors about the crate `mio` or missing th
 
 You can use `create_effect` to specify that something should only run on the client, and not in the server. Is there a way to specify that something should run only on the server, and not the client?
 
-In fact, there is. The next chapter will cover the topic of server functions in some detail. (In the meantime, you can check out their docs [here](https://docs.rs/leptos_server/0.2.5/leptos_server/index.html).)
+In fact, there is. The next chapter will cover the topic of server functions in some detail. (In the meantime, you can check out their docs [here](https://docs.rs/leptos_server/latest/leptos_server/index.html).)

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

@@ -113,8 +113,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
+    F: Fn(MouseEvent) + 'static
 {
     view! {
         <button on:click=on_click>

examples/README.md

@@ -40,6 +40,8 @@ Example projects depend on the following tools. Please install them as needed.
 - [Cargo Make](https://sagiegurari.github.io/cargo-make/)
   - Run `cargo install --force cargo-make`
   - Setup a command alias like `alias cm='cargo make'` to reduce typing (**_Optional_**)
+- [Trunk](https://github.com/thedodd/trunk)
+  - Run `cargo install trunk`
 - [Node Version Manager](https://github.com/nvm-sh/nvm/) (**_Optional_**)
 - [Node.js](https://nodejs.org/)
 - [pnpm](https://pnpm.io/) (**_Optional_**)

examples/animated_show/README.md

@@ -8,3 +8,7 @@ CSS.
 ## Getting Started
 
 See the [Examples README](../README.md) for setup and run instructions.
+
+## Quick Start
+
+Run `trunk serve --open` to run this example.

examples/counter/README.md

@@ -5,3 +5,7 @@ This example creates a simple counter in a client side rendered app with Rust an
 ## Getting Started
 
 See the [Examples README](../README.md) for setup and run instructions.
+
+## Quick Start
+
+Run `trunk serve --open` to run this example.

examples/counter_isomorphic/README.md

@@ -5,3 +5,7 @@ This example demonstrates how to use a function isomorphically, to run a server
 ## Getting Started
 
 See the [Examples README](../README.md) for setup and run instructions.
+
+## Quick Start
+
+Run `cargo leptos watch` to run this example.

examples/counter_url_query/README.md

@@ -5,3 +5,7 @@ This example creates a simple counter whose state is persisted and synced in the
 ## Getting Started
 
 See the [Examples README](../README.md) for setup and run instructions.
+
+## Quick Start
+
+Run `trunk serve --open` to run this example.

examples/counter_without_macros/README.md

@@ -5,3 +5,7 @@ This example is the same like the `counter` but it's written without using macro
 ## Getting Started
 
 See the [Examples README](../README.md) for setup and run instructions.
+
+## Quick Start
+
+Run `trunk serve --open` to run this example.

examples/counters/README.md

@@ -5,3 +5,7 @@ This example showcases a basic leptos app with many counters. It is a good examp
 ## Getting Started
 
 See the [Examples README](../README.md) for setup and run instructions.
+
+## Quick Start
+
+Run `trunk serve --open` to run this example.

examples/counters_stable/README.md

@@ -5,3 +5,7 @@ This example showcases a basic Leptos app with many counters. It is a good examp
 ## Getting Started
 
 See the [Examples README](../README.md) for setup and run instructions.
+
+## Quick Start
+
+Run `trunk serve --open` to run this example.

examples/directives/README.md

@@ -1,7 +1,11 @@
 # Leptos Directives Example
 
-This example showcases a basic leptos app that shows how to write and use directives. 
+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.
+
+## Quick Start
+
+Run `trunk serve --open` to run this example.

examples/error_boundary/README.md

@@ -9,3 +9,7 @@ See the [Examples README](../README.md) for setup and run instructions.
 ## Testing
 
 This project is configured to run start and stop of processes for integration tests wihtout the use of Cargo Leptos or Node.
+
+## Quick Start
+
+Run `trunk serve --open` to run this example.

examples/fetch/README.md

@@ -4,4 +4,8 @@ This example shows how to fetch data from the client in WebAssembly.
 
 ## Getting Started
 
-See the [Examples README](../README.md) for setup and run instructions.
+See the [Examples README](../README.md) for setup and run instructions.
+
+## Quick Start
+
+Run `trunk serve --open` to run this example.

examples/fetch/src/lib.rs

@@ -89,15 +89,15 @@ pub fn fetch_example() -> impl IntoView {
                     }
                 />
             </label>
-            <ErrorBoundary fallback>
-                <Transition fallback=move || {
-                    view! { <div>"Loading (Suspense Fallback)..."</div> }
-                }>
+            <Transition fallback=move || {
+                view! { <div>"Loading (Suspense Fallback)..."</div> }
+            }>
+                <ErrorBoundary fallback>
                 <div>
                     {cats_view}
                 </div>
-                </Transition>
-            </ErrorBoundary>
+                </ErrorBoundary>
+            </Transition>
         </div>
     }
 }

examples/hackernews/README.md

@@ -5,3 +5,7 @@ This example creates a basic clone of the Hacker News site. It showcases Leptos'
 ## Getting Started
 
 See the [Examples README](../README.md) for setup and run instructions.
+
+## Quick Start
+
+Run `trunk serve --open` or `cargo leptos watch` to run this example.

examples/hackernews_axum/README.md

@@ -5,3 +5,7 @@ This example creates a basic clone of the Hacker News site. It showcases Leptos'
 ## Getting Started
 
 See the [Examples README](../README.md) for setup and run instructions.
+
+## Quick Start
+
+Run `trunk serve --open` or `cargo leptos watch` to run this example.

examples/hackernews_islands_axum/README.md

@@ -5,3 +5,7 @@ This example creates a basic clone of the Hacker News site. It showcases Leptos'
 ## Getting Started
 
 See the [Examples README](../README.md) for setup and run instructions.
+
+## Quick Start
+
+Run `cargo leptos watch` to run this example.

examples/hackernews_js_fetch/README.md

@@ -1,14 +1,12 @@
 # Leptos Hacker News Example with Axum
 
-This example uses the basic Hacker News example as its basis, but shows how to run the server side as WASM running in a JS environment. In this example, Deno is used as the runtime. 
-
-## Client Side Rendering
-To run it as a Client Side App, you can issue  `trunk serve --open` in the root. This will build the entire
-app into one CSR bundle. Make sure you have trunk installed with `cargo install trunk`.
+This example uses the basic Hacker News example as its basis, but shows how to run the server side as WASM running in a JS environment. In this example, Deno is used as the runtime.
 
 ## Server Side Rendering with Deno
+
 To run the Deno version, run
+
 ```bash
 deno task build
-deno task start 
+deno task start
 ```

examples/hackernews_js_fetch/index.html

@@ -1,8 +0,0 @@
-<!DOCTYPE html>
-<html>
-	<head>
-		<link data-trunk rel="rust" data-wasm-opt="z"/>
-		<link data-trunk rel="css" href="/style.css"/>
-	</head>
-	<body></body>
-</html>

examples/js-framework-benchmark/README.md

@@ -6,3 +6,7 @@ This example creates a large table with randomized entries, it also shows usage
 ## Getting Started
 
 See the [Examples README](../README.md) for setup and run instructions.
+
+## Quick Start
+
+Run `trunk serve --open` to run this example.

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

@@ -1,4 +1,4 @@
 pub mod credentials;
 pub mod navbar;
 
-pub use self::{credentials::*, navbar::*};
+pub use self::navbar::*;

examples/parent_child/README.md

@@ -12,3 +12,7 @@ This example highlights four different ways that child components can communicat
 ## Getting Started
 
 See the [Examples README](../README.md) for setup and run instructions.
+
+## Quick Start
+
+Run `trunk serve --open` to run this example.

examples/portal/Cargo.toml

@@ -12,4 +12,5 @@ console_error_panic_hook = "0.1.7"
 [dev-dependencies]
 wasm-bindgen-test = "0.3.0"
 wasm-bindgen = "0.2"
-web-sys = "0.3"
+web-sys = "0.3"
+gloo-timers = { version = "0.3", features = ["futures"] }

examples/portal/README.md

@@ -5,3 +5,7 @@ This example showcases a basic leptos app with a portal.
 ## Getting Started
 
 See the [Examples README](../README.md) for setup and run instructions.
+
+## Quick Start
+
+Run `trunk serve --open` to run this example.

examples/portal/tests/web.rs

@@ -6,8 +6,12 @@ use leptos::*;
 use portal::App;
 use web_sys::HtmlButtonElement;
 
+async fn next_tick() {
+    gloo_timers::future::TimeoutFuture::new(25).await;
+}
+
 #[wasm_bindgen_test]
-fn portal() {
+async fn portal() {
     let document = leptos::document();
     let body = document.body().unwrap();
 
@@ -24,7 +28,7 @@ fn portal() {
 
     show_button.click();
 
-    // next_tick().await;
+    next_tick().await;
 
     // check HTML
     assert_eq!(

examples/router/README.md

@@ -5,3 +5,7 @@ This example demonstrates how Leptos’s router works for client side routing.
 ## Getting Started
 
 See the [Examples README](../README.md) for setup and run instructions.
+
+## Quick Start
+
+Run `trunk serve --open` to run this example.

examples/session_auth_axum/Cargo.toml

@@ -25,16 +25,16 @@ tower = { version = "0.4.13", optional = true }
 tower-http = { version = "0.4", features = ["fs"], optional = true }
 tokio = { version = "1.22.0", features = ["full"], optional = true }
 http = { version = "0.2.8" }
-sqlx = { version = "0.6.2", features = [
+sqlx = { version = "0.7.2", features = [
 	"runtime-tokio-rustls",
 	"sqlite",
 ], optional = true }
 thiserror = "1.0.38"
 wasm-bindgen = "0.2"
-axum_session_auth = { version = "0.2.1", features = [
+axum_session_auth = { version = "0.9.0", features = [
 	"sqlite-rustls",
 ], optional = true }
-axum_session = { version = "0.2.3", features = [
+axum_session = { version = "0.9.0", features = [
 	"sqlite-rustls",
 ], optional = true }
 bcrypt = { version = "0.14", optional = true }

examples/session_auth_axum/README.md

@@ -5,3 +5,7 @@ This example creates a basic todo app with an Axum backend that uses Leptos' ser
 ## Getting Started
 
 See the [Examples README](../README.md) for setup and run instructions.
+
+## Quick Start
+
+Run `cargo leptos watch` to run this example.

examples/session_auth_axum/src/main.rs

@@ -56,8 +56,7 @@ if #[cfg(feature = "ssr")] {
         // Auth section
         let session_config = SessionConfig::default().with_table_name("axum_sessions");
         let auth_config = AuthConfig::<i64>::default();
-        let session_store = SessionStore::<SessionSqlitePool>::new(Some(pool.clone().into()), session_config);
-        session_store.initiate().await.unwrap();
+        let session_store = SessionStore::<SessionSqlitePool>::new(Some(pool.clone().into()), session_config).await.unwrap();
 
         sqlx::migrate!()
             .run(&pool)

examples/slots/README.md

@@ -5,3 +5,7 @@ This example shows how to use Slots in Leptos.
 ## Getting Started
 
 See the [Examples README](../README.md) for setup and run instructions.
+
+## Quick Start
+
+Run `trunk serve --open` to run this example.

examples/ssr_modes/README.md

@@ -9,18 +9,25 @@ See the [Examples README](../README.md) for setup and run instructions.
 ## Server-Side Rendering Modes
 
 1. **Synchronous**: Serve an HTML shell that includes `fallback` for any `Suspense`. Load data on the client, replacing `fallback` once they're loaded.
-     - *Pros*: App shell appears very quickly: great TTFB (time to first byte).
-     - *Cons*: Resources load relatively slowly; you need to wait for JS + Wasm to load before even making a request.
+
+   - _Pros_: App shell appears very quickly: great TTFB (time to first byte).
+   - _Cons_: Resources load relatively slowly; you need to wait for JS + Wasm to load before even making a request.
 
 2. **Out-of-order streaming**: Serve an HTML shell that includes `fallback` for any `Suspense`. Load data on the **server**, streaming it down to the client as it resolves, and streaming down HTML for `Suspense` nodes.
-     - *Pros*: Combines the best of **synchronous** and **`async`**, with a very fast shell and resources that begin loading on the server.
-     - *Cons*: Requires JS for suspended fragments to appear in correct order. Weaker meta tag support when it depends on data that's under suspense (has already streamed down `<head>`)
+
+   - _Pros_: Combines the best of **synchronous** and **`async`**, with a very fast shell and resources that begin loading on the server.
+   - _Cons_: Requires JS for suspended fragments to appear in correct order. Weaker meta tag support when it depends on data that's under suspense (has already streamed down `<head>`)
 
 3. **In-order streaming**: Walk through the tree, returning HTML synchronously as in synchronous rendering and out-of-order streaming until you hit a `Suspense`. At that point, wait for all its data to load, then render it, then the rest of the tree.
-     - *Pros*: Does not require JS for HTML to appear in correct order.
-     - *Cons*: Loads the shell more slowly than out-of-order streaming or synchronous rendering because it needs to pause at every `Suspense`. Cannot begin hydration until the entire page has loaded, so earlier pieces
-       of the page will not be interactive until the suspended chunks have loaded.
+
+   - _Pros_: Does not require JS for HTML to appear in correct order.
+   - _Cons_: Loads the shell more slowly than out-of-order streaming or synchronous rendering because it needs to pause at every `Suspense`. Cannot begin hydration until the entire page has loaded, so earlier pieces
+     of the page will not be interactive until the suspended chunks have loaded.
 
 4. **`async`**: Load all resources on the server. Wait until all data are loaded, and render HTML in one sweep.
-     - *Pros*: Better handling for meta tags (because you know async data even before you render the `<head>`). Faster complete load than **synchronous** because async resources begin loading on server.
-     - *Cons*: Slower load time/TTFB: you need to wait for all async resources to load before displaying anything on the client.
+   - _Pros_: Better handling for meta tags (because you know async data even before you render the `<head>`). Faster complete load than **synchronous** because async resources begin loading on server.
+   - _Cons_: Slower load time/TTFB: you need to wait for all async resources to load before displaying anything on the client.
+
+## Quick Start
+
+Run `cargo leptos watch` to run this example.

examples/ssr_modes_axum/README.md

@@ -9,19 +9,25 @@ See the [Examples README](../README.md) for setup and run instructions.
 ## Server-Side Rendering Modes
 
 1. **Synchronous**: Serve an HTML shell that includes `fallback` for any `Suspense`. Load data on the client, replacing `fallback` once they're loaded.
-     - *Pros*: App shell appears very quickly: great TTFB (time to first byte).
-     - *Cons*: Resources load relatively slowly; you need to wait for JS + Wasm to load before even making a request.
+
+   - _Pros_: App shell appears very quickly: great TTFB (time to first byte).
+   - _Cons_: Resources load relatively slowly; you need to wait for JS + Wasm to load before even making a request.
 
 2. **Out-of-order streaming**: Serve an HTML shell that includes `fallback` for any `Suspense`. Load data on the **server**, streaming it down to the client as it resolves, and streaming down HTML for `Suspense` nodes.
-     - *Pros*: Combines the best of **synchronous** and **`async`**, with a very fast shell and resources that begin loading on the server.
-     - *Cons*: Requires JS for suspended fragments to appear in correct order. Weaker meta tag support when it depends on data that's under suspense (has already streamed down `<head>`)
+
+   - _Pros_: Combines the best of **synchronous** and **`async`**, with a very fast shell and resources that begin loading on the server.
+   - _Cons_: Requires JS for suspended fragments to appear in correct order. Weaker meta tag support when it depends on data that's under suspense (has already streamed down `<head>`)
 
 3. **In-order streaming**: Walk through the tree, returning HTML synchronously as in synchronous rendering and out-of-order streaming until you hit a `Suspense`. At that point, wait for all its data to load, then render it, then the rest of the tree.
-     - *Pros*: Does not require JS for HTML to appear in correct order.
-     - *Cons*: Loads the shell more slowly than out-of-order streaming or synchronous rendering because it needs to pause at every `Suspense`. Cannot begin hydration until the entire page has loaded, so earlier pieces
-       of the page will not be interactive until the suspended chunks have loaded.
+
+   - _Pros_: Does not require JS for HTML to appear in correct order.
+   - _Cons_: Loads the shell more slowly than out-of-order streaming or synchronous rendering because it needs to pause at every `Suspense`. Cannot begin hydration until the entire page has loaded, so earlier pieces
+     of the page will not be interactive until the suspended chunks have loaded.
 
 4. **`async`**: Load all resources on the server. Wait until all data are loaded, and render HTML in one sweep.
-     - *Pros*: Better handling for meta tags (because you know async data even before you render the `<head>`). Faster complete load than **synchronous** because async resources begin loading on server.
-     - *Cons*: Slower load time/TTFB: you need to wait for all async resources to load before displaying anything on the client.
+   - _Pros_: Better handling for meta tags (because you know async data even before you render the `<head>`). Faster complete load than **synchronous** because async resources begin loading on server.
+   - _Cons_: Slower load time/TTFB: you need to wait for all async resources to load before displaying anything on the client.
 
+## Quick Start
+
+Run `cargo leptos watch` to run this example.

examples/suspense_tests/README.md

@@ -9,3 +9,7 @@ See the [Examples README](../README.md) for setup and run instructions.
 ## Test Strategy
 
 See the [E2E README](./e2e/README.md) to learn about the web testing strategy for this project.
+
+## Quick Start
+
+Run `cargo leptos watch` to run this example.

examples/tailwind_axum/README.md

@@ -5,3 +5,7 @@ This is a template demonstrating how to integrate [TailwindCSS](https://tailwind
 ## Getting Started
 
 See the [Examples README](../README.md) for setup and run instructions.
+
+## Quick Start
+
+Run `cargo leptos watch` to run this example.

examples/tailwind_csr/README.md

@@ -51,3 +51,7 @@ Allow vscode Ports forward: 3000, 3001.
 ### Attribution
 
 Many thanks to GreatGreg for putting together this guide. You can find the original, with added details, [here](https://github.com/leptos-rs/leptos/discussions/125).
+
+## Quick Start
+
+Run `trunk serve --open` to run this example.

examples/timer/README.md

@@ -5,3 +5,7 @@ This example creates a simple timer based on `setInterval` in a client side rend
 ## Getting Started
 
 See the [Examples README](../README.md) for setup and run instructions.
+
+## Quick Start
+
+Run `trunk serve --open` to run this example.

examples/todo_app_sqlite/README.md

@@ -13,3 +13,7 @@ See the [E2E README](./e2e/README.md) for more information about the testing str
 ## Rendering
 
 See the [SSR Notes](../SSR_NOTES.md) for more information about Server Side Rendering.
+
+## Quick Start
+
+Run `cargo leptos watch` to run this example.

examples/todo_app_sqlite_axum/README.md

@@ -13,3 +13,7 @@ See the [E2E README](./e2e/README.md) for more information about the testing str
 ## Rendering
 
 See the [SSR Notes](../SSR_NOTES.md) for more information about Server Side Rendering.
+
+## Quick Start
+
+Run `cargo leptos watch` to run this example.

examples/todo_app_sqlite_csr/Cargo.toml

@@ -0,0 +1,95 @@
+[package]
+name = "todo_app_sqlite_csr"
+version = "0.1.0"
+edition = "2021"
+
+[lib]
+crate-type = ["cdylib", "rlib"]
+
+[dependencies]
+console_log = "1.0.0"
+console_error_panic_hook = "0.1.7"
+futures = "0.3.25"
+leptos = { path = "../../leptos", features = ["nightly"] }
+leptos_axum = { path = "../../integrations/axum", optional = true }
+leptos_meta = { path = "../../meta", features = ["nightly"] }
+leptos_router = { path = "../../router", features = ["nightly"] }
+leptos_integration_utils = { path = "../../integrations/utils", optional = true }
+log = "0.4.17"
+simple_logger = "4.0.0"
+serde = { version = "1", features = ["derive"] }
+axum = { version = "0.6.1", optional = true }
+tower = { version = "0.4.13", optional = true }
+tower-http = { version = "0.4", features = ["fs"], optional = true }
+tokio = { version = "1.22.0", features = ["full"], optional = true }
+http = { version = "0.2.8" }
+sqlx = { version = "0.6.2", features = [
+	"runtime-tokio-rustls",
+	"sqlite",
+], optional = true }
+thiserror = "1.0.38"
+wasm-bindgen = "0.2"
+
+[features]
+csr = ["leptos/csr", "leptos_meta/csr", "leptos_router/csr"]
+ssr = [
+	"dep:axum",
+	"dep:tower",
+	"dep:tower-http",
+	"dep:tokio",
+	"dep:sqlx",
+	"leptos/ssr",
+	"leptos_meta/ssr",
+	"leptos_router/ssr",
+	"dep:leptos_axum",
+	"dep:leptos_integration_utils",
+]
+
+[package.metadata.cargo-all-features]
+denylist = ["axum", "tower", "tower-http", "tokio", "sqlx", "leptos_axum"]
+skip_feature_sets = [["csr", "ssr"], ["csr", "hydrate"], ["ssr", "hydrate"]]
+
+[package.metadata.leptos]
+# The name used by wasm-bindgen/cargo-leptos for the JS/WASM bundle. Defaults to the crate name
+output-name = "todo_app_sqlite_csr"
+# The site root folder is where cargo-leptos generate all output. WARNING: all content of this folder will be erased on a rebuild. Use it in your server setup.
+site-root = "target/site"
+# The site-root relative folder where all compiled output (JS, WASM and CSS) is written
+# Defaults to pkg
+site-pkg-dir = "pkg"
+# [Optional] The source CSS file. If it ends with .sass or .scss then it will be compiled by dart-sass into CSS. The CSS is optimized by Lightning CSS before being written to <site-root>/<site-pkg>/app.css
+style-file = "./style.css"
+# [Optional] Files in the asset-dir will be copied to the site-root directory
+assets-dir = "public"
+# The IP and port (ex: 127.0.0.1:3000) where the server serves the content. Use it in your server setup.
+site-addr = "127.0.0.1:3000"
+# The port to use for automatic reload monitoring
+reload-port = 3001
+# [Optional] Command to use when running end2end tests. It will run in the end2end dir.
+end2end-cmd = "cargo make test-ui"
+end2end-dir = "e2e"
+#  The browserlist query used for optimizing the CSS.
+browserquery = "defaults"
+# Set by cargo-leptos watch when building with tha tool. Controls whether autoreload JS will be included in the head
+watch = false
+# The environment Leptos will run in, usually either "DEV" or "PROD"
+env = "DEV"
+# The features to use when compiling the bin target
+#
+# Optional. Can be over-ridden with the command line parameter --bin-features
+bin-features = ["ssr"]
+
+# If the --no-default-features flag should be used when compiling the bin target
+#
+# Optional. Defaults to false.
+bin-default-features = false
+
+# The features to use when compiling the lib target
+#
+# Optional. Can be over-ridden with the command line parameter --lib-features
+lib-features = ["csr"]
+
+# If the --no-default-features flag should be used when compiling the lib target
+#
+# Optional. Defaults to false.
+lib-default-features = false

examples/todo_app_sqlite_csr/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Greg Johnston
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

examples/todo_app_sqlite_csr/Makefile.toml

@@ -0,0 +1,12 @@
+extend = [
+    { path = "../cargo-make/main.toml" },
+    { path = "../cargo-make/cargo-leptos-webdriver-test.toml" },
+]
+
+[env]
+CLIENT_PROCESS_NAME = "todo_app_sqlite_csr"
+
+[tasks.test-ui]
+cwd = "./e2e"
+command = "cargo"
+args = ["make", "test-ui", "${@}"]

examples/todo_app_sqlite_csr/README.md

@@ -0,0 +1,19 @@
+# Leptos Todo App Sqlite with CSR
+
+This example shows how to combine client-side rendering with server functions, i.e., using server functions as a convenient way to create an ad hoc API, but without using server-side rendering and hydration.
+
+## Getting Started
+
+See the [Examples README](../README.md) for setup and run instructions.
+
+## E2E Testing
+
+See the [E2E README](./e2e/README.md) for more information about the testing strategy.
+
+## Rendering
+
+See the [SSR Notes](../SSR_NOTES.md) for more information about Server Side Rendering.
+
+## Quick Start
+
+Run `cargo leptos watch` to run this example.

examples/todo_app_sqlite_csr/e2e/Cargo.toml

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

examples/todo_app_sqlite_csr/e2e/Makefile.toml

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

examples/todo_app_sqlite_csr/e2e/README.md

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

examples/todo_app_sqlite_csr/e2e/features/add_todo.feature

@@ -0,0 +1,16 @@
+@add_todo
+Feature: Add Todo
+
+    Background:
+        Given I see the app
+
+    @add_todo-see
+    Scenario: Should see the todo
+        Given I set the todo as Buy Bread
+        When I click the Add button
+        Then I see the todo named Buy Bread
+
+    @add_todo-style
+    Scenario: Should see the pending todo
+        When I add a todo as Buy Oranges
+        Then I see the pending todo

examples/todo_app_sqlite_csr/e2e/features/delete_todo.feature

@@ -0,0 +1,18 @@
+@delete_todo
+Feature: Delete Todo
+
+    Background:
+        Given I see the app
+
+    @serial
+    @delete_todo-remove
+    Scenario: Should not see the deleted todo
+        Given I add a todo as Buy Yogurt
+        When I delete the todo named Buy Yogurt
+        Then I do not see the todo named Buy Yogurt
+
+    @serial
+    @delete_todo-message
+    Scenario: Should see the empty list message
+        When I empty the todo list
+        Then I see the empty list message is No tasks were found.

examples/todo_app_sqlite_csr/e2e/features/open_app.feature

@@ -0,0 +1,12 @@
+@open_app
+Feature: Open App
+
+  @open_app-title
+  Scenario: Should see the home page title
+    When I open the app
+    Then I see the page title is My Tasks
+
+  @open_app-label
+  Scenario: Should see the input label
+    When I open the app
+    Then I see the label of the input is Add a Todo

examples/todo_app_sqlite_csr/e2e/tests/app_suite.rs

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

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

@@ -0,0 +1,60 @@
+use super::{find, world::HOST};
+use anyhow::Result;
+use fantoccini::Client;
+use std::result::Result::Ok;
+use tokio::{self, time};
+
+pub async fn goto_path(client: &Client, path: &str) -> Result<()> {
+    let url = format!("{}{}", HOST, path);
+    client.goto(&url).await?;
+
+    Ok(())
+}
+
+pub async fn add_todo(client: &Client, text: &str) -> Result<()> {
+    fill_todo(client, text).await?;
+    click_add_button(client).await?;
+    Ok(())
+}
+
+pub async fn fill_todo(client: &Client, text: &str) -> Result<()> {
+    let textbox = find::todo_input(client).await;
+    textbox.send_keys(text).await?;
+
+    Ok(())
+}
+
+pub async fn click_add_button(client: &Client) -> Result<()> {
+    let add_button = find::add_button(client).await;
+    add_button.click().await?;
+
+    Ok(())
+}
+
+pub async fn empty_todo_list(client: &Client) -> Result<()> {
+    let todos = find::todos(client).await;
+
+    for _todo in todos {
+        let _ = delete_first_todo(client).await?;
+    }
+
+    Ok(())
+}
+
+pub async fn delete_first_todo(client: &Client) -> Result<()> {
+    if let Some(element) = find::first_delete_button(client).await {
+        element.click().await.expect("Failed to delete todo");
+        time::sleep(time::Duration::from_millis(250)).await;
+    }
+
+    Ok(())
+}
+
+pub async fn delete_todo(client: &Client, text: &str) -> Result<()> {
+    if let Some(element) = find::delete_button(client, text).await {
+        element.click().await?;
+        time::sleep(time::Duration::from_millis(250)).await;
+    }
+
+    Ok(())
+}

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

@@ -0,0 +1,57 @@
+use super::find;
+use anyhow::{Ok, Result};
+use fantoccini::{Client, Locator};
+use pretty_assertions::assert_eq;
+
+pub async fn text_on_element(
+    client: &Client,
+    selector: &str,
+    expected_text: &str,
+) -> Result<()> {
+    let element = client
+        .wait()
+        .for_element(Locator::Css(selector))
+        .await
+        .expect(
+            format!("Element not found by Css selector `{}`", selector)
+                .as_str(),
+        );
+
+    let actual = element.text().await?;
+    assert_eq!(&actual, expected_text);
+
+    Ok(())
+}
+
+pub async fn todo_present(
+    client: &Client,
+    text: &str,
+    expected: bool,
+) -> Result<()> {
+    let todo_present = is_todo_present(client, text).await;
+
+    assert_eq!(todo_present, expected);
+
+    Ok(())
+}
+
+async fn is_todo_present(client: &Client, text: &str) -> bool {
+    let todos = find::todos(client).await;
+
+    for todo in todos {
+        let todo_title = todo.text().await.expect("Todo title not found");
+        if todo_title == text {
+            return true;
+        }
+    }
+
+    false
+}
+
+pub async fn todo_is_pending(client: &Client) -> Result<()> {
+    if let None = find::pending_todo(client).await {
+        assert!(false, "Pending todo not found");
+    }
+
+    Ok(())
+}

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

@@ -0,0 +1,63 @@
+use fantoccini::{elements::Element, Client, Locator};
+
+pub async fn todo_input(client: &Client) -> Element {
+    let textbox = client
+        .wait()
+        .for_element(Locator::Css("input[name='title"))
+        .await
+        .expect("Todo textbox not found");
+
+    textbox
+}
+
+pub async fn add_button(client: &Client) -> Element {
+    let button = client
+        .wait()
+        .for_element(Locator::Css("input[value='Add']"))
+        .await
+        .expect("");
+
+    button
+}
+
+pub async fn first_delete_button(client: &Client) -> Option<Element> {
+    if let Ok(element) = client
+        .wait()
+        .for_element(Locator::Css("li:first-child input[value='X']"))
+        .await
+    {
+        return Some(element);
+    }
+
+    None
+}
+
+pub async fn delete_button(client: &Client, text: &str) -> Option<Element> {
+    let selector = format!("//*[text()='{text}']//input[@value='X']");
+    if let Ok(element) =
+        client.wait().for_element(Locator::XPath(&selector)).await
+    {
+        return Some(element);
+    }
+
+    None
+}
+
+pub async fn pending_todo(client: &Client) -> Option<Element> {
+    if let Ok(element) =
+        client.wait().for_element(Locator::Css(".pending")).await
+    {
+        return Some(element);
+    }
+
+    None
+}
+
+pub async fn todos(client: &Client) -> Vec<Element> {
+    let todos = client
+        .find_all(Locator::Css("li"))
+        .await
+        .expect("Todo List not found");
+
+    todos
+}

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

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

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

@@ -0,0 +1,57 @@
+use crate::fixtures::{action, world::AppWorld};
+use anyhow::{Ok, Result};
+use cucumber::{given, when};
+
+#[given("I see the app")]
+#[when("I open the app")]
+async fn i_open_the_app(world: &mut AppWorld) -> Result<()> {
+    let client = &world.client;
+    action::goto_path(client, "").await?;
+
+    Ok(())
+}
+
+#[given(regex = "^I add a todo as (.*)$")]
+#[when(regex = "^I add a todo as (.*)$")]
+async fn i_add_a_todo_titled(world: &mut AppWorld, text: String) -> Result<()> {
+    let client = &world.client;
+    action::add_todo(client, text.as_str()).await?;
+
+    Ok(())
+}
+
+#[given(regex = "^I set the todo as (.*)$")]
+async fn i_set_the_todo_as(world: &mut AppWorld, text: String) -> Result<()> {
+    let client = &world.client;
+    action::fill_todo(client, &text).await?;
+
+    Ok(())
+}
+
+#[when(regex = "I click the Add button$")]
+async fn i_click_the_button(world: &mut AppWorld) -> Result<()> {
+    let client = &world.client;
+    action::click_add_button(client).await?;
+
+    Ok(())
+}
+
+#[when(regex = "^I delete the todo named (.*)$")]
+async fn i_delete_the_todo_named(
+    world: &mut AppWorld,
+    text: String,
+) -> Result<()> {
+    let client = &world.client;
+    action::delete_todo(client, text.as_str()).await?;
+
+    Ok(())
+}
+
+#[given("the todo list is empty")]
+#[when("I empty the todo list")]
+async fn i_empty_the_todo_list(world: &mut AppWorld) -> Result<()> {
+    let client = &world.client;
+    action::empty_todo_list(client).await?;
+
+    Ok(())
+}

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

@@ -0,0 +1,67 @@
+use crate::fixtures::{check, world::AppWorld};
+use anyhow::{Ok, Result};
+use cucumber::then;
+
+#[then(regex = "^I see the page title is (.*)$")]
+async fn i_see_the_page_title_is(
+    world: &mut AppWorld,
+    text: String,
+) -> Result<()> {
+    let client = &world.client;
+    check::text_on_element(client, "h1", &text).await?;
+
+    Ok(())
+}
+
+#[then(regex = "^I see the label of the input is (.*)$")]
+async fn i_see_the_label_of_the_input_is(
+    world: &mut AppWorld,
+    text: String,
+) -> Result<()> {
+    let client = &world.client;
+    check::text_on_element(client, "label", &text).await?;
+
+    Ok(())
+}
+
+#[then(regex = "^I see the todo named (.*)$")]
+async fn i_see_the_todo_is_present(
+    world: &mut AppWorld,
+    text: String,
+) -> Result<()> {
+    let client = &world.client;
+    check::todo_present(client, text.as_str(), true).await?;
+
+    Ok(())
+}
+
+#[then("I see the pending todo")]
+async fn i_see_the_pending_todo(world: &mut AppWorld) -> Result<()> {
+    let client = &world.client;
+
+    check::todo_is_pending(client).await?;
+
+    Ok(())
+}
+
+#[then(regex = "^I see the empty list message is (.*)$")]
+async fn i_see_the_empty_list_message_is(
+    world: &mut AppWorld,
+    text: String,
+) -> Result<()> {
+    let client = &world.client;
+    check::text_on_element(client, "ul p", &text).await?;
+
+    Ok(())
+}
+
+#[then(regex = "^I do not see the todo named (.*)$")]
+async fn i_do_not_see_the_todo_is_present(
+    world: &mut AppWorld,
+    text: String,
+) -> Result<()> {
+    let client = &world.client;
+    check::todo_present(client, text.as_str(), false).await?;
+
+    Ok(())
+}

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

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

examples/todo_app_sqlite_csr/migrations/20221118172000_create_todo_table.sql

@@ -0,0 +1,7 @@
+
+CREATE TABLE IF NOT EXISTS todos
+(
+  id          INTEGER NOT NULL PRIMARY KEY,
+  title       VARCHAR,
+  completed   BOOLEAN
+);

examples/todo_app_sqlite_csr/src/error_template.rs

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

examples/todo_app_sqlite_csr/src/errors.rs

@@ -0,0 +1,21 @@
+use http::status::StatusCode;
+use thiserror::Error;
+
+#[derive(Debug, Clone, Error)]
+pub enum TodoAppError {
+    #[error("Not Found")]
+    NotFound,
+    #[error("Internal Server Error")]
+    InternalServerError,
+}
+
+impl TodoAppError {
+    pub fn status_code(&self) -> StatusCode {
+        match self {
+            TodoAppError::NotFound => StatusCode::NOT_FOUND,
+            TodoAppError::InternalServerError => {
+                StatusCode::INTERNAL_SERVER_ERROR
+            }
+        }
+    }
+}

examples/todo_app_sqlite_csr/src/fallback.rs

@@ -0,0 +1,45 @@
+use axum::{
+    body::{boxed, Body, BoxBody},
+    extract::State,
+    http::{Request, Response, StatusCode, Uri},
+    response::{Html, IntoResponse, Response as AxumResponse},
+};
+use leptos::LeptosOptions;
+use leptos_integration_utils::html_parts_separated;
+use tower::ServiceExt;
+use tower_http::services::ServeDir;
+
+pub async fn file_or_index_handler(
+    uri: Uri,
+    State(options): State<LeptosOptions>,
+) -> AxumResponse {
+    let root = options.site_root.clone();
+    let res = get_static_file(uri.clone(), &root).await.unwrap();
+
+    if res.status() == StatusCode::OK {
+        res.into_response()
+    } else {
+        let (head, tail) = html_parts_separated(&options, None);
+
+        Html(format!("{head}</head><body>{tail}")).into_response()
+    }
+}
+
+async fn get_static_file(
+    uri: Uri,
+    root: &str,
+) -> Result<Response<BoxBody>, (StatusCode, String)> {
+    let req = Request::builder()
+        .uri(uri.clone())
+        .body(Body::empty())
+        .unwrap();
+    // `ServeDir` implements `tower::Service` so we can call it with `tower::ServiceExt::oneshot`
+    // This path is relative to the cargo root
+    match ServeDir::new(root).oneshot(req).await {
+        Ok(res) => Ok(res.map(boxed)),
+        Err(err) => Err((
+            StatusCode::INTERNAL_SERVER_ERROR,
+            format!("Something went wrong: {err}"),
+        )),
+    }
+}

examples/todo_app_sqlite_csr/src/lib.rs

@@ -0,0 +1,15 @@
+pub mod error_template;
+pub mod errors;
+#[cfg(feature = "ssr")]
+pub mod fallback;
+pub mod todo;
+
+#[cfg_attr(feature = "csr", wasm_bindgen::prelude::wasm_bindgen)]
+pub fn hydrate() {
+    use crate::todo::*;
+
+    _ = console_log::init_with_level(log::Level::Error);
+    console_error_panic_hook::set_once();
+
+    leptos::mount_to_body(TodoApp);
+}

examples/todo_app_sqlite_csr/src/main.rs

@@ -0,0 +1,52 @@
+#[cfg(feature = "ssr")]
+#[allow(unused)]
+mod ssr_imports {
+    pub use axum::{
+        body::Body as AxumBody,
+        extract::{Path, State},
+        http::Request,
+        response::{Html, IntoResponse, Response},
+        routing::{get, post},
+        Router,
+    };
+    pub use leptos::*;
+    pub use leptos_axum::{generate_route_list, LeptosRoutes};
+    pub use todo_app_sqlite_csr::{
+        fallback::file_or_index_handler, todo::*, *,
+    };
+}
+
+#[cfg(feature = "ssr")]
+#[cfg_attr(feature = "ssr", tokio::main)]
+async fn main() {
+    use ssr_imports::*;
+    simple_logger::init_with_level(log::Level::Error)
+        .expect("couldn't initialize logging");
+
+    let _conn = db().await.expect("couldn't connect to DB");
+
+    // Setting this to None means we'll be using cargo-leptos and its env vars
+    let conf = get_configuration(None).await.unwrap();
+    let leptos_options = conf.leptos_options;
+    let addr = leptos_options.site_addr;
+
+    // build our application with a route
+    let app = Router::new()
+        .route("/api/*fn_name", post(leptos_axum::handle_server_fns))
+        .fallback(file_or_index_handler)
+        .with_state(leptos_options);
+
+    // run our app with hyper
+    // `axum::Server` is a re-export of `hyper::Server`
+    logging::log!("listening on http://{}", &addr);
+    axum::Server::bind(&addr)
+        .serve(app.into_make_service())
+        .await
+        .unwrap();
+}
+
+#[cfg(not(feature = "ssr"))]
+pub fn main() {
+    // This example cannot be built as a trunk standalone CSR-only app.
+    // Only the server may directly connect to the database.
+}

examples/todo_app_sqlite_csr/src/todo.rs

@@ -0,0 +1,195 @@
+use crate::error_template::ErrorTemplate;
+use leptos::*;
+use leptos_meta::*;
+use leptos_router::*;
+use serde::{Deserialize, Serialize};
+
+#[derive(Clone, Debug, PartialEq, Eq, Serialize, Deserialize)]
+#[cfg_attr(feature = "ssr", derive(sqlx::FromRow))]
+pub struct Todo {
+    id: u16,
+    title: String,
+    completed: bool,
+}
+
+#[cfg(feature = "ssr")]
+use sqlx::{Connection, SqliteConnection};
+
+#[cfg(feature = "ssr")]
+pub async fn db() -> Result<SqliteConnection, ServerFnError> {
+    Ok(SqliteConnection::connect("sqlite:Todos.db").await?)
+}
+
+#[server(GetTodos, "/api")]
+pub async fn get_todos() -> Result<Vec<Todo>, ServerFnError> {
+    // this is just an example of how to access server context injected in the handlers
+    // http::Request doesn't implement Clone, so more work will be needed to do use_context() on this
+    let req_parts = use_context::<leptos_axum::RequestParts>();
+
+    if let Some(req_parts) = req_parts {
+        println!("Uri = {:?}", req_parts.uri);
+    }
+
+    use futures::TryStreamExt;
+
+    let mut conn = db().await?;
+
+    let mut todos = Vec::new();
+    let mut rows =
+        sqlx::query_as::<_, Todo>("SELECT * FROM todos").fetch(&mut conn);
+    while let Some(row) = rows.try_next().await? {
+        todos.push(row);
+    }
+
+    // Add a random header(because why not)
+    // let mut res_headers = HeaderMap::new();
+    // res_headers.insert(SET_COOKIE, HeaderValue::from_str("fizz=buzz").unwrap());
+
+    // let res_parts = leptos_axum::ResponseParts {
+    //     headers: res_headers,
+    //     status: Some(StatusCode::IM_A_TEAPOT),
+    // };
+
+    // let res_options_outer = use_context::<leptos_axum::ResponseOptions>();
+    // if let Some(res_options) = res_options_outer {
+    //     res_options.overwrite(res_parts).await;
+    // }
+
+    Ok(todos)
+}
+
+#[server(AddTodo, "/api")]
+pub async fn add_todo(title: String) -> Result<(), ServerFnError> {
+    let mut conn = db().await?;
+
+    // fake API delay
+    std::thread::sleep(std::time::Duration::from_millis(1250));
+
+    match sqlx::query("INSERT INTO todos (title, completed) VALUES ($1, false)")
+        .bind(title)
+        .execute(&mut conn)
+        .await
+    {
+        Ok(_row) => Ok(()),
+        Err(e) => Err(ServerFnError::ServerError(e.to_string())),
+    }
+}
+
+// The struct name and path prefix arguments are optional.
+#[server]
+pub async fn delete_todo(id: u16) -> Result<(), ServerFnError> {
+    let mut conn = db().await?;
+
+    Ok(sqlx::query("DELETE FROM todos WHERE id = $1")
+        .bind(id)
+        .execute(&mut conn)
+        .await
+        .map(|_| ())?)
+}
+
+#[component]
+pub fn TodoApp() -> impl IntoView {
+    //let id = use_context::<String>();
+    provide_meta_context();
+    view! {
+
+        <Link rel="shortcut icon" type_="image/ico" href="/favicon.ico"/>
+        <Stylesheet id="leptos" href="/pkg/todo_app_sqlite_csr.css"/>
+        <Router>
+            <header>
+                <h1>"My Tasks"</h1>
+            </header>
+            <main>
+                <Routes>
+                    <Route path="" view=Todos/>
+                </Routes>
+            </main>
+        </Router>
+    }
+}
+
+#[component]
+pub fn Todos() -> impl IntoView {
+    let add_todo = create_server_multi_action::<AddTodo>();
+    let delete_todo = create_server_action::<DeleteTodo>();
+    let submissions = add_todo.submissions();
+
+    // list of todos is loaded from the server in reaction to changes
+    let todos = create_resource(
+        move || (add_todo.version().get(), delete_todo.version().get()),
+        move |_| get_todos(),
+    );
+
+    view! {
+        <div>
+            <MultiActionForm action=add_todo>
+                <label>
+                    "Add a Todo"
+                    <input type="text" name="title"/>
+                </label>
+                <input type="submit" value="Add"/>
+            </MultiActionForm>
+            <Transition fallback=move || view! {<p>"Loading..."</p> }>
+                <ErrorBoundary fallback=|errors| view!{<ErrorTemplate errors=errors/>}>
+                    {move || {
+                        let existing_todos = {
+                            move || {
+                                todos.get()
+                                    .map(move |todos| match todos {
+                                        Err(e) => {
+                                            view! { <pre class="error">"Server Error: " {e.to_string()}</pre>}.into_view()
+                                        }
+                                        Ok(todos) => {
+                                            if todos.is_empty() {
+                                                view! { <p>"No tasks were found."</p> }.into_view()
+                                            } else {
+                                                todos
+                                                    .into_iter()
+                                                    .map(move |todo| {
+                                                        view! {
+
+                                                            <li>
+                                                                {todo.title}
+                                                                <ActionForm action=delete_todo>
+                                                                    <input type="hidden" name="id" value={todo.id}/>
+                                                                    <input type="submit" value="X"/>
+                                                                </ActionForm>
+                                                            </li>
+                                                        }
+                                                    })
+                                                    .collect_view()
+                                            }
+                                        }
+                                    })
+                                    .unwrap_or_default()
+                            }
+                        };
+
+                        let pending_todos = move || {
+                            submissions
+                            .get()
+                            .into_iter()
+                            .filter(|submission| submission.pending().get())
+                            .map(|submission| {
+                                view! {
+
+                                    <li class="pending">{move || submission.input.get().map(|data| data.title) }</li>
+                                }
+                            })
+                            .collect_view()
+                        };
+
+                        view! {
+
+                            <ul>
+                                {existing_todos}
+                                {pending_todos}
+                            </ul>
+                        }
+                    }
+                }
+                </ErrorBoundary>
+            </Transition>
+        </div>
+    }
+}

examples/todo_app_sqlite_csr/style.css

@@ -0,0 +1,3 @@
+.pending {
+	color: purple;
+}

examples/todo_app_sqlite_viz/README.md

@@ -9,3 +9,7 @@ See the [Examples README](../README.md) for setup and run instructions.
 ## Rendering
 
 See the [SSR Notes](../SSR_NOTES.md) for more information about Server Side Rendering.
+
+## Quick Start
+
+Run `cargo leptos watch` to run this example.

examples/todomvc/README.md

@@ -5,3 +5,7 @@ This is a Leptos implementation of the TodoMVC example common to many frameworks
 ## Getting Started
 
 See the [Examples README](../README.md) for setup and run instructions.
+
+## Quick Start
+
+Run `trunk serve --open` to run this example.

integrations/actix/src/lib.rs

@@ -165,6 +165,12 @@ pub fn handle_server_fns() -> Route {
 /// This version allows you to pass in a closure that adds additional route data to the
 /// context, allowing you to pass in info about the route or user from Actix, or other info.
 ///
+/// **NOTE**: If your server functions expect a context, make sure to provide it both in
+/// [`handle_server_fns_with_context`] **and** in [`leptos_routes_with_context`] (or whatever
+/// rendering method you are using). During SSR, server functions are called by the rendering
+/// method, while subsequent calls from the client are handled by the server function handler.
+/// The same context needs to be provided to both handlers.
+///
 /// ## Provided Context Types
 /// This function always provides context values including the following types:
 /// - [ResponseOptions]

integrations/axum/src/lib.rs

@@ -7,7 +7,7 @@
 //! To run in this environment, you need to disable the default feature set and enable
 //! the `wasm` feature on `leptos_axum` in your `Cargo.toml`.
 //! ```toml
-//! leptos_axum = { version = "0.5.1", default-features = false, features = ["wasm"] }
+//! leptos_axum = { version = "0.5.4", default-features = false, features = ["wasm"] }
 //! ```
 //!
 //! ## Features
@@ -251,6 +251,12 @@ macro_rules! spawn_task {
 /// that takes in the data you'd like. See the [render_app_to_stream_with_context] docs for an example
 /// of one that should work much like this one.
 ///
+/// **NOTE**: If your server functions expect a context, make sure to provide it both in
+/// [`handle_server_fns_with_context`] **and** in [`leptos_routes_with_context`] (or whatever
+/// rendering method you are using). During SSR, server functions are called by the rendering
+/// method, while subsequent calls from the client are handled by the server function handler.
+/// The same context needs to be provided to both handlers.
+///
 /// ## Provided Context Types
 /// This function always provides context values including the following types:
 /// - [RequestParts]
@@ -378,7 +384,7 @@ async fn handle_server_fns_inner(
                 Response::builder().status(StatusCode::BAD_REQUEST).body(
                     Full::from(format!(
                         "Could not find a server function at the route \
-                         {fn_name}. \n\nIt's likely that either 
+                         {fn_name}. \n\nIt's likely that either
                          1. The API prefix you specify in the `#[server]` \
                          macro doesn't match the prefix at which your server \
                          function handler is mounted, or \n2. You are on a \
@@ -1099,38 +1105,41 @@ where
                 let full_path = format!("http://leptos.dev{path}");
 
                 let (tx, rx) = futures::channel::oneshot::channel();
-                let local_pool = get_leptos_pool();
-                local_pool.spawn_pinned(move || {
-                    async move {
-                        let app = {
-                            let full_path = full_path.clone();
-                            let (req, req_parts) = generate_request_and_parts(req).await;
-                            move || {
-                                provide_contexts(full_path, req_parts, req.into(), default_res_options);
-                                app_fn().into_view()
-                            }
-                        };
-
-                        let (stream, runtime) =
-                            render_to_stream_in_order_with_prefix_undisposed_with_context(
-                                app,
-                                || "".into(),
-                                add_context,
+                spawn_task!(async move {
+                    let app = {
+                        let full_path = full_path.clone();
+                        let (req, req_parts) =
+                            generate_request_and_parts(req).await;
+                        move || {
+                            provide_contexts(
+                                full_path,
+                                req_parts,
+                                req.into(),
+                                default_res_options,
                             );
+                            app_fn().into_view()
+                        }
+                    };
 
-                        // Extract the value of ResponseOptions from here
-                        let res_options =
-                            use_context::<ResponseOptions>().unwrap();
+                    let (stream, runtime) =
+                        render_to_stream_in_order_with_prefix_undisposed_with_context(
+                            app,
+                            || "".into(),
+                            add_context,
+                        );
 
-                        let html = build_async_response(stream, &options, runtime).await;
+                    // Extract the value of ResponseOptions from here
+                    let res_options = use_context::<ResponseOptions>().unwrap();
 
-                        let new_res_parts = res_options.0.read().clone();
+                    let html =
+                        build_async_response(stream, &options, runtime).await;
 
-                        let mut writable = res_options2.0.write();
-                        *writable = new_res_parts;
+                    let new_res_parts = res_options.0.read().clone();
 
-                        _ = tx.send(html);
-                    }
+                    let mut writable = res_options2.0.write();
+                    *writable = new_res_parts;
+
+                    _ = tx.send(html);
                 });
 
                 let html = rx.await.expect("to complete HTML rendering");
@@ -1323,6 +1332,29 @@ where
     generate_route_list_with_exclusions_and_ssg(app_fn, excluded_routes).0
 }
 
+/// TODO docs
+pub async fn build_static_routes<IV>(
+    options: &LeptosOptions,
+    app_fn: impl Fn() -> IV + 'static + Send + Clone,
+    routes: &[RouteListing],
+    static_data_map: StaticDataMap,
+) where
+    IV: IntoView + 'static,
+{
+    let options = options.clone();
+    let routes = routes.to_owned();
+    spawn_task!(async move {
+        leptos_router::build_static_routes(
+            &options,
+            app_fn,
+            &routes,
+            &static_data_map,
+        )
+        .await
+        .expect("could not build static routes")
+    });
+}
+
 /// Generates a list of all routes defined in Leptos's Router in your app. We can then use this to automatically
 /// create routes in Axum's Router without having to use wildcard matching or fallbacks. Takes in your root app Element
 /// as an argument so it can walk you app tree. This version is tailored to generate Axum compatible paths. Adding excluded_routes
@@ -1535,8 +1567,7 @@ where
 
                     async move {
                         let (tx, rx) = futures::channel::oneshot::channel();
-                        let local_pool = get_leptos_pool();
-                        local_pool.spawn_pinned(move || async move {
+                        spawn_task!(async move {
                             let res = incremental_static_route(
                                 tokio::fs::read_to_string(static_file_path(
                                     &options, &path,
@@ -1579,8 +1610,7 @@ where
 
                     async move {
                         let (tx, rx) = futures::channel::oneshot::channel();
-                        let local_pool = get_leptos_pool();
-                        local_pool.spawn_pinned(move || async move {
+                        spawn_task!(async move {
                             let res = upfront_static_route(
                                 tokio::fs::read_to_string(static_file_path(
                                     &options, &path,
@@ -1805,8 +1835,8 @@ impl ExtractorHelper {
     where
         S: Sized,
         F: Extractor<T, U, S>,
-        T: std::fmt::Debug + Send + FromRequestParts<S> + 'static,
-        T::Rejection: std::fmt::Debug + Send + 'static,
+        T: core::fmt::Debug + Send + FromRequestParts<S> + 'static,
+        T::Rejection: core::fmt::Debug + Send + 'static,
     {
         let mut parts = self.parts.lock().await;
         let data = T::from_request_parts(&mut parts, &s).await?;
@@ -1849,8 +1879,8 @@ pub async fn extract<T, U>(
     f: impl Extractor<T, U, ()>,
 ) -> Result<U, T::Rejection>
 where
-    T: std::fmt::Debug + Send + FromRequestParts<()> + 'static,
-    T::Rejection: std::fmt::Debug + Send + 'static,
+    T: core::fmt::Debug + Send + FromRequestParts<()> + 'static,
+    T::Rejection: core::fmt::Debug + Send + 'static,
 {
     extract_with_state((), f).await
 }
@@ -1917,8 +1947,8 @@ pub async fn extract_with_state<T, U, S>(
 ) -> Result<U, T::Rejection>
 where
     S: Sized,
-    T: std::fmt::Debug + Send + FromRequestParts<S> + 'static,
-    T::Rejection: std::fmt::Debug + Send + 'static,
+    T: core::fmt::Debug + Send + FromRequestParts<S> + 'static,
+    T::Rejection: core::fmt::Debug + Send + 'static,
 {
     use_context::<ExtractorHelper>()
         .expect(

integrations/viz/src/lib.rs

@@ -167,6 +167,12 @@ pub async fn handle_server_fns(req: Request) -> Result<Response> {
 /// that takes in the data you'd like. See the [render_app_to_stream_with_context] docs for an example
 /// of one that should work much like this one.
 ///
+/// **NOTE**: If your server functions expect a context, make sure to provide it both in
+/// [`handle_server_fns_with_context`] **and** in [`leptos_routes_with_context`] (or whatever
+/// rendering method you are using). During SSR, server functions are called by the rendering
+/// method, while subsequent calls from the client are handled by the server function handler.
+/// The same context needs to be provided to both handlers.
+///
 /// ## Provided Context Types
 /// This function always provides context values including the following types:
 /// - [RequestParts]

leptos/Cargo.toml

@@ -16,12 +16,16 @@ leptos_reactive = { workspace = true }
 leptos_server = { workspace = true }
 leptos_config = { workspace = true }
 tracing = "0.1"
-typed-builder = "0.16"
-typed-builder-macro = "0.16"
+typed-builder = "0.18"
+typed-builder-macro = "0.18"
 serde = { version = "1", optional = true }
 serde_json = { version = "1", optional = true }
 server_fn = { workspace = true }
-web-sys = { version = "0.3.63", features = ["ShadowRoot", "ShadowRootInit", "ShadowRootMode"] }
+web-sys = { version = "0.3.63", features = [
+  "ShadowRoot",
+  "ShadowRootInit",
+  "ShadowRootMode",
+] }
 wasm-bindgen = { version = "0.2", optional = true }
 
 [features]

leptos/src/error_boundary.rs

@@ -2,7 +2,8 @@ use crate::Children;
 use leptos_dom::{Errors, HydrationCtx, IntoView};
 use leptos_macro::{component, view};
 use leptos_reactive::{
-    create_rw_signal, provide_context, signal_prelude::*, RwSignal,
+    create_rw_signal, provide_context, run_as_child, signal_prelude::*,
+    RwSignal,
 };
 
 /// When you render a `Result<_, _>` in your view, in the `Err` case it will
@@ -15,6 +16,7 @@ use leptos_reactive::{
 /// # use leptos_macro::*;
 /// # use leptos_dom::*; use leptos::*;
 /// # let runtime = create_runtime();
+/// # if false {
 /// let (value, set_value) = create_signal(Ok(0));
 /// let on_input =
 ///     move |ev| set_value.set(event_target_value(&ev).parse::<i32>());
@@ -28,6 +30,7 @@ use leptos_reactive::{
 ///   </ErrorBoundary>
 /// }
 /// # ;
+/// # }
 /// # runtime.dispose();
 /// ```
 ///
@@ -59,21 +62,22 @@ where
     F: Fn(RwSignal<Errors>) -> IV + 'static,
     IV: IntoView,
 {
-    let before_children = HydrationCtx::next_error();
+    run_as_child(move || {
+        let before_children = HydrationCtx::next_error();
 
-    let errors: RwSignal<Errors> = create_rw_signal(Errors::default());
+        let errors: RwSignal<Errors> = create_rw_signal(Errors::default());
 
-    provide_context(errors);
+        provide_context(errors);
 
-    // Run children so that they render and execute resources
-    _ = HydrationCtx::next_error();
-    let children = children();
-    HydrationCtx::continue_from(before_children);
+        // Run children so that they render and execute resources
+        _ = HydrationCtx::next_error();
+        let children = children();
+        HydrationCtx::continue_from(before_children);
 
-    #[cfg(all(debug_assertions, feature = "hydrate"))]
-    {
-        use leptos_dom::View;
-        if children.nodes.iter().any(|child| {
+        #[cfg(all(debug_assertions, feature = "hydrate"))]
+        {
+            use leptos_dom::View;
+            if children.nodes.iter().any(|child| {
             matches!(child, View::Suspense(_, _))
             || matches!(child, View::Component(repr) if repr.name() == "Transition")
         }) {
@@ -84,20 +88,21 @@ where
             \nview! {{ \
             \n  <Suspense fallback=todo!()>\n    <ErrorBoundary fallback=todo!()>\n      {{move || {{ /* etc. */")
         }
-    }
+        }
 
-    let children = children.into_view();
-    let errors_empty = create_memo(move |_| errors.with(Errors::is_empty));
+        let children = children.into_view();
+        let errors_empty = create_memo(move |_| errors.with(Errors::is_empty));
 
-    move || {
-        if errors_empty.get() {
-            children.clone().into_view()
-        } else {
-            view! {
+        move || {
+            if errors_empty.get() {
+                children.clone().into_view()
+            } else {
+                view! {
                 {fallback(errors)}
                 <leptos-error-boundary style="display: none">{children.clone()}</leptos-error-boundary>
             }
             .into_view()
+            }
         }
-    }
+    })
 }

leptos/src/lib.rs

@@ -180,7 +180,7 @@ pub mod error {
 pub use leptos_macro::template;
 #[cfg(not(all(target_arch = "wasm32", feature = "template_macro")))]
 pub use leptos_macro::view as template;
-pub use leptos_macro::{component, island, server, slot, view, Params};
+pub use leptos_macro::{component, island, server, slice, slot, view, Params};
 pub use leptos_reactive::*;
 pub use leptos_server::{
     self, create_action, create_multi_action, create_server_action,
@@ -192,9 +192,11 @@ mod error_boundary;
 pub use error_boundary::*;
 mod animated_show;
 mod for_loop;
+mod provider;
 mod show;
 pub use animated_show::*;
 pub use for_loop::*;
+pub use provider::*;
 #[cfg(feature = "experimental-islands")]
 pub use serde;
 #[cfg(feature = "experimental-islands")]
@@ -202,10 +204,8 @@ pub use serde_json;
 pub use show::*;
 pub use suspense_component::*;
 mod suspense_component;
-mod text_prop;
 mod transition;
 
-pub use text_prop::TextProp;
 #[cfg(any(debug_assertions, feature = "ssr"))]
 #[doc(hidden)]
 pub use tracing;