fix: Resource::with() (pt. 3!) — closes #1751 without breaking #1742 or #1711

* fix(examples/build): maybe spawn client process

* docs(examples/error_boundary): add testing note

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

@@ -35,7 +35,7 @@ jobs:
             !examples/cargo-make
             !examples/gtk
             !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

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

@@ -24,7 +24,7 @@ jobs:
 
     steps:
       # Setup environment
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Setup Rust
         uses: actions-rs/toolchain@v1

Cargo.toml

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

SECURITY.md

@@ -0,0 +1,13 @@
+# Security Policy
+
+## Reporting a Vulnerability
+
+To report a suspected security issue, please contact security@leptos.dev rather than opening
+a public issue.
+
+## Supported Versions
+
+The most-recently-released version of the library is supported with security updates.
+For example, if a security issue is discovered that affects 0.3.2 and all later releases,
+a 0.4.x patch will be released but a new 0.3.x patch release will not be made. You should 
+plan to update to the latest version to receive any new features or bugfixes of any kind.

benchmarks/Cargo.toml

@@ -5,9 +5,13 @@ edition = "2021"
 
 [dependencies]
 l021 = { package = "leptos", version = "0.2.1" }
-leptos = { path = "../leptos", features = ["ssr"] }
+leptos = { path = "../leptos", features = [
+	"ssr",
+	"nightly",
+	"experimental-islands",
+] }
 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"

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-rc2`. 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-rc2 --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-rc2 --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.
@@ -65,7 +67,7 @@ And add a simple “Hello, world!” to your `main.rs`
 use leptos::*;
 
 fn main() {
-    mount_to_body(|| view! {  <p>"Hello, world!"</p> })
+    mount_to_body(|| view! { <p>"Hello, world!"</p> })
 }
 ```
 

docs/book/src/15_global_state.md

