Merge branch 'main' into server-fn-test-fix

This patch just clears the warnings listed below and ensures we get the benefits of a better package manger function.

```console
warning: some crates are on edition 2021 which defaults to `resolver = "2"`, but virtual workspaces default to `resolver = "1"`
note: to keep the current resolver, specify `workspace.resolver = "1"` in the workspace root's manifest
note: to use the edition 2021 resolver, specify `workspace.resolver = "2"` in the workspace root's manifest
```console

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,39 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**Leptos Dependencies**
+
+Please copy and paste the Leptos dependencies and features from your `Cargo.toml`.
+
+For example:
+```toml
+leptos = { version = "0.3", default-features = false, features = ["serde"] }
+leptos_axum = { version = "0.3", optional = true }
+leptos_meta = { version = "0.3", default-features = false }
+leptos_router = { version = "0.3", default-features = false }
+```
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,7 @@
+contact_links:
+  - name: Support or Question
+    url: https://github.com/leptos-rs/leptos/discussions/new?category=q-a
+    about: Do you need help figuring out how to do something, or want some help troubleshooting a bug? You can ask in our Discussions section.
+  - name: Discord Discussions
+    url: https://discord.gg/YdRAhS7eQB
+    about: For more informal, real-time conversation and support, you can join our Discord server.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/workflows/check-examples.yml

@@ -1,4 +1,4 @@
-name: Test
+name: Check examples
 
 on:
   push:
@@ -8,6 +8,7 @@ on:
 
 env:
   CARGO_TERM_COLOR: always
+  CARGO_REGISTRIES_CRATES_IO_PROTOCOL: sparse
 
 jobs:
   test:

.github/workflows/check-stable.yml

@@ -1,4 +1,4 @@
-name: Test
+name: Check stable
 
 on:
   push:
@@ -8,6 +8,7 @@ on:
 
 env:
   CARGO_TERM_COLOR: always
+  CARGO_REGISTRIES_CRATES_IO_PROTOCOL: sparse
 
 jobs:
   test:

.github/workflows/check.yml

@@ -1,4 +1,4 @@
-name: Test
+name: Check
 
 on:
   push:
@@ -8,6 +8,7 @@ on:
 
 env:
   CARGO_TERM_COLOR: always
+  CARGO_REGISTRIES_CRATES_IO_PROTOCOL: sparse
 
 jobs:
   test:

.github/workflows/fmt.yml

@@ -1,4 +1,4 @@
-name: Test
+name: Format
 
 on:
   push:

.github/workflows/test.yml

@@ -8,6 +8,7 @@ on:
 
 env:
   CARGO_TERM_COLOR: always
+  CARGO_REGISTRIES_CRATES_IO_PROTOCOL: sparse
 
 jobs:
   test:

.github/workflows/verify-examples.yml

