feat: better error handling for ScopedFuture (#1810)

-attribute-derive = { version = "0.6", features = ["syn-full"] }
+attribute-derive = { version = "0.8", features = ["syn-full"] }
-itertools = "0.10"
+itertools = "0.11"

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

@@ -34,8 +34,9 @@ jobs:
             examples
             !examples/cargo-make
             !examples/gtk
+            !examples/hackernews_js_fetch
             !examples/Makefile.toml
-            !examples/README.md
+            !examples/*.md
           json: true
           quotepath: false
 

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

@@ -28,7 +28,7 @@ jobs:
             !examples/cargo-make
             !examples/gtk
             !examples/Makefile.toml
-            !examples/README.md
+            !examples/*.md
 
       - name: List example files that changed
         run: echo '${{ steps.changed-files.outputs.all_changed_files }}'

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

@@ -25,7 +25,7 @@ jobs:
         run: |
           examples=$(ls examples | 
           awk '{print "examples/" $0}' | 
-          grep -v examples/README.md | 
+          grep -v .md | 
           grep -v examples/Makefile.toml | 
           grep -v examples/cargo-make | 
           grep -v examples/gtk | 

.github/workflows/publish-book.yml

@@ -1,36 +1,37 @@
 name: Deploy book
 on:
   push:
-    tags:
-      - '*-?v[0-9]+*'
+    paths: ["docs/book/**"]
+    branches:
+      - main
 
 jobs:
   deploy:
     runs-on: ubuntu-latest
     permissions:
-      contents: write  # To push a branch 
-      pull-requests: write  # To create a PR from that branch
+      contents: write # To push a branch
+      pull-requests: write # To create a PR from that branch
     steps:
-    - uses: actions/checkout@v3
-      with:
-        fetch-depth: 0
-    - name: Install mdbook
-      run: |
-        mkdir mdbook
-        curl -sSL https://github.com/rust-lang/mdBook/releases/download/v0.4.27/mdbook-v0.4.27-x86_64-unknown-linux-gnu.tar.gz | tar -xz --directory=./mdbook
-        echo `pwd`/mdbook >> $GITHUB_PATH
-    - name: Deploy GitHub Pages
-      run: |
-        cd docs/book
-        mdbook build
-        git worktree add gh-pages
-        git config user.name "Deploy book from CI"
-        git config user.email ""
-        cd gh-pages
-        # Delete the ref to avoid keeping history.
-        git update-ref -d refs/heads/gh-pages
-        rm -rf *
-        mv ../book/* .
-        git add .
-        git commit -m "Deploy book $GITHUB_SHA to gh-pages"
-        git push --force --set-upstream origin gh-pages
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: Install mdbook
+        run: |
+          mkdir mdbook
+          curl -sSL https://github.com/rust-lang/mdBook/releases/download/v0.4.27/mdbook-v0.4.27-x86_64-unknown-linux-gnu.tar.gz | tar -xz --directory=./mdbook
+          echo `pwd`/mdbook >> $GITHUB_PATH
+      - name: Deploy GitHub Pages
+        run: |
+          cd docs/book
+          mdbook build
+          git worktree add gh-pages
+          git config user.name "Deploy book from CI"
+          git config user.email ""
+          cd gh-pages
+          # Delete the ref to avoid keeping history.
+          git update-ref -d refs/heads/gh-pages
+          rm -rf *
+          mv ../book/* .
+          git add .
+          git commit -m "Deploy book $GITHUB_SHA to gh-pages"
+          git push --force --set-upstream origin gh-pages

Cargo.toml

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

benchmarks/Cargo.toml

@@ -4,10 +4,16 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-l021 = { package = "leptos", version = "0.2.1" }
-leptos = { path = "../leptos", features = ["ssr"] }
+l0410 = { package = "leptos", version = "0.4.10", features = [
+	"nightly",
+	"ssr",
+] }
+leptos = { path = "../leptos", features = ["ssr", "nightly"] }
+leptos_reactive = { path = "../leptos_reactive", features = ["ssr", "nightly"] }
+tachydom = { git = "https://github.com/gbj/tachys", features = ["nightly"] }
+tachy_maccy = { git = "https://github.com/gbj/tachys", features = ["nightly"] }
 sycamore = { version = "0.8", features = ["ssr"] }
-yew = { git = "https://github.com/yewstack/yew", features = ["ssr"] }
+yew = { version = "0.20", features = ["ssr"] }
 tokio-test = "0.4"
 miniserde = "0.1"
 gloo = "0.8"
@@ -20,7 +26,6 @@ strum_macros = "0.24"
 serde = { version = "1", features = ["derive", "rc"] }
 serde_json = "1"
 tera = "1"
-reactive-signals = "0.1.0-alpha.4"
 
 [dependencies.web-sys]
 version = "0.3"

benchmarks/src/lib.rs

@@ -2,6 +2,6 @@
 
 extern crate test;
 
-//åmod reactive;
-//mod ssr;
+mod reactive;
+mod ssr;
 mod todomvc;

benchmarks/src/reactive.rs

@@ -7,19 +7,16 @@ fn leptos_deep_creation(b: &mut Bencher) {
     let runtime = create_runtime();
 
     b.iter(|| {
-        create_scope(runtime, || {
-            let signal = create_rw_signal(0);
-            let mut memos = Vec::<Memo<usize>>::new();
-            for _ in 0..1000usize {
-                let prev = memos.last().copied();
-                if let Some(prev) = prev {
-                    memos.push(create_memo(move |_| prev.get() + 1));
-                } else {
-                    memos.push(create_memo(move |_| signal.get() + 1));
-                }
+        let signal = create_rw_signal(0);
+        let mut memos = Vec::<Memo<usize>>::new();
+        for _ in 0..1000usize {
+            let prev = memos.last().copied();
+            if let Some(prev) = prev {
+                memos.push(create_memo(move |_| prev.get() + 1));
+            } else {
+                memos.push(create_memo(move |_| signal.get() + 1));
             }
-        })
-        .dispose()
+        }
     });
 
     runtime.dispose();
@@ -31,20 +28,17 @@ fn leptos_deep_update(b: &mut Bencher) {
     let runtime = create_runtime();
 
     b.iter(|| {
-        create_scope(runtime, || {
-            let signal = create_rw_signal(0);
-            let mut memos = Vec::<Memo<usize>>::new();
-            for _ in 0..1000usize {
-                if let Some(prev) = memos.last().copied() {
-                    memos.push(create_memo(move |_| prev.get() + 1));
-                } else {
-                    memos.push(create_memo(move |_| signal.get() + 1));
-                }
+        let signal = create_rw_signal(0);
+        let mut memos = Vec::<Memo<usize>>::new();
+        for _ in 0..1000usize {
+            if let Some(prev) = memos.last().copied() {
+                memos.push(create_memo(move |_| prev.get() + 1));
+            } else {
+                memos.push(create_memo(move |_| signal.get() + 1));
             }
-            signal.set(1);
-            assert_eq!(memos[999].get(), 1001);
-        })
-        .dispose()
+        }
+        signal.set(1);
+        assert_eq!(memos[999].get(), 1001);
     });
 
     runtime.dispose();
@@ -56,16 +50,12 @@ fn leptos_narrowing_down(b: &mut Bencher) {
     let runtime = create_runtime();
 
     b.iter(|| {
-        create_scope(runtime, || {
-            let sigs = (0..1000).map(|n| create_signal(n)).collect::<Vec<_>>();
-            let reads = sigs.iter().map(|(r, _)| *r).collect::<Vec<_>>();
-            let writes = sigs.iter().map(|(_, w)| *w).collect::<Vec<_>>();
-            let memo = create_memo(move |_| {
-                reads.iter().map(|r| r.get()).sum::<i32>()
-            });
-            assert_eq!(memo(), 499500);
-        })
-        .dispose()
+        let sigs = (0..1000).map(|n| create_signal(n)).collect::<Vec<_>>();
+        let reads = sigs.iter().map(|(r, _)| *r).collect::<Vec<_>>();
+        let writes = sigs.iter().map(|(_, w)| *w).collect::<Vec<_>>();
+        let memo =
+            create_memo(move |_| reads.iter().map(|r| r.get()).sum::<i32>());
+        assert_eq!(memo(), 499500);
     });
 
     runtime.dispose();
@@ -77,16 +67,13 @@ fn leptos_fanning_out(b: &mut Bencher) {
     let runtime = create_runtime();
 
     b.iter(|| {
-        create_scope(runtime, || {
-            let sig = create_rw_signal(0);
-            let memos = (0..1000)
-                .map(|_| create_memo(move |_| sig.get()))
-                .collect::<Vec<_>>();
-            assert_eq!(memos.iter().map(|m| m.get()).sum::<i32>(), 0);
-            sig.set(1);
-            assert_eq!(memos.iter().map(|m| m.get()).sum::<i32>(), 1000);
-        })
-        .dispose()
+        let sig = create_rw_signal(0);
+        let memos = (0..1000)
+            .map(|_| create_memo(move |_| sig.get()))
+            .collect::<Vec<_>>();
+        assert_eq!(memos.iter().map(|m| m.get()).sum::<i32>(), 0);
+        sig.set(1);
+        assert_eq!(memos.iter().map(|m| m.get()).sum::<i32>(), 1000);
     });
 
     runtime.dispose();
@@ -97,145 +84,36 @@ fn leptos_narrowing_update(b: &mut Bencher) {
     use leptos::*;
     let runtime = create_runtime();
 
-    b.iter(|| {
-        create_scope(runtime, || {
-            let acc = Rc::new(Cell::new(0));
-            let sigs = (0..1000).map(|n| create_signal(n)).collect::<Vec<_>>();
-            let reads = sigs.iter().map(|(r, _)| *r).collect::<Vec<_>>();
-            let writes = sigs.iter().map(|(_, w)| *w).collect::<Vec<_>>();
-            let memo = create_memo(move |_| {
-                reads.iter().map(|r| r.get()).sum::<i32>()
-            });
-            assert_eq!(memo(), 499500);
-            create_isomorphic_effect({
-                let acc = Rc::clone(&acc);
-                move |_| {
-                    acc.set(memo());
-                }
-            });
-            assert_eq!(acc.get(), 499500);
-
-            writes[1].update(|n| *n += 1);
-            writes[10].update(|n| *n += 1);
-            writes[100].update(|n| *n += 1);
-
-            assert_eq!(acc.get(), 499503);
-            assert_eq!(memo(), 499503);
-        })
-        .dispose()
-    });
-
-    runtime.dispose();
-}
-
-#[bench]
-fn leptos_scope_creation_and_disposal(b: &mut Bencher) {
-    use leptos::*;
-    let runtime = create_runtime();
-
     b.iter(|| {
         let acc = Rc::new(Cell::new(0));
-        let disposers = (0..1000)
-            .map(|_| {
-                create_scope(runtime, {
-                    let acc = Rc::clone(&acc);
-                    move || {
-                        let (r, w) = create_signal(0);
-                        create_isomorphic_effect({
-                            move |_| {
-                                acc.set(r());
-                            }
-                        });
-                        w.update(|n| *n += 1);
-                    }
-                })
-            })
-            .collect::<Vec<_>>();
-        for disposer in disposers {
-            disposer.dispose();
-        }
-    });
-
-    runtime.dispose();
-}
-
-#[bench]
-fn rs_deep_update(b: &mut Bencher) {
-    use reactive_signals::{
-        runtimes::ClientRuntime, signal, types::Func, Scope, Signal,
-    };
-
-    let sc = ClientRuntime::new_root_scope();
-    b.iter(|| {
-        let signal = signal!(sc, 0);
-        let mut memos = Vec::<Signal<Func<i32>, ClientRuntime>>::new();
-        for i in 0..1000usize {
-            let prev = memos.get(i.saturating_sub(1)).copied();
-            if let Some(prev) = prev {
-                memos.push(signal!(sc, move || prev.get() + 1))
-            } else {
-                memos.push(signal!(sc, move || signal.get() + 1))
-            }
-        }
-        signal.set(1);
-        assert_eq!(memos[999].get(), 1001);
-    });
-}
-
-#[bench]
-fn rs_fanning_out(b: &mut Bencher) {
-    use reactive_signals::{
-        runtimes::ClientRuntime, signal, types::Func, Scope, Signal,
-    };
-    let cx = ClientRuntime::new_root_scope();
-
-    b.iter(|| {
-        let sig = signal!(cx, 0);
-        let memos = (0..1000)
-            .map(|_| signal!(cx, move || sig.get()))
-            .collect::<Vec<_>>();
-        assert_eq!(memos.iter().map(|m| m.get()).sum::<i32>(), 0);
-        sig.set(1);
-        assert_eq!(memos.iter().map(|m| m.get()).sum::<i32>(), 1000);
-    });
-}
-
-#[bench]
-fn rs_narrowing_update(b: &mut Bencher) {
-    use reactive_signals::{
-        runtimes::ClientRuntime, signal, types::Func, Scope, Signal,
-    };
-    let cx = ClientRuntime::new_root_scope();
-
-    b.iter(|| {
-        let acc = Rc::new(Cell::new(0));
-        let sigs = (0..1000).map(|n| signal!(cx, n)).collect::<Vec<_>>();
-        let memo = signal!(cx, {
-            let sigs = sigs.clone();
-            move || sigs.iter().map(|r| r.get()).sum::<i32>()
-        });
-        assert_eq!(memo.get(), 499500);
-        signal!(cx, {
+        let sigs = (0..1000).map(|n| create_signal(n)).collect::<Vec<_>>();
+        let reads = sigs.iter().map(|(r, _)| *r).collect::<Vec<_>>();
+        let writes = sigs.iter().map(|(_, w)| *w).collect::<Vec<_>>();
+        let memo =
+            create_memo(move |_| reads.iter().map(|r| r.get()).sum::<i32>());
+        assert_eq!(memo(), 499500);
+        create_isomorphic_effect({
             let acc = Rc::clone(&acc);
-            move || {
-                acc.set(memo.get());
+            move |_| {
+                acc.set(memo());
             }
         });
-
         assert_eq!(acc.get(), 499500);
 
-        sigs[1].update(|n| *n += 1);
-        sigs[10].update(|n| *n += 1);
-        sigs[100].update(|n| *n += 1);
+        writes[1].update(|n| *n += 1);
+        writes[10].update(|n| *n += 1);
+        writes[100].update(|n| *n += 1);
 
         assert_eq!(acc.get(), 499503);
-        assert_eq!(memo.get(), 499503);
+        assert_eq!(memo(), 499503);
     });
+
+    runtime.dispose();
 }
 
 #[bench]
-fn l021_deep_creation(b: &mut Bencher) {
-    use l021::*;
+fn l0410_deep_creation(b: &mut Bencher) {
+    use l0410::*;
     let runtime = create_runtime();
 
     b.iter(|| {
@@ -257,8 +135,8 @@ fn l021_deep_creation(b: &mut Bencher) {
 }
 
 #[bench]
-fn l021_deep_update(b: &mut Bencher) {
-    use l021::*;
+fn l0410_deep_update(b: &mut Bencher) {
+    use l0410::*;
     let runtime = create_runtime();
 
     b.iter(|| {
@@ -282,8 +160,8 @@ fn l021_deep_update(b: &mut Bencher) {
 }
 
 #[bench]
-fn l021_narrowing_down(b: &mut Bencher) {
-    use l021::*;
+fn l0410_narrowing_down(b: &mut Bencher) {
+    use l0410::*;
     let runtime = create_runtime();
 
     b.iter(|| {
@@ -305,8 +183,8 @@ fn l021_narrowing_down(b: &mut Bencher) {
 }
 
 #[bench]
-fn l021_fanning_out(b: &mut Bencher) {
-    use leptos::*;
+fn l0410_fanning_out(b: &mut Bencher) {
+    use l0410::*;
     let runtime = create_runtime();
 
     b.iter(|| {
@@ -325,8 +203,8 @@ fn l021_fanning_out(b: &mut Bencher) {
     runtime.dispose();
 }
 #[bench]
-fn l021_narrowing_update(b: &mut Bencher) {
-    use l021::*;
+fn l0410_narrowing_update(b: &mut Bencher) {
+    use l0410::*;
     let runtime = create_runtime();
 
     b.iter(|| {
@@ -339,11 +217,11 @@ fn l021_narrowing_update(b: &mut Bencher) {
             let memo = create_memo(cx, move |_| {
                 reads.iter().map(|r| r.get()).sum::<i32>()
             });
-            assert_eq!(memo(), 499500);
+            assert_eq!(memo.get(), 499500);
             create_isomorphic_effect(cx, {
                 let acc = Rc::clone(&acc);
                 move |_| {
-                    acc.set(memo());
+                    acc.set(memo.get());
                 }
             });
             assert_eq!(acc.get(), 499500);
@@ -353,7 +231,7 @@ fn l021_narrowing_update(b: &mut Bencher) {
             writes[100].update(|n| *n += 1);
 
             assert_eq!(acc.get(), 499503);
-            assert_eq!(memo(), 499503);
+            assert_eq!(memo.get(), 499503);
         })
         .dispose()
     });
@@ -362,8 +240,8 @@ fn l021_narrowing_update(b: &mut Bencher) {
 }
 
 #[bench]
-fn l021_scope_creation_and_disposal(b: &mut Bencher) {
-    use l021::*;
+fn l0410_scope_creation_and_disposal(b: &mut Bencher) {
+    use l0410::*;
     let runtime = create_runtime();
 
     b.iter(|| {
@@ -376,7 +254,7 @@ fn l021_scope_creation_and_disposal(b: &mut Bencher) {
                         let (r, w) = create_signal(cx, 0);
                         create_isomorphic_effect(cx, {
                             move |_| {
-                                acc.set(r());
+                                acc.set(r.get());
                             }
                         });
                         w.update(|n| *n += 1);

benchmarks/src/ssr.rs

@@ -2,15 +2,14 @@ use test::Bencher;
 
 #[bench]
 fn leptos_ssr_bench(b: &mut Bencher) {
+	use leptos::*;
+	let r = create_runtime();
     b.iter(|| {
-		use leptos::*;
-		leptos_dom::HydrationCtx::reset_id();
-		_ = create_scope(create_runtime(), |cx| {
+			leptos::leptos_dom::HydrationCtx::reset_id();
 			#[component]
 			fn Counter(initial: i32) -> impl IntoView {
-				let (value, set_value) = create_signal(cx, initial);
+				let (value, set_value) = create_signal(initial);
 				view! {
-					cx,
 					<div>
 						<button on:click=move |_| set_value.update(|value| *value -= 1)>"-1"</button>
 						<span>"Value: " {move || value().to_string()} "!"</span>
@@ -20,7 +19,6 @@ fn leptos_ssr_bench(b: &mut Bencher) {
 			}
 
 			let rendered = view! { 
-				cx,
 				<main>
 					<h1>"Welcome to our benchmark page."</h1>
 					<p>"Here's some introductory text."</p>
@@ -28,14 +26,51 @@ fn leptos_ssr_bench(b: &mut Bencher) {
 					<Counter initial=2/>
 					<Counter initial=3/>
 				</main>
-			}.into_view(cx).render_to_string(cx);
+			}.into_view().render_to_string();
 
 			assert_eq!(
 				rendered,
-				"<main id=\"_0-1\"><h1 id=\"_0-2\">Welcome to our benchmark page.</h1><p id=\"_0-3\">Here&#x27;s some introductory text.</p><div id=\"_0-3-1\"><button id=\"_0-3-2\">-1</button><span id=\"_0-3-3\">Value: <!>1<!--hk=_0-3-4-->!</span><button id=\"_0-3-5\">+1</button></div><!--hk=_0-3-0--><div id=\"_0-3-5-1\"><button id=\"_0-3-5-2\">-1</button><span id=\"_0-3-5-3\">Value: <!>2<!--hk=_0-3-5-4-->!</span><button id=\"_0-3-5-5\">+1</button></div><!--hk=_0-3-5-0--><div id=\"_0-3-5-5-1\"><button id=\"_0-3-5-5-2\">-1</button><span id=\"_0-3-5-5-3\">Value: <!>3<!--hk=_0-3-5-5-4-->!</span><button id=\"_0-3-5-5-5\">+1</button></div><!--hk=_0-3-5-5-0--></main>"
+				"<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>"
 			);
-		});
 	});
+	r.dispose();
+}
+
+#[bench]
+fn tachys_ssr_bench(b: &mut Bencher) {
+	use leptos::{create_runtime, create_signal, SignalGet, SignalUpdate};
+	use tachy_maccy::view;
+	use tachydom::view::Render;
+	let rt = create_runtime();
+    b.iter(|| {
+		fn counter(initial: i32) -> impl Render {
+			let (value, set_value) = create_signal(initial);
+			view! {
+				<div>
+					<button on:click=move |_| set_value.update(|value| *value -= 1)>"-1"</button>
+					<span>"Value: " {move || value().to_string()} "!"</span>
+					<button on:click=move |_| set_value.update(|value| *value += 1)>"+1"</button>
+				</div>
+			}
+		}
+
+		let mut buf = String::with_capacity(1024);
+		let rendered = view! { 
+			<main>
+				<h1>"Welcome to our benchmark page."</h1>
+				<p>"Here's some introductory text."</p>
+				{counter(1)}
+				{counter(2)}
+				{counter(3)}
+			</main>
+		};
+		rendered.to_html(&mut buf, &Default::default());
+		assert_eq!(
+			buf,
+			"<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>"
+		);
+	});
+	rt.dispose();
 }
 
 #[bench]

benchmarks/src/todomvc/leptos.rs

@@ -192,7 +192,7 @@ pub fn TodoMVC(todos: Todos) -> impl IntoView {
                         <For
                             each=filtered_todos
                             key=|todo| todo.id
-                            view=move |todo: Todo| {
+                            children=move |todo: Todo| {
                                 view! { <Todo todo=todo.clone()/> }
                             }
                         />

benchmarks/src/todomvc/mod.rs

@@ -2,6 +2,7 @@ use test::Bencher;
 
 mod leptos;
 mod sycamore;
+mod tachys;
 mod tera;
 mod yew;
 
@@ -17,13 +18,32 @@ fn leptos_todomvc_ssr(b: &mut Bencher) {
         });
         assert!(html.len() > 1);
     });
+    runtime.dispose();
+}
+
+#[bench]
+fn tachys_todomvc_ssr(b: &mut Bencher) {
+    use ::leptos::*;
+    let runtime = create_runtime();
+    b.iter(|| {
+        use crate::todomvc::tachys::*;
+        use tachydom::view::Render;
+
+        let mut buf = String::new();
+        let rendered = TodoMVC(Todos::new());
+        rendered.to_html(&mut buf, &Default::default());
+        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>"
+        );
+    });
+    runtime.dispose();
 }
 
 #[bench]
 fn sycamore_todomvc_ssr(b: &mut Bencher) {
     use self::sycamore::*;
-    use ::sycamore::prelude::*;
-    use ::sycamore::*;
+    use ::sycamore::{prelude::*, *};
 
     b.iter(|| {
         _ = create_scope(|cx| {
@@ -42,8 +62,7 @@ fn sycamore_todomvc_ssr(b: &mut Bencher) {
 #[bench]
 fn yew_todomvc_ssr(b: &mut Bencher) {
     use self::yew::*;
-    use ::yew::prelude::*;
-    use ::yew::ServerRenderer;
+    use ::yew::{prelude::*, ServerRenderer};
 
     b.iter(|| {
         tokio_test::block_on(async {
@@ -60,21 +79,35 @@ fn leptos_todomvc_ssr_with_1000(b: &mut Bencher) {
         use self::leptos::*;
         use ::leptos::*;
 
-        let html = ::leptos::ssr::render_to_string(|cx| {
+        let html = ::leptos::ssr::render_to_string(|| {
             view! {
-                cx,
-                <TodoMVC todos=Todos::new_with_1000(cx)/>
+                <TodoMVC todos=Todos::new_with_1000()/>
             }
         });
         assert!(html.len() > 1);
     });
 }
 
+#[bench]
+fn tachys_todomvc_ssr_with_1000(b: &mut Bencher) {
+    use ::leptos::*;
+    let runtime = create_runtime();
+    b.iter(|| {
+        use crate::todomvc::tachys::*;
+        use tachydom::view::Render;
+
+        let mut buf = String::new();
+        let rendered = TodoMVC(Todos::new_with_1000());
+        rendered.to_html(&mut buf, &Default::default());
+        assert!(buf.len() > 20_000)
+    });
+    runtime.dispose();
+}
+
 #[bench]
 fn sycamore_todomvc_ssr_with_1000(b: &mut Bencher) {
     use self::sycamore::*;
-    use ::sycamore::prelude::*;
-    use ::sycamore::*;
+    use ::sycamore::{prelude::*, *};
 
     b.iter(|| {
         _ = create_scope(|cx| {
@@ -93,8 +126,7 @@ fn sycamore_todomvc_ssr_with_1000(b: &mut Bencher) {
 #[bench]
 fn yew_todomvc_ssr_with_1000(b: &mut Bencher) {
     use self::yew::*;
-    use ::yew::prelude::*;
-    use ::yew::ServerRenderer;
+    use ::yew::{prelude::*, ServerRenderer};
 
     b.iter(|| {
         tokio_test::block_on(async {
@@ -103,4 +135,19 @@ fn yew_todomvc_ssr_with_1000(b: &mut Bencher) {
             assert!(rendered.len() > 1);
         });
     });
-}
+}
+
+#[bench]
+fn tera_todomvc_ssr(b: &mut Bencher) {
+    use ::leptos::*;
+    let runtime = create_runtime();
+    b.iter(|| {
+        use crate::todomvc::leptos::*;
+
+        let html = ::leptos::ssr::render_to_string(|| {
+            view! { <TodoMVC todos=Todos::new()/> }
+        });
+        assert!(html.len() > 1);
+    });
+    runtime.dispose();
+}

benchmarks/src/todomvc/tachys.rs

@@ -0,0 +1,324 @@
+pub use leptos_reactive::*;
+use miniserde::*;
+use tachy_maccy::view;
+use tachydom::view::Render;
+use wasm_bindgen::JsCast;
+use web_sys::HtmlInputElement;
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub struct Todos(pub Vec<Todo>);
+
+const STORAGE_KEY: &str = "todos-leptos";
+
+impl Todos {
+    pub fn new() -> Self {
+        Self(vec![])
+    }
+
+    pub fn new_with_1000() -> Self {
+        let todos = (0..1000)
+            .map(|id| Todo::new(id, format!("Todo #{id}")))
+            .collect();
+        Self(todos)
+    }
+
+    pub fn is_empty(&self) -> bool {
+        self.0.is_empty()
+    }
+
+    pub fn add(&mut self, todo: Todo) {
+        self.0.push(todo);
+    }
+
+    pub fn remove(&mut self, id: usize) {
+        self.0.retain(|todo| todo.id != id);
+    }
+
+    pub fn remaining(&self) -> usize {
+        self.0.iter().filter(|todo| !(todo.completed)()).count()
+    }
+
+    pub fn completed(&self) -> usize {
+        self.0.iter().filter(|todo| (todo.completed)()).count()
+    }
+
+    pub fn toggle_all(&self) {
+        // if all are complete, mark them all active instead
+        if self.remaining() == 0 {
+            for todo in &self.0 {
+                if todo.completed.get() {
+                    (todo.set_completed)(false);
+                }
+            }
+        }
+        // otherwise, mark them all complete
+        else {
+            for todo in &self.0 {
+                (todo.set_completed)(true);
+            }
+        }
+    }
+
+    fn clear_completed(&mut self) {
+        self.0.retain(|todo| !todo.completed.get());
+    }
+}
+
+#[derive(Debug, PartialEq, Eq, Clone)]
+pub struct Todo {
+    pub id: usize,
+    pub title: ReadSignal<String>,
+    pub set_title: WriteSignal<String>,
+    pub completed: ReadSignal<bool>,
+    pub set_completed: WriteSignal<bool>,
+}
+
+impl Todo {
+    pub fn new(id: usize, title: String) -> Self {
+        Self::new_with_completed(id, title, false)
+    }
+
+    pub fn new_with_completed(
+        id: usize,
+        title: String,
+        completed: bool,
+    ) -> Self {
+        let (title, set_title) = create_signal(title);
+        let (completed, set_completed) = create_signal(completed);
+        Self {
+            id,
+            title,
+            set_title,
+            completed,
+            set_completed,
+        }
+    }
+
+    pub fn toggle(&self) {
+        self.set_completed
+            .update(|completed| *completed = !*completed);
+    }
+}
+
+const ESCAPE_KEY: u32 = 27;
+const ENTER_KEY: u32 = 13;
+
+pub fn TodoMVC(todos: Todos) -> impl Render {
+    let mut next_id = todos
+        .0
+        .iter()
+        .map(|todo| todo.id)
+        .max()
+        .map(|last| last + 1)
+        .unwrap_or(0);
+
+    let (todos, set_todos) = create_signal(todos);
+    provide_context(set_todos);
+
+    let (mode, set_mode) = create_signal(Mode::All);
+
+    let add_todo = move |ev: web_sys::KeyboardEvent| {
+        todo!()
+        /* let target = event_target::<HtmlInputElement>(&ev);
+        ev.stop_propagation();
+        let key_code = ev.unchecked_ref::<web_sys::KeyboardEvent>().key_code();
+        if key_code == ENTER_KEY {
+            let title = event_target_value(&ev);
+            let title = title.trim();
+            if !title.is_empty() {
+                let new = Todo::new(next_id, title.to_string());
+                set_todos.update(|t| t.add(new));
+                next_id += 1;
+                target.set_value("");
+            }
+        } */
+    };
+
+    let filtered_todos = create_memo::<Vec<Todo>>(move |_| {
+        todos.with(|todos| match mode.get() {
+            Mode::All => todos.0.to_vec(),
+            Mode::Active => todos
+                .0
+                .iter()
+                .filter(|todo| !todo.completed.get())
+                .cloned()
+                .collect(),
+            Mode::Completed => todos
+                .0
+                .iter()
+                .filter(|todo| todo.completed.get())
+                .cloned()
+                .collect(),
+        })
+    });
+
+    // effect to serialize to JSON
+    // this does reactive reads, so it will automatically serialize on any relevant change
+    create_effect(move |_| {
+        ()
+        /* if let Ok(Some(storage)) = window().local_storage() {
+            let objs = todos
+                .get()
+                .0
+                .iter()
+                .map(TodoSerialized::from)
+                .collect::<Vec<_>>();
+            let json = json::to_string(&objs);
+            if storage.set_item(STORAGE_KEY, &json).is_err() {
+                log::error!("error while trying to set item in localStorage");
+            }
+        } */
+    });
+
+    view! {
+        <main>
+            <section class="todoapp">
+                <header class="header">
+                    <h1>"todos"</h1>
+                    <input
+                        class="new-todo"
+                        placeholder="What needs to be done?"
+                        autofocus=""
+                    />
+                </header>
+                <section class="main" class:hidden=move || todos.with(|t| t.is_empty())>
+                    <input
+                        id="toggle-all"
+                        class="toggle-all"
+                        r#type="checkbox"
+                        //prop:checked=move || todos.with(|t| t.remaining() > 0)
+                        on:input=move |_| set_todos.update(|t| t.toggle_all())
+                    />
+                    <label r#for="toggle-all">"Mark all as complete"</label>
+                    <ul class="todo-list">
+                        {filtered_todos.get().into_iter().map(Todo).collect::<Vec<_>>()}
+                    </ul>
+                </section>
+                <footer class="footer" class:hidden=move || todos.with(|t| t.is_empty())>
+                    <span class="todo-count">
+                        <strong>{move || todos.with(|t| t.remaining().to_string())}</strong>
+                        {move || if todos.with(|t| t.remaining()) == 1 { " item" } else { " items" }}
+                        " left"
+                    </span>
+                    <ul class="filters">
+                        <li>
+                            <a
+                                href="#/"
+                                class="selected"
+                                class:selected=move || mode() == Mode::All
+                            >
+                                "All"
+                            </a>
+                        </li>
+                        <li>
+                            <a href="#/active" class:selected=move || mode() == Mode::Active>
+                                "Active"
+                            </a>
+                        </li>
+                        <li>
+                            <a href="#/completed" class:selected=move || mode() == Mode::Completed>
+                                "Completed"
+                            </a>
+                        </li>
+                    </ul>
+                    <button
+                        class="clear-completed hidden"
+                        class:hidden=move || todos.with(|t| t.completed() == 0)
+                        on:click=move |_| set_todos.update(|t| t.clear_completed())
+                    >
+                        "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>
+    }
+}
+
+pub fn Todo(todo: Todo) -> impl Render {
+    let (editing, set_editing) = create_signal(false);
+    let set_todos = use_context::<WriteSignal<Todos>>().unwrap();
+    //let input = NodeRef::new();
+
+    let save = move |value: &str| {
+        let value = value.trim();
+        if value.is_empty() {
+            set_todos.update(|t| t.remove(todo.id));
+        } else {
+            (todo.set_title)(value.to_string());
+        }
+        set_editing(false);
+    };
+
+    view! {
+        <li class="todo" class:editing=editing class:completed=move || (todo.completed)()>
+            /* <div class="view">
+                <input class="toggle" r#type="checkbox"/>
+                <label on:dblclick=move |_| set_editing(true)>{move || todo.title.get()}</label>
+                <button
+                    class="destroy"
+                    on:click=move |_| set_todos.update(|t| t.remove(todo.id))
+                ></button>
+            </div>
+            {move || {
+                editing()
+                    .then(|| {
+                        view! {
+                            <input
+                                class="edit"
+                                class:hidden=move || !(editing)()
+                            />
+                        }
+                    })
+            }} */
+        </li>
+    }
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum Mode {
+    Active,
+    Completed,
+    All,
+}
+
+impl Default for Mode {
+    fn default() -> Self {
+        Mode::All
+    }
+}
+
+pub fn route(hash: &str) -> Mode {
+    match hash {
+        "/active" => Mode::Active,
+        "/completed" => Mode::Completed,
+        _ => Mode::All,
+    }
+}
+
+#[derive(Serialize, Deserialize)]
+pub struct TodoSerialized {
+    pub id: usize,
+    pub title: String,
+    pub completed: bool,
+}
+
+impl TodoSerialized {
+    pub fn into_todo(self) -> Todo {
+        Todo::new_with_completed(self.id, self.title, self.completed)
+    }
+}
+
+impl From<&Todo> for TodoSerialized {
+    fn from(todo: &Todo) -> Self {
+        Self {
+            id: todo.id,
+            title: todo.title.get(),
+            completed: (todo.completed)(),
+        }
+    }
+}

benchmarks/src/todomvc/tera.rs

@@ -87,7 +87,7 @@ static TEMPLATE: &str = r#"<main>
         </main>"#;
 
 #[bench]
-fn tera_todomvc(b: &mut Bencher) {
+fn tera_todomvc_ssr(b: &mut Bencher) {
     use serde::{Deserialize, Serialize};
     use tera::*;
 
@@ -127,7 +127,7 @@ fn tera_todomvc(b: &mut Bencher) {
 }
 
 #[bench]
-fn tera_todomvc_1000(b: &mut Bencher) {
+fn tera_todomvc_ssr_1000(b: &mut Bencher) {
     use serde::{Deserialize, Serialize};
     use tera::*;
 
@@ -174,4 +174,4 @@ fn tera_todomvc_1000(b: &mut Bencher) {
 
         let _ = TERA.render("template.html", &ctx).unwrap();
     });
-}
+}

docs/book/src/01_introduction.md

@@ -1,20 +1,22 @@
 # Introduction
 
-This book is intended as an introduction to the [Leptos](https://github.com/leptos-rs/leptos) Web framework. 
-It will walk through the fundamental concepts you need to build applications, 
+This book is intended as an introduction to the [Leptos](https://github.com/leptos-rs/leptos) Web framework.
+It will walk through the fundamental concepts you need to build applications,
 beginning with a simple application rendered in the browser, and building toward a
 full-stack application with server-side rendering and hydration.
 
-The guide doesn’t assume you know anything about fine-grained reactivity or the 
-details of modern Web frameworks. It does assume you are familiar with the Rust 
+The guide doesn’t assume you know anything about fine-grained reactivity or the
+details of modern Web frameworks. It does assume you are familiar with the Rust
 programming language, HTML, CSS, and the DOM and basic Web APIs.
 
-Leptos is most similar to frameworks like [Solid](https://www.solidjs.com) (JavaScript) 
-and [Sycamore](https://sycamore-rs.netlify.app/) (Rust). There are some similarities 
-to other frameworks like React (JavaScript), Svelte (JavaScript), Yew (Rust), and 
-Dioxus (Rust), so knowledge of one of those frameworks may also make it easier to 
+Leptos is most similar to frameworks like [Solid](https://www.solidjs.com) (JavaScript)
+and [Sycamore](https://sycamore-rs.netlify.app/) (Rust). There are some similarities
+to other frameworks like React (JavaScript), Svelte (JavaScript), Yew (Rust), and
+Dioxus (Rust), so knowledge of one of those frameworks may also make it easier to
 understand Leptos.
 
 You can find more detailed docs for each part of the API at [Docs.rs](https://docs.rs/leptos/latest/leptos/).
 
+**Important Note**: This current version of the book reflects the upcoming `0.5.0` release, which you can install as version `0.5.0-rc3`. The CodeSandbox versions of the examples still reflect `0.4` and earlier APIs and are in the process of being updated.
+
 > The source code for the book is available [here](https://github.com/leptos-rs/leptos/tree/main/docs/book). PRs for typos or clarification are always welcome.

docs/book/src/02_getting_started.md

@@ -23,13 +23,15 @@ cargo init leptos-tutorial
 `cd` into your new `leptos-tutorial` project and add `leptos` as a dependency
 
 ```bash
-cargo add leptos --features=csr,nightly
+cargo add leptos@0.5.0-rc3 --features=csr,nightly
 ```
 
+> **Note**: This version of the book reflects the upcoming Leptos 0.5.0 release. The CodeSandbox examples have not yet been updated from 0.4 and earlier versions.
+
 Or you can leave off `nightly` if you're using stable Rust
 
 ```bash
-cargo add leptos --features=csr
+cargo add leptos@0.5.0-rc3 --features=csr
 ```
 
 > Using `nightly` Rust, and the `nightly` feature in Leptos enables the function-call syntax for signal getters and setters that is used in most of this book.

docs/book/src/SUMMARY.md

@@ -47,3 +47,4 @@
 - [Deployment](./deployment.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

@@ -0,0 +1,49 @@
+# A Running List of Small Developer Experience Improvements
+
+## Autocompletion inside `#[component]` and `#[server]`
+
+Because of the nature of macros (they can expand from anything to anything, but only if the input is exactly correct at that instant) it can be hard for rust-analyzer to do proper autocompletion and other support.
+
+But you can tell rust-analyzer to ignore certain proc macros. For `#[component]` and `#[server]` especially, which annotate function bodies but don't actually transform anything inside the body of your function, this can be really helpful.
+
+Note that this means that rust-analyzer doesn't know about your component props, which may generate its own set of errors or warnings in the IDE.
+
+VSCode `settings.json`:
+
+```json
+"rust-analyzer.procMacro.ignored": {
+	"leptos_macro": [
+		"server",
+		"component"
+	],
+}
+```
+
+neovim with lspconfig:
+
+```lua
+require('lspconfig').rust_analyzer.setup {
+  -- Other Configs ...
+  settings = {
+    ["rust-analyzer"] = {
+      -- Other Settings ...
+      procMacro = {
+        ignored = {
+            leptos_macro = {
+                "server",
+                "component",
+            },
+        },
+      },
+    },
+  }
+}
+```
+
+Helix, in `.helix/languages.toml`:
+
+```toml
+[[language]]
+name = "rust"
+config = { procMacro = {ignored = {leptos_macro = ["component"]}}}
+```

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

@@ -89,7 +89,7 @@ view! {
         // `future` provides the `Future` to be resolved
         future=|| fetch_monkeys(3)
         // the data is bound to whatever variable name you provide
-        bind:data
+        let:data
     >
         // you receive the data by reference and can use it in your view here
         <p>{*data} " little monkeys, jumping on the bed."</p>

docs/book/src/interlude_projecting_children.md

@@ -89,7 +89,7 @@ We can solve this problem by using the [`store_value`](https://docs.rs/leptos/la
 In this case, it’s really simple:
 
 ```rust
-pub fn LoggedIn<F, IV>(F, children: ChildrenFn) -> impl IntoView
+pub fn LoggedIn<F, IV>(fallback: F, children: ChildrenFn) -> impl IntoView
 where
     F: Fn() -> IV + 'static,
     IV: IntoView,

docs/book/src/metadata.md

@@ -30,13 +30,13 @@ There’s a very simple way to determine whether you should use a capital-S `<Sc
 
 There are even a couple elements designed to make semantic HTML and styling easier. [`<Html/>`](https://docs.rs/leptos_meta/latest/leptos_meta/fn.Html.html) lets you set the `lang` and `dir` on your `<html>` tag from your application code. `<Html/>` and [`<Body/>`](https://docs.rs/leptos_meta/latest/leptos_meta/fn.Html.html) both have `class` props that let you set their respective `class` attributes, which is sometimes needed by CSS frameworks for styling.
 
-`<Body/>` and `<Html/>` both also have `attributes` props which can be used to set any number of additional attributes on them via the [`AdditionalAttributes`](https://docs.rs/leptos/latest/leptos/struct.AdditionalAttributes.html) type:
+`<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:
 
 ```rust
 <Html
 	lang="he"
 	dir="rtl"
-	attributes=AdditionalAttributes::from(vec![("data-theme", "dark")])
+	attr:data-theme="dark"
 />
 ```
 

docs/book/src/reactivity/working_with_signals.md

@@ -65,6 +65,34 @@ if names.with(Vec::is_empty) {
 
 After all, `.with()` simply takes a function that takes the value by reference. Since `Vec::is_empty` takes `&self`, we can pass it in directly and avoid the unnecessary closure.
 
+There are some helper macros to make using `.with()` and `.update()` easier to use, especially when using multiple signals.
+
+```rust
+let (first, _) = create_signal("Bob".to_string());
+let (middle, _) = create_signal("J.".to_string());
+let (last, _) = create_signal("Smith".to_string());
+```
+
+If you wanted to concatenate these 3 signals together without unnecessary cloning, you would have to write something like:
+
+```rust
+let name = move || {
+	first.with(|first| {
+		middle.with(|middle| last.with(|last| format!("{first} {middle} {last}")))
+	})
+};
+```
+
+Which is very long and annoying to write.
+
+Instead, you can use the `with!` macro to get references to all the signals at the same time.
+
+```rust
+let name = move || with!(|first, middle, last| format!("{first} {middle} {last}"));
+```
+
+This expands to the same thing as above. Take a look at the `with!` docs for more info, and the corresponding macros `update!`, `with_value!` and `update_value!`.
+
 ## Making signals depend on each other
 
 Often people ask about situations in which some signal needs to change based on some other signal’s value. There are three good ways to do this, and one that’s less than ideal but okay under controlled circumstances.
@@ -80,8 +108,8 @@ let memoized_double_count = create_memo(move |_| count() * 2);
 ```
 
 > For guidance on whether to use a derived signal or a memo, see the docs for [`create_memo`](https://docs.rs/leptos/latest/leptos/fn.create_memo.html)
->
-> **2) C is a function of A and some other thing B.** Create signals for A and B and a derived signal or memo for C.
+
+**2) C is a function of A and some other thing B.** Create signals for A and B and a derived signal or memo for C.
 
 ```rust
 let (first_name, set_first_name) = create_signal("Bridget".to_string());

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

@@ -101,3 +101,44 @@ Now if you navigate to `/` or to `/users` you’ll get the home page or the `<Us
 Note that you can define your routes in any order. The router scores each route to see how good a match it is, rather than simply trying to match them top to bottom.
 
 Simple enough?
+
+## Conditional Routes
+
+`leptos_router` is based on the assumption that you have one and only one `<Routes/>` component in your app. It uses this to generate routes on the server side, optimize route matching by caching calculated branches, and render your application.
+
+You should not conditionally render `<Routes/>` using another component like `<Show/>` or `<Suspense/>`.
+
+```rust
+// ❌ don't do this!
+view! {
+  <Show when=|| is_loaded() fallback=|| view! { <p>"Loading"</p> }>
+    <Routes>
+      <Route path="/" view=Home/>
+    </Routes>
+  </Show>
+}
+```
+
+Instead, you can use nested routing to render your `<Routes/>` once, and conditionally render the router outlet:
+
+```rust
+// ✅ do this instead!
+view! {
+  <Routes>
+    // parent route
+    <Route path="/" view=move || {
+      view! {
+        // only show the outlet if data have loaded
+        <Show when=|| is_loaded() fallback=|| view! { <p>"Loading"</p> }>
+          <Outlet/>
+        </Show>
+      }
+    }>
+      // nested child route
+      <Route path="/" view=Home/>
+    </Route>
+  </Routes>
+}
+```
+
+If this looks bizarre, don’t worry! The next section of the book is about this kind of nested routing.

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

@@ -143,8 +143,8 @@ pub fn ContactList() -> impl IntoView {
       // the contact list
       <For each=contacts
         key=|contact| contact.id
-        view=|contact| todo!()
-      >
+        children=|contact| todo!()
+      />
       // the nested child, if any
       // don’t forget this!
       <Outlet/>
@@ -153,6 +153,43 @@ pub fn ContactList() -> impl IntoView {
 }
 ```
 
+## Refactoring Route Definitions
+
+You don’t need to define all your routes in one place if you don’t want to. You can refactor any `<Route/>` and its children out into a separate component.
+
+For example, you can refactor the example above to use two separate components:
+
+```rust
+#[component]
+fn App() -> impl IntoView {
+  view! {
+    <Router>
+      <Routes>
+        <Route path="/contacts" view=ContactList>
+          <ContactInfoRoutes/>
+          <Route path="" view=|| view! {
+            <p>"Select a contact to view more info."</p>
+          }/>
+        </Route>
+      </Routes>
+    </Router>
+  }
+}
+
+#[component(transparent)]
+fn ContactInfoRoutes() -> impl IntoView {
+  view! {
+    <Route path=":id" view=ContactInfo>
+      <Route path="" view=EmailAndPhone/>
+      <Route path="address" view=Address/>
+      <Route path="messages" view=Messages/>
+    </Route>
+  }
+}
+```
+
+This second component is a `#[component(transparent)]`, meaning it just returns its data, not a view: in this case, it's a [`RouteDefinition`](https://docs.rs/leptos_router/latest/leptos_router/struct.RouteDefinition.html) struct, which is what the `<Route/>` returns. As long as it is marked `#[component(transparent)]`, this sub-route can be defined wherever you want, and inserted as a component into your tree of route definitions.
+
 ## Nested Routing and Performance
 
 All of this is nice, conceptually, but again—what’s the big deal?

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

@@ -8,12 +8,12 @@ If you’ve ever listened to streaming music or watched a video online, I’m su
 
 Let me say a little more about what I mean.
 
-Leptos supports all four different modes of rendering HTML that includes asynchronous data:
+Leptos supports all the major ways of rendering HTML that includes asynchronous data:
 
 1. [Synchronous Rendering](#synchronous-rendering)
 1. [Async Rendering](#async-rendering)
 1. [In-Order streaming](#in-order-streaming)
-1. [Out-of-Order Streaming](#out-of-order-streaming)
+1. [Out-of-Order Streaming](#out-of-order-streaming) (and a partially-blocked variant)
 
 ## Synchronous Rendering
 
@@ -67,7 +67,7 @@ If you’re using server-side rendering, the synchronous mode is almost never wh
   - Able to show the fallback loading state and dynamically replace it, instead of showing blank sections for un-loaded data.
 - _Cons_: Requires JavaScript to be enabled for suspended fragments to appear in correct order. (This small chunk of JS streamed down in a `<script>` tag alongside the `<template>` tag that contains the rendered `<Suspense/>` fragment, so it does not need to load any additional JS files.)
 
-5. **Partially-blocked streaming**: “Partially-blocked” streaming is useful when you have multiple separate `<Suspense/>` components on the page. If one of them reads from one or more “blocking resources” (see below), the fallback will not be sent; rather, the server will wait until that `<Suspense/>` has resolved and then replace the fallback with the resolved fragment on the server, which means that it is included in the initial HTML response and appears even if JavaScript is disabled or not supported. Other `<Suspense/>` stream in out of order as usual.
+5. **Partially-blocked streaming**: “Partially-blocked” streaming is useful when you have multiple separate `<Suspense/>` components on the page.  It is triggered by setting `ssr=SsrMode::PartiallyBlocked` on a route, and depending on blocking resources within the view.   If one of the `<Suspense/>` components reads from one or more “blocking resources” (see below), the fallback will not be sent; rather, the server will wait until that `<Suspense/>` has resolved and then replace the fallback with the resolved fragment on the server, which means that it is included in the initial HTML response and appears even if JavaScript is disabled or not supported. Other `<Suspense/>` stream in out of order, similar to the `SsrMode::OutOfOrder` default.
 
 This is useful when you have multiple `<Suspense/>` on the page, and one is more important than the other: think of a blog post and comments, or product information and reviews. It is _not_ useful if there’s only one `<Suspense/>`, or if every `<Suspense/>` reads from blocking resources. In those cases it is a slower form of `async` rendering.
 
@@ -134,4 +134,23 @@ pub fn BlogPost() -> impl IntoView {
 }
 ```
 
-The first `<Suspense/>`, with the body of the blog post, will block my HTML stream, because it reads from a blocking resource. The second `<Suspense/>`, with the comments, will not block the stream. Blocking resources gave me exactly the power and granularity I needed to optimize my page for SEO and user experience.
+The first `<Suspense/>`, with the body of the blog post, will block my HTML stream, because it reads from a blocking resource.  Meta tags and other head elements awaiting the blocking resource will be rendered before the stream is sent.
+
+Combined with the following route definition, which uses `SsrMode::PartiallyBlocked`, the blocking resource will be fully rendered on the server side, making it accessible to users who disable WebAssembly or JavaScript.
+
+```rust
+<Routes>
+	// We’ll load the home page with out-of-order streaming and <Suspense/>
+	<Route path="" view=HomePage/>
+
+	// We'll load the posts with async rendering, so they can set
+	// the title and metadata *after* loading the data
+	<Route
+		path="/post/:id"
+		view=Post
+		ssr=SsrMode::PartiallyBlocked
+	/>
+</Routes>
+```
+
+The second `<Suspense/>`, with the comments, will not block the stream. Blocking resources gave me exactly the power and granularity I needed to optimize my page for SEO and user experience.

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

@@ -87,43 +87,6 @@ The WASM version of your app, running in the browser, expects to find three item
 
 It’s pretty rare that you do this intentionally, but it could happen from somehow running different logic on the server and in the browser. If you’re seeing warnings like this and you don’t think it’s your fault, it’s much more likely that it’s a bug with `<Suspense/>` or something. Feel free to go ahead and open an [issue](https://github.com/leptos-rs/leptos/issues) or [discussion](https://github.com/leptos-rs/leptos/discussions) on GitHub for help.
 
-### Mutating the DOM during rendering
-
-This is a slightly more common way to create a client/server mismatch: updating a signal _during rendering_ in a way that mutates the view.
-
-```rust
-#[component]
-pub fn App() -> impl IntoView {
-    let (loaded, set_loaded) = create_signal(false);
-
-    // create_effect only runs on the client
-    create_effect(move |_| {
-        // do something like reading from localStorage
-        set_loaded(true);
-    });
-
-    move || {
-        if loaded() {
-            view! { <p>"Hello, world!"</p> }.into_any()
-        } else {
-            view! { <div class="loading">"Loading..."</div> }.into_any()
-        }
-    }
-}
-```
-
-This one gives us the scary panic
-
-```
-panicked at 'assertion failed: `(left == right)`
-  left: `"DIV"`,
- right: `"P"`: SSR and CSR elements have the same hydration key but different node kinds.
-```
-
-And a handy link to this page!
-
-The problem here is that `create_effect` runs **immediately** and **synchronously**, but only in the browser. As a result, on the server, `loaded` is false, and a `<div>` is rendered. But on the browser, by the time the view is being rendered, `loaded` has already been set to `true`, and the browser is expecting to find a `<p>`.
-
 #### Solution
 
 You can simply tell the effect to wait a tick before updating the signal, by using something like `request_animation_frame`, which will set a short timeout and then update the signal before the next frame.

examples/Makefile.toml

@@ -41,7 +41,7 @@ workspace = false
 description = "Generate the list of workspace members"
 script = '''
 examples=$(ls | 
-grep -v README.md | 
+grep -v .md | 
 grep -v Makefile.toml | 
 grep -v cargo-make | 
 grep -v gtk | 

examples/README.md

@@ -1,7 +1,45 @@
-# Examples
+# Examples README
+
+## Main Branch
 
 The examples in this directory are all built and tested against the current `main` branch.
 
-To the extent that new features have been released or breaking changes have been made since the previous release, the examples are compatible with the `main` branch and not the current release.
+To the extent that new features have been released or breaking changes have been made since the previous release, the examples are compatible with the `main` branch but not the current release.
 
-To see the examples as they were at the time of the `0.3.0` release, [click here](https://github.com/leptos-rs/leptos/tree/v0.3.0/examples).
+To see the examples as they were at the time of the `0.4.9` release, [click here](https://github.com/leptos-rs/leptos/tree/v0.4.9/examples).
+
+## Cargo Make
+
+[Cargo Make](https://sagiegurari.github.io/cargo-make/) is used to build, test, and run examples.
+
+Here are the highlights.
+
+- Extendable custom task files are located in the [cargo-make](./cargo-make/) directory
+- Running a task will automatically install `cargo` dependencies 
+- Each `Makefile.toml` file must extend the [cargo-make/main.toml](./cargo-make/main.toml) file
+- [cargo-make](./cargo-make/) files that end in `*-test.toml` configure web testing strategies
+- Run `cargo make test-report` to learn which examples have web tests
+
+## Getting Started
+
+Follow these steps to get any example up and running.
+
+1. `cd` to the example root directory
+2. Run `cargo make ci` to setup and test the example
+3. Run `cargo make start` to run the example
+4. Open the client URL in the console output (<http://127.0.0.1:8080> or <http://127.0.0.1:3000> by default)
+
+## Prerequisites
+
+Example projects depend on the following tools. Please install them as needed.
+
+- [Rust](https://www.rust-lang.org/)
+- Nightly Rust
+  - Run `rustup toolchain install nightly`
+  - Run `rustup target add wasm32-unknown-unknown`
+- [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_**)
+- [Node Version Manager](https://github.com/nvm-sh/nvm/) (**_Optional_**)
+- [Node.js](https://nodejs.org/)
+- [pnpm](https://pnpm.io/) (**_Optional_**)

examples/SSR_NOTES.md

@@ -0,0 +1,68 @@
+# Server Side Rendering
+
+## Cargo Leptos
+
+cargo-leptos is now the easiest and most featureful way to build server side rendered apps with hydration. It provides automatic recompilation of client and server code, wasm optimisation, CSS minification, and more! Check out more about it [here](https://github.com/akesson/cargo-leptos)
+
+1. Install cargo-leptos
+
+```bash
+cargo install --locked cargo-leptos
+```
+
+2. Build the site in watch mode, recompiling on file changes
+
+```bash
+cargo leptos watch
+```
+
+Open browser on [http://localhost:3000/](http://localhost:3000/)
+
+3. When ready to deploy, run
+
+```bash
+cargo leptos build --release
+```
+
+## WASM Pack
+
+To run it as a server side app with hydration, you'll need to have wasm-pack installed.
+
+0. Edit the `[package.metadata.leptos]` section and set `site-root` to `"."`. For examples with CSS you also want to change the path of the `<StyleSheet / >` component in the root component to point towards the CSS file in the root. This tells leptos that the WASM/JS files generated by wasm-pack are available at `./pkg` and that the CSS files are no longer processed by cargo-leptos. Building to alternative folders is not supported at this time. You'll also want to edit the call to `get_configuration()` to pass in `Some(Cargo.toml)`, so that Leptos will read the settings instead of cargo-leptos. If you do so, your file/folder names cannot include dashes.
+
+1. Install wasm-pack
+
+```bash
+cargo install wasm-pack
+```
+
+2. Build the Webassembly used to hydrate the HTML from the server
+
+```bash
+wasm-pack build --target=web --debug --no-default-features --features=hydrate
+```
+
+3. Run the server to serve the Webassembly, JS, and HTML
+
+```bash
+cargo run --no-default-features --features=ssr
+```
+
+### Server Side Rendering With Hydration
+
+To run it as a server side app with hydration, first you should run
+
+```bash
+wasm-pack build --target=web --debug --no-default-features --features=hydrate
+```
+
+to generate the WebAssembly to hydrate the HTML delivered from the server.
+
+Then run the server with `cargo run` to serve the server side rendered HTML and the WASM bundle for hydration.
+
+```bash
+cargo run --no-default-features --features=ssr
+```
+
+> Note that if your hydration code changes, you will have to rerun the wasm-pack command above before running
+> `cargo run`

examples/animated_show/Makefile.toml

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

examples/animated_show/README.md

@@ -1,9 +1,10 @@
-# `<AnimatedShow>` combined with CSS animations
+# Animated Show Example
 
 This is a very simple example of the `<AnimatedShow>` component.
 
-This component is an extension for the `<Show>` component and it will not take in a fallback, but it will unmount the
-component from the DOM after a given duration. This makes it possible to have really easy unmount animations with just
+The `<AnimatedShow>` component is an extension for the `<Show>` component and it will not take in a fallback, but it will unmount the component from the DOM after a given duration. This makes it possible to have really easy unmount animations with just
 CSS.
 
-Just execute `trunk serve` to start the demo.
+## Getting Started
+
+See the [Examples README](../README.md) for setup and run instructions.

examples/cargo-make/cargo-leptos.toml

@@ -1,5 +1,3 @@
-extend = { path = "../cargo-make/client-process.toml" }
-
 [tasks.install-cargo-leptos]
 install_crate = { crate_name = "cargo-leptos", binary = "cargo-leptos", test_arg = "--help" }
 
@@ -29,5 +27,6 @@ args = ["check-all-features", "--release"]
 install_crate = "cargo-all-features"
 
 [tasks.start-client]
+dependencies = ["install-cargo-leptos"]
 command = "cargo"
 args = ["leptos", "watch"]

examples/cargo-make/client-process.toml

@@ -23,13 +23,12 @@ condition = { env_set = ["CLIENT_PROCESS_NAME"] }
 script = '''
   if [ -z $(pidof ${CLIENT_PROCESS_NAME}) ]; then
     echo "  Starting ${CLIENT_PROCESS_NAME}"
-    cargo make start-client ${@} & 
+    if [ -z ${SPAWN_CLIENT_PROCESS} ];then
+      cargo make start-client ${@} &
+    else
+      cargo make start-client ${@}
+    fi
   else
     echo "  ${CLIENT_PROCESS_NAME} is already started"
   fi
 '''
-
-# ALIASES
-
-[tasks.dev]
-alias = "maybe-start-client"

examples/cargo-make/main.toml

@@ -1,8 +1,9 @@
 extend = [
-    { path = "../cargo-make/compile.toml" },
-    { path = "../cargo-make/clean.toml" },
-    { path = "../cargo-make/lint.toml" },
-    { path = "../cargo-make/node.toml" },
+    { path = "./compile.toml" },
+    { path = "./clean.toml" },
+    { path = "./lint.toml" },
+    { path = "./node.toml" },
+    { path = "./process.toml" },
 ]
 
 # CI Stages

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

@@ -4,12 +4,9 @@ extend = [
 ]
 
 [tasks.integration-test]
-dependencies = [
-    "maybe-start-client",
-    "wait-one",
-    "test-playwright",
-    "stop-client",
-]
+description = "Run integration test with automated start and stop of processes"
+env = { SPAWN_CLIENT_PROCESS = "1" }
+dependencies = ["start", "wait-one", "test-playwright", "stop"]
 
 [tasks.wait-one]
 script = '''

examples/cargo-make/process.toml

@@ -0,0 +1,13 @@
+extend = [
+    { path = "./client-process.toml" },
+    { path = "./server-process.toml" },
+]
+
+[tasks.start]
+dependencies = ["maybe-start-server", "maybe-start-client"]
+
+[tasks.status]
+dependencies = ["server-status", "client-status"]
+
+[tasks.stop]
+dependencies = ["stop-client", "stop-server"]

examples/cargo-make/server-process.toml

@@ -0,0 +1,34 @@
+[tasks.start-server]
+
+[tasks.stop-server]
+condition = { env_set = ["SERVER_PROCESS_NAME"] }
+script = '''
+  if [ ! -z $(pidof ${SERVER_PROCESS_NAME}) ]; then
+    pkill -ef ${SERVER_PROCESS_NAME}
+  fi
+'''
+
+[tasks.server-status]
+condition = { env_set = ["SERVER_PROCESS_NAME"] }
+script = '''
+  if [ -z $(pidof ${SERVER_PROCESS_NAME}) ]; then
+    echo "  ${SERVER_PROCESS_NAME} is not running"
+  else
+    echo "  ${SERVER_PROCESS_NAME} is up"
+  fi
+'''
+
+[tasks.maybe-start-server]
+condition = { env_set = ["SERVER_PROCESS_NAME"] }
+script = '''
+  YELLOW="\e[0;33m"
+  RESET="\e[0m"
+
+  if [ -z $(pidof ${SERVER_PROCESS_NAME}) ]; then
+    echo "  Starting ${SERVER_PROCESS_NAME}"
+    echo "  ${YELLOW}>> Run cargo make stop to end process${RESET}"
+    cargo make start-server ${@} & 
+  else
+    echo "  ${SERVER_PROCESS_NAME} is already started"
+  fi
+'''

examples/cargo-make/trunk_server.toml

@@ -1,5 +1,3 @@
-extend = { path = "../cargo-make/client-process.toml" }
-
 [env]
 CLIENT_PROCESS_NAME = "trunk"
 

examples/counter/Makefile.toml

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

examples/counter/README.md

@@ -2,6 +2,6 @@
 
 This example creates a simple counter in a client side rendered app with Rust and WASM!
 
-To run it, just issue the `trunk serve --open` command in the example root. This will build the app, run it, and open a new browser to serve it.
+## Getting Started
 
-> If you don't have `trunk` installed, [click here for install instructions.](https://trunkrs.dev/)
+See the [Examples README](../README.md) for setup and run instructions.

examples/counter_isomorphic/Cargo.toml

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

examples/counter_isomorphic/Makefile.toml

@@ -1 +1,8 @@
-extend = [{ path = "../cargo-make/main.toml" }]
+extend = [
+    { path = "../cargo-make/main.toml" },
+    { path = "../cargo-make/cargo-leptos.toml" },
+]
+
+[env]
+
+CLIENT_PROCESS_NAME = "counter_isomorphic"

examples/counter_isomorphic/README.md

@@ -2,42 +2,6 @@
 
 This example demonstrates how to use a function isomorphically, to run a server side function from the browser and receive a result.
 
-## Client Side Rendering
-For this example the server must store the counter state since it can be modified by many users.
-This means it is not possible to produce a working CSR-only version as a non-static server is required.
+## Getting Started
 
-## Server Side Rendering with cargo-leptos
-cargo-leptos is now the easiest and most featureful way to build server side rendered apps with hydration. It provides automatic recompilation of client and server code, wasm optimisation, CSS minification, and more! Check out more about it [here](https://github.com/akesson/cargo-leptos)
-
-1. Install cargo-leptos
-```bash
-cargo install --locked cargo-leptos
-``` 
-2. Build the site in watch mode, recompiling on file changes
-```bash
-cargo leptos watch
-```
-
-Open browser on [http://localhost:3000/](http://localhost:3000/)
-
-3. When ready to deploy, run
-```bash
-cargo leptos build --release
-```
-
-## Server Side Rendering without cargo-leptos
-To run it as a server side app with hydration, you'll need to have wasm-pack installed.
-
-0. Edit the `[package.metadata.leptos]` section and set `site-root` to `"."`. For examples with CSS you also want to change the path of the `<StyleSheet / >` component in the root component to point towards the CSS file in the root. This tells leptos that the WASM/JS files generated by wasm-pack are available at `./pkg` and that the CSS files are no longer processed by cargo-leptos. Building to alternative folders is not supported at this time. You'll also want to edit the call to `get_configuration()` to pass in `Some(Cargo.toml)`, so that Leptos will read the settings instead of cargo-leptos. If you do so, your file/folder names cannot include dashes.
-1. Install wasm-pack
-```bash
-cargo install wasm-pack
-```
-2. Build the Webassembly used to hydrate the HTML from the server
-```bash
-wasm-pack build --target=web --debug --no-default-features --features=hydrate
-```
-3. Run the server to serve the Webassembly, JS, and HTML 
-```bash
-cargo run --no-default-features --features=ssr
-```
+See the [Examples README](../README.md) for setup and run instructions.

examples/counter_url_query/Makefile.toml

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

examples/counter_url_query/README.md

@@ -2,6 +2,6 @@
 
 This example creates a simple counter whose state is persisted and synced in the url with query params.
 
-To run it, just issue the `trunk serve --open` command in the example root. This will build the app, run it, and open a new browser to serve it.
+## Getting Started
 
-> If you don't have `trunk` installed, [click here for install instructions.](https://trunkrs.dev/)
+See the [Examples README](../README.md) for setup and run instructions.

examples/counter_without_macros/Makefile.toml

@@ -1,6 +1,7 @@
 extend = [
     { path = "../cargo-make/main.toml" },
     { path = "../cargo-make/wasm-test.toml" },
+    { path = "../cargo-make/trunk_server.toml" },
 ]
 
 [tasks.build]

examples/counter_without_macros/README.md

@@ -2,6 +2,6 @@
 
 This example is the same like the `counter` but it's written without using macros and can be build with stable Rust.
 
-To run it, just issue the `trunk serve --open` command in the example root. This will build the app, run it, and open a new browser to serve it.
+## Getting Started
 
-Issue the `cargo make test-flow` command to run unit and wasm tests.
+See the [Examples README](../README.md) for setup and run instructions.

examples/counters/Makefile.toml

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

examples/counters/README.md

@@ -2,8 +2,6 @@
 
 This example showcases a basic leptos app with many counters. It is a good example of how to setup a basic reactive app with signals and effects, and how to interact with browser events.
 
-## Client Side Rendering
+## Getting Started
 
-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.
-
-> If you don't have `trunk` installed, [click here for install instructions.](https://trunkrs.dev/)
+See the [Examples README](../README.md) for setup and run instructions.

examples/counters/src/lib.rs

@@ -65,7 +65,7 @@ pub fn Counters() -> impl IntoView {
                 <For
                     each=counters
                     key=|counter| counter.0
-                    view=move |(id, (value, set_value)): (usize, (ReadSignal<i32>, WriteSignal<i32>))| {
+                    children=move |(id, (value, set_value)): (usize, (ReadSignal<i32>, WriteSignal<i32>))| {
                         view! {
                             <Counter id value set_value/>
                         }
@@ -88,9 +88,17 @@ fn Counter(
         set_value(event_target_value(&ev).parse::<i32>().unwrap_or_default())
     };
 
-    // just an example of how a cleanup function works
     // this will run when the scope is disposed, i.e., when this row is deleted
-    on_cleanup(|| log::debug!("deleted a row"));
+    // because the signal was created in the parent scope, it won't be disposed
+    // of until the parent scope is. but we no longer need it, so we'll dispose of
+    // it when this row is deleted, instead. if we don't dispose of it here,
+    // this memory will "leak," i.e., the signal will continue to exist until the
+    // parent component is removed. in the case of this component, where it's the
+    // root, that's the lifetime of the program.
+    on_cleanup(move || {
+        log::debug!("deleted a row");
+        value.dispose();
+    });
 
     view! {
         <li>

examples/counters_stable/README.md

@@ -2,8 +2,6 @@
 
 This example showcases a basic Leptos app with many counters. It is a good example of how to setup a basic reactive app with signals and effects, and how to interact with browser events. Unlike the other counters example, it will compile on Rust stable, because it has the `stable` feature enabled.
 
-## Client Side Rendering
+## Getting Started
 
-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.
-
-> If you don't have `trunk` installed, [click here for install instructions.](https://trunkrs.dev/)
+See the [Examples README](../README.md) for setup and run instructions.

examples/counters_stable/src/lib.rs

@@ -67,7 +67,7 @@ pub fn Counters() -> impl IntoView {
                 <For
                     each={move || counters.get()}
                     key={|counter| counter.0}
-                    view=move |(id, (value, set_value))| {
+                    children=move |(id, (value, set_value))| {
                         view! {
                             <Counter id value set_value/>
                         }
@@ -91,6 +91,18 @@ fn Counter(
             .set(event_target_value(&ev).parse::<i32>().unwrap_or_default())
     };
 
+    // this will run when the scope is disposed, i.e., when this row is deleted
+    // because the signal was created in the parent scope, it won't be disposed
+    // of until the parent scope is. but we no longer need it, so we'll dispose of
+    // it when this row is deleted, instead. if we don't dispose of it here,
+    // this memory will "leak," i.e., the signal will continue to exist until the
+    // parent component is removed. in the case of this component, where it's the
+    // root, that's the lifetime of the program.
+    on_cleanup(move || {
+        log::debug!("deleted a row");
+        value.dispose();
+    });
+
     view! {
         <li>
             <button data-testid="decrement_count" on:click=move |_| set_value.update(move |value| *value -= 1)>"-1"</button>

examples/error_boundary/README.md

@@ -2,6 +2,10 @@
 
 This example shows how to handle basic errors using Leptos.
 
-To run it, just issue the `trunk serve --open` command in the example root. This will build the app, run it, and open a new browser to serve it.
+## Getting Started
 
-> If you don't have `trunk` installed, [click here for install instructions.](https://trunkrs.dev/)
+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.

examples/errors_axum/Makefile.toml

@@ -1 +1,8 @@
-extend = [{ path = "../cargo-make/main.toml" }]
+extend = [
+    { path = "../cargo-make/main.toml" },
+    { path = "../cargo-make/cargo-leptos.toml" },
+]
+
+[env]
+
+CLIENT_PROCESS_NAME = "errors_axum"

examples/errors_axum/README.md

@@ -1,41 +1,7 @@
 # Leptos Errors Demonstration with Axum
+
 This example demonstrates how Leptos Errors can work with an Axum backend on a server.
 
-## Client Side Rendering
-This example cannot be built as a trunk standalone CSR-only app as it requires the server to send status codes.
+## Getting Started
 
-## Server Side Rendering with cargo-leptos
-cargo-leptos is now the easiest and most featureful way to build server side rendered apps with hydration. It provides automatic recompilation of client and server code, wasm optimisation, CSS minification, and more! Check out more about it [here](https://github.com/akesson/cargo-leptos)
-
-1. Install cargo-leptos
-```bash
-cargo install --locked cargo-leptos
-``` 
-2. Build the site in watch mode, recompiling on file changes
-```bash
-cargo leptos watch
-```
-
-Open browser on [http://localhost:3000/](http://localhost:3000/)
-
-3. When ready to deploy, run
-```bash
-cargo leptos build --release
-```
-
-## Server Side Rendering without cargo-leptos
-To run it as a server side app with hydration, you'll need to have wasm-pack installed.
-
-0. Edit the `[package.metadata.leptos]` section and set `site-root` to `"."`. You'll also want to change the path of the `<StyleSheet / >` component in the root component to point towards the CSS file in the root. This tells leptos that the WASM/JS files generated by wasm-pack are available at `./pkg` and that the CSS files are no longer processed by cargo-leptos. Building to alternative folders is not supported at this time. You'll also want to edit the call to `get_configuration()` to pass in `Some(Cargo.toml)`, so that Leptos will read the settings instead of cargo-leptos. If you do so, your file/folder names cannot include dashes.
-1. Install wasm-pack
-```bash
-cargo install wasm-pack
-```
-2. Build the Webassembly used to hydrate the HTML from the server
-```bash
-wasm-pack build --target=web --debug --no-default-features --features=hydrate
-```
-3. Run the server to serve the Webassembly, JS, and HTML 
-```bash
-cargo run --no-default-features --features=ssr
-```
+See the [Examples README](../README.md) for setup and run instructions.

examples/errors_axum/src/error_template.rs

@@ -45,7 +45,7 @@ pub fn ErrorTemplate(
             // a unique key for each item as a reference
             key=|(index, _)| *index
             // renders each item to a view
-            view=move |error| {
+            children=move |error| {
                 let error_string = error.1.to_string();
                 let error_code= error.1.status_code();
                 view! {

examples/errors_axum/src/main.rs

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

examples/fetch/Makefile.toml

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

examples/fetch/README.md

@@ -2,8 +2,6 @@
 
 This example shows how to fetch data from the client in WebAssembly.
 
-## Client Side Rendering
+## Getting Started
 
-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.
-
-> If you don't have `trunk` installed, [click here for install instructions.](https://trunkrs.dev/)
+See the [Examples README](../README.md) for setup and run instructions.

examples/hackernews/Cargo.toml

@@ -41,6 +41,12 @@ ssr = [
 	"leptos_router/ssr",
 ]
 
+[profile.wasm-release]
+inherits = "release"
+opt-level = 'z'
+lto = true
+codegen-units = 1
+
 [package.metadata.cargo-all-features]
 denylist = ["actix-files", "actix-web", "leptos_actix"]
 skip_feature_sets = [["csr", "ssr"], ["csr", "hydrate"], ["ssr", "hydrate"]]
@@ -88,3 +94,5 @@ lib-features = ["hydrate"]
 #
 # Optional. Defaults to false.
 lib-default-features = false
+
+lib-profile-release = "wasm-release"

examples/hackernews/Makefile.toml

@@ -1 +1,8 @@
-extend = [{ path = "../cargo-make/main.toml" }]
+extend = [
+    { path = "../cargo-make/main.toml" },
+    { path = "../cargo-make/cargo-leptos.toml" },
+]
+
+[env]
+
+CLIENT_PROCESS_NAME = "hackernews"

examples/hackernews/README.md

@@ -2,42 +2,6 @@
 
 This example creates a basic clone of the Hacker News site. It showcases Leptos' ability to create both a client-side rendered app, and a server side rendered app with hydration, in a single repository
 
-## 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`.
+## Getting Started
 
-## Server Side Rendering with cargo-leptos
-cargo-leptos is now the easiest and most featureful way to build server side rendered apps with hydration. It provides automatic recompilation of client and server code, wasm optimisation, CSS minification, and more! Check out more about it [here](https://github.com/akesson/cargo-leptos)
-
-1. Install cargo-leptos
-```bash
-cargo install --locked cargo-leptos
-``` 
-2. Build the site in watch mode, recompiling on file changes
-```bash
-cargo leptos watch
-```
-
-Open browser on [http://localhost:3000/](http://localhost:3000/)
-
-3. When ready to deploy, run
-```bash
-cargo leptos build --release
-```
-
-## Server Side Rendering without cargo-leptos
-To run it as a server side app with hydration, you'll need to have wasm-pack installed.
-
-0. Edit the `[package.metadata.leptos]` section and set `site-root` to `"."`. You'll also want to change the path of the `<StyleSheet / >` component in the root component to point towards the CSS file in the root. This tells leptos that the WASM/JS files generated by wasm-pack are available at `./pkg` and that the CSS files are no longer processed by cargo-leptos. Building to alternative folders is not supported at this time. You'll also want to edit the call to `get_configuration()` to pass in `Some(Cargo.toml)`, so that Leptos will read the settings instead of cargo-leptos. If you do so, your file/folder names cannot include dashes..
-1. Install wasm-pack
-```bash
-cargo install wasm-pack
-```
-2. Build the Webassembly used to hydrate the HTML from the server
-```bash
-wasm-pack build --target=web --debug --no-default-features --features=hydrate
-```
-3. Run the server to serve the Webassembly, JS, and HTML 
-```bash
-cargo run --no-default-features --features=ssr
-```
+See the [Examples README](../README.md) for setup and run instructions.

examples/hackernews/src/api.rs

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

examples/hackernews/src/routes/stories.rs

@@ -41,13 +41,11 @@ pub fn Stories() -> impl IntoView {
     };
 
     view! {
-
         <div class="news-view">
             <div class="news-list-nav">
                 <span>
                     {move || if page() > 1 {
                         view! {
-
                             <a class="page-link"
                                 href=move || format!("/{}?page={}", story_type(), page() - 1)
                                 attr:aria_label="Previous Page"
@@ -57,7 +55,6 @@ pub fn Stories() -> impl IntoView {
                         }.into_any()
                     } else {
                         view! {
-
                             <span class="page-link disabled" aria-hidden="true">
                                 "< prev"
                             </span>
@@ -79,24 +76,22 @@ pub fn Stories() -> impl IntoView {
             <main class="news-list">
                 <div>
                     <Transition
-                        fallback=move || view! {  <p>"Loading..."</p> }
-                        set_pending=set_pending.into()
+                        fallback=move || view! { <p>"Loading..."</p> }
+                        set_pending
                     >
                         {move || match stories.get() {
                             None => None,
-                            Some(None) => Some(view! {  <p>"Error loading stories."</p> }.into_any()),
+                            Some(None) => Some(view! { <p>"Error loading stories."</p> }.into_any()),
                             Some(Some(stories)) => {
                                 Some(view! {
                                     <ul>
                                         <For
                                             each=move || stories.clone()
                                             key=|story| story.id
-                                            view=move |story: api::Story| {
-                                                view! {
-                                                    <Story story/>
-                                                }
-                                            }
-                                        />
+                                            let:story
+                                        >
+                                            <Story story/>
+                                        </For>
                                     </ul>
                                 }.into_any())
                             }
@@ -125,7 +120,7 @@ fn Story(story: api::Story) -> impl IntoView {
                     }.into_view()
                 } else {
                     let title = story.title.clone();
-                    view! {  <A href=format!("/stories/{}", story.id)>{title.clone()}</A> }.into_view()
+                    view! { <A href=format!("/stories/{}", story.id)>{title.clone()}</A> }.into_view()
                 }}
             </span>
             <br />
@@ -134,7 +129,7 @@ fn Story(story: api::Story) -> impl IntoView {
                     view! {
                         <span>
                             {"by "}
-                            {story.user.map(|user| view ! { <A href=format!("/users/{user}")>{user.clone()}</A>})}
+                            {story.user.map(|user| view ! {  <A href=format!("/users/{user}")>{user.clone()}</A>})}
                             {format!(" {} | ", story.time_ago)}
                             <A href=format!("/stories/{}", story.id)>
                                 {if story.comments_count.unwrap_or_default() > 0 {
@@ -147,7 +142,7 @@ fn Story(story: api::Story) -> impl IntoView {
                     }.into_view()
                 } else {
                     let title = story.title.clone();
-                    view! {  <A href=format!("/item/{}", story.id)>{title.clone()}</A> }.into_view()
+                    view! { <A href=format!("/item/{}", story.id)>{title.clone()}</A> }.into_view()
                 }}
             </span>
             {(story.story_type != "link").then(|| view! {

examples/hackernews/src/routes/story.rs

@@ -57,8 +57,10 @@ pub fn Story() -> impl IntoView {
                             <For
                                 each=move || story.comments.clone().unwrap_or_default()
                                 key=|comment| comment.id
-                                view=move |comment| view! {  <Comment comment /> }
-                            />
+                                let:comment
+                            >
+                                <Comment comment />
+                            </For>
                         </ul>
                     </div>
                 </div>
@@ -100,8 +102,10 @@ pub fn Comment(comment: api::Comment) -> impl IntoView {
                                 <For
                                     each=move || comments.clone()
                                     key=|comment| comment.id
-                                    view=move |comment: api::Comment| view! { <Comment comment /> }
-                                />
+                                    let:comment
+                                >
+                                    <Comment comment />
+                                </For>
                             </ul>
                         }
                     })}

examples/hackernews_axum/Makefile.toml

@@ -1 +1,8 @@
-extend = [{ path = "../cargo-make/main.toml" }]
+extend = [
+    { path = "../cargo-make/main.toml" },
+    { path = "../cargo-make/cargo-leptos.toml" },
+]
+
+[env]
+
+CLIENT_PROCESS_NAME = "hackernews_axum"

examples/hackernews_axum/README.md

@@ -2,42 +2,6 @@
 
 This example creates a basic clone of the Hacker News site. It showcases Leptos' ability to create both a client-side rendered app, and a server side rendered app with hydration, in a single repository. This repo differs from the main Hacker News example by using Axum as it's server.
 
-## 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`.
+## Getting Started
 
-## Server Side Rendering with cargo-leptos
-cargo-leptos is now the easiest and most featureful way to build server side rendered apps with hydration. It provides automatic recompilation of client and server code, wasm optimisation, CSS minification, and more! Check out more about it [here](https://github.com/akesson/cargo-leptos)
-
-1. Install cargo-leptos
-```bash
-cargo install --locked cargo-leptos
-``` 
-2. Build the site in watch mode, recompiling on file changes
-```bash
-cargo leptos watch
-```
-
-Open browser on [http://localhost:3000/](http://localhost:3000/)
-
-3. When ready to deploy, run
-```bash
-cargo leptos build --release
-```
-
-## Server Side Rendering without cargo-leptos
-To run it as a server side app with hydration, you'll need to have wasm-pack installed.
-
-0. Edit the `[package.metadata.leptos]` section and set `site-root` to `"."`. You'll also want to change the path of the `<StyleSheet / >` component in the root component to point towards the CSS file in the root. This tells leptos that the WASM/JS files generated by wasm-pack are available at `./pkg` and that the CSS files are no longer processed by cargo-leptos. Building to alternative folders is not supported at this time. You'll also want to edit the call to `get_configuration()` to pass in `Some(Cargo.toml)`, so that Leptos will read the settings instead of cargo-leptos. If you do so, your file/folder names cannot include dashes..
-1. Install wasm-pack
-```bash
-cargo install wasm-pack
-```
-2. Build the Webassembly used to hydrate the HTML from the server
-```bash
-wasm-pack build --target=web --debug --no-default-features --features=hydrate
-```
-3. Run the server to serve the Webassembly, JS, and HTML 
-```bash
-cargo run --no-default-features --features=ssr
-```
+See the [Examples README](../README.md) for setup and run instructions.

examples/hackernews_axum/src/api.rs

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

examples/hackernews_axum/src/error_template.rs

@@ -15,7 +15,7 @@ pub fn error_template(errors: Option<RwSignal<Errors>>) -> View {
           // a unique key for each item as a reference
           key=|(key, _)| key.clone()
           // renders each item to a view
-          view= move | (_, error)| {
+          children=move | (_, error)| {
           let error_string = error.to_string();
             view! {
 

examples/hackernews_axum/src/main.rs

@@ -18,7 +18,7 @@ if #[cfg(feature = "ssr")] {
         let conf = get_configuration(Some("Cargo.toml")).await.unwrap();
         let leptos_options = conf.leptos_options;
         let addr = leptos_options.site_addr;
-        let routes = generate_route_list(|| view! {  <App/> }).await;
+        let routes = generate_route_list(App);
 
         simple_logger::init_with_level(log::Level::Debug).expect("couldn't initialize logging");
 

examples/hackernews_axum/src/routes/stories.rs

@@ -79,7 +79,7 @@ pub fn Stories() -> impl IntoView {
                 <div>
                     <Transition
                         fallback=move || view! { <p>"Loading..."</p> }
-                        set_pending=set_pending.into()
+                        set_pending
                     >
                         {move || match stories.get() {
                             None => None,
@@ -90,12 +90,10 @@ pub fn Stories() -> impl IntoView {
                                         <For
                                             each=move || stories.clone()
                                             key=|story| story.id
-                                            view=move | story: api::Story| {
-                                                view! {
-                                                    <Story story/>
-                                                }
-                                            }
-                                        />
+                                            let:story
+                                        >
+                                            <Story story/>
+                                        </For>
                                     </ul>
                                 }.into_any())
                             }

examples/hackernews_axum/src/routes/story.rs

@@ -57,8 +57,10 @@ pub fn Story() -> impl IntoView {
                             <For
                                 each=move || story.comments.clone().unwrap_or_default()
                                 key=|comment| comment.id
-                                view=move | comment| view! { <Comment comment /> }
-                            />
+                                let:comment
+                            >
+                                <Comment comment />
+                            </For>
                         </ul>
                     </div>
                 </div>
@@ -100,8 +102,10 @@ pub fn Comment(comment: api::Comment) -> impl IntoView {
                                 <For
                                     each=move || comments.clone()
                                     key=|comment| comment.id
-                                    view=move | comment: api::Comment| view! {  <Comment comment /> }
-                                />
+                                    let:comment
+                                >
+                                    <Comment comment />
+                                </For>
                             </ul>
                         }
                     })}

examples/hackernews_islands_axum/.cargo/config.wasm.toml

@@ -0,0 +1,3 @@
+[unstable]
+build-std = ["std", "panic_abort", "core", "alloc"]
+build-std-features = ["panic_immediate_abort"]

examples/hackernews_islands_axum/Cargo.toml

@@ -0,0 +1,108 @@
+[package]
+name = "hackernews_islands"
+version = "0.1.0"
+edition = "2021"
+
+[lib]
+crate-type = ["cdylib", "rlib"]
+
+[profile.release]
+codegen-units = 1
+lto = true
+
+[dependencies]
+console_log = "1.0.0"
+console_error_panic_hook = "0.1.7"
+cfg-if = "1.0.0"
+leptos = { path = "../../leptos", features = [
+  "nightly",
+  "experimental-islands",
+] }
+leptos_axum = { path = "../../integrations/axum", optional = true, features = [
+  "experimental-islands",
+] }
+leptos_meta = { path = "../../meta", features = ["nightly"] }
+leptos_router = { path = "../../router", features = ["nightly"] }
+log = "0.4.17"
+simple_logger = "4.0.0"
+serde = { version = "1.0.148", features = ["derive"] }
+tracing = "0.1"
+gloo-net = { version = "0.2.5", features = ["http"] }
+reqwest = { version = "0.11.13", features = ["json"] }
+axum = { version = "0.6.1", optional = true, features = ["http2"] }
+tower = { version = "0.4.13", optional = true }
+tower-http = { version = "0.4", features = [
+  "fs",
+  "compression-br",
+], optional = true }
+tokio = { version = "1.22.0", features = ["full"], optional = true }
+http = { version = "0.2.8", optional = true }
+web-sys = { version = "0.3", features = ["AbortController", "AbortSignal"] }
+wasm-bindgen = "0.2"
+wee_alloc = "0.4.5"
+lazy_static = "1.4.0"
+
+[features]
+default = []
+csr = ["leptos/csr", "leptos_meta/csr", "leptos_router/csr"]
+hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"]
+ssr = [
+  "dep:axum",
+  "dep:tower",
+  "dep:tower-http",
+  "dep:tokio",
+  "dep:http",
+  "leptos/ssr",
+  "leptos_axum",
+  "leptos_meta/ssr",
+  "leptos_router/ssr",
+]
+
+[package.metadata.cargo-all-features]
+denylist = ["axum", "tower", "tower-http", "tokio", "http", "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 = "hackernews"
+# 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"
+site-addr = "0.0.0.0:8080"
+# 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 = "npx playwright test"
+#  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 = ["hydrate"]
+
+# If the --no-default-features flag should be used when compiling the lib target
+#
+# Optional. Defaults to false.
+lib-default-features = false

examples/hackernews_islands_axum/Dockerfile

@@ -0,0 +1,25 @@
+FROM rustlang/rust:nightly-bullseye as builder
+RUN wget https://github.com/cargo-bins/cargo-binstall/releases/latest/download/cargo-binstall-x86_64-unknown-linux-musl.tgz
+#RUN tar -xvf cargo-binstall-x86_64-unknown-linux-musl.tgz
+#RUN cp cargo-binstall /usr/local/cargo/bin 
+#RUN cargo binstall cargo-leptos -y
+#RUN rustup component add rust-src --toolchain nightly-x86_64-unknown-linux-gnu
+#RUN rustup target add wasm32-unknown-unknown
+RUN mkdir -p /app
+WORKDIR /app
+COPY . .
+RUN cargo build --release --no-default-features --features=ssr
+RUN ls -l /app/target
+
+FROM rustlang/rust:nightly-bullseye as runner
+COPY --from=builder /app/target/release/hackernews /app/
+COPY --from=builder /app/pkg /app
+COPY --from=builder /app/Cargo.toml /app/
+WORKDIR /app
+ENV RUST_LOG="info"
+ENV LEPTOS_OUTPUT_NAME="hackernews"
+ENV APP_ENVIRONMENT="production"
+ENV LEPTOS_SITE_ADDR="0.0.0.0:8080"
+ENV LEPTOS_SITE_ROOT="site"
+EXPOSE 8080
+CMD ["/app/hackernews"]

examples/hackernews_islands_axum/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/hackernews_islands_axum/Makefile.toml

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

examples/hackernews_islands_axum/README.md

@@ -0,0 +1,7 @@
+# Leptos Hacker News Example with Axum
+
+This example creates a basic clone of the Hacker News site. It showcases Leptos' ability to create both a client-side rendered app, and a server side rendered app with hydration, in a single repository. This repo differs from the main Hacker News example by using Axum as it's server.
+
+## Getting Started
+
+See the [Examples README](../README.md) for setup and run instructions.

examples/hackernews_islands_axum/build-front.sh

@@ -0,0 +1,8 @@
+wasm-pack build --target=web --features=hydrate --release
+cd pkg
+rm *.br
+cp hackernews.js hackernews.unmin.js
+cat hackernews.unmin.js | esbuild > hackernews.js
+brotli hackernews.js
+brotli hackernews_bg.wasm
+brotli style.css

examples/hackernews_islands_axum/index.html

@@ -0,0 +1,8 @@
+<!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/hackernews_islands_axum/src/api.rs

@@ -0,0 +1,62 @@
+#![allow(unused)]
+
+use leptos::Serializable;
+use serde::{Deserialize, Serialize};
+
+pub fn story(path: &str) -> String {
+    format!("https://node-hnapi.herokuapp.com/{path}")
+}
+
+pub fn user(path: &str) -> String {
+    format!("https://hacker-news.firebaseio.com/v0/user/{path}.json")
+}
+
+lazy_static::lazy_static! {
+    static ref CLIENT: reqwest::Client = reqwest::Client::new();
+}
+
+#[cfg(feature = "ssr")]
+pub async fn fetch_api<T>(path: &str) -> Option<T>
+where
+    T: Serializable,
+{
+    let json = CLIENT.get(path).send().await.ok()?.text().await.ok()?;
+    T::de(&json).map_err(|e| log::error!("{e}")).ok()
+}
+
+#[derive(Debug, Deserialize, Serialize, PartialEq, Eq, Clone)]
+pub struct Story {
+    pub id: usize,
+    pub title: String,
+    pub points: Option<i32>,
+    pub user: Option<String>,
+    pub time: usize,
+    pub time_ago: String,
+    #[serde(alias = "type")]
+    pub story_type: String,
+    pub url: String,
+    #[serde(default)]
+    pub domain: String,
+    #[serde(default)]
+    pub comments: Option<Vec<Comment>>,
+    pub comments_count: Option<usize>,
+}
+
+#[derive(Debug, Deserialize, Serialize, PartialEq, Eq, Clone)]
+pub struct Comment {
+    pub id: usize,
+    pub level: usize,
+    pub user: Option<String>,
+    pub time: usize,
+    pub time_ago: String,
+    pub content: Option<String>,
+    pub comments: Vec<Comment>,
+}
+
+#[derive(Debug, Deserialize, Serialize, PartialEq, Eq, Clone)]
+pub struct User {
+    pub created: usize,
+    pub id: String,
+    pub karma: i32,
+    pub about: Option<String>,
+}

examples/hackernews_islands_axum/src/error_template.rs

@@ -0,0 +1,28 @@
+use leptos::{view, Errors, For, IntoView, RwSignal, View};
+
+// A basic function to display errors served by the error boundaries. Feel free to do more complicated things
+// here than just displaying them
+pub fn error_template(errors: Option<RwSignal<Errors>>) -> View {
+    let Some(errors) = errors else {
+        panic!("No Errors found and we expected errors!");
+    };
+
+    view! {
+      <h1>"Errors"</h1>
+      <For
+          // a function that returns the items we're iterating over; a signal is fine
+          each=errors
+          // a unique key for each item as a reference
+          key=|(key, _)| key.clone()
+          // renders each item to a view
+          children= move | (_, error)| {
+          let error_string = error.to_string();
+            view! {
+
+              <p>"Error: " {error_string}</p>
+            }
+          }
+      />
+    }
+    .into_view()
+}

examples/hackernews_islands_axum/src/fallback.rs

@@ -0,0 +1,44 @@
+use cfg_if::cfg_if;
+
+cfg_if! {
+if #[cfg(feature = "ssr")] {
+    use axum::{
+        body::{boxed, Body, BoxBody},
+        extract::State,
+        response::IntoResponse,
+        http::{Request, Response, StatusCode, Uri},
+    };
+    use axum::response::Response as AxumResponse;
+    use tower::ServiceExt;
+    use tower_http::services::ServeDir;
+    use leptos::{LeptosOptions};
+    use crate::error_template::error_template;
+
+    pub async fn file_and_error_handler(uri: Uri, State(options): State<LeptosOptions>, req: Request<Body>) -> 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 handler = leptos_axum::render_app_to_stream(options.to_owned(), || error_template( None));
+            handler(req).await.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/hackernews_islands_axum/src/handlers.rs

@@ -0,0 +1,63 @@
+use cfg_if::cfg_if;
+
+cfg_if! {
+if #[cfg(feature = "ssr")] {
+    use axum::{
+        body::{boxed, Body, BoxBody},
+        http::{Request, Response, StatusCode, Uri},
+    };
+    use tower::ServiceExt;
+    use tower_http::services::ServeDir;
+
+    pub async fn file_handler(uri: Uri) -> Result<Response<BoxBody>, (StatusCode, String)> {
+        let res = get_static_file(uri.clone(), "/pkg").await?;
+
+        if res.status() == StatusCode::NOT_FOUND {
+            // try with `.html`
+            // TODO: handle if the Uri has query parameters
+            match format!("{}.html", uri).parse() {
+                Ok(uri_html) => get_static_file(uri_html, "/pkg").await,
+                Err(_) => Err((StatusCode::INTERNAL_SERVER_ERROR, "Invalid URI".to_string())),
+            }
+        } else {
+            Ok(res)
+        }
+    }
+
+    pub async fn get_static_file_handler(uri: Uri) -> Result<Response<BoxBody>, (StatusCode, String)> {
+        let res = get_static_file(uri.clone(), "/static").await?;
+
+        if res.status() == StatusCode::NOT_FOUND {
+          Err((StatusCode::INTERNAL_SERVER_ERROR, "Invalid URI".to_string()))
+        } else {
+            Ok(res)
+        }
+    }
+
+    async fn get_static_file(uri: Uri, base: &str) -> Result<Response<BoxBody>, (StatusCode, String)> {
+        let req = Request::builder().uri(&uri).body(Body::empty()).unwrap();
+
+        // `ServeDir` implements `tower::Service` so we can call it with `tower::ServiceExt::oneshot`
+        // When run normally, the root should be the crate root
+        if base == "/static" {
+            match ServeDir::new("./static").oneshot(req).await {
+                Ok(res) => Ok(res.map(boxed)),
+                Err(err) => Err((
+                    StatusCode::INTERNAL_SERVER_ERROR,
+                    format!("Something went wrong: {}", err),
+                ))
+        }
+        } else if base == "/pkg" {
+            match ServeDir::new("./pkg").oneshot(req).await {
+                Ok(res) => Ok(res.map(boxed)),
+                Err(err) => Err((
+                    StatusCode::INTERNAL_SERVER_ERROR,
+                    format!("Something went wrong: {}", err),
+                )),
+        }
+    } else{
+           Err((StatusCode::NOT_FOUND, "Not Found".to_string()))
+        }
+    }
+    }
+}

examples/hackernews_islands_axum/src/lib.rs

@@ -0,0 +1,52 @@
+#![feature(lazy_cell)]
+
+use cfg_if::cfg_if;
+use leptos::*;
+use leptos_meta::*;
+use leptos_router::*;
+mod api;
+pub mod error_template;
+pub mod fallback;
+mod routes;
+use routes::{nav::*, stories::*, story::*, users::*};
+
+#[component]
+pub fn App() -> impl IntoView {
+    provide_meta_context();
+
+    view! {
+        <Stylesheet id="leptos" href="/pkg/hackernews.css"/>
+        <Link rel="shortcut icon" type_="image/ico" href="/favicon.ico"/>
+        <Meta name="description" content="Leptos implementation of a HackerNews demo."/>
+        <Router>
+            <Nav />
+            <main>
+                <Routes>
+                    <Route path="users/:id" view=User ssr=SsrMode::InOrder/>
+                    <Route path="stories/:id" view=Story ssr=SsrMode::InOrder/>
+                    <Route path=":stories?" view=Stories ssr=SsrMode::InOrder/>
+                </Routes>
+            </main>
+        </Router>
+    }
+}
+
+// Needs to be in lib.rs AFAIK because wasm-bindgen needs us to be compiling a lib. I may be wrong.
+cfg_if! {
+    if #[cfg(feature = "hydrate")] {
+        use wasm_bindgen::prelude::wasm_bindgen;
+
+        extern crate wee_alloc;
+
+        // Use `wee_alloc` as the global allocator.
+        #[global_allocator]
+        static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
+
+        #[wasm_bindgen]
+        pub fn hydrate() {
+            #[cfg(debug_assertions)]
+            console_error_panic_hook::set_once();
+            leptos::leptos_dom::HydrationCtx::stop_hydrating();
+        }
+    }
+}

examples/hackernews_islands_axum/src/main.rs

@@ -0,0 +1,47 @@
+#[cfg(feature = "ssr")]
+mod ssr_imports {
+    pub use axum::{routing::get, Router};
+    pub use hackernews_islands::fallback::file_and_error_handler;
+    pub use leptos::*;
+    pub use leptos_axum::{generate_route_list, LeptosRoutes};
+    pub use tower_http::{compression::CompressionLayer, services::ServeFile};
+}
+
+#[cfg(feature = "ssr")]
+#[tokio::main]
+async fn main() {
+    use hackernews_islands::*;
+    use ssr_imports::*;
+
+    let conf = get_configuration(Some("Cargo.toml")).await.unwrap();
+    let leptos_options = conf.leptos_options;
+    let addr = leptos_options.site_addr;
+    let routes = generate_route_list(App);
+
+    // build our application with a route
+    let app = Router::new()
+        .route("/favicon.ico", get(file_and_error_handler))
+        .leptos_routes(&leptos_options, routes, App)
+        .fallback(file_and_error_handler)
+        .with_state(leptos_options);
+
+    // run our app with hyper
+    // `axum::Server` is a re-export of `hyper::Server`
+    logging::log!("listening on {}", addr);
+    axum::Server::bind(&addr)
+        .serve(app.into_make_service())
+        .await
+        .unwrap();
+}
+
+// client-only stuff for Trunk
+#[cfg(not(feature = "ssr"))]
+pub fn main() {
+    use hackernews_islands::*;
+    use leptos::*;
+    _ = console_log::init_with_level(log::Level::Debug);
+    console_error_panic_hook::set_once();
+    mount_to_body(|| {
+        view! {  <App/> }
+    });
+}

examples/hackernews_islands_axum/src/routes.rs

@@ -0,0 +1,4 @@
+pub mod nav;
+pub mod stories;
+pub mod story;
+pub mod users;

examples/hackernews_islands_axum/src/routes/nav.rs

@@ -0,0 +1,30 @@
+use leptos::{component, view, IntoView};
+use leptos_router::*;
+
+#[component]
+pub fn Nav() -> impl IntoView {
+    view! {
+        <header class="header">
+            <nav class="inner">
+                <A href="/home">
+                    <strong>"HN"</strong>
+                </A>
+                <A href="/new">
+                    <strong>"New"</strong>
+                </A>
+                <A href="/show">
+                    <strong>"Show"</strong>
+                </A>
+                <A href="/ask">
+                    <strong>"Ask"</strong>
+                </A>
+                <A href="/job">
+                    <strong>"Jobs"</strong>
+                </A>
+                <a class="github" href="http://github.com/gbj/leptos" target="_blank" rel="noreferrer">
+                    "Built with Leptos"
+                </a>
+            </nav>
+        </header>
+    }
+}

examples/hackernews_islands_axum/src/routes/stories.rs

@@ -0,0 +1,162 @@
+use crate::api;
+use leptos::*;
+use leptos_router::*;
+
+fn category(from: &str) -> String {
+    match from {
+        "new" => "newest",
+        "show" => "show",
+        "ask" => "ask",
+        "job" => "jobs",
+        _ => "news",
+    }
+    .to_string()
+}
+
+#[server(FetchStories, "/api")]
+pub async fn fetch_stories(
+    story_type: String,
+    page: usize,
+) -> Result<Vec<api::Story>, ServerFnError> {
+    let path = format!("{}?page={}", category(&story_type), page);
+    Ok(api::fetch_api::<Vec<api::Story>>(&api::story(&path))
+        .await
+        .unwrap_or_default())
+}
+
+#[component]
+pub fn Stories() -> impl IntoView {
+    let query = use_query_map();
+    let params = use_params_map();
+    let page = move || {
+        query
+            .with(|q| q.get("page").and_then(|page| page.parse::<usize>().ok()))
+            .unwrap_or(1)
+    };
+    let story_type = move || {
+        params
+            .with(|p| p.get("stories").cloned())
+            .unwrap_or_else(|| "top".to_string())
+    };
+    let stories = create_resource(
+        move || (page(), story_type()),
+        move |(page, story_type)| fetch_stories(category(&story_type), page),
+    );
+    let (pending, set_pending) = create_signal(false);
+
+    let hide_more_link = move || {
+        pending()
+            || stories
+                .map(|stories| {
+                    stories.as_ref().map(|s| s.len() < 28).unwrap_or_default()
+                })
+                .unwrap_or_default()
+    };
+
+    view! {
+
+        <div class="news-view">
+            <div class="news-list-nav">
+                <span>
+                    {move || if page() > 1 {
+                        view! {
+                            <a class="page-link"
+                                href=move || format!("/{}?page={}", story_type(), page() - 1)
+                                attr:aria_label="Previous Page"
+                            >
+                                "< prev"
+                            </a>
+                        }.into_any()
+                    } else {
+                        view! {
+                            <span class="page-link disabled" aria-hidden="true">
+                                "< prev"
+                            </span>
+                        }.into_any()
+                    }}
+                </span>
+                <span>"page " {page}</span>
+                <span class="page-link"
+                    class:disabled=hide_more_link
+                    aria-hidden=hide_more_link
+                >
+                    <a href=move || format!("/{}?page={}", story_type(), page() + 1)
+                        aria-label="Next Page"
+                    >
+                        "more >"
+                    </a>
+                </span>
+            </div>
+            <main class="news-list">
+                <div>
+                    <Transition
+                        fallback=|| ()
+                        set_pending
+                    >
+                        {move || stories.get().map(|story| story.map(|stories| view! {
+                                <ul>
+                                    <For
+                                        each=move || stories.clone()
+                                        key=|story| story.id
+                                        let:story
+                                    >
+                                        <Story story/>
+                                    </For>
+                                </ul>
+                            }))}
+                    </Transition>
+                </div>
+            </main>
+        </div>
+    }
+}
+
+#[component]
+fn Story(story: api::Story) -> impl IntoView {
+    view! {
+         <li class="news-item">
+            <span class="score">{story.points}</span>
+            <span class="title">
+                {if !story.url.starts_with("item?id=") {
+                    view! {
+                        <span>
+                            <a href=story.url target="_blank" rel="noreferrer">
+                                {story.title.clone()}
+                            </a>
+                            <span class="host">"("{story.domain}")"</span>
+                        </span>
+                    }.into_view()
+                } else {
+                    let title = story.title.clone();
+                    view! {  <A href=format!("/stories/{}", story.id)>{title.clone()}</A> }.into_view()
+                }}
+            </span>
+            <br />
+            <span class="meta">
+                {if story.story_type != "job" {
+                    view! {
+                        <span>
+                            {"by "}
+                            {story.user.map(|user| view ! { <A href=format!("/users/{user}")>{user.clone()}</A>})}
+                            {format!(" {} | ", story.time_ago)}
+                            <A href=format!("/stories/{}", story.id)>
+                                {if story.comments_count.unwrap_or_default() > 0 {
+                                    format!("{} comments", story.comments_count.unwrap_or_default())
+                                } else {
+                                    "discuss".into()
+                                }}
+                            </A>
+                        </span>
+                    }.into_view()
+                } else {
+                    let title = story.title.clone();
+                    view! {  <A href=format!("/item/{}", story.id)>{title.clone()}</A> }.into_view()
+                }}
+            </span>
+            {(story.story_type != "link").then(|| view! {
+                " "
+                <span class="label">{story.story_type}</span>
+            })}
+        </li>
+    }
+}

examples/hackernews_islands_axum/src/routes/story.rs

@@ -0,0 +1,137 @@
+use crate::api;
+use leptos::*;
+use leptos_meta::*;
+use leptos_router::*;
+use std::cell::RefCell;
+
+#[server(FetchStory, "/api")]
+pub async fn fetch_story(
+    id: String,
+) -> Result<RefCell<Option<api::Story>>, ServerFnError> {
+    Ok(RefCell::new(
+        api::fetch_api::<api::Story>(&api::story(&format!("item/{id}"))).await,
+    ))
+}
+
+#[component]
+pub fn Story() -> impl IntoView {
+    let params = use_params_map();
+    let story = create_resource(
+        move || params().get("id").cloned().unwrap_or_default(),
+        move |id| async move {
+            if id.is_empty() {
+                Ok(RefCell::new(None))
+            } else {
+                fetch_story(id).await
+            }
+        },
+    );
+    let meta_description = move || {
+        story
+            .map(|story| {
+                story
+                    .as_ref()
+                    .map(|story| {
+                        story.borrow().as_ref().map(|story| story.title.clone())
+                    })
+                    .ok()
+            })
+            .flatten()
+            .flatten()
+            .unwrap_or_else(|| "Loading story...".to_string())
+    };
+
+    let story_view = move || {
+        story.map(|story| {
+        story.as_ref().ok().and_then(|story| {
+            let story: Option<api::Story> = story.borrow_mut().take();
+            story.map(|story| {
+                view! {
+                    <div class="item-view">
+                        <div class="item-view-header">
+                        <a href=story.url target="_blank">
+                            <h1>{story.title}</h1>
+                        </a>
+                        <span class="host">
+                            "("{story.domain}")"
+                        </span>
+                        {story.user.map(|user| view! { <p class="meta">
+                            {story.points}
+                            " points | by "
+                            <A href=format!("/users/{user}")>{user.clone()}</A>
+                            {format!(" {}", story.time_ago)}
+                        </p>})}
+                    </div>
+                    <div class="item-view-comments">
+                        <p class="item-view-comments-header">
+                            {if story.comments_count.unwrap_or_default() > 0 {
+                                format!("{} comments", story.comments_count.unwrap_or_default())
+                            } else {
+                                "No comments yet.".into()
+                            }}
+                        </p>
+                        <ul class="comment-children">
+                            {story.comments.unwrap_or_default().into_iter()
+                                .map(|comment: api::Comment| view! { <Comment comment /> })
+                                .collect_view()}
+                        </ul>
+                    </div>
+                </div>
+        }})})})
+    };
+
+    view! {
+        <Meta name="description" content=meta_description/>
+        <Suspense fallback=|| ()>
+            {story_view}
+        </Suspense>
+    }
+}
+
+#[island]
+pub fn Toggle(children: Children) -> impl IntoView {
+    let (open, set_open) = create_signal(true);
+    view! {
+        <div class="toggle" class:open=open>
+            <a on:click=move |_| set_open.update(|n| *n = !*n)>
+                {move || if open() {
+                    "[-]"
+                } else {
+                    "[+] comments collapsed"
+                }}
+            </a>
+        </div>
+        <ul
+            class="comment-children"
+            style:display=move || if open() {
+                "block"
+            } else {
+                "none"
+            }
+        >
+            {children()}
+        </ul>
+    }
+}
+
+#[component]
+pub fn Comment(comment: api::Comment) -> impl IntoView {
+    view! {
+        <li class="comment">
+            <div class="by">
+                <A href=format!("/users/{}", comment.user.clone().unwrap_or_default())>{comment.user.clone()}</A>
+                {format!(" {}", comment.time_ago)}
+            </div>
+            <div class="text" inner_html=comment.content></div>
+            {(!comment.comments.is_empty()).then(|| {
+                view! {
+                    <Toggle>
+                        {comment.comments.into_iter()
+                            .map(|comment: api::Comment| view! { <Comment comment /> })
+                            .collect_view()}
+                    </Toggle>
+                }
+            })}
+        </li>
+    }
+}

examples/hackernews_islands_axum/src/routes/users.rs

@@ -0,0 +1,54 @@
+#[allow(unused)] // User is unused in WASM build
+use crate::api::{self, User};
+use leptos::*;
+use leptos_router::*;
+
+#[server(FetchUser, "/api")]
+pub async fn fetch_user(
+    id: String,
+) -> Result<Option<api::User>, ServerFnError> {
+    Ok(api::fetch_api::<User>(&api::user(&id)).await)
+}
+
+#[component]
+pub fn User() -> impl IntoView {
+    let params = use_params_map();
+    let user = create_resource(
+        move || params().get("id").cloned().unwrap_or_default(),
+        move |id| async move {
+            if id.is_empty() {
+                Ok(None)
+            } else {
+                fetch_user(id).await
+            }
+        },
+    );
+    view! {
+        <div class="user-view">
+            <Suspense fallback=|| ()>
+                {move || user.get().map(|user| user.map(|user| match user {
+                    None => view! {  <h1>"User not found."</h1> }.into_view(),
+                    Some(user) => view! {
+                        <div>
+                            <h1>"User: " {&user.id}</h1>
+                            <ul class="meta">
+                                <li>
+                                    <span class="label">"Created: "</span> {user.created}
+                                </li>
+                                <li>
+                                <span class="label">"Karma: "</span> {user.karma}
+                                </li>
+                                <li inner_html={user.about} class="about"></li>
+                            </ul>
+                            <p class="links">
+                                <a href=format!("https://news.ycombinator.com/submitted?id={}", user.id)>"submissions"</a>
+                                " | "
+                                <a href=format!("https://news.ycombinator.com/threads?id={}", user.id)>"comments"</a>
+                            </p>
+                        </div>
+                    }.into_view()
+                }))}
+            </Suspense>
+        </div>
+    }
+}

examples/hackernews_islands_axum/style.css

@@ -0,0 +1,326 @@
+body {
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-size: 15px;
+	background-color: #f2f3f5;
+	margin: 0;
+	padding-top: 55px;
+	color: #34495e;
+	overflow-y: scroll
+}
+
+a {
+	color: #34495e;
+	text-decoration: none
+}
+
+.header {
+	background-color: #335d92;
+	position: fixed;
+	z-index: 999;
+	height: 55px;
+	top: 0;
+	left: 0;
+	right: 0
+}
+
+.header .inner {
+	max-width: 800px;
+	box-sizing: border-box;
+	margin: 0 auto;
+	padding: 15px 5px
+}
+
+.header a {
+	color: rgba(255, 255, 255, .8);
+	line-height: 24px;
+	transition: color .15s ease;
+	display: inline-block;
+	vertical-align: middle;
+	font-weight: 300;
+	letter-spacing: .075em;
+	margin-right: 1.8em
+}
+
+.header a:hover {
+	color: #fff
+}
+
+.header a.active {
+	color: #fff;
+	font-weight: 400
+}
+
+.header a:nth-child(6) {
+	margin-right: 0
+}
+
+.header .github {
+	color: #fff;
+	font-size: .9em;
+	margin: 0;
+	float: right
+}
+
+.logo {
+	width: 24px;
+	margin-right: 10px;
+	display: inline-block;
+	vertical-align: middle
+}
+
+.view {
+	max-width: 800px;
+	margin: 0 auto;
+	position: relative
+}
+
+.fade-enter-active,
+.fade-exit-active {
+	transition: all .2s ease
+}
+
+.fade-enter,
+.fade-exit-active {
+	opacity: 0
+}
+
+@media (max-width:860px) {
+	.header .inner {
+		padding: 15px 30px
+	}
+}
+
+@media (max-width:600px) {
+	.header .inner {
+		padding: 15px
+	}
+
+	.header a {
+		margin-right: 1em
+	}
+
+	.header .github {
+		display: none
+	}
+}
+
+.news-view {
+	padding-top: 45px
+}
+
+.news-list,
+.news-list-nav {
+	background-color: #fff;
+	border-radius: 2px
+}
+
+.news-list-nav {
+	padding: 15px 30px;
+	position: fixed;
+	text-align: center;
+	top: 55px;
+	left: 0;
+	right: 0;
+	z-index: 998;
+	box-shadow: 0 1px 2px rgba(0, 0, 0, .1)
+}
+
+.news-list-nav .page-link {
+	margin: 0 1em
+}
+
+.news-list-nav .disabled {
+	color: #aaa
+}
+
+.news-list {
+	position: absolute;
+	margin: 30px 0;
+	width: 100%;
+	transition: all .5s cubic-bezier(.55, 0, .1, 1)
+}
+
+.news-list ul {
+	list-style-type: none;
+	padding: 0;
+	margin: 0
+}
+
+@media (max-width:600px) {
+	.news-list {
+		margin: 10px 0
+	}
+}
+
+.news-item {
+	background-color: #fff;
+	padding: 20px 30px 20px 80px;
+	border-bottom: 1px solid #eee;
+	position: relative;
+	line-height: 20px
+}
+
+.news-item .score {
+	color: #335d92;
+	font-size: 1.1em;
+	font-weight: 700;
+	position: absolute;
+	top: 50%;
+	left: 0;
+	width: 80px;
+	text-align: center;
+	margin-top: -10px
+}
+
+.news-item .host,
+.news-item .meta {
+	font-size: .85em;
+	color: #626262
+}
+
+.news-item .host a,
+.news-item .meta a {
+	color: #626262;
+	text-decoration: underline
+}
+
+.news-item .host a:hover,
+.news-item .meta a:hover {
+	color: #335d92
+}
+
+.item-view-header {
+	background-color: #fff;
+	padding: 1.8em 2em 1em;
+	box-shadow: 0 1px 2px rgba(0, 0, 0, .1)
+}
+
+.item-view-header h1 {
+	display: inline;
+	font-size: 1.5em;
+	margin: 0;
+	margin-right: .5em
+}
+
+.item-view-header .host,
+.item-view-header .meta,
+.item-view-header .meta a {
+	color: #626262
+}
+
+.item-view-header .meta a {
+	text-decoration: underline
+}
+
+.item-view-comments {
+	background-color: #fff;
+	margin-top: 10px;
+	padding: 0 2em .5em
+}
+
+.item-view-comments-header {
+	margin: 0;
+	font-size: 1.1em;
+	padding: 1em 0;
+	position: relative
+}
+
+.item-view-comments-header .spinner {
+	display: inline-block;
+	margin: -15px 0
+}
+
+.comment-children {
+	list-style-type: none;
+	padding: 0;
+	margin: 0
+}
+
+@media (max-width:600px) {
+	.item-view-header h1 {
+		font-size: 1.25em
+	}
+}
+
+.comment-children .comment-children {
+	margin-left: 1.5em
+}
+
+.comment {
+	border-top: 1px solid #eee;
+	position: relative
+}
+
+.comment .by,
+.comment .text,
+.comment .toggle {
+	font-size: .9em;
+	margin: 1em 0
+}
+
+.comment .by {
+	color: #626262
+}
+
+.comment .by a {
+	color: #626262;
+	text-decoration: underline
+}
+
+.comment .text {
+	overflow-wrap: break-word
+}
+
+.comment .text a:hover {
+	color: #335d92
+}
+
+.comment .text pre {
+	white-space: pre-wrap
+}
+
+.comment .toggle {
+	background-color: #fffbf2;
+	padding: .3em .5em;
+	border-radius: 4px
+}
+
+.comment .toggle a {
+	color: #626262;
+	cursor: pointer
+}
+
+.comment .toggle.open {
+	padding: 0;
+	background-color: transparent;
+	margin-bottom: -.5em
+}
+
+.user-view {
+	background-color: #fff;
+	box-sizing: border-box;
+	padding: 2em 3em
+}
+
+.user-view h1 {
+	margin: 0;
+	font-size: 1.5em
+}
+
+.user-view .meta {
+	list-style-type: none;
+	padding: 0
+}
+
+.user-view .label {
+	display: inline-block;
+	min-width: 4em
+}
+
+.user-view .about {
+	margin: 1em 0
+}
+
+.user-view .links a {
+	text-decoration: underline
+}

examples/hackernews_js_fetch/.cargo/config.toml

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

examples/hackernews_js_fetch/Cargo.toml

@@ -0,0 +1,98 @@
+[package]
+name = "hackernews-js-fetch"
+version = "0.1.0"
+edition = "2021"
+
+[lib]
+crate-type = ["cdylib"]
+
+[profile.release]
+codegen-units = 1
+lto = true
+
+[dependencies]
+console_log = "1.0.0"
+console_error_panic_hook = "0.1.7"
+cfg-if = "1.0.0"
+leptos = { path = "../../leptos", features = ["nightly"] }
+leptos_axum = { path = "../../integrations/axum", default-features = false, optional = true }
+leptos_meta = { path = "../../meta", features = ["nightly"] }
+leptos_router = { path = "../../router", features = ["nightly"] }
+log = "0.4.17"
+simple_logger = "4.0.0"
+serde = { version = "1.0.148", features = ["derive"] }
+tracing = "0.1"
+gloo-net = { version = "0.4.0", features = ["http"] }
+reqwest = { version = "0.11.13", features = ["json"] }
+axum = { version = "0.6", default-features = false, optional = true }
+tower = { version = "0.4.13", optional = true }
+http = { version = "0.2.8", optional = true }
+web-sys = { version = "0.3", features = ["AbortController", "AbortSignal", "Request", "Response"] }
+wasm-bindgen = "0.2"
+wasm-bindgen-futures = { version = "0.4.37", features = ["futures-core-03-stream"], optional = true }
+axum-js-fetch = { version = "0.2.1", optional = true }
+lazy_static = "1.4.0"
+
+[features]
+default = ["csr"]
+csr = ["leptos/csr", "leptos_meta/csr", "leptos_router/csr"]
+hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"]
+ssr = [
+  "dep:tower",
+  "dep:http",
+  "dep:axum",
+  "dep:wasm-bindgen-futures",
+  "dep:axum-js-fetch",
+  "leptos/ssr",
+  "leptos_axum/wasm",
+  "leptos_meta/ssr",
+  "leptos_router/ssr",
+]
+
+[package.metadata.cargo-all-features]
+denylist = ["axum", "tower", "http", "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 = "hackernews_axum"
+# 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 = "npx playwright test"
+#  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 = ["hydrate"]
+
+# If the --no-default-features flag should be used when compiling the lib target
+#
+# Optional. Defaults to false.
+lib-default-features = false

examples/hackernews_js_fetch/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/hackernews_js_fetch/Makefile.toml

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

examples/hackernews_js_fetch/README.md

@@ -0,0 +1,14 @@
+# 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`.
+
+## Server Side Rendering with Deno
+To run the Deno version, run
+```bash
+deno task build
+deno task start 
+```

examples/hackernews_js_fetch/deno.jsonc

@@ -0,0 +1,8 @@
+{
+  "tasks": {
+    "build:server": "wasm-pack build --release --target web --out-name server --features ssr --no-default-features",
+    "build:client": "wasm-pack build --release --target web --out-name client --features hydrate --no-default-features",
+    "build": "deno task build:server & deno task build:client",
+    "start": "deno run --allow-read --allow-net run.ts"
+  }
+}

examples/hackernews_js_fetch/deno.lock

@@ -0,0 +1,58 @@
+{
+  "version": "2",
+  "remote": {
+    "https://deno.land/std@0.177.0/_util/asserts.ts": "178dfc49a464aee693a7e285567b3d0b555dc805ff490505a8aae34f9cfb1462",
+    "https://deno.land/std@0.177.0/_util/os.ts": "d932f56d41e4f6a6093d56044e29ce637f8dcc43c5a90af43504a889cf1775e3",
+    "https://deno.land/std@0.177.0/async/abortable.ts": "73acfb3ed7261ce0d930dbe89e43db8d34e017b063cf0eaa7d215477bf53442e",
+    "https://deno.land/std@0.177.0/async/deadline.ts": "c5facb0b404eede83e38bd2717ea8ab34faa2ffb20ef87fd261fcba32ba307aa",
+    "https://deno.land/std@0.177.0/async/debounce.ts": "adab11d04ca38d699444ac8a9d9856b4155e8dda2afd07ce78276c01ea5a4332",
+    "https://deno.land/std@0.177.0/async/deferred.ts": "42790112f36a75a57db4a96d33974a936deb7b04d25c6084a9fa8a49f135def8",
+    "https://deno.land/std@0.177.0/async/delay.ts": "73aa04cec034c84fc748c7be49bb15cac3dd43a57174bfdb7a4aec22c248f0dd",
+    "https://deno.land/std@0.177.0/async/mod.ts": "f04344fa21738e5ad6bea37a6bfffd57c617c2d372bb9f9dcfd118a1b622e576",
+    "https://deno.land/std@0.177.0/async/mux_async_iterator.ts": "70c7f2ee4e9466161350473ad61cac0b9f115cff4c552eaa7ef9d50c4cbb4cc9",
+    "https://deno.land/std@0.177.0/async/pool.ts": "fd082bd4aaf26445909889435a5c74334c017847842ec035739b4ae637ae8260",
+    "https://deno.land/std@0.177.0/async/retry.ts": "5efa3ba450ac0c07a40a82e2df296287b5013755d232049efd7ea2244f15b20f",
+    "https://deno.land/std@0.177.0/async/tee.ts": "47e42d35f622650b02234d43803d0383a89eb4387e1b83b5a40106d18ae36757",
+    "https://deno.land/std@0.177.0/collections/_utils.ts": "5114abc026ddef71207a79609b984614e66a63a4bda17d819d56b0e72c51527e",
+    "https://deno.land/std@0.177.0/collections/deep_merge.ts": "5a8ed29030f4471a5272785c57c3455fa79697b9a8f306013a8feae12bafc99a",
+    "https://deno.land/std@0.177.0/crypto/_fnv/fnv32.ts": "e4649dfdefc5c987ed53c3c25db62db771a06d9d1b9c36d2b5cf0853b8e82153",
+    "https://deno.land/std@0.177.0/crypto/_fnv/fnv64.ts": "bfa0e4702061fdb490a14e6bf5f9168a22fb022b307c5723499469bfefca555e",
+    "https://deno.land/std@0.177.0/crypto/_fnv/index.ts": "169c213eb75de2d6738c1ed66a8e5782bd222b70b187cc4e7fb7b73edfcf0927",
+    "https://deno.land/std@0.177.0/crypto/_fnv/util.ts": "accba12bfd80a352e32a872f87df2a195e75561f1b1304a4cb4f5a4648d288f9",
+    "https://deno.land/std@0.177.0/crypto/_util.ts": "0522d1466e3c92df84cea94da85dbb7bd93e629dacb2aa5b39cab432ab7cb3d6",
+    "https://deno.land/std@0.177.0/crypto/_wasm/lib/deno_std_wasm_crypto.generated.mjs": "5dedb7f9aa05f0e18ed017691c58df5f4686e4cbbd70368c6f896e5cca03f2b4",
+    "https://deno.land/std@0.177.0/crypto/_wasm/mod.ts": "e2df88236fc061eac7a89e8cb0b97843f5280b08b2a990e473b7397a3e566003",
+    "https://deno.land/std@0.177.0/crypto/crypto.ts": "d5ce53784ab7b1348095389426a7ea98536223fb143812ecb50724a0aa1ec657",
+    "https://deno.land/std@0.177.0/crypto/keystack.ts": "877ab0f19eb7d37ad6495190d3c3e39f58e9c52e0b6a966f82fd6df67ca55f90",
+    "https://deno.land/std@0.177.0/crypto/mod.ts": "885738e710868202d7328305b0c0c134e36a2d9c98ceab9513ea2442863c00eb",
+    "https://deno.land/std@0.177.0/crypto/timing_safe_equal.ts": "8d69ab611c67fe51b6127d97fcfb4d8e7d0e1b6b4f3e0cc4ab86744c3691f965",
+    "https://deno.land/std@0.177.0/crypto/to_hash_string.ts": "fe4e95239d7afb617f469bc2f76ff20f888ddb8d1385e0d92276f6e4d5a809d1",
+    "https://deno.land/std@0.177.0/encoding/base64.ts": "7de04c2f8aeeb41453b09b186480be90f2ff357613b988e99fabb91d2eeceba1",
+    "https://deno.land/std@0.177.0/encoding/base64url.ts": "3f1178f6446834457b16bfde8b559c1cd3481727fe384d3385e4a9995dc2d851",
+    "https://deno.land/std@0.177.0/encoding/hex.ts": "50f8c95b52eae24395d3dfcb5ec1ced37c5fe7610ef6fffdcc8b0fdc38e3b32f",
+    "https://deno.land/std@0.177.0/flags/mod.ts": "d1cdefa18472ef69858a17df5cf7c98445ed27ac10e1460183081303b0ebc270",
+    "https://deno.land/std@0.177.0/fmt/colors.ts": "938c5d44d889fb82eff6c358bea8baa7e85950a16c9f6dae3ec3a7a729164471",
+    "https://deno.land/std@0.177.0/http/file_server.ts": "86d624c0c908a4a377090668ee872cf5c064245da71b3e8f8f7df888cac869d5",
+    "https://deno.land/std@0.177.0/http/http_status.ts": "8a7bcfe3ac025199ad804075385e57f63d055b2aed539d943ccc277616d6f932",
+    "https://deno.land/std@0.177.0/http/server.ts": "cbb17b594651215ba95c01a395700684e569c165a567e4e04bba327f41197433",
+    "https://deno.land/std@0.177.0/http/util.ts": "36c0b60c031f9e2ba024353ed11693f76c714551f9e766b36cdaacda54f25a21",
+    "https://deno.land/std@0.177.0/media_types/_db.ts": "7606d83e31f23ce1a7968cbaee852810c2cf477903a095696cdc62eaab7ce570",
+    "https://deno.land/std@0.177.0/media_types/_util.ts": "916efbd30b6148a716f110e67a4db29d6949bf4048997b754415dd7e42c52378",
+    "https://deno.land/std@0.177.0/media_types/content_type.ts": "c682589a0aeb016bfed355cc1ed6fbb3ead2ea48fc0000ac5de6a5730613ad1c",
+    "https://deno.land/std@0.177.0/media_types/format_media_type.ts": "1e35e16562e5c417401ffc388a9f8f421f97f0ee06259cbe990c51bae4e6c7a8",
+    "https://deno.land/std@0.177.0/media_types/get_charset.ts": "8be15a1fd31a545736b91ace56d0e4c66ea0d7b3fdc5c90760e8202e7b4b1fad",
+    "https://deno.land/std@0.177.0/media_types/parse_media_type.ts": "bed260d868ea271445ae41d748e7afed9b5a7f407d2777ead08cecf73e9278de",
+    "https://deno.land/std@0.177.0/media_types/type_by_extension.ts": "6076a7fc63181d70f92ec582fdea2c927eb2cfc7f9c9bee9d6add2aca86f2355",
+    "https://deno.land/std@0.177.0/media_types/vendor/mime-db.v1.52.0.ts": "6925bbcae81ca37241e3f55908d0505724358cda3384eaea707773b2c7e99586",
+    "https://deno.land/std@0.177.0/path/_constants.ts": "e49961f6f4f48039c0dfed3c3f93e963ca3d92791c9d478ac5b43183413136e0",
+    "https://deno.land/std@0.177.0/path/_interface.ts": "6471159dfbbc357e03882c2266d21ef9afdb1e4aa771b0545e90db58a0ba314b",
+    "https://deno.land/std@0.177.0/path/_util.ts": "d7abb1e0dea065f427b89156e28cdeb32b045870acdf865833ba808a73b576d0",
+    "https://deno.land/std@0.177.0/path/common.ts": "ee7505ab01fd22de3963b64e46cff31f40de34f9f8de1fff6a1bd2fe79380000",
+    "https://deno.land/std@0.177.0/path/glob.ts": "d479e0a695621c94d3fd7fe7abd4f9499caf32a8de13f25073451c6ef420a4e1",
+    "https://deno.land/std@0.177.0/path/mod.ts": "4b83694ac500d7d31b0cdafc927080a53dc0c3027eb2895790fb155082b0d232",
+    "https://deno.land/std@0.177.0/path/posix.ts": "8b7c67ac338714b30c816079303d0285dd24af6b284f7ad63da5b27372a2c94d",
+    "https://deno.land/std@0.177.0/path/separator.ts": "0fb679739d0d1d7bf45b68dacfb4ec7563597a902edbaf3c59b50d5bcadd93b1",
+    "https://deno.land/std@0.177.0/path/win32.ts": "d186344e5583bcbf8b18af416d13d82b35a317116e6460a5a3953508c3de5bba",
+    "https://deno.land/std@0.177.0/version.ts": "259c8866ec257c3511b437baa95205a86761abaef852a9b2199072accb2ef046"
+  }
+}

examples/hackernews_js_fetch/index.html

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