@@ -367,7 +367,6 @@ fn GlobalStateInput() -> impl IntoView {
     // that we created in the other component
     // neither of them will cause the other to rerun
     let (name, set_name) = create_slice(
-
         // we take a slice *from* `state`
         state,
         // our getter returns a "slice" of the data

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/appendix_reactive_graph.md

@@ -235,9 +235,9 @@ At the very most, you might consider memoizing the final node before running som
 
 ```rust
 let text = create_memo(move |_| {
-  d()
+    d()
 });
 create_effect(move |_| {
-  engrave_text_into_bar_of_gold(&text());
+    engrave_text_into_bar_of_gold(&text());
 });
 ```

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

@@ -18,7 +18,7 @@ let async_data = create_resource(
     count,
     // every time `count` changes, this will run
     |value| async move {
-        log!("loading data from API");
+        logging::log!("loading data from API");
         load_data(value).await
     },
 );

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

@@ -4,7 +4,7 @@ In the previous chapter, we showed how you can create a simple loading screen to
 
 ```rust
 let (count, set_count) = create_signal(0);
-let a = create_resource(count, |count| async move { load_a(count).await });
+let once = create_resource(count, |count| async move { load_a(count).await });
 
 view! {
     <h1>"My Data"</h1>

docs/book/src/deployment.md

@@ -54,7 +54,7 @@ RUN cargo leptos build --release -vv
 
 FROM rustlang/rust:nightly-bullseye as runner
 # Copy the server binary to the /app directory
-COPY --from=builder /app/target/server/release/leptos_website /app/
+COPY --from=builder /app/target/server/release/leptos_start /app/
 # /target/site contains our JS/WASM/CSS, etc.
 COPY --from=builder /app/target/site /app/site
 # Copy Cargo.toml if it’s needed at runtime
@@ -68,7 +68,7 @@ ENV LEPTOS_SITE_ADDR="0.0.0.0:8080"
 ENV LEPTOS_SITE_ROOT="site"
 EXPOSE 8080
 # Run the server
-CMD ["/app/leptos_website"]
+CMD ["/app/leptos_start"]
 ```
 
 > Read more: [`gnu` and `musl` build files for Leptos apps](https://github.com/leptos-rs/leptos/issues/1152#issuecomment-1634916088).

docs/book/src/interlude_projecting_children.md

@@ -50,7 +50,6 @@ If you want to really understand the issue here, it may help to look at the expa
 
 ```rust
 Suspense(
-
     ::leptos::component_props_builder(&Suspense)
         .fallback(|| ())
         .children({
@@ -61,7 +60,6 @@ Suspense(
                     leptos::Fragment::lazy(|| {
                         vec![
                             (Show(
-
                                 ::leptos::component_props_builder(&Show)
                                     .when(|| true)
 									// but fallback is moved into Show here
@@ -91,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/14_create_effect.md

@@ -50,7 +50,6 @@ let (use_last, set_use_last) = create_signal(true);
 // any time one of the source signals changes
 create_effect(move |_| {
     log(
-
         if use_last() {
             format!("{} {}", first(), last())
         } else {
@@ -122,7 +121,6 @@ Like `create_resource`, `watch` takes a first argument, which is reactively trac
 let (num, set_num) = create_signal(0);
 
 let stop = watch(
-
     move || num.get(),
     move |num, prev_num, _| {
         log::debug!("Number: {}; Prev: {:?}", num, prev_num);

docs/book/src/reactivity/interlude_functions.md

@@ -20,7 +20,7 @@ let text = move || if count_is_odd() {
 // an effect automatically tracks the signals it depends on
 // and reruns when they change
 create_effect(move |_| {
-    log!("text = {}", text());
+    logging::log!("text = {}", text());
 });
 
 view! {

docs/book/src/reactivity/working_with_signals.md

@@ -16,7 +16,7 @@ Calling a `ReadSignal` as a function is syntax sugar for `.get()`. Calling a `Wr
 ```rust
 let (count, set_count) = create_signal(0);
 set_count(1);
-log!(count());
+logging::log!(count());
 ```
 
 is the same as
@@ -24,7 +24,7 @@ is the same as
 ```rust
 let (count, set_count) = create_signal(0);
 set_count.set(1);
-log!(count.get());
+logging::log!(count.get());
 ```
 
 You might notice that `.get()` and `.set()` can be implemented in terms of `.with()` and `.update()`. In other words, `count.get()` is identical with `count.with(|n| n.clone())`, and `count.set(1)` is implemented by doing `count.update(|n| *n = 1)`.
@@ -63,7 +63,35 @@ if names.with(Vec::is_empty) {
 }
 ```
 
-After all, `.with()` simply takes a function that takes the value by reference. Since `Vec::is_empty` takes `&self`, we can pass it in directly and avoid the unncessary closure.
+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
 

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

@@ -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/server/25_server_functions.md

@@ -33,7 +33,6 @@ pub async fn add_todo(title: String) -> Result<(), ServerFnError> {
 #[component]
 pub fn BusyButton() -> impl IntoView {
 	view! {
-
         <button on:click=move |_| {
             spawn_local(async {
                 add_todo("So much to do!".to_string()).await;

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

@@ -35,7 +35,6 @@ Here’s a simplified example from our [`session_auth_axum` example](https://git
 ```rust
 #[server(Login, "/api")]
 pub async fn login(
-
     username: String,
     password: String,
     remember: Option<String>,

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

@@ -9,7 +9,7 @@ Put a log somewhere in your root component. (I usually call mine `<App/>`, but a
 ```rust
 #[component]
 pub fn App() -> impl IntoView {
-	leptos::log!("where do I run?");
+	logging::log!("where do I run?");
 	// ... whatever
 }
 ```
@@ -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.
@@ -166,7 +129,7 @@ For example, say that I want to store something in the browser’s `localStorage
 pub fn App() -> impl IntoView {
     use gloo_storage::Storage;
 	let storage = gloo_storage::LocalStorage::raw();
-	leptos::log!("{storage:?}");
+	logging::log!("{storage:?}");
 }
 ```
 
@@ -180,7 +143,7 @@ pub fn App() -> impl IntoView {
     use gloo_storage::Storage;
     create_effect(move |_| {
         let storage = gloo_storage::LocalStorage::raw();
-		leptos::log!("{storage:?}");
+		logging::log!("{storage:?}");
     });
 }
 ```

docs/book/src/testing.md

@@ -37,7 +37,7 @@ impl Todos {
 #[cfg(test)]
 mod tests {
     #[test]
-    fn test_remaining {
+    fn test_remaining() {
         // ...
     }
 }

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

@@ -145,7 +145,7 @@ Derived signals let you create reactive computed values that can be used in mult
 places in your application with minimal overhead.
 
 Note: Using a derived signal like this means that the calculation runs once per
-signal change per place we access `double_count`; in other words, twice. This is a
+signal change and once per place we access `double_count`; in other words, twice. This is a
 very cheap calculation, so that’s fine. We’ll look at memos in a later chapter, which
 are designed to solve this problem for expensive calculations.
 

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

@@ -35,9 +35,7 @@ Instead, let’s create a `<ProgressBar/>` component.
 
 ```rust
 #[component]
-fn ProgressBar(
-
-) -> impl IntoView {
+fn ProgressBar() -> impl IntoView {
     view! {
         <progress
             max="50"
@@ -64,7 +62,6 @@ In Leptos, you define props by giving additional arguments to the component func
 ```rust
 #[component]
 fn ProgressBar(
-
     progress: ReadSignal<i32>
 ) -> impl IntoView {
     view! {
@@ -118,7 +115,6 @@ argument to the component function with `#[prop(optional)]`.
 ```rust
 #[component]
 fn ProgressBar(
-
     // mark this prop optional
     // you can specify it or not when you use <ProgressBar/>
     #[prop(optional)]
@@ -149,7 +145,6 @@ with `#[prop(default = ...)`.
 ```rust
 #[component]
 fn ProgressBar(
-
     #[prop(default = 100)]
     max: u16,
     progress: ReadSignal<i32>
@@ -199,7 +194,6 @@ implement the trait `Fn() -> i32`. So you could use a generic component:
 ```rust
 #[component]
 fn ProgressBar<F>(
-
     #[prop(default = 100)]
     max: u16,
     progress: F
@@ -254,7 +248,6 @@ reactive value.
 ```rust
 #[component]
 fn ProgressBar(
-
     #[prop(default = 100)]
     max: u16,
     #[prop(into)]
@@ -373,7 +366,6 @@ component function, and each one of the props:
 /// Shows progress toward a goal.
 #[component]
 fn ProgressBar(
-
     /// The maximum value of the progress bar.
     #[prop(default = 100)]
     max: u16,

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

@@ -148,10 +148,10 @@ This _works_, for sure. But if you added a log, you might be surprised
 
 ```rust
 let message = move || if value() > 5 {
-    log!("{}: rendering Big", value());
+    logging::log!("{}: rendering Big", value());
     "Big"
 } else {
-    log!("{}: rendering Small", value());
+    logging::log!("{}: rendering Small", value());
     "Small"
 };
 ```

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

@@ -72,10 +72,7 @@ pub fn App() -> impl IntoView {
 
 
 #[component]
-pub fn ButtonB<F>(
-
-    on_click: F,
-) -> impl IntoView
+pub fn ButtonB<F>(on_click: F) -> impl IntoView
 where
     F: Fn(MouseEvent) + 'static,
 {

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

@@ -47,7 +47,6 @@ Let’s define a component that takes some children and a render prop.
 ```rust
 #[component]
 pub fn TakesChildren<F, IV>(
-
     /// Takes a function (type F) that returns anything that can be
     /// converted into a View (type IV)
     render_prop: F,

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 | 
@@ -49,9 +49,9 @@ jq -R -s -c 'split("\n")[:-1]')
 echo "CARGO_MAKE_CRATE_WORKSPACE_MEMBERS = $examples"
 '''
 
-[tasks.test-runner-report]
+[tasks.test-report]
 workspace = false
-description = "report ci test runners for each example - OPTION: [all]"
+description = "report web testing technology used by examples - OPTION: [all]"
 script = '''
 set -emu
 
@@ -62,11 +62,10 @@ YELLOW="\e[0;33m"
 RESET="\e[0m"
 
 echo
-echo "${YELLOW}Test Runner Report${RESET}"
-echo "${ITALIC}Pass the option \"all\" to show all the examples${RESET}"
+echo "${YELLOW}Web Test Technology${RESET}"
 echo
 
-makefile_paths=$(find . -name Makefile.toml -not -path '*/target/*' |
+makefile_paths=$(find . -name Makefile.toml -not -path '*/target/*' -not -path '*/node_modules/*' |
   sed 's%./%%' |
   sed 's%/Makefile.toml%%' |
   grep -v Makefile.toml |
@@ -77,56 +76,78 @@ start_path=$(pwd)
 for path in $makefile_paths; do
   cd $path
 
-  test_runner=
+  crate_symbols=
 
-  test_count=$(grep -rl -E "#\[test\]" | wc -l)
-  if [ $test_count -gt 0 ]; then
-      test_runner="T"
-  fi
+  pw_count=$(find . -name playwright.config.ts | wc -l)
 
   while read -r line; do
       case $line in
       *"cucumber"*)
-          test_runner=$test_runner"C"
+          crate_symbols=$crate_symbols"C"
           ;;
-      *"rstest"*)
-          test_runner=$test_runner"R"
+      *"fantoccini"*)
+          crate_symbols=$crate_symbols"D"
           ;;
       esac
   done <"./Cargo.toml"
 
   while read -r line; do
     case $line in
-      *"wasm-test.toml"*)
-          test_runner=$test_runner"W"
+      *"cargo-make/wasm-test.toml"*)
+          crate_symbols=$crate_symbols"W"
         ;;
-      *"playwright-test.toml"*)
-          test_runner=$test_runner"P"
+      *"cargo-make/playwright-test.toml"*)
+          crate_symbols=$crate_symbols"P"
+          crate_symbols=$crate_symbols"N"
         ;;
-      *"cargo-leptos-test.toml"*)
-          test_runner=$test_runner"L"
+      *"cargo-make/playwright-trunk-test.toml"*)
+          crate_symbols=$crate_symbols"P"
+          crate_symbols=$crate_symbols"T"
+        ;;
+      *"cargo-make/trunk_server.toml"*)
+          crate_symbols=$crate_symbols"T"
+        ;;
+      *"cargo-make/cargo-leptos-webdriver-test.toml"*)
+          crate_symbols=$crate_symbols"L"
+        ;;
+      *"cargo-make/cargo-leptos-test.toml"*)
+          crate_symbols=$crate_symbols"L"
+          if [ $pw_count -gt 0 ]; then
+            crate_symbols=$crate_symbols"P"
+          fi
         ;;
     esac
   done <"./Makefile.toml"
 