@@ -0,0 +1,79 @@
+name: Verify Examples
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+env:
+  CARGO_TERM_COLOR: always
+
+jobs:
+  test:
+    name: Verify examples ${{ matrix.os }} (using rustc ${{ matrix.rust }}
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        rust:
+          - nightly
+        os:
+          - ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup Rust
+        uses: actions-rs/toolchain@v1
+        with:
+          toolchain: ${{ matrix.rust }}
+          override: true
+          components: rustfmt
+
+      - name: Add wasm32-unknown-unknown
+        run: rustup target add wasm32-unknown-unknown
+
+      - name: Setup cargo-make
+        uses: davidB/rust-cargo-make@v1
+
+      - name: Cargo generate-lockfile
+        run: cargo generate-lockfile
+
+      - uses: Swatinem/rust-cache@v2
+
+      - name: Install Trunk
+        uses: jetli/trunk-action@v0.4.0
+        with:
+          version: "latest"
+
+      - name: Print Trunk Version
+        run: trunk --version
+
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        id: pnpm-install
+        with:
+          version: 8
+          run_install: false
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Run verify-flow on all web examples
+        run: cargo make --profile=github-actions verify-examples

ARCHITECTURE.md

@@ -0,0 +1,231 @@
+# Architecture
+
+The goal of this document is to make it easier for contributors (and anyone
+who’s interested!) to understand the architecture of the framework.
+
+The whole Leptos framework is built from a series of layers. Each of these layers
+depends on the one below it, but each can be used independently from the ones
+built on top of it. While running a command like `cargo leptos new --git 
+leptos-rs/start` pulls in the whole framework, it’s important to remember that
+none of this is magic: each layer of that onion can be stripped away and
+reimplemented, configured, or adapted as needed, incrementally.
+
+> Everything that follows will assume you have a good working understanding
+> of the framework. There will be explanations of how some parts of it work
+> or fit together, but these are not docs. They assume you know what I’m
+> talking about.
+
+## The Reactive System: `leptos_reactive`
+
+The reactive system allows you to define dynamic values (signals),
+the relationships between them (derived signals and memos), and the side effects
+that run in response to them (effects).
+
+These concepts are completely independent of the DOM and can be used to drive
+any kind of reactive updates. The reactive system is based on the assumption
+that data is relatively cheap, and side effects are relatively expensive. Its
+goal is to minimize those side effects (like updating the DOM or making a network
+requests) as infrequently as possible.
+
+The reactive system is implemented as a single data structure that exists at
+runtime. In exchange for giving ownership over a value to the reactive system
+(by creating a signal), you receive a `Copy + 'static` identifier for its
+location in the reactive system. This enables most of the ergonomics of storing
+and sharing state, the use of callback closures without lifetime issues, etc.
+This is implemented by storing signals in a slotmap arena. The signal, memo,
+and scope types that are exposed to users simply carry around an index into that
+slotmap.
+
+> Items owned by the reactive system are dropped when the corresponding reactive
+> scope is dropped, i.e., when the component or section of the UI they’re
+> created in is removed. In a sense, Leptos implements a “garbage collector”
+> in which the lifetime of data is tied to the lifetime of the UI, not Rust’s
+> lexical scopes.
+
+## The DOM Renderer: `leptos_dom`
+
+The reactive system can be used to drive any kinds of side effects. One very
+common side effect is calling an imperative method, for example to update the
+DOM.
+
+The entire DOM renderer is built on top of the reactive system. It provides
+a builder pattern that can be used to create DOM elements dynamically.
+
+The renderer assumes, as a convention, that dynamic attributes, classes,
+styles, and children are defined by being passed a `Fn() -> T`, where their
+static equivalents just receive `T`. There’s nothing about this that is
+divinely ordained, but it’s a useful convention because it allows us to use
+zero-overhead derived signals as one of several ways to indicate dynamic
+content.
+
+`leptos_dom` also contains code for server-side rendering of the same
+UI views to HTML, either for out-of-order streaming (`src/ssr.rs`) or
+in-order streaming/async rendering (`src/ssr_in_order.rs`).
+
+## The Macros: `leptos_macro`
+
+It’s entirely possible to write Leptos code with no macros at all. The
+`view` and `component` macros, the most common, can be replaced by
+the builder syntax and simple functions (see the `counter_without_macros`
+example). But the macros enable a JSX-like syntax for describing views.
+
+This package also contains the `Params` derive macro used for typed
+queries and route params in the router.
+
+### Macro-based Optimizations
+
+Leptos 0.0.x was built much more heavily on macros. Taking its cues  
+from SolidJS, the `view` macro emitted different code for CSR, SSR, and
+hydration, optimizing each. The CSR/hydrate versions worked by compiling
+the view to an HTML template string, cloning that `<template>`, and
+traversing the DOM to set up reactivity. The SSR version worked similarly
+by compiling the static parts of the view to strings at compile time,
+reducing the amount of work that needed to be done on each request.
+
+Proc macros are hard, and this system was brittle. 0.1 introduced a
+more robust renderer, including the builder syntax, and rebuilt the `view`
+macro to use that builder syntax instead. It moved the optimized-but-buggy
+CSR version of the macro to a more-limited `template` macro.
+
+The `view` macro now separately optimizes SSR to use the same static-string
+optimizations, which (by our benchmarks) makes Leptos about 3-4x faster
+than similar Rust frontend frameworks in its HTML rendering.
+
+> The optimization is pretty straightforward. Consider the following view:
+>
+> ```rust
+> view! { cx,
+>   <main class="text-center">
+>     <div class="flex-col">
+>       <button>"Click me."</button>
+>       <p class="italic">"Text."</p>
+>     </div>
+>   </main>
+> }
+> ```
+>
+> Internally, with the builder this is something like
+>
+> ```rust
+> Element {
+>   tag: "main",
+>   attrs: vec![("class", "text-center")],
+>   children: vec![
+> 	  Element {
+> 		tag: "div",
+> 		attrs: vec![("class", "flex-col")],
+>       children: vec![
+>         Element {
+> 	        tag: "button",
+> 			attrs: vec![],
+> 			children: vec!["Click me"]
+>         },
+>         Element {
+> 	        tag: "p",
+> 			attrs: vec![("class", "italic")],
+> 			children: vec!["Text"]
+>         }
+>       ]
+> 	  }
+>   ]
+> }
+> ```
+>
+> This is a _bunch_ of small allocations and separate strings,
+> and in early 0.1 versions we used a `SmallVec` for children and
+> attributes and actually caused some stack overflows.
+>
+> But if you look at the view itself you can see that none of this
+> will _ever_ change. So we can actually optimize it at compile
+> time to a single `&'static str`:
+>
+> ```rust
+> r#"<main class="text-center">
+>     <div class="flex-col">
+>       <button>"Click me."</button>
+>       <p class="italic">"Text."</p>
+>     </div>
+>   </main>"#
+> ```
+
+## Server Functions (`leptos_server`, `server_fn`, and `server_fn_macro`)
+
+Server functions are a framework-agnostic shorthand for converting
+a function, whose body can only be run on the server, into an ad hoc
+REST API endpoint, and then generating code on the client to call that
+endpoint when you call the function.
+
+These are inspired by Solid/Bling’s `server$` functions, and there’s
+similar work being done in a number of other JavaScript frameworks.
+
+RPC is not a new idea, but these kinds of server functions may be.
+Specifically, by using web standards (defaulting to `POST`/`GET` requests
+with URL-encoded form data) they allow easy graceful degradation and the
+use of the `<form>` element.
+
+This function is split across three packages so that `server_fn` and
+`server_fn_macro` can be used by other frameworks. `leptos_server`
+includes some Leptos-specific reactive functionality (like actions).
+
+## `leptos`
+
+This package is built on and reexports most of the layers already
+mentioned, and implements a number of control-flow components (`<Show/>`,
+`<ErrorBoundary/>`, `<For/>`, `<Suspense/>`, `<Transition/>`) that use
+public APIs of the other packages.
+
+This is the main entrypoint for users, but is relatively light itself.
+
+## `leptos_meta`
+
+This package exists to allow you to work with tags normally found in
+the `<head>`, from within your components.
+
+It is implemented as a distinct package, rather than part of
+`leptos_dom`, on the principle that “what can be implemented in userland,
+should be.” The framework can be used without it, so it’s not in core.
+
+## `leptos_router`
+
+The router originates as a direct port of `solid-router`, which is the
+origin of most of its terminology, architecture, and route-matching logic.
+
+Subsequent developments (like animated routing, and managing route transitions
+given the lack of `useTransition` in Leptos) have caused it to diverge
+slightly from Solid’s exact code, but it is still very closely related.
+
+The core principle here is “nested routing,” dividing a single page
+into independently-rendered parts. This is described in some detail in the docs.
+
+Like `leptos_meta`, it is implemented as a distinct package, because it
+can be replaced with another router or with none. The framework can be used
+without it, so it’s not in core.
+
+## Server Integrations
+
+The server integrations are the most “frameworky” layer of the whole framework.
+These **do** assume the use of `leptos`, `leptos_router`, and `leptos_meta`.
+They specifically draw routing data from `leptos_router`, and inject the
+metadata from `leptos_meta` into the `<head>` appropriately.
+
+But of course, if you one day create `leptos-helmet` and `leptos-better-router`,
+you can create new server integrations that plug them into the SSR rendering
+methods from `leptos_dom` instead. Everything involved is quite modular.
+
+These packages essentially provide helpers that save the templates and user apps
+from including a huge amount of boilerplate to connect the various other packages
+correctly. Again, early versions of the framework examples are illustrative here
+for reference: they include large amounts of manual SSR route handling, etc.
+
+## `cargo-leptos` helpers
+
+`leptos_config` and `leptos_hot_reload` exist to support two different features
+of `cargo-leptos`, namely its configuration and its view-patching/hot-
+reloading features.
+
+It’s important to say that the main feature `cargo-leptos` remains its ability
+to conveniently tie together different build tooling, compiling your app to
+WASM for the browser, building the server version, pulling in SASS and
+Tailwind, etc. It is an extremely good build tool, not a magic formula. Each
+of the examples includes instructions for how to run the examples without
+`cargo-leptos`.

CONTRIBUTING.md

@@ -0,0 +1,75 @@
+# Contributing to Leptos
+
+Thanks for your interesting in contributing to Leptos! This is a truly
+community-driven framework, and while we have a central maintainer (@gbj)
+large parts of the renderer, reactive system, and server integrations have
+all been written by other contributors. Contributions are always welcome.
+
+Participation in this community is governed by a [Code of Conduct](./CODE_OF_CONDUCT.md).
+Some of the most active conversations around development take place on our
+[Discord server](https://discord.gg/YdRAhS7eQB).
+
+This guide seeks to
+
+- describe some of the framework’s values (in a technical, not an ethical, sense)
+- provide a high-level overview of how the pieces of the framework fit together
+- orient you to the organization of this repository
+
+## Values
+
+Leptos, as a framework, reflects certain technical values:
+
+- **Expose primitives rather than imposing patterns.** Provide building blocks
+  that users can combine together to build up more complex behavior, rather than
+  requiring users follow certain templates, file formats, etc. e.g., components
+  are defined as functions, rather than a bespoke single-file comonent format.
+  The reactive system feeds into the rendering system, rather than being defined
+  by it.
+- **Bottom-up over top-down.** If you envision a user’s application as a tree
+  (like an HTML document), push meaning toward the leaves of the tree. e.g., If data
+  needs to be loaded, load it in a granular primitive (resources) rather than a
+  route- or page-level data structure.
+- **Performance by default.** When possible, users should only pay for what they
+  use. e.g., we don’t make all component props reactive by default. This is
+  because doing so would force the overhead of a reactive prop onto props that don’t
+  need to be reactive.
+- **Full-stack performance.** Performance can’t be limited to a single metric,
+  whether that’s a DOM rendering benchmark, WASM binary size, or server response
+  time. Use methods like HTTP streaming and progressive enhancement to enable
+  applications to load, become interactive, and respond as quickly as possible.
+- **Use safe Rust.** There’s no need for `unsafe` Rust in the framework, and
+  avoiding it at all costs reduces the maintenance and testing burden significantly.
+- **Embrace Rust semantics.** Especially in things like UI templating, use Rust
+  semantics or extend them in a predictable way with control-flow components
+  rather than overloading the meaning of Rust terms like `if` or `for` in a
+  framework-speciic way.
+- **Enhance ergonomics without obfuscating what’s happening.** This is by far
+  the hardest to achieve. It’s often the case that adding additional layers to
+  improve DX (like a custom build tool and starter templates) comes across as
+  “too magic” to some people who haven’t had to build the same things manually.
+  When possible, make it easier to see how the pieces fit together, without
+  sacrificing the improved DX.
+
+## Processes
+
+We do not have PR templates or formal processes for approving PRs. But there
+are a few guidelines that will make it a better experience for everyone:
+
+- Run `cargo fmt` before submitting your code.
+- Keep PRs limited to addressing one feature or one issue, in general. In some
+  cases (e.g., “reduce allocations in the reactive system”) this may touch a number
+  of different areas, but is still conceptually one thing.
+- If it’s an unsolicited PR not linked to an open issue, please include a
+  specific explanation for what it’s trying to achieve. For example: “When I
+  was trying to deploy my app under _circumstances X_, I found that the way
+  _function Z_ was implemented caused _issue Z_. This PR should fix that by
+  _solution._”
+- Our CI tests every PR against all the existing examples, sometimes requiring
+  compilation for both server and client side, etc. It’s thorough but slow. If
+  you want to run CI locally to reduce frustration, you can do that by installing
+  `cargo-make` and using `cargo make check && cargo make test && cargo make 
+check-examples`.
+
+## Architecture
+
+See [ARCHITECTURE.md](./ARCHITECTURE.md).

Cargo.toml

@@ -1,4 +1,5 @@
 [workspace]
+resolver="2"
 members = [
   # core
   "leptos",

README.md

@@ -8,6 +8,9 @@
 [![Discord](https://img.shields.io/discord/1031524867910148188?color=%237289DA&label=discord)](https://discord.gg/YdRAhS7eQB)
 [![Matrix](https://img.shields.io/badge/Matrix-leptos-grey?logo=matrix&labelColor=white&logoColor=black)](https://matrix.to/#/#leptos:matrix.org)
 
+
+[Website](https://leptos.dev) | [Book](https://leptos-rs.github.io/leptos/) | [Docs.rs](https://docs.rs/leptos/latest/leptos/) | [Playground](https://codesandbox.io/p/sandbox/leptos-rtfggt?file=%2Fsrc%2Fmain.rs%3A1%2C1) | [Discord](https://discord.gg/YdRAhS7eQB)
+
 # Leptos
 
 ```rust

docs/book/src/14_create_effect.md

@@ -1,112 +1 @@
-# Responding to Changes with `create_effect`
-
-Believe it or not, we’ve made it this far without having mentioned half of the reactive system: effects.
-
-Leptos is built on a fine-grained reactive system, which means that individual reactive values (“signals,” sometimes known as observables) trigger rerunning the code that reacts to them (“effects,” sometimes known as observers). These two halves of the reactive system are inter-dependent. Without effects, signals can change within the reactive system but never be observed in a way that interacts with the outside world. Without signals, effects run once but never again, as there’s no observable value to subscribe to.
-
-[`create_effect`](https://docs.rs/leptos_reactive/latest/leptos_reactive/fn.create_effect.html) takes a function as its argument. It immediately runs the function. If you access any reactive signal inside that function, it registers the fact that the effect depends on that signal with the reactive runtime. Whenever one of the signals that the effect depends on changes, the effect runs again.
-
-```rust
-let (a, set_a) = create_signal(cx, 0);
-let (b, set_b) = create_signal(cx, 0);
-
-create_effect(cx, move |_| {
-  // immediately prints "Value: 0" and subscribes to `a`
-  log::debug!("Value: {}", a());
-});
-```
-
-The effect function is called with an argument containing whatever value it returned the last time it ran. On the initial run, this is `None`.
-
-By default, effects **do not run on the server**. This means you can call browser-specific APIs within the effect function without causing issues. If you need an effect to run on the server, use [`create_isomorphic_effect`](https://docs.rs/leptos_reactive/latest/leptos_reactive/fn.create_isomorphic_effect.html).
-
-## Autotracking and Dynamic Dependencies
-
-If you’re familiar with a framework like React, you might notice one key difference. React and similar frameworks typically require you to pass a “dependency array,” an explicit set of variables that determine when the effect should rerun.
-
-Because Leptos comes from the tradition of synchronous reactive programming, we don’t need this explicit dependency list. Instead, we automatically track dependencies depending on which signals are accessed within the effect.
-
-This has two effects (no pun intended). Dependencies are
-
-1. **Automatic**: You don’t need to maintain a dependency list, or worry about what should or shouldn’t be included. The framework simply tracks which signals might cause the effect to rerun, and handles it for you.
-2. **Dynamic**: The dependency list is cleared and updated every time the effect runs. If your effect contains a conditional (for example), only signals that are used in the current branch are tracked. This means that effects rerun the absolute minimum number of times.
-
-> If this sounds like magic, and if you want a deep dive into how automatic dependency tracking works, [check out this video](https://www.youtube.com/watch?v=GWB3vTWeLd4). (Apologies for the low volume!)
-
-## Effects as Zero-Cost-ish Abstraction
-
-While they’re not a “zero-cost abstraction” in the most technical sense—they require some additional memory use, exist at runtime, etc.—at a higher level, from the perspective of whatever expensive API calls or other work you’re doing within them, effects are a zero-cost abstraction. They rerun the absolute minimum number of times necessary, given how you’ve described them.
-
-Imagine that I’m creating some kind of chat software, and I want people to be able to display their full name, or just their first name, and to notify the server whenever their name changes:
-
-```rust
-let (first, set_first) = create_signal(cx, String::new());
-let (last, set_last) = create_signal(cx, String::new());
-let (use_last, set_use_last) = create_signal(cx, true);
-
-// this will add the name to the log
-// any time one of the source signals changes
-create_effect(cx, move |_| {
-    log(
-        cx,
-        if use_last() {
-            format!("{} {}", first(), last())
-        } else {
-            first()
-        },
-    )
-});
-```
-
-If `use_last` is `true`, effect should rerun whenever `first`, `last`, or `use_last` changes. But if I toggle `use_last` to `false`, a change in `last` will never cause the full name to change. In fact, `last` will be removed from the dependency list until `use_last` toggles again. This saves us from sending multiple unnecessary requests to the API if I change `last` multiple times while `use_last` is still `false`.
-
-## To `create_effect`, or not to `create_effect`?
-
-Effects are intended to run _side-effects_ of the system, not to synchronize state _within_ the system. In other words: don’t write to signals within effects.
-
-If you need to define a signal that depends on the value of other signals, use a derived signal or [`create_memo`](https://docs.rs/leptos_reactive/latest/leptos_reactive/fn.create_memo.html).
-
-If you need to synchronize some reactive value with the non-reactive world outside—like a web API, the console, the filesystem, or the DOM—create an effect.
-
-> If you’re curious for more information about when you should and shouldn’t use `create_effect`, [check out this video](https://www.youtube.com/watch?v=aQOFJQ2JkvQ) for a more in-depth consideration!
-
-## Effects and Rendering
-
-We’ve managed to get this far without mentioning effects because they’re built into the Leptos DOM renderer. We’ve seen that you can create a signal and pass it into the `view` macro, and it will update the relevant DOM node whenever the signal changes:
-
-```rust
-let (count, set_count) = create_signal(cx, 0);
-
-view! { cx,
-    <p>{count}</p>
-}
-```
-
-This works because the framework essentially creates an effect wrapping this update. You can imagine Leptos translating this view into something like this:
-
-```rust
-let (count, set_count) = create_signal(cx, 0);
-
-// create a DOM element
-let p = create_element("p");
-
-// create an effect to reactively update the text
-create_effect(cx, move |prev_value| {
-    // first, access the signal’s value and convert it to a string
-    let text = count().to_string();
-
-    // if this is different from the previous value, update the node
-    if prev_value != Some(text) {
-        p.set_text_content(&text);
-    }
-
-    // return this value so we can memoize the next update
-    text
-});
-```
-
-Every time `count` is updated, this effect wil rerun. This is what allows reactive, fine-grained updates to the DOM.
-
-[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/serene-thompson-40974n?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A2%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A2%7D%5D)
-
-<iframe src="https://codesandbox.io/p/sandbox/serene-thompson-40974n?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A2%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A2%7D%5D" width="100%" height="1000px" style="max-height: 100vh"></iframe>
+# Responding to Changes with create_effect

docs/book/src/15_global_state.md

@@ -1,8 +1,8 @@
 # Global State Management
 
-So far, we've only been working with local state in components
-We've only seen how to communicate between parent and child components
-But there are also more general ways to manage global state
+So far, we've only been working with local state in components, and we’ve seen how to coordinate state between parent and child components. On occasion, there are times where people look for a more general solution for global state management that can work throughout an application.
+
+In general, **you do not need this chapter.** The typical pattern is to compose your application out of components, each of which manages its own local state, not to store all state in a global structure. However, there are some cases (like theming, saving user settings, or sharing data between components in different parts of your UI) in which you may want to use some kind of global state management.
 
 The three best approaches to global state are
 
@@ -12,19 +12,17 @@ The three best approaches to global state are
 
 ## Option #1: URL as Global State
 
-The next few sections of the tutorial will be about the router.
-So for now, we'll just look at options #2 and #3.
+In many ways, the URL is actually the best way to store global state. It can be accessed from any component, anywhere in your tree. There are native HTML elements like `<form>` and `<a>` that exist solely to update the URL. And it persists across page reloads and between devices; you can share a URL with a friend or send it from your phone to your laptop and any state stored in it will be replicated.
+
+The next few sections of the tutorial will be about the router, and we’ll get much more into these topics.
+
+But for now, we'll just look at options #2 and #3.
 
 ## Option #2: Passing Signals through Context
 
-In virtual DOM libraries like React, using the Context API to manage global
-state is a bad idea: because the entire app exists in a tree, changing
-some value provided high up in the tree can cause the whole app to render.
+In the section on [parent-child communication](view/08_parent_child.md), we saw that you can use `provide_context` to pass signal from a parent component to a child, and `use_context` to read it in the child. But `provide_context` works across any distance. If you want to create a global signal that holds some piece of state, you can provide it and access it via context anywhere in the descendants of the component where you provide it.
 
-In fine-grained reactive libraries like Leptos, this is simply not the case.
-You can create a signal in the root of your app and pass it down to other
-components using provide_context(). Changing it will only cause rerendering
-in the specific places it is actually used, not the whole app.
+A signal provided via context only causes reactive updates where it is read, not in any of the components in between, so it maintains the power of fine-grained reactive updates, even at a distance.
 
 We start by creating a signal in the root of the app and providing it to
 all its children and descendants using `provide_context`.
@@ -81,61 +79,72 @@ fn FancyMath(cx: Scope) -> impl IntoView {
 }
 ```
 
-This kind of “provide a signal in a parent, consume it in a child” should be familiar
-from the chapter on [parent-child interactions](./view/08_parent_child.md). The same
-pattern you use to communicate between parents and children works for grandparents and
-grandchildren, or any ancestors and descendants: in other words, between “global” state
-in the root component of your app and any other components anywhere else in the app.
-
-Because of the fine-grained nature of updates, this is usually all you need. However,
-in some cases with more complex state changes, you may want to use a slightly more
-structured approach to global state.
-
-## Option #3: Create a Global State Struct
-
-You can use this approach to build a single global data structure
-that holds the state for your whole app, and then access it by
-taking fine-grained slices using
-[`create_slice`](https://docs.rs/leptos/latest/leptos/fn.create_slice.html)
-or [`create_memo`](https://docs.rs/leptos/latest/leptos/fn.create_memo.html),
-so that changing one part of the state doesn't cause parts of your
-app that depend on other parts of the state to change.
-
-You can begin by defining a simple state struct:
+Note that this same pattern can be applied to more complex state. If you have multiple fields you want to update independently, you can do that by providing some struct of signals:
 
 ```rust
-#[derive(Default, Clone, Debug)]
+#[derive(Copy, Clone, Debug)]
 struct GlobalState {
-    count: u32,
-    name: String,
+    count: RwSignal<i32>,
+    name: RwSignal<String>
 }
-```
 
-Provide it in the root of your app so it’s available everywhere.
+impl GlobalState {
+    pub fn new(cx: Scope) -> Self {
+        Self {
+            count: create_rw_signal(cx, 0),
+            name: create_rw_signal(cx, "Bob".to_string())
+        }
+    }
+}
 
-```rust
 #[component]
 fn App(cx: Scope) -> impl IntoView {
-    // we'll provide a single signal that holds the whole state
-    // each component will be responsible for creating its own "lens" into it
-    let state = create_rw_signal(cx, GlobalState::default());
-    provide_context(cx, state);
+    provide_context(cx, GlobalState::new(cx));
 
-    // ...
+    // etc.
 }
 ```
 
-Then child components can access “slices” of that state with fine-grained
-updates via `create_slice`. Each slice signal only updates when the particular
-piece of the larger struct it accesses updates. This means you can create a single
-root signal, and then take independent, fine-grained slices of it in different
-components, each of which can update without notifying the others of changes.
+## Option #3: Create a Global State Struct and Slices
+
+You may find it cumbersome to wrap each field of a structure in a separate signal like this. In some cases, it can be useful to create a plain struct with non-reactive fields, and then wrap that in a signal.
+
+```rust
+#[derive(Copy, Clone, Debug, Default)]
+struct GlobalState {
+    count: i32,
+    name: String
+}
+
+#[component]
+fn App(cx: Scope) -> impl IntoView {
+    provide_context(cx, create_rw_signal(GlobalState::default()));
+
+    // etc.
+}
+```
+
+But there’s a problem: because our whole state is wrapped in one signal, updating the value of one field will cause reactive updates in parts of the UI that only depend on the other.
+
+```rust
+let state = expect_context::<RwSignal<GlobalState>>(cx);
+view! { cx,
+    <button on:click=move |_| state.update(|n| *n += 1)>"+1"</button>
+    <p>{move || state.with(|state| state.name.clone())}</p>
+}
+```
+
+In this example, clicking the button will cause the text inside `<p>` to be updated, cloning `state.name` again! Because signals are the atomic unit of reactivity, updating any field of the signal triggers updates to everything that depends on the signal.
+
+There’s a better way. You can use take fine-grained, reactive slices by using [`create_memo`](https://docs.rs/leptos/latest/leptos/fn.create_memo.html) or [`create_slice`](https://docs.rs/leptos/latest/leptos/fn.create_slice.html) (which uses `create_memo` but also provides a setter). “Memoizing” a value means creating a new reactive value which will only update when it changes. “Memoizing a slice” means creating a new reactive value which will only update when some field of the state struct updates.
+
+Here, instead of reading from the state signal directly, we create “slices” of that state with fine-grained updates via `create_slice`. Each slice signal only updates when the particular piece of the larger struct it accesses updates. This means you can create a single root signal, and then take independent, fine-grained slices of it in different components, each of which can update without notifying the others of changes.
 
 ```rust
 /// A component that updates the count in the global state.
 #[component]
 fn GlobalStateCounter(cx: Scope) -> impl IntoView {
-    let state = use_context::<RwSignal<GlobalState>>(cx).expect("state to have been provided");
+    let state = expect_context::<RwSignal<GlobalState>>(cx);
 
     // `create_slice` lets us create a "lens" into the data
     let (count, set_count) = create_slice(
@@ -169,6 +178,8 @@ somewhere else that only takes `state.name`, clicking the button won’t cause
 that other slice to update. This allows you to combine the benefits of a top-down
 data flow and of fine-grained reactive updates.
 
+> **Note**: There are some significant drawbacks to this approach. Both signals and memos need to own their values, so a memo will need to clone the field’s value on every change. The most natural way to manage state in a framework like Leptos is always to provide signals that are as locally-scoped and fine-grained as they can be, not to hoist everything up into global state. But when you _do_ need some kind of global state, `create_slice` can be a useful tool.
+
 [Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/1-basic-component-forked-8bte19?selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A2%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A2%7D%5D&file=%2Fsrc%2Fmain.rs)
 
 <iframe src="https://codesandbox.io/p/sandbox/1-basic-component-forked-8bte19?selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A2%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A2%7D%5D&file=%2Fsrc%2Fmain.rs" width="100%" height="1000px" style="max-height: 100vh"></iframe>

docs/book/src/SUMMARY.md

@@ -12,7 +12,10 @@
   - [Error Handling](./view/07_errors.md)
   - [Parent-Child Communication](./view/08_parent_child.md)
   - [Passing Children to Components](./view/09_component_children.md)
-- [Interlude: Reactivity and Functions](./interlude_functions.md)
+- [Reactivity](./reactivity/README.md)
+  - [Working with Signals](./reactivity/working_with_signals.md)
+  - [Responding to Changes with `create_effect`](./reactivity/14_create_effect.md)
+  - [Interlude: Reactivity and Functions](./reactivity/interlude_functions.md)
 - [Testing](./testing.md)
 - [Async](./async/README.md)
   - [Loading Data with Resources](./async/10_resources.md)
@@ -29,7 +32,7 @@
   - [`<A/>`](./router/19_a.md)
   - [`<Form/>`](./router/20_form.md)
 - [Interlude: Styling](./interlude_styling.md)
-- [Metadata]()
+- [Metadata](./metadata.md)
 - [Server Side Rendering](./ssr/README.md)
   - [`cargo-leptos`](./ssr/21_cargo_leptos.md)
   - [The Life of a Page Load](./ssr/22_life_cycle.md)
@@ -37,16 +40,9 @@
   - [Hydration Bugs](./ssr/24_hydration_bugs.md)
 - [Working with the Server](./server/README.md)
   - [Server Functions](./server/25_server_functions.md)
-  - [Request/Response]()
-  - [Extractors]()
-    - [Axum]()
-    - [Actix]()
-  - [Headers]()
-  - [Cookies]()
-- [Building Full-Stack Apps]()
-  - [Actions]()
-  - [Forms]()
-  - [`<ActionForm/>`s]()
-  - [Turning off WebAssembly: Progressive Enhancement and Graceful Degradation]()
-- [Advanced Reactivity]()
+  - [Extractors](./server/26_extractors.md)
+  - [Responses and Redirects](./server/27_response.md)
+- [Progressive Enhancement and Graceful Degradation](./progressive_enhancement/README.md)
+  - [`<ActionForm/>`s](./progressive_enhancement/action_form.md)
+- [Deployment]()
 - [Appendix: Optimizing WASM Binary Size](./appendix_binary_size.md)

docs/book/src/metadata.md

@@ -0,0 +1,49 @@
+# Metadata
+
+So far, everything we’ve rendered has been inside the `<body>` of the HTML document. And this makes sense. After all, everything you can see on a web page lives inside the `<body>`.
+
+However, there are plenty of occasions where you might want to update something inside the `<head>` of the document using the same reactive primitives and component patterns you use for your UI.
+
+That’s where the [`leptos_meta`](https://docs.rs/leptos_meta/latest/leptos_meta/) package comes in.
+
+## Metadata Components
+
+`leptos_meta` provides special components that let you inject data from inside components anywhere in your application into the `<head>`:
+
+[`<Title/>`](https://docs.rs/leptos_meta/latest/leptos_meta/fn.Title.html) allows you to set the document’s title from any component. It also takes a `formatter` function that can be used to apply the same format to the title set by other pages. So, for example, if you put `<Title formatter=|text| format!("{text} — My Awesome Site")/>` in your `<App/>` component, and then `<Title text="Page 1"/>` and `<Title text="Page 2"/>` on your routes, you’ll get `Page 1 — My Awesome Site` and `Page 2 — My Awesome Site`.
+
+[`<Link/>`](https://docs.rs/leptos_meta/latest/leptos_meta/fn.Link.html) takes the standard attributes of the `<link>` element.
+
+[`<Stylesheet/>`](https://docs.rs/leptos_meta/latest/leptos_meta/fn.Stylesheet.html) creates a `<link rel="stylesheet">` with the `href` you give.
+
+[`<Style/>`](https://docs.rs/leptos_meta/latest/leptos_meta/fn.Style.html) creates a `<style>` with the children you pass in (usually a string). You can use this to import some custom CSS from another file at compile time `<Style>{include_str!("my_route.css")}</Style>`.
+
+[`<Meta/>`](https://docs.rs/leptos_meta/latest/leptos_meta/fn.Meta.html) lets you set `<meta>` tags with descriptions and other metadata.
+
+## `<Script/>` and `<script>`
+
+`leptos_meta` also provides a [`<Script/>`](https://docs.rs/leptos_meta/latest/leptos_meta/fn.Script.html) component, and it’s worth pausing here for a second. All of the other components we’ve considered inject `<head>`-only elements in the `<head>`. But a `<script>` can also be included in the body.
+
+There’s a very simple way to determine whether you should use a capital-S `<Script/>` component or a lowercase-s `<script>` element: the `<Script/>` component will be rendered in the `<head>`, and the `<script>` element will be rendered wherever in your the `<body>` of your user interface you put in, alongside other normal HTML elements. These cause JavaScript to load and run at different times, so use whichever is appropriate to your needs.
+
+## `<Body/>` and `<Html/>`
+
+There are even a couple elements designed to make semantic HTML and styling easier. [`<Html/>`](https://docs.rs/leptos_meta/latest/leptos_meta/fn.Html.html) lets you set the `lang` and `dir` on your `<html>` tag from your application code. `<Html/>` and [`<Body/>`](https://docs.rs/leptos_meta/latest/leptos_meta/fn.Html.html) both have `class` props that let you set their respective `class` attributes, which is sometimes needed by CSS frameworks for styling.
+
+`<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"
+	attributes=AdditionalAttributes::from(vec![("data-theme", "dark")])
+/>
+```
+
+## Metadata and Server Rendering
+
+Now, some of this is useful in any scenario, but some of it is especially important for search-engine optimization (SEO). Making sure you have things like appropriate `<title>` and `<meta>` tags is crucial. Modern search engine crawlers do handle client-side rendering, i.e., apps that are shipped as an empty `index.html` and rendered entirely in JS/WASM. But they prefer to receive pages in which your app has been rendered to actual HTML, with metadata in the `<head>`.
+
+This is exactly what `leptos_meta` is for. And in fact, during server rendering, this is exactly what it does: collect all the `<head>` content you’ve declared by using its components throughout your application, and then inject it into the actual `<head>`.
+
+But I’m getting ahead of myself. We haven’t actually talked about server-side rendering yet. As a matter of fact... Let’s do that next!

docs/book/src/progressive_enhancement/README.md

@@ -0,0 +1,36 @@
+# Progressive Enhancement (and Graceful Degradation)
+
+I’ve been driving around Boston for about fifteen years. If you don’t know Boston, let me tell you: Massachusetts has some of the most aggressive drivers(and pedestrians!) in the world. I’ve learned to practice what’s sometimes called “defensive driving”: assuming that someone’s about to swerve in front of you at an intersection when you have the right of way, preparing for a pedestrian to cross into the street at any moment, and driving accordingly.
+
+“Progressive enhancement” is the “defensive driving” of web design. Or really, that’s “graceful degradation,” although they’re two sides of the same coin, or the same process, from two different directions.
+
+**Progressive enhancement**, in this context, means beginning with a simple HTML site or application that works for any user who arrives at your page, and gradually enhancing it with layers of additional features: CSS for styling, JavaScript for interactivity, WebAssembly for Rust-powered interactivity; using particular Web APIs for a richer experience if they’re available and as needed.
+
+**Graceful degradation** means handling failure gracefully when parts of that stack of enhancement *aren’t* available. Here are some sources of failure your users might encounter in your app:
+- Their browser doesn’t support WebAssembly because it needs to be updated.
+- Their browser can’t support WebAssembly because browser updates are limited to newer OS versions, which can’t be installed on the device. (Looking at you, Apple.)
+- They have WASM turned off for security or privacy reasons.
+- They have JavaScript turned off for security or privacy reasons.
+- JavaScript isn’t supported on their device (for example, some accessibility devices only support HTML browsing)
+- The JavaScript (or WASM) never arrived at their device because they walked outside and lost WiFi.
+- They stepped onto a subway car after loading the initial page and subsequent navigations can’t load data.
+- ... and so on.
+
+How much of your app still works if one of these holds true? Two of them? Three? 
+
+If the answer is something like “95%... okay, then 90%... okay, then 75%,” that’s graceful degradation. If the answer is “my app shows a blank screen unless everything works correctly,” that’s... rapid unscheduled disassembly.
+
+**Graceful degradation is especially important for WASM apps,** because WASM is the newest and least-likely-to-be-supported of the four languages that run in the browser (HTML, CSS, JS, WASM).
+
+Luckily, we’ve got some tools to help.
+
+## Defensive Design
+
+There are a few practices that can help your apps degrade more gracefully:
+1. **Server-side rendering.** Without SSR, your app simply doesn’t work without both JS and WASM loading. In some cases this may be appropriate (think internal apps gated behind a login) but in others it’s simply broken.
+2. **Native HTML elements.** Use HTML elements that do the things that you want, without additional code: `<a>` for navigation (including to hashes within the page), `<details>` for an accordion, `<form>` to persist information in the URL, etc.
+3. **URL-driven state.** The more of your global state is stored in the URL (as a route param or part of the query string), the more of the page can be generated during server rendering and updated by an `<a>` or a `<form>`, which means that not only navigations but state changes can work without JS/WASM.
+4. **[`SsrMode::PartiallyBlocked` or `SsrMode::InOrder`](https://docs.rs/leptos_router/latest/leptos_router/enum.SsrMode.html).** Out-of-order streaming requires a small amount of inline JS, but can fail if 1) the connection is broken halfway through the response or 2) the client’s device doesn’t support JS. Async streaming will give a complete HTML page, but only after all resources load. In-order streaming begins showing pieces of the page sooner, in top-down order. “Partially-blocked” SSR builds on out-of-order streaming by replacing `<Suspense/>` fragments that read from blocking resources on the server. This adds marginally to the initial response time (because of the `O(n)` string replacement work), in exchange for a more complete initial HTML response. This can be a good choice for situations in which there’s a clear distinction between “more important” and “less important” content, e.g., blog post vs. comments, or product info vs. reviews. If you choose to block on all the content, you’ve essentially recreated async rendering.
+5. **Leaning on `<form>`s.** There’s been a bit of a `<form>` renaissance recently, and it’s no surprise. The ability of a `<form>` to manage complicated `POST` or `GET` requests in an easily-enhanced way makes it a powerful tool for graceful degradation. The example in [the `<Form/>` chapter](../router/20_form.md), for example, would work fine with no JS/WASM: because it uses a `<form method="GET">` to persist state in the URL, it works with pure HTML by making normal HTTP requests and then progressively enhances to use client-side navigations instead.
+
+There’s one final feature of the framework that we haven’t seen yet, and which builds on this characteristic of forms to build powerful applications: the `<ActionForm/>`.

docs/book/src/progressive_enhancement/action_form.md

@@ -0,0 +1,56 @@
+# `<ActionForm/>`
+
+[`<ActionForm/>`](https://docs.rs/leptos_router/latest/leptos_router/fn.ActionForm.html) is a specialized `<Form/>` that takes a server action, and automatically dispatches it on form submission. This allows you to call a server function directly from a `<form>`, even without JS/WASM.
+
+The process is simple:
+1. Define a server function using the [`#[server]` macro](https://docs.rs/leptos/latest/leptos/attr.server.html) (see [Server Functions](../server/25_server_functions.md).)
+2. Create an action using [`create_server_action`](https://docs.rs/leptos/latest/leptos/fn.create_server_action.html), specifying the type of the server function you’ve defined.
+3. Create an `<ActionForm/>`, providing the server action in the `action` prop.
+4. Pass the named arguments to the server function as form fields with the same names.
+
+> **Note:** `<ActionForm/>` only works with the default URL-encoded `POST` encoding for server functions, to ensure graceful degradation/correct behavior as an HTML form. 
+
+```rust
+#[server(AddTodo, "/api")]
+pub async fn add_todo(title: String) -> Result<(), ServerFnError> {
+    todo!()
+}
+
+#[component]
+fn AddTodo(cx: Scope) -> impl IntoView {
+	let add_todo = create_server_action::<AddTodo>(cx);
+	// holds the latest *returned* value from the server
+	let value = add_todo.value();
+	// check if the server has returned an error
+	let has_error = move || value.with(|val| matches!(val, Some(Err(_))));
+
+	view! { cx,
+		<ActionForm action=add_todo>
+			<label>
+				"Add a Todo"
+				// `title` matches the `title` argument to `add_todo`
+				<input type="text" name="title"/>
+			</label>
+			<input type="submit" value="Add"/>
+		</ActionForm>
+	}
+}
+```
+It’s really that easy. With JS/WASM, your form will submit without a page reload, storing its most recent submission in the `.input()` signal of the action, its pending status in `.pending()`, and so on. (See the [`Action`](https://docs.rs/leptos/latest/leptos/struct.Action.html) docs for a refresher, if you need.) Without JS/WASM, your form will submit with a page reload. If you call a `redirect` function (from `leptos_axum` or `leptos_actix`) it will redirect to the correct page. By default, it will redirect back to the page you’re currently on. The power of HTML, HTTP, and isomorphic rendering mean that your `<ActionForm/>` simply works, even with no JS/WASM.
+
+## Client-Side Validation
+
+Because the `<ActionForm/>` is just a `<form>`, it fires a `submit` event. You can use either HTML validation, or your own client-side validation logic in an `on:submit`. Just call `ev.prevent_default()` to prevent submission.
+
+The [`FromFormData`](https://docs.rs/leptos_router/latest/leptos_router/trait.FromFormData.html) trait can be helpful here, for attempting to parse your server function’s data type from the submitted form.
+
+```rust
+let on_submit = move |ev| {
+	let data = AddTodo::from_event(&ev);
+	// silly example of validation: if the todo is "nope!", nope it
+	if data.is_err() || data.unwrap().title == "nope!" {
+		// ev.prevent_default() will prevent form submission
+		ev.prevent_default();
+	}
+}
+```

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

@@ -0,0 +1,114 @@
+# Responding to Changes with `create_effect`
+
+We’ve made it this far without having mentioned half of the reactive system: effects.
+
+Reactivity works in two halves: updating individual reactive values (“signals”) notifies the pieces of code that depend on them (“effects”) that they need to run again. These two halves of the reactive system are inter-dependent. Without effects, signals can change within the reactive system but never be observed in a way that interacts with the outside world. Without signals, effects run once but never again, as there’s no observable value to subscribe to. Effects are quite literally “side effects” of the reactive system: they exist to synchronize the reactive system with the non-reactive world outside it.
+
+Hidden behind the whole reactive DOM renderer that we’ve seen so far is a function called `create_effect`.
+
+[`create_effect`](https://docs.rs/leptos_reactive/latest/leptos_reactive/fn.create_effect.html) takes a function as its argument. It immediately runs the function. If you access any reactive signal inside that function, it registers the fact that the effect depends on that signal with the reactive runtime. Whenever one of the signals that the effect depends on changes, the effect runs again.
+
+```rust
+let (a, set_a) = create_signal(cx, 0);
+let (b, set_b) = create_signal(cx, 0);
+
+create_effect(cx, move |_| {
+  // immediately prints "Value: 0" and subscribes to `a`
+  log::debug!("Value: {}", a());
+});
+```
+
+The effect function is called with an argument containing whatever value it returned the last time it ran. On the initial run, this is `None`.
+
+By default, effects **do not run on the server**. This means you can call browser-specific APIs within the effect function without causing issues. If you need an effect to run on the server, use [`create_isomorphic_effect`](https://docs.rs/leptos_reactive/latest/leptos_reactive/fn.create_isomorphic_effect.html).
+
+## Autotracking and Dynamic Dependencies
+
+If you’re familiar with a framework like React, you might notice one key difference. React and similar frameworks typically require you to pass a “dependency array,” an explicit set of variables that determine when the effect should rerun.
+
+Because Leptos comes from the tradition of synchronous reactive programming, we don’t need this explicit dependency list. Instead, we automatically track dependencies depending on which signals are accessed within the effect.
+
+This has two effects (no pun intended). Dependencies are:
+
+1. **Automatic**: You don’t need to maintain a dependency list, or worry about what should or shouldn’t be included. The framework simply tracks which signals might cause the effect to rerun, and handles it for you.
+2. **Dynamic**: The dependency list is cleared and updated every time the effect runs. If your effect contains a conditional (for example), only signals that are used in the current branch are tracked. This means that effects rerun the absolute minimum number of times.
+
+> If this sounds like magic, and if you want a deep dive into how automatic dependency tracking works, [check out this video](https://www.youtube.com/watch?v=GWB3vTWeLd4). (Apologies for the low volume!)
+
+## Effects as Zero-Cost-ish Abstraction
+
+While they’re not a “zero-cost abstraction” in the most technical sense—they require some additional memory use, exist at runtime, etc.—at a higher level, from the perspective of whatever expensive API calls or other work you’re doing within them, effects are a zero-cost abstraction. They rerun the absolute minimum number of times necessary, given how you’ve described them.
+
+Imagine that I’m creating some kind of chat software, and I want people to be able to display their full name, or just their first name, and to notify the server whenever their name changes:
+
+```rust
+let (first, set_first) = create_signal(cx, String::new());
+let (last, set_last) = create_signal(cx, String::new());
+let (use_last, set_use_last) = create_signal(cx, true);
+
+// this will add the name to the log
+// any time one of the source signals changes
+create_effect(cx, move |_| {
+    log(
+        cx,
+        if use_last() {
+            format!("{} {}", first(), last())
+        } else {
+            first()
+        },
+    )
+});
+```
+
+If `use_last` is `true`, effect should rerun whenever `first`, `last`, or `use_last` changes. But if I toggle `use_last` to `false`, a change in `last` will never cause the full name to change. In fact, `last` will be removed from the dependency list until `use_last` toggles again. This saves us from sending multiple unnecessary requests to the API if I change `last` multiple times while `use_last` is still `false`.
+
+## To `create_effect`, or not to `create_effect`?
+
+Effects are intended to run _side-effects_ of the system, not to synchronize state _within_ the system. In other words: don’t write to signals within effects.
+
+If you need to define a signal that depends on the value of other signals, use a derived signal or [`create_memo`](https://docs.rs/leptos_reactive/latest/leptos_reactive/fn.create_memo.html).
+
+If you need to synchronize some reactive value with the non-reactive world outside—like a web API, the console, the filesystem, or the DOM—create an effect.
+
+> If you’re curious for more information about when you should and shouldn’t use `create_effect`, [check out this video](https://www.youtube.com/watch?v=aQOFJQ2JkvQ) for a more in-depth consideration!
+
+## Effects and Rendering
+
+We’ve managed to get this far without mentioning effects because they’re built into the Leptos DOM renderer. We’ve seen that you can create a signal and pass it into the `view` macro, and it will update the relevant DOM node whenever the signal changes:
+
+```rust
+let (count, set_count) = create_signal(cx, 0);
+
+view! { cx,
+    <p>{count}</p>
+}
+```
+
+This works because the framework essentially creates an effect wrapping this update. You can imagine Leptos translating this view into something like this:
+
+```rust
+let (count, set_count) = create_signal(cx, 0);
+
+// create a DOM element
+let p = create_element("p");
+
+// create an effect to reactively update the text
+create_effect(cx, move |prev_value| {
+    // first, access the signal’s value and convert it to a string
+    let text = count().to_string();
+
+    // if this is different from the previous value, update the node
+    if prev_value != Some(text) {
+        p.set_text_content(&text);
+    }
+
+    // return this value so we can memoize the next update
+    text
+});
+```
+
+Every time `count` is updated, this effect wil rerun. This is what allows reactive, fine-grained updates to the DOM.
+
+[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/serene-thompson-40974n?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A2%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A2%7D%5D)
+
+<iframe src="https://codesandbox.io/p/sandbox/serene-thompson-40974n?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A2%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A2%7D%5D" width="100%" height="1000px" style="max-height: 100vh"></iframe>

docs/book/src/reactivity/README.md

@@ -0,0 +1,5 @@
+# Reactivity
+
+Leptos is built on top of a fine-grained reactive system, designed to run expensive side effects (like rendering something in a browser, or making a network request) as infrequently as possible in response to change, reactive values.
+
+So far we’ve seen signals in action. These chapters will go into a bit more depth, and look at effects, which are the other half of the story.

docs/book/src/reactivity/working_with_signals.md

@@ -0,0 +1,106 @@
+# Working with Signals
+
+So far we’ve used some simple examples of [`create_signal`](https://docs.rs/leptos/latest/leptos/fn.create_signal.html), which returns a [`ReadSignal`](https://docs.rs/leptos/latest/leptos/struct.ReadSignal.html) getter and a [`WriteSignal`](https://docs.rs/leptos/latest/leptos/struct.WriteSignal.html) setter.
+
+## Getting and Setting
+
+There are four basic signal operations:
+
+1. [`.get()`](https://docs.rs/leptos/latest/leptos/struct.ReadSignal.html#impl-SignalGet%3CT%3E-for-ReadSignal%3CT%3E) clones the current value of the signal and tracks any future changes to the value reactively.
+2. [`.with()`](https://docs.rs/leptos/latest/leptos/struct.ReadSignal.html#impl-SignalWith%3CT%3E-for-ReadSignal%3CT%3E) takes a function, which receives the current value of the signal by reference (`&T`), and tracks any future changes.
+3. [`.set()`](https://docs.rs/leptos/latest/leptos/struct.WriteSignal.html#impl-SignalSet%3CT%3E-for-WriteSignal%3CT%3E) replaces the current value of the signal and notifies any subscribers that they need to update.
+4. [`.update()`](https://docs.rs/leptos/latest/leptos/struct.WriteSignal.html#impl-SignalUpdate%3CT%3E-for-WriteSignal%3CT%3E) takes a function, which receives a mutable reference to the current value of the signal (`&T`), and notifies any subscribers that they need to update. (`.update()` doesn’t return the value returned by the closure, but you can use [`.try_update()`](https://docs.rs/leptos/latest/leptos/trait.SignalUpdate.html#tymethod.try_update) if you need to; for example, if you’re removing an item from a `Vec<_>` and want the removed item.)
+
+Calling a `ReadSignal` as a function is syntax sugar for `.get()`. Calling a `WriteSignal` as a function is syntax sugar for `.set()`. So
+
+```rust
+let (count, set_count) = create_signal(cx, 0);
+set_count(1);
+log!(count());
+```
+
+is the same as
+
+```rust
+let (count, set_count) = create_signal(cx, 0);
+set_count.set(1);
+log!(count.get());
+```
+
+You might notice that `.get()` and `.set()` can be implemented in terms of `.with()` and `.update()`. In other words, `count.get()` is identical with `count.with(|n| n.clone())`, and `count.set(1)` is implemented by doing `count.update(|n| *n = 1)`.
+
+But of course, `.get()` and `.set()` (or the plain function-call forms!) are much nicer syntax.
+
+However, there are some very good use cases for `.with()` and `.update()`.
+
+For example, consider a signal that holds a `Vec<String>`.
+
+```rust
+let (names, set_names) = create_signal(cx, Vec::new());
+if names().is_empty() {
+	set_names(vec!["Alice".to_string()]);
+}
+```
+
+In terms of logic, this is simple enough, but it’s hiding some significant inefficiencies. Remember that `names().is_empty()` is sugar for `names.get().is_empty()`, which clones the value (it’s `names.with(|n| n.clone()).is_empty()`). This means we clone the whole `Vec<String>`, run `is_empty()`, and then immediately throw away the clone.
+
+Likewise, `set_names` replaces the value with a whole new `Vec<_>`. This is fine, but we might as well just mutate the original `Vec<_>` in place.
+
+```rust
+let (names, set_names) = create_signal(cx, Vec::new());
+if names.with(|names| names.is_empty()) {
+	set_names.update(|names| names.push("Alice".to_string()));
+}
+```
+
+Now our function simply takes `names` by reference to run `is_empty()`, avoiding that clone.
+
+And if you have Clippy on, or if you have sharp eyes, you may notice we can make this even neater:
+
+```rust
+if names.with(Vec::is_empty) {
+	// ...
+}
+```
+
+After all, `.with()` simply takes a function that takes the value by reference. Since `Vec::is_empty` takes `&self`, we can pass it in directly and avoid the unncessary closure.
+
+## 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.
+
+### Good Options
+**1) B is a function of A.** Create a signal for A and a derived signal or memo for B.
+
+```rust
+let (count, set_count) = create_signal(cx, 1);
+let derived_signal_double_count = move || count() * 2;
+let memoized_double_count = create_memo(cx, move |_| count() * 2);
+```
+> For guidance on whether to use a derived signal or a memo, see the docs for [`create_memo`](https://docs.rs/leptos/latest/leptos/fn.create_memo.html)
+> 
+**2) C is a function of A and some other thing B.** Create signals for A and B and a derived signal or memo for C.
+
+```rust
+let (first_name, set_first_name) = create_signal(cx, "Bridget".to_string());
+let (last_name, set_last_name) = create_signal(cx, "Jones".to_string());
+let full_name = move || format!("{} {}", first_name(), last_name());
+```
+**3) A and B are independent signals, but sometimes updated at the same time.** When you make the call to update A, make a separate call to update B.
+```rust
+let (age, set_age) = create_signal(cx, 32);
+let (favorite_number, set_favorite_number) = create_signal(cx, 42);
+// use this to handle a click on a `Clear` button
+let clear_handler = move |_| {
+  set_age(0);
+  set_favorite_number(0);
+};
+```
+### If you really must...
+**4) Create an effect to write to B whenever A changes.** This is officially discouraged, for several reasons:
+a) It will always be less efficient, as it means every time A updates you do two full trips through the reactive process. (You set A, which causes the effect to run, as well as any other effects that depend on A. Then you set B, which causes any effects that depend on B to run.)
+b) It increases your chances of accidentally creating things like infinite loops or over-re-running effects. This is the kind of ping-ponging, reactive spaghetti code that was common in the early 2010s and that we try to avoid with things like read-write segregation and discouraging writing to signals frome effects.
+
+In most situations, it’s best to rewrite things such that there’s a clear, top-down data flow based on derived signals or memos. But this isn’t the end of the world.
+
+> I’m intentionally not providing an example here. Read the [`create_effect`](https://docs.rs/leptos/latest/leptos/fn.create_effect.html) docs to figure out how this would work.

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

@@ -34,7 +34,7 @@ use leptos_router::*;
 
 #[component]
 pub fn App(cx: Scope) -> impl IntoView {
-  view! {
+  view! { cx,
     <Router>
       <nav>
         /* ... */
@@ -59,7 +59,7 @@ use leptos_router::*;
 
 #[component]
 pub fn App(cx: Scope) -> impl IntoView {
-  view! {
+  view! { cx,
     <Router>
       <nav>
         /* ... */

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

@@ -39,7 +39,7 @@ struct ContactSearch {
 
 Now we can use them in a component. Imagine a URL that has both params and a query, like `/contacts/:id?q=Search`.
 
-The typed versions return `Memo<Result<T>, _>`. It’s a Memo so it reacts to changes in the URL. It’s a `Result` because the params or query need to be parsed from the URL, and may or may not be valid.
+The typed versions return `Memo<Result<T, _>>`. It’s a Memo so it reacts to changes in the URL. It’s a `Result` because the params or query need to be parsed from the URL, and may or may not be valid.
 
 ```rust
 let params = use_params::<ContactParams>(cx);

docs/book/src/server/25_server_functions.md

@@ -43,15 +43,6 @@ pub fn BusyButton(cx: Scope) -> impl IntoView {
         </button>
 	}
 }
-
-// somewhere in main.rs
-fn main() {
-	// ...
-
-	AddTodo::register();
-
-	// ...
-}
 ```
 
 You’ll notice a couple things here right away:
@@ -75,7 +66,7 @@ move |_| {
 There are a few things to note about the way you define a server function, too.
 
 - Server functions are created by using the [`#[server]` macro](https://docs.rs/leptos_server/latest/leptos_server/index.html#server) to annotate a top-level function, which can be defined anywhere.
-- We provide the macro a type name. The type name is used to register the server function (in `main.rs`), and it’s used internally as a container to hold, serialize, and deserialize the arguments.
+- We provide the macro a type name. The type name is used internally as a container to hold, serialize, and deserialize the arguments.
 - We provide the macro a path. This is a prefix for the path at which we’ll mount a server function handler on our server. (See examples for [Actix](https://github.com/leptos-rs/leptos/blob/main/examples/todo_app_sqlite/src/main.rs#L44) and [Axum](https://github.com/leptos-rs/leptos/blob/598523cd9d0d775b017cb721e41ebae9349f01e2/examples/todo_app_sqlite_axum/src/main.rs#L51).)
 - You’ll need to have `serde` as a dependency with the `derive` featured enabled for the macro to work properly. You can easily add it to `Cargo.toml` with `cargo add serde --features=derive`.
 
@@ -106,6 +97,14 @@ In other words, you have two choices:
 
 **But remember**: Leptos will handle all the details of this encoding and decoding for you. When you use a server function, it looks just like calling any other asynchronous function!
 
+> **Why not `PUT` or `DELETE`? Why URL/form encoding, and not JSON?**
+>
+> These are reasonable questions. Much of the web is built on REST API patterns that encourage the use of semantic HTTP methods like `DELETE` to delete an item from a database, and many devs are accustomed to sending data to APIs in the JSON format.
+> 
+> The reason we use `POST` or `GET` with URL-encoded data by default is the `<form>` support. For better or for worse, HTML forms don’t support `PUT` or `DELETE`, and they don’t support sending JSON. This means that if you use anything but a `GET` or `POST` request with URL-encoded data, it can only work once WASM has loaded. As we’ll see [in a later chapter](../progressive_enhancement), this isn’t always a great idea.
+> 
+> The CBOR encoding is suported for historical reasons; an earlier version of server functions used a URL encoding that didn’t support nested objects like structs or vectors as server function arguments, which CBOR did. But note that the CBOR forms encounter the same issue as `PUT`, `DELETE`, or JSON: they do not degrade gracefully if the WASM version of your app is not available.
+
 ## An Important Note on Security
 
 Server functions are a cool technology, but it’s very important to remember. **Server functions are not magic; they’re syntax sugar for defining a public API.** The _body_ of a server function is never made public; it’s just part of your server binary. But the server function is a publicly accessible API endpoint, and it’s return value is just a JSON or similar blob. You should _never_ return something sensitive from a server function.

docs/book/src/server/26_extractors.md

@@ -0,0 +1,71 @@
+# Extractors
+
+The server functions we looked at in the last chapter showed how to run code on the server, and integrate it with the user interface you’re rendering in the browser. But they didn’t show you much about how to actually use your server to its full potential.
+
+## Server Frameworks
+
+We call Leptos a “full-stack” framework, but “full-stack” is always a misnomer (after all, it never means everything from the browser to your power company.) For us, “full stack” means that your Leptos app can run in the browser, and can run on the server, and can integrate the two, drawing together the unique features available in each; as we’ve seen in the book so far, a button click on the browser can drive a database read on the server, both written in the same Rust module. But Leptos itself doesn’t provide the server (or the database, or the operating system, or the firmware, or the electrical cables...)
+
+Instead, Leptos provides integrations for the two most popular Rust web server frameworks, Actix Web ([`leptos_actix`](https://docs.rs/leptos_actix/latest/leptos_actix/)) and Axum ([`leptos_axum`](https://docs.rs/leptos_actix/latest/leptos_axum/)). We’ve built integrations with each server’s router so that you can simply plug your Leptos app into an existing server with `.leptos_routes()`, and easily handle server function calls.
+
+> If haven’t seen our [Actix](https://github.com/leptos-rs/start) and [Axum](https://github.com/leptos-rs/start-axum) templates, now’s a good time to check them out.
+
+## Using Extractors
+
+Both Actix and Axum handlers are built on the same powerful idea of **extractors**. Extractors “extract” typed data from an HTTP request, allowing you to access server-specific data easily.
+
+Leptos provides `extract` helper functions to let you use these extractors directly in your server functions, with a convenient syntax very similar to handlers for each framework.
+
+### Actix Extractors
+
+The [`extract` function in `leptos_actix`](https://docs.rs/leptos_actix/latest/leptos_actix/fn.extract.html) takes a handler function as its argument. The handler follows similar rules to an Actix handler: it is an async function that receives arguments that will be extracted from the request and returns some value. The handler function receives that extracted data as its arguments, and can do further `async` work on them inside the body of the `async move` block. It returns whatever value you return back out into the server function.
+
+```rust
+
+#[server(ActixExtract, "/api")]
+pub async fn actix_extract(cx: Scope) -> Result<String, ServerFnError> {
+	use leptos_actix::extract;
+    use actix_web::dev::ConnectionInfo;
+    use actix_web::web::{Data, Query};
+
+    extract(cx,
+        |search: Query<Search>, connection: ConnectionInfo| async move {
+            format!(
+                "search = {}\nconnection = {:?}",
+                search.q,
+                connection
+            )
+        },
+    )
+    .await
+}
+```
+
+## Axum Extractors
+
+The syntax for the `leptos_axum::extract` function is very similar. (**Note**: This is available on the git main branch, but has not been released as of writing.) Note that Axum extractors return a `Result`, so you’ll need to add something to handle the error case.
+
+```rust
+#[server(AxumExtract, "/api")]
+pub async fn axum_extract(cx: Scope) -> Result<String, ServerFnError> {
+    use axum::{extract::Query, http::Method};
+    use leptos_axum::extract;
+
+    extract(cx, |method: Method, res: Query<MyQuery>| async move {
+            format!("{method:?} and {}", res.q)
+        },
+    )
+    .await
+    .map_err(|e| ServerFnError::ServerError("Could not extract method and query...".to_string()))
+}
+```
+
+These are relatively simple examples accessing basic data from the server. But you can use extractors to access things like headers, cookies, database connection pools, and more, using the exact same `extract()` pattern.
+
+## A Note about Data-Loading Patterns
+
+Because Actix and (especially) Axum are built on the idea of a single round-trip HTTP request and response, you typically run extractors near the “top” of your application (i.e., before you start rendering) and use the extracted data to determine how that should be rendered. Before you render a `<button>`, you load all the data your app could need. And any given route handler needs to know all the data that will need to be extracted by that route.
+
+But Leptos integrates both the client and the server, and it’s important to be able to refresh small pieces of your UI with new data from the server without forcing a full reload of all the data. So Leptos likes to push data loading “down” in your application, as far towards the leaves of your user interface as possible. When you click a `<button>`, it can refresh just the data it needs. This is exactly what server functions are for: they give you granular access to data to be loaded and reloaded.
+
+The `extract()` functions let you combine both models by using extractors in your server functions. You get access to the full power of route extractors, while decentralizing knowledge of what needs to be extracted down to your individual components. This makes it easier to refactor and reorganize routes: you don’t need to specify all the data a route needs up front.

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

@@ -0,0 +1 @@
+# Responses and Redirects

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

@@ -62,6 +62,16 @@ If you’re using server-side rendering, the synchronous mode is almost never wh
   - Able to show the fallback loading state and dynamically replace it, instead of showing blank sections for un-loaded data.
 - _Cons_: Requires JavaScript to be enabled for suspended fragments to appear in correct order. (This small chunk of JS streamed down in a `<script>` tag alongside the `<template>` tag that contains the rendered `<Suspense/>` fragment, so it does not need to load any additional JS files.)
 
+5. **Partially-blocked streaming**: “Partially-blocked” streaming is useful when you have multiple separate `<Suspense/>` components on the page. If one of them reads from one or more “blocking resources” (see below), the fallback will not be sent; rather, the server will wait until that `<Suspense/>` has resolved and then replace the fallback with the resolved fragment on the server, which means that it is included in the initial HTML response and appears even if JavaScript is disabled or not supported. Other `<Suspense/>` stream in out of order as usual.
+
+This is useful when you have multiple `<Suspense/>` on the page, and one is more important than the other: think of a blog post and comments, or product information and reviews. It is *not* useful if there’s only one `<Suspense/>`, or if every `<Suspense/>` reads from blocking resources. In those cases it is a slower form of `async` rendering.
+
+- _Pros_: Works if JavaScript is disabled or not supported on the user’s device.
+- _Cons_
+  - Slower initial response time than out-of-order.
+  - Marginally overall response due to additional work on the server.
+  - No fallback state shown.
+
 ## Using SSR Modes
 
 Because it offers the best blend of performance characteristics, Leptos defaults to out-of-order streaming. But it’s really simple to opt into these different modes. You do it by adding an `ssr` property onto one or more of your `<Route/>` components, like in the [`ssr_modes` example](https://github.com/leptos-rs/leptos/blob/main/examples/ssr_modes/src/app.rs).

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

@@ -78,8 +78,7 @@ This returns a `(getter, setter)` tuple. To access the current value, you’ll
 use `count.get()` (or, on `nightly` Rust, the shorthand `count()`). To set the
 current value, you’ll call `set_count.set(...)` (or `set_count(...)`).
 
-> `.get()` clones the value and `.set()` overwrites it. In many cases, it’s more
-> efficient to use `.with()` or `.update()`; check out the docs for [`ReadSignal`](https://docs.rs/leptos/latest/leptos/struct.ReadSignal.html) and [`WriteSignal`](https://docs.rs/leptos/latest/leptos/struct.WriteSignal.html) if you’d like to learn more about those trade-offs at this point.
+> `.get()` clones the value and `.set()` overwrites it. In many cases, it’s more efficient to use `.with()` or `.update()`; check out the docs for [`ReadSignal`](https://docs.rs/leptos/latest/leptos/struct.ReadSignal.html) and [`WriteSignal`](https://docs.rs/leptos/latest/leptos/struct.WriteSignal.html) if you’d like to learn more about those trade-offs at this point.
 
 ## The View
 
@@ -90,7 +89,8 @@ view! { cx,
     <button
         // define an event listener with on:
         on:click=move |_| {
-            set_count.update(|n| *n += 1);
+            // on stable, this is set_count.set(3);
+            set_count(3);
         }
     >
         // text nodes are wrapped in quotation marks
@@ -142,6 +142,16 @@ in a function, telling the framework to update the view every time `count` chang
 `{count()}` access the value of `count` once, and passes an `i32` into the view,
 rendering it once, unreactively. You can see the difference in the CodeSandbox below!
 
+Let’s make one final change. `set_count(3)` is a pretty useless thing for a click handler to do. Let’s replacing “set this value to 3” with “increment this value by 1”:
+
+```rust
+move |_| {
+    set_count.update(|n| *n += 1);
+}
+```
+
+You can see here that while `set_count` just sets the value, `set_count.update()` gives us a mutable reference and mutates the value in place. Either one will trigger a reactive update in our UI.
+
 > Throughout this tutorial, we’ll use CodeSandbox to show interactive examples. To
 > show the browser in the sandbox, you may need to click `Add DevTools >
 Other Previews > 8080.` Hover over any of the variables to show Rust-Analyzer details

examples/Makefile.toml

@@ -1,4 +1,4 @@
-extend = [{ path = "./cargo-make/common.toml" }]
+extend = [{ path = "./cargo-make/main.toml" }]
 
 [env]
 CARGO_MAKE_EXTEND_WORKSPACE_MAKEFILE = true
@@ -28,30 +28,3 @@ CARGO_MAKE_CRATE_WORKSPACE_MEMBERS = [
     "todo_app_sqlite_viz",
     "todomvc",
 ]
-
-[tasks.verify-flow]
-description = "Provides pre and post hooks for verify"
-dependencies = ["pre-verify", "verify", "post-verify"]
-
-[tasks.verify]
-description = "Run all quality checks and tests"
-dependencies = ["check-style", "test-unit-and-web"]
-
-[tasks.test-unit-and-web]
-description = "Run all unit and web tests"
-dependencies = ["test-flow", "web-test-flow"]
-
-[tasks.pre-verify]
-
-[tasks.post-verify]
-dependencies = ["clean-all"]
-
-[tasks.web-test-flow]
-description = "Provides pre and post hooks for web-test"
-dependencies = ["pre-web-test", "web-test", "post-web-test"]
-
-[tasks.pre-web-test]
-
-[tasks.web-test]
-
-[tasks.post-web-test]

examples/README.md

@@ -0,0 +1,7 @@
+# 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 and not the current release.
+
+To see the examples as they were at the time of the `0.3.0` release, [click here](https://github.com/leptos-rs/leptos/tree/v0.3.0/examples).

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

@@ -1,5 +1,5 @@
-[tasks.web-test]
-dependencies = ["auto-setup", "cargo-leptos-e2e"]
+[tasks.test-e2e]
+dependencies = ["setup-node", "cargo-leptos-e2e"]
 
 [tasks.clean-all]
 dependencies = ["clean-cargo", "clean-node_modules", "clean-playwright"]

examples/cargo-make/common.toml

@@ -1,6 +1,3 @@
-[env]
-END2END_DIR = "end2end"
-
 [tasks.pre-clippy]
 env = { CARGO_MAKE_CLIPPY_ARGS = "--all-targets --all-features -- -D warnings" }
 
@@ -11,14 +8,6 @@ dependencies = ["check-format-flow", "clippy-flow"]
 [tasks.check-format]
 args = ["fmt", "--", "--check", "--config-path", "../../"]
 
-[tasks.verify-local]
-description = "Run all quality checks and tests from an example directory"
-dependencies = ["check-style", "test-local"]
-
-[tasks.test-local]
-description = "Run all tests from an example directory"
-dependencies = ["test", "web-test"]
-
 [tasks.clean-cargo]
 description = "Runs the cargo clean command."
 category = "Cleanup"
@@ -41,16 +30,19 @@ find . -type d -name node_modules | xargs rm -rf
 [tasks.clean-playwright]
 description = "Delete playwright directories"
 category = "Cleanup"
-cwd = "${END2END_DIR}"
-command = "rm"
-args = ["-rf", "playwright", "playwright/.cache", "test-results"]
+script = '''
+for pw_dir in $(find . -name playwright.config.ts | xargs dirname)
+do
+  rm -rf $pw_dir/playwright-report
+done
+'''
 
 [tasks.clean-all]
 description = "Delete all temporary directories"
 category = "Cleanup"
 dependencies = ["clean-cargo"]
 
-[tasks.wasm-web-test]
+[tasks.test-wasm]
 env = { CARGO_MAKE_WASM_TEST_ARGS = "--headless --chrome" }
 command = "cargo"
 args = ["make", "wasm-pack-test"]
@@ -60,28 +52,46 @@ description = "Runs end to end tests with cargo leptos"
 command = "cargo"
 args = ["leptos", "end-to-end"]
 
-[tasks.setup]
-description = "Setup e2e dependencies"
-cwd = "${END2END_DIR}"
+[tasks.setup-node]
+description = "Install node dependencies and playwright browsers"
+env = { PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD = "1" }
 script = '''
-    BOLD="\e[1m"
-    GREEN="\e[0;32m"
-    RED="\e[0;31m"
-    RESET="\e[0m"
+BOLD="\e[1m"
+GREEN="\e[0;32m"
+RED="\e[0;31m"
+RESET="\e[0m"
 
-    if command -v pnpm; then
-        pnpm install
-    elif command -v npm; then
-        npm install
-    else
-        echo "${RED}${BOLD}ERROR${RESET} - pnpm or npm is required by this task"
-        exit 1
-    fi
-'''
+project_dir=$CARGO_MAKE_WORKING_DIRECTORY
 
-[tasks.auto-setup]
-script = '''
-  if [ ! -d "${END2END_DIR}/node_modules" ]; then
-    cargo make setup
-  fi
+# Discover commands
+if command -v pnpm; then
+    NODE_CMD=pnpm
+    PLAYWRIGHT_CMD=pnpm
+elif command -v npm; then
+    NODE_CMD=npm
+    PLAYWRIGHT_CMD=npx
+else
+    echo "${RED}${BOLD}ERROR${RESET} - pnpm or npm is required by this task"
+    exit 1
+fi
+
+# Install node dependencies
+for node_path in $(find . -name package.json -not -path '*/node_modules/*')
+do
+  node_dir=$(dirname $node_path)
+  echo Install node dependencies for $node_dir
+  cd $node_dir
+  ${NODE_CMD} install
+  cd ${project_dir}
+done
+
+# Install playwright browsers
+for pw_path in $(find . -name playwright.config.ts)
+do
+  pw_dir=$(dirname $pw_path)
+  echo Install playwright browsers for $pw_dir
+  cd $pw_dir
+  ${PLAYWRIGHT_CMD} playwright install
+  cd $project_dir
+done
 '''

examples/cargo-make/main.toml

@@ -0,0 +1,28 @@
+extend = [{ path = "../cargo-make/common.toml" }]
+
+[tasks.verify-flow]
+description = "Provides pre and post hooks for verify"
+dependencies = ["pre-verify", "verify", "post-verify"]
+
+[tasks.verify]
+description = "Run all quality checks and tests"
+dependencies = ["check-style", "test-unit-and-e2e"]
+
+[tasks.test-unit-and-e2e]
+description = "Run all unit and e2e tests"
+dependencies = ["test-flow", "test-e2e-flow"]
+
+[tasks.pre-verify]
+
+[tasks.post-verify]
+dependencies = ["clean-all"]
+
+[tasks.test-e2e-flow]
+description = "Provides pre and post hooks for test-e2e"
+dependencies = ["pre-test-e2e", "test-e2e", "post-test-e2e"]
+
+[tasks.pre-test-e2e]
+
+[tasks.test-e2e]
+
+[tasks.post-test-e2e]

examples/cargo-make/wasm-test.toml

@@ -1,5 +1,5 @@
-[tasks.web-test]
-dependencies = ["wasm-web-test"]
+[tasks.post-test]
+dependencies = ["test-wasm"]
 
 [tasks.clean-all]
 dependencies = ["clean-cargo", "clean-trunk"]

examples/counter/Makefile.toml

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

examples/counter_isomorphic/Cargo.toml

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

examples/counter_isomorphic/Makefile.toml

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

examples/counter_isomorphic/src/counters.rs

@@ -12,13 +12,6 @@ cfg_if! {
         lazy_static::lazy_static! {
             pub static ref COUNT_CHANNEL: BroadcastChannel<i32> = BroadcastChannel::new();
         }
-
-        pub fn register_server_functions() {
-            _ = GetServerCount::register();
-            _ = AdjustServerCount::register();
-            _ = ClearServerCount::register();
-        }
-
     }
 }
 

examples/counter_isomorphic/src/main.rs

@@ -31,7 +31,12 @@ cfg_if! {
         #[actix_web::main]
         async fn main() -> std::io::Result<()> {
 
-            crate::counters::register_server_functions();
+            // Explicit server function registration is no longer required
+            // on the main branch. On 0.3.0 and earlier, uncomment the lines
+            // below to register the server functions.
+            // _ = GetServerCount::register();
+            // _ = AdjustServerCount::register();
+            // _ = ClearServerCount::register();
 
             // Setting this to None means we'll be using cargo-leptos and its env vars.
             // when not using cargo-leptos None must be replaced with Some("Cargo.toml")

examples/counter_without_macros/Makefile.toml

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

examples/counters/Makefile.toml

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

examples/counters/tests/web.rs

@@ -107,7 +107,7 @@ fn inc() {
          Counters</button><button>Clear Counters</button><p>Total: <span><!-- \
          <DynChild> -->5<!-- </DynChild> --></span> from <span><!-- \
          <DynChild> -->2<!-- </DynChild> --></span> counters.</p><ul><!-- \
-         <Each> --><!-- <EachItem> --><!-- <Counter> \
+         <Each> --><!-- <EachItem> --><!-- <EachItem> --><!-- <Counter> \
          --><li><button>-1</button><input type=\"text\"><span><!-- <DynChild> \
          -->2<!-- </DynChild> \
          --></span><button>+1</button><button>x</button></li><!-- </Counter> \

examples/counters_stable/Makefile.toml

@@ -1,3 +1,5 @@
+extend = [{ path = "../cargo-make/main.toml" }]
+
 [tasks.build]
 command = "cargo"
 args = ["+stable", "build-all-features"]

examples/error_boundary/Makefile.toml

@@ -1,3 +1,5 @@
+extend = [{ path = "../cargo-make/main.toml" }]
+
 [tasks.build]
 command = "cargo"
 args = ["+nightly", "build-all-features"]

examples/errors_axum/Makefile.toml

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

examples/errors_axum/src/fallback.rs

@@ -10,12 +10,10 @@ cfg_if! { if #[cfg(feature = "ssr")] {
     use axum::response::Response as AxumResponse;
     use tower::ServiceExt;
     use tower_http::services::ServeDir;
-    use std::sync::Arc;
     use leptos::{LeptosOptions, view};
     use crate::landing::App;
 
-    pub async fn file_and_error_handler(uri: Uri, State(options): State<Arc<LeptosOptions>>, req: Request<Body>) -> AxumResponse {
-        let options = &*options;
+    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();
 

examples/errors_axum/src/landing.rs

@@ -3,11 +3,6 @@ use leptos::*;
 use leptos_meta::*;
 use leptos_router::*;
 
-#[cfg(feature = "ssr")]
-pub fn register_server_functions() {
-    _ = CauseInternalServerError::register();
-}
-
 #[server(CauseInternalServerError, "/api")]
 pub async fn cause_internal_server_error() -> Result<(), ServerFnError> {
     // fake API delay

examples/errors_axum/src/main.rs

@@ -14,18 +14,17 @@ cfg_if! { if #[cfg(feature = "ssr")] {
     use errors_axum::*;
     use leptos::*;
     use leptos_axum::{generate_route_list, LeptosRoutes};
-    use std::sync::Arc;
 }}
 
 //Define a handler to test extractor with state
 #[cfg(feature = "ssr")]
 async fn custom_handler(
     Path(id): Path<String>,
-    State(options): State<Arc<LeptosOptions>>,
+    State(options): State<LeptosOptions>,
     req: Request<AxumBody>,
 ) -> Response {
     let handler = leptos_axum::render_app_to_stream_with_context(
-        (*options).clone(),
+        options.clone(),
         move |cx| {
             provide_context(cx, id.clone());
         },
@@ -40,11 +39,14 @@ async fn main() {
     simple_logger::init_with_level(log::Level::Debug)
         .expect("couldn't initialize logging");
 
-    crate::landing::register_server_functions();
+    // Explicit server function registration is no longer required
+    // on the main branch. On 0.3.0 and earlier, uncomment the lines
+    // below to register the server functions.
+    // _ = CauseInternalServerError::register();
 
     // Setting this to None means we'll be using cargo-leptos and its env vars
     let conf = get_configuration(None).await.unwrap();
-    let leptos_options = Arc::new(conf.leptos_options);
+    let leptos_options = conf.leptos_options;
     let addr = leptos_options.site_addr;
     let routes = generate_route_list(|cx| view! { cx, <App/> }).await;
 
@@ -52,11 +54,7 @@ async fn main() {
     let app = Router::new()
         .route("/api/*fn_name", post(leptos_axum::handle_server_fns))
         .route("/special/:id", get(custom_handler))
-        .leptos_routes(
-            leptos_options.clone(),
-            routes,
-            |cx| view! { cx, <App/> },
-        )
+        .leptos_routes(&leptos_options, routes, |cx| view! { cx, <App/> })
         .fallback(file_and_error_handler)
         .with_state(leptos_options);
 

examples/fetch/Makefile.toml

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

examples/fetch/src/lib.rs

@@ -17,7 +17,9 @@ pub enum FetchError {
     Json,
 }
 
-async fn fetch_cats(count: u32) -> Result<Vec<String>, FetchError> {
+type CatCount = usize;
+
+async fn fetch_cats(count: CatCount) -> Result<Vec<String>, FetchError> {
     if count > 0 {
         // make the request
         let res = reqwasm::http::Request::get(&format!(
@@ -32,6 +34,7 @@ async fn fetch_cats(count: u32) -> Result<Vec<String>, FetchError> {
         .map_err(|_| FetchError::Json)?
         // extract the URL field for each cat
         .into_iter()
+        .take(count)
         .map(|cat| cat.url)
         .collect::<Vec<_>>();
         Ok(res)
@@ -41,7 +44,7 @@ async fn fetch_cats(count: u32) -> Result<Vec<String>, FetchError> {
 }
 
 pub fn fetch_example(cx: Scope) -> impl IntoView {
-    let (cat_count, set_cat_count) = create_signal::<u32>(cx, 0);
+    let (cat_count, set_cat_count) = create_signal::<CatCount>(cx, 0);
 
     // we use local_resource here because
     // 1) our error type isn't serializable/deserializable
@@ -75,7 +78,7 @@ pub fn fetch_example(cx: Scope) -> impl IntoView {
         cats.read(cx).map(|data| {
             data.map(|data| {
                 data.iter()
-                    .map(|s| view! { cx, <span>{s}</span> })
+                    .map(|s| view! { cx, <p><img src={s}/></p> })
                     .collect_view(cx)
             })
         })
@@ -89,7 +92,7 @@ pub fn fetch_example(cx: Scope) -> impl IntoView {
                     type="number"
                     prop:value=move || cat_count.get().to_string()
                     on:input=move |ev| {
-                        let val = event_target_value(&ev).parse::<u32>().unwrap_or(0);
+                        let val = event_target_value(&ev).parse::<CatCount>().unwrap_or(0);
                         set_cat_count(val);
                     }
                 />
@@ -98,7 +101,9 @@ pub fn fetch_example(cx: Scope) -> impl IntoView {
                 <Transition fallback=move || {
                     view! { cx, <div>"Loading (Suspense Fallback)..."</div> }
                 }>
+                <div>
                     {cats_view}
+                </div>
                 </Transition>
             </ErrorBoundary>
         </div>

examples/gtk/Makefile.toml

@@ -0,0 +1,8 @@
+[env]
+VERIFY_GTK = false
+
+[tasks.verify-flow]
+condition = { env_set = ["VERIFY_GTK"] }
+
+[tasks.verify]
+condition = { env_set = ["VERIFY_GTK"] }

examples/hackernews/Makefile.toml

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

examples/hackernews/src/lib.rs

@@ -22,9 +22,9 @@ pub fn App(cx: Scope) -> impl IntoView {
             <Nav />
             <main>
                 <Routes>
-                    <Route path="users/:id" view=|cx| view! { cx,  <User/> }/>
-                    <Route path="stories/:id" view=|cx| view! { cx,  <Story/> }/>
-                    <Route path=":stories?" view=|cx| view! { cx,  <Stories/> }/>
+                    <Route path="users/:id" view=User/>
+                    <Route path="stories/:id" view=Story/>
+                    <Route path=":stories?" view=Stories/>
                 </Routes>
             </main>
         </Router>

examples/hackernews_axum/Makefile.toml

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

examples/hackernews_axum/src/fallback.rs

@@ -11,12 +11,10 @@ if #[cfg(feature = "ssr")] {
     use axum::response::Response as AxumResponse;
     use tower::ServiceExt;
     use tower_http::services::ServeDir;
-    use std::sync::Arc;
     use leptos::{LeptosOptions};
     use crate::error_template::error_template;
 
-    pub async fn file_and_error_handler(uri: Uri, State(options): State<Arc<LeptosOptions>>, req: Request<Body>) -> AxumResponse {
-        let options = &*options;
+    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();
 
@@ -30,10 +28,9 @@ if #[cfg(feature = "ssr")] {
 
     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();
-        let root_path = format!("{root}");
         // `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_path).oneshot(req).await {
+        match ServeDir::new(root).oneshot(req).await {
             Ok(res) => Ok(res.map(boxed)),
             Err(err) => Err((
                 StatusCode::INTERNAL_SERVER_ERROR,

examples/hackernews_axum/src/lib.rs

@@ -22,9 +22,9 @@ pub fn App(cx: Scope) -> impl IntoView {
                 <Nav />
                 <main>
                     <Routes>
-                        <Route path="users/:id" view=|cx| view! { cx,  <User/> }/>
-                        <Route path="stories/:id" view=|cx| view! { cx,  <Story/> }/>
-                        <Route path=":stories?" view=|cx| view! { cx,  <Stories/> }/>
+                        <Route path="users/:id" view=User/>
+                        <Route path="stories/:id" view=Story/>
+                        <Route path=":stories?" view=Stories/>
                     </Routes>
                 </main>
             </Router>

examples/hackernews_axum/src/main.rs

@@ -9,7 +9,6 @@ if #[cfg(feature = "ssr")] {
         routing::get,
     };
     use leptos_axum::{generate_route_list, LeptosRoutes};
-    use std::sync::Arc;
     use hackernews_axum::fallback::file_and_error_handler;
 
     #[tokio::main]
@@ -17,7 +16,7 @@ if #[cfg(feature = "ssr")] {
         use hackernews_axum::*;
 
         let conf = get_configuration(Some("Cargo.toml")).await.unwrap();
-        let leptos_options = Arc::new(conf.leptos_options);
+        let leptos_options = conf.leptos_options;
         let addr = leptos_options.site_addr;
         let routes = generate_route_list(|cx| view! { cx, <App/> }).await;
 
@@ -26,7 +25,7 @@ if #[cfg(feature = "ssr")] {
         // build our application with a route
         let app = Router::new()
         .route("/favicon.ico", get(file_and_error_handler))
-        .leptos_routes(leptos_options.clone(), routes, |cx| view! { cx, <App/> } )
+        .leptos_routes(&leptos_options, routes, |cx| view! { cx, <App/> } )
         .fallback(file_and_error_handler)
         .with_state(leptos_options);
 

examples/hackernews_axum/src/routes/stories.rs

@@ -36,7 +36,7 @@ pub fn Stories(cx: Scope) -> impl IntoView {
     );
     let (pending, set_pending) = create_signal(cx, false);
 
-    let hide_more_link = move || {
+    let hide_more_link = move |cx| {
         pending()
             || stories.read(cx).unwrap_or(None).unwrap_or_default().len() < 28
     };
@@ -66,16 +66,20 @@ pub fn Stories(cx: Scope) -> impl IntoView {
                     }}
                 </span>
                 <span>"page " {page}</span>
-                <span class="page-link"
-                    class:disabled=hide_more_link
-                    aria-hidden=hide_more_link
+                <Transition
+                    fallback=move || view! { cx,  <p>"Loading..."</p> }
                 >
-                    <a href=move || format!("/{}?page={}", story_type(), page() + 1)
-                        aria-label="Next Page"
+                    <span class="page-link"
+                        class:disabled=move || hide_more_link(cx)
+                        aria-hidden=move || hide_more_link(cx)
                     >
-                        "more >"
-                    </a>
-                </span>
+                        <a href=move || format!("/{}?page={}", story_type(), page() + 1)
+                            aria-label="Next Page"
+                        >
+                            "more >"
+                        </a>
+                    </span>
+                </Transition>
             </div>
             <main class="news-list">
                 <div>

examples/js-framework-benchmark/Cargo.toml

@@ -0,0 +1,22 @@
+[package]
+name = "js-framework-benchmark-leptos"
+version = "1.0.0"
+edition = "2021"
+
+[profile.release]
+codegen-units = 1
+lto = true
+
+[dependencies]
+leptos = { path = "../../leptos", features=["template_macro"] }
+console_log = "1"
+log = "0.4"
+# used in rand, but we need to enable js feature
+getrandom = { version = "0.2.7", features = ["js"] }
+rand = { version = "0.8.5", features = ["small_rng"] }
+console_error_panic_hook = "0.1.7"
+
+[dev-dependencies]
+wasm-bindgen = "0.2"
+wasm-bindgen-test = "0.3.0"
+web-sys = "0.3"

examples/js-framework-benchmark/Makefile.toml

@@ -0,0 +1,14 @@
+extend = [
+    { path = "../cargo-make/main.toml" },
+    { path = "../cargo-make/wasm-test.toml" },
+]
+
+[tasks.build]
+command = "cargo"
+args = ["+nightly", "build-all-features"]
+install_crate = "cargo-all-features"
+
+[tasks.check]
+command = "cargo"
+args = ["+nightly", "check-all-features"]
+install_crate = "cargo-all-features"

examples/js-framework-benchmark/README.md

@@ -0,0 +1,8 @@
+# Leptos benchmark example
+
+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.
+
+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.
+
+> If you don't have `trunk` installed, [click here for install instructions.](https://trunkrs.dev/)

examples/js-framework-benchmark/index.html

@@ -0,0 +1,14 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Leptos</title>
+    <base href="bundled-dist/"></base>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+	<link data-trunk rel="rust" data-wasm-opt="z"/>
+	<link data-trunk rel="icon" type="image/ico" href="/public/favicon.ico"/>
+  </head>
+  <body>
+    <span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
+    <div id='main'></div>
+  </body>
+</html>

examples/js-framework-benchmark/src/lib.rs

@@ -0,0 +1,192 @@
+use leptos::*;
+use rand::prelude::*;
+use std::sync::atomic::{AtomicUsize, Ordering};
+static ADJECTIVES: &[&str] = &[
+    "pretty",
+    "large",
+    "big",
+    "small",
+    "tall",
+    "short",
+    "long",
+    "handsome",
+    "plain",
+    "quaint",
+    "clean",
+    "elegant",
+    "easy",
+    "angry",
+    "crazy",
+    "helpful",
+    "mushy",
+    "odd",
+    "unsightly",
+    "adorable",
+    "important",
+    "inexpensive",
+    "cheap",
+    "expensive",
+    "fancy",
+];
+
+static COLOURS: &[&str] = &[
+    "red", "yellow", "blue", "green", "pink", "brown", "purple", "brown",
+    "white", "black", "orange",
+];
+
+static NOUNS: &[&str] = &[
+    "table", "chair", "house", "bbq", "desk", "car", "pony", "cookie",
+    "sandwich", "burger", "pizza", "mouse", "keyboard",
+];
+
+#[derive(Copy, Debug, Clone, PartialEq, Eq, Hash)]
+struct RowData {
+    id: usize,
+    label: (ReadSignal<String>, WriteSignal<String>),
+}
+
+static ID_COUNTER: AtomicUsize = AtomicUsize::new(1);
+
+fn build_data(cx: Scope, count: usize) -> Vec<RowData> {
+    let mut thread_rng = thread_rng();
+
+    let mut data = Vec::new();
+    data.reserve_exact(count);
+
+    for _i in 0..count {
+        let adjective = ADJECTIVES.choose(&mut thread_rng).unwrap();
+        let colour = COLOURS.choose(&mut thread_rng).unwrap();
+        let noun = NOUNS.choose(&mut thread_rng).unwrap();
+        let capacity = adjective.len() + colour.len() + noun.len() + 2;
+        let mut label = String::with_capacity(capacity);
+        label.push_str(adjective);
+        label.push(' ');
+        label.push_str(colour);
+        label.push(' ');
+        label.push_str(noun);
+
+        data.push(RowData {
+            id: ID_COUNTER.load(Ordering::Relaxed),
+            label: create_signal(cx, label),
+        });
+
+        ID_COUNTER
+            .store(ID_COUNTER.load(Ordering::Relaxed) + 1, Ordering::Relaxed);
+    }
+
+    data
+}
+
+/// Button component.
+#[component]
+fn Button(
+    cx: Scope,
+    /// ID for the button element
+    id: &'static str,
+    /// Text that should be included
+    text: &'static str,
+) -> impl IntoView {
+    view! {
+        cx,
+        <div class="col-sm-6 smallpad">
+            <button
+                id=id
+                class="btn btn-primary btn-block"
+                type="button"
+            >
+                {text}
+            </button>
+        </div>
+    }
+}
+
+#[component]
+pub fn App(cx: Scope) -> impl IntoView {
+    let (data, set_data) = create_signal(cx, Vec::<RowData>::new());
+    let (selected, set_selected) = create_signal(cx, None::<usize>);
+
+    let remove = move |id: usize| {
+        set_data.update(move |data| data.retain(|row| row.id != id));
+    };
+
+    let run = move |_| {
+        set_data(build_data(cx, 1000));
+        set_selected(None);
+    };
+
+    let run_lots = move |_| {
+        set_data(build_data(cx, 10000));
+        set_selected(None);
+    };
+
+    let add = move |_| {
+        set_data.update(move |data| data.append(&mut build_data(cx, 1000)));
+    };
+
+    let update = move |_| {
+        data.with(|data| {
+            for row in data.iter().step_by(10) {
+                row.label.1.update(|n| n.push_str(" !!!"));
+            }
+        });
+    };
+
+    let clear = move |_| {
+        set_data(Vec::new());
+        set_selected(None);
+    };
+
+    let swap_rows = move |_| {
+        set_data.update(|data| {
+            if data.len() > 998 {
+                data.swap(1, 998);
+            }
+        });
+    };
+
+    let is_selected = create_selector(cx, selected);
+
+    view! {
+        cx,
+        <div class="container">
+            <div class="jumbotron">
+                <div class="row">
+                    <div class="col-md-6"><h1>"Leptos"</h1></div>
+                    <div class="col-md-6">
+                        <div class="row">
+                            <Button id="run" text="Create 1,000 rows" on:click=run />
+                            <Button id="runlots" text="Create 10,000 rows" on:click=run_lots />
+                            <Button id="add" text="Append 1,000 rows" on:click=add />
+                            <Button id="update" text="Update every 10th row" on:click=update />
+                            <Button id="clear" text="Clear" on:click=clear />
+                            <Button id="swaprows" text="Swap Rows" on:click=swap_rows />
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <table class="table table-hover table-striped test-data">
+                <tbody>
+                    <For
+                        each={data}
+                        key={|row| row.id}
+                        view=move |cx, row: RowData| {
+                            let row_id = row.id;
+                            let (label, _) = row.label;
+                            let is_selected = is_selected.clone();
+                            template! {
+                                cx,
+                                <tr class:danger={move || is_selected(Some(row_id))}>
+                                    <td class="col-md-1">{row_id.to_string()}</td>
+                                    <td class="col-md-4"><a on:click=move |_| set_selected(Some(row_id))>{move || label.get()}</a></td>
+                                    <td class="col-md-1"><a on:click=move |_| remove(row_id)><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>
+                                    <td class="col-md-6"/>
+                                </tr>
+                            }
+                        }
+                    />
+                </tbody>
+            </table>
+            <span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true" />
+        </div>
+    }
+}

examples/js-framework-benchmark/src/main.rs

@@ -0,0 +1,10 @@
+use js_framework_benchmark_leptos::App;
+use leptos::{wasm_bindgen::JsCast, *};
+
+pub fn main() {
+    _ = console_log::init_with_level(log::Level::Debug);
+    console_error_panic_hook::set_once();
+
+    let root = document().query_selector("#main").unwrap().unwrap();
+    mount_to(root.unchecked_into(), |cx| view! { cx, <App/> });
+}

examples/js-framework-benchmark/tests/web.rs

@@ -0,0 +1,60 @@
+use js_framework_benchmark_leptos::*;
+use leptos::*;
+use wasm_bindgen::JsCast;
+use wasm_bindgen_test::*;
+
+wasm_bindgen_test_configure!(run_in_browser);
+
+#[wasm_bindgen_test]
+fn add_item() {
+    let document = leptos::document();
+    let test_wrapper = document.create_element("section").unwrap();
+    let _ = document.body().unwrap().append_child(&test_wrapper);
+
+    // start by rendering our counter and mounting it to the DOM
+    mount_to(
+        test_wrapper.clone().unchecked_into(),
+        |cx| view! { cx, <App/> },
+    );
+
+    let table = test_wrapper
+        .query_selector("table")
+        .unwrap()
+        .unwrap()
+        .unchecked_into::<web_sys::HtmlTableElement>();
+
+    let create = test_wrapper
+        .query_selector("button#runlots")
+        .unwrap()
+        .unwrap()
+        .unchecked_into::<web_sys::HtmlButtonElement>();
+
+    let add = test_wrapper
+        .query_selector("button#add")
+        .unwrap()
+        .unwrap()
+        .unchecked_into::<web_sys::HtmlButtonElement>();
+
+    let clear = test_wrapper
+        .query_selector("button#clear")
+        .unwrap()
+        .unwrap()
+        .unchecked_into::<web_sys::HtmlButtonElement>();
+
+    // now let's click the `clear` button
+    clear.click();
+
+    // now check that table is empty
+    assert_eq!(table.rows().length(), 0);
+
+    create.click();
+
+    assert_eq!(table.rows().length(), 10000);
+    add.click();
+
+    assert_eq!(table.rows().length(), 11000);
+
+    clear.click();
+
+    assert_eq!(table.rows().length(), 0)
+}

examples/leptos-tailwind-axum/Cargo.toml

@@ -0,0 +1,96 @@
+[package]
+name = "leptos-tailwind"
+version = "0.1.0"
+edition = "2021"
+
+[lib]
+crate-type = ["cdylib", "rlib"]
+
+[dependencies]
+axum = { version = "0.6.18", optional = true }
+console_error_panic_hook = "0.1.7"
+console_log = "1"
+cfg-if = "1"
+leptos = { version = "0.3", default-features = false, features = ["serde"] }
+leptos_axum = { version = "0.3", optional = true }
+leptos_meta = { version = "0.3", default-features = false }
+leptos_router = { version = "0.3", default-features = false }
+log = "0.4.17"
+simple_logger = "4"
+tokio = { version = "1.28.1", optional = true }
+tower = { version = "0.4.13", optional = true }
+tower-http = { version = "0.4", features = ["fs"], optional = true }
+wasm-bindgen = "0.2.84"
+thiserror = "1.0.40"
+tracing = { version = "0.1.37", optional = true }
+http = "0.2.9"
+
+[features]
+hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"]
+ssr = [
+    "dep:axum",
+    "dep:tokio",
+    "dep:tower",
+    "dep:tower-http",
+    "dep:leptos_axum",
+    "leptos/ssr",
+    "leptos_meta/ssr",
+    "leptos_router/ssr",
+    "dep:tracing",
+]
+
+[package.metadata.cargo-all-features]
+denylist = ["axum", "tokio", "tower", "tower-http", "leptos_axum"]
+skip_feature_sets = [["ssr", "hydrate"]]
+
+[package.metadata.leptos]
+# The name used by wasm-bindgen/cargo-leptos for the JS/WASM bundle. Defaults to the crate name   
+output-name = "tailwind"
+# 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/output.css"
+# [Optional] Files in the asset-dir will be copied to the site-root directory
+assets-dir = "public"
+# The IP and port (ex: 127.0.0.1:3000) where the server serves the content. Use it in your server setup.
+site-addr = "127.0.0.1:3000"
+# The port to use for automatic reload monitoring
+reload-port = 3001
+
+# [Optional] Command to use when running end2end tests. It will run in the end2end dir.
+#   [Windows] for non-WSL use "npx.cmd playwright test"
+#   This binary name can be checked in Powershell with Get-Command npx
+end2end-cmd = "npx playwright test"
+end2end-dir = "end2end"
+
+#  The browserlist query used for optimizing the CSS.
+browserquery = "defaults"
+
+# Set by cargo-leptos watch when building with that 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/leptos-tailwind-axum/README.md

@@ -0,0 +1,102 @@
+# Leptos with Axum + TailwindCSS Tempate
+
+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.
+
+To use it first of all you need to have `cargo-leptos` installed on your machine
+
+`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 --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/leptos-tailwind-axum/end2end/package-lock.json

@@ -0,0 +1,74 @@
+{
+  "name": "end2end",
+  "version": "1.0.0",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "end2end",
+      "version": "1.0.0",
+      "license": "ISC",
+      "devDependencies": {
+        "@playwright/test": "^1.28.0"
+      }
+    },
+    "node_modules/@playwright/test": {
+      "version": "1.28.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.28.0.tgz",
+      "integrity": "sha512-vrHs5DFTPwYox5SGKq/7TDn/S4q6RA1zArd7uhO6EyP9hj3XgZBBM12ktMbnDQNxh/fL1IUKsTNLxihmsU38lQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*",
+        "playwright-core": "1.28.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "18.11.9",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.9.tgz",
+      "integrity": "sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg==",
+      "dev": true
+    },
+    "node_modules/playwright-core": {
+      "version": "1.28.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.28.0.tgz",
+      "integrity": "sha512-nJLknd28kPBiCNTbqpu6Wmkrh63OEqJSFw9xOfL9qxfNwody7h6/L3O2dZoWQ6Oxcm0VOHjWmGiCUGkc0X3VZA==",
+      "dev": true,
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    }
+  },
+  "dependencies": {
+    "@playwright/test": {
+      "version": "1.28.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.28.0.tgz",
+      "integrity": "sha512-vrHs5DFTPwYox5SGKq/7TDn/S4q6RA1zArd7uhO6EyP9hj3XgZBBM12ktMbnDQNxh/fL1IUKsTNLxihmsU38lQ==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*",
+        "playwright-core": "1.28.0"
+      }
+    },
+    "@types/node": {
+      "version": "18.11.9",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.9.tgz",
+      "integrity": "sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg==",
+      "dev": true
+    },
+    "playwright-core": {
+      "version": "1.28.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.28.0.tgz",
+      "integrity": "sha512-nJLknd28kPBiCNTbqpu6Wmkrh63OEqJSFw9xOfL9qxfNwody7h6/L3O2dZoWQ6Oxcm0VOHjWmGiCUGkc0X3VZA==",
+      "dev": true
+    }
+  }
+}

examples/leptos-tailwind-axum/end2end/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "end2end",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {},
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@playwright/test": "^1.28.0"
+  }
+}

examples/leptos-tailwind-axum/end2end/playwright.config.ts

@@ -0,0 +1,107 @@
+import type { PlaywrightTestConfig } from "@playwright/test";
+import { devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+const config: PlaywrightTestConfig = {
+  testDir: "./tests",
+  /* Maximum time one test can run for. */
+  timeout: 30 * 1000,
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 5000,
+  },
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: "html",
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+    actionTimeout: 0,
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://localhost:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: {
+        ...devices["Desktop Chrome"],
+      },
+    },
+
+    {
+      name: "firefox",
+      use: {
+        ...devices["Desktop Firefox"],
+      },
+    },
+
+    {
+      name: "webkit",
+      use: {
+        ...devices["Desktop Safari"],
+      },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: {
+    //     ...devices['Pixel 5'],
+    //   },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: {
+    //     ...devices['iPhone 12'],
+    //   },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: {
+    //     channel: 'msedge',
+    //   },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: {
+    //     channel: 'chrome',
+    //   },
+    // },
+  ],
+
+  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
+  // outputDir: 'test-results/',
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   port: 3000,
+  // },
+};
+
+export default config;

examples/leptos-tailwind-axum/end2end/tests/example.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from "@playwright/test";
+
+test("homepage has title and links to intro page", async ({ page }) => {
+  await page.goto("http://localhost:3000/");
+
+  await expect(page).toHaveTitle("Welcome to Leptos");
+
+  await expect(page.locator("h1")).toHaveText("Welcome to Leptos!");
+});

examples/leptos-tailwind-axum/input.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

examples/leptos-tailwind-axum/package-lock.json

@@ -0,0 +1,926 @@
+{
+  "name": "leptos-tailwind",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "leptos-tailwind",
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "preline": "^1.8.0",
+        "tailwindcss": "^3.3.2"
+      }
+    },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
+      "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
+      "dependencies": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
+      "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.4.15",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.18",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz",
+      "integrity": "sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "3.1.0",
+        "@jridgewell/sourcemap-codec": "1.4.14"
+      }
+    },
+    "node_modules/@jridgewell/trace-mapping/node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.4.14",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
+      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dependencies": {
+        "fill-range": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://paulmillr.com/funding/"
+        }
+      ],
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
+    },
+    "node_modules/fast-glob": {
+      "version": "3.2.12",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
+      "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fastq": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz",
+      "integrity": "sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+    },
+    "node_modules/glob": {
+      "version": "7.1.6",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+      "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "dependencies": {
+        "function-bind": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.12.1.tgz",
+      "integrity": "sha512-Q4ZuBAe2FUsKtyQJoQHlvP8OvBERxO3jEmy1I7hcRXcJBGGHFh/aJBswbXuS9sgrDH2QUO8ilkwNPHvHMd8clg==",
+      "dependencies": {
+        "has": "^1.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "1.18.2",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.18.2.tgz",
+      "integrity": "sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
+    "node_modules/lilconfig": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
+      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "dependencies": {
+        "braces": "^3.0.2",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
+      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
+    },
+    "node_modules/picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz",
+      "integrity": "sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.4.23",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.23.tgz",
+      "integrity": "sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz",
+      "integrity": "sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==",
+      "dependencies": {
+        "lilconfig": "^2.0.5",
+        "yaml": "^2.1.1"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
+      "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.11"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.0.13",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
+      "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
+    },
+    "node_modules/preline": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/preline/-/preline-1.8.0.tgz",
+      "integrity": "sha512-guttn86Fc/+AbvN9oKcr2z3zU7DL3Q5dl7nhcR4nTi5F02LXQc7WIYwgIXMR97kymCs52feiju6glXO3dUIpvA==",
+      "dependencies": {
+        "@popperjs/core": "^2.11.2"
+      }
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz",
+      "integrity": "sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==",
+      "dependencies": {
+        "is-core-module": "^2.11.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sucrase": {
+      "version": "3.32.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.32.0.tgz",
+      "integrity": "sha512-ydQOU34rpSyj2TGyz4D2p8rbktIOZ8QY9s+DGLvFU1i5pWJE8vkpruCjGCMHsdXwnD7JDcS+noSwM/a7zyNFDQ==",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "7.1.6",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.2.tgz",
+      "integrity": "sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.5.3",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.2.12",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.18.2",
+        "lilconfig": "^2.1.0",
+        "micromatch": "^4.0.5",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.23",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.1",
+        "postcss-nested": "^6.0.1",
+        "postcss-selector-parser": "^6.0.11",
+        "postcss-value-parser": "^4.2.0",
+        "resolve": "^1.22.2",
+        "sucrase": "^3.32.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
+    },
+    "node_modules/yaml": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.1.tgz",
+      "integrity": "sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==",
+      "engines": {
+        "node": ">= 14"
+      }
+    }
+  }
+}

examples/leptos-tailwind-axum/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "leptos-tailwind",
+  "version": "1.0.0",
+  "description": "<picture>\r     <source srcset=\"https://raw.githubusercontent.com/leptos-rs/leptos/main/docs/logos/Leptos_logo_Solid_White.svg\" media=\"(prefers-color-scheme: dark)\">\r     <img src=\"https://raw.githubusercontent.com/leptos-rs/leptos/main/docs/logos/Leptos_logo_RGB.svg\" alt=\"Leptos Logo\">\r </picture>",
+  "main": "index.js",
+  "scripts": {
+    "build":"npx tailwindcss -i ./input.css -o ./style/output.css",
+    "watch":"npx tailwindcss -i ./input.css -o ./style/output.css --watch"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "tailwindcss": "^3.3.2"
+  }
+}

examples/leptos-tailwind-axum/rust-toolchain.toml

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

examples/leptos-tailwind-axum/src/app.rs

@@ -0,0 +1,45 @@
+use leptos::*;
+use leptos_meta::*;
+use leptos_router::*;
+
+#[component]
+pub fn App(cx: Scope) -> impl IntoView {
+    provide_meta_context(cx);
+
+    view! {
+        cx,
+        <Stylesheet id="leptos" href="/pkg/tailwind.css"/>
+        <Link rel="shortcut icon" type_="image/ico" href="/favicon.ico"/>
+        <Router>
+            <Routes>
+                <Route path="" view=  move |cx| view! { cx, <Home/> }/>
+            </Routes>
+        </Router>
+    }
+}
+
+#[component]
+fn Home(cx: Scope) -> impl IntoView {
+
+    let (value, set_value) = create_signal(cx, 0);
+
+    // thanks to https://tailwindcomponents.com/component/blue-buttons-example for the showcase layout
+    view! { cx,
+        <Title text="Leptos + Tailwindcss"/>
+            <main>
+                <div class="bg-gradient-to-tl from-blue-800 to-blue-500 text-white font-mono flex flex-col min-h-screen">
+                    <div class="flex flex-row-reverse flex-wrap m-auto">
+                        <button on:click=move |_| set_value.update(|value| *value += 1) class="rounded px-3 py-2 m-1 border-b-4 border-l-2 shadow-lg bg-blue-700 border-blue-800 text-white">
+                            "+"
+                        </button>
+                        <button class="rounded px-3 py-2 m-1 border-b-4 border-l-2 shadow-lg bg-blue-800 border-blue-900 text-white">
+                            {value}
+                        </button>
+                        <button on:click=move |_| set_value.update(|value| *value -= 1) class="rounded px-3 py-2 m-1 border-b-4 border-l-2 shadow-lg bg-blue-700 border-blue-800 text-white">
+                            "-"
+                        </button>
+                    </div>
+                </div>
+            </main>
+    }
+}

examples/leptos-tailwind-axum/src/error_template.rs

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

examples/leptos-tailwind-axum/src/fileserv.rs

@@ -0,0 +1,45 @@
+use cfg_if::cfg_if;
+
+cfg_if! { if #[cfg(feature = "ssr")] {
+    use axum::{
+        body::{boxed, Body, BoxBody},
+        extract::Extension,
+        response::IntoResponse,
+        http::{Request, Response, StatusCode, Uri},
+    };
+    use axum::response::Response as AxumResponse;
+    use tower::ServiceExt;
+    use tower_http::services::ServeDir;
+    use std::sync::Arc;
+    use leptos::*;
+    use crate::error_template::ErrorTemplate;
+    use crate::error_template::AppError;
+
+    pub async fn file_and_error_handler(uri: Uri, Extension(options): Extension<Arc<LeptosOptions>>, req: Request<Body>) -> AxumResponse {
+        let options = &*options;
+        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 mut errors = Errors::default();
+            errors.insert_with_default_key(AppError::NotFound);
+            let handler = leptos_axum::render_app_to_stream(options.to_owned(), move |cx| view!{cx, <ErrorTemplate outside_errors=errors.clone()/>});
+            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/leptos-tailwind-axum/src/lib.rs

@@ -0,0 +1,21 @@
+use cfg_if::cfg_if;
+pub mod app;
+pub mod error_template;
+pub mod fileserv;
+
+cfg_if! { if #[cfg(feature = "hydrate")] {
+    use leptos::*;
+    use wasm_bindgen::prelude::wasm_bindgen;
+    use crate::app::*;
+
+    #[wasm_bindgen]
+    pub fn hydrate() {
+        // initializes logging using the `log` crate
+        _ = console_log::init_with_level(log::Level::Debug);
+        console_error_panic_hook::set_once();
+
+        leptos::mount_to_body(move |cx| {
+            view! { cx, <App/> }
+        });
+    }
+}}

examples/leptos-tailwind-axum/src/main.rs

@@ -0,0 +1,45 @@
+#[cfg(feature = "ssr")]
+#[tokio::main]
+async fn main() {
+    use axum::{extract::Extension, routing::post, Router};
+    use leptos::*;
+    use leptos_axum::{generate_route_list, LeptosRoutes};
+    use log::info;
+    use leptos_tailwind::app::*;
+    use leptos_tailwind::fileserv::file_and_error_handler;
+    use std::sync::Arc;
+
+    simple_logger::init_with_level(log::Level::Info).expect("couldn't initialize logging");
+   
+    // Setting get_configuration(None) means we'll be using cargo-leptos's env values
+    // For deployment these variables are:
+    // <https://github.com/leptos-rs/start-axum#executing-a-server-on-a-remote-machine-without-the-toolchain>
+    // Alternately a file can be specified such as Some("Cargo.toml")
+    // The file would need to be included with the executable when moved to deployment
+    let conf = get_configuration(None).await.unwrap();
+    let leptos_options = conf.leptos_options;
+    let addr = leptos_options.site_addr;
+    let routes = generate_route_list(|cx| view! { cx, <App/> }).await;
+
+    // build our application with a route
+    let app = Router::new()
+        .route("/api/*fn_name", post(leptos_axum::handle_server_fns))
+        .leptos_routes(leptos_options.clone(), routes, |cx| view! { cx, <App/> })
+        .fallback(file_and_error_handler)
+        .layer(Extension(Arc::new(leptos_options)));
+
+    // run our app with hyper
+    // `axum::Server` is a re-export of `hyper::Server`
+    info!("listening on http://{}", &addr);
+    axum::Server::bind(&addr)
+        .serve(app.into_make_service())
+        .await
+        .unwrap();
+}
+
+#[cfg(not(feature = "ssr"))]
+pub fn main() {
+    // no client-side main function
+    // unless we want this to work with e.g., Trunk for a purely client-side app
+    // see lib.rs for hydration function instead
+}

examples/leptos-tailwind-axum/style/output.css

@@ -0,0 +1,642 @@
+/*
+! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com
+*/
+
+/*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  /* 1 */
+  border-width: 0;
+  /* 2 */
+  border-style: solid;
+  /* 2 */
+  border-color: #e5e7eb;
+  /* 2 */
+}
+
+::before,
+::after {
+  --tw-content: '';
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
+*/
+
+html {
+  line-height: 1.5;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+  -moz-tab-size: 4;
+  /* 3 */
+  -o-tab-size: 4;
+     tab-size: 4;
+  /* 3 */
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  /* 4 */
+  font-feature-settings: normal;
+  /* 5 */
+  font-variation-settings: normal;
+  /* 6 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+  margin: 0;
+  /* 1 */
+  line-height: inherit;
+  /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0;
+  /* 1 */
+  color: inherit;
+  /* 2 */
+  border-top-width: 1px;
+  /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font family by default.
+2. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0;
+  /* 1 */
+  border-color: inherit;
+  /* 2 */
+  border-collapse: collapse;
+  /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  font-weight: inherit;
+  /* 1 */
+  line-height: inherit;
+  /* 1 */
+  color: inherit;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+  padding: 0;
+  /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button;
+  /* 1 */
+  background-color: transparent;
+  /* 2 */
+  background-image: none;
+  /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  /* 1 */
+  vertical-align: middle;
+  /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Make elements with the HTML hidden attribute stay hidden by default */
+
+[hidden] {
+  display: none;
+}
+
+*, ::before, ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+
+.relative {
+  position: relative;
+}
+
+.m-1 {
+  margin: 0.25rem;
+}
+
+.m-auto {
+  margin: auto;
+}
+
+.flex {
+  display: flex;
+}
+
+.h-5 {
+  height: 1.25rem;
+}
+
+.min-h-screen {
+  min-height: 100vh;
+}
+
+.w-5 {
+  width: 1.25rem;
+}
+
+.flex-row-reverse {
+  flex-direction: row-reverse;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.rounded {
+  border-radius: 0.25rem;
+}
+
+.border-b-4 {
+  border-bottom-width: 4px;
+}
+
+.border-l-2 {
+  border-left-width: 2px;
+}
+
+.border-blue-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(30 64 175 / var(--tw-border-opacity));
+}
+
+.border-blue-900 {
+  --tw-border-opacity: 1;
+  border-color: rgb(30 58 138 / var(--tw-border-opacity));
+}
+
+.bg-blue-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
+}
+
+.bg-blue-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 64 175 / var(--tw-bg-opacity));
+}
+
+.bg-gradient-to-tl {
+  background-image: linear-gradient(to top left, var(--tw-gradient-stops));
+}
+
+.from-blue-800 {
+  --tw-gradient-from: #1e40af var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(30 64 175 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.to-blue-500 {
+  --tw-gradient-to: #3b82f6 var(--tw-gradient-to-position);
+}
+
+.fill-current {
+  fill: currentColor;
+}
+
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.font-mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.shadow-lg {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}

examples/leptos-tailwind-axum/tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["*.html", "./src/**/*.rs",],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+

examples/login_with_token_csr_only/Makefile.toml

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

examples/login_with_token_csr_only/api-boundary/Makefile.toml

@@ -1 +1 @@
-extend = { path = "../../cargo-make/common.toml" }
+extend = { path = "../../cargo-make/main.toml" }

examples/login_with_token_csr_only/client/Makefile.toml

@@ -1 +1 @@
-extend = { path = "../../cargo-make/common.toml" }
+extend = { path = "../../cargo-make/main.toml" }

examples/login_with_token_csr_only/server/Makefile.toml

@@ -1 +1 @@
-extend = { path = "../../cargo-make/common.toml" }
+extend = { path = "../../cargo-make/main.toml" }

examples/parent_child/Makefile.toml

@@ -1,3 +1,5 @@
+extend = [{ path = "../cargo-make/main.toml" }]
+
 [tasks.build]
 command = "cargo"
 args = ["+nightly", "build-all-features"]

examples/router/Makefile.toml

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

examples/router/src/lib.rs

@@ -36,15 +36,15 @@ pub fn RouterExample(cx: Scope) -> impl IntoView {
                     <ContactRoutes/>
                     <Route
                         path="about"
-                        view=move |cx| view! { cx,  <About/> }
+                        view=About
                     />
                     <Route
                         path="settings"
-                        view=move |cx| view! { cx,  <Settings/> }
+                        view=Settings
                     />
                     <Route
                         path="redirect-home"
-                        view=move |cx| view! { cx, <Redirect path="/"/> }
+                        view=|cx| view! { cx, <Redirect path="/"/> }
                     />
                 </AnimatedRoutes>
             </main>
@@ -59,15 +59,15 @@ pub fn ContactRoutes(cx: Scope) -> impl IntoView {
     view! { cx,
         <Route
             path=""
-            view=move |cx| view! { cx,  <ContactList/> }
+            view=ContactList
         >
             <Route
                 path=":id"
-                view=move |cx| view! { cx,  <Contact/> }
+                view=Contact
             />
             <Route
                 path="/"
-                view=move |_| view! { cx,  <p>"Select a contact."</p> }
+                view=|cx| view! { cx,  <p>"Select a contact."</p> }
             />
         </Route>
     }

examples/session_auth_axum/Cargo.toml

@@ -22,7 +22,7 @@ leptos_router = { path = "../../router", default-features = false }
 log = "0.4.17"
 simple_logger = "4.0.0"
 serde = { version = "1.0.148", features = ["derive"] }
-axum = { version = "0.6.1", optional = true }
+axum = { version = "0.6.1", optional = true, features=["macros"] }
 tower = { version = "0.4.13", optional = true }
 tower-http = { version = "0.4", features = ["fs"], optional = true }
 tokio = { version = "1.22.0", features = ["full"], optional = true }
@@ -33,10 +33,10 @@ sqlx = { version = "0.6.2", features = [
 ], optional = true }
 thiserror = "1.0.38"
 wasm-bindgen = "0.2"
-axum_sessions_auth = { version = "7.0.0", features = [
+axum_session_auth = { version = "0.2.1", features = [
 	"sqlite-rustls",
 ], optional = true }
-axum_database_sessions = { version = "7.0.0", features = [
+axum_session = { version = "0.2.3", features = [
 	"sqlite-rustls",
 ], optional = true }
 bcrypt = { version = "0.14", optional = true }
@@ -49,8 +49,8 @@ ssr = [
 	"dep:tower",
 	"dep:tower-http",
 	"dep:tokio",
-	"dep:axum_sessions_auth",
-	"dep:axum_database_sessions",
+	"dep:axum_session_auth",
+	"dep:axum_session",
 	"dep:async-trait",
 	"dep:sqlx",
 	"dep:bcrypt",

examples/session_auth_axum/Makefile.toml

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

examples/session_auth_axum/src/auth.rs

@@ -6,10 +6,10 @@ use std::collections::HashSet;
 cfg_if! {
 if #[cfg(feature = "ssr")] {
     use sqlx::SqlitePool;
-    use axum_sessions_auth::{SessionSqlitePool, Authentication, HasPermission};
+    use axum_session_auth::{SessionSqlitePool, Authentication, HasPermission};
     use bcrypt::{hash, verify, DEFAULT_COST};
     use crate::todo::{pool, auth};
-    pub type AuthSession = axum_sessions_auth::AuthSession<User, i64, SessionSqlitePool, SqlitePool>;
+    pub type AuthSession = axum_session_auth::AuthSession<User, i64, SessionSqlitePool, SqlitePool>;
 }}
 
 #[derive(Clone, Debug, PartialEq, Eq, Serialize, Deserialize)]

examples/session_auth_axum/src/fallback.rs

@@ -11,13 +11,11 @@ if #[cfg(feature = "ssr")] {
     use axum::response::Response as AxumResponse;
     use tower::ServiceExt;
     use tower_http::services::ServeDir;
-    use std::sync::Arc;
     use leptos::{LeptosOptions, Errors, view};
     use crate::error_template::ErrorTemplate;
     use crate::errors::TodoAppError;
 
-    pub async fn file_and_error_handler(uri: Uri, State(options): State<Arc<LeptosOptions>>, req: Request<Body>) -> AxumResponse {
-        let options = &*options;
+    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();
 

examples/session_auth_axum/src/lib.rs

@@ -4,6 +4,7 @@ pub mod auth;
 pub mod error_template;
 pub mod errors;
 pub mod fallback;
+pub mod state;
 pub mod todo;
 
 // Needs to be in lib.rs AFAIK because wasm-bindgen needs us to be compiling a lib. I may be wrong.

examples/session_auth_axum/src/main.rs

@@ -6,38 +6,37 @@ if #[cfg(feature = "ssr")] {
     use axum::{
         response::{Response, IntoResponse},
         routing::get,
-        extract::{Path, State, Extension, RawQuery},
+        extract::{Path, State, RawQuery},
         http::{Request, header::HeaderMap},
         body::Body as AxumBody,
         Router,
     };
     use session_auth_axum::todo::*;
     use session_auth_axum::auth::*;
-    use session_auth_axum::*;
+    use session_auth_axum::state::AppState;
     use session_auth_axum::fallback::file_and_error_handler;
     use leptos_axum::{generate_route_list, LeptosRoutes, handle_server_fns_with_context};
-    use leptos::{log, view, provide_context, LeptosOptions, get_configuration};
-    use std::sync::Arc;
+    use leptos::{log, view, provide_context, get_configuration};
     use sqlx::{SqlitePool, sqlite::SqlitePoolOptions};
-    use axum_database_sessions::{SessionConfig, SessionLayer, SessionStore};
-    use axum_sessions_auth::{AuthSessionLayer, AuthConfig, SessionSqlitePool};
+    use axum_session::{SessionConfig, SessionLayer, SessionStore};
+    use axum_session_auth::{AuthSessionLayer, AuthConfig, SessionSqlitePool};
 
-    async fn server_fn_handler(Extension(pool): Extension<SqlitePool>, auth_session: AuthSession, path: Path<String>, headers: HeaderMap, raw_query: RawQuery,
+    async fn server_fn_handler(State(app_state): State<AppState>, auth_session: AuthSession, path: Path<String>, headers: HeaderMap, raw_query: RawQuery,
     request: Request<AxumBody>) -> impl IntoResponse {
 
         log!("{:?}", path);
 
         handle_server_fns_with_context(path, headers, raw_query, move |cx| {
             provide_context(cx, auth_session.clone());
-            provide_context(cx, pool.clone());
+            provide_context(cx, app_state.pool.clone());
         }, request).await
     }
 
-    async fn leptos_routes_handler(Extension(pool): Extension<SqlitePool>, auth_session: AuthSession, State(options): State<Arc<LeptosOptions>>, req: Request<AxumBody>) -> Response{
-            let handler = leptos_axum::render_app_to_stream_with_context((*options).clone(),
+    async fn leptos_routes_handler(auth_session: AuthSession, State(app_state): State<AppState>, req: Request<AxumBody>) -> Response{
+            let handler = leptos_axum::render_app_to_stream_with_context(app_state.leptos_options.clone(),
             move |cx| {
                 provide_context(cx, auth_session.clone());
-                provide_context(cx, pool.clone());
+                provide_context(cx, app_state.pool.clone());
             },
             |cx| view! { cx, <TodoApp/> }
         );
@@ -64,24 +63,38 @@ if #[cfg(feature = "ssr")] {
             .await
             .expect("could not run SQLx migrations");
 
-        crate::todo::register_server_functions();
+        // Explicit server function registration is no longer required
+        // on the main branch. On 0.3.0 and earlier, uncomment the lines
+        // below to register the server functions.
+        // _ = GetTodos::register();
+        // _ = AddTodo::register();
+        // _ = DeleteTodo::register();
+        // _ = Login::register();
+        // _ = Logout::register();
+        // _ = Signup::register();
+        // _ = GetUser::register();
+        // _ = Foo::register();
 
         // Setting this to None means we'll be using cargo-leptos and its env vars
         let conf = get_configuration(None).await.unwrap();
-        let leptos_options = Arc::new(conf.leptos_options);
+        let leptos_options = conf.leptos_options;
         let addr = leptos_options.site_addr;
         let routes = generate_route_list(|cx| view! { cx, <TodoApp/> }).await;
 
+        let app_state = AppState{
+            leptos_options,
+            pool: pool.clone(),
+        };
+
         // build our application with a route
         let app = Router::new()
         .route("/api/*fn_name", get(server_fn_handler).post(server_fn_handler))
         .leptos_routes_with_handler(routes, get(leptos_routes_handler) )
         .fallback(file_and_error_handler)
         .layer(AuthSessionLayer::<User, i64, SessionSqlitePool, SqlitePool>::new(Some(pool.clone()))
-                    .with_config(auth_config))
+        .with_config(auth_config))
         .layer(SessionLayer::new(session_store))
-        .layer(Extension(pool))
-        .with_state(leptos_options);
+        .with_state(app_state);
 
         // run our app with hyper
         // `axum::Server` is a re-export of `hyper::Server`

examples/session_auth_axum/src/state.rs

@@ -0,0 +1,17 @@
+use cfg_if::cfg_if;
+
+cfg_if! {
+    if #[cfg(feature = "ssr")] {
+use leptos::LeptosOptions;
+use sqlx::SqlitePool;
+use axum::extract::FromRef;
+
+/// This takes advantage of Axum's SubStates feature by deriving FromRef. This is the only way to have more than one
+/// item in Axum's State. Leptos requires you to have leptosOptions in your State struct for the leptos route handlers
+#[derive(FromRef, Debug, Clone)]
+pub struct AppState{
+    pub leptos_options: LeptosOptions,
+    pub pool: SqlitePool
+}
+    }
+}