docs: clarify difference between set() and update()

* add "async routing" feature that waits for async resources to resolve before navigating
* add support for Outlet
* add `<RoutingProgress/>` component

Cargo.toml

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

Makefile.toml

@@ -69,7 +69,11 @@ dependencies = [
 
 [tasks.test]
 clear = true
-dependencies = ["test-all", "test-leptos_macro-example", "doc-leptos_macro-example"]
+dependencies = [
+	"test-all",
+	"test-leptos_macro-example",
+	"doc-leptos_macro-example",
+]
 
 [tasks.test-all]
 command = "cargo"
@@ -102,9 +106,15 @@ cwd = "examples"
 command = "cargo"
 args = ["make", "verify-flow"]
 
+[tasks.clean-examples]
+description = "Clean all example projects"
+cwd = "examples"
+command = "cargo"
+args = ["make", "clean-all"]
+
 [env]
 RUSTFLAGS = ""
-LEPTOS_OUTPUT_NAME="ci" # allows examples to check/build without cargo-leptos
+LEPTOS_OUTPUT_NAME = "ci" # allows examples to check/build without cargo-leptos
 
 [env.github-actions]
 RUSTFLAGS = "-D warnings"

docs/book/src/15_global_state.md

@@ -171,4 +171,4 @@ data flow and of fine-grained reactive updates.
 
 [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 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

@@ -34,9 +34,10 @@
   - [`cargo-leptos`](./ssr/21_cargo_leptos.md)
   - [The Life of a Page Load](./ssr/22_life_cycle.md)
   - [Async Rendering and SSR “Modes”](./ssr/23_ssr_modes.md)
-  - [Hydration Footguns](./ssr/24_hydration_bugs.md)
-- [Server Functions]()
-- [Request/Response]()
+  - [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]()
@@ -46,6 +47,6 @@
   - [Actions]()
   - [Forms]()
   - [`<ActionForm/>`s]()
-  - [Turning off WebAssembly]()
+  - [Turning off WebAssembly: Progressive Enhancement and Graceful Degradation]()
 - [Advanced Reactivity]()
 - [Appendix: Optimizing WASM Binary Size](./appendix_binary_size.md)

docs/book/src/appendix_binary_size.md

@@ -41,6 +41,14 @@ build-std = ["std", "panic_abort", "core", "alloc"]
 build-std-features = ["panic_immediate_abort"]
 ```
 
+Note that if you're using this with SSR too, the same Cargo profile will be applied. You'll need to explicitly specify your target:
+```toml
+[build]
+target = "x86_64-unknown-linux-gnu" # or whatever
+```
+
+And you'll need to add `panic = "abort"` to `[profile.release]` in `Cargo.toml`. Note that this applies the same `build-std` and panic settings to your server binary, which may not be desirable. Some further exploration is probably needed here.
+
 5. One of the sources of binary size in WASM binaries can be `serde` serialization/deserialization code. Leptos uses `serde` by default to serialize and deserialize resources created with `create_resource`. You might try experimenting with the `miniserde` and `serde-lite` features, which allow you to use those crates for serialization and deserialization instead; each only implements a subset of `serde`’s functionality, but typically optimizes for size over speed.
 
 ## Things to Avoid

docs/book/src/async/README.md

@@ -2,8 +2,8 @@
 
 So far we’ve only been working with synchronous users interfaces: You provide some input,
 the app immediately processes it and updates the interface. This is great, but is a tiny
-subset of what web applications do. In particular, most web apps have to deal with some kind
-of asynchronous data loading, usually loading something from an API.
+subset of what web applications do. In particular, most web apps have to deal with some kind of asynchronous data loading, usually loading something from an API.
+
+Asynchronous data is notoriously hard to integrate with the synchronous parts of your code. Leptos provides a cross-platform [`spawn_local`](https://docs.rs/leptos/latest/leptos/fn.spawn_local.html) function that makes it easy to run a `Future`, but there’s much more to it than that.
 
-Asynchronous data is notoriously hard to integrate with the synchronous parts of your code.
 In this chapter, we’ll see how Leptos helps smooth out that process for you.

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

@@ -0,0 +1,125 @@
+# Server Functions
+
+If you’re creating anything beyond a toy app, you’ll need to run code on the server all the time: reading from or writing to a database that only runs on the server, running expensive computations using libraries you don’t want to ship down to the client, accessing APIs that need to be called from the server rather than the client for CORS reasons or because you need a secret API key that’s stored on the server and definitely shouldn’t be shipped down to a user’s browser.
+
+Traditionally, this is done by separating your server and client code, and by setting up something like a REST API or GraphQL API to allow your client to fetch and mutate data on the server. This is fine, but it requires you to write and maintain your code in multiple separate places (client-side code for fetching, server-side functions to run), as well as creating a third thing to manage, which is the API contract between the two.
+
+Leptos is one of a number of modern frameworks that introduce the concept of **server functions**. Server functions have two key characteristics:
+
+1. Server functions are **co-located** with your component code, so that you can organize your work by feature, not by technology. For example, you might have a “dark mode” feature that should persist a user’s dark/light mode preference across sessions, and be applied during server rendering so there’s no flicker. This requires a component that needs to be interactive on the client, and some work to be done on the server (setting a cookie, maybe even storing a user in a database.) Traditionally, this feature might end up being split between two different locations in your code, one in your “frontend” and one in your “backend.” With server functions, you’ll probably just write them both in one `dark_mode.rs` and forget about it.
+2. Server functions are **isomorphic**, i.e., they can be called either from the server or the browser. This is done by generating code differently for the two platforms. On the server, a server function simply runs. In the browser, the server function’s body is replaced with a stub that actually makes a fetch request to the server, serializing the arguments into the request and deserializing the return value from the response. But on either end, the function can simply be called: you can create an `add_todo` function that writes to your database, and simply call it from a click handler on a button in the browser!
+
+## Using Server Functions
+
+Actually, I kind of like that example. What would it look like? It’s pretty simple, actually.
+
+```rust
+// todo.rs
+
+#[server(AddTodo, "/api")]
+pub async fn add_todo(title: String) -> Result<(), ServerFnError> {
+    let mut conn = db().await?;
+
+    match sqlx::query("INSERT INTO todos (title, completed) VALUES ($1, false)")
+        .bind(title)
+        .execute(&mut conn)
+        .await
+    {
+        Ok(_row) => Ok(()),
+        Err(e) => Err(ServerFnError::ServerError(e.to_string())),
+    }
+}
+
+#[component]
+pub fn BusyButton(cx: Scope) -> impl IntoView {
+	view! {
+        cx,
+        <button on:click=move |_| {
+            spawn_local(async {
+                add_todo("So much to do!".to_string()).await;
+            });
+        }>
+            "Add Todo"
+        </button>
+	}
+}
+
+// somewhere in main.rs
+fn main() {
+	// ...
+
+	AddTodo::register();
+
+	// ...
+}
+```
+
+You’ll notice a couple things here right away:
+
+- Server functions can use server-only dependencies, like `sqlx`, and can access server-only resources, like our database.
+- Server functions are `async`. Even if they only did synchronous work on the server, the function signature would still need to be `async`, because calling them from the browser _must_ be asynchronous.
+- Server functions return `Result<T, ServerFnError>`. Again, even if they only do infallible work on the server, this is true, because `ServerFnError`’s variants include the various things that can be wrong during the process of making a network request.
+- Server functions can be called from the client. Take a look at our click handler. This is code that will _only ever_ run on the client. But it can call the function `add_todo` (using `spawn_local` to run the `Future`) as if it were an ordinary async function:
+
+```rust
+move |_| {
+	spawn_local(async {
+		add_todo("So much to do!".to_string()).await;
+	});
+}
+```
+
+- Server functions are top-level functions defined with `fn`. Unlike event listeners, derived signals, and most everything else in Leptos, they are not closures! As `fn` calls, they have no access to the reactive state of your app or anything else that is not passed in as an argument. And again, this makes perfect sense: When you make a request to the server, the server doesn’t have access to client state unless you send it explicitly. (Otherwise we’d have to serialize the whole reactive system and send it across the wire with every request, which—while it served classic ASP for a while—is a really bad idea.)
+- Server function arguments and return values both need to be serializable with `serde`. Again, hopefully this makes sense: while function arguments in general don’t need to be serialized, calling a server function from the browser means serializing the arguments and sending them over HTTP.
+
+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 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`.
+
+## Server Function Encodings
+
+By default, the server function call is a `POST` request that serializes the arguments as URL-encoded form data in the body of the request. (This means that server functions can be called from HTML forms, which we’ll see in a future chapter.) But there are a few other methods supported. Optionally, we can provide another argument to the `#[server]` macro to specify an alternate encoding:
+
+```rust
+#[server(AddTodo, "/api", "Url")]
+#[server(AddTodo, "/api", "GetJson")]
+#[server(AddTodo, "/api", "Cbor")]
+#[server(AddTodo, "/api", "GetCbor")]
+```
+
+The four options use different combinations of HTTP verbs and encoding methods:
+
+| Name              | Method | Request     | Response |
+| ----------------- | ------ | ----------- | -------- |
+| **Url** (default) | POST   | URL encoded | JSON     |
+| **GetJson**       | GET    | URL encoded | JSON     |
+| **Cbor**          | POST   | CBOR        | CBOR     |
+| **GetCbor**       | GET    | URL encoded | CBOR     |
+
+In other words, you have two choices:
+
+- `GET` or `POST`? This has implications for things like browser or CDN caching; while `POST` requests should not be cached, `GET` requests can be.
+- Plain text (arguments sent with URL/form encoding, results sent as JSON) or a binary format (CBOR, encoded as a base64 string)?
+
+**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!
+
+## 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.
+
+## Integrating Server Functions with Leptos
+
+So far, everything I’ve said is actually framework agnostic. (And in fact, the Leptos server function crate has been integrated into Dioxus as well!) Server functions are simply a way of defining a function-like RPC call that leans on Web standards like HTTP requests and URL encoding.
+
+But in a way, they also provide the last missing primitive in our story so far. Because a server function is just a plain Rust async function, it integrates perfectly with the async Leptos primitives we discussed [earlier](../async/README.md). So you can easily integrate your server functions with the rest of your applications:
+
+- Create **resources** that call the server function to load data from the server
+- Read these resources under `<Suspense/>` or `<Transition/>` to enable streaming SSR and fallback states while data loads.
+- Create **actions** that call the server function to mutate data on the server
+
+The final section of this book will make this a little more concrete by introducing patterns that use progressively-enhanced HTML forms to run these server actions.
+
+But in the next few chapters, we’ll actually take a look at some of the details of what you might want to do with your server functions, including the best ways to integrate with the powerful extractors provided by the Actix and Axum server frameworks.

docs/book/src/server/README.md

@@ -0,0 +1,11 @@
+# Working with the Server
+
+The previous section described the process of server-side rendering, using the server to generate an HTML version of the page that will become interactive in the browser. So far, everything has been “isomorphic” or “universal”; in other words, your app has had the “same (_iso_) shape (_morphe_)” on the client and the server.
+
+But a server can do a lot more than just render HTML! In fact, a server can do a whole bunch of things your browser _can’t,_ like reading from and writing to a SQL database.
+
+If you’re used to building JavaScript frontend apps, you’re probably used to calling out to some kind of REST API to do this sort of server work. If you’re used to building sites with PHP or Python or Ruby (or Java or C# or...), this server-side work is your bread and butter, and it’s the client-side interactivity that tends to be an afterthought.
+
+With Leptos, you can do both: not only in the same language, not only sharing the same types, but even in the same files!
+
+This section will talk about how to build the uniquely-server-side parts of your application.

docs/book/src/ssr/21_cargo_leptos.md

@@ -32,6 +32,6 @@ cargo leptos watch
 
 Once your app has compiled you can open up your browser to [`http://localhost:3000`](http://localhost:3000) to see it.
 
-`cargo-leptos` has lots of additional features and built in tools. You can learn more [in its `README`](https://github.com/leptos-rs/leptos/blob/main/examples/hackernews/src/api.rs).
+`cargo-leptos` has lots of additional features and built in tools. You can learn more [in its `README`](https://github.com/leptos-rs/cargo-leptos/blob/main/README.md).
 
 But what exactly is happening when you open our browser to `localhost:3000`? Well, read on to find out.

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

@@ -90,7 +90,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 +143,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

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

@@ -1,10 +1,10 @@
-# `view`: Dynamic Attributes and Classes
+# `view`: Dynamic Classes, Styles and Attributes
 
 So far we’ve seen how to use the `view` macro to create event listeners and to
 create dynamic text by passing a function (such as a signal) into the view.
 
 But of course there are other things you might want to update in your user interface.
-In this section, we’ll look at how to update attributes and classes dynamically,
+In this section, we’ll look at how to update classes, styles and attributes dynamically,
 and we’ll introduce the concept of a **derived signal**.
 
 Let’s start with a simple component that should be familiar: click a button to
@@ -52,12 +52,42 @@ reactively update when the signal changes.
 Now every time I click the button, the text should toggle between red and black as
 the number switches between even and odd.
 
+Some CSS class names can’t be directly parsed by the `view` macro, especially if they include a mix of dashes and numbers or other characters. In that case, you can use a tuple syntax: `class=("name", value)` still directly updates a single class.
+
+```rust
+class=("button-20", move || count() % 2 == 1)
+```
+
 > If you’re following along, make sure you go into your `index.html` and add something like this:
-> 
+>
 > ```html
-> <style>.red { color: red; }</style>
+> <style>
+>   .red {
+>     color: red;
+>   }
+> </style>
 > ```
 
+## Dynamic Styles
+
+Individual CSS properties can be directly updated with a similar `style:` syntax.
+
+```rust
+let (x, set_x) = create_signal(cx, 0);
+let (y, set_y) = create_signal(cx, 0);
+view! { cx,
+    <div
+        style="position: absolute"
+        style:left=move || format!("{}px", x() + 100)
+        style:top=move || format!("{}px", y() + 100)
+        style:background-color=move || format!("rgb({}, {}, 100)", x(), y())
+        style=("--columns", x)
+    >
+        "Moves when coordinates change"
+    </div>
+}
+```
+
 ## Dynamic Attributes
 
 The same applies to plain attributes. Passing a plain string or primitive value to

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

@@ -15,7 +15,7 @@ You _could_ do this by just creating two `<progress>` elements:
 let (count, set_count) = create_signal(cx, 0);
 let double_count = move || count() * 2;
 
-view! {
+view! { cx,
     <progress
         max="50"
         value=count

examples/Makefile.toml

@@ -31,7 +31,7 @@ CARGO_MAKE_CRATE_WORKSPACE_MEMBERS = [
 
 [tasks.verify-flow]
 description = "Provides pre and post hooks for verify"
-dependencies = ["pre-verify-flow", "verify", "post-verify-flow"]
+dependencies = ["pre-verify", "verify", "post-verify"]
 
 [tasks.verify]
 description = "Run all quality checks and tests"
@@ -41,16 +41,17 @@ dependencies = ["check-style", "test-unit-and-web"]
 description = "Run all unit and web tests"
 dependencies = ["test-flow", "web-test-flow"]
 
-[tasks.pre-verify-flow]
+[tasks.pre-verify]
 
-[tasks.post-verify-flow]
+[tasks.post-verify]
+dependencies = ["clean-all"]
 
 [tasks.web-test-flow]
 description = "Provides pre and post hooks for web-test"
-dependencies = ["pre-web-test-flow", "web-test", "post-web-test-flow"]
+dependencies = ["pre-web-test", "web-test", "post-web-test"]
 
-[tasks.pre-web-test-flow]
+[tasks.pre-web-test]
 
 [tasks.web-test]
 
-[tasks.post-web-test-flow]
+[tasks.post-web-test]

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

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

examples/cargo-make/common.toml

@@ -1,10 +1,16 @@
 [env]
-CARGO_MAKE_CLIPPY_ARGS = "--all-targets -- -D warnings"
+END2END_DIR = "end2end"
+
+[tasks.pre-clippy]
+env = { CARGO_MAKE_CLIPPY_ARGS = "--all-targets --all-features -- -D warnings" }
 
 [tasks.check-style]
 description = "Check for style violations"
 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"]
@@ -12,3 +18,70 @@ 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"
+command = "cargo"
+args = ["clean"]
+
+[tasks.clean-trunk]
+description = "Runs the trunk clean command."
+category = "Cleanup"
+command = "trunk"
+args = ["clean"]
+
+[tasks.clean-node_modules]
+description = "Delete all node_modules directories"
+category = "Cleanup"
+script = '''
+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"]
+
+[tasks.clean-all]
+description = "Delete all temporary directories"
+category = "Cleanup"
+dependencies = ["clean-cargo"]
+
+[tasks.wasm-web-test]
+env = { CARGO_MAKE_WASM_TEST_ARGS = "--headless --chrome" }
+command = "cargo"
+args = ["make", "wasm-pack-test"]
+
+[tasks.cargo-leptos-e2e]
+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}"
+script = '''
+    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
+'''
+
+[tasks.auto-setup]
+script = '''
+  if [ ! -d "${END2END_DIR}/node_modules" ]; then
+    cargo make setup
+  fi
+'''

examples/cargo-make/wasm-web-test.toml

@@ -1,4 +1,5 @@
 [tasks.web-test]
-env = { CARGO_MAKE_WASM_TEST_ARGS = "--headless --chrome" }
-command = "cargo"
-args = ["make", "wasm-pack-test"]
+dependencies = ["wasm-web-test"]
+
+[tasks.clean-all]
+dependencies = ["clean-cargo", "clean-trunk"]

examples/counter_isomorphic/Cargo.toml

@@ -41,7 +41,7 @@ ssr = [
 	"leptos_meta/ssr",
 	"leptos_router/ssr",
 ]
-nightly = ["leptos/nightly", "leptos_router/nightly"]
+stable = ["leptos/stable", "leptos_router/stable"]
 
 [package.metadata.cargo-all-features]
 denylist = ["actix-files", "actix-web", "leptos_actix", "stable"]

examples/counter_isomorphic/src/main.rs

@@ -37,7 +37,7 @@ cfg_if! {
             // when not using cargo-leptos None must be replaced with Some("Cargo.toml")
             let conf = get_configuration(None).await.unwrap();
 
-            let addr = conf.leptos_options.site_addr.clone();
+            let addr = conf.leptos_options.site_addr;
             let routes = generate_route_list(|cx| view! { cx, <Counters/> });
 
             HttpServer::new(move || {
@@ -48,7 +48,7 @@ cfg_if! {
                     .service(counter_events)
                     .route("/api/{tail:.*}", leptos_actix::handle_server_fns())
                     .leptos_routes(leptos_options.to_owned(), routes.to_owned(), |cx| view! { cx, <Counters/> })
-                    .service(Files::new("/", &site_root))
+                    .service(Files::new("/", site_root))
                     //.wrap(middleware::Compress::default())
             })
             .bind(&addr)?

examples/errors_axum/Cargo.toml

@@ -10,12 +10,12 @@ crate-type = ["cdylib", "rlib"]
 console_log = "1.0.0"
 console_error_panic_hook = "0.1.7"
 cfg-if = "1.0.0"
-leptos = { path = "../../../leptos/leptos", default-features = false, features = [
+leptos = { path = "../../leptos", default-features = false, features = [
   "serde",
 ] }
-leptos_axum = { path = "../../../leptos/integrations/axum", default-features = false, optional = true }
-leptos_meta = { path = "../../../leptos/meta", default-features = false }
-leptos_router = { path = "../../../leptos/router", default-features = false }
+leptos_axum = { path = "../../integrations/axum", default-features = false, optional = true }
+leptos_meta = { path = "../../meta", default-features = false }
+leptos_router = { path = "../../router", default-features = false }
 log = "0.4.17"
 serde = { version = "1", features = ["derive"] }
 simple_logger = "4.0.0"

examples/errors_axum/src/fallback.rs

@@ -3,7 +3,7 @@ use cfg_if::cfg_if;
 cfg_if! { if #[cfg(feature = "ssr")] {
     use axum::{
         body::{boxed, Body, BoxBody},
-        extract::Extension,
+        extract::State,
         response::IntoResponse,
         http::{Request, Response, StatusCode, Uri},
     };
@@ -11,10 +11,10 @@ cfg_if! { if #[cfg(feature = "ssr")] {
     use tower::ServiceExt;
     use tower_http::services::ServeDir;
     use std::sync::Arc;
-    use leptos::{LeptosOptions, Errors, view};
-    use crate::landing::{App, AppProps};
+    use leptos::{LeptosOptions, view};
+    use crate::landing::App;
 
-    pub async fn file_and_error_handler(uri: Uri, Extension(options): Extension<Arc<LeptosOptions>>, req: Request<Body>) -> AxumResponse {
+    pub async fn file_and_error_handler(uri: Uri, State(options): State<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();

examples/errors_axum/src/main.rs

@@ -5,7 +5,7 @@ cfg_if! { if #[cfg(feature = "ssr")] {
     use crate::landing::*;
     use axum::body::Body as AxumBody;
     use axum::{
-        extract::{Extension, Path},
+        extract::{State, Path},
         http::Request,
         response::{IntoResponse, Response},
         routing::{get, post},
@@ -21,7 +21,7 @@ cfg_if! { if #[cfg(feature = "ssr")] {
 #[cfg(feature = "ssr")]
 async fn custom_handler(
     Path(id): Path<String>,
-    Extension(options): Extension<Arc<LeptosOptions>>,
+    State(options): State<Arc<LeptosOptions>>,
     req: Request<AxumBody>,
 ) -> Response {
     let handler = leptos_axum::render_app_to_stream_with_context(
@@ -44,7 +44,7 @@ async fn main() {
 
     // Setting this to None means we'll be using cargo-leptos and its env vars
     let conf = get_configuration(None).await.unwrap();
-    let leptos_options = conf.leptos_options;
+    let leptos_options = Arc::new(conf.leptos_options);
     let addr = leptos_options.site_addr;
     let routes = generate_route_list(|cx| view! { cx, <App/> }).await;
 
@@ -58,7 +58,7 @@ async fn main() {
             |cx| view! { cx, <App/> },
         )
         .fallback(file_and_error_handler)
-        .layer(Extension(Arc::new(leptos_options)));
+        .with_state(leptos_options);
 
     // run our app with hyper
     // `axum::Server` is a re-export of `hyper::Server`

examples/hackernews/src/lib.rs

@@ -1,5 +1,5 @@
 use cfg_if::cfg_if;
-use leptos::{component, view, IntoView, Scope};
+use leptos::*;
 use leptos_meta::*;
 use leptos_router::*;
 mod api;
@@ -9,23 +9,25 @@ use routes::{nav::*, stories::*, story::*, users::*};
 #[component]
 pub fn App(cx: Scope) -> impl IntoView {
     provide_meta_context(cx);
-    view! {
-        cx,
-        <>
-            <Stylesheet id="leptos" href="/pkg/hackernews.css"/>
-            <Link rel="shortcut icon" type_="image/ico" href="/favicon.ico"/>
-            <Meta name="description" content="Leptos implementation of a HackerNews demo."/>
-            <Router>
-                <Nav />
-                <main>
-                    <Routes>
-                        <Route path="users/:id" view=|cx| view! { cx,  <User/> }/>
-                        <Route path="stories/:id" view=|cx| view! { cx,  <Story/> }/>
-                        <Route path=":stories?" view=|cx| view! { cx,  <Stories/> }/>
-                    </Routes>
-                </main>
-            </Router>
-        </>
+    let (is_routing, set_is_routing) = create_signal(cx, false);
+
+    view! { cx,
+        <Stylesheet id="leptos" href="/pkg/hackernews.css"/>
+        <Link rel="shortcut icon" type_="image/ico" href="/favicon.ico"/>
+        <Meta name="description" content="Leptos implementation of a HackerNews demo."/>
+        // adding `set_is_routing` causes the router to wait for async data to load on new pages
+        <Router set_is_routing>
+            // shows a progress bar while async data are loading
+            <RoutingProgress is_routing max_time=std::time::Duration::from_millis(250)/>
+            <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/> }/>
+                </Routes>
+            </main>
+        </Router>
     }
 }
 

examples/hackernews/src/main.rs

@@ -24,7 +24,7 @@ cfg_if! {
             // Setting this to None means we'll be using cargo-leptos and its env vars.
             let conf = get_configuration(None).await.unwrap();
 
-            let addr = conf.leptos_options.site_addr.clone();
+            let addr = conf.leptos_options.site_addr;
             // Generate the list of routes in your Leptos App
             let routes = generate_route_list(|cx| view! { cx, <App/> });
 
@@ -37,7 +37,7 @@ cfg_if! {
                     .service(favicon)
                     .route("/api/{tail:.*}", leptos_actix::handle_server_fns())
                     .leptos_routes(leptos_options.to_owned(), routes.to_owned(), |cx| view! { cx, <App/> })
-                    .service(Files::new("/", &site_root))
+                    .service(Files::new("/", site_root))
                 //.wrap(middleware::Compress::default())
             })
             .bind(&addr)?

examples/hackernews_axum/src/api.rs

@@ -1,4 +1,4 @@
-use leptos::{on_cleanup, Scope, Serializable};
+use leptos::{Scope, Serializable};
 use serde::{Deserialize, Serialize};
 
 pub fn story(path: &str) -> String {
@@ -29,7 +29,7 @@ where
 
     // abort in-flight requests if the Scope is disposed
     // i.e., if we've navigated away from this page
-    on_cleanup(cx, move || {
+    leptos::on_cleanup(cx, move || {
         if let Some(abort_controller) = abort_controller {
             abort_controller.abort()
         }
@@ -38,7 +38,7 @@ where
 }
 
 #[cfg(feature = "ssr")]
-pub async fn fetch_api<T>(cx: Scope, path: &str) -> Option<T>
+pub async fn fetch_api<T>(_cx: Scope, path: &str) -> Option<T>
 where
     T: Serializable,
 {

examples/hackernews_axum/src/fallback.rs

@@ -4,7 +4,7 @@ cfg_if! {
 if #[cfg(feature = "ssr")] {
     use axum::{
         body::{boxed, Body, BoxBody},
-        extract::Extension,
+        extract::State,
         response::IntoResponse,
         http::{Request, Response, StatusCode, Uri},
     };
@@ -15,13 +15,13 @@ if #[cfg(feature = "ssr")] {
     use leptos::{LeptosOptions};
     use crate::error_template::error_template;
 
-    pub async fn file_and_error_handler(uri: Uri, Extension(options): Extension<Arc<LeptosOptions>>, req: Request<Body>) -> AxumResponse {
+    pub async fn file_and_error_handler(uri: Uri, State(options): State<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()
+            res.into_response()
         } else{
             let handler = leptos_axum::render_app_to_stream(options.to_owned(), |cx| error_template(cx, None));
             handler(req).await.into_response()

examples/hackernews_axum/src/main.rs

@@ -7,7 +7,6 @@ if #[cfg(feature = "ssr")] {
     use axum::{
         Router,
         routing::get,
-        extract::Extension,
     };
     use leptos_axum::{generate_route_list, LeptosRoutes};
     use std::sync::Arc;
@@ -18,8 +17,8 @@ if #[cfg(feature = "ssr")] {
         use hackernews_axum::*;
 
         let conf = get_configuration(Some("Cargo.toml")).await.unwrap();
-        let leptos_options = conf.leptos_options;
-        let addr = leptos_options.site_addr.clone();
+        let leptos_options = Arc::new(conf.leptos_options);
+        let addr = leptos_options.site_addr;
         let routes = generate_route_list(|cx| view! { cx, <App/> }).await;
 
         simple_logger::init_with_level(log::Level::Debug).expect("couldn't initialize logging");
@@ -29,7 +28,7 @@ if #[cfg(feature = "ssr")] {
         .route("/favicon.ico", get(file_and_error_handler))
         .leptos_routes(leptos_options.clone(), routes, |cx| view! { cx, <App/> } )
         .fallback(file_and_error_handler)
-        .layer(Extension(Arc::new(leptos_options)));
+        .with_state(leptos_options);
 
         // run our app with hyper
         // `axum::Server` is a re-export of `hyper::Server`

examples/session_auth_axum/src/fallback.rs

@@ -4,7 +4,7 @@ cfg_if! {
 if #[cfg(feature = "ssr")] {
     use axum::{
         body::{boxed, Body, BoxBody},
-        extract::Extension,
+        extract::State,
         response::IntoResponse,
         http::{Request, Response, StatusCode, Uri},
     };
@@ -13,16 +13,16 @@ if #[cfg(feature = "ssr")] {
     use tower_http::services::ServeDir;
     use std::sync::Arc;
     use leptos::{LeptosOptions, Errors, view};
-    use crate::error_template::{ErrorTemplate, ErrorTemplateProps};
+    use crate::error_template::ErrorTemplate;
     use crate::errors::TodoAppError;
 
-    pub async fn file_and_error_handler(uri: Uri, Extension(options): Extension<Arc<LeptosOptions>>, req: Request<Body>) -> AxumResponse {
+    pub async fn file_and_error_handler(uri: Uri, State(options): State<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()
+            res.into_response()
         } else{
             let mut errors = Errors::default();
             errors.insert_with_default_key(TodoAppError::NotFound);

examples/session_auth_axum/src/main.rs

@@ -5,8 +5,8 @@ cfg_if! {
 if #[cfg(feature = "ssr")] {
     use axum::{
         response::{Response, IntoResponse},
-        routing::{post, get},
-        extract::{Path, Extension, RawQuery},
+        routing::get,
+        extract::{Path, State, Extension, RawQuery},
         http::{Request, header::HeaderMap},
         body::Body as AxumBody,
         Router,
@@ -16,7 +16,7 @@ if #[cfg(feature = "ssr")] {
     use session_auth_axum::*;
     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, ServerFnError};
+    use leptos::{log, view, provide_context, LeptosOptions, get_configuration};
     use std::sync::Arc;
     use sqlx::{SqlitePool, sqlite::SqlitePoolOptions};
     use axum_database_sessions::{SessionConfig, SessionLayer, SessionStore};
@@ -33,7 +33,7 @@ if #[cfg(feature = "ssr")] {
         }, request).await
     }
 
-    async fn leptos_routes_handler(Extension(pool): Extension<SqlitePool>, auth_session: AuthSession, Extension(options): Extension<Arc<LeptosOptions>>, req: Request<AxumBody>) -> Response{
+    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(),
             move |cx| {
                 provide_context(cx, auth_session.clone());
@@ -68,7 +68,7 @@ if #[cfg(feature = "ssr")] {
 
         // Setting this to None means we'll be using cargo-leptos and its env vars
         let conf = get_configuration(None).await.unwrap();
-        let leptos_options = conf.leptos_options;
+        let leptos_options = Arc::new(conf.leptos_options);
         let addr = leptos_options.site_addr;
         let routes = generate_route_list(|cx| view! { cx, <TodoApp/> }).await;
 
@@ -80,8 +80,8 @@ if #[cfg(feature = "ssr")] {
         .layer(AuthSessionLayer::<User, i64, SessionSqlitePool, SqlitePool>::new(Some(pool.clone()))
                     .with_config(auth_config))
         .layer(SessionLayer::new(session_store))
-        .layer(Extension(Arc::new(leptos_options)))
-        .layer(Extension(pool));
+        .layer(Extension(pool))
+        .with_state(leptos_options);
 
         // run our app with hyper
         // `axum::Server` is a re-export of `hyper::Server`

examples/session_auth_axum/src/todo.rs

@@ -20,15 +20,15 @@ if #[cfg(feature = "ssr")] {
     use sqlx::SqlitePool;
 
     pub fn pool(cx: Scope) -> Result<SqlitePool, ServerFnError> {
-        Ok(use_context::<SqlitePool>(cx)
+       use_context::<SqlitePool>(cx)
             .ok_or("Pool missing.")
-            .map_err(|e| ServerFnError::ServerError(e.to_string()))?)
+            .map_err(|e| ServerFnError::ServerError(e.to_string()))
     }
 
     pub fn auth(cx: Scope) -> Result<AuthSession, ServerFnError> {
-        Ok(use_context::<AuthSession>(cx)
+        use_context::<AuthSession>(cx)
             .ok_or("Auth session missing.")
-            .map_err(|e| ServerFnError::ServerError(e.to_string()))?)
+            .map_err(|e| ServerFnError::ServerError(e.to_string()))
     }
 
     pub fn register_server_functions() {

examples/ssr_modes/Makefile.toml

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

examples/ssr_modes/src/main.rs

@@ -12,8 +12,8 @@ async fn main() -> std::io::Result<()> {
     // Generate the list of routes in your Leptos App
     let routes = generate_route_list(|cx| view! { cx, <App/> });
 
-    GetPost::register();
-    ListPostMetadata::register();
+    let _ = GetPost::register();
+    let _ = ListPostMetadata::register();
 
     HttpServer::new(move || {
         let leptos_options = &conf.leptos_options;

examples/ssr_modes_axum/Makefile.toml

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

examples/ssr_modes_axum/src/fallback.rs

@@ -3,7 +3,7 @@ use cfg_if::cfg_if;
 cfg_if! { if #[cfg(feature = "ssr")] {
     use axum::{
         body::{boxed, Body, BoxBody},
-        extract::Extension,
+        extract::State,
         response::IntoResponse,
         http::{Request, Response, StatusCode, Uri},
     };
@@ -11,16 +11,16 @@ cfg_if! { if #[cfg(feature = "ssr")] {
     use tower::ServiceExt;
     use tower_http::services::ServeDir;
     use std::sync::Arc;
-    use leptos::{LeptosOptions, Errors, view};
-    use crate::app::{App, AppProps};
+    use leptos::{LeptosOptions, view};
+    use crate::app::App;
 
-    pub async fn file_and_error_handler(uri: Uri, Extension(options): Extension<Arc<LeptosOptions>>, req: Request<Body>) -> AxumResponse {
+    pub async fn file_and_error_handler(uri: Uri, State(options): State<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()
+            res.into_response()
         } else{
             let handler = leptos_axum::render_app_to_stream(
                 options.to_owned(),

examples/ssr_modes_axum/src/main.rs

@@ -1,11 +1,7 @@
 #[cfg(feature = "ssr")]
 #[tokio::main]
 async fn main() {
-    use axum::{
-        extract::{Extension, Path},
-        routing::{get, post},
-        Router,
-    };
+    use axum::{routing::post, Router};
     use leptos::*;
     use leptos_axum::{generate_route_list, LeptosRoutes};
     use ssr_modes_axum::{app::*, fallback::file_and_error_handler};
@@ -13,12 +9,12 @@ async fn main() {
 
     let conf = get_configuration(None).await.unwrap();
     let addr = conf.leptos_options.site_addr;
-    let leptos_options = conf.leptos_options;
+    let leptos_options = Arc::new(conf.leptos_options);
     // Generate the list of routes in your Leptos App
     let routes = generate_route_list(|cx| view! { cx, <App/> }).await;
 
-    GetPost::register();
-    ListPostMetadata::register();
+    let _ = GetPost::register();
+    let _ = ListPostMetadata::register();
 
     let app = Router::new()
         .route("/api/*fn_name", post(leptos_axum::handle_server_fns))
@@ -28,7 +24,7 @@ async fn main() {
             |cx| view! { cx, <App/> },
         )
         .fallback(file_and_error_handler)
-        .layer(Extension(Arc::new(leptos_options)));
+        .with_state(leptos_options);
 
     // run our app with hyper
     // `axum::Server` is a re-export of `hyper::Server`

examples/tailwind/.gitignore

@@ -8,3 +8,10 @@ Cargo.lock
 
 # These are backup files generated by rustfmt
 **/*.rs.bk
+
+# Support playwright testing
+node_modules/
+test-results/
+end2end/playwright-report/
+playwright/.cache/
+pnpm-lock.yaml

examples/tailwind/Cargo.toml

@@ -96,6 +96,7 @@ site-addr = "127.0.0.1:3000"
 reload-port = 3001
 # [Optional] Command to use when running end2end tests. It will run in the end2end dir.
 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 tha tool. Controls whether autoreload JS will be included in the head

examples/tailwind/Makefile.toml

@@ -1,3 +1,8 @@
+extend = [
+    { path = "../cargo-make/common.toml" },
+    { path = "../cargo-make/cargo-leptos-web-test.toml" },
+]
+
 [tasks.build]
 command = "cargo"
 args = ["+nightly", "build-all-features"]

examples/tailwind/README.md

@@ -104,3 +104,8 @@ You'll need to install trunk to client side render this bundle.
 ## Attribution
 
 Many thanks to GreatGreg for putting together this guide. You can find the original, with added details, [here](https://github.com/leptos-rs/leptos/discussions/125).
+
+## Playwright Testing
+
+- Run `cargo make setup` to install dependencies
+- Run `cargo leptos test` or `cargo leptos end-to-end` to run the tests

examples/tailwind/end2end/tests/example.spec.ts

@@ -1,9 +1,7 @@
 import { test, expect } from "@playwright/test";
 
-test("homepage has title and links to intro page", async ({ page }) => {
+test("should see the welcome message", async ({ page }) => {
   await page.goto("http://localhost:3000/");
 
-  await expect(page).toHaveTitle("Cargo Leptos");
-
-  await expect(page.locator("h1")).toHaveText("Hi from your Leptos WASM!");
+  await expect(page.locator("h2")).toHaveText("Welcome to Leptos with Tailwind");
 });

examples/tailwind/src/main.rs

@@ -20,7 +20,7 @@ cfg_if! {
             // Setting this to None means we'll be using cargo-leptos and its env vars.
             let conf = get_configuration(None).await.unwrap();
 
-            let addr = conf.leptos_options.site_addr.clone();
+            let addr = conf.leptos_options.site_addr;
 
             // Generate the list of routes in your Leptos App
             let routes = generate_route_list(|cx| view! { cx, <App/> });
@@ -32,7 +32,7 @@ cfg_if! {
                 App::new()
                     .service(css)
                     .leptos_routes(leptos_options.to_owned(), routes.to_owned(), |cx| view! { cx, <App/> })
-                    .service(Files::new("/", &site_root))
+                    .service(Files::new("/", site_root))
                     .wrap(middleware::Compress::default())
             })
             .bind(&addr)?

examples/tailwind_csr_trunk/README.md

@@ -5,7 +5,7 @@ This is a template demonstrating how to integrate [TailwindCSS](https://tailwind
 
 Install Tailwind and build the CSS:
 
-`npx tailwindcss -i ./input.css -o ./style/output.css --watch`
+`Trunk.toml` is configured to build the CSS automatically.
 
 Install trunk to client side render this bundle.
 

examples/tailwind_csr_trunk/Trunk.toml

@@ -0,0 +1,4 @@
+[[hooks]]
+stage = "pre_build"
+command = "sh"
+command_arguments = ["-c", "npx tailwindcss -i input.css -o style/output.css"]

examples/tailwind_csr_trunk/style/output.css

@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.2.7 | MIT License | https://tailwindcss.com
+! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -31,6 +31,7 @@
 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 {
@@ -47,6 +48,8 @@ html {
   /* 4 */
   font-feature-settings: normal;
   /* 5 */
+  font-variation-settings: normal;
+  /* 6 */
 }
 
 /*
@@ -433,6 +436,9 @@ video {
   --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:  ;
@@ -480,6 +486,9 @@ video {
   --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:  ;

examples/todo_app_sqlite_axum/src/fallback.rs

@@ -4,7 +4,7 @@ cfg_if! {
 if #[cfg(feature = "ssr")] {
     use axum::{
         body::{boxed, Body, BoxBody},
-        extract::Extension,
+        extract::State,
         response::IntoResponse,
         http::{Request, Response, StatusCode, Uri},
     };
@@ -13,16 +13,16 @@ if #[cfg(feature = "ssr")] {
     use tower_http::services::ServeDir;
     use std::sync::Arc;
     use leptos::{LeptosOptions, Errors, view};
-    use crate::error_template::{ErrorTemplate, ErrorTemplateProps};
+    use crate::error_template::ErrorTemplate;
     use crate::errors::TodoAppError;
 
-    pub async fn file_and_error_handler(uri: Uri, Extension(options): Extension<Arc<LeptosOptions>>, req: Request<Body>) -> AxumResponse {
+    pub async fn file_and_error_handler(uri: Uri, State(options): State<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()
+            res.into_response()
         } else{
             let mut errors = Errors::default();
             errors.insert_with_default_key(TodoAppError::NotFound);

examples/todo_app_sqlite_axum/src/main.rs

@@ -5,7 +5,7 @@ cfg_if! {
     use leptos::*;
     use axum::{
         routing::{post, get},
-        extract::{Extension, Path},
+        extract::{State, Path},
         http::Request,
         response::{IntoResponse, Response},
         Router,
@@ -18,7 +18,7 @@ cfg_if! {
     use std::sync::Arc;
 
     //Define a handler to test extractor with state
-    async fn custom_handler(Path(id): Path<String>, Extension(options): Extension<Arc<LeptosOptions>>, req: Request<AxumBody>) -> Response{
+    async fn custom_handler(Path(id): Path<String>, State(options): State<Arc<LeptosOptions>>, req: Request<AxumBody>) -> Response{
             let handler = leptos_axum::render_app_to_stream_with_context((*options).clone(),
             move |cx| {
                 provide_context(cx, id.clone());
@@ -32,7 +32,7 @@ cfg_if! {
     async fn main() {
         simple_logger::init_with_level(log::Level::Debug).expect("couldn't initialize logging");
 
-        let conn = db().await.expect("couldn't connect to DB");
+        let _conn = db().await.expect("couldn't connect to DB");
         /* sqlx::migrate!()
             .run(&mut conn)
             .await
@@ -42,7 +42,7 @@ cfg_if! {
 
         // Setting this to None means we'll be using cargo-leptos and its env vars
         let conf = get_configuration(None).await.unwrap();
-        let leptos_options = conf.leptos_options;
+        let leptos_options = Arc::new(conf.leptos_options);
         let addr = leptos_options.site_addr;
         let routes = generate_route_list(|cx| view! { cx, <TodoApp/> }).await;
 
@@ -52,7 +52,7 @@ cfg_if! {
         .route("/special/:id", get(custom_handler))
         .leptos_routes(leptos_options.clone(), routes, |cx| view! { cx, <TodoApp/> } )
         .fallback(file_and_error_handler)
-        .layer(Extension(Arc::new(leptos_options)));
+        .with_state(leptos_options);
 
         // run our app with hyper
         // `axum::Server` is a re-export of `hyper::Server`

examples/todo_app_sqlite_axum/src/todo.rs

@@ -146,11 +146,8 @@ pub fn TodoApp(cx: Scope) -> impl IntoView {
             </header>
             <main>
                 <Routes>
-                    <Route path="" view=|cx| view! {
-                        cx,
-                        <ErrorBoundary fallback=|cx, errors| view!{cx, <ErrorTemplate errors=errors/>}>
-                            <Todos/>
-                        </ErrorBoundary>
+                    <Route path="" view=|cx| view! { cx,
+                        <Todos/>
                     }/> //Route
                     <Route path="weird" methods=&[Method::Get, Method::Post]
                         ssr=SsrMode::Async
@@ -203,63 +200,65 @@ pub fn Todos(cx: Scope) -> impl IntoView {
                 <input type="submit" value="Add"/>
             </MultiActionForm>
             <Transition fallback=move || view! {cx, <p>"Loading..."</p> }>
-                {move || {
-                    let existing_todos = {
-                        move || {
-                            todos.read(cx)
-                                .map(move |todos| match todos {
-                                    Err(e) => {
-                                        view! { cx, <pre class="error">"Server Error: " {e.to_string()}</pre>}.into_view(cx)
-                                    }
-                                    Ok(todos) => {
-                                        if todos.is_empty() {
-                                            view! { cx, <p>"No tasks were found."</p> }.into_view(cx)
-                                        } else {
-                                            todos
-                                                .into_iter()
-                                                .map(move |todo| {
-                                                    view! {
-                                                        cx,
-                                                        <li>
-                                                            {todo.title}
-                                                            <ActionForm action=delete_todo>
-                                                                <input type="hidden" name="id" value={todo.id}/>
-                                                                <input type="submit" value="X"/>
-                                                            </ActionForm>
-                                                        </li>
-                                                    }
-                                                })
-                                                .collect_view(cx)
+                <ErrorBoundary fallback=|cx, errors| view!{cx, <ErrorTemplate errors=errors/>}>
+                    {move || {
+                        let existing_todos = {
+                            move || {
+                                todos.read(cx)
+                                    .map(move |todos| match todos {
+                                        Err(e) => {
+                                            view! { cx, <pre class="error">"Server Error: " {e.to_string()}</pre>}.into_view(cx)
                                         }
-                                    }
-                                })
-                                .unwrap_or_default()
-                        }
-                    };
-
-                    let pending_todos = move || {
-                        submissions
-                        .get()
-                        .into_iter()
-                        .filter(|submission| submission.pending().get())
-                        .map(|submission| {
-                            view! {
-                                cx,
-                                <li class="pending">{move || submission.input.get().map(|data| data.title) }</li>
+                                        Ok(todos) => {
+                                            if todos.is_empty() {
+                                                view! { cx, <p>"No tasks were found."</p> }.into_view(cx)
+                                            } else {
+                                                todos
+                                                    .into_iter()
+                                                    .map(move |todo| {
+                                                        view! {
+                                                            cx,
+                                                            <li>
+                                                                {todo.title}
+                                                                <ActionForm action=delete_todo>
+                                                                    <input type="hidden" name="id" value={todo.id}/>
+                                                                    <input type="submit" value="X"/>
+                                                                </ActionForm>
+                                                            </li>
+                                                        }
+                                                    })
+                                                    .collect_view(cx)
+                                            }
+                                        }
+                                    })
+                                    .unwrap_or_default()
                             }
-                        })
-                        .collect_view(cx)
-                    };
+                        };
 
-                    view! {
-                        cx,
-                        <ul>
-                            {existing_todos}
-                            {pending_todos}
-                        </ul>
+                        let pending_todos = move || {
+                            submissions
+                            .get()
+                            .into_iter()
+                            .filter(|submission| submission.pending().get())
+                            .map(|submission| {
+                                view! {
+                                    cx,
+                                    <li class="pending">{move || submission.input.get().map(|data| data.title) }</li>
+                                }
+                            })
+                            .collect_view(cx)
+                        };
+
+                        view! {
+                            cx,
+                            <ul>
+                                {existing_todos}
+                                {pending_todos}
+                            </ul>
+                        }
                     }
                 }
-            }
+                </ErrorBoundary>
             </Transition>
         </div>
     }

examples/todo_app_sqlite_viz/src/fallback.rs

@@ -3,7 +3,7 @@ use cfg_if::cfg_if;
 cfg_if! {
 if #[cfg(feature = "ssr")] {
     use crate::{
-        error_template::{ErrorTemplate, ErrorTemplateProps},
+        error_template::ErrorTemplate,
         errors::TodoAppError,
     };
     use http::Uri;
@@ -22,7 +22,7 @@ if #[cfg(feature = "ssr")] {
             Error::Responder(Response::text("missing state type LeptosOptions")),
         )?;
         let root = &options.site_root;
-        let resp = get_static_file(uri, &root, headers, route_info).await?;
+        let resp = get_static_file(uri, root, headers, route_info).await?;
         let status = resp.status();
 
         if status.is_success() || status.is_redirection() {

examples/todo_app_sqlite_viz/src/main.rs

@@ -35,7 +35,7 @@ cfg_if! {
         simple_logger::init_with_level(log::Level::Debug)
             .expect("couldn't initialize logging");
 
-        let conn = db().await.expect("couldn't connect to DB");
+        let _conn = db().await.expect("couldn't connect to DB");
         /* sqlx::migrate!()
         .run(&mut conn)
         .await

examples/todomvc/src/lib.rs

@@ -43,7 +43,7 @@ impl Todos {
     }
 
     pub fn remove(&mut self, id: Uuid) {
-        self.0.retain(|todo| todo.id != id);
+        self.retain(|todo| todo.id != id);
     }
 
     pub fn remaining(&self) -> usize {
@@ -76,7 +76,23 @@ impl Todos {
     }
 
     fn clear_completed(&mut self) {
-        self.0.retain(|todo| !todo.completed.get());
+        self.retain(|todo| !todo.completed.get());
+    }
+
+    fn retain(&mut self, mut f: impl FnMut(&Todo) -> bool) {
+        self.0.retain(|todo| {
+            let retain = f(todo);
+            // because these signals are created at the top level,
+            // they are owned by the <TodoMVC/> component and not
+            // by the individual <Todo/> components. This means
+            // that if they are not manually disposed when removed, they
+            // will be held onto until the <TodoMVC/> is unmounted.
+            if !retain {
+                todo.title.dispose();
+                todo.completed.dispose();
+            }
+            retain
+        })
     }
 }
 
@@ -136,7 +152,7 @@ pub fn TodoMVC(cx: Scope) -> impl IntoView {
 
     // Handle the three filter modes: All, Active, and Completed
     let (mode, set_mode) = create_signal(cx, Mode::All);
-    window_event_listener_untyped("hashchange", move |_| {
+    window_event_listener(ev::hashchange, move |_| {
         let new_mode =
             location_hash().map(|hash| route(&hash)).unwrap_or_default();
         set_mode(new_mode);

integrations/actix/Cargo.toml

@@ -8,6 +8,7 @@ repository = "https://github.com/leptos-rs/leptos"
 description = "Actix integrations for the Leptos web framework."
 
 [dependencies]
+actix-http = "3"
 actix-web = "4"
 futures = "0.3"
 leptos = { workspace = true, features = ["ssr"] }

integrations/actix/src/lib.rs

@@ -16,9 +16,9 @@ use actix_web::{
 use futures::{Stream, StreamExt};
 use http::StatusCode;
 use leptos::{
-    leptos_dom::ssr::render_to_stream_with_prefix_undisposed_with_context,
     leptos_server::{server_fn_by_path, Payload},
     server_fn::Encoding,
+    ssr::render_to_stream_with_prefix_undisposed_with_context_and_block_replacement,
     *,
 };
 use leptos_integration_utils::{build_async_response, html_parts_separated};
@@ -185,7 +185,7 @@ pub fn handle_server_fns_with_context(
                     .and_then(|value| value.to_str().ok());
 
                 if let Some(server_fn) = server_fn_by_path(path.as_str()) {
-                    let body: &[u8] = &body;
+                    let body_ref: &[u8] = &body;
 
                     let runtime = create_runtime();
                     let (cx, disposer) = raw_scope_and_disposer(runtime);
@@ -198,10 +198,28 @@ pub fn handle_server_fns_with_context(
                     provide_context(cx, req.clone());
                     provide_context(cx, res_options.clone());
 
+                    // we consume the body here (using the web::Bytes extractor), but it is required for things
+                    // like MultipartForm
+                    if req
+                        .headers()
+                        .get("Content-Type")
+                        .and_then(|value| value.to_str().ok())
+                        .and_then(|value| {
+                            Some(
+                                value.starts_with(
+                                    "multipart/form-data; boundary=",
+                                ),
+                            )
+                        })
+                        == Some(true)
+                    {
+                        provide_context(cx, body.clone());
+                    }
+
                     let query = req.query_string().as_bytes();
 
                     let data = match &server_fn.encoding {
-                        Encoding::Url | Encoding::Cbor => body,
+                        Encoding::Url | Encoding::Cbor => body_ref,
                         Encoding::GetJSON | Encoding::GetCBOR => query,
                     };
                     let res = match (server_fn.trait_obj)(cx, data).await {
@@ -514,6 +532,43 @@ pub fn render_app_to_stream_with_context<IV>(
     app_fn: impl Fn(leptos::Scope) -> IV + Clone + 'static,
     method: Method,
 ) -> Route
+where
+    IV: IntoView,
+{
+    render_app_to_stream_with_context_and_replace_blocks(
+        options,
+        additional_context,
+        app_fn,
+        method,
+        false,
+    )
+}
+
+/// Returns an Actix [Route](actix_web::Route) that listens for a `GET` request and tries
+/// to route it using [leptos_router], serving an HTML stream of your application.
+///
+/// This function allows you to provide additional information to Leptos for your route.
+/// It could be used to pass in Path Info, Connection Info, or anything your heart desires.
+///
+/// `replace_blocks` additionally lets you specify whether `<Suspense/>` fragments that read
+/// from blocking resources should be retrojected into the HTML that's initially served, rather
+/// than dynamically inserting them with JavaScript on the client. This means you will have
+/// better support if JavaScript is not enabled, in exchange for a marginally slower response time.
+///
+/// ## Provided Context Types
+/// This function always provides context values including the following types:
+/// - [ResponseOptions]
+/// - [HttpRequest](actix_web::HttpRequest)
+/// - [MetaContext](leptos_meta::MetaContext)
+/// - [RouterIntegrationContext](leptos_router::RouterIntegrationContext)
+#[tracing::instrument(level = "trace", fields(error), skip_all)]
+pub fn render_app_to_stream_with_context_and_replace_blocks<IV>(
+    options: LeptosOptions,
+    additional_context: impl Fn(leptos::Scope) + 'static + Clone + Send,
+    app_fn: impl Fn(leptos::Scope) -> IV + Clone + 'static,
+    method: Method,
+    replace_blocks: bool,
+) -> Route
 where
     IV: IntoView,
 {
@@ -533,7 +588,14 @@ where
                 }
             };
 
-            stream_app(&options, app, res_options, additional_context).await
+            stream_app(
+                &options,
+                app,
+                res_options,
+                additional_context,
+                replace_blocks,
+            )
+            .await
         }
     };
     match method {
@@ -653,103 +715,6 @@ where
     }
 }
 
-/// Returns an Actix [Route](actix_web::Route) that listens for a `GET` request and tries
-/// to route it using [leptos_router], serving an HTML stream of your application.
-///
-/// The provides a [MetaContext] and a [RouterIntegrationContext] to app’s context before
-/// rendering it, and includes any meta tags injected using [leptos_meta].
-///
-/// The HTML stream is rendered using [render_to_stream](leptos::ssr::render_to_stream), and
-/// includes everything described in the documentation for that function.
-///
-/// This can then be set up at an appropriate route in your application:
-/// ```
-/// use actix_web::{App, HttpServer};
-/// use leptos::*;
-/// use leptos_actix::DataResponse;
-/// use std::{env, net::SocketAddr};
-///
-/// #[component]
-/// fn MyApp(cx: Scope, data: &'static str) -> impl IntoView {
-///     view! { cx, <main>"Hello, world!"</main> }
-/// }
-///
-/// # if false { // don't actually try to run a server in a doctest...
-/// #[actix_web::main]
-/// async fn main() -> std::io::Result<()> {
-///     let conf = get_configuration(Some("Cargo.toml")).await.unwrap();
-///     let addr = conf.leptos_options.site_addr.clone();
-///     HttpServer::new(move || {
-///         let leptos_options = &conf.leptos_options;
-///
-///         App::new()
-///             // {tail:.*} passes the remainder of the URL as the route
-///             // the actual routing will be handled by `leptos_router`
-///             .route(
-///                 "/{tail:.*}",
-///                 leptos_actix::render_preloaded_data_app(
-///                     leptos_options.to_owned(),
-///                     |req| async move {
-///                         Ok(DataResponse::Data(
-///                             "async func that can preload data",
-///                         ))
-///                     },
-///                     |cx, data| view! { cx, <MyApp data/> },
-///                 ),
-///             )
-///     })
-///     .bind(&addr)?
-///     .run()
-///     .await
-/// }
-/// # }
-/// ```
-///
-/// ## Provided Context Types
-/// This function always provides context values including the following types:
-/// - [ResponseOptions]
-/// - [HttpRequest](actix_web::HttpRequest)
-/// - [MetaContext](leptos_meta::MetaContext)
-/// - [RouterIntegrationContext](leptos_router::RouterIntegrationContext)
-#[deprecated = "You can now use `render_app_async` with `create_resource` and \
-                `<Suspense/>` to achieve async rendering without manually \
-                preloading data."]
-pub fn render_preloaded_data_app<Data, Fut, IV>(
-    options: LeptosOptions,
-    data_fn: impl Fn(HttpRequest) -> Fut + Clone + 'static,
-    app_fn: impl Fn(leptos::Scope, Data) -> IV + Clone + Send + 'static,
-) -> Route
-where
-    Data: 'static,
-    Fut: Future<Output = Result<DataResponse<Data>, actix_web::Error>>,
-    IV: IntoView + 'static,
-{
-    web::get().to(move |req: HttpRequest| {
-        let options = options.clone();
-        let app_fn = app_fn.clone();
-        let data_fn = data_fn.clone();
-        let res_options = ResponseOptions::default();
-
-        async move {
-            let data = match data_fn(req.clone()).await {
-                Err(e) => return HttpResponse::from_error(e),
-                Ok(DataResponse::Response(r)) => return r.into(),
-                Ok(DataResponse::Data(d)) => d,
-            };
-
-            let app = {
-                let app_fn = app_fn.clone();
-                let res_options = res_options.clone();
-                move |cx| {
-                    provide_contexts(cx, &req, res_options);
-                    (app_fn)(cx, data).into_view(cx)
-                }
-            };
-
-            stream_app(&options, app, res_options, |_cx| {}).await
-        }
-    })
-}
 #[tracing::instrument(level = "trace", fields(error), skip_all)]
 fn provide_contexts(
     cx: leptos::Scope,
@@ -781,12 +746,14 @@ async fn stream_app(
     app: impl FnOnce(leptos::Scope) -> View + 'static,
     res_options: ResponseOptions,
     additional_context: impl Fn(leptos::Scope) + 'static + Clone + Send,
+    replace_blocks: bool,
 ) -> HttpResponse<BoxBody> {
     let (stream, runtime, scope) =
-        render_to_stream_with_prefix_undisposed_with_context(
+        render_to_stream_with_prefix_undisposed_with_context_and_block_replacement(
             app,
             move |cx| generate_head_metadata_separated(cx).1.into(),
             additional_context,
+            replace_blocks
         );
 
     build_stream_response(options, res_options, stream, runtime, scope).await
@@ -985,22 +952,6 @@ pub trait LeptosRoutes {
     where
         IV: IntoView + 'static;
 
-    #[deprecated = "You can now use `leptos_routes` and a `<Route \
-                    mode=SsrMode::Async/>`
-                    to achieve async rendering without manually preloading \
-                    data."]
-    fn leptos_preloaded_data_routes<Data, Fut, IV>(
-        self,
-        options: LeptosOptions,
-        paths: Vec<String>,
-        data_fn: impl Fn(HttpRequest) -> Fut + Clone + 'static,
-        app_fn: impl Fn(leptos::Scope, Data) -> IV + Clone + Send + 'static,
-    ) -> Self
-    where
-        Data: 'static,
-        Fut: Future<Output = Result<DataResponse<Data>, actix_web::Error>>,
-        IV: IntoView + 'static;
-
     fn leptos_routes_with_context<IV>(
         self,
         options: LeptosOptions,
@@ -1035,34 +986,7 @@ where
     {
         self.leptos_routes_with_context(options, paths, |_| {}, app_fn)
     }
-    #[tracing::instrument(level = "trace", fields(error), skip_all)]
-    fn leptos_preloaded_data_routes<Data, Fut, IV>(
-        self,
-        options: LeptosOptions,
-        paths: Vec<String>,
-        data_fn: impl Fn(HttpRequest) -> Fut + Clone + 'static,
-        app_fn: impl Fn(leptos::Scope, Data) -> IV + Clone + Send + 'static,
-    ) -> Self
-    where
-        Data: 'static,
-        Fut: Future<Output = Result<DataResponse<Data>, actix_web::Error>>,
-        IV: IntoView + 'static,
-    {
-        let mut router = self;
 
-        for path in paths.iter() {
-            router = router.route(
-                path,
-                #[allow(deprecated)]
-                render_preloaded_data_app(
-                    options.clone(),
-                    data_fn.clone(),
-                    app_fn.clone(),
-                ),
-            );
-        }
-        router
-    }
     #[tracing::instrument(level = "trace", fields(error), skip_all)]
     fn leptos_routes_with_context<IV>(
         self,
@@ -1091,6 +1015,15 @@ where
                                 method,
                             )
                         }
+                        SsrMode::PartiallyBlocked => {
+                            render_app_to_stream_with_context_and_replace_blocks(
+                                options.clone(),
+                                additional_context.clone(),
+                                app_fn.clone(),
+                                method,
+                                true,
+                            )
+                        }
                         SsrMode::InOrder => {
                             render_app_to_stream_in_order_with_context(
                                 options.clone(),
@@ -1113,7 +1046,7 @@ where
     }
 }
 
-/// A helper to make it easier to use Axum extractors in server functions. This takes
+/// A helper to make it easier to use Actix extractors in server functions. This takes
 /// a handler function as its argument. The handler follows similar rules to an Actix
 /// [Handler](actix_web::Handler): it is an async function that receives arguments that  
 /// will be extracted from the request and returns some value.
@@ -1157,9 +1090,17 @@ where
 {
     let req = use_context::<actix_web::HttpRequest>(cx)
         .expect("HttpRequest should have been provided via context");
-    let input = E::extract(&req)
-        .await
-        .map_err(|e| ServerFnError::ServerError(e.to_string()))?;
+
+    let input = if let Some(body) = use_context::<Bytes>(cx) {
+        let (_, mut payload) = actix_http::h1::Payload::create(false);
+        payload.unread_data(body);
+        E::from_request(&req, &mut dev::Payload::from(payload))
+    } else {
+        E::extract(&req)
+    }
+    .await
+    .map_err(|e| ServerFnError::ServerError(e.to_string()))?;
+
     Ok(f.call(input).await)
 }
 

integrations/axum/src/lib.rs

@@ -129,23 +129,6 @@ pub fn redirect(cx: leptos::Scope, path: &str) {
     }
 }
 
-/// Decomposes an HTTP request into its parts, allowing you to read its headers
-/// and other data without consuming the body.
-#[deprecated(note = "Replaced with generate_request_and_parts() to allow for \
-                     putting LeptosRequest in the Context")]
-pub async fn generate_request_parts(req: Request<Body>) -> RequestParts {
-    // provide request headers as context in server scope
-    let (parts, body) = req.into_parts();
-    let body = body::to_bytes(body).await.unwrap_or_default();
-    RequestParts {
-        method: parts.method,
-        uri: parts.uri,
-        headers: parts.headers,
-        version: parts.version,
-        body,
-    }
-}
-
 /// Decomposes an HTTP request into its parts, allowing you to read its headers
 /// and other data without consuming the body. Creates a new Request from the
 /// original parts for further processing
@@ -622,6 +605,54 @@ pub fn render_app_to_stream_with_context<IV>(
        + 'static
 where
     IV: IntoView,
+{
+    render_app_to_stream_with_context_and_replace_blocks(
+        options,
+        additional_context,
+        app_fn,
+        false,
+    )
+}
+
+/// Returns an Axum [Handler](axum::handler::Handler) that listens for a `GET` request and tries
+/// to route it using [leptos_router], serving an HTML stream of your application.
+///
+/// This version allows us to pass Axum State/Extension/Extractor or other infro from Axum or network
+/// layers above Leptos itself. To use it, you'll need to write your own handler function that provides
+/// the data to leptos in a closure.
+///
+/// `replace_blocks` additionally lets you specify whether `<Suspense/>` fragments that read
+/// from blocking resources should be retrojected into the HTML that's initially served, rather
+/// than dynamically inserting them with JavaScript on the client. This means you will have
+/// better support if JavaScript is not enabled, in exchange for a marginally slower response time.
+///
+/// Otherwise, this function is identical to [render_app_to_stream_with_context].
+///
+/// ## Provided Context Types
+/// This function always provides context values including the following types:
+/// - [RequestParts]
+/// - [ResponseOptions]
+/// - [MetaContext](leptos_meta::MetaContext)
+/// - [RouterIntegrationContext](leptos_router::RouterIntegrationContext)
+#[tracing::instrument(level = "info", fields(error), skip_all)]
+pub fn render_app_to_stream_with_context_and_replace_blocks<IV>(
+    options: LeptosOptions,
+    additional_context: impl Fn(leptos::Scope) + 'static + Clone + Send,
+    app_fn: impl Fn(leptos::Scope) -> IV + Clone + Send + 'static,
+    replace_blocks: bool,
+) -> impl Fn(
+    Request<Body>,
+) -> Pin<
+    Box<
+        dyn Future<Output = Response<StreamBody<PinnedHtmlStream>>>
+            + Send
+            + 'static,
+    >,
+> + Clone
+       + Send
+       + 'static
+where
+    IV: IntoView,
 {
     move |req: Request<Body>| {
         Box::pin({
@@ -651,10 +682,11 @@ where
                     }
                 };
                 let (bundle, runtime, scope) =
-                    leptos::leptos_dom::ssr::render_to_stream_with_prefix_undisposed_with_context(
+                    leptos::leptos_dom::ssr::render_to_stream_with_prefix_undisposed_with_context_and_block_replacement(
                         app,
                         |cx| generate_head_metadata_separated(cx).1.into(),
                         add_context,
+                        replace_blocks
                     );
 
                     forward_stream(&options, res_options2, bundle, runtime, scope, tx).await;
@@ -663,6 +695,7 @@ where
         })
     }
 }
+
 #[tracing::instrument(level = "info", fields(error), skip_all)]
 async fn generate_response(
     res_options: ResponseOptions,
@@ -1093,12 +1126,39 @@ where
     }
 }
 
+/// This trait allows one to use your custom struct in Axum's router, provided it can provide the
+/// `LeptosOptions` to use for the `LeptosRoutes` trait functions.
+pub trait LeptosOptionProvider {
+    fn options(&self) -> LeptosOptions;
+}
+
+/// Implement `LeptosOptionProvider` trait for `LeptosOptions` itself.
+impl LeptosOptionProvider for LeptosOptions {
+    fn options(&self) -> LeptosOptions {
+        self.clone()
+    }
+}
+
+/// Implement `LeptosOptionProvider` trait for any type wrapped in an Arc, if that type implements
+/// `LeptosOptionProvider` as states in axum are often provided wrapped in an Arc.
+impl<T> LeptosOptionProvider for Arc<T>
+where
+    T: LeptosOptionProvider,
+{
+    fn options(&self) -> LeptosOptions {
+        (**self).options()
+    }
+}
+
 /// This trait allows one to pass a list of routes and a render function to Axum's router, letting us avoid
 /// having to use wildcards or manually define all routes in multiple places.
-pub trait LeptosRoutes {
+pub trait LeptosRoutes<OP>
+where
+    OP: LeptosOptionProvider,
+{
     fn leptos_routes<IV>(
         self,
-        options: LeptosOptions,
+        options: OP,
         paths: Vec<RouteListing>,
         app_fn: impl Fn(leptos::Scope) -> IV + Clone + Send + 'static,
     ) -> Self
@@ -1107,7 +1167,7 @@ pub trait LeptosRoutes {
 
     fn leptos_routes_with_context<IV>(
         self,
-        options: LeptosOptions,
+        options: OP,
         paths: Vec<RouteListing>,
         additional_context: impl Fn(leptos::Scope) + 'static + Clone + Send,
         app_fn: impl Fn(leptos::Scope) -> IV + Clone + Send + 'static,
@@ -1121,16 +1181,20 @@ pub trait LeptosRoutes {
         handler: H,
     ) -> Self
     where
-        H: axum::handler::Handler<T, (), axum::body::Body>,
+        H: axum::handler::Handler<T, OP, axum::body::Body>,
         T: 'static;
 }
+
 /// The default implementation of `LeptosRoutes` which takes in a list of paths, and dispatches GET requests
 /// to those paths to Leptos's renderer.
-impl LeptosRoutes for axum::Router {
+impl<OP> LeptosRoutes<OP> for axum::Router<OP>
+where
+    OP: LeptosOptionProvider + Clone + Send + Sync + 'static,
+{
     #[tracing::instrument(level = "info", fields(error), skip_all)]
     fn leptos_routes<IV>(
         self,
-        options: LeptosOptions,
+        options: OP,
         paths: Vec<RouteListing>,
         app_fn: impl Fn(leptos::Scope) -> IV + Clone + Send + 'static,
     ) -> Self
@@ -1143,7 +1207,7 @@ impl LeptosRoutes for axum::Router {
     #[tracing::instrument(level = "trace", fields(error), skip_all)]
     fn leptos_routes_with_context<IV>(
         self,
-        options: LeptosOptions,
+        options: OP,
         paths: Vec<RouteListing>,
         additional_context: impl Fn(leptos::Scope) + 'static + Clone + Send,
         app_fn: impl Fn(leptos::Scope) -> IV + Clone + Send + 'static,
@@ -1161,7 +1225,7 @@ impl LeptosRoutes for axum::Router {
                     match listing.mode() {
                         SsrMode::OutOfOrder => {
                             let s = render_app_to_stream_with_context(
-                                options.clone(),
+                                options.options(),
                                 additional_context.clone(),
                                 app_fn.clone(),
                             );
@@ -1173,9 +1237,24 @@ impl LeptosRoutes for axum::Router {
                                 leptos_router::Method::Patch => patch(s),
                             }
                         }
+                        SsrMode::PartiallyBlocked => {
+                            let s = render_app_to_stream_with_context_and_replace_blocks(
+                                options.options(),
+                                additional_context.clone(),
+                                app_fn.clone(),
+                                true
+                            );
+                            match method {
+                                leptos_router::Method::Get => get(s),
+                                leptos_router::Method::Post => post(s),
+                                leptos_router::Method::Put => put(s),
+                                leptos_router::Method::Delete => delete(s),
+                                leptos_router::Method::Patch => patch(s),
+                            }
+                        }
                         SsrMode::InOrder => {
                             let s = render_app_to_stream_in_order_with_context(
-                                options.clone(),
+                                options.options(),
                                 additional_context.clone(),
                                 app_fn.clone(),
                             );
@@ -1189,7 +1268,7 @@ impl LeptosRoutes for axum::Router {
                         }
                         SsrMode::Async => {
                             let s = render_app_async_with_context(
-                                options.clone(),
+                                options.options(),
                                 additional_context.clone(),
                                 app_fn.clone(),
                             );
@@ -1215,7 +1294,7 @@ impl LeptosRoutes for axum::Router {
         handler: H,
     ) -> Self
     where
-        H: axum::handler::Handler<T, (), axum::body::Body>,
+        H: axum::handler::Handler<T, OP, axum::body::Body>,
         T: 'static,
     {
         let mut router = self;
@@ -1238,6 +1317,7 @@ impl LeptosRoutes for axum::Router {
         router
     }
 }
+
 #[tracing::instrument(level = "trace", fields(error), skip_all)]
 fn get_leptos_pool() -> LocalPoolHandle {
     static LOCAL_POOL: OnceCell<LocalPoolHandle> = OnceCell::new();

integrations/viz/src/lib.rs

@@ -506,6 +506,48 @@ pub fn render_app_to_stream_with_context<IV>(
        + 'static
 where
     IV: IntoView,
+{
+    render_app_to_stream_with_context_and_replace_blocks(
+        options,
+        additional_context,
+        app_fn,
+        false,
+    )
+}
+
+/// Returns a Viz [Handler](viz::Handler) that listens for a `GET` request and tries
+/// to route it using [leptos_router], serving an HTML stream of your application.
+///
+/// This version allows us to pass Viz State/Extractor or other infro from Viz or network
+/// layers above Leptos itself. To use it, you'll need to write your own handler function that provides
+/// the data to leptos in a closure.
+///
+/// `replace_blocks` additionally lets you specify whether `<Suspense/>` fragments that read
+/// from blocking resources should be retrojected into the HTML that's initially served, rather
+/// than dynamically inserting them with JavaScript on the client. This means you will have
+/// better support if JavaScript is not enabled, in exchange for a marginally slower response time.
+///
+/// Otherwise, this function is identical to [render_app_to_stream_with_context].
+///
+/// ## Provided Context Types
+/// This function always provides context values including the following types:
+/// - [RequestParts]
+/// - [ResponseOptions]
+/// - [MetaContext](leptos_meta::MetaContext)
+/// - [RouterIntegrationContext](leptos_router::RouterIntegrationContext)
+pub fn render_app_to_stream_with_context_and_replace_blocks<IV>(
+    options: LeptosOptions,
+    additional_context: impl Fn(leptos::Scope) + Clone + Send + 'static,
+    app_fn: impl Fn(leptos::Scope) -> IV + Clone + Send + 'static,
+    replace_blocks: bool,
+) -> impl Fn(
+    Request,
+) -> Pin<Box<dyn Future<Output = Result<Response>> + Send + 'static>>
+       + Clone
+       + Send
+       + 'static
+where
+    IV: IntoView,
 {
     move |req: Request| {
         Box::pin({
@@ -548,10 +590,11 @@ where
                                             };
 
                                             let (bundle, runtime, scope) =
-                                                leptos::leptos_dom::ssr::render_to_stream_with_prefix_undisposed_with_context(
+                                                leptos::leptos_dom::ssr::render_to_stream_with_prefix_undisposed_with_context_and_block_replacement(
                                                     app,
                                                     |cx| generate_head_metadata_separated(cx).1.into(),
                                                     add_context,
+                                                    replace_blocks
                                                 );
 
                                                 forward_stream(&options, res_options2, bundle, runtime, scope, tx).await;
@@ -1091,6 +1134,22 @@ impl LeptosRoutes for Router {
                         leptos_router::Method::Patch => router.patch(path, s),
                     }
                 }
+                SsrMode::PartiallyBlocked => {
+                    let s =
+                        render_app_to_stream_with_context_and_replace_blocks(
+                            options.clone(),
+                            additional_context.clone(),
+                            app_fn.clone(),
+                            true,
+                        );
+                    match method {
+                        leptos_router::Method::Get => router.get(path, s),
+                        leptos_router::Method::Post => router.post(path, s),
+                        leptos_router::Method::Put => router.put(path, s),
+                        leptos_router::Method::Delete => router.delete(path, s),
+                        leptos_router::Method::Patch => router.patch(path, s),
+                    }
+                }
                 SsrMode::InOrder => {
                     let s = render_app_to_stream_in_order_with_context(
                         options.clone(),

leptos/Cargo.toml

@@ -23,7 +23,7 @@ server_fn = { workspace = true, default-features = false }
 leptos = { path = ".", default-features = false }
 
 [features]
-default = ["serde", "nightly"]
+default = ["csr", "serde"]
 csr = [
   "leptos_dom/web",
   "leptos_macro/csr",
@@ -44,11 +44,11 @@ ssr = [
   "leptos_reactive/ssr",
   "leptos_server/ssr",
 ]
-nightly = [
-  "leptos_dom/nightly",
-  "leptos_macro/nightly",
-  "leptos_reactive/nightly",
-  "leptos_server/nightly",
+stable = [
+  "leptos_dom/stable",
+  "leptos_macro/stable",
+  "leptos_reactive/stable",
+  "leptos_server/stable",
 ]
 serde = ["leptos_reactive/serde"]
 serde-lite = ["leptos_reactive/serde-lite"]
@@ -57,10 +57,8 @@ rkyv = ["leptos_reactive/rkyv"]
 tracing = ["leptos_macro/tracing"]
 
 [package.metadata.cargo-all-features]
-denylist = ["tracing"]
+denylist = ["stable", "tracing"]
 skip_feature_sets = [
-  [
-  ],
   [
     "csr",
     "ssr",

leptos/src/lib.rs

@@ -12,6 +12,10 @@
 //!
 //! And you can do all three of these **using the same Leptos code.**
 //!
+//! Take a look at the [Leptos Book](https://leptos-rs.github.io/leptos/) for a walkthrough of the framework.
+//! Join us on our [Discord Channel](https://discord.gg/v38Eef6sWG) to see what the community is building.
+//! Explore our [Examples](https://github.com/leptos-rs/leptos/tree/main/examples) to see Leptos in action.
+//!
 //! # `nightly` Note
 //! Most of the examples assume you’re using `nightly` Rust. If you’re on stable, note the following:
 //! 1. You need to enable the `"stable"` flag in `Cargo.toml`: `leptos = { version = "0.0", features = ["stable"] }`
@@ -152,7 +156,6 @@ pub use leptos_config::{self, get_configuration, LeptosOptions};
 pub mod ssr {
     pub use leptos_dom::{ssr::*, ssr_in_order::*};
 }
-#[allow(deprecated)]
 pub use leptos_dom::{
     self, create_node_ref, debug_warn, document, error, ev,
     helpers::{
@@ -161,11 +164,10 @@ pub use leptos_dom::{
         request_idle_callback, request_idle_callback_with_handle, set_interval,
         set_interval_with_handle, set_timeout, set_timeout_with_handle,
         window_event_listener, window_event_listener_untyped,
-        window_event_listener_with_precast,
     },
     html, log, math, mount_to, mount_to_body, svg, warn, window, Attribute,
     Class, CollectView, Errors, Fragment, HtmlElement, IntoAttribute,
-    IntoClass, IntoProperty, IntoView, NodeRef, Property, View,
+    IntoClass, IntoProperty, IntoStyle, IntoView, NodeRef, Property, View,
 };
 pub use leptos_macro::*;
 pub use leptos_reactive::*;

leptos/src/suspense.rs

@@ -1,7 +1,11 @@
 use cfg_if::cfg_if;
 use leptos_dom::{DynChild, Fragment, HydrationCtx, IntoView};
 use leptos_macro::component;
+#[cfg(any(feature = "csr", feature = "hydrate"))]
+use leptos_reactive::ScopeDisposer;
 use leptos_reactive::{provide_context, Scope, SuspenseContext};
+#[cfg(any(feature = "csr", feature = "hydrate"))]
+use std::cell::RefCell;
 use std::rc::Rc;
 
 /// If any [Resources](leptos_reactive::Resource) are read in the `children` of this
@@ -52,16 +56,17 @@ use std::rc::Rc;
     tracing::instrument(level = "info", skip_all)
 )]
 #[component(transparent)]
-pub fn Suspense<F, E>(
+pub fn Suspense<F, E, V>(
     cx: Scope,
     /// Returns a fallback UI that will be shown while `async` [Resources](leptos_reactive::Resource) are still loading.
     fallback: F,
     /// Children will be displayed once all `async` [Resources](leptos_reactive::Resource) have resolved.
-    children: Box<dyn Fn(Scope) -> Fragment>,
+    children: Box<dyn Fn(Scope) -> V>,
 ) -> impl IntoView
 where
     F: Fn() -> E + 'static,
     E: IntoView,
+    V: IntoView + 'static,
 {
     let context = SuspenseContext::new(cx);
 
@@ -70,8 +75,9 @@ where
 
     let orig_child = Rc::new(children);
 
-    let before_me = HydrationCtx::peek();
     let current_id = HydrationCtx::next_component();
+    #[cfg(any(feature = "csr", feature = "hydrate"))]
+    let prev_disposer = Rc::new(RefCell::new(None::<ScopeDisposer>));
 
     let child = DynChild::new({
         #[cfg(not(any(feature = "csr", feature = "hydrate")))]
@@ -79,22 +85,33 @@ where
         move || {
             cfg_if! {
                 if #[cfg(any(feature = "csr", feature = "hydrate"))] {
-                    if context.ready() {
+                    if let Some(disposer) = prev_disposer.take() {
+                        disposer.dispose();
+                    }
+                    let (view, disposer) =
+                        cx.run_child_scope(|cx| if context.ready() {
                         Fragment::lazy(Box::new(|| vec![orig_child(cx).into_view(cx)])).into_view(cx)
                     } else {
                         Fragment::lazy(Box::new(|| vec![fallback().into_view(cx)])).into_view(cx)
-                    }
+                    });
+                    *prev_disposer.borrow_mut() = Some(disposer);
+                    view
+
                 } else {
                     use leptos_reactive::signal_prelude::*;
 
                     // run the child; we'll probably throw this away, but it will register resource reads
-                    let child = orig_child(cx).into_view(cx);
+                    let _child = orig_child(cx).into_view(cx);
                     let after_original_child = HydrationCtx::id();
 
                     let initial = {
                         // no resources were read under this, so just return the child
                         if context.pending_resources.get() == 0 {
-                            child
+                            let orig_child = Rc::clone(&orig_child);
+                            HydrationCtx::continue_from(current_id.clone());
+                            Fragment::lazy(Box::new(move || {
+                                vec![DynChild::new(move || orig_child(cx)).into_view(cx)]
+                            })).into_view(cx)
                         }
                         // show the fallback, but also prepare to stream HTML
                         else {
@@ -148,7 +165,7 @@ where
         _ => unreachable!(),
     };
 
-    HydrationCtx::continue_from(before_me);
+    HydrationCtx::continue_from(current_id.clone());
 
     leptos_dom::View::Suspense(current_id, core_component)
 }

leptos/src/transition.rs

@@ -78,7 +78,7 @@ where
     F: Fn() -> E + 'static,
     E: IntoView,
 {
-    let prev_children = Rc::new(RefCell::new(None::<Vec<View>>));
+    let prev_children = Rc::new(RefCell::new(None::<View>));
 
     let first_run = Rc::new(std::cell::Cell::new(true));
     let child_runs = Cell::new(0);
@@ -112,13 +112,13 @@ where
                 }
             })
             .children(Box::new(move |cx| {
-                let frag = children(cx);
+                let frag = children(cx).into_view(cx);
 
                 let suspense_context = use_context::<SuspenseContext>(cx)
                     .expect("there to be a SuspenseContext");
 
                 if cfg!(feature = "hydrate") || !first_run.get() {
-                    *prev_children.borrow_mut() = Some(frag.nodes.clone());
+                    *prev_children.borrow_mut() = Some(frag.clone());
                 }
                 if is_first_run(&first_run, &suspense_context) {
                     let has_local_only = suspense_context.has_local_only()

leptos/tests/ssr.rs

@@ -14,16 +14,13 @@ fn simple_ssr_test() {
             </div>
         };
 
-        assert_eq!(
-            rendered.into_view(cx).render_to_string(cx),
-            "<!--leptos-view|leptos-tests-ssr.rs-8|open--><div \
-             id=\"_0-1\"><button id=\"_0-2\">-1</button><span \
+        assert!(rendered.into_view(cx).render_to_string(cx).contains(
+            "<div id=\"_0-1\"><button id=\"_0-2\">-1</button><span \
              id=\"_0-3\">Value: \
              <!--hk=_0-4o|leptos-dyn-child-start-->0<!\
              --hk=_0-4c|leptos-dyn-child-end-->!</span><button \
-             id=\"_0-5\">+1</button></div><!--leptos-view|leptos-tests-ssr.\
-             rs-8|close-->"
-        );
+             id=\"_0-5\">+1</button></div>"
+        ));
     });
 }
 
@@ -54,28 +51,13 @@ fn ssr_test_with_components() {
             </div>
         };
 
-        assert_eq!(
-            rendered.into_view(cx).render_to_string(cx),
-            "<!--leptos-view|leptos-tests-ssr.rs-49|open--><div id=\"_0-1\" \
-             class=\"counters\"><!--hk=_0-1-0o|leptos-counter-start--><!\
-             --leptos-view|leptos-tests-ssr.rs-38|open--><div \
-             id=\"_0-1-1\"><button id=\"_0-1-2\">-1</button><span \
+        assert!(rendered.into_view(cx).render_to_string(cx).contains(
+            "<div id=\"_0-1-1\"><button id=\"_0-1-2\">-1</button><span \
              id=\"_0-1-3\">Value: \
              <!--hk=_0-1-4o|leptos-dyn-child-start-->1<!\
              --hk=_0-1-4c|leptos-dyn-child-end-->!</span><button \
-             id=\"_0-1-5\">+1</button></div><!--leptos-view|leptos-tests-ssr.\
-             rs-38|close--><!--hk=_0-1-0c|leptos-counter-end--><!\
-             --hk=_0-1-5-0o|leptos-counter-start--><!\
-             --leptos-view|leptos-tests-ssr.rs-38|open--><div \
-             id=\"_0-1-5-1\"><button id=\"_0-1-5-2\">-1</button><span \
-             id=\"_0-1-5-3\">Value: \
-             <!--hk=_0-1-5-4o|leptos-dyn-child-start-->2<!\
-             --hk=_0-1-5-4c|leptos-dyn-child-end-->!</span><button \
-             id=\"_0-1-5-5\">+1</button></div><!\
-             --leptos-view|leptos-tests-ssr.rs-38|close--><!\
-             --hk=_0-1-5-0c|leptos-counter-end--></div><!\
-             --leptos-view|leptos-tests-ssr.rs-49|close-->"
-        );
+             id=\"_0-1-5\">+1</button></div>"
+        ));
     });
 }
 
@@ -106,29 +88,13 @@ fn ssr_test_with_snake_case_components() {
             </div>
         };
 
-        assert_eq!(
-            rendered.into_view(cx).render_to_string(cx),
-            "<!--leptos-view|leptos-tests-ssr.rs-101|open--><div id=\"_0-1\" \
-             class=\"counters\"><!\
-             --hk=_0-1-0o|leptos-snake-case-counter-start--><!\
-             --leptos-view|leptos-tests-ssr.rs-90|open--><div \
-             id=\"_0-1-1\"><button id=\"_0-1-2\">-1</button><span \
+        assert!(rendered.into_view(cx).render_to_string(cx).contains(
+            "<div id=\"_0-1-1\"><button id=\"_0-1-2\">-1</button><span \
              id=\"_0-1-3\">Value: \
              <!--hk=_0-1-4o|leptos-dyn-child-start-->1<!\
              --hk=_0-1-4c|leptos-dyn-child-end-->!</span><button \
-             id=\"_0-1-5\">+1</button></div><!--leptos-view|leptos-tests-ssr.\
-             rs-90|close--><!--hk=_0-1-0c|leptos-snake-case-counter-end--><!\
-             --hk=_0-1-5-0o|leptos-snake-case-counter-start--><!\
-             --leptos-view|leptos-tests-ssr.rs-90|open--><div \
-             id=\"_0-1-5-1\"><button id=\"_0-1-5-2\">-1</button><span \
-             id=\"_0-1-5-3\">Value: \
-             <!--hk=_0-1-5-4o|leptos-dyn-child-start-->2<!\
-             --hk=_0-1-5-4c|leptos-dyn-child-end-->!</span><button \
-             id=\"_0-1-5-5\">+1</button></div><!\
-             --leptos-view|leptos-tests-ssr.rs-90|close--><!\
-             --hk=_0-1-5-0c|leptos-snake-case-counter-end--></div><!\
-             --leptos-view|leptos-tests-ssr.rs-101|close-->"
-        );
+             id=\"_0-1-5\">+1</button></div>"
+        ));
     });
 }
 
@@ -144,12 +110,10 @@ fn test_classes() {
             <div class="my big" class:a={move || value.get() > 10} class:red=true class:car={move || value.get() > 1}></div>
         };
 
-        assert_eq!(
-            rendered.into_view(cx).render_to_string(cx),
-            "<!--leptos-view|leptos-tests-ssr.rs-142|open--><div id=\"_0-1\" \
-             class=\"my big  red \
-             car\"></div><!--leptos-view|leptos-tests-ssr.rs-142|close-->"
-        );
+        assert!(rendered
+            .into_view(cx)
+            .render_to_string(cx)
+            .contains("<div id=\"_0-1\" class=\"my big  red car\"></div>"));
     });
 }
 
@@ -168,13 +132,10 @@ fn ssr_with_styles() {
             </div>
         };
 
-        assert_eq!(
-            rendered.into_view(cx).render_to_string(cx),
-            "<!--leptos-view|leptos-tests-ssr.rs-164|open--><div id=\"_0-1\" \
-             class=\" myclass\"><button id=\"_0-2\" class=\"btn \
-             myclass\">-1</button></div><!--leptos-view|leptos-tests-ssr.\
-             rs-164|close-->"
-        );
+        assert!(rendered.into_view(cx).render_to_string(cx).contains(
+            "<div id=\"_0-1\" class=\" myclass\"><button id=\"_0-2\" \
+             class=\"btn myclass\">-1</button></div>"
+        ));
     });
 }
 
@@ -190,11 +151,9 @@ fn ssr_option() {
             <option/>
         };
 
-        assert_eq!(
-            rendered.into_view(cx).render_to_string(cx),
-            "<!--leptos-view|leptos-tests-ssr.rs-188|open--><option \
-             id=\"_0-1\"></option><!--leptos-view|leptos-tests-ssr.\
-             rs-188|close-->"
-        );
+        assert!(rendered
+            .into_view(cx)
+            .render_to_string(cx)
+            .contains("<option id=\"_0-1\"></option>"));
     });
 }

leptos/tests/test_examples/suspense-tests/Cargo.toml

@@ -17,7 +17,7 @@ leptos_actix = { path = "../../../../integrations/actix", optional = true }
 leptos_router = { path = "../../../../router", default-features = false }
 log = "0.4"
 simple_logger = "4"
-wasm-bindgen = "0.2"
+wasm-bindgen = "0.2.85"
 serde = "1.0.159"
 tokio = { version = "1.27.0", features = ["time"], optional = true }
 

leptos/tests/test_examples/suspense-tests/src/app.rs

@@ -56,6 +56,7 @@ pub fn App(cx: Scope) -> impl IntoView {
                         <Route path="single" view=|cx| view! { cx, <Single/> }/>
                         <Route path="parallel" view=|cx| view! { cx, <Parallel/> }/>
                         <Route path="inside-component" view=|cx| view! { cx, <InsideComponent/> }/>
+                        <Route path="none" view=|cx| view! { cx, <None/> }/>
                     </Route>
                     // in-order
                     <Route
@@ -71,6 +72,7 @@ pub fn App(cx: Scope) -> impl IntoView {
                         <Route path="single" view=|cx| view! { cx, <Single/> }/>
                         <Route path="parallel" view=|cx| view! { cx, <Parallel/> }/>
                         <Route path="inside-component" view=|cx| view! { cx, <InsideComponent/> }/>
+                        <Route path="none" view=|cx| view! { cx, <None/> }/>
                     </Route>
                     // async
                     <Route
@@ -86,6 +88,7 @@ pub fn App(cx: Scope) -> impl IntoView {
                         <Route path="single" view=|cx| view! { cx, <Single/> }/>
                         <Route path="parallel" view=|cx| view! { cx, <Parallel/> }/>
                         <Route path="inside-component" view=|cx| view! { cx, <InsideComponent/> }/>
+                        <Route path="none" view=|cx| view! { cx, <None/> }/>
                     </Route>
                 </Routes>
             </main>
@@ -101,6 +104,7 @@ fn SecondaryNav(cx: Scope) -> impl IntoView {
             <A href="single">"Single"</A>
             <A href="parallel">"Parallel"</A>
             <A href="inside-component">"Inside Component"</A>
+            <A href="none">"No Resources"</A>
         </nav>
     }
 }
@@ -217,3 +221,25 @@ fn InsideComponentChild(cx: Scope) -> impl IntoView {
         </Suspense>
     }
 }
+
+#[component]
+fn None(cx: Scope) -> impl IntoView {
+    let (count, set_count) = create_signal(cx, 0);
+
+    view! { cx,
+        <div>
+            <Suspense fallback=|| "Loading 1...">
+                <div>"Children inside Suspense should hydrate properly."</div>
+                <button on:click=move |_| set_count.update(|n| *n += 1)>
+                    {count}
+                </button>
+            </Suspense>
+            <p>"Children following " <code>"<Suspense/>"</code> " should hydrate properly."</p>
+            <div>
+                <button on:click=move |_| set_count.update(|n| *n += 1)>
+                    {count}
+                </button>
+            </div>
+        </div>
+    }
+}

leptos_dom/Cargo.toml

@@ -43,6 +43,7 @@ features = [
   "Comment",
   "Document",
   "DomTokenList",
+  "CssStyleDeclaration",
   "Location",
   "Range",
   "Text",
@@ -157,7 +158,7 @@ features = [
 default = []
 web = ["leptos_reactive/csr"]
 ssr = ["leptos_reactive/ssr"]
-nightly = ["leptos_reactive/nightly"]
+stable = ["leptos_reactive/stable"]
 
 [package.metadata.cargo-all-features]
 denylist = ["stable"]

leptos_dom/src/components/dyn_child.rs

@@ -278,7 +278,33 @@ where
                                     let start = child.get_opening_node();
                                     let end = &closing;
 
-                                    unmount_child(&start, end);
+                                    match child {
+                                        View::CoreComponent(
+                                            crate::CoreComponent::DynChild(
+                                                child,
+                                            ),
+                                        ) => {
+                                            let start =
+                                                child.get_opening_node();
+                                            let end = child.closing.node;
+                                            prepare_to_move(
+                                                &child.document_fragment,
+                                                &start,
+                                                &end,
+                                            );
+                                        }
+                                        View::Component(child) => {
+                                            let start =
+                                                child.get_opening_node();
+                                            let end = child.closing.node;
+                                            prepare_to_move(
+                                                &child.document_fragment,
+                                                &start,
+                                                &end,
+                                            );
+                                        }
+                                        _ => unmount_child(&start, end),
+                                    }
                                 }
 
                                 // Mount the new child

leptos_dom/src/components/each.rs

@@ -168,7 +168,7 @@ pub(crate) struct EachItem {
     #[cfg(all(target_arch = "wasm32", feature = "web"))]
     document_fragment: Option<web_sys::DocumentFragment>,
     #[cfg(debug_assertions)]
-    opening: Comment,
+    opening: Option<Comment>,
     pub(crate) child: View,
     closing: Option<Comment>,
     #[cfg(not(all(target_arch = "wasm32", feature = "web")))]
@@ -201,7 +201,11 @@ impl EachItem {
                 None
             },
             #[cfg(debug_assertions)]
-            Comment::new(Cow::Borrowed("<EachItem>"), &id, false),
+            if needs_closing {
+                Some(Comment::new(Cow::Borrowed("<EachItem>"), &id, false))
+            } else {
+                None
+            },
         );
 
         #[cfg(all(target_arch = "wasm32", feature = "web"))]
@@ -215,7 +219,10 @@ impl EachItem {
             if !HydrationCtx::is_hydrating() {
                 #[cfg(debug_assertions)]
                 fragment
-                    .append_with_node_2(&markers.1.node, &closing.node)
+                    .append_with_node_2(
+                        &markers.1.as_ref().unwrap().node,
+                        &closing.node,
+                    )
                     .unwrap();
                 fragment.append_with_node_1(&closing.node).unwrap();
             }
@@ -260,10 +267,6 @@ impl Mountable for EachItem {
 
     #[inline(always)]
     fn get_opening_node(&self) -> web_sys::Node {
-        #[cfg(debug_assertions)]
-        return self.opening.node.clone();
-
-        #[cfg(not(debug_assertions))]
         return self.child.get_opening_node();
     }
 
@@ -673,10 +676,20 @@ fn apply_cmds<T, EF, N>(
     // 4. Add
     if cmds.clear {
         cmds.removed.clear();
+        crate::log!("clearing list");
+        web_sys::console::log_2(
+            &wasm_bindgen::JsValue::from_str("open"),
+            opening,
+        );
+        web_sys::console::log_2(
+            &wasm_bindgen::JsValue::from_str("closing"),
+            closing,
+        );
 
         if opening.previous_sibling().is_none()
             && closing.next_sibling().is_none()
         {
+            crate::log!("no siblings");
             let parent = closing
                 .parent_node()
                 .expect("could not get closing node")
@@ -689,6 +702,7 @@ fn apply_cmds<T, EF, N>(
             #[cfg(not(debug_assertions))]
             parent.append_with_node_1(closing).unwrap();
         } else {
+            crate::log!("yes siblings");
             range.set_start_before(opening).unwrap();
             range.set_end_before(closing).unwrap();
 

leptos_dom/src/events/typed.rs

@@ -29,7 +29,7 @@ pub trait EventDescriptor: Clone {
     }
 }
 
-/// Overrides the [`EventDescriptor::bubbles`] method to always return
+/// Overrides the [`EventDescriptor::BUBBLES`] value to always return
 /// `false`, which forces the event to not be globally delegated.
 #[derive(Clone)]
 #[allow(non_camel_case_types)]

leptos_dom/src/helpers.rs

@@ -332,32 +332,8 @@ impl IntervalHandle {
   any(debug_assertions, features = "ssr"),
   instrument(level = "trace", skip_all, fields(duration = ?duration))
 )]
-#[deprecated = "use set_interval_with_handle() instead. In the future, \
-                set_interval() will no longer return a handle, for consistency \
-                with other timer helper functions."]
-pub fn set_interval(
-    cb: impl Fn() + 'static,
-    duration: Duration,
-) -> Result<IntervalHandle, JsValue> {
-    cfg_if::cfg_if! {
-      if #[cfg(debug_assertions)] {
-        let span = ::tracing::Span::current();
-        let cb = move || {
-          leptos_reactive::SpecialNonReactiveZone::enter();
-          let _guard = span.enter();
-          cb();
-          leptos_reactive::SpecialNonReactiveZone::exit();
-        };
-      }
-    }
-
-    let cb = Closure::wrap(Box::new(cb) as Box<dyn Fn()>).into_js_value();
-    let handle = window()
-        .set_interval_with_callback_and_timeout_and_arguments_0(
-            cb.as_ref().unchecked_ref(),
-            duration.as_millis().try_into().unwrap_throw(),
-        )?;
-    Ok(IntervalHandle(handle))
+pub fn set_interval(cb: impl Fn() + 'static, duration: Duration) {
+    _ = set_interval_with_handle(cb, duration);
 }
 
 /// Repeatedly calls the given function, with a delay of the given duration between calls,
@@ -402,24 +378,6 @@ pub fn set_interval_with_handle(
     si(Box::new(cb), duration)
 }
 
-/// Adds an event listener to the `Window`.
-#[cfg_attr(
-  any(debug_assertions, features = "ssr"),
-  instrument(level = "trace", skip_all, fields(event_name = %event_name))
-)]
-#[inline(always)]
-#[deprecated = "In the next release, `window_event_listener` will become \
-                typed. You can switch now to `window_event_listener_untyped` \
-                for the current behavior or use \
-                `window_event_listener_with_precast`, which will become the \
-                new`window_event_listener`."]
-pub fn window_event_listener(
-    event_name: &str,
-    cb: impl Fn(web_sys::Event) + 'static,
-) {
-    window_event_listener_untyped(event_name, cb)
-}
-
 /// Adds an event listener to the `Window`, typed as a generic `Event`.
 #[cfg_attr(
   debug_assertions,
@@ -456,8 +414,21 @@ pub fn window_event_listener_untyped(
     }
 }
 
-/// Creates a window event listener where the event in the callback is already appropriately cast.
-pub fn window_event_listener_with_precast<E: ev::EventDescriptor + 'static>(
+/// Creates a window event listener from a typed event.
+/// ```
+/// use leptos::{leptos_dom::helpers::window_event_listener, *};
+///
+/// #[component]
+/// fn App(cx: Scope) -> impl IntoView {
+///     window_event_listener(ev::keypress, |ev| {
+///         // ev is typed as KeyboardEvent automatically,
+///         // so .code() can be called
+///         let code = ev.code();
+///         log!("code = {code:?}");
+///     })
+/// }
+/// ```
+pub fn window_event_listener<E: ev::EventDescriptor + 'static>(
     event: E,
     cb: impl Fn(E::EventType) + 'static,
 ) where

leptos_dom/src/html.rs

@@ -63,7 +63,7 @@ cfg_if! {
 use crate::{
     ev::EventDescriptor,
     hydration::HydrationCtx,
-    macro_helpers::{IntoAttribute, IntoClass, IntoProperty},
+    macro_helpers::{IntoAttribute, IntoClass, IntoProperty, IntoStyle},
     Element, Fragment, IntoView, NodeRef, Text, View,
 };
 use leptos_reactive::Scope;
@@ -382,26 +382,6 @@ impl<El: ElementDescriptor + 'static> HtmlElement<El> {
         }
     }
 
-    #[doc(hidden)]
-    #[cfg(not(all(target_arch = "wasm32", feature = "web")))]
-    #[deprecated = "Use HtmlElement::from_chunks() instead."]
-    pub fn from_html(
-        cx: Scope,
-        element: El,
-        html: impl Into<Cow<'static, str>>,
-    ) -> Self {
-        Self {
-            cx,
-            attrs: smallvec![],
-            children: ElementChildren::Chunks(vec![StringOrView::String(
-                html.into(),
-            )]),
-            element,
-            #[cfg(debug_assertions)]
-            view_marker: None,
-        }
-    }
-
     #[doc(hidden)]
     #[cfg(not(all(target_arch = "wasm32", feature = "web")))]
     pub fn from_chunks(
@@ -824,6 +804,69 @@ impl<El: ElementDescriptor + 'static> HtmlElement<El> {
         }
     }
 
+    /// Sets a style on an element.
+    ///
+    /// **Note**: In the builder syntax, this will be overwritten by the `style`
+    /// attribute if you use `.attr("style", /* */)`. In the `view` macro, they
+    /// are automatically re-ordered so that this over-writing does not happen.
+    #[track_caller]
+    pub fn style(
+        self,
+        name: impl Into<Cow<'static, str>>,
+        style: impl IntoStyle,
+    ) -> Self {
+        let name = name.into();
+
+        #[cfg(all(target_arch = "wasm32", feature = "web"))]
+        {
+            let el = self.element.as_ref();
+            let value = style.into_style(self.cx);
+            style_helper(el, name, value);
+
+            self
+        }
+
+        #[cfg(not(all(target_arch = "wasm32", feature = "web")))]
+        {
+            use crate::macro_helpers::Style;
+
+            let mut this = self;
+
+            let style = style.into_style(this.cx);
+
+            let include = match style {
+                Style::Value(value) => Some(value),
+                Style::Option(value) => value,
+                Style::Fn(_, f) => {
+                    let mut value = f();
+                    while let Style::Fn(_, f) = value {
+                        value = f();
+                    }
+                    match value {
+                        Style::Value(value) => Some(value),
+                        Style::Option(value) => value,
+                        _ => unreachable!(),
+                    }
+                }
+            };
+
+            if let Some(style_value) = include {
+                if let Some((_, ref mut value)) =
+                    this.attrs.iter_mut().find(|(name, _)| name == "style")
+                {
+                    *value = format!("{value} {name}: {style_value};").into();
+                } else {
+                    this.attrs.push((
+                        "style".into(),
+                        format!("{name}: {style_value};").into(),
+                    ));
+                }
+            }
+
+            this
+        }
+    }
+
     /// Sets a property on an element.
     #[track_caller]
     pub fn prop(

leptos_dom/src/lib.rs

@@ -1,7 +1,7 @@
 #![deny(missing_docs)]
 #![forbid(unsafe_code)]
-#![cfg_attr(feature = "nightly", feature(fn_traits))]
-#![cfg_attr(feature = "nightly", feature(unboxed_closures))]
+#![cfg_attr(not(feature = "stable"), feature(fn_traits))]
+#![cfg_attr(not(feature = "stable"), feature(unboxed_closures))]
 
 //! The DOM implementation for `leptos`.
 
@@ -1125,7 +1125,7 @@ viewable_primitive![
 ];
 
 cfg_if! {
-  if #[cfg(feature = "nightly")] {
+  if #[cfg(not(feature = "stable"))] {
     viewable_primitive! {
         std::backtrace::Backtrace
     }

leptos_dom/src/macro_helpers/into_style.rs

@@ -0,0 +1,209 @@
+use leptos_reactive::Scope;
+use std::{borrow::Cow, rc::Rc};
+
+/// todo docs
+#[derive(Clone)]
+pub enum Style {
+    /// A plain string value.
+    Value(Cow<'static, str>),
+    /// An optional string value, which sets the property to the value if `Some` and removes the property if `None`.
+    Option(Option<Cow<'static, str>>),
+    /// A (presumably reactive) function, which will be run inside an effect to update the style.
+    Fn(Scope, Rc<dyn Fn() -> Style>),
+}
+
+impl PartialEq for Style {
+    fn eq(&self, other: &Self) -> bool {
+        match (self, other) {
+            (Self::Value(l0), Self::Value(r0)) => l0 == r0,
+            (Self::Fn(_, _), Self::Fn(_, _)) => false,
+            (Self::Option(l0), Self::Option(r0)) => l0 == r0,
+            _ => false,
+        }
+    }
+}
+
+impl std::fmt::Debug for Style {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        match self {
+            Self::Value(arg0) => f.debug_tuple("Value").field(arg0).finish(),
+            Self::Fn(_, _) => f.debug_tuple("Fn").finish(),
+            Self::Option(arg0) => f.debug_tuple("Option").field(arg0).finish(),
+        }
+    }
+}
+
+/// Converts some type into a [Style].
+pub trait IntoStyle {
+    /// Converts the object into a [Style].
+    fn into_style(self, cx: Scope) -> Style;
+}
+
+impl IntoStyle for &'static str {
+    #[inline(always)]
+    fn into_style(self, _cx: Scope) -> Style {
+        Style::Value(self.into())
+    }
+}
+
+impl IntoStyle for String {
+    #[inline(always)]
+    fn into_style(self, _cx: Scope) -> Style {
+        Style::Value(self.into())
+    }
+}
+
+impl IntoStyle for Option<&'static str> {
+    #[inline(always)]
+    fn into_style(self, _cx: Scope) -> Style {
+        Style::Option(self.map(Cow::Borrowed))
+    }
+}
+
+impl IntoStyle for Option<String> {
+    #[inline(always)]
+    fn into_style(self, _cx: Scope) -> Style {
+        Style::Option(self.map(Cow::Owned))
+    }
+}
+
+impl<T, U> IntoStyle for T
+where
+    T: Fn() -> U + 'static,
+    U: IntoStyle,
+{
+    #[inline(always)]
+    fn into_style(self, cx: Scope) -> Style {
+        let modified_fn = Rc::new(move || (self)().into_style(cx));
+        Style::Fn(cx, modified_fn)
+    }
+}
+
+impl Style {
+    /// Converts the style to its HTML value at that moment so it can be rendered on the server.
+    pub fn as_value_string(
+        &self,
+        style_name: &'static str,
+    ) -> Option<Cow<'static, str>> {
+        match self {
+            Style::Value(value) => {
+                Some(format!("{style_name}: {value};").into())
+            }
+            Style::Option(value) => value
+                .as_ref()
+                .map(|value| format!("{style_name}: {value};").into()),
+            Style::Fn(_, f) => {
+                let mut value = f();
+                while let Style::Fn(_, f) = value {
+                    value = f();
+                }
+                value.as_value_string(style_name)
+            }
+        }
+    }
+}
+
+impl<T: IntoStyle> IntoStyle for (Scope, T) {
+    #[inline(always)]
+    fn into_style(self, _: Scope) -> Style {
+        self.1.into_style(self.0)
+    }
+}
+
+#[cfg(all(target_arch = "wasm32", feature = "web"))]
+#[doc(hidden)]
+#[inline(never)]
+pub fn style_helper(
+    el: &web_sys::Element,
+    name: Cow<'static, str>,
+    value: Style,
+) {
+    use leptos_reactive::create_render_effect;
+    use wasm_bindgen::JsCast;
+
+    let el = el.unchecked_ref::<web_sys::HtmlElement>();
+    let style_list = el.style();
+    match value {
+        Style::Fn(cx, f) => {
+            create_render_effect(cx, move |old| {
+                let mut new = f();
+                while let Style::Fn(_, f) = new {
+                    new = f();
+                }
+                let new = match new {
+                    Style::Value(value) => Some(value),
+                    Style::Option(value) => value,
+                    _ => unreachable!(),
+                };
+                if old.as_ref() != Some(&new) {
+                    style_expression(&style_list, &name, new.as_ref(), true)
+                }
+                new
+            });
+        }
+        Style::Value(value) => {
+            style_expression(&style_list, &name, Some(&value), false)
+        }
+        Style::Option(value) => {
+            style_expression(&style_list, &name, value.as_ref(), false)
+        }
+    };
+}
+
+#[cfg(all(target_arch = "wasm32", feature = "web"))]
+#[inline(never)]
+pub(crate) fn style_expression(
+    style_list: &web_sys::CssStyleDeclaration,
+    style_name: &str,
+    value: Option<&Cow<'static, str>>,
+    force: bool,
+) {
+    use crate::HydrationCtx;
+
+    if force || !HydrationCtx::is_hydrating() {
+        let style_name = wasm_bindgen::intern(style_name);
+
+        if let Some(value) = value {
+            if let Err(e) = style_list.set_property(style_name, &value) {
+                crate::error!("[HtmlElement::style()] {e:?}");
+            }
+        } else {
+            if let Err(e) = style_list.remove_property(style_name) {
+                crate::error!("[HtmlElement::style()] {e:?}");
+            }
+        }
+    }
+}
+
+macro_rules! style_type {
+    ($style_type:ty) => {
+        impl IntoStyle for $style_type {
+            fn into_style(self, _: Scope) -> Style {
+                Style::Value(self.to_string().into())
+            }
+        }
+
+        impl IntoStyle for Option<$style_type> {
+            fn into_style(self, _: Scope) -> Style {
+                Style::Option(self.map(|n| n.to_string().into()))
+            }
+        }
+    };
+}
+
+style_type!(&String);
+style_type!(usize);
+style_type!(u8);
+style_type!(u16);
+style_type!(u32);
+style_type!(u64);
+style_type!(u128);
+style_type!(isize);
+style_type!(i8);
+style_type!(i16);
+style_type!(i32);
+style_type!(i64);
+style_type!(i128);
+style_type!(f32);
+style_type!(f64);
+style_type!(char);

leptos_dom/src/macro_helpers/mod.rs

@@ -1,6 +1,8 @@
 mod into_attribute;
 mod into_class;
 mod into_property;
+mod into_style;
 pub use into_attribute::*;
 pub use into_class::*;
 pub use into_property::*;
+pub use into_style::*;

leptos_dom/src/node_ref.rs

@@ -79,12 +79,6 @@ pub fn create_node_ref<T: ElementDescriptor + 'static>(
 }
 
 impl<T: ElementDescriptor + 'static> NodeRef<T> {
-    /// Creates an empty reference.
-    #[deprecated = "Use `create_node_ref` instead of `NodeRef::new()`."]
-    pub fn new(cx: Scope) -> Self {
-        Self(create_rw_signal(cx, None))
-    }
-
     /// Gets the element that is currently stored in the reference.
     ///
     /// This tracks reactively, so that node references can be used in effects.
@@ -160,7 +154,7 @@ impl<T: ElementDescriptor> Clone for NodeRef<T> {
 impl<T: ElementDescriptor + 'static> Copy for NodeRef<T> {}
 
 cfg_if::cfg_if! {
-    if #[cfg(feature = "nightly")] {
+    if #[cfg(not(feature = "stable"))] {
         impl<T: Clone + ElementDescriptor + 'static> FnOnce<()> for NodeRef<T> {
             type Output = Option<HtmlElement<T>>;
 

leptos_dom/src/ssr.rs

@@ -146,6 +146,44 @@ pub fn render_to_stream_with_prefix_undisposed_with_context(
     view: impl FnOnce(Scope) -> View + 'static,
     prefix: impl FnOnce(Scope) -> Cow<'static, str> + 'static,
     additional_context: impl FnOnce(Scope) + 'static,
+) -> (impl Stream<Item = String>, RuntimeId, ScopeId) {
+    render_to_stream_with_prefix_undisposed_with_context_and_block_replacement(
+        view,
+        prefix,
+        additional_context,
+        false,
+    )
+}
+
+/// Renders a function to a stream of HTML strings and returns the [Scope] and [RuntimeId] that were created, so
+/// they can be disposed when appropriate. After the `view` runs, the `prefix` will run with
+/// the same scope. This can be used to generate additional HTML that has access to the same `Scope`.
+///
+/// If `replace_blocks` is true, this will wait for any fragments with blocking resources and
+/// actually replace them in the initial HTML. This is slower to render (as it requires walking
+/// back over the HTML for string replacement) but has the advantage of never including those fallbacks
+/// in the HTML.
+///
+/// This renders:
+/// 1) the prefix
+/// 2) the application shell
+///   a) HTML for everything that is not under a `<Suspense/>`,
+///   b) the `fallback` for any `<Suspense/>` component that is not already resolved, and
+///   c) JavaScript necessary to receive streaming [Resource](leptos_reactive::Resource) data.
+/// 3) streaming [Resource](leptos_reactive::Resource) data. Resources begin loading on the
+///    server and are sent down to the browser to resolve. On the browser, if the app sees that
+///    it is waiting for a resource to resolve from the server, it doesn't run it initially.
+/// 4) HTML fragments to replace each `<Suspense/>` fallback with its actual data as the resources
+///    read under that `<Suspense/>` resolve.
+#[cfg_attr(
+    any(debug_assertions, feature = "ssr"),
+    instrument(level = "info", skip_all,)
+)]
+pub fn render_to_stream_with_prefix_undisposed_with_context_and_block_replacement(
+    view: impl FnOnce(Scope) -> View + 'static,
+    prefix: impl FnOnce(Scope) -> Cow<'static, str> + 'static,
+    additional_context: impl FnOnce(Scope) + 'static,
+    replace_blocks: bool,
 ) -> (impl Stream<Item = String>, RuntimeId, ScopeId) {
     HydrationCtx::reset_id();
 
@@ -177,7 +215,7 @@ pub fn render_to_stream_with_prefix_undisposed_with_context(
     });
     let cx = Scope { runtime, id: scope };
 
-    let blocking_fragments = FuturesUnordered::new();
+    let mut blocking_fragments = FuturesUnordered::new();
     let fragments = FuturesUnordered::new();
 
     for (fragment_id, data) in pending_fragments {
@@ -198,24 +236,46 @@ pub fn render_to_stream_with_prefix_undisposed_with_context(
 
     // HTML for the view function and script to store resources
     let stream = futures::stream::once(async move {
-        let mut blocking = String::new();
-        let mut blocking_fragments = fragments_to_chunks(blocking_fragments);
-        while let Some(fragment) = blocking_fragments.next().await {
-            blocking.push_str(&fragment);
+        let resolvers = format!(
+            "<script>__LEPTOS_PENDING_RESOURCES = \
+             {pending_resources};__LEPTOS_RESOLVED_RESOURCES = new \
+             Map();__LEPTOS_RESOURCE_RESOLVERS = new Map();</script>"
+        );
+
+        if replace_blocks {
+            let mut blocks = Vec::with_capacity(blocking_fragments.len());
+            while let Some((blocked_id, blocked_fragment)) =
+                blocking_fragments.next().await
+            {
+                blocks.push((blocked_id, blocked_fragment));
+            }
+
+            let prefix = prefix(cx);
+
+            let mut shell = shell;
+
+            for (blocked_id, blocked_fragment) in blocks {
+                let open = format!("<!--suspense-open-{blocked_id}-->");
+                let close = format!("<!--suspense-close-{blocked_id}-->");
+                let (first, rest) = shell.split_once(&open).unwrap_or_default();
+                let (_fallback, rest) =
+                    rest.split_once(&close).unwrap_or_default();
+
+                shell = format!("{first}{blocked_fragment}{rest}").into();
+            }
+
+            format!("{prefix}{shell}{resolvers}")
+        } else {
+            let mut blocking = String::new();
+            let mut blocking_fragments =
+                fragments_to_chunks(blocking_fragments);
+
+            while let Some(fragment) = blocking_fragments.next().await {
+                blocking.push_str(&fragment);
+            }
+            let prefix = prefix(cx);
+            format!("{prefix}{shell}{resolvers}{blocking}")
         }
-        let prefix = prefix(cx);
-        format!(
-            r#"
-                {prefix}
-                {shell}
-                <script>
-                    __LEPTOS_PENDING_RESOURCES = {pending_resources};
-                    __LEPTOS_RESOLVED_RESOURCES = new Map();
-                    __LEPTOS_RESOURCE_RESOLVERS = new Map();
-                </script>
-                {blocking}
-            "#
-        )
     })
     // TODO these should be combined again in a way that chains them appropriately
     // such that individual resources can resolve before all fragments are done
@@ -229,6 +289,7 @@ pub fn render_to_stream_with_prefix_undisposed_with_context(
 
     (stream, runtime, scope)
 }
+
 #[cfg_attr(
     any(debug_assertions, feature = "ssr"),
     instrument(level = "trace", skip_all,)

leptos_dom/src/ssr_in_order.rs

@@ -240,13 +240,20 @@ impl View {
         dont_escape_text: bool,
     ) {
         match self {
-            View::Suspense(id, _) => {
+            View::Suspense(id, view) => {
                 let id = id.to_string();
                 if let Some(data) = cx.take_pending_fragment(&id) {
                     chunks.push_back(StreamChunk::Async {
                         chunks: data.in_order,
                         should_block: data.should_block,
                     });
+                } else {
+                    // if not registered, means it was already resolved
+                    View::CoreComponent(view).into_stream_chunks_helper(
+                        cx,
+                        chunks,
+                        dont_escape_text,
+                    );
                 }
             }
             View::Text(node) => {

leptos_hot_reload/Cargo.toml

@@ -11,7 +11,7 @@ readme = "../README.md"
 [dependencies]
 anyhow = "1"
 serde = { version = "1", features = ["derive"] }
-syn = { version = "1", features = [
+syn = { version = "2", features = [
 	"full",
 	"parsing",
 	"extra-traits",
@@ -19,7 +19,7 @@ syn = { version = "1", features = [
 	"printing",
 ] }
 quote = "1"
-syn-rsx = "0.9"
+rstml = "0.10.6"
 proc-macro2 = { version = "1", features = ["span-locations", "nightly"] }
 parking_lot = "0.12"
 walkdir = "2"

leptos_hot_reload/src/lib.rs

@@ -76,7 +76,7 @@ impl ViewMacros {
             tokens.next(); // ,
                            // TODO handle class = ...
             let rsx =
-                syn_rsx::parse2(tokens.collect::<proc_macro2::TokenStream>())?;
+                rstml::parse2(tokens.collect::<proc_macro2::TokenStream>())?;
             let template = LNode::parse_view(rsx)?;
             views.push(MacroInvocation { id, template })
         }

leptos_hot_reload/src/node.rs

@@ -1,8 +1,8 @@
-use crate::parsing::{is_component_node, value_to_string};
+use crate::parsing::is_component_node;
 use anyhow::Result;
-use quote::quote;
+use quote::ToTokens;
+use rstml::node::{Node, NodeAttribute};
 use serde::{Deserialize, Serialize};
-use syn_rsx::Node;
 
 // A lightweight virtual DOM structure we can use to hold
 // the state of a Leptos view macro template. This is because
@@ -58,36 +58,30 @@ impl LNode {
                 }
             }
             Node::Text(text) => {
-                if let Some(value) = value_to_string(&text.value) {
-                    views.push(LNode::Text(value));
-                } else {
-                    let value = text.value.as_ref();
-                    let code = quote! { #value };
-                    let code = code.to_string();
-                    views.push(LNode::DynChild(code));
-                }
+                views.push(LNode::Text(text.value_string()));
             }
             Node::Block(block) => {
-                let value = block.value.as_ref();
-                let code = quote! { #value };
+                let code = block.into_token_stream();
                 let code = code.to_string();
                 views.push(LNode::DynChild(code));
             }
             Node::Element(el) => {
                 if is_component_node(&el) {
+                    let name = el.name().to_string();
                     let mut children = Vec::new();
                     for child in el.children {
                         LNode::parse_node(child, &mut children)?;
                     }
                     views.push(LNode::Component {
-                        name: el.name.to_string(),
+                        name: name,
                         props: el
+                            .open_tag
                             .attributes
                             .into_iter()
                             .filter_map(|attr| match attr {
-                                Node::Attribute(attr) => Some((
+                                NodeAttribute::Attribute(attr) => Some((
                                     attr.key.to_string(),
-                                    format!("{:#?}", attr.value),
+                                    format!("{:#?}", attr.value()),
                                 )),
                                 _ => None,
                             })
@@ -95,15 +89,13 @@ impl LNode {
                         children,
                     });
                 } else {
-                    let name = el.name.to_string();
+                    let name = el.name().to_string();
                     let mut attrs = Vec::new();
 
-                    for attr in el.attributes {
-                        if let Node::Attribute(attr) = attr {
+                    for attr in el.open_tag.attributes {
+                        if let NodeAttribute::Attribute(attr) = attr {
                             let name = attr.key.to_string();
-                            if let Some(value) =
-                                attr.value.as_ref().and_then(value_to_string)
-                            {
+                            if let Some(value) = attr.value_literal_string() {
                                 attrs.push((
                                     name,
                                     LAttributeValue::Static(value),

leptos_hot_reload/src/parsing.rs

@@ -1,7 +1,37 @@
-use syn_rsx::{NodeElement, NodeValueExpr};
+use rstml::node::NodeElement;
 
-pub fn value_to_string(value: &NodeValueExpr) -> Option<String> {
-    match &value.as_ref() {
+///
+/// Converts `syn::Block` to simple expression
+///
+/// For example:
+/// ```no_build
+/// // "string literal" in
+/// {"string literal"}
+/// // number literal
+/// {0x12}
+/// // boolean literal
+/// {true}
+/// // variable
+/// {path::x}
+/// ```
+pub fn block_to_primitive_expression(block: &syn::Block) -> Option<&syn::Expr> {
+    // its empty block, or block with multi lines
+    if block.stmts.len() != 1 {
+        return None;
+    }
+    match &block.stmts[0] {
+        syn::Stmt::Expr(e, None) => return Some(&e),
+        _ => {}
+    }
+    None
+}
+
+/// Converts simple literals to its string representation.
+///
+/// This function doesn't convert literal wrapped inside block
+/// like: `{"string"}`.
+pub fn value_to_string(value: &syn::Expr) -> Option<String> {
+    match &value {
         syn::Expr::Lit(lit) => match &lit.lit {
             syn::Lit::Str(s) => Some(s.value()),
             syn::Lit::Char(c) => Some(c.value().to_string()),
@@ -14,7 +44,7 @@ pub fn value_to_string(value: &NodeValueExpr) -> Option<String> {
 }
 
 pub fn is_component_node(node: &NodeElement) -> bool {
-    node.name
+    node.name()
         .to_string()
         .starts_with(|c: char| c.is_ascii_uppercase())
 }

leptos_macro/Cargo.toml

@@ -12,16 +12,16 @@ readme = "../README.md"
 proc-macro = true
 
 [dependencies]
-attribute-derive = { version = "0.5", features = ["syn-full"] }
+attribute-derive = { version = "0.6", features = ["syn-full"] }
 cfg-if = "1"
 html-escape = "0.2"
 itertools = "0.10"
-prettyplease = "0.1"
+prettyplease = "0.2.4"
 proc-macro-error = "1"
 proc-macro2 = "1"
 quote = "1"
-syn = { version = "1", features = ["full"] }
-syn-rsx = "0.9"
+syn = { version = "2", features = ["full"] }
+rstml = "0.10.6"
 leptos_hot_reload = { workspace = true }
 server_fn_macro = { workspace = true }
 convert_case = "0.6.0"
@@ -39,7 +39,7 @@ default = ["ssr"]
 csr = []
 hydrate = []
 ssr = []
-nightly = ["server_fn_macro/nightly"]
+stable = ["server_fn_macro/stable"]
 tracing = []
 
 [package.metadata.cargo-all-features]

leptos_macro/src/component.rs

@@ -4,15 +4,15 @@ use convert_case::{
     Casing,
 };
 use itertools::Itertools;
+use leptos_hot_reload::parsing::value_to_string;
 use proc_macro2::{Ident, Span, TokenStream};
 use quote::{format_ident, quote_spanned, ToTokens, TokenStreamExt};
 use syn::{
     parse::Parse, parse_quote, spanned::Spanned,
     AngleBracketedGenericArguments, Attribute, FnArg, GenericArgument, Item,
-    ItemFn, Lit, LitStr, Meta, MetaNameValue, Pat, PatIdent, Path,
-    PathArguments, ReturnType, Stmt, Type, TypePath, Visibility,
+    ItemFn, LitStr, Meta, Pat, PatIdent, Path, PathArguments, ReturnType, Stmt,
+    Type, TypePath, Visibility,
 };
-
 pub struct Model {
     is_transparent: bool,
     docs: Docs,
@@ -56,14 +56,17 @@ impl Parse for Model {
 
         // We need to remove the `#[doc = ""]` and `#[builder(_)]`
         // attrs from the function signature
-        drain_filter(&mut item.attrs, |attr| {
-            attr.path == parse_quote!(doc) || attr.path == parse_quote!(prop)
+        drain_filter(&mut item.attrs, |attr| match &attr.meta {
+            Meta::NameValue(attr) => attr.path == parse_quote!(doc),
+            Meta::List(attr) => attr.path == parse_quote!(prop),
+            _ => false,
         });
         item.sig.inputs.iter_mut().for_each(|arg| {
             if let FnArg::Typed(ty) = arg {
-                drain_filter(&mut ty.attrs, |attr| {
-                    attr.path == parse_quote!(doc)
-                        || attr.path == parse_quote!(prop)
+                drain_filter(&mut ty.attrs, |attr| match &attr.meta {
+                    Meta::NameValue(attr) => attr.path == parse_quote!(doc),
+                    Meta::List(attr) => attr.path == parse_quote!(prop),
+                    _ => false,
                 });
             }
         });
@@ -400,12 +403,20 @@ impl Docs {
 
         let mut attrs = attrs
             .iter()
-            .filter_map(|attr| attr.path.is_ident("doc").then(|| {
-                let Ok(Meta::NameValue(MetaNameValue { lit: Lit::Str(doc), .. })) = attr.parse_meta() else {
-                    abort!(attr, "expected doc comment to be string literal");
+            .filter_map(|attr| {
+                let Meta::NameValue(attr ) = &attr.meta else {
+                    return None
                 };
-                (doc.value(), doc.span())
-            }))
+                if !attr.path.is_ident("doc") {
+                    return None
+                }
+
+                let Some(val) = value_to_string(&attr.value) else {
+                    abort!(attr, "expected string literal in value of doc comment");
+                };
+
+                Some((val, attr.path.span()))
+            })
             .flat_map(map)
             .collect_vec();
 

leptos_macro/src/lib.rs

@@ -1,4 +1,4 @@
-#![cfg_attr(feature = "nightly", feature(proc_macro_span))]
+#![cfg_attr(not(feature = "stable"), feature(proc_macro_span))]
 #![forbid(unsafe_code)]
 
 #[macro_use]
@@ -7,9 +7,9 @@ extern crate proc_macro_error;
 use proc_macro::TokenStream;
 use proc_macro2::{Span, TokenTree};
 use quote::ToTokens;
+use rstml::{node::KeyedAttribute, parse};
 use server_fn_macro::{server_macro_impl, ServerContext};
 use syn::parse_macro_input;
-use syn_rsx::{parse, NodeAttribute};
 
 #[derive(Copy, Clone, Debug, PartialEq, Eq)]
 pub(crate) enum Mode {
@@ -201,7 +201,29 @@ mod template;
 /// # });
 /// ```
 ///
-/// 8. You can use the `node_ref` or `_ref` attribute to store a reference to its DOM element in a
+/// 8. Individual styles can also be set with `style:` or `style=("property-name", value)` syntax.
+/// ```rust
+/// # use leptos::*;
+/// # run_scope(create_runtime(), |cx| {
+/// # if !cfg!(any(feature = "csr", feature = "hydrate")) {
+/// let (x, set_x) = create_signal(cx, 0);
+/// let (y, set_y) = create_signal(cx, 0);
+/// view! { cx,
+///   <div
+///     style="position: absolute"
+///     style:left=move || format!("{}px", x())
+///     style:top=move || format!("{}px", y())
+///     style=("background-color", move || format!("rgb({}, {}, 100)", x(), y()))
+///   >
+///     "Moves when coordinates change"
+///   </div>
+/// }
+/// # ;
+/// # }
+/// # });
+/// ```
+///
+/// 9. You can use the `node_ref` or `_ref` attribute to store a reference to its DOM element in a
 ///    [NodeRef](https://docs.rs/leptos/latest/leptos/struct.NodeRef.html) to use later.
 /// ```rust
 /// # use leptos::*;
@@ -218,7 +240,7 @@ mod template;
 /// # });
 /// ```
 ///
-/// 9. You can add the same class to every element in the view by passing in a special
+/// 10. You can add the same class to every element in the view by passing in a special
 ///    `class = {/* ... */},` argument after `cx, `. This is useful for injecting a class
 ///    provided by a scoped styling library.
 /// ```rust
@@ -236,7 +258,7 @@ mod template;
 /// # });
 /// ```
 ///
-/// 10. You can set any HTML element’s `innerHTML` with the `inner_html` attribute on an
+/// 11. You can set any HTML element’s `innerHTML` with the `inner_html` attribute on an
 ///     element. Be careful: this HTML will not be escaped, so you should ensure that it
 ///     only contains trusted input.
 /// ```rust
@@ -329,16 +351,22 @@ pub fn view(tokens: TokenStream) -> TokenStream {
                     .chain(tokens)
                     .collect()
             };
-
-            match parse(tokens.into()) {
-                Ok(nodes) => render_view(
-                    &proc_macro2::Ident::new(&cx.to_string(), cx.span()),
-                    &nodes,
-                    Mode::default(),
-                    global_class.as_ref(),
-                    normalized_call_site(proc_macro::Span::call_site()),
-                ),
-                Err(error) => error.to_compile_error(),
+            let config = rstml::ParserConfig::default().recover_block(true);
+            let parser = rstml::Parser::new(config);
+            let (nodes, errors) = parser.parse_recoverable(tokens).split_vec();
+            let errors = errors.into_iter().map(|e| e.emit_as_expr_tokens());
+            let nodes_output = render_view(
+                &cx,
+                &nodes,
+                Mode::default(),
+                global_class.as_ref(),
+                normalized_call_site(proc_macro::Span::call_site()),
+            );
+            quote! {
+                {
+                    #(#errors;)*
+                    #nodes_output
+                }
             }
             .into()
         }
@@ -353,7 +381,7 @@ pub fn view(tokens: TokenStream) -> TokenStream {
 
 fn normalized_call_site(site: proc_macro::Span) -> Option<String> {
     cfg_if::cfg_if! {
-        if #[cfg(all(debug_assertions, feature = "nightly"))] {
+        if #[cfg(all(debug_assertions, not(feature = "stable")))] {
             Some(leptos_hot_reload::span_to_stable_id(
                 site.source_file().path(),
                 site.into()
@@ -650,7 +678,7 @@ pub fn component(args: proc_macro::TokenStream, s: TokenStream) -> TokenStream {
 /// Annotates a struct so that it can be used with your Component as a `slot`.
 ///
 /// The `#[slot]` macro allows you to annotate plain Rust struct as component slots and use them
-/// within your Leptos [component](crate::component!) properties. The struct can contain any number
+/// within your Leptos [`component`](macro@crate::component) properties. The struct can contain any number
 /// of fields. When you use the component somewhere else, the names of the slot fields are the
 /// names of the properties you use in the [view](crate::view!) macro.
 ///
@@ -852,9 +880,9 @@ pub fn params_derive(
     }
 }
 
-pub(crate) fn attribute_value(attr: &NodeAttribute) -> &syn::Expr {
-    match &attr.value {
-        Some(value) => value.as_ref(),
+pub(crate) fn attribute_value(attr: &KeyedAttribute) -> &syn::Expr {
+    match &attr.possible_value {
+        Some(value) => &value.value,
         None => abort!(attr.key, "attribute should have value"),
     }
 }

leptos_macro/src/slot.rs

@@ -5,7 +5,8 @@ use attribute_derive::Attribute as AttributeDerive;
 use proc_macro2::{Ident, TokenStream};
 use quote::{ToTokens, TokenStreamExt};
 use syn::{
-    parse::Parse, parse_quote, Field, ItemStruct, LitStr, Type, Visibility,
+    parse::Parse, parse_quote, Field, ItemStruct, LitStr, Meta, Type,
+    Visibility,
 };
 
 pub struct Model {
@@ -31,13 +32,16 @@ impl Parse for Model {
 
         // We need to remove the `#[doc = ""]` and `#[builder(_)]`
         // attrs from the function signature
-        drain_filter(&mut item.attrs, |attr| {
-            attr.path == parse_quote!(doc) || attr.path == parse_quote!(prop)
+        drain_filter(&mut item.attrs, |attr| match &attr.meta {
+            Meta::NameValue(attr) => attr.path == parse_quote!(doc),
+            Meta::List(attr) => attr.path == parse_quote!(prop),
+            _ => false,
         });
         item.fields.iter_mut().for_each(|arg| {
-            drain_filter(&mut arg.attrs, |attr| {
-                attr.path == parse_quote!(doc)
-                    || attr.path == parse_quote!(prop)
+            drain_filter(&mut arg.attrs, |attr| match &attr.meta {
+                Meta::NameValue(attr) => attr.path == parse_quote!(doc),
+                Meta::List(attr) => attr.path == parse_quote!(prop),
+                _ => false,
             });
         });
 

leptos_macro/src/template.rs

@@ -1,9 +1,14 @@
 use crate::attribute_value;
-use leptos_hot_reload::parsing::is_component_node;
+use itertools::Either;
+use leptos_hot_reload::parsing::{
+    block_to_primitive_expression, is_component_node, value_to_string,
+};
 use proc_macro2::{Ident, Span, TokenStream};
-use quote::{quote, quote_spanned};
+use quote::{quote, quote_spanned, ToTokens};
+use rstml::node::{
+    KeyedAttribute, Node, NodeAttribute, NodeBlock, NodeElement,
+};
 use syn::spanned::Spanned;
-use syn_rsx::{Node, NodeAttribute, NodeElement, NodeValueExpr};
 use uuid::Uuid;
 
 pub(crate) fn render_template(cx: &Ident, nodes: &[Node]) -> TokenStream {
@@ -53,7 +58,7 @@ fn root_element_to_tokens(
                 .unwrap();
         };
 
-        let span = node.name.span();
+        let span = node.name().span();
 
         let navigations = if navigations.is_empty() {
             quote! {}
@@ -67,7 +72,7 @@ fn root_element_to_tokens(
             quote! { #(#expressions;);* }
         };
 
-        let tag_name = node.name.to_string();
+        let tag_name = node.name().to_string();
 
         quote_spanned! {
             span => {
@@ -104,9 +109,9 @@ enum PrevSibChange {
     Skip,
 }
 
-fn attributes(node: &NodeElement) -> impl Iterator<Item = &NodeAttribute> {
-    node.attributes.iter().filter_map(|node| {
-        if let Node::Attribute(attribute) = node {
+fn attributes(node: &NodeElement) -> impl Iterator<Item = &KeyedAttribute> {
+    node.attributes().iter().filter_map(|node| {
+        if let NodeAttribute::Attribute(attribute) = node {
             Some(attribute)
         } else {
             None
@@ -129,11 +134,11 @@ fn element_to_tokens(
 ) -> Ident {
     // create this element
     *next_el_id += 1;
-    let this_el_ident = child_ident(*next_el_id, node.name.span());
+    let this_el_ident = child_ident(*next_el_id, node.name().span());
 
     // Open tag
-    let name_str = node.name.to_string();
-    let span = node.name.span();
+    let name_str = node.name().to_string();
+    let span = node.name().span();
 
     // CSR/hydrate, push to template
     template.push('<');
@@ -145,7 +150,7 @@ fn element_to_tokens(
     }
 
     // navigation for this el
-    let debug_name = node.name.to_string();
+    let debug_name = node.name().to_string();
     let this_nav = if is_root_el {
         quote_spanned! {
             span => let #this_el_ident = #debug_name;
@@ -247,14 +252,17 @@ fn next_sibling_node(
                 if is_component_node(sibling) {
                     next_sibling_node(children, idx + 1, next_el_id)
                 } else {
-                    Ok(Some(child_ident(*next_el_id + 1, sibling.name.span())))
+                    Ok(Some(child_ident(
+                        *next_el_id + 1,
+                        sibling.name().span(),
+                    )))
                 }
             }
             Node::Block(sibling) => {
-                Ok(Some(child_ident(*next_el_id + 1, sibling.value.span())))
+                Ok(Some(child_ident(*next_el_id + 1, sibling.span())))
             }
             Node::Text(sibling) => {
-                Ok(Some(child_ident(*next_el_id + 1, sibling.value.span())))
+                Ok(Some(child_ident(*next_el_id + 1, sibling.span())))
             }
             _ => Err("expected either an element or a block".to_string()),
         }
@@ -263,7 +271,7 @@ fn next_sibling_node(
 
 fn attr_to_tokens(
     cx: &Ident,
-    node: &NodeAttribute,
+    node: &KeyedAttribute,
     el_id: &Ident,
     template: &mut String,
     expressions: &mut Vec<TokenStream>,
@@ -272,8 +280,8 @@ fn attr_to_tokens(
     let name = name.strip_prefix('_').unwrap_or(&name);
     let name = name.strip_prefix("attr:").unwrap_or(name);
 
-    let value = match &node.value {
-        Some(expr) => match expr.as_ref() {
+    let value = match &node.value() {
+        Some(expr) => match expr {
             syn::Expr::Lit(expr_lit) => {
                 if let syn::Lit::Str(s) = &expr_lit.lit {
                     AttributeValue::Static(s.value())
@@ -367,7 +375,7 @@ fn child_to_tokens(
         Node::Element(node) => {
             if is_component_node(node) {
                 proc_macro_error::emit_error!(
-                    node.name.span(),
+                    node.name().span(),
                     "component children not allowed in template!, use view! \
                      instead"
                 );
@@ -389,7 +397,7 @@ fn child_to_tokens(
         }
         Node::Text(node) => block_to_tokens(
             cx,
-            &node.value,
+            Either::Left(node.value_string()),
             node.value.span(),
             parent,
             prev_sib,
@@ -399,10 +407,42 @@ fn child_to_tokens(
             expressions,
             navigations,
         ),
-        Node::Block(node) => block_to_tokens(
+        Node::RawText(node) => block_to_tokens(
             cx,
-            &node.value,
-            node.value.span(),
+            Either::Left(node.to_string_best()),
+            node.span(),
+            parent,
+            prev_sib,
+            next_sib,
+            next_el_id,
+            template,
+            expressions,
+            navigations,
+        ),
+        Node::Block(NodeBlock::ValidBlock(b)) => {
+            let value = match block_to_primitive_expression(b)
+                .and_then(value_to_string)
+            {
+                Some(v) => Either::Left(v),
+                None => Either::Right(b.into_token_stream()),
+            };
+            block_to_tokens(
+                cx,
+                value,
+                b.span(),
+                parent,
+                prev_sib,
+                next_sib,
+                next_el_id,
+                template,
+                expressions,
+                navigations,
+            )
+        }
+        Node::Block(b @ NodeBlock::Invalid { .. }) => block_to_tokens(
+            cx,
+            Either::Right(b.into_token_stream()),
+            b.span(),
             parent,
             prev_sib,
             next_sib,
@@ -418,7 +458,7 @@ fn child_to_tokens(
 #[allow(clippy::too_many_arguments)]
 fn block_to_tokens(
     _cx: &Ident,
-    value: &NodeValueExpr,
+    value: Either<String, TokenStream>,
     span: Span,
     parent: &Ident,
     prev_sib: Option<Ident>,
@@ -428,18 +468,6 @@ fn block_to_tokens(
     expressions: &mut Vec<TokenStream>,
     navigations: &mut Vec<TokenStream>,
 ) -> PrevSibChange {
-    let value = value.as_ref();
-    let str_value = match value {
-        syn::Expr::Lit(lit) => match &lit.lit {
-            syn::Lit::Str(s) => Some(s.value()),
-            syn::Lit::Char(c) => Some(c.value().to_string()),
-            syn::Lit::Int(i) => Some(i.base10_digits().to_string()),
-            syn::Lit::Float(f) => Some(f.base10_digits().to_string()),
-            _ => None,
-        },
-        _ => None,
-    };
-
     // code to navigate to this text node
 
     let (name, location) = /* if is_first_child && mode == Mode::Client {
@@ -473,27 +501,30 @@ fn block_to_tokens(
         }
     };
 
-    if let Some(v) = str_value {
-        navigations.push(location);
-        template.push_str(&v);
+    match value {
+        Either::Left(v) => {
+            navigations.push(location);
+            template.push_str(&v);
 
-        if let Some(name) = name {
-            PrevSibChange::Sib(name)
-        } else {
-            PrevSibChange::Parent
+            if let Some(name) = name {
+                PrevSibChange::Sib(name)
+            } else {
+                PrevSibChange::Parent
+            }
         }
-    } else {
-        template.push_str("<!>");
-        navigations.push(location);
+        Either::Right(value) => {
+            template.push_str("<!>");
+            navigations.push(location);
 
-        expressions.push(quote! {
-			leptos::leptos_dom::mount_child(#mount_kind, &{#value}.into_view(cx));
-        });
+            expressions.push(quote! {
+                leptos::leptos_dom::mount_child(#mount_kind, &{#value}.into_view(cx));
+            });
 
-        if let Some(name) = name {
-            PrevSibChange::Sib(name)
-        } else {
-            PrevSibChange::Parent
+            if let Some(name) = name {
+                PrevSibChange::Sib(name)
+            } else {
+                PrevSibChange::Parent
+            }
         }
     }
 }

leptos_macro/src/view.rs

@@ -1,11 +1,15 @@
 use crate::{attribute_value, Mode};
 use convert_case::{Case::Snake, Casing};
-use leptos_hot_reload::parsing::{is_component_node, value_to_string};
+use leptos_hot_reload::parsing::{
+    block_to_primitive_expression, is_component_node, value_to_string,
+};
 use proc_macro2::{Ident, Span, TokenStream, TokenTree};
 use quote::{format_ident, quote, quote_spanned};
+use rstml::node::{
+    KeyedAttribute, Node, NodeAttribute, NodeBlock, NodeElement, NodeName,
+};
 use std::collections::HashMap;
 use syn::{spanned::Spanned, Expr, ExprLit, ExprPath, Lit};
-use syn_rsx::{Node, NodeAttribute, NodeElement, NodeName, NodeValueExpr};
 
 #[derive(Clone, Copy)]
 enum TagType {
@@ -213,18 +217,22 @@ fn root_node_to_tokens_ssr(
             global_class,
             view_marker,
         ),
-        Node::Comment(_) | Node::Doctype(_) | Node::Attribute(_) => quote! {},
+        Node::Comment(_) | Node::Doctype(_) => quote! {},
         Node::Text(node) => {
-            let value = node.value.as_ref();
             quote! {
-                leptos::leptos_dom::html::text(#value)
+                leptos::leptos_dom::html::text(#node)
+            }
+        }
+        Node::RawText(r) => {
+            let text = r.to_string_best();
+            let text = syn::LitStr::new(&text, r.span());
+            quote! {
+                leptos::leptos_dom::html::text(#text)
             }
         }
         Node::Block(node) => {
-            let value = node.value.as_ref();
             quote! {
-                #[allow(unused_braces)]
-                #value
+                #node
             }
         }
         Node::Element(node) => {
@@ -254,9 +262,9 @@ fn fragment_to_tokens_ssr(
     });
     quote! {
         {
-            leptos::Fragment::lazy(|| vec![
+            leptos::Fragment::lazy(|| [
                 #(#nodes),*
-            ])
+            ].to_vec())
             #view_marker
         }
     }
@@ -301,10 +309,12 @@ fn root_element_to_tokens_ssr(
         let chunks = chunks.into_iter().map(|chunk| match chunk {
             SsrElementChunks::String { template, holes } => {
                 if holes.is_empty() {
+                    let template = template.replace("\\{", "{").replace("\\}", "}");
                     quote! {
                         leptos::leptos_dom::html::StringOrView::String(#template.into())
                     }
                 } else {
+                let template = template.replace("\\{", "{{").replace("\\}", "}}");
                     quote! {
                         leptos::leptos_dom::html::StringOrView::String(
                             format!(
@@ -327,15 +337,15 @@ fn root_element_to_tokens_ssr(
             },
         });
 
-        let tag_name = node.name.to_string();
+        let tag_name = node.name().to_string();
         let is_custom_element = is_custom_element(&tag_name);
         let typed_element_name = if is_custom_element {
-            Ident::new("Custom", node.name.span())
+            Ident::new("Custom", node.name().span())
         } else {
             let camel_cased = camel_case_tag_name(
                 &tag_name.replace("svg::", "").replace("math::", ""),
             );
-            Ident::new(&camel_cased, node.name.span())
+            Ident::new(&camel_cased, node.name().span())
         };
         let typed_element_name = if is_svg_element(&tag_name) {
             quote! { svg::#typed_element_name }
@@ -407,7 +417,7 @@ fn element_to_tokens_ssr(
         }));
     } else {
         let tag_name = node
-            .name
+            .name()
             .to_string()
             .replace("svg::", "")
             .replace("math::", "");
@@ -417,8 +427,8 @@ fn element_to_tokens_ssr(
 
         let mut inner_html = None;
 
-        for attr in &node.attributes {
-            if let Node::Attribute(attr) = attr {
+        for attr in node.attributes() {
+            if let NodeAttribute::Attribute(attr) = attr {
                 inner_html = attribute_to_tokens_ssr(
                     cx,
                     attr,
@@ -437,9 +447,9 @@ fn element_to_tokens_ssr(
             quote! { leptos::leptos_dom::HydrationCtx::id() }
         };
         match node
-            .attributes
+            .attributes()
             .iter()
-            .find(|node| matches!(node, Node::Attribute(attr) if attr.key.to_string() == "id"))
+            .find(|node| matches!(node, NodeAttribute::Attribute(attr) if attr.key.to_string() == "id"))
         {
             Some(_) => {
                 template.push_str(" leptos-hk=\"_{}\"");
@@ -451,6 +461,7 @@ fn element_to_tokens_ssr(
         holes.push(hydration_id);
 
         set_class_attribute_ssr(cx, node, template, holes, global_class);
+        set_style_attribute_ssr(cx, node, template, holes);
 
         if is_self_closing(node) {
             template.push_str("/>");
@@ -459,7 +470,7 @@ fn element_to_tokens_ssr(
 
             if let Some(inner_html) = inner_html {
                 template.push_str("{}");
-                let value = inner_html.as_ref();
+                let value = inner_html;
 
                 holes.push(quote! {
                   (#value).into_attribute(#cx).as_nameless_value_string().unwrap_or_default()
@@ -481,32 +492,23 @@ fn element_to_tokens_ssr(
                             );
                         }
                         Node::Text(text) => {
-                            if let Some(value) = value_to_string(&text.value) {
-                                let value = if is_script_or_style {
-                                    value.into()
-                                } else {
-                                    html_escape::encode_safe(&value)
-                                };
-                                template.push_str(
-                                    &value
-                                        .replace('{', "{{")
-                                        .replace('}', "}}"),
-                                );
+                            let value = text.value_string();
+                            let value = if is_script_or_style {
+                                value.into()
                             } else {
-                                template.push_str("{}");
-                                let value = text.value.as_ref();
-
-                                holes.push(quote! {
-                                  #value.into_view(#cx).render_to_string(#cx)
-                                })
-                            }
+                                html_escape::encode_safe(&value)
+                            };
+                            template.push_str(
+                                &value.replace('{', "\\{").replace('}', "\\}"),
+                            );
                         }
-                        Node::Block(block) => {
-                            if let Some(value) = value_to_string(&block.value) {
+                        Node::Block(NodeBlock::ValidBlock(block)) => {
+                            if let Some(value) =
+                                block_to_primitive_expression(block)
+                                    .and_then(value_to_string)
+                            {
                                 template.push_str(&value);
                             } else {
-                                let value = block.value.as_ref();
-
                                 if !template.is_empty() {
                                     chunks.push(SsrElementChunks::String {
                                         template: std::mem::take(template),
@@ -514,10 +516,16 @@ fn element_to_tokens_ssr(
                                     })
                                 }
                                 chunks.push(SsrElementChunks::View(quote! {
-                                  {#value}.into_view(#cx)
+                                    {#block}.into_view(#cx)
                                 }));
                             }
                         }
+                        // Keep invalid blocks for faster IDE diff (on user type)
+                        Node::Block(block @ NodeBlock::Invalid { .. }) => {
+                            chunks.push(SsrElementChunks::View(quote! {
+                                {#block}.into_view(#cx)
+                            }));
+                        }
                         Node::Fragment(_) => abort!(
                             Span::call_site(),
                             "You can't nest a fragment inside an element."
@@ -528,7 +536,7 @@ fn element_to_tokens_ssr(
             }
 
             template.push_str("</");
-            template.push_str(&node.name.to_string());
+            template.push_str(&node.name().to_string());
             template.push('>');
         }
     }
@@ -537,17 +545,17 @@ fn element_to_tokens_ssr(
 // returns `inner_html`
 fn attribute_to_tokens_ssr<'a>(
     cx: &Ident,
-    node: &'a NodeAttribute,
+    attr: &'a KeyedAttribute,
     template: &mut String,
     holes: &mut Vec<TokenStream>,
     exprs_for_compiler: &mut Vec<TokenStream>,
     global_class: Option<&TokenTree>,
-) -> Option<&'a NodeValueExpr> {
-    let name = node.key.to_string();
+) -> Option<&'a syn::Expr> {
+    let name = attr.key.to_string();
     if name == "ref" || name == "_ref" || name == "ref_" || name == "node_ref" {
         // ignore refs on SSR
     } else if let Some(name) = name.strip_prefix("on:") {
-        let handler = attribute_value(node);
+        let handler = attribute_value(attr);
         let (event_type, _, _) = parse_event_name(name);
 
         exprs_for_compiler.push(quote! {
@@ -555,30 +563,31 @@ fn attribute_to_tokens_ssr<'a>(
         })
     } else if name.strip_prefix("prop:").is_some()
         || name.strip_prefix("class:").is_some()
+        || name.strip_prefix("style:").is_some()
     {
         // ignore props for SSR
-        // ignore classes: we'll handle these separately
+        // ignore classes and sdtyles: we'll handle these separately
     } else if name == "inner_html" {
-        return node.value.as_ref();
+        return attr.value();
     } else {
         let name = name.replacen("attr:", "", 1);
 
         // special case of global_class and class attribute
         if name == "class"
             && global_class.is_some()
-            && node.value.as_ref().and_then(value_to_string).is_none()
+            && attr.value().and_then(value_to_string).is_none()
         {
-            let span = node.key.span();
+            let span = attr.key.span();
             proc_macro_error::emit_error!(span, "Combining a global class (view! { cx, class = ... }) \
             and a dynamic `class=` attribute on an element causes runtime inconsistencies. You can \
             toggle individual classes dynamically with the `class:name=value` syntax. \n\nSee this issue \
             for more information and an example: https://github.com/leptos-rs/leptos/issues/773")
         };
 
-        if name != "class" {
+        if name != "class" && name != "style" {
             template.push(' ');
 
-            if let Some(value) = node.value.as_ref() {
+            if let Some(value) = attr.value() {
                 if let Some(value) = value_to_string(value) {
                     template.push_str(&name);
                     template.push_str("=\"");
@@ -586,7 +595,6 @@ fn attribute_to_tokens_ssr<'a>(
                     template.push('"');
                 } else {
                     template.push_str("{}");
-                    let value = value.as_ref();
                     holes.push(quote! {
                         &{#value}.into_attribute(#cx)
                             .as_nameless_value_string()
@@ -626,11 +634,13 @@ fn set_class_attribute_ssr(
         Some(val) => (String::new(), Some(val)),
     };
     let static_class_attr = node
-        .attributes
+        .attributes()
         .iter()
         .filter_map(|a| match a {
-            Node::Attribute(attr) if attr.key.to_string() == "class" => {
-                attr.value.as_ref().and_then(value_to_string)
+            NodeAttribute::Attribute(attr)
+                if attr.key.to_string() == "class" =>
+            {
+                attr.value().and_then(value_to_string)
             }
             _ => None,
         })
@@ -640,17 +650,17 @@ fn set_class_attribute_ssr(
         .join(" ");
 
     let dyn_class_attr = node
-        .attributes
+        .attributes()
         .iter()
         .filter_map(|a| {
-            if let Node::Attribute(a) = a {
+            if let NodeAttribute::Attribute(a) = a {
                 if a.key.to_string() == "class" {
-                    if a.value.as_ref().and_then(value_to_string).is_some()
+                    if a.value().and_then(value_to_string).is_some()
                         || fancy_class_name(&a.key.to_string(), cx, a).is_some()
                     {
                         None
                     } else {
-                        Some((a.key.span(), &a.value))
+                        Some((a.key.span(), a.value()))
                     }
                 } else {
                     None
@@ -662,10 +672,10 @@ fn set_class_attribute_ssr(
         .collect::<Vec<_>>();
 
     let class_attrs = node
-        .attributes
+        .attributes()
         .iter()
         .filter_map(|node| {
-            if let Node::Attribute(node) = node {
+            if let NodeAttribute::Attribute(node) = node {
                 let name = node.key.to_string();
                 if name == "class" {
                     return if let Some((_, name, value)) =
@@ -709,7 +719,6 @@ fn set_class_attribute_ssr(
         for (_span, value) in dyn_class_attr {
             if let Some(value) = value {
                 template.push_str(" {}");
-                let value = value.as_ref();
                 holes.push(quote! {
                   &(#cx, #value).into_attribute(#cx).as_nameless_value_string()
                     .map(|a| leptos::leptos_dom::ssr::escape_attr(&a).to_string())
@@ -734,6 +743,114 @@ fn set_class_attribute_ssr(
     }
 }
 
+fn set_style_attribute_ssr(
+    cx: &Ident,
+    node: &NodeElement,
+    template: &mut String,
+    holes: &mut Vec<TokenStream>,
+) {
+    let static_style_attr = node
+        .attributes()
+        .iter()
+        .filter_map(|a| match a {
+            NodeAttribute::Attribute(attr)
+                if attr.key.to_string() == "style" =>
+            {
+                attr.value().and_then(value_to_string)
+            }
+            _ => None,
+        })
+        .next()
+        .map(|style| format!("{style};"));
+
+    let dyn_style_attr = node
+        .attributes()
+        .iter()
+        .filter_map(|a| {
+            if let NodeAttribute::Attribute(a) = a {
+                if a.key.to_string() == "style" {
+                    if a.value().and_then(value_to_string).is_some()
+                        || fancy_style_name(&a.key.to_string(), cx, a).is_some()
+                    {
+                        None
+                    } else {
+                        Some((a.key.span(), a.value()))
+                    }
+                } else {
+                    None
+                }
+            } else {
+                None
+            }
+        })
+        .collect::<Vec<_>>();
+
+    let style_attrs = node
+        .attributes()
+        .iter()
+        .filter_map(|node| {
+            if let NodeAttribute::Attribute(node) = node {
+                let name = node.key.to_string();
+                if name == "style" {
+                    return if let Some((_, name, value)) =
+                        fancy_style_name(&name, cx, node)
+                    {
+                        let span = node.key.span();
+                        Some((span, name, value))
+                    } else {
+                        None
+                    };
+                }
+                if name.starts_with("style:") || name.starts_with("style-") {
+                    let name = if name.starts_with("style:") {
+                        name.replacen("style:", "", 1)
+                    } else if name.starts_with("style-") {
+                        name.replacen("style-", "", 1)
+                    } else {
+                        name
+                    };
+                    let value = attribute_value(node);
+                    let span = node.key.span();
+                    Some((span, name, value))
+                } else {
+                    None
+                }
+            } else {
+                None
+            }
+        })
+        .collect::<Vec<_>>();
+
+    if static_style_attr.is_some()
+        || !dyn_style_attr.is_empty()
+        || !style_attrs.is_empty()
+    {
+        template.push_str(" style=\"");
+
+        template.push_str(&static_style_attr.unwrap_or_default());
+
+        for (_span, value) in dyn_style_attr {
+            if let Some(value) = value {
+                template.push_str(" {};");
+                holes.push(quote! {
+                  &(#cx, #value).into_attribute(#cx).as_nameless_value_string()
+                    .map(|a| leptos::leptos_dom::ssr::escape_attr(&a).to_string())
+                    .unwrap_or_default()
+                });
+            }
+        }
+
+        for (_span, name, value) in &style_attrs {
+            template.push_str(" {}");
+            holes.push(quote! {
+              (#cx, #value).into_style(#cx).as_value_string(#name).unwrap_or_default()
+            });
+        }
+
+        template.push('"');
+    }
+}
+
 #[allow(clippy::too_many_arguments)]
 fn fragment_to_tokens(
     cx: &Ident,
@@ -788,18 +905,18 @@ fn fragment_to_tokens(
     let tokens = if lazy {
         quote! {
             {
-                leptos::Fragment::lazy(|| vec![
+                leptos::Fragment::lazy(|| [
                     #(#nodes),*
-                ])
+                ].to_vec())
                 #view_marker
             }
         }
     } else {
         quote! {
             {
-                leptos::Fragment::new(vec![
+                leptos::Fragment::new([
                     #(#nodes),*
-                ])
+                ].to_vec())
                 #view_marker
             }
         }
@@ -837,18 +954,14 @@ fn node_to_tokens(
             view_marker,
         ),
         Node::Comment(_) | Node::Doctype(_) => Some(quote! {}),
-        Node::Text(node) => {
-            let value = node.value.as_ref();
-            Some(quote! {
-                leptos::leptos_dom::html::text(#value)
-            })
-        }
-        Node::Block(node) => {
-            let value = node.value.as_ref();
-            Some(quote! { #value })
-        }
-        Node::Attribute(node) => {
-            Some(attribute_to_tokens(cx, node, global_class))
+        Node::Text(node) => Some(quote! {
+            leptos::leptos_dom::html::text(#node)
+        }),
+        Node::Block(node) => Some(quote! { #node }),
+        Node::RawText(r) => {
+            let text = r.to_string_best();
+            let text = syn::LitStr::new(&text, r.span());
+            Some(quote! { #text })
         }
         Node::Element(node) => element_to_tokens(
             cx,
@@ -869,6 +982,7 @@ fn element_to_tokens(
     global_class: Option<&TokenTree>,
     view_marker: Option<String>,
 ) -> Option<TokenStream> {
+    let name = node.name();
     if is_component_node(node) {
         if let Some(slot) = get_slot(node) {
             slot_to_tokens(cx, node, slot, parent_slots, global_class);
@@ -877,20 +991,17 @@ fn element_to_tokens(
             Some(component_to_tokens(cx, node, global_class))
         }
     } else {
-        let tag = node.name.to_string();
+        let tag = name.to_string();
         let name = if is_custom_element(&tag) {
-            let name = node.name.to_string();
+            let name = node.name().to_string();
             quote! { leptos::leptos_dom::html::custom(#cx, leptos::leptos_dom::html::Custom::new(#name)) }
         } else if is_svg_element(&tag) {
-            let name = &node.name;
             parent_type = TagType::Svg;
             quote! { leptos::leptos_dom::svg::#name(#cx) }
         } else if is_math_ml_element(&tag) {
-            let name = &node.name;
             parent_type = TagType::Math;
             quote! { leptos::leptos_dom::math::#name(#cx) }
         } else if is_ambiguous_element(&tag) {
-            let name = &node.name;
             match parent_type {
                 TagType::Unknown => {
                     // We decided this warning was too aggressive, but I'll leave it here in case we want it later
@@ -909,15 +1020,17 @@ fn element_to_tokens(
                 }
             }
         } else {
-            let name = &node.name;
             parent_type = TagType::Html;
             quote! { leptos::leptos_dom::html::#name(#cx) }
         };
-        let attrs = node.attributes.iter().filter_map(|node| {
-            if let Node::Attribute(node) = node {
+        let attrs = node.attributes().iter().filter_map(|node| {
+            if let NodeAttribute::Attribute(node) = node {
                 let name = node.key.to_string();
-                if name.trim().starts_with("class:")
-                    || fancy_class_name(&name, cx, node).is_some()
+                let name = name.trim();
+                if name.starts_with("class:")
+                    || fancy_class_name(name, cx, node).is_some()
+                    || name.starts_with("style:")
+                    || fancy_style_name(name, cx, node).is_some()
                 {
                     None
                 } else {
@@ -927,8 +1040,8 @@ fn element_to_tokens(
                 None
             }
         });
-        let class_attrs = node.attributes.iter().filter_map(|node| {
-            if let Node::Attribute(node) = node {
+        let class_attrs = node.attributes().iter().filter_map(|node| {
+            if let NodeAttribute::Attribute(node) = node {
                 let name = node.key.to_string();
                 if let Some((fancy, _, _)) = fancy_class_name(&name, cx, node) {
                     Some(fancy)
@@ -941,6 +1054,20 @@ fn element_to_tokens(
                 None
             }
         });
+        let style_attrs = node.attributes().iter().filter_map(|node| {
+            if let NodeAttribute::Attribute(node) = node {
+                let name = node.key.to_string();
+                if let Some((fancy, _, _)) = fancy_style_name(&name, cx, node) {
+                    Some(fancy)
+                } else if name.trim().starts_with("style:") {
+                    Some(attribute_to_tokens(cx, node, global_class))
+                } else {
+                    None
+                }
+            } else {
+                None
+            }
+        });
         let global_class_expr = match global_class {
             None => quote! {},
             Some(class) => {
@@ -973,32 +1100,18 @@ fn element_to_tokens(
                     }),
                     false,
                 ),
-                Node::Text(node) => {
-                    if let Some(primitive) = value_to_string(&node.value) {
-                        (quote! { #primitive }, true)
-                    } else {
-                        let value = node.value.as_ref();
-                        (
-                            quote! {
-                                #[allow(unused_braces)] #value
-                            },
-                            false,
-                        )
-                    }
-                }
-                Node::Block(node) => {
-                    if let Some(primitive) = value_to_string(&node.value) {
-                        (quote! { #primitive }, true)
-                    } else {
-                        let value = node.value.as_ref();
-                        (
-                            quote! {
-                                #[allow(unused_braces)] #value
-                            },
-                            false,
-                        )
-                    }
+                Node::Text(node) => (quote! { #node }, true),
+                Node::RawText(node) => {
+                    let text = node.to_string_best();
+                    let text = syn::LitStr::new(&text, node.span());
+                    (quote! { #text }, true)
                 }
+                Node::Block(node) => (
+                    quote! {
+                       #node
+                    },
+                    false,
+                ),
                 Node::Element(node) => (
                     element_to_tokens(
                         cx,
@@ -1011,9 +1124,7 @@ fn element_to_tokens(
                     .unwrap_or_default(),
                     false,
                 ),
-                Node::Comment(_) | Node::Doctype(_) | Node::Attribute(_) => {
-                    (quote! {}, false)
-                }
+                Node::Comment(_) | Node::Doctype(_) => (quote! {}, false),
             };
             if is_static {
                 quote! {
@@ -1034,6 +1145,7 @@ fn element_to_tokens(
             #name
                 #(#attrs)*
                 #(#class_attrs)*
+                #(#style_attrs)*
                 #global_class_expr
                 #(#children)*
                 #view_marker
@@ -1043,7 +1155,7 @@ fn element_to_tokens(
 
 fn attribute_to_tokens(
     cx: &Ident,
-    node: &NodeAttribute,
+    node: &KeyedAttribute,
     global_class: Option<&TokenTree>,
 ) -> TokenStream {
     let span = node.key.span();
@@ -1149,6 +1261,21 @@ fn attribute_to_tokens(
         quote! {
             #class(#name, (#cx, #[allow(unused_braces)] #value))
         }
+    } else if let Some(name) = name.strip_prefix("style:") {
+        let value = attribute_value(node);
+        let style = match &node.key {
+            NodeName::Punctuated(parts) => &parts[0],
+            _ => unreachable!(),
+        };
+        let style = {
+            let span = style.span();
+            quote_spanned! {
+                span => .style
+            }
+        };
+        quote! {
+            #style(#name, (#cx, #[allow(unused_braces)] #value))
+        }
     } else {
         let name = name.replacen("attr:", "", 1);
 
@@ -1159,7 +1286,7 @@ fn attribute_to_tokens(
         // special case of global_class and class attribute
         if name == "class"
             && global_class.is_some()
-            && node.value.as_ref().and_then(value_to_string).is_none()
+            && node.value().and_then(value_to_string).is_none()
         {
             let span = node.key.span();
             proc_macro_error::emit_error!(span, "Combining a global class (view! { cx, class = ... }) \
@@ -1169,10 +1296,8 @@ fn attribute_to_tokens(
         };
 
         // all other attributes
-        let value = match node.value.as_ref() {
+        let value = match node.value() {
             Some(value) => {
-                let value = value.as_ref();
-
                 quote! { #value }
             }
             None => quote_spanned! { span => "" },
@@ -1223,7 +1348,7 @@ pub(crate) fn parse_event_name(name: &str) -> (TokenStream, bool, bool) {
 pub(crate) fn slot_to_tokens(
     cx: &Ident,
     node: &NodeElement,
-    slot: &NodeAttribute,
+    slot: &KeyedAttribute,
     parent_slots: Option<&mut HashMap<String, Vec<TokenStream>>>,
     global_class: Option<&TokenTree>,
 ) {
@@ -1232,19 +1357,19 @@ pub(crate) fn slot_to_tokens(
     let name = convert_to_snake_case(if name.starts_with("slot:") {
         name.replacen("slot:", "", 1)
     } else {
-        node.name.to_string()
+        node.name().to_string()
     });
 
-    let component_name = ident_from_tag_name(&node.name);
-    let span = node.name.span();
+    let component_name = ident_from_tag_name(node.name());
+    let span = node.name().span();
 
     let Some(parent_slots) = parent_slots else {
         proc_macro_error::emit_error!(span, "slots cannot be used inside HTML elements");
         return;
     };
 
-    let attrs = node.attributes.iter().filter_map(|node| {
-        if let Node::Attribute(node) = node {
+    let attrs = node.attributes().iter().filter_map(|node| {
+        if let NodeAttribute::Attribute(node) = node {
             if is_slot(node) {
                 None
             } else {
@@ -1262,10 +1387,8 @@ pub(crate) fn slot_to_tokens(
             let name = &attr.key;
 
             let value = attr
-                .value
-                .as_ref()
+                .value()
                 .map(|v| {
-                    let v = v.as_ref();
                     quote! { #v }
                 })
                 .unwrap_or_else(|| quote! { #name });
@@ -1330,9 +1453,9 @@ pub(crate) fn slot_to_tokens(
         let slot = Ident::new(&slot, span);
         if values.len() > 1 {
             quote! {
-                .#slot(vec![
+                .#slot([
                     #(#values)*
-                ])
+                ].to_vec())
             }
         } else {
             let value = &values[0];
@@ -1360,12 +1483,12 @@ pub(crate) fn component_to_tokens(
     node: &NodeElement,
     global_class: Option<&TokenTree>,
 ) -> TokenStream {
-    let name = &node.name;
-    let component_name = ident_from_tag_name(&node.name);
-    let span = node.name.span();
+    let name = node.name();
+    let component_name = ident_from_tag_name(node.name());
+    let span = node.name().span();
 
-    let attrs = node.attributes.iter().filter_map(|node| {
-        if let Node::Attribute(node) = node {
+    let attrs = node.attributes().iter().filter_map(|node| {
+        if let NodeAttribute::Attribute(node) = node {
             Some(node)
         } else {
             None
@@ -1382,10 +1505,8 @@ pub(crate) fn component_to_tokens(
             let name = &attr.key;
 
             let value = attr
-                .value
-                .as_ref()
+                .value()
                 .map(|v| {
-                    let v = v.as_ref();
                     quote! { #v }
                 })
                 .unwrap_or_else(|| quote! { #name });
@@ -1493,7 +1614,7 @@ pub(crate) fn component_to_tokens(
 }
 
 pub(crate) fn event_from_attribute_node(
-    attr: &NodeAttribute,
+    attr: &KeyedAttribute,
     force_undelegated: bool,
 ) -> (TokenStream, &Expr) {
     let event_name = attr
@@ -1553,7 +1674,7 @@ fn ident_from_tag_name(tag_name: &NodeName) -> Ident {
 fn expr_to_ident(expr: &syn::Expr) -> Option<&ExprPath> {
     match expr {
         syn::Expr::Block(block) => block.block.stmts.last().and_then(|stmt| {
-            if let syn::Stmt::Expr(expr) = stmt {
+            if let syn::Stmt::Expr(expr, ..) = stmt {
                 expr_to_ident(expr)
             } else {
                 None
@@ -1564,15 +1685,15 @@ fn expr_to_ident(expr: &syn::Expr) -> Option<&ExprPath> {
     }
 }
 
-fn is_slot(node: &NodeAttribute) -> bool {
+fn is_slot(node: &KeyedAttribute) -> bool {
     let key = node.key.to_string();
     let key = key.trim();
     key == "slot" || key.starts_with("slot:")
 }
 
-fn get_slot(node: &NodeElement) -> Option<&NodeAttribute> {
-    node.attributes.iter().find_map(|node| {
-        if let Node::Attribute(node) = node {
+fn get_slot(node: &NodeElement) -> Option<&KeyedAttribute> {
+    node.attributes().iter().find_map(|node| {
+        if let NodeAttribute::Attribute(node) = node {
             if is_slot(node) {
                 Some(node)
             } else {
@@ -1600,7 +1721,7 @@ fn is_self_closing(node: &NodeElement) -> bool {
     // self-closing tags
     // https://developer.mozilla.org/en-US/docs/Glossary/Empty_element
     matches!(
-        node.name.to_string().as_str(),
+        node.name().to_string().as_str(),
         "area"
             | "base"
             | "br"
@@ -1755,13 +1876,13 @@ fn parse_event(event_name: &str) -> (&str, bool) {
 fn fancy_class_name<'a>(
     name: &str,
     cx: &Ident,
-    node: &'a NodeAttribute,
+    node: &'a KeyedAttribute,
 ) -> Option<(TokenStream, String, &'a Expr)> {
     // special case for complex class names:
     // e.g., Tailwind `class=("mt-[calc(100vh_-_3rem)]", true)`
     if name == "class" {
-        if let Some(expr) = node.value.as_ref() {
-            if let syn::Expr::Tuple(tuple) = expr.as_ref() {
+        if let Some(expr) = node.value() {
+            if let syn::Expr::Tuple(tuple) = expr {
                 if tuple.elems.len() == 2 {
                     let span = node.key.span();
                     let class = quote_spanned! {
@@ -1800,3 +1921,51 @@ fn fancy_class_name<'a>(
     }
     None
 }
+
+fn fancy_style_name<'a>(
+    name: &str,
+    cx: &Ident,
+    node: &'a KeyedAttribute,
+) -> Option<(TokenStream, String, &'a Expr)> {
+    // special case for complex dynamic style names:
+    if name == "style" {
+        if let Some(expr) = node.value() {
+            if let syn::Expr::Tuple(tuple) = expr {
+                if tuple.elems.len() == 2 {
+                    let span = node.key.span();
+                    let style = quote_spanned! {
+                        span => .style
+                    };
+                    let style_name = &tuple.elems[0];
+                    let style_name = if let Expr::Lit(ExprLit {
+                        lit: Lit::Str(s),
+                        ..
+                    }) = style_name
+                    {
+                        s.value()
+                    } else {
+                        proc_macro_error::emit_error!(
+                            style_name.span(),
+                            "style name must be a string literal"
+                        );
+                        Default::default()
+                    };
+                    let value = &tuple.elems[1];
+                    return Some((
+                        quote! {
+                            #style(#style_name, (#cx, #value))
+                        },
+                        style_name,
+                        value,
+                    ));
+                } else {
+                    proc_macro_error::emit_error!(
+                        tuple.span(),
+                        "style tuples must have two elements."
+                    )
+                }
+            }
+        }
+    }
+    None
+}

leptos_macro/tests/ui/component.stderr

@@ -44,7 +44,7 @@ error: unexpected end of input, expected assignment `=`
 47 |     #[prop(default)] default: bool,
    |                   ^
 
-error: unexpected end of input, expected one of: `::`, `<`, `_`, literal, `const`, `ref`, `mut`, `&`, parentheses, square brackets, `..`, `const`
+error: unexpected end of input, expected one of: identifier, `::`, `<`, `_`, literal, `const`, `ref`, `mut`, `&`, parentheses, square brackets, `..`, `const`
 
        = help: try `#[prop(default=5 * 10)]`
   --> tests/ui/component.rs:56:22

leptos_macro/tests/ui/component_absolute.stderr

@@ -44,7 +44,7 @@ error: unexpected end of input, expected assignment `=`
 45 |     #[prop(default)] default: bool,
    |                   ^
 
-error: unexpected end of input, expected one of: `::`, `<`, `_`, literal, `const`, `ref`, `mut`, `&`, parentheses, square brackets, `..`, `const`
+error: unexpected end of input, expected one of: identifier, `::`, `<`, `_`, literal, `const`, `ref`, `mut`, `&`, parentheses, square brackets, `..`, `const`
 
        = help: try `#[prop(default=5 * 10)]`
   --> tests/ui/component_absolute.rs:54:22

leptos_reactive/Cargo.toml

@@ -68,16 +68,15 @@ hydrate = [
   "dep:web-sys",
 ]
 ssr = ["dep:tokio"]
-nightly = []
+stable = []
 serde = []
 serde-lite = ["dep:serde-lite"]
 miniserde = ["dep:miniserde"]
 rkyv = ["dep:rkyv", "dep:bytecheck"]
 
 [package.metadata.cargo-all-features]
+denylist = ["stable"]
 skip_feature_sets = [
-  [
-  ],
   [
     "csr",
     "ssr",

leptos_reactive/src/lib.rs

@@ -1,7 +1,7 @@
 #![deny(missing_docs)]
-#![cfg_attr(feature = "nightly", feature(fn_traits))]
-#![cfg_attr(feature = "nightly", feature(unboxed_closures))]
-#![cfg_attr(feature = "nightly", feature(type_name_of_val))]
+#![cfg_attr(not(feature = "stable"), feature(fn_traits))]
+#![cfg_attr(not(feature = "stable"), feature(unboxed_closures))]
+#![cfg_attr(not(feature = "stable"), feature(type_name_of_val))]
 
 //! The reactive system for the [Leptos](https://docs.rs/leptos/latest/leptos/) Web framework.
 //!
@@ -110,7 +110,7 @@ pub use slice::*;
 pub use spawn::*;
 pub use spawn_microtask::*;
 pub use stored_value::*;
-pub use suspense::SuspenseContext;
+pub use suspense::{GlobalSuspenseContext, SuspenseContext};
 pub use trigger::*;
 
 mod macros {

leptos_reactive/src/resource.rs

@@ -5,8 +5,9 @@ use crate::{
     runtime::{with_runtime, RuntimeId},
     serialization::Serializable,
     spawn::spawn_local,
-    use_context, Memo, ReadSignal, Scope, ScopeProperty, SignalGetUntracked,
-    SignalSet, SignalUpdate, SignalWith, SuspenseContext, WriteSignal,
+    use_context, GlobalSuspenseContext, Memo, ReadSignal, Scope, ScopeProperty,
+    SignalGetUntracked, SignalSet, SignalUpdate, SignalWith, SuspenseContext,
+    WriteSignal,
 };
 use std::{
     any::Any,
@@ -81,7 +82,7 @@ pub fn create_resource<S, T, Fu>(
     fetcher: impl Fn(S) -> Fu + 'static,
 ) -> Resource<S, T>
 where
-    S: PartialEq + Debug + Clone + 'static,
+    S: PartialEq + Clone + 'static,
     T: Serializable + 'static,
     Fu: Future<Output = T> + 'static,
 {
@@ -119,7 +120,7 @@ pub fn create_resource_with_initial_value<S, T, Fu>(
     initial_value: Option<T>,
 ) -> Resource<S, T>
 where
-    S: PartialEq + Debug + Clone + 'static,
+    S: PartialEq + Clone + 'static,
     T: Serializable + 'static,
     Fu: Future<Output = T> + 'static,
 {
@@ -165,7 +166,7 @@ pub fn create_blocking_resource<S, T, Fu>(
     fetcher: impl Fn(S) -> Fu + 'static,
 ) -> Resource<S, T>
 where
-    S: PartialEq + Debug + Clone + 'static,
+    S: PartialEq + Clone + 'static,
     T: Serializable + 'static,
     Fu: Future<Output = T> + 'static,
 {
@@ -186,7 +187,7 @@ fn create_resource_helper<S, T, Fu>(
     serializable: ResourceSerialization,
 ) -> Resource<S, T>
 where
-    S: PartialEq + Debug + Clone + 'static,
+    S: PartialEq + Clone + 'static,
     T: Serializable + 'static,
     Fu: Future<Output = T> + 'static,
 {
@@ -290,7 +291,7 @@ pub fn create_local_resource<S, T, Fu>(
     fetcher: impl Fn(S) -> Fu + 'static,
 ) -> Resource<S, T>
 where
-    S: PartialEq + Debug + Clone + 'static,
+    S: PartialEq + Clone + 'static,
     T: 'static,
     Fu: Future<Output = T> + 'static,
 {
@@ -324,7 +325,7 @@ pub fn create_local_resource_with_initial_value<S, T, Fu>(
     initial_value: Option<T>,
 ) -> Resource<S, T>
 where
-    S: PartialEq + Debug + Clone + 'static,
+    S: PartialEq + Clone + 'static,
     T: 'static,
     Fu: Future<Output = T> + 'static,
 {
@@ -380,7 +381,7 @@ where
 #[cfg(not(feature = "hydrate"))]
 fn load_resource<S, T>(_cx: Scope, _id: ResourceId, r: Rc<ResourceState<S, T>>)
 where
-    S: PartialEq + Debug + Clone + 'static,
+    S: PartialEq + Clone + 'static,
     T: 'static,
 {
     SUPPRESS_RESOURCE_LOAD.with(|s| {
@@ -393,7 +394,7 @@ where
 #[cfg(feature = "hydrate")]
 fn load_resource<S, T>(cx: Scope, id: ResourceId, r: Rc<ResourceState<S, T>>)
 where
-    S: PartialEq + Debug + Clone + 'static,
+    S: PartialEq + Clone + 'static,
     T: Serializable + 'static,
 {
     use wasm_bindgen::{JsCast, UnwrapThrowExt};
@@ -820,6 +821,7 @@ where
         f: impl FnOnce(&T) -> U,
         location: &'static Location<'static>,
     ) -> Option<U> {
+        let global_suspense_cx = use_context::<GlobalSuspenseContext>(cx);
         let suspense_cx = use_context::<SuspenseContext>(cx);
 
         let v = self
@@ -882,6 +884,22 @@ where
                     }
                 }
             }
+
+            if let Some(g) = &global_suspense_cx {
+                if let Ok(ref mut contexts) = suspense_contexts.try_borrow_mut()
+                {
+                    let s = g.as_inner();
+                    if !contexts.contains(s) {
+                        contexts.insert(*s);
+
+                        if !has_value {
+                            s.increment(
+                                serializable != ResourceSerialization::Local,
+                            );
+                        }
+                    }
+                }
+            }
         };
 
         create_isomorphic_effect(cx, increment);
@@ -1005,6 +1023,7 @@ where
     }
 }
 
+#[derive(Clone)]
 pub(crate) enum AnyResource {
     Unserializable(Rc<dyn UnserializableResource>),
     Serializable(Rc<dyn SerializableResource>),

leptos_reactive/src/runtime.rs

@@ -743,7 +743,7 @@ impl Runtime {
         S: 'static,
         T: 'static,
     {
-        let resources = self.resources.borrow();
+        let resources = { self.resources.borrow().clone() };
         let res = resources.get(id);
         if let Some(res) = res {
             let res_state = match res {
@@ -796,7 +796,8 @@ impl Runtime {
         cx: Scope,
     ) -> FuturesUnordered<PinnedFuture<(ResourceId, String)>> {
         let f = FuturesUnordered::new();
-        for (id, resource) in self.resources.borrow().iter() {
+        let resources = { self.resources.borrow().clone() };
+        for (id, resource) in resources.iter() {
             if let AnyResource::Serializable(resource) = resource {
                 f.push(resource.to_serialization_resolver(cx, id));
             }

leptos_reactive/src/selector.rs

@@ -3,9 +3,7 @@ use crate::{
     create_isomorphic_effect, create_signal, ReadSignal, Scope, SignalUpdate,
     WriteSignal,
 };
-use std::{
-    cell::RefCell, collections::HashMap, fmt::Debug, hash::Hash, rc::Rc,
-};
+use std::{cell::RefCell, collections::HashMap, hash::Hash, rc::Rc};
 
 /// Creates a conditional signal that only notifies subscribers when a change
 /// in the source signal’s value changes whether it is equal to the key value
@@ -52,7 +50,7 @@ pub fn create_selector<T>(
     source: impl Fn() -> T + Clone + 'static,
 ) -> impl Fn(T) -> bool + Clone
 where
-    T: PartialEq + Eq + Debug + Clone + Hash + 'static,
+    T: PartialEq + Eq + Clone + Hash + 'static,
 {
     create_selector_with_fn(cx, source, PartialEq::eq)
 }
@@ -69,7 +67,7 @@ pub fn create_selector_with_fn<T>(
     f: impl Fn(&T, &T) -> bool + Clone + 'static,
 ) -> impl Fn(T) -> bool + Clone
 where
-    T: PartialEq + Eq + Debug + Clone + Hash + 'static,
+    T: PartialEq + Eq + Clone + Hash + 'static,
 {
     #[allow(clippy::type_complexity)]
     let subs: Rc<

leptos_reactive/src/signal.rs

@@ -17,7 +17,7 @@ use thiserror::Error;
 macro_rules! impl_get_fn_traits {
     ($($ty:ident $(($method_name:ident))?),*) => {
         $(
-            #[cfg(feature = "nightly")]
+            #[cfg(not(feature = "stable"))]
             impl<T: Clone> FnOnce<()> for $ty<T> {
                 type Output = T;
 
@@ -27,7 +27,7 @@ macro_rules! impl_get_fn_traits {
                 }
             }
 
-            #[cfg(feature = "nightly")]
+            #[cfg(not(feature = "stable"))]
             impl<T: Clone> FnMut<()> for $ty<T> {
                 #[inline(always)]
                 extern "rust-call" fn call_mut(&mut self, _args: ()) -> Self::Output {
@@ -35,7 +35,7 @@ macro_rules! impl_get_fn_traits {
                 }
             }
 
-            #[cfg(feature = "nightly")]
+            #[cfg(not(feature = "stable"))]
             impl<T: Clone> Fn<()> for $ty<T> {
                 #[inline(always)]
                 extern "rust-call" fn call(&self, _args: ()) -> Self::Output {
@@ -55,7 +55,7 @@ macro_rules! impl_get_fn_traits {
 macro_rules! impl_set_fn_traits {
     ($($ty:ident $($method_name:ident)?),*) => {
         $(
-            #[cfg(feature = "nightly")]
+            #[cfg(not(feature = "stable"))]
             impl<T> FnOnce<(T,)> for $ty<T> {
                 type Output = ();
 
@@ -65,7 +65,7 @@ macro_rules! impl_set_fn_traits {
                 }
             }
 
-            #[cfg(feature = "nightly")]
+            #[cfg(not(feature = "stable"))]
             impl<T> FnMut<(T,)> for $ty<T> {
                 #[inline(always)]
                 extern "rust-call" fn call_mut(&mut self, args: (T,)) -> Self::Output {
@@ -73,7 +73,7 @@ macro_rules! impl_set_fn_traits {
                 }
             }
 
-            #[cfg(feature = "nightly")]
+            #[cfg(not(feature = "stable"))]
             impl<T> Fn<(T,)> for $ty<T> {
                 #[inline(always)]
                 extern "rust-call" fn call(&self, args: (T,)) -> Self::Output {
@@ -167,18 +167,6 @@ pub trait SignalUpdate<T> {
     #[track_caller]
     fn update(&self, f: impl FnOnce(&mut T));
 
-    /// Applies a function to the current value to mutate it in place
-    /// and notifies subscribers that the signal has changed. Returns
-    /// [`Some(O)`] if the signal is still valid, [`None`] otherwise.
-    ///
-    /// **Note:** `update()` does not auto-memoize, i.e., it will notify subscribers
-    /// even if the value has not actually changed.
-    #[deprecated = "Please use `try_update` instead. This method will be \
-                    removed in a future version of this crate"]
-    fn update_returning<O>(&self, f: impl FnOnce(&mut T) -> O) -> Option<O> {
-        self.try_update(f)
-    }
-
     /// Applies a function to the current value to mutate it in place
     /// and notifies subscribers that the signal has changed. Returns
     /// [`Some(O)`] if the signal is still valid, [`None`] otherwise.
@@ -249,19 +237,6 @@ pub trait SignalUpdateUntracked<T> {
     #[track_caller]
     fn update_untracked(&self, f: impl FnOnce(&mut T));
 
-    /// Runs the provided closure with a mutable reference to the current
-    /// value without notifying dependents and returns
-    /// the value the closure returned.
-    #[deprecated = "Please use `try_update_untracked` instead. This method \
-                    will be removed in a future version of `leptos`"]
-    #[inline(always)]
-    fn update_returning_untracked<U>(
-        &self,
-        f: impl FnOnce(&mut T) -> U,
-    ) -> Option<U> {
-        self.try_update_untracked(f)
-    }
-
     /// Runs the provided closure with a mutable reference to the current
     /// value without notifying dependents and returns
     /// the value the closure returned.
@@ -930,27 +905,6 @@ impl<T> SignalUpdateUntracked<T> for WriteSignal<T> {
         self.id.update_with_no_effect(self.runtime, f);
     }
 
-    #[cfg_attr(
-        any(debug_assertions, feature = "ssr"),
-        instrument(
-            level = "trace",
-            name = "WriteSignal::update_returning_untracked()",
-            skip_all,
-            fields(
-                id = ?self.id,
-                defined_at = %self.defined_at,
-                ty = %std::any::type_name::<T>()
-            )
-        )
-    )]
-    #[inline(always)]
-    fn update_returning_untracked<U>(
-        &self,
-        f: impl FnOnce(&mut T) -> U,
-    ) -> Option<U> {
-        self.id.update_with_no_effect(self.runtime, f)
-    }
-
     #[inline(always)]
     fn try_update_untracked<O>(
         &self,
@@ -1345,27 +1299,6 @@ impl<T> SignalUpdateUntracked<T> for RwSignal<T> {
         self.id.update_with_no_effect(self.runtime, f);
     }
 
-    #[cfg_attr(
- any(debug_assertions, features="ssr"),
-    instrument(
-        level = "trace",
-        name = "RwSignal::update_returning_untracked()",
-        skip_all,
-        fields(
-            id = ?self.id,
-            defined_at = %self.defined_at,
-            ty = %std::any::type_name::<T>()
-        )
-    )
-    )]
-    #[inline(always)]
-    fn update_returning_untracked<U>(
-        &self,
-        f: impl FnOnce(&mut T) -> U,
-    ) -> Option<U> {
-        self.id.update_with_no_effect(self.runtime, f)
-    }
-
     #[cfg_attr(
         any(debug_assertions, feature = "ssr"),
         instrument(

leptos_reactive/src/slice.rs

@@ -68,16 +68,41 @@ use crate::{
 /// // setting name only causes name to log, not count
 /// set_name("Bob".into());
 /// ```
-pub fn create_slice<T, O>(
+pub fn create_slice<T, O, S>(
     cx: Scope,
     signal: RwSignal<T>,
     getter: impl Fn(&T) -> O + Clone + Copy + 'static,
-    setter: impl Fn(&mut T, O) + Clone + Copy + 'static,
-) -> (Signal<O>, SignalSetter<O>)
+    setter: impl Fn(&mut T, S) + Clone + Copy + 'static,
+) -> (Signal<O>, SignalSetter<S>)
 where
     O: PartialEq,
 {
-    let getter = create_memo(cx, move |_| signal.with(getter));
-    let setter = move |value| signal.update(|x| setter(x, value));
-    (getter.into(), setter.mapped_signal_setter(cx))
+    (
+        create_read_slice(cx, signal, getter),
+        create_write_slice(cx, signal, setter),
+    )
+}
+
+/// Takes a memoized, read-only slice of a signal. This is equivalent to the
+/// read-only half of [`create_slice`].
+pub fn create_read_slice<T, O>(
+    cx: Scope,
+    signal: RwSignal<T>,
+    getter: impl Fn(&T) -> O + Clone + Copy + 'static,
+) -> Signal<O>
+where
+    O: PartialEq,
+{
+    create_memo(cx, move |_| signal.with(getter)).into()
+}
+
+/// Creates a setter to access one slice of a signal. This is equivalent to the
+/// write-only half of [`create_slice`].
+pub fn create_write_slice<T, O>(
+    cx: Scope,
+    signal: RwSignal<T>,
+    setter: impl Fn(&mut T, O) + Clone + Copy + 'static,
+) -> SignalSetter<O> {
+    let setter = move |value| signal.update(|x| setter(x, value));
+    setter.mapped_signal_setter(cx)
 }

leptos_reactive/src/stored_value.rs

@@ -39,8 +39,7 @@ impl<T> Clone for StoredValue<T> {
 impl<T> Copy for StoredValue<T> {}
 
 impl<T> StoredValue<T> {
-    /// Returns a clone of the signals current value, subscribing the effect
-    /// to this signal.
+    /// Returns a clone of the current stored value.
     ///
     /// # Panics
     /// Panics if you try to access a value stored in a [`Scope`] that has been disposed.
@@ -56,42 +55,8 @@ impl<T> StoredValue<T> {
     /// }
     /// let data = store_value(cx, MyCloneableData { value: "a".into() });
     ///
-    /// // calling .get() clones and returns the value
-    /// assert_eq!(data.get().value, "a");
-    /// // there's a short-hand getter form
-    /// assert_eq!(data().value, "a");
-    /// # });
-    /// ```
-    #[track_caller]
-    #[deprecated = "Please use `get_value` instead, as this method does not \
-                    track the stored value. This method will also be removed \
-                    in a future version of `leptos`"]
-    pub fn get(&self) -> T
-    where
-        T: Clone,
-    {
-        self.get_value()
-    }
-
-    /// Returns a clone of the signals current value, subscribing the effect
-    /// to this signal.
-    ///
-    /// # Panics
-    /// Panics if you try to access a value stored in a [`Scope`] that has been disposed.
-    ///
-    /// # Examples
-    /// ```
-    /// # use leptos_reactive::*;
-    /// # create_scope(create_runtime(), |cx| {
-    ///
-    /// #[derive(Clone)]
-    /// pub struct MyCloneableData {
-    ///     pub value: String,
-    /// }
-    /// let data = store_value(cx, MyCloneableData { value: "a".into() });
-    ///
-    /// // calling .get() clones and returns the value
-    /// assert_eq!(data.get().value, "a");
+    /// // calling .get_value() clones and returns the value
+    /// assert_eq!(data.get_value().value, "a");
     /// // there's a short-hand getter form
     /// assert_eq!(data().value, "a");
     /// # });
@@ -104,19 +69,7 @@ impl<T> StoredValue<T> {
         self.try_get_value().expect("could not get stored value")
     }
 
-    /// Same as [`StoredValue::get`] but will not panic by default.
-    #[track_caller]
-    #[deprecated = "Please use `try_get_value` instead, as this method does \
-                    not track the stored value. This method will also be \
-                    removed in a future version of `leptos`"]
-    pub fn try_get(&self) -> Option<T>
-    where
-        T: Clone,
-    {
-        self.try_get_value()
-    }
-
-    /// Same as [`StoredValue::get`] but will not panic by default.
+    /// Same as [`StoredValue::get_value`] but will not panic by default.
     #[track_caller]
     pub fn try_get_value(&self) -> Option<T>
     where
@@ -125,34 +78,7 @@ impl<T> StoredValue<T> {
         self.try_with_value(T::clone)
     }
 
-    /// Applies a function to the current stored value.
-    ///
-    /// # Panics
-    /// Panics if you try to access a value stored in a [`Scope`] that has been disposed.
-    ///
-    /// # Examples
-    /// ```
-    /// # use leptos_reactive::*;
-    /// # create_scope(create_runtime(), |cx| {
-    ///
-    /// pub struct MyUncloneableData {
-    ///   pub value: String
-    /// }
-    /// let data = store_value(cx, MyUncloneableData { value: "a".into() });
-    ///
-    /// // calling .with() to extract the value
-    /// assert_eq!(data.with(|data| data.value.clone()), "a");
-    /// });
-    /// ```
-    #[track_caller]
-    #[deprecated = "Please use `with_value` instead, as this method does not \
-                    track the stored value. This method will also be removed \
-                    in a future version of `leptos`"]
-    pub fn with<U>(&self, f: impl FnOnce(&T) -> U) -> U {
-        self.with_value(f)
-    }
-
-    /// Applies a function to the current stored value.
+    /// Applies a function to the current stored value and returns the result.
     ///
     /// # Panics
     /// Panics if you try to access a value stored in a [`Scope`] that has been disposed.
@@ -167,8 +93,8 @@ impl<T> StoredValue<T> {
     /// }
     /// let data = store_value(cx, MyUncloneableData { value: "a".into() });
     ///
-    /// // calling .with() to extract the value
-    /// assert_eq!(data.with(|data| data.value.clone()), "a");
+    /// // calling .with_value() to extract the value
+    /// assert_eq!(data.with_value(|data| data.value.clone()), "a");
     /// # });
     /// ```
     #[track_caller]
@@ -178,17 +104,8 @@ impl<T> StoredValue<T> {
         self.try_with_value(f).expect("could not get stored value")
     }
 
-    /// Same as [`StoredValue::with`] but returns [`Some(O)]` only if
-    /// the signal is still valid. [`None`] otherwise.
-    #[deprecated = "Please use `try_with_value` instead, as this method does \
-                    not track the stored value. This method will also be \
-                    removed in a future version of `leptos`"]
-    pub fn try_with<O>(&self, f: impl FnOnce(&T) -> O) -> Option<O> {
-        self.try_with_value(f)
-    }
-
-    /// Same as [`StoredValue::with`] but returns [`Some(O)]` only if
-    /// the signal is still valid. [`None`] otherwise.
+    /// Same as [`StoredValue::with_value`] but returns [`Some(O)]` only if
+    /// the stored value has not yet been disposed. [`None`] otherwise.
     pub fn try_with_value<O>(&self, f: impl FnOnce(&T) -> O) -> Option<O> {
         with_runtime(self.runtime, |runtime| {
             let value = {
@@ -214,8 +131,8 @@ impl<T> StoredValue<T> {
     ///   pub value: String
     /// }
     /// let data = store_value(cx, MyUncloneableData { value: "a".into() });
-    /// data.update(|data| data.value = "b".into());
-    /// assert_eq!(data.with(|data| data.value.clone()), "b");
+    /// data.update_value(|data| data.value = "b".into());
+    /// assert_eq!(data.with_value(|data| data.value.clone()), "b");
     /// });
     /// ```
     ///
@@ -228,54 +145,12 @@ impl<T> StoredValue<T> {
     /// }
     ///
     /// let data = store_value(cx, MyUncloneableData { value: "a".into() });
-    /// let updated = data.update_returning(|data| {
+    /// let updated = data.try_update_value(|data| {
     ///     data.value = "b".into();
     ///     data.value.clone()
     /// });
     ///
-    /// assert_eq!(data.with(|data| data.value.clone()), "b");
-    /// assert_eq!(updated, Some(String::from("b")));
-    /// # });
-    /// ```
-    #[track_caller]
-    #[deprecated = "Please use `update_value` instead, as this method does not \
-                    track the stored value. This method will also be removed \
-                    in a future version of `leptos`"]
-    pub fn update(&self, f: impl FnOnce(&mut T)) {
-        self.update_value(f);
-    }
-
-    /// Updates the stored value.
-    ///
-    /// # Examples
-    /// ```
-    /// # use leptos_reactive::*;
-    /// # create_scope(create_runtime(), |cx| {
-    ///
-    /// pub struct MyUncloneableData {
-    ///   pub value: String
-    /// }
-    /// let data = store_value(cx, MyUncloneableData { value: "a".into() });
-    /// data.update(|data| data.value = "b".into());
-    /// assert_eq!(data.with(|data| data.value.clone()), "b");
-    /// });
-    /// ```
-    ///
-    /// ```
-    /// use leptos_reactive::*;
-    /// # create_scope(create_runtime(), |cx| {
-    ///
-    /// pub struct MyUncloneableData {
-    ///     pub value: String,
-    /// }
-    ///
-    /// let data = store_value(cx, MyUncloneableData { value: "a".into() });
-    /// let updated = data.update_returning(|data| {
-    ///     data.value = "b".into();
-    ///     data.value.clone()
-    /// });
-    ///
-    /// assert_eq!(data.with(|data| data.value.clone()), "b");
+    /// assert_eq!(data.with_value(|data| data.value.clone()), "b");
     /// assert_eq!(updated, Some(String::from("b")));
     /// # });
     /// ```
@@ -285,20 +160,8 @@ impl<T> StoredValue<T> {
             .expect("could not set stored value");
     }
 
-    /// Updates the stored value.
-    #[track_caller]
-    #[deprecated = "Please use `try_update_value` instead, as this method does \
-                    not track the stored value. This method will also be \
-                    removed in a future version of `leptos`"]
-    pub fn update_returning<U>(
-        &self,
-        f: impl FnOnce(&mut T) -> U,
-    ) -> Option<U> {
-        self.try_update_value(f)
-    }
-
-    /// Same as [`Self::update`], but returns [`Some(O)`] if the
-    /// signal is still valid, [`None`] otherwise.
+    /// Same as [`Self::update_value`], but returns [`Some(O)`] if the
+    /// stored value has not yet been disposed, [`None`] otherwise.
     pub fn try_update_value<O>(self, f: impl FnOnce(&mut T) -> O) -> Option<O> {
         with_runtime(self.runtime, |runtime| {
             let values = runtime.stored_values.borrow();
@@ -311,29 +174,6 @@ impl<T> StoredValue<T> {
         .flatten()
     }
 
-    /// Sets the stored value.
-    ///
-    /// # Examples
-    /// ```
-    /// # use leptos_reactive::*;
-    /// # create_scope(create_runtime(), |cx| {
-    ///
-    /// pub struct MyUncloneableData {
-    ///   pub value: String
-    /// }
-    /// let data = store_value(cx, MyUncloneableData { value: "a".into() });
-    /// data.set(MyUncloneableData { value: "b".into() });
-    /// assert_eq!(data.with(|data| data.value.clone()), "b");
-    /// });
-    /// ```
-    #[track_caller]
-    #[deprecated = "Please use `set_value` instead, as this method does not \
-                    track the stored value. This method will also be removed \
-                    in a future version of `leptos`"]
-    pub fn set(&self, value: T) {
-        self.set_value(value);
-    }
-
     /// Sets the stored value.
     ///
     /// # Examples
@@ -345,8 +185,8 @@ impl<T> StoredValue<T> {
     ///     pub value: String,
     /// }
     /// let data = store_value(cx, MyUncloneableData { value: "a".into() });
-    /// data.set(MyUncloneableData { value: "b".into() });
-    /// assert_eq!(data.with(|data| data.value.clone()), "b");
+    /// data.set_value(MyUncloneableData { value: "b".into() });
+    /// assert_eq!(data.with_value(|data| data.value.clone()), "b");
     /// # });
     /// ```
     #[track_caller]
@@ -354,8 +194,8 @@ impl<T> StoredValue<T> {
         self.try_set_value(value);
     }
 
-    /// Same as [`Self::set`], but returns [`None`] if the signal is
-    /// still valid, [`Some(T)`] otherwise.
+    /// Same as [`Self::set_value`], but returns [`None`] if the
+    /// stored value has not yet been disposed, [`Some(T)`] otherwise.
     pub fn try_set_value(&self, value: T) -> Option<T> {
         with_runtime(self.runtime, |runtime| {
             let values = runtime.stored_values.borrow();
@@ -403,10 +243,10 @@ impl<T> StoredValue<T> {
 ///     pub value: String,
 /// }
 ///
-/// // ✅ you can move the `StoredValue` and access it with .with()
+/// // ✅ you can move the `StoredValue` and access it with .with_value()
 /// let data = store_value(cx, MyUncloneableData { value: "a".into() });
-/// let callback_a = move || data.with(|data| data.value == "a");
-/// let callback_b = move || data.with(|data| data.value == "b");
+/// let callback_a = move || data.with_value(|data| data.value == "a");
+/// let callback_b = move || data.with_value(|data| data.value == "b");
 /// # }).dispose();
 /// ```
 #[track_caller]

leptos_reactive/src/suspense.rs

@@ -2,11 +2,12 @@
 
 #![forbid(unsafe_code)]
 use crate::{
-    create_rw_signal, create_signal, queue_microtask, store_value, ReadSignal,
-    RwSignal, Scope, SignalUpdate, StoredValue, WriteSignal,
+    create_isomorphic_effect, create_rw_signal, create_signal, queue_microtask,
+    signal::SignalGet, store_value, ReadSignal, RwSignal, Scope, SignalSet,
+    SignalUpdate, StoredValue, WriteSignal,
 };
 use futures::Future;
-use std::{borrow::Cow, collections::VecDeque, pin::Pin};
+use std::{borrow::Cow, cell::RefCell, collections::VecDeque, pin::Pin};
 
 /// Tracks [`Resource`](crate::Resource)s that are read under a suspense context,
 /// i.e., within a [`Suspense`](https://docs.rs/leptos_core/latest/leptos_core/fn.Suspense.html) component.
@@ -20,6 +21,24 @@ pub struct SuspenseContext {
     pub(crate) should_block: StoredValue<bool>,
 }
 
+/// A single, global suspense context that will be checked when resources
+/// are read. This won’t be “blocked” by lower suspense components. This is
+/// useful for e.g., holding route transitions.
+#[derive(Copy, Clone, Debug)]
+pub struct GlobalSuspenseContext(SuspenseContext);
+
+impl GlobalSuspenseContext {
+    /// Creates an empty global suspense context.
+    pub fn new(cx: Scope) -> Self {
+        Self(SuspenseContext::new(cx))
+    }
+
+    /// Returns a reference to the underlying suspense context.
+    pub fn as_inner(&self) -> &SuspenseContext {
+        &self.0
+    }
+}
+
 impl SuspenseContext {
     /// Whether the suspense contains local resources at this moment,
     /// and therefore can't be serialized
@@ -32,6 +51,25 @@ impl SuspenseContext {
     pub fn should_block(&self) -> bool {
         self.should_block.get_value()
     }
+
+    /// Returns a `Future` that resolves when this suspense is resolved.
+    pub fn to_future(&self, cx: Scope) -> impl Future<Output = ()> {
+        use futures::StreamExt;
+
+        let pending_resources = self.pending_resources;
+        let (tx, mut rx) = futures::channel::mpsc::channel(1);
+        let tx = RefCell::new(tx);
+        queue_microtask(move || {
+            create_isomorphic_effect(cx, move |_| {
+                if pending_resources.get() == 0 {
+                    _ = tx.borrow_mut().try_send(());
+                }
+            })
+        });
+        async move {
+            rx.next().await;
+        }
+    }
 }
 
 impl std::hash::Hash for SuspenseContext {
@@ -98,6 +136,12 @@ impl SuspenseContext {
         });
     }
 
+    /// Resets the counter of pending resources.
+    pub fn clear(&self) {
+        self.set_pending_resources.set(0);
+        self.pending_serializable_resources.set(0);
+    }
+
     /// Tests whether all of the pending resources have resolved.
     pub fn ready(&self) -> bool {
         self.pending_resources

leptos_reactive/src/trigger.rs

@@ -11,7 +11,7 @@ use crate::{
 /// Reactive Trigger, notifies reactive code to rerun.
 ///
 /// See [`create_trigger`] for more.
-#[derive(Clone, Copy)]
+#[derive(Clone, Copy, Debug, PartialEq, Eq)]
 pub struct Trigger {
     pub(crate) runtime: RuntimeId,
     pub(crate) id: NodeId,
@@ -225,7 +225,7 @@ impl SignalSet<()> for Trigger {
     }
 }
 
-#[cfg(feature = "nightly")]
+#[cfg(not(feature = "stable"))]
 impl FnOnce<()> for Trigger {
     type Output = ();
 
@@ -235,7 +235,7 @@ impl FnOnce<()> for Trigger {
     }
 }
 
-#[cfg(feature = "nightly")]
+#[cfg(not(feature = "stable"))]
 impl FnMut<()> for Trigger {
     #[inline(always)]
     extern "rust-call" fn call_mut(&mut self, _args: ()) -> Self::Output {
@@ -243,7 +243,7 @@ impl FnMut<()> for Trigger {
     }
 }
 
-#[cfg(feature = "nightly")]
+#[cfg(not(feature = "stable"))]
 impl Fn<()> for Trigger {
     #[inline(always)]
     extern "rust-call" fn call(&self, _args: ()) -> Self::Output {

leptos_reactive/tests/effect.rs

@@ -1,10 +1,10 @@
-#[cfg(feature = "nightly")]
+#[cfg(not(feature = "stable"))]
 use leptos_reactive::{
     create_isomorphic_effect, create_memo, create_runtime, create_rw_signal,
     create_scope, create_signal, SignalSet,
 };
 
-#[cfg(feature = "nightly")]
+#[cfg(not(feature = "stable"))]
 #[test]
 fn effect_runs() {
     use std::{cell::RefCell, rc::Rc};
@@ -32,7 +32,7 @@ fn effect_runs() {
     .dispose()
 }
 
-#[cfg(feature = "nightly")]
+#[cfg(not(feature = "stable"))]
 #[test]
 fn effect_tracks_memo() {
     use std::{cell::RefCell, rc::Rc};
@@ -62,7 +62,7 @@ fn effect_tracks_memo() {
     .dispose()
 }
 
-#[cfg(feature = "nightly")]
+#[cfg(not(feature = "stable"))]
 #[test]
 fn untrack_mutes_effect() {
     use std::{cell::RefCell, rc::Rc};
@@ -92,7 +92,7 @@ fn untrack_mutes_effect() {
     .dispose()
 }
 
-#[cfg(feature = "nightly")]
+#[cfg(not(feature = "stable"))]
 #[test]
 fn batching_actually_batches() {
     use std::{cell::Cell, rc::Rc};

leptos_reactive/tests/memo.rs

@@ -1,9 +1,9 @@
-#[cfg(feature = "nightly")]
+#[cfg(not(feature = "stable"))]
 use leptos_reactive::{
     create_memo, create_runtime, create_scope, create_signal,
 };
 
-#[cfg(feature = "nightly")]
+#[cfg(not(feature = "stable"))]
 #[test]
 fn basic_memo() {
     create_scope(create_runtime(), |cx| {
@@ -13,7 +13,7 @@ fn basic_memo() {
     .dispose()
 }
 
-#[cfg(feature = "nightly")]
+#[cfg(not(feature = "stable"))]
 #[test]
 fn memo_with_computed_value() {
     create_scope(create_runtime(), |cx| {
@@ -29,7 +29,7 @@ fn memo_with_computed_value() {
     .dispose()
 }
 
-#[cfg(feature = "nightly")]
+#[cfg(not(feature = "stable"))]
 #[test]
 fn nested_memos() {
     create_scope(create_runtime(), |cx| {
@@ -51,7 +51,7 @@ fn nested_memos() {
     .dispose()
 }
 
-#[cfg(feature = "nightly")]
+#[cfg(not(feature = "stable"))]
 #[test]
 fn memo_runs_only_when_inputs_change() {
     use std::{cell::Cell, rc::Rc};
@@ -94,7 +94,7 @@ fn memo_runs_only_when_inputs_change() {
     .dispose()
 }
 
-#[cfg(feature = "nightly")]
+#[cfg(not(feature = "stable"))]
 #[test]
 fn diamond_problem() {
     use std::{cell::Cell, rc::Rc};
@@ -131,7 +131,7 @@ fn diamond_problem() {
     .dispose()
 }
 
-#[cfg(feature = "nightly")]
+#[cfg(not(feature = "stable"))]
 #[test]
 fn dynamic_dependencies() {
     use leptos_reactive::create_isomorphic_effect;

leptos_reactive/tests/signal.rs

@@ -1,7 +1,7 @@
-#[cfg(feature = "nightly")]
+#[cfg(not(feature = "stable"))]
 use leptos_reactive::{create_runtime, create_scope, create_signal};
 
-#[cfg(feature = "nightly")]
+#[cfg(not(feature = "stable"))]
 #[test]
 fn basic_signal() {
     create_scope(create_runtime(), |cx| {
@@ -13,7 +13,7 @@ fn basic_signal() {
     .dispose()
 }
 
-#[cfg(feature = "nightly")]
+#[cfg(not(feature = "stable"))]
 #[test]
 fn derived_signals() {
     create_scope(create_runtime(), |cx| {

leptos_reactive/tests/untracked.rs

@@ -1,10 +1,10 @@
-#[cfg(feature = "nightly")]
+#[cfg(not(feature = "stable"))]
 use leptos_reactive::{
     create_isomorphic_effect, create_runtime, create_scope, create_signal,
     signal_prelude::*, SignalGetUntracked, SignalSetUntracked,
 };
 
-#[cfg(feature = "nightly")]
+#[cfg(not(feature = "stable"))]
 #[test]
 fn untracked_set_doesnt_trigger_effect() {
     use std::{cell::RefCell, rc::Rc};
@@ -36,7 +36,7 @@ fn untracked_set_doesnt_trigger_effect() {
     .dispose()
 }
 
-#[cfg(feature = "nightly")]
+#[cfg(not(feature = "stable"))]
 #[test]
 fn untracked_get_doesnt_trigger_effect() {
     use std::{cell::RefCell, rc::Rc};

leptos_server/Cargo.toml

@@ -26,7 +26,7 @@ default-tls = ["server_fn/default-tls"]
 hydrate = ["leptos_reactive/hydrate"]
 rustls = ["server_fn/rustls"]
 ssr = ["leptos_reactive/ssr", "server_fn/ssr"]
-nightly = ["leptos_reactive/nightly", "server_fn/nightly"]
+stable = ["leptos_reactive/stable", "server_fn/stable"]
 
 [package.metadata.cargo-all-features]
 denylist = ["stable"]

meta/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "leptos_meta"
-version = "0.3.0-alpha"
+version = "0.3.0"
 edition = "2021"
 authors = ["Greg Johnston"]
 license = "MIT"
@@ -12,6 +12,7 @@ cfg-if = "1"
 leptos = { workspace = true }
 tracing = "0.1"
 wasm-bindgen = "0.2"
+indexmap = "1"
 
 [dependencies.web-sys]
 version = "0.3"
@@ -22,7 +23,7 @@ default = []
 csr = ["leptos/csr", "leptos/tracing"]
 hydrate = ["leptos/hydrate", "leptos/tracing"]
 ssr = ["leptos/ssr", "leptos/tracing"]
-nightly = ["leptos/nightly", "leptos/tracing"]
+stable = ["leptos/stable", "leptos/tracing"]
 
 [package.metadata.cargo-all-features]
 denylist = ["stable"]