-  runners=$(echo ${test_runner} | grep -o . | sort | tr -d "\n") 
+  # Sort list of tools
+  sorted_crate_symbols=$(echo ${crate_symbols} | grep -o . | sort | tr -d "\n") 
 
+  formatted_crate_symbols=" ➤ ${BOLD}${YELLOW}${sorted_crate_symbols}${RESET}"
+  crate_line=$path
   if [ ! -z ${1+x} ]; then
     # Show all examples
-    echo "$path ➤ ${BOLD}${runners}${RESET}"
-  elif [ ! -z $runners ]; then
+    if [ ! -z $crate_symbols ]; then
+      crate_line=$crate_line$formatted_crate_symbols
+    fi
+    echo $crate_line
+  elif [ ! -z $crate_symbols ]; then
     # Filter out examples that do not run tests in `ci`
-    echo "$path ➤ ${BOLD}${runners}${RESET}"
+    crate_line=$crate_line$formatted_crate_symbols
+    echo $crate_line
   fi
 
   cd ${start_path}
 done
+
+c="${BOLD}${YELLOW}C${RESET} = Cucumber"
+d="${BOLD}${YELLOW}D${RESET} = WebDriver"
+l="${BOLD}${YELLOW}L${RESET} = Cargo Leptos"
+n="${BOLD}${YELLOW}N${RESET} = Node"
+p="${BOLD}${YELLOW}P${RESET} = Playwright"
+t="${BOLD}${YELLOW}T${RESET} = Trunk"
+w="${BOLD}${YELLOW}W${RESET} = WASM"
+
 echo
