feels so good to remove this

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

@@ -35,7 +35,7 @@ jobs:
             !examples/cargo-make
             !examples/gtk
             !examples/Makefile.toml
-            !examples/*.md
+            !examples/README.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/*.md
+            !examples/README.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 .md | 
+          grep -v examples/README.md | 
           grep -v examples/Makefile.toml | 
           grep -v examples/cargo-make | 
           grep -v examples/gtk | 

.github/workflows/publish-book.yml

@@ -1,37 +1,36 @@
 name: Deploy book
 on:
   push:
-    paths: ["docs/book/**"]
-    branches:
-      - main
+    tags:
+      - '*-?v[0-9]+*'
 
 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-rc2"
+version = "0.5.0-beta2"
 
 [workspace.dependencies]
-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" }
+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" }
 
 [profile.release]
 codegen-units = 1

benchmarks/Cargo.toml

@@ -5,13 +5,9 @@ edition = "2021"
 
 [dependencies]
 l021 = { package = "leptos", version = "0.2.1" }
-leptos = { path = "../leptos", features = [
-	"ssr",
-	"nightly",
-	"experimental-islands",
-] }
+leptos = { path = "../leptos", features = ["ssr"] }
 sycamore = { version = "0.8", features = ["ssr"] }
-yew = { version = "0.20", features = ["ssr"] }
+yew = { git = "https://github.com/yewstack/yew", features = ["ssr"] }
 tokio-test = "0.4"
 miniserde = "0.1"
 gloo = "0.8"

docs/book/src/01_introduction.md

@@ -1,22 +1,20 @@
 # 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,15 +23,13 @@ cargo init leptos-tutorial
 `cd` into your new `leptos-tutorial` project and add `leptos` as a dependency
 
 ```bash
-cargo add leptos@0.5.0-rc2 --features=csr,nightly
+cargo add leptos --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@0.5.0-rc2 --features=csr
+cargo add leptos --features=csr
 ```
 
 > Using `nightly` Rust, and the `nightly` feature in Leptos enables the function-call syntax for signal getters and setters that is used in most of this book.

docs/book/src/SUMMARY.md

@@ -47,4 +47,3 @@
 - [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

@@ -1,49 +0,0 @@
-# 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/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>(fallback: F, children: ChildrenFn) -> impl IntoView
+pub fn LoggedIn<F, IV>(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 `attr:` syntax:
+`<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:
 
 ```rust
 <Html
 	lang="he"
 	dir="rtl"
-	attr:data-theme="dark"
+	attributes=AdditionalAttributes::from(vec![("data-theme", "dark")])
 />
 ```
 

docs/book/src/reactivity/working_with_signals.md

@@ -65,34 +65,6 @@ 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.

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

@@ -101,44 +101,3 @@ 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,43 +153,6 @@ 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?

examples/Makefile.toml

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

examples/README.md

@@ -1,45 +1,7 @@
-# Examples README
-
-## Main Branch
+# Examples
 
 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 but 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 and not the current release.
 
-To see the examples as they were at the time of the `0.4.9` release, [click here](https://github.com/leptos-rs/leptos/tree/v0.4.9/examples).
-
-## 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_**)
+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).

examples/SSR_NOTES.md

@@ -1,68 +0,0 @@
-# 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,4 +1 @@
-extend = [
-    { path = "../cargo-make/main.toml" },
-    { path = "../cargo-make/trunk_server.toml" },
-]
+extend = [{ path = "../cargo-make/main.toml" }]

examples/animated_show/README.md

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

examples/cargo-make/cargo-leptos.toml

@@ -1,3 +1,5 @@
+extend = { path = "../cargo-make/client-process.toml" }
+
 [tasks.install-cargo-leptos]
 install_crate = { crate_name = "cargo-leptos", binary = "cargo-leptos", test_arg = "--help" }
 
@@ -27,6 +29,5 @@ 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,8 +23,13 @@ condition = { env_set = ["CLIENT_PROCESS_NAME"] }
 script = '''
   if [ -z $(pidof ${CLIENT_PROCESS_NAME}) ]; then
     echo "  Starting ${CLIENT_PROCESS_NAME}"
-    cargo make start-client ${@}
+    cargo make start-client ${@} & 
   else
     echo "  ${CLIENT_PROCESS_NAME} is already started"
   fi
 '''
+
+# ALIASES
+
+[tasks.dev]
+alias = "maybe-start-client"

examples/cargo-make/main.toml

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

examples/cargo-make/process.toml

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

@@ -1,34 +0,0 @@
-[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,3 +1,5 @@
+extend = { path = "../cargo-make/client-process.toml" }
+
 [env]
 CLIENT_PROCESS_NAME = "trunk"
 

examples/counter/Makefile.toml

@@ -1,5 +1,4 @@
 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!
 
-## Getting Started
+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.
 
-See the [Examples README](../README.md) for setup and run instructions.
+> If you don't have `trunk` installed, [click here for install instructions.](https://trunkrs.dev/)

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.87"
+wasm-bindgen = "=0.2.86"
 serde = { version = "1", features = ["derive"] }
 
 [features]

examples/counter_isomorphic/Makefile.toml

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

examples/counter_isomorphic/README.md

@@ -2,6 +2,42 @@
 
 This example demonstrates how to use a function isomorphically, to run a server side function from the browser and receive a result.
 
-## Getting Started
+## 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.
 
-See the [Examples README](../README.md) for setup and run instructions.
+## 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
+```

examples/counter_url_query/Makefile.toml

@@ -1,4 +1 @@
-extend = [
-    { path = "../cargo-make/main.toml" },
-    { path = "../cargo-make/trunk_server.toml" },
-]
+extend = [{ path = "../cargo-make/main.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.
 
-## Getting Started
+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.
 
-See the [Examples README](../README.md) for setup and run instructions.
+> If you don't have `trunk` installed, [click here for install instructions.](https://trunkrs.dev/)

examples/counter_without_macros/Makefile.toml

@@ -1,7 +1,6 @@
 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.
 
-## Getting Started
+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.
 
-See the [Examples README](../README.md) for setup and run instructions.
+Issue the `cargo make test-flow` command to run unit and wasm tests.

examples/counters/Makefile.toml

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

examples/counters/README.md

@@ -2,6 +2,8 @@
 
 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.
 
-## Getting Started
+## Client Side Rendering
 
-See the [Examples README](../README.md) for setup and run instructions.
+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/)

examples/counters/src/lib.rs

@@ -88,17 +88,9 @@ 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
-    // 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();
-    });
+    on_cleanup(|| log::debug!("deleted a row"));
 
     view! {
         <li>

examples/counters_stable/README.md

@@ -2,6 +2,8 @@
 
 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.
 
-## Getting Started
+## Client Side Rendering
 
-See the [Examples README](../README.md) for setup and run instructions.
+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/)

examples/counters_stable/src/lib.rs

@@ -91,18 +91,6 @@ 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,6 @@
 
 This example shows how to handle basic errors using Leptos.
 
-## Getting Started
+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.
 
-See the [Examples README](../README.md) for setup and run instructions.
+> If you don't have `trunk` installed, [click here for install instructions.](https://trunkrs.dev/)

examples/errors_axum/Makefile.toml

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

examples/errors_axum/README.md

@@ -1,7 +1,41 @@
 # Leptos Errors Demonstration with Axum
-
 This example demonstrates how Leptos Errors can work with an Axum backend on a server.
 
-## Getting Started
+## Client Side Rendering
+This example cannot be built as a trunk standalone CSR-only app as it requires the server to send status codes.
 
-See the [Examples README](../README.md) for setup and run instructions.
+## 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
+```

examples/fetch/Makefile.toml

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

examples/fetch/README.md

@@ -2,6 +2,8 @@
 
 This example shows how to fetch data from the client in WebAssembly.
 
-## Getting Started
+## Client Side Rendering
 
-See the [Examples README](../README.md) for setup and run instructions.
+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/)

examples/hackernews/Cargo.toml

@@ -16,10 +16,7 @@ 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",
-	"experimental-islands",
-] }
+leptos = { path = "../../leptos", features = ["nightly"] }
 leptos_meta = { path = "../../meta", features = ["nightly"] }
 leptos_actix = { path = "../../integrations/actix", optional = true }
 leptos_router = { path = "../../router", features = ["nightly"] }
@@ -44,12 +41,6 @@ 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"]]
@@ -97,5 +88,3 @@ lib-features = ["hydrate"]
 #
 # Optional. Defaults to false.
 lib-default-features = false
-
-lib-profile-release = "wasm-release"

examples/hackernews/Makefile.toml

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

examples/hackernews/README.md

@@ -2,6 +2,42 @@
 
 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
 
-## Getting Started
+## 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`.
 
-See the [Examples README](../README.md) for setup and run instructions.
+## 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
+```

examples/hackernews/src/api.rs

@@ -17,7 +17,8 @@ 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, e.g., we've navigated away from this page
+    // abort in-flight requests if the Scope is disposed
+    // i.e., if 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

@@ -80,7 +80,7 @@ pub fn Stories() -> impl IntoView {
                 <div>
                     <Transition
                         fallback=move || view! {  <p>"Loading..."</p> }
-                        set_pending
+                        set_pending=set_pending.into()
                     >
                         {move || match stories.get() {
                             None => None,

examples/hackernews_axum/Makefile.toml

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

examples/hackernews_axum/README.md

@@ -2,6 +2,42 @@
 
 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
+## 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`.
 
-See the [Examples README](../README.md) for setup and run instructions.
+## 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
+```

examples/hackernews_axum/src/api.rs

@@ -17,7 +17,8 @@ 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 e.g., we've navigated away from this page
+    // abort in-flight requests if the Scope is disposed
+    // i.e., if 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/routes/stories.rs

@@ -70,7 +70,7 @@ pub fn Stories() -> impl IntoView {
                 >
                     <a href=move || format!("/{}?page={}", story_type(), page() + 1)
                         aria-label="Next Page"
-                    >=
+                    >
                         "more >"
                     </a>
                 </span>
@@ -79,7 +79,7 @@ pub fn Stories() -> impl IntoView {
                 <div>
                     <Transition
                         fallback=move || view! { <p>"Loading..."</p> }
-                        set_pending
+                        set_pending=set_pending.into()
                     >
                         {move || match stories.get() {
                             None => None,

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

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

examples/hackernews_islands_axum/Cargo.toml

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

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

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

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

examples/hackernews_islands_axum/README.md

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

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

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

examples/hackernews_islands_axum/src/api.rs

@@ -1,62 +0,0 @@
-#![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

@@ -1,28 +0,0 @@
-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
-          view= move | (_, error)| {
-          let error_string = error.to_string();
-            view! {
-
-              <p>"Error: " {error_string}</p>
-            }
-          }
-      />
-    }
-    .into_view()
-}

examples/hackernews_islands_axum/src/fallback.rs

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

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

@@ -1,52 +0,0 @@
-#![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

@@ -1,47 +0,0 @@
-#[cfg(feature = "ssr")]
-mod ssr_imports {
-    pub use axum::{routing::get, Router};
-    pub use hackernews::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::*;
-    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(|| view! {  <App/> }).await;
-
-    // build our application with a route
-    let app = Router::new()
-        .route("/favicon.ico", get(file_and_error_handler))
-        .leptos_routes(&leptos_options, routes, || view! {  <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::*;
-    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

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

examples/hackernews_islands_axum/src/routes/nav.rs

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

@@ -1,164 +0,0 @@
-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
-                                        view=move |story: api::Story| {
-                                            view! {
-                                                <Story story/>
-                                            }
-                                        }
-                                    />
-                                </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

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

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

@@ -1,326 +0,0 @@
-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/js-framework-benchmark/Makefile.toml

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

examples/js-framework-benchmark/README.md

@@ -3,6 +3,6 @@
 This example is adoptation of code from [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark/tree/master/frameworks/keyed/leptos).
 This example creates a large table with randomized entries, it also shows usage of `template` macro and `For` component.
 
-## Getting Started
+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.
 
-See the [Examples README](../README.md) for setup and run instructions.
+> If you don't have `trunk` installed, [click here for install instructions.](https://trunkrs.dev/)

examples/leptos-tailwind-axum/.gitignore

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

examples/leptos-tailwind-axum/Makefile.toml

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

examples/leptos-tailwind-axum/README.md

@@ -2,6 +2,101 @@
 
 This is a template demonstrating how to integrate [TailwindCSS](https://tailwindcss.com/) with the [Leptos](https://github.com/leptos-rs/leptos) web framework, Axum server, and the [cargo-leptos](https://github.com/akesson/cargo-leptos) tool.
 
-## Getting Started
+To use it first of all you need to have `cargo-leptos` installed on your machine
 
-See the [Examples README](../README.md) for setup and run instructions.
+`cargo install --locked cargo-leptos`
+
+Then run
+
+`npm run watch` (This is a script which basically run the CLI tool to scan your template files for classes and build your CSS.)
+
+and
+
+`cargo leptos watch`
+
+in this directory.
+
+Open browser on [http://localhost:3000/](http://localhost:3000/)
+
+You can begin editing your app at `src/app.rs`.
+
+## Installing Tailwind
+
+You can install Tailwind using `npm`:
+
+```bash
+npm install -D tailwindcss
+```
+
+If you'd rather not use `npm`, you can install the Tailwind binary [here](https://github.com/tailwindlabs/tailwindcss/releases).
+
+## Setting up with VS Code and Additional Tools
+
+If you're using VS Code, add the following to your `settings.json`
+
+```json
+  "emmet.includeLanguages": {
+    "rust": "html",
+    "*.rs": "html"
+  },
+  "tailwindCSS.includeLanguages": {
+      "rust": "html",
+      "*.rs": "html"
+  },
+  "files.associations": {
+      "*.rs": "rust"
+  },
+  "editor.quickSuggestions": {
+    "other": "on",
+    "comments": "on",
+    "strings": true
+  },
+  "css.validate": false,
+```
+
+Install [Tailwind CSS Intellisense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss).
+
+    Install "VS Browser" extension, a browser at the right window.
+    Allow vscode Ports forward: 3000, 3001.
+
+## Notes about Tooling
+
+By default, `cargo-leptos` uses `nightly` Rust, `cargo-generate`, and `sass`. If you run into any trouble, you may need to install one or more of these tools.
+
+1. `rustup toolchain install nightly --allow-downgrade` - make sure you have Rust nightly
+2. `rustup default nightly` - setup nightly as default, or you can use rust-toolchain file later on
+3. `rustup target add wasm32-unknown-unknown` - add the ability to compile Rust to WebAssembly
+4. `cargo install cargo-generate` - install `cargo-generate` binary (should be installed automatically in future)
+5. `npm install -g sass` - install `dart-sass` (should be optional in future
+
+## Alternatives to cargo-leptos
+
+This crate can be run without `cargo-leptos`, using `wasm-pack` and `cargo`. To do so, you'll need to install some other tools. 0. `cargo install wasm-pack`
+
+1. 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.
+
+### 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`
+
+### Client Side Rendering
+
+You'll need to install trunk to client side render this bundle.
+
+1. `cargo install trunk`
+   Then the site can be served with `trunk serve --open`

examples/login_with_token_csr_only/Cargo.toml

@@ -1,5 +1,4 @@
 [workspace]
-resolver = "2"
 members = ["client", "api-boundary", "server"]
 
 [profile.release]

examples/login_with_token_csr_only/README.md

@@ -4,10 +4,20 @@ This example demonstrates a scenario of a client-side rendered application
 that uses an existing API that you cannot or do not want to change.
 The authentications of this example are done using an API token.
 
+## Run
+
+First start the example server:
+
+```
+cd server/ && cargo run
+```
+
+then use [`trunk`](https://trunkrs.dev) to serve the SPA:
+
+```
+cd client/ && trunk serve
+```
+
+finally you can visit the web application at `http://localhost:8080`
+
 The `api-boundary` crate contains data structures that are used by the server and the client.
-
-## Getting Started
-
-See the [Examples README](../README.md) for setup and run instructions.
-
-You will also need to run `cargo make stop` to end the server process.

examples/login_with_token_csr_only/client/Makefile.toml

@@ -1,16 +1,4 @@
-extend = [
-    { path = "../../cargo-make/main.toml" },
-    { path = "../../cargo-make/trunk_server.toml" },
-]
-
-[env]
-SERVER_PROCESS_NAME = "server"
+extend = { path = "../../cargo-make/main.toml" }
 
 [tasks.check-format]
 env = { LEPTOS_PROJECT_DIRECTORY = "../../../" }
-
-[tasks.start-server]
-cwd = "../server"
-script = '''
-cargo run &
-'''

examples/parent_child/Makefile.toml

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

examples/parent_child/README.md

@@ -9,6 +9,9 @@ This example highlights four different ways that child components can communicat
 3. `<ButtonC/>`: adding a simple event listener on the child component itself
 4. `<ButtonD/>`: providing a context that is used in the component (rather than prop drilling)
 
-## Getting Started
+## Client Side Rendering
 
-See the [Examples README](../README.md) for setup and run instructions.
+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/)

examples/router/README.md

@@ -2,6 +2,10 @@
 
 This example demonstrates how Leptos’s router works for client side routing.
 
-## Getting Started
+## Build and Run it
 
-See the [Examples README](../README.md) for setup and run instructions.
+```bash
+trunk serve --open
+```
+
+> If you don't have `trunk` installed, [click here for install instructions.](https://trunkrs.dev/)

examples/session_auth_axum/Makefile.toml

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

examples/session_auth_axum/README.md

@@ -2,6 +2,41 @@
 
 This example creates a basic todo app with an Axum backend that uses Leptos' server functions to call sqlx from the client and seamlessly run it on the server. It lets you login, signup, and submit todos as different users, or a guest.
 
-## Getting Started
+## Client Side Rendering
+This example cannot be built as a trunk standalone CSR-only app. Only the server may directly connect to the database.
 
-See the [Examples README](../README.md) for setup and run instructions.
+## 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
+```

examples/slots/Makefile.toml

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

examples/slots/README.md

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

examples/ssr_modes/Makefile.toml

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

examples/ssr_modes/README.md

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

examples/ssr_modes/src/app.rs

@@ -88,6 +88,9 @@ fn Post() -> impl IntoView {
         }
     });
 
+    // this view needs to take the `Scope` from the `<Suspense/>`, not
+    // from the parent component, so we take that as an argument and
+    // pass it in under the `<Suspense/>` so that it is correct
     let post_view = move || {
         post.and_then(|post| {
             view! {

examples/ssr_modes_axum/Makefile.toml

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

examples/ssr_modes_axum/README.md

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

examples/ssr_modes_axum/src/app.rs

@@ -88,6 +88,9 @@ fn Post() -> impl IntoView {
         }
     });
 
+    // this view needs to take the `Scope` from the `<Suspense/>`, not
+    // from the parent component, so we take that as an argument and
+    // pass it in under the `<Suspense/>` so that it is correct
     let post_view = move || {
         post.and_then(|post| {
             view! {
@@ -120,7 +123,7 @@ fn Post() -> impl IntoView {
                     </div>
                 }
             }>
-                {post_view}
+                {post_view()}
             </ErrorBoundary>
         </Suspense>
     }

examples/suspense_tests/README.md

@@ -1,11 +1,81 @@
-# Suspense Test Example
+<picture>
+    <source srcset="https://raw.githubusercontent.com/leptos-rs/leptos/main/docs/logos/Leptos_logo_Solid_White.svg" media="(prefers-color-scheme: dark)">
+    <img src="https://raw.githubusercontent.com/leptos-rs/leptos/main/docs/logos/Leptos_logo_RGB.svg" alt="Leptos Logo">
+</picture>
 
-This example demonstrates the `<Suspense/>` behavior.
+# Leptos Starter Template
 
-## Getting Started
+This is a template for use with the [Leptos](https://github.com/leptos-rs/leptos) web framework and the [cargo-leptos](https://github.com/akesson/cargo-leptos) tool.
 
-See the [Examples README](../README.md) for setup and run instructions.
+## Creating your template repo
 
-## Test Strategy
+If you don't have `cargo-leptos` installed you can install it with
 
-See the [E2E README](./e2e/README.md) to learn about the web testing strategy for this project.
+`cargo install cargo-leptos`
+
+Then run
+
+`cargo leptos new --git leptos-rs/start`
+
+to generate a new project template.
+
+`cd {projectname}`
+
+to go to your newly created project.
+
+Of course you should explore around the project structure, but the best place to start with your application code is in `src/app.rs`.
+
+## Running your project
+
+`cargo leptos watch`
+
+## Installing Additional Tools
+
+By default, `cargo-leptos` uses `nightly` Rust, `cargo-generate`, and `sass`. If you run into any trouble, you may need to install one or more of these tools.
+
+1. `rustup toolchain install nightly --allow-downgrade` - make sure you have Rust nightly
+2. `rustup default nightly` - setup nightly as default, or you can use rust-toolchain file later on
+3. `rustup target add wasm32-unknown-unknown` - add the ability to compile Rust to WebAssembly
+4. `cargo install cargo-generate` - install `cargo-generate` binary (should be installed automatically in future)
+5. `npm install -g sass` - install `dart-sass` (should be optional in future)
+
+## Executing a Server on a Remote Machine Without the Toolchain
+After running a `cargo leptos build --release` the minimum files needed are:
+
+1. The server binary located in `target/server/release`
+2. The `site` directory and all files within located in `target/site`
+
+Copy these files to your remote server. The directory structure should be:
+```text
+suspense_tests
+site/
+```
+Set the following enviornment variables (updating for your project as needed):
+```text
+LEPTOS_OUTPUT_NAME="suspense_tests"
+LEPTOS_SITE_ROOT="site"
+LEPTOS_SITE_PKG_DIR="pkg"
+LEPTOS_SITE_ADDR="127.0.0.1:3000"
+LEPTOS_RELOAD_PORT="3001"
+```
+Finally, run the server binary.
+
+## Testing
+
+This example includes quality checks and end-to-end testing.
+
+To get started run this once.
+
+```bash
+cargo make ci
+```
+
+To only run the UI tests...
+
+```bash
+cargo make start-webdriver
+cargo leptos watch # or cargo run...
+cargo make test-ui
+```
+
+_See the [E2E README](./e2e/README.md) for more information about the testing strategy._

examples/tailwind/README.md

@@ -2,11 +2,21 @@
 
 This is a template demonstrating how to integrate [TailwindCSS](https://tailwindcss.com/) with the [Leptos](https://github.com/leptos-rs/leptos) web framework and the [cargo-leptos](https://github.com/akesson/cargo-leptos) tool.
 
-## Getting Started
+If you don't have `cargo-leptos` installed you can install it with
 
-See the [Examples README](../README.md) for setup and run instructions.
+`cargo install --locked cargo-leptos`
 
-## Tailwind
+Then run
+
+`cargo leptos watch`
+
+in this directory.
+
+Open browser on [http://localhost:3000/](http://localhost:3000/)
+
+You can begin editing your app at `src/app.rs`.
+
+## Installing Tailwind
 
 You can install Tailwind using `npm`:
 
@@ -42,10 +52,56 @@ If you're using VS Code, add the following to your `settings.json`
 
 Install [Tailwind CSS Intellisense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss).
 
-Install [VS Browser](https://marketplace.visualstudio.com/items?itemName=Phu1237.vs-browser) extension (allows you to open a browser at the right window).
+    Install "VS Browser" extension, a browser at the right window.
+    Allow vscode Ports forward: 3000, 3001.
 
-Allow vscode Ports forward: 3000, 3001.
+## Notes about Tooling
 
-### Attribution
+By default, `cargo-leptos` uses `nightly` Rust, `cargo-generate`, and `sass`. If you run into any trouble, you may need to install one or more of these tools.
+
+1. `rustup toolchain install nightly --allow-downgrade` - make sure you have Rust nightly
+2. `rustup default nightly` - setup nightly as default, or you can use rust-toolchain file later on
+3. `rustup target add wasm32-unknown-unknown` - add the ability to compile Rust to WebAssembly
+4. `cargo install cargo-generate` - install `cargo-generate` binary (should be installed automatically in future)
+5. `npm install -g sass` - install `dart-sass` (should be optional in future
+
+## Alternatives to cargo-leptos
+
+This crate can be run without `cargo-leptos`, using `wasm-pack` and `cargo`. To do so, you'll need to install some other tools. 0. `cargo install wasm-pack`
+
+1. 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.
+
+### 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`
+
+### Client Side Rendering
+
+You'll need to install trunk to client side render this bundle.
+
+1. `cargo install trunk`
+   Then the site can be served with `trunk serve --open`
+
+## Attribution
 
 Many thanks to GreatGreg for putting together this guide. You can find the original, with added details, [here](https://github.com/leptos-rs/leptos/discussions/125).
+
+## Playwright Testing
+
+- Run `cargo make setup` to install dependencies
+- Run `cargo leptos test` or `cargo leptos end-to-end` to run the test

examples/tailwind_csr_trunk/Makefile.toml

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

examples/tailwind_csr_trunk/README.md

@@ -2,14 +2,22 @@
 
 This is a template demonstrating how to integrate [TailwindCSS](https://tailwindcss.com/) with the [Leptos](https://github.com/leptos-rs/leptos) web framework and the [trunk](https://github.com/thedodd/trunk) tool.
 
-## Getting Started
 
-See the [Examples README](../README.md) for setup and run instructions.
-
-## Tailwind
+Install Tailwind and build the CSS:
 
 `Trunk.toml` is configured to build the CSS automatically.
 
+Install trunk to client side render this bundle.
+
+`cargo install trunk`
+Then the site can be served with `trunk serve --open`
+
+The browser will automatically open [http://127.0.0.1:8080//](http://127.0.0.1:8080//)
+
+You can begin editing your app at `src/app.rs`.
+
+## Installing Tailwind
+
 You can install Tailwind using `npm`:
 
 ```bash
@@ -44,10 +52,20 @@ If you're using VS Code, add the following to your `settings.json`
 
 Install [Tailwind CSS Intellisense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss).
 
-Install [VS Browser](https://marketplace.visualstudio.com/items?itemName=Phu1237.vs-browser) extension (allows you to open a browser at the right window).
+Install [VS Browser](https://marketplace.visualstudio.com/items?itemName=Phu1237.vs-browser) extension (allows you to open a browser at the right window.
 
 Allow vscode Ports forward: 3000, 3001.
 
-### Attribution
+## Notes about Tooling
 
-Many thanks to GreatGreg for putting together this guide. You can find the original, with added details, [here](https://github.com/leptos-rs/leptos/discussions/125).
+By default, `cargo-leptos` uses `nightly` Rust, `cargo-generate`, and `sass`. If you run into any trouble, you may need to install one or more of these tools.
+
+1. `rustup toolchain install nightly --allow-downgrade` - make sure you have Rust nightly
+2. `rustup default nightly` - setup nightly as default, or you can use rust-toolchain file later on
+3. `rustup target add wasm32-unknown-unknown` - add the ability to compile Rust to WebAssembly
+4. `cargo install cargo-generate` - install `cargo-generate` binary (should be installed automatically in future)
+5. `npm install -g sass` - install `dart-sass` (should be optional in future
+
+
+## Attribution
+This is based on the original Tailwind example (../examples/tailwind)