-echo "${ITALIC}Runners: C = Cucumber, L = Cargo Leptos, P = Playwright, R = RS Test, T = Cargo, W = WASM${RESET}"
+echo "${ITALIC}Keys:${RESET} $c, $d, $l, $n, $p, $t, $w"
 echo
 '''
-
-# ALIASES
-
-[tasks.tr]
-alias = "test-runner-report"

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-test.toml

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

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

@@ -0,0 +1,7 @@
+extend = [
+    { path = "./cargo-leptos.toml" },
+    { path = "../cargo-make/webdriver.toml" },
+]
+
+[tasks.integration-test]
+dependencies = ["install-cargo-leptos", "start-webdriver", "cargo-leptos-e2e"]

examples/cargo-make/cargo-leptos.toml

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

examples/cargo-make/clean.toml

@@ -12,7 +12,7 @@ args = ["-rf", "target"]
 
 [tasks.clean-trunk]
 script = '''
-find . -type d -name target | xargs rm -rf
+find . -type d -name dist | xargs rm -rf
 '''
 
 [tasks.clean-node_modules]

examples/cargo-make/client-process.toml

@@ -0,0 +1,34 @@
+[tasks.start-client]
+
+[tasks.stop-client]
+condition = { env_set = ["CLIENT_PROCESS_NAME"] }
+script = '''
+  if [ ! -z $(pidof ${CLIENT_PROCESS_NAME}) ]; then
+    pkill -ef ${CLIENT_PROCESS_NAME}
+  fi
+'''
+
+[tasks.client-status]
+condition = { env_set = ["CLIENT_PROCESS_NAME"] }
+script = '''
+  if [ -z $(pidof ${CLIENT_PROCESS_NAME}) ]; then
+    echo "  ${CLIENT_PROCESS_NAME} is not running"
+  else
+    echo "  ${CLIENT_PROCESS_NAME} is up"
+  fi
+'''
+
+[tasks.maybe-start-client]
+condition = { env_set = ["CLIENT_PROCESS_NAME"] }
+script = '''
+  if [ -z $(pidof ${CLIENT_PROCESS_NAME}) ]; then
+    echo "  Starting ${CLIENT_PROCESS_NAME}"
+    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
+'''

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

@@ -0,0 +1,14 @@
+extend = [
+    { path = "../cargo-make/playwright.toml" },
+    { path = "../cargo-make/trunk_server.toml" },
+]
+
+[tasks.integration-test]
+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 = '''
+sleep 1
+'''

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,18 +1,10 @@
+[env]
+CLIENT_PROCESS_NAME = "trunk"
+
 [tasks.build]
 command = "trunk"
 args = ["build"]
 
-[tasks.start-trunk]
+[tasks.start-client]
 command = "trunk"
 args = ["serve", "${@}"]
-
-[tasks.stop-trunk]
-script = '''
-  pkill -f "cargo-make"
-  pkill -f "trunk"
-'''
-
-# ALIASES
-
-[tasks.dev]
-dependencies = ["start-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/counter_without_macros/src/lib.rs

@@ -3,7 +3,7 @@ use leptos::{ev, html::*, *};
 /// A simple counter view.
 // A component is really just a function call: it runs once to create the DOM and reactive system
 pub fn counter(initial_value: i32, step: u32) -> impl IntoView {
-    let (count, set_count) = create_signal(Count::new(initial_value, step));
+    let count = RwSignal::new(Count::new(initial_value, step));
 
     // the function name is the same as the HTML tag name
     div()
@@ -17,18 +17,14 @@ pub fn counter(initial_value: i32, step: u32) -> impl IntoView {
                 // typed events found in leptos::ev
                 // 1) prevent typos in event names
                 // 2) allow for correct type inference in callbacks
-                .on(ev::click, move |_| set_count.update(|count| count.clear()))
+                .on(ev::click, move |_| count.update(Count::clear))
                 .child("Clear"),
             button()
-                .on(ev::click, move |_| {
-                    set_count.update(|count| count.decrease())
-                })
+                .on(ev::click, move |_| count.update(Count::decrease))
                 .child("-1"),
             span().child(("Value: ", move || count.get().value(), "!")),
             button()
-                .on(ev::click, move |_| {
-                    set_count.update(|count| count.increase())
-                })
+                .on(ev::click, move |_| count.update(Count::increase))
                 .child("+1"),
         ))
 }

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

@@ -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

@@ -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/.gitignore

@@ -0,0 +1,20 @@
+# Generated by Cargo
+# will have compiled files and executables
+/target/
+
+# Remove Cargo.lock from gitignore if creating an executable, leave it for libraries
+# More information here https://doc.rust-lang.org/cargo/guide/cargo-toml-vs-cargo-lock.html
+Cargo.lock
+
+# These are backup files generated by rustfmt
+**/*.rs.bk
+
+# Support playwright testing
+node_modules/
+test-results/
+end2end/playwright-report/
+playwright/.cache/
+pnpm-lock.yaml
+
+# Support trunk
+dist

examples/error_boundary/Makefile.toml

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

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/error_boundary/e2e/.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+/test-results/
+/playwright-report/
+/playwright/.cache/

examples/error_boundary/e2e/package-lock.json

@@ -0,0 +1,83 @@
+{
+  "name": "grip",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "grip",
+      "devDependencies": {
+        "@playwright/test": "^1.35.1"
+      }
+    },
+    "node_modules/.pnpm/@playwright+test@1.33.0": {
+      "extraneous": true
+    },
+    "node_modules/.pnpm/@types+node@20.2.1/node_modules/@types/node": {
+      "version": "20.2.1",
+      "extraneous": true,
+      "license": "MIT"
+    },
+    "node_modules/.pnpm/playwright-core@1.33.0/node_modules/playwright-core": {
+      "version": "1.33.0",
+      "extraneous": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@playwright/test": {
+      "version": "1.35.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.35.1.tgz",
+      "integrity": "sha512-b5YoFe6J9exsMYg0pQAobNDR85T1nLumUYgUTtKm4d21iX2L7WqKq9dW8NGJ+2vX0etZd+Y7UeuqsxDXm9+5ZA==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*",
+        "playwright-core": "1.35.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "20.3.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.3.1.tgz",
+      "integrity": "sha512-EhcH/wvidPy1WeML3TtYFGR83UzjxeWRen9V402T8aUGYsCHOmfoisV3ZSg03gAFIbLq8TnWOJ0f4cALtnSEUg==",
+      "dev": true
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.35.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.35.1.tgz",
+      "integrity": "sha512-pNXb6CQ7OqmGDRspEjlxE49w+4YtR6a3X6mT1hZXeJHWmsEz7SunmvZeiG/+y1yyMZdHnnn73WKYdtV1er0Xyg==",
+      "dev": true,
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    }
+  }
+}

examples/error_boundary/e2e/package.json

@@ -0,0 +1,7 @@
+{
+  "private": "true",
+  "scripts": {},
+  "devDependencies": {
+    "@playwright/test": "^1.35.1"
+  }
+}

examples/error_boundary/e2e/playwright.config.ts

@@ -0,0 +1,77 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "./tests",
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !process.env.DEV,
+  /* Retry on CI only */
+  retries: process.env.DEV ? 0 : 2,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.DEV ? 1 : 1,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: [["html", { open: "never" }], ["list"]],
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: "http://127.0.0.1:8080",
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+
+    // {
+    //   name: "firefox",
+    //   use: { ...devices["Desktop Firefox"] },
+    // },
+
+    // {
+    //   name: "webkit",
+    //   use: { ...devices["Desktop Safari"] },
+    // },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ..devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: "cd ../ && trunk serve",
+  //   url: "http://127.0.0.1:8080",
+  //   reuseExistingServer: false, //!process.env.CI,
+  // },
+});

examples/error_boundary/e2e/tests/clear_number.spec.ts

@@ -0,0 +1,23 @@
+import { test, expect } from "@playwright/test";
+import { HomePage } from "./fixtures/home_page";
+
+test.describe("Clear Number", () => {
+  test("should see the error message", async ({ page }) => {
+    const ui = new HomePage(page);
+    await ui.goto();
+
+    await ui.clearInput();
+
+    await expect(ui.errorMessage).toHaveText("Not a number! Errors: ");
+  });
+  test("should see the error list", async ({ page }) => {
+    const ui = new HomePage(page);
+    await ui.goto();
+
+    await ui.clearInput();
+
+    await expect(ui.errorList).toHaveText(
+      "cannot parse integer from empty string"
+    );
+  });
+});

examples/error_boundary/e2e/tests/click_down_arrow.spec.ts

@@ -0,0 +1,17 @@
+import { test, expect } from "@playwright/test";
+import { HomePage } from "./fixtures/home_page";
+
+test.describe("Click Down Arrow", () => {
+  test("should see the negative number", async ({ page }) => {
+    const ui = new HomePage(page);
+    await ui.goto();
+
+    await ui.clickDownArrow();
+    await ui.clickDownArrow();
+    await ui.clickDownArrow();
+    await ui.clickDownArrow();
+    await ui.clickDownArrow();
+
+    await expect(ui.successMessage).toHaveText("You entered -5");
+  });
+});

examples/error_boundary/e2e/tests/click_up_arrow.spec.ts

@@ -0,0 +1,15 @@
+import { test, expect } from "@playwright/test";
+import { HomePage } from "./fixtures/home_page";
+
+test.describe("Click Up Arrow", () => {
+  test("should see the positive number", async ({ page }) => {
+    const ui = new HomePage(page);
+    await ui.goto();
+
+    await ui.clickUpArrow();
+    await ui.clickUpArrow();
+    await ui.clickUpArrow();
+
+    await expect(ui.successMessage).toHaveText("You entered 3");
+  });
+});

examples/error_boundary/e2e/tests/fixtures/home_page.ts

@@ -0,0 +1,56 @@
+import { expect, Locator, Page } from "@playwright/test";
+
+export class HomePage {
+  readonly page: Page;
+  readonly pageTitle: Locator;
+  readonly numberInput: Locator;
+  readonly successMessage: Locator;
+  readonly errorMessage: Locator;
+
+  readonly errorList: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+
+    this.pageTitle = page.locator("h1");
+    this.numberInput = page.getByLabel(
+      "Type a number (or something that's not a number!)"
+    );
+    this.successMessage = page.locator("label p");
+    this.errorMessage = page.locator("div p");
+    this.errorList = page.getByRole("list");
+  }
+
+  async goto() {
+    await this.page.goto("/");
+  }
+
+  async enterNumber(count: string, index: number = 0) {
+    await Promise.all([
+      this.numberInput.waitFor(),
+      this.numberInput.fill(count),
+    ]);
+  }
+
+  async clickUpArrow() {
+    await Promise.all([
+      this.numberInput.waitFor(),
+      this.numberInput.press("ArrowUp"),
+    ]);
+  }
+
+  async clickDownArrow() {
+    await Promise.all([
+      this.numberInput.waitFor(),
+      this.numberInput.press("ArrowDown"),
+    ]);
+  }
+
+  async clearInput() {
+    await Promise.all([
+      this.numberInput.waitFor(),
+      this.clickUpArrow(),
+      this.numberInput.press("Backspace"),
+    ]);
+  }
+}

examples/error_boundary/e2e/tests/open_app.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from "@playwright/test";
+import { HomePage } from "./fixtures/home_page";
+
+test.describe("Open App", () => {
+  test("should see the page title", async ({ page }) => {
+    const ui = new HomePage(page);
+    await ui.goto();
+
+    await expect(ui.pageTitle).toHaveText("Error Handling");
+  });
+});

examples/error_boundary/e2e/tests/type_number.spec.ts

@@ -0,0 +1,13 @@
+import { test, expect } from "@playwright/test";
+import { HomePage } from "./fixtures/home_page";
+
+test.describe("Type Number", () => {
+  test("should see the typed number", async ({ page }) => {
+    const ui = new HomePage(page);
+    await ui.goto();
+
+    await ui.enterNumber("7");
+
+    await expect(ui.successMessage).toHaveText("You entered 7");
+  });
+});

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

@@ -1,6 +1,6 @@
 use crate::errors::AppError;
 use cfg_if::cfg_if;
-use leptos::{Errors, *};
+use leptos::{logging::log, Errors, *};
 #[cfg(feature = "ssr")]
 use leptos_axum::ResponseOptions;
 

examples/errors_axum/src/main.rs

@@ -12,7 +12,7 @@ cfg_if! { if #[cfg(feature = "ssr")] {
         Router,
     };
     use errors_axum::*;
-    use leptos::*;
+    use leptos::{logging::log, *};
     use leptos_axum::{generate_route_list, LeptosRoutes};
 }}
 

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

@@ -16,7 +16,10 @@ actix-web = { version = "4", optional = true, features = ["macros"] }
 console_log = "1"
 console_error_panic_hook = "0.1"
 cfg-if = "1"
-leptos = { path = "../../leptos", features = ["nightly"] }
+leptos = { path = "../../leptos", features = [
+	"nightly",
+	"experimental-islands",
+] }
 leptos_meta = { path = "../../meta", features = ["nightly"] }
 leptos_actix = { path = "../../integrations/actix", optional = true }
 leptos_router = { path = "../../router", features = ["nightly"] }
@@ -41,6 +44,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 +97,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_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/main.rs

@@ -1,5 +1,5 @@
 use cfg_if::cfg_if;
-use leptos::*;
+use leptos::{logging::log, *};
 
 // boilerplate to run in different modes
 cfg_if! {

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"
+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>,
+}