examples: better practice for view types in todos

`cargo make test` sets the --all-features flag by default. This change
clears it.

.gitignore

@@ -7,3 +7,5 @@ Cargo.lock
 **/*.rs.bk
 .DS_Store
 .idea
+.direnv
+.envrc

Makefile.toml

@@ -49,6 +49,7 @@ dependencies = [
 	{ name = "check", path = "examples/parent_child" },
 	{ name = "check", path = "examples/router" },
 	{ name = "check", path = "examples/session_auth_axum" },
+	{ name = "check", path = "examples/slots" },
 	{ name = "check", path = "examples/ssr_modes" },
 	{ name = "check", path = "examples/ssr_modes_axum" },
 	{ name = "check", path = "examples/tailwind" },
@@ -75,8 +76,20 @@ command = "cargo"
 args = ["+nightly", "test-all-features"]
 install_crate = "cargo-all-features"
 
+[tasks.test-examples]
+description = "Run all unit and web tests for examples"
+cwd = "examples"
+command = "cargo"
+args = ["make", "test-unit-and-web"]
+
+[tasks.verify-examples]
+description = "Run all quality checks and tests for examples"
+cwd = "examples"
+command = "cargo"
+args = ["make", "verify-flow"]
+
 [env]
-RUSTFLAGS=""
+RUSTFLAGS = ""
 
 [env.github-actions]
-RUSTFLAGS="-D warnings"
+RUSTFLAGS = "-D warnings"

docs/COMMON_BUGS.md

@@ -28,6 +28,52 @@ let (a, set_a) = create_signal(cx, 0);
 let b = move || a () > 5;
 ```
 
+### Nested signal updates/reads triggering panic
+
+Sometimes you have nested signals: for example, hash-map that can change over time, each of whose values can also change over time:
+
+```rust
+#[component]
+pub fn App(cx: Scope) -> impl IntoView {
+    let resources = create_rw_signal(cx, HashMap::new());
+
+    let update = move |id: usize| {
+        resources.update(|resources| {
+            resources
+                .entry(id)
+                .or_insert_with(|| create_rw_signal(cx, 0))
+                .update(|amount| *amount += 1)
+        })
+    };
+
+    view! { cx,
+        <div>
+            <pre>{move || format!("{:#?}", resources.get().into_iter().map(|(id, resource)| (id, resource.get())).collect::<Vec<_>>())}</pre>
+            <button on:click=move |_| update(1)>"+"</button>
+        </div>
+    }
+}
+```
+
+Clicking the button twice will cause a panic, because of the nested signal *read*. Calling the `update` function on `resources` immediately takes out a mutable borrow on `resources`, then updates the `resource` signal—which re-runs the effect that reads from the signals, which tries to immutably access `resources` and panics. It's the nested update here which causes a problem, because the inner update triggers and effect that tries to read both signals while the outer is still updating.
+
+You can fix this fairly easily by using the [`Scope::batch()`](https://docs.rs/leptos/latest/leptos/struct.Scope.html#method.batch) method:
+
+```rust
+    let update = move |id: usize| {
+        cx.batch(move || {
+            resources.update(|resources| {
+                resources
+                    .entry(id)
+                    .or_insert_with(|| create_rw_signal(cx, 0))
+                    .update(|amount| *amount += 1)
+            })
+        });
+    };
+```
+
+This delays running any effects until after both updates are made, preventing the conflict entirely without requiring any other restructuring.
+
 ## Templates and the DOM
 
 ### `<input value=...>` doesn't update or stops updating

docs/book/src/SUMMARY.md

@@ -30,20 +30,21 @@
 - [Interlude: Styling](./interlude_styling.md)
 - [Metadata]()
 - [Server Side Rendering](./ssr/README.md)
-  - [`cargo-leptos`]()
-  - [The Life of a Page Load](./ssr/21_life_cycle.md)
-  - [Async Rendering and SSR “Modes”](./ssr/22_ssr_modes.md)
-  - [Hydration Footguns]()
+  - [`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]()
   - [Extractors]()
     - [Axum]()
     - [Actix]()
   - [Headers]()
   - [Cookies]()
-- [Server Functions]()
+- [Building Full-Stack Apps]()
   - [Actions]()
   - [Forms]()
   - [`<ActionForm/>`s]()
   - [Turning off WebAssembly]()
 - [Advanced Reactivity]()
-- [Appendix: Optimizing WASM Binary Size]()
+- [Appendix: Optimizing WASM Binary Size](./appendix_binary_size.md)

docs/book/src/appendix_binary_size.md

@@ -0,0 +1,58 @@
+# Appendix: Optimizing WASM Binary Size
+
+One of the primary downsides of deploying a Rust/WebAssembly frontend app is that splitting a WASM file into smaller chunks to be dynamically loaded is significantly more difficult than splitting a JavaScript bundle. There have been experiments like [`wasm-split`](https://emscripten.org/docs/optimizing/Module-Splitting.html) in the Emscripten ecosystem but at present there’s no way to split and dynamically load a Rust/`wasm-bindgen` binary. This means that the whole WASM binary needs to be loaded before your app becomes interactive. Because the WASM format is designed for streaming compilation, WASM files are much faster to compile per kilobyte than JavaScript files. (For a deeper look, you can [read this great article from the Mozilla team](https://hacks.mozilla.org/2018/01/making-webassembly-even-faster-firefoxs-new-streaming-and-tiering-compiler/) on streaming WASM compilation.)
+
+Still, it’s important to ship the smallest WASM binary to users that you can, as it will reduce their network usage and make your app interactive as quickly as possible.
+
+So what are some practical steps?
+
+## Things to Do
+
+1. Make sure you’re looking at a release build. (Debug builds are much, much larger.)
+2. Add a release profile for WASM that optimizes for size, not speed.
+
+For a `cargo-leptos` project, for example, you can add this to your `Cargo.toml`:
+
+```toml
+[profile.wasm-release]
+inherits = "release"
+opt-level = 'z'
+lto = true
+codegen-units = 1
+
+# ....
+
+[package.metadata.leptos]
+# ....
+lib-profile-release = "wasm-release"
+```
+
+This will hyper-optimize the WASM for your release build for size, while keeping your server build optimized for speed. (For a pure client-rendered app without server considerations, just use the `[profile.wasm-release]` block as your `[profile.release]`.)
+
+3. Always serve compressed WASM in production. WASM tends to compress very well, typically shrinking to less than 50% its uncompressed size, and it’s trivial to enable compression for static files being served from Actix or Axum.
+
+4. If you’re using nightly Rust, you can rebuild the standard library with this same profile rather than the prebuilt standard library that’s distributed with the `wasm32-unknown-unknown` target.
+
+To do this, create a file in your project at `.cargo/config.toml`
+
+```toml
+[unstable]
+build-std = ["std", "panic_abort", "core", "alloc"]
+build-std-features = ["panic_immediate_abort"]
+```
+
+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
+
+There are certain crates that tend to inflate binary sizes. For example, the `regex` crate with its default features adds about 500kb to a WASM binary (largely because it has to pull in Unicode table data!) In a size-conscious setting, you might consider avoiding regexes in general, or even dropping down and calling browser APIs to use the built-in regex engine instead. (This is what `leptos_router` does on the few occasions it needs a regular expression.)
+
+In general, Rust’s commitment to runtime performance is sometimes at odds with a commitment to a small binary. For example, Rust monomorphizes generic functions, meaning it creates a distinct copy of the function for each generic type it’s called with. This is significantly faster than dynamic dispatch, but increases binary size. Leptos tries to balance runtime performance with binary size considerations pretty carefully; but you might find that writing code that uses many generics tends to increase binary size. For example, if you have a generic component with a lot of code in its body and call it with four different types, remember that the compiler could include four copies of that same code. Refactoring to use a concrete inner function or helper can often maintain performance and ergonomics while reducing binary size.
+
+## A Final Thought
+
+Remember that in a server-rendered app, JS bundle size/WASM binary size affects only _one_ thing: time to interactivity on the first load. This is very important to a good user experience—nobody wants to click a button three times and have it do nothing because the interactive code is still loading—but it is not the only important measure.
+
+It’s especially worth remembering that streaming in a single WASM binary means all subsequent navigations are nearly instantaneous, depending only on any additional data loading. Precisely because your WASM binary is _not_ bundle split, navigating to a new route does not require loading additional JS/WASM, as it does in nearly every JavaScript framework. Is this copium? Maybe. Or maybe it’s just an honest trade-off between the two approaches!
+
+Always take the opportunity to optimize the low-hanging fruit in your application. And always test your app under real circumstances with real user network speeds and devices before making any heroic efforts.

docs/book/src/async/README.md

@@ -1,7 +1,7 @@
 # Working with `async`
 
 So far we’ve only been working with synchronous users interfaces: You provide some input,
-the app immediately process it and updates the interface. This is great, but is a tiny
+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.
 

docs/book/src/interlude_styling.md

@@ -109,4 +109,4 @@ pub fn MyComponent(cx: Scope) -> impl IntoView {
 
 ## Contributions Welcome
 
-Leptos no opinions on how you style your website or app, but we’re very happy to provide support to any tools you’re trying to create to make it easier. If you’re working on a CSS or styling approach that you’d like to add to this list, please let us know!
+Leptos has no opinions on how you style your website or app, but we’re very happy to provide support to any tools you’re trying to create to make it easier. If you’re working on a CSS or styling approach that you’d like to add to this list, please let us know!

docs/book/src/router/20_form.md

@@ -23,8 +23,6 @@ async fn fetch_results() {
 	// some async function to fetch our search results
 }
 
-#[component]
-pub fn Search(cx: Scope) -> impl IntoView {
 #[component]
 pub fn FormExample(cx: Scope) -> impl IntoView {
     // reactive access to URL query strings

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

@@ -0,0 +1,37 @@
+# Introducing `cargo-leptos`
+
+So far, we’ve just been running code in the browser and using Trunk to coordinate the build process and run a local development process. If we’re going to add server-side rendering, we’ll need to run our application code on the server as well. This means we’ll need to build two separate binaries, one compiled to native code and running the server, the other compiled to WebAssembly (WASM) and running in the user’s browser. Additionally, the server needs to know how to serve this WASM version (and the JavaScript required to initialize it) to the browser.
+
+This is not an insurmountable task but it adds some complication. For convenience and an easier developer experience, we built the [`cargo-leptos`](https://github.com/leptos-rs/cargo-leptos) build tool. `cargo-leptos` basically exists to coordinate the build process for your app, handling recompiling the server and client halves when you make changes, and adding some built-in support for things like Tailwind, SASS, and testing.
+
+Getting started is pretty easy. Just run
+
+```bash
+cargo install cargo-leptos
+```
+
+And then to create a new project, you can run either
+
+```bash
+# for an Actix template
+cargo leptos new --git leptos-rs/start
+```
+
+or
+
+```bash
+# for an Axum template
+cargo leptos new --git leptos-rs/start-axum
+```
+
+Now `cd` into the directory you’ve created and run
+
+```bash
+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).
+
+But what exactly is happening when you open our browser to `localhost:3000`? Well, read on to find out.

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

@@ -0,0 +1,148 @@
+# Hydration Bugs _(and how to avoid them)_
+
+## A Thought Experiment
+
+Let’s try an experiment to test your intuitions. Open up an app you’re server-rendering with `cargo-leptos`. (If you’ve just been using `trunk` so far to play with examples, go [clone a `cargo-leptos` template](./21_cargo_leptos.md) just for the sake of this exercise.)
+
+Put a log somewhere in your root component. (I usually call mine `<App/>`, but anything will do.)
+
+```rust
+#[component]
+pub fn App(cx: Scope) -> impl IntoView {
+	leptos::log!("where do I run?");
+	// ... whatever
+}
+```
+
+And let’s fire it up
+
+```bash
+cargo leptos watch
+```
+
+Where do you expect `where do I run?` to log?
+
+- In the command line where you’re running the server?
+- In the browser console when you load the page?
+- Neither?
+- Both?
+
+Try it out.
+
+...
+
+...
+
+...
+
+Okay, consider the spoiler alerted.
+
+You’ll notice of course that it logs in both places, assuming everything goes according to plan. In fact on the server it logs twice—first during the initial server startup, when Leptos renders your app once to extract the route tree, then a second time when you make a request. Each time you reload the page, `where do I run?` should log once on the server and once on the client.
+
+If you think about the description in the last couple sections, hopefully this makes sense. Your application runs once on the server, where it builds up a tree of HTML which is sent to the client. During this initial render, `where do I run?` logs on the server.
+
+Once the WASM binary has loaded in the browser, your application runs a second time, walking over the same user interface tree and adding interactivity.
+
+> Does that sound like a waste? It is, in a sense. But reducing that waste is a genuinely hard problem. It’s what some JS frameworks like Qwik are intended to solve, although it’s probably too early to tell whether it’s a net performance gain as opposed to other approaches.
+
+## The Potential for Bugs
+
+Okay, hopefully all of that made sense. But what does it have to do with the title of this chapter, which is “Hydration bugs (and how to avoid them)”?
+
+Remember that the application needs to run on both the server and the client. This generates a few different sets of potential issues you need to know how to avoid.
+
+### Mismatches between server and client code
+
+One way to create a bug is by creating a mismatch between the HTML that’s sent down by the server and what’s rendered on the client. It’s actually fairly hard to do this unintentionally, I think (at least judging by the bug reports I get from people.) But imagine I do something like this
+
+```rust
+#[component]
+pub fn App(cx: Scope) -> impl IntoView {
+    let data = if cfg!(target_arch = "wasm32") {
+        vec![0, 1, 2]
+    } else {
+        vec![]
+    };
+    data.into_iter()
+        .map(|value| view! { cx, <span>{value}</span> })
+        .collect::<Vec<_>>()
+}
+```
+
+In other words, if this is being compiled to WASM, it has three items; otherwise it’s empty.
+
+When I load the page in the browser, I see nothing. If I open the console I see a bunch of warnings:
+
+```
+element with id 0-0-1 not found, ignoring it for hydration
+element with id 0-0-2 not found, ignoring it for hydration
+element with id 0-0-3 not found, ignoring it for hydration
+component with id _0-0-4c not found, ignoring it for hydration
+component with id _0-0-4o not found, ignoring it for hydration
+```
+
+The WASM version of your app, running in the browser, expects to find three items; but the HTML has none.
+
+#### Solution
+
+It’s pretty rare that you do this intentionally, but it could happen from somehow running different logic on the server and in the browser. If you’re seeing warnings like this and you don’t think it’s your fault, it’s much more likely that it’s a bug with `<Suspense/>` or something. Feel free to go ahead and open an [issue](https://github.com/leptos-rs/leptos/issues) or [discussion](https://github.com/leptos-rs/leptos/discussions) on GitHub for help.
+
+### Not all client code can run on the server
+
+Imagine you happily import a dependency like `gloo-net` that you’ve been used to using to make requests in the browser, and use it in a `create_resource` in a server-rendered app.
+
+You’ll probably instantly see the dreaded message
+
+```
+panicked at 'cannot call wasm-bindgen imported functions on non-wasm targets'
+```
+
+Uh-oh.
+
+But of course this makes sense. We’ve just said that your app needs to run on the client and the server.
+
+#### Solution
+
+There are a few ways to avoid this:
+
+1. Only use libraries that can run on both the server and the client. `reqwest`, for example, works for making HTTP requests in both settings.
+2. Use different libraries on the server and the client, and gate them using the `#[cfg]` macro. ([Click here for an example](https://github.com/leptos-rs/leptos/blob/main/examples/hackernews/src/api.rs).)
+3. Wrap client-only code in `create_effect`. Because `create_effect` only runs on the client, this can be an effective way to access browser APIs that are not needed for initial rendering.
+
+For example, say that I want to store something in the browser’s `localStorage` whenever a signal changes.
+
+```rust
+#[component]
+pub fn App(cx: Scope) -> impl IntoView {
+    use gloo_storage::Storage;
+	let storage = gloo_storage::LocalStorage::raw();
+	leptos::log!("{storage:?}");
+}
+```
+
+This panics because I can’t access `LocalStorage` during server rendering.
+
+But if I wrap it in an effect...
+
+```rust
+#[component]
+pub fn App(cx: Scope) -> impl IntoView {
+    use gloo_storage::Storage;
+    create_effect(cx, move |_| {
+        let storage = gloo_storage::LocalStorage::raw();
+		leptos::log!("{storage:?}");
+    });
+}
+```
+
+It’s fine! This will render appropriately on the server, ignoring the client-only code, and then access the storage and log a message on the browser.
+
+### Not all server code can run on the client
+
+WebAssembly running in the browser is a pretty limited environment. You don’t have access to a file-system or to many of the other things the standard library may be used to having. Not every crate can even be compiled to WASM, let alone run in a WASM environment.
+
+In particular, you’ll sometimes see errors about the crate `mio` or missing things from `core`. This is generally a sign that you are trying to compile something to WASM that can’t be compiled to WASM. If you’re adding server-only dependencies, you’ll want to mark them `optional = true` in your `Cargo.toml` and then enable them in the `ssr` feature definition. (Check out one of the template `Cargo.toml` files to see more details.)
+
+You can use `create_effect` to specify that something should only run on the client, and not in the server. Is there a way to specify that something should run only on the server, and not the client?
+
+In fact, there is. The next chapter will cover the topic of server functions in some detail. (In the meantime, you can check out their docs [here](https://docs.rs/leptos_server/0.2.5/leptos_server/index.html).)

examples/Makefile.toml

@@ -0,0 +1,61 @@
+[env]
+CARGO_MAKE_EXTEND_WORKSPACE_MAKEFILE = true
+CARGO_MAKE_CARGO_BUILD_TEST_FLAGS = ""
+
+# Emulate workspace
+CARGO_MAKE_WORKSPACE_EMULATION = true
+
+CARGO_MAKE_CRATE_WORKSPACE_MEMBERS = [
+    "counter",
+    "counter_isomorphic",
+    "counters",
+    "counters_stable",
+    "counter_without_macros",
+    "error_boundary",
+    "errors_axum",
+    "fetch",
+    "hackernews",
+    "hackernews_axum",
+    "login_with_token_csr_only",
+    "parent_child",
+    "router",
+    "session_auth_axum",
+    "ssr_modes",
+    "ssr_modes_axum",
+    "tailwind",
+    "tailwind_csr_trunk",
+    "todo_app_sqlite",
+    "todo_app_sqlite_axum",
+    "todo_app_sqlite_viz",
+    "todomvc",
+]
+
+[tasks.verify-flow]
+description = "Provides pre and post hooks for verify"
+dependencies = ["pre-verify-flow", "verify", "post-verify-flow"]
+
+[tasks.verify]
+description = "Run all quality checks and tests"
+dependencies = ["check-style", "test-unit-and-web"]
+
+[tasks.test-unit-and-web]
+description = "Run all unit and web tests"
+dependencies = ["test-flow", "web-test-flow"]
+
+[tasks.check-style]
+description = "Check for style violations"
+dependencies = ["check-format-flow", "clippy-flow"]
+
+[tasks.pre-verify-flow]
+
+[tasks.post-verify-flow]
+
+[tasks.web-test-flow]
+description = "Provides pre and post hooks for web-test"
+dependencies = ["pre-web-test-flow", "web-test", "post-web-test-flow"]
+
+[tasks.pre-web-test-flow]
+
+[tasks.web-test]
+
+[tasks.post-web-test-flow]

examples/counter_without_macros/Makefile.toml

@@ -1,7 +1,7 @@
 [env]
 CARGO_MAKE_WASM_TEST_ARGS = "--headless --chrome"
 
-[tasks.post-test]
+[tasks.web-test]
 command = "cargo"
 args = ["make", "wasm-pack-test"]
 

examples/counters/Cargo.toml

@@ -11,4 +11,5 @@ console_error_panic_hook = "0.1.7"
 
 [dev-dependencies]
 wasm-bindgen-test = "0.3.0"
-
+wasm-bindgen = "0.2"
+web-sys = "0.3"

examples/counters/src/lib.rs

@@ -38,7 +38,7 @@ pub fn Counters(cx: Scope) -> impl IntoView {
     };
 
     view! { cx,
-        <>
+        <div>
             <button on:click=add_counter>
                 "Add Counter"
             </button>
@@ -72,7 +72,7 @@ pub fn Counters(cx: Scope) -> impl IntoView {
                     }
                 />
             </ul>
-        </>
+        </div>
     }
 }
 

examples/counters/tests/mod.rs

@@ -1,10 +1,11 @@
 use wasm_bindgen_test::*;
+use wasm_bindgen::JsCast;
 
 wasm_bindgen_test_configure!(run_in_browser);
 use leptos::*;
 use web_sys::HtmlElement;
 
-use counters::{Counters, CountersProps};
+use counters::Counters;
 
 #[wasm_bindgen_test]
 fn inc() {
@@ -24,7 +25,7 @@ fn inc() {
     add_counter.click();
 
     // check HTML
-    assert_eq!(div.inner_html(), "<button>Add Counter</button><button>Add 1000 Counters</button><button>Clear Counters</button><p>Total: <span>0</span> from <span>3</span> counters.</p><ul><li><button>-1</button><input type=\"text\"><span>0</span><button>+1</button><button>x</button></li><li><button>-1</button><input type=\"text\"><span>0</span><button>+1</button><button>x</button></li><li><button>-1</button><input type=\"text\"><span>0</span><button>+1</button><button>x</button></li></ul>");
+    assert_eq!(div.inner_html(), "<button>Add Counter</button><button>Add 1000 Counters</button><button>Clear Counters</button><p>Total: <span><!-- <DynChild> -->0<!-- </DynChild> --></span> from <span><!-- <DynChild> -->3<!-- </DynChild> --></span> counters.</p><ul><!-- <Each> --><!-- <EachItem> --><!-- <Counter> --><li><button>-1</button><input type=\"text\"><span><!-- <DynChild> -->0<!-- </DynChild> --></span><button>+1</button><button>x</button></li><!-- </Counter> --><!-- </EachItem> --><!-- <EachItem> --><!-- <Counter> --><li><button>-1</button><input type=\"text\"><span><!-- <DynChild> -->0<!-- </DynChild> --></span><button>+1</button><button>x</button></li><!-- </Counter> --><!-- </EachItem> --><!-- <EachItem> --><!-- <Counter> --><li><button>-1</button><input type=\"text\"><span><!-- <DynChild> -->0<!-- </DynChild> --></span><button>+1</button><button>x</button></li><!-- </Counter> --><!-- </EachItem> --><!-- </Each> --></ul>");
 
     let counters = div
         .query_selector("ul")
@@ -52,7 +53,7 @@ fn inc() {
         }
     }
 
-    assert_eq!(div.inner_html(), "<button>Add Counter</button><button>Add 1000 Counters</button><button>Clear Counters</button><p>Total: <span>6</span> from <span>3</span> counters.</p><ul><li><button>-1</button><input type=\"text\"><span>1</span><button>+1</button><button>x</button></li><li><button>-1</button><input type=\"text\"><span>2</span><button>+1</button><button>x</button></li><li><button>-1</button><input type=\"text\"><span>3</span><button>+1</button><button>x</button></li></ul>");
+    assert_eq!(div.inner_html(), "<button>Add Counter</button><button>Add 1000 Counters</button><button>Clear Counters</button><p>Total: <span><!-- <DynChild> -->6<!-- </DynChild> --></span> from <span><!-- <DynChild> -->3<!-- </DynChild> --></span> counters.</p><ul><!-- <Each> --><!-- <EachItem> --><!-- <Counter> --><li><button>-1</button><input type=\"text\"><span><!-- <DynChild> -->1<!-- </DynChild> --></span><button>+1</button><button>x</button></li><!-- </Counter> --><!-- </EachItem> --><!-- <EachItem> --><!-- <Counter> --><li><button>-1</button><input type=\"text\"><span><!-- <DynChild> -->2<!-- </DynChild> --></span><button>+1</button><button>x</button></li><!-- </Counter> --><!-- </EachItem> --><!-- <EachItem> --><!-- <Counter> --><li><button>-1</button><input type=\"text\"><span><!-- <DynChild> -->3<!-- </DynChild> --></span><button>+1</button><button>x</button></li><!-- </Counter> --><!-- </EachItem> --><!-- </Each> --></ul>");
 
     // remove the first counter
     counters
@@ -63,51 +64,5 @@ fn inc() {
         .unchecked_into::<HtmlElement>()
         .click();
 
-    assert_eq!(div.inner_html(), "<button>Add Counter</button><button>Add 1000 Counters</button><button>Clear Counters</button><p>Total: <span>5</span> from <span>2</span> counters.</p><ul><li><button>-1</button><input type=\"text\"><span>2</span><button>+1</button><button>x</button></li><li><button>-1</button><input type=\"text\"><span>3</span><button>+1</button><button>x</button></li></ul>");
-
-    // decrement all by 1
-    for idx in 0..counters.length() {
-        let counter = counters.item(idx).unwrap();
-        let dec_button = counter
-            .first_child()
-            .unwrap()
-            .unchecked_into::<HtmlElement>();
-        dec_button.click();
-    }
-
-    run_scope(create_runtime(), move |cx| {
-        // we can use RSX in test comparisons!
-        // note that if RSX template creation is bugged, this probably won't catch it
-        // (because the same bug will be reproduced in both sides of the assertion)
-        // so I use HTML tests for most internal testing like this
-        // but in user-land testing, RSX comparanda are cool
-        assert_eq!(
-            div.outer_html(),
-            view! { cx,
-                <div>
-                    <button>"Add Counter"</button>
-                    <button>"Add 1000 Counters"</button>
-                    <button>"Clear Counters"</button>
-                    <p>"Total: "<span>"3"</span>" from "<span>"2"</span>" counters."</p>
-                    <ul>
-                        <li>
-                            <button>"-1"</button>
-                            <input type="text"/>
-                            <span>"1"</span>
-                            <button>"+1"</button>
-                            <button>"x"</button>
-                        </li>
-                        <li>
-                            <button>"-1"</button>
-                            <input type="text"/>
-                            <span>"2"</span>
-                            <button>"+1"</button>
-                            <button>"x"</button>
-                        </li>
-                    </ul>
-                </div>
-            }
-            .outer_html()
-        );
-    });
+    assert_eq!(div.inner_html(), "<button>Add Counter</button><button>Add 1000 Counters</button><button>Clear Counters</button><p>Total: <span><!-- <DynChild> -->5<!-- </DynChild> --></span> from <span><!-- <DynChild> -->2<!-- </DynChild> --></span> counters.</p><ul><!-- <Each> --><!-- <EachItem> --><!-- <Counter> --><li><button>-1</button><input type=\"text\"><span><!-- <DynChild> -->2<!-- </DynChild> --></span><button>+1</button><button>x</button></li><!-- </Counter> --><!-- </EachItem> --><!-- <EachItem> --><!-- <Counter> --><li><button>-1</button><input type=\"text\"><span><!-- <DynChild> -->3<!-- </DynChild> --></span><button>+1</button><button>x</button></li><!-- </Counter> --><!-- </EachItem> --><!-- </Each> --></ul>");
 }

examples/errors_axum/Cargo.toml

@@ -28,8 +28,6 @@ thiserror = "1.0.38"
 wasm-bindgen = "0.2"
 
 [features]
-default = ["csr"]
-csr = ["leptos/csr", "leptos_meta/csr", "leptos_router/csr"]
 hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"]
 ssr = [
   "dep:axum",
@@ -44,7 +42,7 @@ ssr = [
 
 [package.metadata.cargo-all-features]
 denylist = ["axum", "tower", "tower-http", "tokio", "leptos_axum"]
-skip_feature_sets = [["csr", "ssr"], ["csr", "hydrate"], ["ssr", "hydrate"]]
+skip_feature_sets = [["ssr", "hydrate"]]
 
 [package.metadata.leptos]
 # The name used by wasm-bindgen/cargo-leptos for the JS/WASM bundle. Defaults to the crate name

examples/router/style.css

@@ -41,11 +41,11 @@ a[aria-current] {
 }
 
 .slideIn {
-  animation: 0.125s slideIn forwards;
+  animation: 0.25s slideIn forwards;
 }
 
 .slideOut {
-  animation: 0.125s slideOut forwards;
+  animation: 0.25s slideOut forwards;
 }
 
 @keyframes slideIn {
@@ -67,11 +67,11 @@ a[aria-current] {
 }
 
 .slideInBack {
-  animation: 0.125s slideInBack forwards;
+  animation: 0.25s slideInBack forwards;
 }
 
 .slideOutBack {
-  animation: 0.125s slideOutBack forwards;
+  animation: 0.25s slideOutBack forwards;
 }
 
 @keyframes slideInBack {

examples/session_auth_axum/Cargo.toml

@@ -43,8 +43,6 @@ bcrypt = { version = "0.14", optional = true }
 async-trait = { version = "0.1.64", optional = true }
 
 [features]
-default = ["csr"]
-csr = ["leptos/csr", "leptos_meta/csr", "leptos_router/csr"]
 hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"]
 ssr = [
 	"dep:axum",
@@ -65,7 +63,7 @@ ssr = [
 
 [package.metadata.cargo-all-features]
 denylist = ["axum", "tower", "tower-http", "tokio", "sqlx", "leptos_axum"]
-skip_feature_sets = [["csr", "ssr"], ["csr", "hydrate"], ["ssr", "hydrate"]]
+skip_feature_sets = [["ssr", "hydrate"]]
 
 [package.metadata.leptos]
 # The name used by wasm-bindgen/cargo-leptos for the JS/WASM bundle. Defaults to the crate name

examples/slots/Cargo.toml

@@ -0,0 +1,14 @@
+[package]
+name = "slots"
+version = "0.1.0"
+edition = "2021"
+
+[profile.release]
+codegen-units = 1
+lto = true
+
+[dependencies]
+leptos = { path = "../../leptos" }
+console_log = "1"
+log = "0.4"
+console_error_panic_hook = "0.1.7"

examples/slots/Makefile.toml

@@ -0,0 +1,9 @@
+[tasks.build]
+command = "cargo"
+args = ["+nightly", "build-all-features"]
+install_crate = "cargo-all-features"
+
+[tasks.check]
+command = "cargo"
+args = ["+nightly", "check-all-features"]
+install_crate = "cargo-all-features"

examples/slots/README.md

@@ -0,0 +1,7 @@
+# Leptos `<Component slot/>` Example
+
+This example shows how to use Slots in Leptos.
+
+To run it, just issue the `trunk serve --open` command in the example root. This will build the app, run it, and open a new browser to serve it.
+
+> If you don't have `trunk` installed, [click here for install instructions.](https://trunkrs.dev/)

examples/slots/index.html

@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<link data-trunk rel="rust" data-wasm-opt="z"/>
+		<link data-trunk rel="icon" type="image/ico" href="/public/favicon.ico"/>
+	</head>
+	<body></body>
+</html>

examples/slots/src/lib.rs

@@ -0,0 +1,63 @@
+use leptos::*;
+
+// Slots are created in simillar manner to components, except that they use the #[slot] macro.
+#[slot]
+struct Then {
+    children: ChildrenFn,
+}
+
+// Props work just like component props, for example, you can specify a prop as optional by prefixing
+// the type with Option<...> and marking the option as #[prop(optional)].
+#[slot]
+struct ElseIf {
+    cond: MaybeSignal<bool>,
+    children: ChildrenFn,
+}
+
+#[slot]
+struct Fallback {
+    children: ChildrenFn,
+}
+
+// Slots are added to components like any other prop.
+#[component]
+fn SlotIf(
+    cx: Scope,
+    cond: MaybeSignal<bool>,
+    then: Then,
+    #[prop(default=vec![])] else_if: Vec<ElseIf>,
+    #[prop(optional)] fallback: Option<Fallback>,
+) -> impl IntoView {
+    move || {
+        if cond() {
+            (then.children)(cx).into_view(cx)
+        } else if let Some(else_if) = else_if.iter().find(|i| (i.cond)()) {
+            (else_if.children)(cx).into_view(cx)
+        } else if let Some(fallback) = &fallback {
+            (fallback.children)(cx).into_view(cx)
+        } else {
+            ().into_view(cx)
+        }
+    }
+}
+
+#[component]
+pub fn App(cx: Scope) -> impl IntoView {
+    let (count, set_count) = create_signal(cx, 0);
+    let is_even = MaybeSignal::derive(cx, move || count() % 2 == 0);
+    let is_div5 = MaybeSignal::derive(cx, move || count() % 5 == 0);
+    let is_div7 = MaybeSignal::derive(cx, move || count() % 7 == 0);
+
+    view! { cx,
+        <button on:click=move |_| set_count.update(|value| *value += 1)>"+1"</button>
+        " "{count}" is "
+        <SlotIf cond=is_even>
+            // The slot name can be emitted if it would match the slot struct name (in snake case).
+            <Then slot>"even"</Then>
+            // Props are passed just like on normal components.
+            <ElseIf slot cond=is_div5>"divisible by 5"</ElseIf>
+            <ElseIf slot cond=is_div7>"divisible by 7"</ElseIf>
+            <Fallback slot>"odd"</Fallback>
+        </SlotIf>
+    }
+}

examples/slots/src/main.rs

@@ -0,0 +1,12 @@
+use leptos::*;
+use slots::*;
+
+pub fn main() {
+    _ = console_log::init_with_level(log::Level::Debug);
+    console_error_panic_hook::set_once();
+    mount_to_body(|cx| {
+        view! { cx,
+            <App/>
+        }
+    })
+}

examples/ssr_modes/Cargo.toml

@@ -36,6 +36,10 @@ ssr = [
   "leptos_router/ssr",
 ]
 
+[package.metadata.cargo-all-features]
+denylist = ["actix-files", "actix-web", "leptos_actix"]
+skip_feature_sets = [["ssr", "hydrate"]]
+
 [package.metadata.leptos]
 # The name used by wasm-bindgen/cargo-leptos for the JS/WASM bundle. Defaults to the crate name   
 output-name = "ssr_modes"

examples/ssr_modes_axum/Cargo.toml

@@ -39,6 +39,10 @@ ssr = [
   "dep:leptos_axum",
 ]
 
+[package.metadata.cargo-all-features]
+denylist = ["axum", "tower", "tower-http", "tokio", "sqlx", "leptos_axum"]
+skip_feature_sets = [["ssr", "hydrate"]]
+
 [package.metadata.leptos]
 # The name used by wasm-bindgen/cargo-leptos for the JS/WASM bundle. Defaults to the crate name
 output-name = "ssr_modes"

examples/todo_app_sqlite/src/todo.rs

@@ -156,11 +156,11 @@ pub fn Todos(cx: Scope) -> impl IntoView {
                             todos.read(cx)
                                 .map(move |todos| match todos {
                                     Err(e) => {
-                                        vec![view! { cx, <pre class="error">"Server Error: " {e.to_string()}</pre>}.into_any()]
+                                        view! { cx, <pre class="error">"Server Error: " {e.to_string()}</pre>}.into_view(cx)
                                     }
                                     Ok(todos) => {
                                         if todos.is_empty() {
-                                            vec![view! { cx, <p>"No tasks were found."</p> }.into_any()]
+                                            view! { cx, <p>"No tasks were found."</p> }.into_view(cx)
                                         } else {
                                             todos
                                                 .into_iter()
@@ -175,9 +175,9 @@ pub fn Todos(cx: Scope) -> impl IntoView {
                                                             </ActionForm>
                                                         </li>
                                                     }
-                                                    .into_any()
                                                 })
                                                 .collect::<Vec<_>>()
+                                                .into_view(cx)
                                         }
                                     }
                                 })

examples/todo_app_sqlite_axum/src/todo.rs

@@ -202,11 +202,11 @@ pub fn Todos(cx: Scope) -> impl IntoView {
                             todos.read(cx)
                                 .map(move |todos| match todos {
                                     Err(e) => {
-                                        vec![view! { cx, <pre class="error">"Server Error: " {e.to_string()}</pre>}.into_any()]
+                                        view! { cx, <pre class="error">"Server Error: " {e.to_string()}</pre>}.into_view(cx)
                                     }
                                     Ok(todos) => {
                                         if todos.is_empty() {
-                                            vec![view! { cx, <p>"No tasks were found."</p> }.into_any()]
+                                            view! { cx, <p>"No tasks were found."</p> }.into_view(cx)
                                         } else {
                                             todos
                                                 .into_iter()
@@ -221,9 +221,9 @@ pub fn Todos(cx: Scope) -> impl IntoView {
                                                             </ActionForm>
                                                         </li>
                                                     }
-                                                    .into_any()
                                                 })
                                                 .collect::<Vec<_>>()
+                                                .into_view(cx)
                                         }
                                     }
                                 })

examples/todo_app_sqlite_viz/src/todo.rs

@@ -163,11 +163,11 @@ pub fn Todos(cx: Scope) -> impl IntoView {
                             todos.read(cx)
                                 .map(move |todos| match todos {
                                     Err(e) => {
-                                        vec![view! { cx, <pre class="error">"Server Error: " {e.to_string()}</pre>}.into_any()]
+                                        view! { cx, <pre class="error">"Server Error: " {e.to_string()}</pre>}.into_view(cx)
                                     }
                                     Ok(todos) => {
                                         if todos.is_empty() {
-                                            vec![view! { cx, <p>"No tasks were found."</p> }.into_any()]
+                                            view! { cx, <p>"No tasks were found."</p> }.into_view(cx)
                                         } else {
                                             todos
                                                 .into_iter()
@@ -182,9 +182,9 @@ pub fn Todos(cx: Scope) -> impl IntoView {
                                                             </ActionForm>
                                                         </li>
                                                     }
-                                                    .into_any()
                                                 })
                                                 .collect::<Vec<_>>()
+                                                .into_view(cx)
                                         }
                                     }
                                 })

examples/todomvc/Cargo.toml

@@ -25,3 +25,6 @@ default = ["csr"]
 csr = ["leptos/csr"]
 hydrate = ["leptos/hydrate"]
 ssr = ["leptos/ssr"]
+
+[package.metadata.cargo-all-features]
+skip_feature_sets = [["csr", "ssr"], ["csr", "hydrate"], ["ssr", "hydrate"]]

flake.lock

@@ -0,0 +1,130 @@
+{
+  "nodes": {
+    "flake-utils": {
+      "inputs": {
+        "systems": "systems"
+      },
+      "locked": {
+        "lastModified": 1681202837,
+        "narHash": "sha256-H+Rh19JDwRtpVPAWp64F+rlEtxUWBAQW28eAi3SRSzg=",
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "rev": "cfacdce06f30d2b68473a46042957675eebb3401",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "type": "github"
+      }
+    },
+    "flake-utils_2": {
+      "inputs": {
+        "systems": "systems_2"
+      },
+      "locked": {
+        "lastModified": 1681202837,
+        "narHash": "sha256-H+Rh19JDwRtpVPAWp64F+rlEtxUWBAQW28eAi3SRSzg=",
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "rev": "cfacdce06f30d2b68473a46042957675eebb3401",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "type": "github"
+      }
+    },
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1681920287,
+        "narHash": "sha256-+/d6XQQfhhXVfqfLROJoqj3TuG38CAeoT6jO1g9r1k0=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "645bc49f34fa8eff95479f0345ff57e55b53437e",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixos-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "nixpkgs_2": {
+      "locked": {
+        "lastModified": 1681358109,
+        "narHash": "sha256-eKyxW4OohHQx9Urxi7TQlFBTDWII+F+x2hklDOQPB50=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "96ba1c52e54e74c3197f4d43026b3f3d92e83ff9",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixpkgs-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "flake-utils": "flake-utils",
+        "nixpkgs": "nixpkgs",
+        "rust-overlay": "rust-overlay"
+      }
+    },
+    "rust-overlay": {
+      "inputs": {
+        "flake-utils": "flake-utils_2",
+        "nixpkgs": "nixpkgs_2"
+      },
+      "locked": {
+        "lastModified": 1682043560,
+        "narHash": "sha256-ZsF4Yee9pQbvLtwSVGgYux+az4yFSLXrxPyGHm3ptJM=",
+        "owner": "oxalica",
+        "repo": "rust-overlay",
+        "rev": "48037a6f8faeee138ede96bf607bc95c9dab9aec",
+        "type": "github"
+      },
+      "original": {
+        "owner": "oxalica",
+        "repo": "rust-overlay",
+        "type": "github"
+      }
+    },
+    "systems": {
+      "locked": {
+        "lastModified": 1681028828,
+        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
+        "owner": "nix-systems",
+        "repo": "default",
+        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nix-systems",
+        "repo": "default",
+        "type": "github"
+      }
+    },
+    "systems_2": {
+      "locked": {
+        "lastModified": 1681028828,
+        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
+        "owner": "nix-systems",
+        "repo": "default",
+        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nix-systems",
+        "repo": "default",
+        "type": "github"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

flake.nix

@@ -0,0 +1,36 @@
+{
+  description = "A basic Rust devshell for NixOS users developing Leptos";
+
+  inputs = {
+    nixpkgs.url      = "github:NixOS/nixpkgs/nixos-unstable";
+    rust-overlay.url = "github:oxalica/rust-overlay";
+    flake-utils.url  = "github:numtide/flake-utils";
+  };
+
+  outputs = { self, nixpkgs, rust-overlay, flake-utils, ... }:
+    flake-utils.lib.eachDefaultSystem (system:
+      let
+        overlays = [ (import rust-overlay) ];
+        pkgs = import nixpkgs {
+          inherit system overlays;
+        };
+      in
+      with pkgs;
+      {
+        devShells.default = mkShell {
+          buildInputs = [
+            openssl
+            pkg-config
+            cacert
+            (rust-bin.selectLatestNightlyWith( toolchain: toolchain.default.override {
+              extensions= [ "rust-src" "rust-analyzer" ];
+              targets = [ "wasm32-unknown-unknown" ];
+            }))
+          ];
+
+          shellHook = ''
+            '';
+        };
+      }
+    );
+}

integrations/actix/Cargo.toml

@@ -17,3 +17,4 @@ leptos_integration_utils = { workspace = true }
 serde_json = "1"
 parking_lot = "0.12.1"
 regex = "1.7.0"
+tracing = "0.1.37"

integrations/actix/src/lib.rs

@@ -27,7 +27,7 @@ use leptos_router::*;
 use parking_lot::RwLock;
 use regex::Regex;
 use std::sync::Arc;
-
+use tracing::instrument;
 /// This struct lets you define headers and override the status of the Response from an Element or a Server Function
 /// Typically contained inside of a ResponseOptions. Setting this is useful for cookies and custom responses.
 #[derive(Debug, Clone, Default)]
@@ -98,6 +98,7 @@ impl ResponseOptions {
 /// Provides an easy way to redirect the user from within a server function. Mimicking the Remix `redirect()`,
 /// it sets a [StatusCode] of 302 and a [LOCATION](header::LOCATION) header with the provided value.
 /// If looking to redirect from the client, `leptos_router::use_navigate()` should be used instead.
+#[tracing::instrument(level = "trace", fields(error), skip_all)]
 pub fn redirect(cx: leptos::Scope, path: &str) {
     if let Some(response_options) = use_context::<ResponseOptions>(cx) {
         response_options.set_status(StatusCode::FOUND);
@@ -147,6 +148,7 @@ pub fn redirect(cx: leptos::Scope, path: &str) {
 /// This function always provides context values including the following types:
 /// - [ResponseOptions]
 /// - [HttpRequest](actix_web::HttpRequest)
+#[tracing::instrument(level = "trace", fields(error), skip_all)]
 pub fn handle_server_fns() -> Route {
     handle_server_fns_with_context(|_cx| {})
 }
@@ -166,6 +168,7 @@ pub fn handle_server_fns() -> Route {
 /// This function always provides context values including the following types:
 /// - [ResponseOptions]
 /// - [HttpRequest](actix_web::HttpRequest)
+#[tracing::instrument(level = "trace", fields(error), skip_all)]
 pub fn handle_server_fns_with_context(
     additional_context: impl Fn(leptos::Scope) + 'static + Clone + Send,
 ) -> Route {
@@ -339,6 +342,7 @@ pub fn handle_server_fns_with_context(
 /// - [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<IV>(
     options: LeptosOptions,
     app_fn: impl Fn(leptos::Scope) -> IV + Clone + 'static,
@@ -407,6 +411,7 @@ where
 /// - [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_in_order<IV>(
     options: LeptosOptions,
     app_fn: impl Fn(leptos::Scope) -> IV + Clone + 'static,
@@ -478,6 +483,7 @@ where
 /// - [HttpRequest](actix_web::HttpRequest)
 /// - [MetaContext](leptos_meta::MetaContext)
 /// - [RouterIntegrationContext](leptos_router::RouterIntegrationContext)
+#[tracing::instrument(level = "trace", fields(error), skip_all)]
 pub fn render_app_async<IV>(
     options: LeptosOptions,
     app_fn: impl Fn(leptos::Scope) -> IV + Clone + 'static,
@@ -501,6 +507,7 @@ where
 /// - [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<IV>(
     options: LeptosOptions,
     additional_context: impl Fn(leptos::Scope) + 'static + Clone + Send,
@@ -550,6 +557,7 @@ where
 /// - [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_in_order_with_context<IV>(
     options: LeptosOptions,
     additional_context: impl Fn(leptos::Scope) + 'static + Clone + Send,
@@ -601,6 +609,7 @@ where
 /// - [HttpRequest](actix_web::HttpRequest)
 /// - [MetaContext](leptos_meta::MetaContext)
 /// - [RouterIntegrationContext](leptos_router::RouterIntegrationContext)
+#[tracing::instrument(level = "trace", fields(error), skip_all)]
 pub fn render_app_async_with_context<IV>(
     options: LeptosOptions,
     additional_context: impl Fn(leptos::Scope) + 'static + Clone + Send,
@@ -741,7 +750,7 @@ where
         }
     })
 }
-
+#[tracing::instrument(level = "trace", fields(error), skip_all)]
 fn provide_contexts(
     cx: leptos::Scope,
     req: &HttpRequest,
@@ -766,7 +775,7 @@ fn leptos_corrected_path(req: &HttpRequest) -> String {
         "http://leptos".to_string() + path + "?" + query
     }
 }
-
+#[tracing::instrument(level = "trace", fields(error), skip_all)]
 async fn stream_app(
     options: &LeptosOptions,
     app: impl FnOnce(leptos::Scope) -> View + 'static,
@@ -782,7 +791,10 @@ async fn stream_app(
 
     build_stream_response(options, res_options, stream, runtime, scope).await
 }
-
+#[cfg_attr(
+    any(debug_assertions, feature = "ssr"),
+    instrument(level = "trace", skip_all,)
+)]
 async fn stream_app_in_order(
     options: &LeptosOptions,
     app: impl FnOnce(leptos::Scope) -> View + 'static,
@@ -800,7 +812,7 @@ async fn stream_app_in_order(
 
     build_stream_response(options, res_options, stream, runtime, scope).await
 }
-
+#[tracing::instrument(level = "trace", fields(error), skip_all)]
 async fn build_stream_response(
     options: &LeptosOptions,
     res_options: ResponseOptions,
@@ -850,7 +862,7 @@ async fn build_stream_response(
     // Return the response
     res
 }
-
+#[tracing::instrument(level = "trace", fields(error), skip_all)]
 async fn render_app_async_helper(
     options: &LeptosOptions,
     app: impl FnOnce(leptos::Scope) -> View + 'static,
@@ -993,6 +1005,7 @@ where
         InitError = (),
     >,
 {
+    #[tracing::instrument(level = "trace", fields(error), skip_all)]
     fn leptos_routes<IV>(
         self,
         options: LeptosOptions,
@@ -1004,7 +1017,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,
@@ -1032,7 +1045,7 @@ where
         }
         router
     }
-
+    #[tracing::instrument(level = "trace", fields(error), skip_all)]
     fn leptos_routes_with_context<IV>(
         self,
         options: LeptosOptions,

integrations/axum/Cargo.toml

@@ -20,4 +20,5 @@ serde_json = "1"
 tokio = { version = "1", features = ["full"] }
 parking_lot = "0.12.1"
 tokio-util = {version = "0.7.7", features = ["rt"] }
+tracing = "0.1.37"
 once_cell = "1.17"

integrations/axum/src/lib.rs

@@ -1,5 +1,4 @@
 #![forbid(unsafe_code)]
-
 //! Provides functions to easily integrate Leptos with Axum.
 //!
 //! For more details on how to use the integrations, see the
@@ -36,7 +35,7 @@ use parking_lot::RwLock;
 use std::{io, pin::Pin, sync::Arc, thread::available_parallelism};
 use tokio::task::LocalSet;
 use tokio_util::task::LocalPoolHandle;
-
+use tracing::Instrument;
 /// A struct to hold the parts of the incoming Request. Since `http::Request` isn't cloneable, we're forced
 /// to construct this for Leptos to use in Axum
 #[derive(Debug, Clone)]
@@ -248,6 +247,7 @@ where
 /// This function always provides context values including the following types:
 /// - [RequestParts]
 /// - [ResponseOptions]
+#[tracing::instrument(level = "trace", fields(error), skip_all)]
 pub async fn handle_server_fns(
     Path(fn_name): Path<String>,
     headers: HeaderMap,
@@ -271,6 +271,7 @@ pub async fn handle_server_fns(
 /// This function always provides context values including the following types:
 /// - [RequestParts]
 /// - [ResponseOptions]
+#[tracing::instrument(level = "trace", fields(error), skip_all)]
 pub async fn handle_server_fns_with_context(
     Path(fn_name): Path<String>,
     headers: HeaderMap,
@@ -281,7 +282,7 @@ pub async fn handle_server_fns_with_context(
     handle_server_fns_inner(fn_name, headers, query, additional_context, req)
         .await
 }
-
+#[tracing::instrument(level = "trace", fields(error), skip_all)]
 async fn handle_server_fns_inner(
     fn_name: String,
     headers: HeaderMap,
@@ -465,6 +466,7 @@ pub type PinnedHtmlStream =
 /// - [ResponseOptions]
 /// - [MetaContext](leptos_meta::MetaContext)
 /// - [RouterIntegrationContext](leptos_router::RouterIntegrationContext)
+#[tracing::instrument(level = "info", fields(error), skip_all)]
 pub fn render_app_to_stream<IV>(
     options: LeptosOptions,
     app_fn: impl Fn(leptos::Scope) -> IV + Clone + Send + 'static,
@@ -538,6 +540,7 @@ where
 /// - [ResponseOptions]
 /// - [MetaContext](leptos_meta::MetaContext)
 /// - [RouterIntegrationContext](leptos_router::RouterIntegrationContext)
+#[tracing::instrument(level = "info", fields(error), skip_all)]
 pub fn render_app_to_stream_in_order<IV>(
     options: LeptosOptions,
     app_fn: impl Fn(leptos::Scope) -> IV + Clone + Send + 'static,
@@ -583,6 +586,7 @@ where
 /// - [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<IV>(
     options: LeptosOptions,
     additional_context: impl Fn(leptos::Scope) + 'static + Clone + Send,
@@ -611,6 +615,8 @@ where
             let res_options3 = default_res_options.clone();
             let local_pool = get_leptos_pool();
             let (tx, rx) = futures::channel::mpsc::channel(8);
+
+            let current_span = tracing::Span::current();
             local_pool.spawn_pinned(move || async move {
                 let app = {
                     // Need to get the path and query string of the Request
@@ -634,12 +640,12 @@ where
                     );
 
                     forward_stream(&options, res_options2, bundle, runtime, scope, tx).await;
-            });
+            }.instrument(current_span));
             async move { generate_response(res_options3, rx).await }
         })
     }
 }
-
+#[tracing::instrument(level = "info", fields(error), skip_all)]
 async fn generate_response(
     res_options: ResponseOptions,
     rx: Receiver<String>,
@@ -669,7 +675,7 @@ async fn generate_response(
 
     res
 }
-
+#[tracing::instrument(level = "info", fields(error), skip_all)]
 async fn forward_stream(
     options: &LeptosOptions,
     res_options2: ResponseOptions,
@@ -729,6 +735,7 @@ async fn forward_stream(
 /// - [ResponseOptions]
 /// - [MetaContext](leptos_meta::MetaContext)
 /// - [RouterIntegrationContext](leptos_router::RouterIntegrationContext)
+#[tracing::instrument(level = "info", fields(error), skip_all)]
 pub fn render_app_to_stream_in_order_with_context<IV>(
     options: LeptosOptions,
     additional_context: impl Fn(leptos::Scope) + 'static + Clone + Send,
@@ -766,7 +773,8 @@ where
 
                 let (tx, rx) = futures::channel::mpsc::channel(8);
                 let local_pool = get_leptos_pool();
-                local_pool.spawn_pinned(move || async move {
+                let current_span = tracing::Span::current();
+                local_pool.spawn_pinned(|| async move {
                     let app = {
                         let full_path = full_path.clone();
                         let (req, req_parts) = generate_request_and_parts(req).await;
@@ -785,14 +793,14 @@ where
                         );
 
                     forward_stream(&options, res_options2, bundle, runtime, scope, tx).await;
-                });
+                }.instrument(current_span));
 
                 generate_response(res_options3, rx).await
             }
         })
     }
 }
-
+#[tracing::instrument(level = "trace", fields(error), skip_all)]
 fn provide_contexts<B: 'static + std::fmt::Debug + std::default::Default>(
     cx: Scope,
     path: String,
@@ -860,6 +868,7 @@ fn provide_contexts<B: 'static + std::fmt::Debug + std::default::Default>(
 /// - [ResponseOptions]
 /// - [MetaContext](leptos_meta::MetaContext)
 /// - [RouterIntegrationContext](leptos_router::RouterIntegrationContext)
+#[tracing::instrument(level = "info", fields(error), skip_all)]
 pub fn render_app_async<IV>(
     options: LeptosOptions,
     app_fn: impl Fn(leptos::Scope) -> IV + Clone + Send + 'static,
@@ -901,6 +910,7 @@ where
 /// - [ResponseOptions]
 /// - [MetaContext](leptos_meta::MetaContext)
 /// - [RouterIntegrationContext](leptos_router::RouterIntegrationContext)
+#[tracing::instrument(level = "info", fields(error), skip_all)]
 pub fn render_app_async_with_context<IV>(
     options: LeptosOptions,
     additional_context: impl Fn(leptos::Scope) + 'static + Clone + Send,
@@ -989,6 +999,7 @@ where
 /// Generates a list of all routes defined in Leptos's Router in your app. We can then use this to automatically
 /// create routes in Axum's Router without having to use wildcard matching or fallbacks. Takes in your root app Element
 /// as an argument so it can walk you app tree. This version is tailored to generate Axum compatible paths.
+#[tracing::instrument(level = "trace", fields(error), skip_all)]
 pub async fn generate_route_list<IV>(
     app_fn: impl FnOnce(Scope) -> IV + 'static,
 ) -> Vec<RouteListing>
@@ -1079,6 +1090,7 @@ pub trait LeptosRoutes {
 /// 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 {
+    #[tracing::instrument(level = "info", fields(error), skip_all)]
     fn leptos_routes<IV>(
         self,
         options: LeptosOptions,
@@ -1091,6 +1103,7 @@ impl LeptosRoutes for axum::Router {
         self.leptos_routes_with_context(options, paths, |_| {}, app_fn)
     }
 
+    #[tracing::instrument(level = "trace", fields(error), skip_all)]
     fn leptos_routes_with_context<IV>(
         self,
         options: LeptosOptions,
@@ -1158,6 +1171,7 @@ impl LeptosRoutes for axum::Router {
         router
     }
 
+    #[tracing::instrument(level = "trace", fields(error), skip_all)]
     fn leptos_routes_with_handler<H, T>(
         self,
         paths: Vec<RouteListing>,
@@ -1187,7 +1201,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();
     LOCAL_POOL

integrations/utils/Cargo.toml

@@ -13,3 +13,4 @@ leptos = { workspace = true, features = ["ssr"] }
 leptos_hot_reload = { workspace = true }
 leptos_meta = { workspace = true, features = ["ssr"] }
 leptos_config = { workspace = true }
+tracing="0.1.37"

integrations/utils/src/lib.rs

@@ -3,6 +3,9 @@ use leptos::{use_context, RuntimeId, ScopeId};
 use leptos_config::LeptosOptions;
 use leptos_meta::MetaContext;
 
+extern crate tracing;
+
+#[tracing::instrument(level = "trace", fields(error), skip_all)]
 fn autoreload(options: &LeptosOptions) -> String {
     let site_ip = &options.site_addr.ip().to_string();
     let reload_port = options.reload_port;
@@ -39,7 +42,7 @@ fn autoreload(options: &LeptosOptions) -> String {
         false => "".to_string(),
     }
 }
-
+#[tracing::instrument(level = "trace", fields(error), skip_all)]
 pub fn html_parts(
     options: &LeptosOptions,
     meta: Option<&MetaContext>,
@@ -75,6 +78,7 @@ pub fn html_parts(
     (head, tail)
 }
 
+#[tracing::instrument(level = "trace", fields(error), skip_all)]
 pub fn html_parts_separated(
     options: &LeptosOptions,
     meta: Option<&MetaContext>,
@@ -115,6 +119,7 @@ pub fn html_parts_separated(
     (head, tail)
 }
 
+#[tracing::instrument(level = "trace", fields(error), skip_all)]
 pub async fn build_async_response(
     stream: impl Stream<Item = String> + 'static,
     options: &LeptosOptions,

leptos/src/for_loop.rs

@@ -41,6 +41,10 @@ use std::hash::Hash;
 ///   }
 /// }
 /// ```
+#[cfg_attr(
+    any(debug_assertions, feature = "ssr"),
+    tracing::instrument(level = "info", skip_all)
+)]
 #[component(transparent)]
 pub fn For<IF, I, T, EF, N, KF, K>(
     cx: Scope,

leptos/src/lib.rs

@@ -1,6 +1,5 @@
 #![deny(missing_docs)]
 #![forbid(unsafe_code)]
-
 //! # About Leptos
 //!
 //! Leptos is a full-stack framework for building web applications in Rust. You can use it to build
@@ -43,6 +42,7 @@
 //!   HTTP request within your reactive code.
 //! - [`router`](https://github.com/leptos-rs/leptos/tree/main/examples/router) shows how to use Leptos’s nested router
 //!   to enable client-side navigation and route-specific, reactive data loading.
+//! - [`slots`](https://github.com/leptos-rs/leptos/tree/main/examples/slots) shows how to use slots on components.
 //! - [`counter_isomorphic`](https://github.com/leptos-rs/leptos/tree/main/examples/counter_isomorphic) shows
 //!   different methods of interaction with a stateful server, including server functions, server actions, forms,
 //!   and server-sent events (SSE).
@@ -160,7 +160,8 @@ pub use leptos_dom::{
         request_animation_frame, request_animation_frame_with_handle,
         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, window_event_listener_untyped,
+        window_event_listener_with_precast,
     },
     html, log, math, mount_to, mount_to_body, svg, warn, window, Attribute,
     Class, Errors, Fragment, HtmlElement, IntoAttribute, IntoClass,
@@ -185,11 +186,10 @@ pub use suspense::*;
 mod text_prop;
 mod transition;
 pub use text_prop::TextProp;
-#[cfg(debug_assertions)]
+#[cfg(any(debug_assertions, feature = "ssr"))]
 #[doc(hidden)]
 pub use tracing;
 pub use transition::*;
-
 extern crate self as leptos;
 
 /// The most common type for the `children` property on components,
@@ -240,3 +240,24 @@ pub fn component_props_builder<P: Props>(
 ) -> <P as Props>::Builder {
     <P as Props>::builder()
 }
+
+#[cfg(all(not(doc), feature = "csr", feature = "ssr"))]
+compile_error!(
+    "You have both `csr` and `ssr` enabled as features, which may cause \
+     issues like <Suspense/>` failing to work silently. `csr` is enabled by \
+     default on `leptos`, and can be disabled by adding `default-features = \
+     false` to your `leptos` dependency."
+);
+
+#[cfg(all(not(doc), feature = "hydrate", feature = "ssr"))]
+compile_error!(
+    "You have both `hydrate` and `ssr` enabled as features, which may cause \
+     issues like <Suspense/>` failing to work silently."
+);
+
+#[cfg(all(not(doc), feature = "hydrate", feature = "csr"))]
+compile_error!(
+    "You have both `hydrate` and `csr` enabled as features, which may cause \
+     issues. `csr` is enabled by default on `leptos`, and can be disabled by \
+     adding `default-features = false` to your `leptos` dependency."
+);

leptos/src/show.rs

@@ -29,6 +29,10 @@ use std::{cell::RefCell, rc::Rc};
 /// }
 /// # });
 /// ```
+#[cfg_attr(
+    any(debug_assertions, feature = "ssr"),
+    tracing::instrument(level = "info", skip_all)
+)]
 #[component]
 pub fn Show<F, W, IV>(
     /// The scope the component is running in

leptos/src/suspense.rs

@@ -50,6 +50,10 @@ use std::rc::Rc;
 /// # });
 /// # }
 /// ```
+#[cfg_attr(
+    any(debug_assertions, feature = "ssr"),
+    tracing::instrument(level = "info", skip_all)
+)]
 #[component(transparent)]
 pub fn Suspense<F, E>(
     cx: Scope,

leptos/src/transition.rs

@@ -60,6 +60,10 @@ use std::{
 /// # });
 /// # }
 /// ```
+#[cfg_attr(
+    any(debug_assertions, feature = "ssr"),
+    tracing::instrument(level = "info", skip_all)
+)]
 #[component(transparent)]
 pub fn Transition<F, E>(
     cx: Scope,

leptos_dom/src/components.rs

@@ -54,7 +54,7 @@ pub struct ComponentRepr {
     pub(crate) document_fragment: web_sys::DocumentFragment,
     #[cfg(all(target_arch = "wasm32", feature = "web"))]
     mounted: Rc<OnceCell<()>>,
-    #[cfg(debug_assertions)]
+    #[cfg(any(debug_assertions, feature = "ssr"))]
     pub(crate) name: Cow<'static, str>,
     #[cfg(debug_assertions)]
     _opening: Comment,
@@ -142,7 +142,7 @@ impl Mountable for ComponentRepr {
 }
 
 impl IntoView for ComponentRepr {
-    #[cfg_attr(debug_assertions, instrument(level = "trace", name = "<Component />", skip_all, fields(name = %self.name)))]
+    #[cfg_attr(any(debug_assertions, feature = "ssr"), instrument(level = "info", name = "<Component />", skip_all, fields(name = %self.name)))]
     fn into_view(self, _: Scope) -> View {
         #[cfg(all(target_arch = "wasm32", feature = "web"))]
         if !HydrationCtx::is_hydrating() {
@@ -207,7 +207,7 @@ impl ComponentRepr {
             #[cfg(debug_assertions)]
             _opening: markers.1,
             closing: markers.0,
-            #[cfg(debug_assertions)]
+            #[cfg(any(debug_assertions, feature = "ssr"))]
             name,
             children: Vec::with_capacity(1),
             #[cfg(not(all(target_arch = "wasm32", feature = "web")))]

leptos_dom/src/components/dyn_child.rs

@@ -158,8 +158,8 @@ where
     N: IntoView,
 {
     #[cfg_attr(
-        debug_assertions,
-        instrument(level = "trace", name = "<DynChild />", skip_all)
+        any(debug_assertions, feature = "ssr"),
+        instrument(level = "info", name = "<DynChild />", skip_all)
     )]
     #[inline]
     fn into_view(self, cx: Scope) -> View {

leptos_dom/src/components/each.rs

@@ -351,8 +351,8 @@ where
     T: 'static,
 {
     #[cfg_attr(
-        debug_assertions,
-        instrument(level = "trace", name = "<Each />", skip_all)
+        any(debug_assertions, feature = "ssr"),
+        instrument(level = "info", name = "<Each />", skip_all)
     )]
     fn into_view(self, cx: Scope) -> crate::View {
         let Self {

leptos_dom/src/components/fragment.rs

@@ -14,6 +14,10 @@ where
     I: IntoIterator<Item = V>,
     V: IntoView,
 {
+    #[cfg_attr(
+        any(debug_assertions, feature = "ssr"),
+        instrument(level = "info", skip_all,)
+    )]
     fn into_fragment(self, cx: Scope) -> Fragment {
         self.into_iter().map(|v| v.into_view(cx)).collect()
     }
@@ -86,7 +90,7 @@ impl Fragment {
 }
 
 impl IntoView for Fragment {
-    #[cfg_attr(debug_assertions, instrument(level = "trace", name = "</>", skip_all, fields(children = self.nodes.len())))]
+    #[cfg_attr(debug_assertions, instrument(level = "info", name = "</>", skip_all, fields(children = self.nodes.len())))]
     fn into_view(self, cx: leptos_reactive::Scope) -> View {
         let mut frag = ComponentRepr::new_with_id("", self.id.clone());
 

leptos_dom/src/components/unit.rs

@@ -62,8 +62,8 @@ pub struct Unit;
 
 impl IntoView for Unit {
     #[cfg_attr(
-        debug_assertions,
-        instrument(level = "trace", name = "<() />", skip_all)
+        any(debug_assertions, feature = "ssr"),
+        instrument(level = "info", name = "<() />", skip_all)
     )]
     fn into_view(self, _: leptos_reactive::Scope) -> crate::View {
         let component = UnitRepr::default();

leptos_dom/src/helpers.rs

@@ -1,6 +1,6 @@
 //! A variety of DOM utility functions.
 
-use crate::{is_server, window};
+use crate::{events::typed as ev, is_server, window};
 use leptos_reactive::{on_cleanup, Scope};
 use std::time::Duration;
 use wasm_bindgen::{prelude::Closure, JsCast, JsValue, UnwrapThrowExt};
@@ -196,7 +196,7 @@ impl TimeoutHandle {
 /// Executes the given function after the given duration of time has passed.
 /// [`setTimeout()`](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout).
 #[cfg_attr(
-  debug_assertions,
+  any(debug_assertions, features = "ssr"),
   instrument(level = "trace", skip_all, fields(duration = ?duration))
 )]
 pub fn set_timeout(cb: impl FnOnce() + 'static, duration: Duration) {
@@ -206,7 +206,7 @@ pub fn set_timeout(cb: impl FnOnce() + 'static, duration: Duration) {
 /// Executes the given function after the given duration of time has passed, returning a cancelable handle.
 /// [`setTimeout()`](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout).
 #[cfg_attr(
-  debug_assertions,
+  any(debug_assertions, features = "ssr"),
   instrument(level = "trace", skip_all, fields(duration = ?duration))
 )]
 #[inline(always)]
@@ -329,7 +329,7 @@ impl IntervalHandle {
 /// returning a cancelable handle.
 /// See [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/setInterval).
 #[cfg_attr(
-  debug_assertions,
+  any(debug_assertions, features = "ssr"),
   instrument(level = "trace", skip_all, fields(duration = ?duration))
 )]
 #[deprecated = "use set_interval_with_handle() instead. In the future, \
@@ -364,7 +364,7 @@ pub fn set_interval(
 /// returning a cancelable handle.
 /// See [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/setInterval).
 #[cfg_attr(
-  debug_assertions,
+  any(debug_assertions, features = "ssr"),
   instrument(level = "trace", skip_all, fields(duration = ?duration))
 )]
 #[inline(always)]
@@ -403,12 +403,30 @@ pub fn set_interval_with_handle(
 }
 
 /// 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,
   instrument(level = "trace", skip_all, fields(event_name = %event_name))
 )]
 #[inline(always)]
-pub fn window_event_listener(
+pub fn window_event_listener_untyped(
     event_name: &str,
     cb: impl Fn(web_sys::Event) + 'static,
 ) {
@@ -438,6 +456,18 @@ pub fn window_event_listener(
     }
 }
 
+/// 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>(
+    event: E,
+    cb: impl Fn(E::EventType) + 'static,
+) where
+    E::EventType: JsCast,
+{
+    window_event_listener_untyped(&event.name(), move |e| {
+        cb(e.unchecked_into::<E::EventType>())
+    });
+}
+
 #[doc(hidden)]
 /// This exists only to enable type inference on event listeners when in SSR mode.
 pub fn ssr_event_listener<E: crate::ev::EventDescriptor + 'static>(

leptos_dom/src/html.rs

@@ -658,6 +658,15 @@ impl<El: ElementDescriptor + 'static> HtmlElement<El> {
     }
 
     /// Adds a class to an element.
+    ///
+    /// **Note**: In the builder syntax, this will be overwritten by the `class`
+    /// attribute if you use `.attr("class", /* */)`. In the `view` macro, they
+    /// are automatically re-ordered so that this over-writing does not happen.
+    ///
+    /// # Panics
+    /// This directly uses the browser’s `classList` API, which means it will throw
+    /// a runtime error if you pass more than a single class name. If you want to
+    /// pass more than one class name at a time, you can use [HtmlElement::classes].
     #[track_caller]
     pub fn class(
         self,
@@ -968,7 +977,7 @@ impl<El: ElementDescriptor + 'static> HtmlElement<El> {
 }
 
 impl<El: ElementDescriptor> IntoView for HtmlElement<El> {
-    #[cfg_attr(debug_assertions, instrument(level = "trace", name = "<HtmlElement />", skip_all, fields(tag = %self.element.name())))]
+    #[cfg_attr(any(debug_assertions, feature = "ssr"), instrument(level = "trace", name = "<HtmlElement />", skip_all, fields(tag = %self.element.name())))]
     #[cfg_attr(all(target_arch = "wasm32", feature = "web"), inline(always))]
     fn into_view(self, _: Scope) -> View {
         #[cfg(all(target_arch = "wasm32", feature = "web"))]
@@ -1012,7 +1021,7 @@ impl<El: ElementDescriptor> IntoView for HtmlElement<El> {
 
 impl<El: ElementDescriptor, const N: usize> IntoView for [HtmlElement<El>; N] {
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(level = "trace", name = "[HtmlElement; N]", skip_all)
     )]
     fn into_view(self, cx: Scope) -> View {
@@ -1139,7 +1148,7 @@ macro_rules! generate_html_tags {
 
         #[$meta]
       #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
           level = "trace",
           name = "HtmlElement",

leptos_dom/src/lib.rs

@@ -6,7 +6,7 @@
 //! The DOM implementation for `leptos`.
 
 #[doc(hidden)]
-#[cfg_attr(debug_assertions, macro_use)]
+#[cfg_attr(any(debug_assertions, feature = "ssr"), macro_use)]
 pub extern crate tracing;
 
 mod components;
@@ -93,8 +93,8 @@ pub trait Mountable {
 
 impl IntoView for () {
     #[cfg_attr(
-        debug_assertions,
-        instrument(level = "trace", name = "<() />", skip_all)
+        any(debug_assertions, feature = "ssr"),
+        instrument(level = "info", name = "<() />", skip_all)
     )]
     fn into_view(self, cx: Scope) -> View {
         Unit.into_view(cx)
@@ -106,8 +106,8 @@ where
     T: IntoView,
 {
     #[cfg_attr(
-        debug_assertions,
-        instrument(level = "trace", name = "Option<T>", skip_all)
+        any(debug_assertions, feature = "ssr"),
+        instrument(level = "info", name = "Option<T>", skip_all)
     )]
     fn into_view(self, cx: Scope) -> View {
         if let Some(t) = self {
@@ -124,8 +124,8 @@ where
     N: IntoView,
 {
     #[cfg_attr(
-        debug_assertions,
-        instrument(level = "trace", name = "Fn() -> impl IntoView", skip_all)
+        any(debug_assertions, feature = "ssr"),
+        instrument(level = "info", name = "Fn() -> impl IntoView", skip_all)
     )]
     #[track_caller]
     fn into_view(self, cx: Scope) -> View {
@@ -149,7 +149,7 @@ where
     T: IntoView + Clone,
 {
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(level = "trace", name = "ReadSignal<T>", skip_all)
     )]
     fn into_view(self, cx: Scope) -> View {
@@ -162,7 +162,7 @@ where
     T: IntoView + Clone,
 {
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(level = "trace", name = "RwSignal<T>", skip_all)
     )]
     fn into_view(self, cx: Scope) -> View {
@@ -175,7 +175,7 @@ where
     T: IntoView + Clone,
 {
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(level = "trace", name = "Memo<T>", skip_all)
     )]
     fn into_view(self, cx: Scope) -> View {
@@ -188,7 +188,7 @@ where
     T: IntoView + Clone,
 {
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(level = "trace", name = "Signal<T>", skip_all)
     )]
     fn into_view(self, cx: Scope) -> View {
@@ -201,7 +201,7 @@ where
     T: IntoView + Clone,
 {
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(level = "trace", name = "MaybeSignal<T>", skip_all)
     )]
     fn into_view(self, cx: Scope) -> View {
@@ -332,7 +332,7 @@ impl Element {
 }
 
 impl IntoView for Element {
-    #[cfg_attr(debug_assertions, instrument(level = "trace", name = "<Element />", skip_all, fields(tag = %self.name)))]
+    #[cfg_attr(debug_assertions, instrument(level = "info", name = "<Element />", skip_all, fields(tag = %self.name)))]
     fn into_view(self, _: Scope) -> View {
         View::Element(self)
     }
@@ -443,7 +443,7 @@ impl fmt::Debug for Text {
 }
 
 impl IntoView for Text {
-    #[cfg_attr(debug_assertions, instrument(level = "trace", name = "#text", skip_all, fields(content = %self.content)))]
+    #[cfg_attr(debug_assertions, instrument(level = "info", name = "#text", skip_all, fields(content = %self.content)))]
     fn into_view(self, _: Scope) -> View {
         View::Text(self)
     }
@@ -505,7 +505,7 @@ impl Default for View {
 }
 
 impl IntoView for View {
-    #[cfg_attr(debug_assertions, instrument(level = "trace", name = "Node", skip_all, fields(kind = self.kind_name())))]
+    #[cfg_attr(debug_assertions, instrument(level = "info", name = "Node", skip_all, fields(kind = self.kind_name())))]
     fn into_view(self, _: Scope) -> View {
         self
     }
@@ -519,8 +519,8 @@ impl IntoView for &View {
 
 impl<const N: usize> IntoView for [View; N] {
     #[cfg_attr(
-        debug_assertions,
-        instrument(level = "trace", name = "[Node; N]", skip_all)
+        any(debug_assertions, feature = "ssr"),
+        instrument(level = "info", name = "[Node; N]", skip_all)
     )]
     fn into_view(self, cx: Scope) -> View {
         Fragment::new(self.into_iter().collect()).into_view(cx)
@@ -998,8 +998,8 @@ api_planning! {
 
 impl IntoView for String {
     #[cfg_attr(
-        debug_assertions,
-        instrument(level = "trace", name = "#text", skip_all)
+        any(debug_assertions, feature = "ssr"),
+        instrument(level = "info", name = "#text", skip_all)
     )]
     #[inline(always)]
     fn into_view(self, _: Scope) -> View {
@@ -1008,6 +1008,10 @@ impl IntoView for String {
 }
 
 impl IntoView for &'static str {
+    #[cfg_attr(
+        any(debug_assertions, feature = "ssr"),
+        instrument(level = "info", name = "#text", skip_all)
+    )]
     #[inline(always)]
     fn into_view(self, _: Scope) -> View {
         View::Text(Text::new(self.into()))
@@ -1018,6 +1022,10 @@ impl<V> IntoView for Vec<V>
 where
     V: IntoView,
 {
+    #[cfg_attr(
+        any(debug_assertions, feature = "ssr"),
+        instrument(level = "info", name = "#text", skip_all)
+    )]
     fn into_view(self, cx: Scope) -> View {
         self.into_iter()
             .map(|v| v.into_view(cx))

leptos_dom/src/ssr.rs

@@ -26,6 +26,10 @@ type PinnedFuture<T> = Pin<Box<dyn Future<Output = T>>>;
 /// assert!(html.contains("Hello, world!</p>"));
 /// # }}
 /// ```
+#[cfg_attr(
+    any(debug_assertions, feature = "ssr"),
+    instrument(level = "info", skip_all,)
+)]
 pub fn render_to_string<F, N>(f: F) -> String
 where
     F: FnOnce(Scope) -> N + 'static,
@@ -55,6 +59,10 @@ where
 ///    it is waiting for a resource to resolve from the server, it doesn't run it initially.
 /// 3) 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(
     view: impl FnOnce(Scope) -> View + 'static,
 ) -> impl Stream<Item = String> {
@@ -75,6 +83,10 @@ pub fn render_to_stream(
 ///    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(
     view: impl FnOnce(Scope) -> View + 'static,
     prefix: impl FnOnce(Scope) -> Cow<'static, str> + 'static,
@@ -100,6 +112,10 @@ pub fn render_to_stream_with_prefix(
 ///    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(
     view: impl FnOnce(Scope) -> View + 'static,
     prefix: impl FnOnce(Scope) -> Cow<'static, str> + 'static,
@@ -122,6 +138,10 @@ pub fn render_to_stream_with_prefix_undisposed(
 ///    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(
     view: impl FnOnce(Scope) -> View + 'static,
     prefix: impl FnOnce(Scope) -> Cow<'static, str> + 'static,
@@ -209,7 +229,10 @@ 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,)
+)]
 fn fragments_to_chunks(
     fragments: impl Stream<Item = (String, String)>,
 ) -> impl Stream<Item = String> {
@@ -243,10 +266,18 @@ fn fragments_to_chunks(
 
 impl View {
     /// Consumes the node and renders it into an HTML string.
+    #[cfg_attr(
+        any(debug_assertions, feature = "ssr"),
+        instrument(level = "info", skip_all,)
+    )]
     pub fn render_to_string(self, _cx: Scope) -> Cow<'static, str> {
         self.render_to_string_helper(false)
     }
 
+    #[cfg_attr(
+        any(debug_assertions, feature = "ssr"),
+        instrument(level = "trace", skip_all,)
+    )]
     pub(crate) fn render_to_string_helper(
         self,
         dont_escape_text: bool,
@@ -543,7 +574,10 @@ pub(crate) fn to_kebab_case(name: &str) -> String {
 
     new_name
 }
-
+#[cfg_attr(
+    any(debug_assertions, feature = "ssr"),
+    instrument(level = "trace", skip_all,)
+)]
 pub(crate) fn render_serializers(
     serializers: FuturesUnordered<PinnedFuture<(ResourceId, String)>>,
 ) -> impl Stream<Item = String> {

leptos_dom/src/ssr_in_order.rs

@@ -19,6 +19,7 @@ use std::{borrow::Cow, collections::VecDeque};
 
 /// Renders a view to HTML, waiting to return until all `async` [Resource](leptos_reactive::Resource)s
 /// loaded in `<Suspense/>` elements have finished loading.
+#[tracing::instrument(level = "info", skip_all)]
 pub async fn render_to_string_async(
     view: impl FnOnce(Scope) -> View + 'static,
 ) -> String {
@@ -34,6 +35,7 @@ pub async fn render_to_string_async(
 /// in order:
 /// 1. HTML from the `view` in order, pausing to wait for each `<Suspense/>`
 /// 2. any serialized [Resource](leptos_reactive::Resource)s
+#[tracing::instrument(level = "info", skip_all)]
 pub fn render_to_stream_in_order(
     view: impl FnOnce(Scope) -> View + 'static,
 ) -> impl Stream<Item = String> {
@@ -48,6 +50,7 @@ pub fn render_to_stream_in_order(
 ///
 /// `additional_context` is injected before the `view` is rendered. The `prefix` is generated
 /// after the `view` is rendered, but before `<Suspense/>` nodes have resolved.
+#[tracing::instrument(level = "trace", skip_all)]
 pub fn render_to_stream_in_order_with_prefix(
     view: impl FnOnce(Scope) -> View + 'static,
     prefix: impl FnOnce(Scope) -> Cow<'static, str> + 'static,
@@ -70,6 +73,7 @@ pub fn render_to_stream_in_order_with_prefix(
 ///
 /// `additional_context` is injected before the `view` is rendered. The `prefix` is generated
 /// after the `view` is rendered, but before `<Suspense/>` nodes have resolved.
+#[tracing::instrument(level = "trace", skip_all)]
 pub fn render_to_stream_in_order_with_prefix_undisposed_with_context(
     view: impl FnOnce(Scope) -> View + 'static,
     prefix: impl FnOnce(Scope) -> Cow<'static, str> + 'static,
@@ -144,6 +148,7 @@ pub fn render_to_stream_in_order_with_prefix_undisposed_with_context(
     (stream, runtime, scope_id)
 }
 
+#[tracing::instrument(level = "trace", skip_all)]
 #[async_recursion(?Send)]
 async fn handle_blocking_chunks(
     tx: UnboundedSender<String>,
@@ -184,6 +189,7 @@ async fn handle_blocking_chunks(
     queued_chunks
 }
 
+#[tracing::instrument(level = "trace", skip_all)]
 #[async_recursion(?Send)]
 async fn handle_chunks(
     tx: UnboundedSender<String>,
@@ -211,12 +217,13 @@ async fn handle_chunks(
 
 impl View {
     /// Renders the view into a set of HTML chunks that can be streamed.
+    #[tracing::instrument(level = "trace", skip_all)]
     pub fn into_stream_chunks(self, cx: Scope) -> VecDeque<StreamChunk> {
         let mut chunks = VecDeque::new();
         self.into_stream_chunks_helper(cx, &mut chunks, false);
         chunks
     }
-
+    #[tracing::instrument(level = "trace", skip_all)]
     fn into_stream_chunks_helper(
         self,
         cx: Scope,

leptos_macro/Cargo.toml

@@ -26,6 +26,7 @@ leptos_hot_reload = { workspace = true }
 server_fn_macro = { workspace = true }
 convert_case = "0.6.0"
 uuid = { version = "1", features = ["v4"] }
+tracing = "0.1.37"
 
 [dev-dependencies]
 log = "0.4"

leptos_macro/src/component.rs

@@ -91,7 +91,7 @@ impl Parse for Model {
 
 // implemented manually because Vec::drain_filter is nightly only
 // follows std recommended parallel
-fn drain_filter<T>(
+pub fn drain_filter<T>(
     vec: &mut Vec<T>,
     mut some_predicate: impl FnMut(&mut T) -> bool,
 ) {
@@ -105,7 +105,7 @@ fn drain_filter<T>(
     }
 }
 
-fn convert_from_snake_case(name: &Ident) -> Ident {
+pub fn convert_from_snake_case(name: &Ident) -> Ident {
     let name_str = name.to_string();
     if !name_str.is_case(Snake) {
         name.clone()
@@ -157,8 +157,8 @@ impl ToTokens for Model {
                     quote! {
                         #[allow(clippy::let_with_type_underscore)]
                         #[cfg_attr(
-                            debug_assertions,
-                            ::leptos::leptos_dom::tracing::instrument(level = "trace", name = #trace_name, skip_all)
+                            any(debug_assertions, feature="ssr"),
+                            ::leptos::leptos_dom::tracing::instrument(level = "info", name = #trace_name, skip_all)
                         )]
                     },
                     quote! {
@@ -285,7 +285,7 @@ impl Prop {
 }
 
 #[derive(Clone)]
-struct Docs(Vec<Attribute>);
+pub struct Docs(Vec<Attribute>);
 
 impl ToTokens for Docs {
     fn to_tokens(&self, tokens: &mut TokenStream) {
@@ -300,7 +300,7 @@ impl ToTokens for Docs {
 }
 
 impl Docs {
-    fn new(attrs: &[Attribute]) -> Self {
+    pub fn new(attrs: &[Attribute]) -> Self {
         let attrs = attrs
             .iter()
             .filter(|attr| attr.path == parse_quote!(doc))
@@ -310,7 +310,7 @@ impl Docs {
         Self(attrs)
     }
 
-    fn padded(&self) -> TokenStream {
+    pub fn padded(&self) -> TokenStream {
         self.0
             .iter()
             .enumerate()
@@ -344,7 +344,7 @@ impl Docs {
             .collect()
     }
 
-    fn typed_builder(&self) -> String {
+    pub fn typed_builder(&self) -> String {
         #[allow(unstable_name_collisions)]
         let doc_str = self
             .0
@@ -517,7 +517,7 @@ fn generate_component_fn_prop_docs(props: &[Prop]) -> TokenStream {
     }
 }
 
-fn is_option(ty: &Type) -> bool {
+pub fn is_option(ty: &Type) -> bool {
     if let Type::Path(TypePath {
         path: Path { segments, .. },
         ..
@@ -533,7 +533,7 @@ fn is_option(ty: &Type) -> bool {
     }
 }
 
-fn unwrap_option(ty: &Type) -> Type {
+pub fn unwrap_option(ty: &Type) -> Type {
     const STD_OPTION_MSG: &str =
         "make sure you're not shadowing the `std::option::Option` type that \
          is automatically imported from the standard prelude";

leptos_macro/src/lib.rs

@@ -5,7 +5,7 @@
 extern crate proc_macro_error;
 
 use proc_macro::TokenStream;
-use proc_macro2::TokenTree;
+use proc_macro2::{Span, TokenTree};
 use quote::ToTokens;
 use server_fn_macro::{server_macro_impl, ServerContext};
 use syn::parse_macro_input;
@@ -35,6 +35,7 @@ mod view;
 use template::render_template;
 use view::render_view;
 mod component;
+mod slot;
 mod template;
 
 /// The `view` macro uses RSX (like JSX, but Rust!) It follows most of the
@@ -282,6 +283,10 @@ mod template;
 /// ```
 #[proc_macro_error::proc_macro_error]
 #[proc_macro]
+#[cfg_attr(
+    any(debug_assertions, feature = "ssr"),
+    tracing::instrument(level = "trace", skip_all,)
+)]
 pub fn view(tokens: TokenStream) -> TokenStream {
     let tokens: proc_macro2::TokenStream = tokens.into();
     let mut tokens = tokens.into_iter();
@@ -644,6 +649,128 @@ pub fn component(args: proc_macro::TokenStream, s: TokenStream) -> TokenStream {
         .into()
 }
 
+/// 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
+/// 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.
+///
+/// Here’s how you would define and use a simple Leptos component which can accept a custom slot:
+/// ```rust
+/// # use leptos::*;
+/// use std::time::Duration;
+///
+/// #[slot]
+/// struct HelloSlot {
+///     // Same prop syntax as components.
+///     #[prop(optional)]
+///     children: Option<Children>,
+/// }
+///
+/// #[component]
+/// fn HelloComponent(
+///     cx: Scope,
+///     /// Component slot, should be passed through the <HelloSlot slot> syntax.
+///     hello_slot: HelloSlot,
+/// ) -> impl IntoView {
+///     // mirror the children from the slot, if any were passed
+///     if let Some(children) = hello_slot.children {
+///         (children)(cx).into_view(cx)
+///     } else {
+///         ().into_view(cx)
+///     }
+/// }
+///
+/// #[component]
+/// fn App(cx: Scope) -> impl IntoView {
+///     view! { cx,
+///         <HelloComponent>
+///             <HelloSlot slot>
+///                 "Hello, World!"
+///             </HelloSlot>
+///         </HelloComponent>
+///     }
+/// }
+/// ```
+///
+/// /// Here are some important details about how slots work within the framework:
+/// 1. Most of the same rules from [component](crate::component!) macro should also be followed on slots.
+///
+/// 2. Specifying only `slot` without a name (such as in `<HelloSlot slot>`) will default the chosen slot to
+/// the a snake case version of the slot struct name (`hello_slot` for `<HelloSlot>`).
+///
+/// 3. Event handlers cannot be specified directly on the slot.
+///
+/// ```compile_error
+/// // ❌ This won't work
+/// # use leptos::*;
+///
+/// #[slot]
+/// struct SlotWithChildren {
+///     children: Children,
+/// }
+///
+/// #[component]
+/// fn ComponentWithSlot(cx: Scope, slot: SlotWithChildren) -> impl IntoView {
+///     (slot.children)(cx)
+/// }
+///
+/// #[component]
+/// fn App(cx: Scope) -> impl IntoView {
+///     view! { cx,
+///         <ComponentWithSlot>
+///           <SlotWithChildren slot:slot on:click=move |_| {}>
+///             <h1>"Hello, World!"</h1>
+///           </SlotWithChildren>
+///         </ComponentWithSlot>
+///     }
+/// }
+/// ```
+///
+/// ```
+/// // ✅ Do this instead
+/// # use leptos::*;
+///
+/// #[slot]
+/// struct SlotWithChildren {
+///     children: Children,
+/// }
+///
+/// #[component]
+/// fn ComponentWithSlot(cx: Scope, slot: SlotWithChildren) -> impl IntoView {
+///     (slot.children)(cx)
+/// }
+///
+/// #[component]
+/// fn App(cx: Scope) -> impl IntoView {
+///     view! { cx,
+///         <ComponentWithSlot>
+///           <SlotWithChildren slot:slot>
+///             <div on:click=move |_| {}>
+///               <h1>"Hello, World!"</h1>
+///             </div>
+///           </SlotWithChildren>
+///         </ComponentWithSlot>
+///     }
+/// }
+/// ```
+#[proc_macro_error::proc_macro_error]
+#[proc_macro_attribute]
+pub fn slot(args: proc_macro::TokenStream, s: TokenStream) -> TokenStream {
+    if !args.is_empty() {
+        abort!(
+            Span::call_site(),
+            "no arguments are supported";
+            help = "try just `#[slot]`"
+        );
+    }
+
+    parse_macro_input!(s as slot::Model)
+        .into_token_stream()
+        .into()
+}
+
 /// Declares that a function is a [server function](https://docs.rs/server_fn/latest/server_fn/index.html).
 /// This means that its body will only run on the server, i.e., when the `ssr` feature is enabled.
 ///

leptos_macro/src/slot.rs

@@ -0,0 +1,346 @@
+use crate::component::{
+    convert_from_snake_case, drain_filter, is_option, unwrap_option, Docs,
+};
+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,
+};
+
+pub struct Model {
+    docs: Docs,
+    vis: Visibility,
+    name: Ident,
+    props: Vec<Prop>,
+    body: ItemStruct,
+}
+
+impl Parse for Model {
+    fn parse(input: syn::parse::ParseStream) -> syn::Result<Self> {
+        let mut item = ItemStruct::parse(input)?;
+
+        let docs = Docs::new(&item.attrs);
+
+        let props = item
+            .fields
+            .clone()
+            .into_iter()
+            .map(Prop::new)
+            .collect::<Vec<_>>();
+
+        // 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)
+        });
+        item.fields.iter_mut().for_each(|arg| {
+            drain_filter(&mut arg.attrs, |attr| {
+                attr.path == parse_quote!(doc)
+                    || attr.path == parse_quote!(prop)
+            });
+        });
+
+        Ok(Self {
+            docs,
+            vis: item.vis.clone(),
+            name: convert_from_snake_case(&item.ident),
+            props,
+            body: item,
+        })
+    }
+}
+
+impl ToTokens for Model {
+    fn to_tokens(&self, tokens: &mut TokenStream) {
+        let Self {
+            docs,
+            vis,
+            name,
+            props,
+            body,
+        } = self;
+
+        let (_, generics, where_clause) = body.generics.split_for_impl();
+
+        let prop_builder_fields = prop_builder_fields(vis, props);
+        let prop_docs = generate_prop_docs(props);
+        let builder_name_doc = LitStr::new(
+            &format!("Props for the [`{name}`] slot."),
+            name.span(),
+        );
+
+        let output = quote! {
+            #[doc = #builder_name_doc]
+            #[doc = ""]
+            #docs
+            #prop_docs
+            #[derive(::leptos::typed_builder::TypedBuilder)]
+            #[builder(doc)]
+            #vis struct #name #generics #where_clause {
+                #prop_builder_fields
+            }
+
+            impl From<#name> for Vec<#name> {
+                fn from(value: #name) -> Self {
+                    vec![value]
+                }
+            }
+        };
+
+        tokens.append_all(output)
+    }
+}
+
+struct Prop {
+    docs: Docs,
+    prop_opts: PropOpt,
+    name: Ident,
+    ty: Type,
+}
+
+impl Prop {
+    fn new(arg: Field) -> Self {
+        let prop_opts =
+            PropOpt::from_attributes(&arg.attrs).unwrap_or_else(|e| {
+                // TODO: replace with `.unwrap_or_abort()` once https://gitlab.com/CreepySkeleton/proc-macro-error/-/issues/17 is fixed
+                abort!(e.span(), e.to_string());
+            });
+
+        let name = if let Some(i) = arg.ident {
+            i
+        } else {
+            abort!(
+                arg.ident,
+                "only `prop: bool` style types are allowed within the \
+                 `#[slot]` macro"
+            );
+        };
+
+        Self {
+            docs: Docs::new(&arg.attrs),
+            prop_opts,
+            name,
+            ty: arg.ty,
+        }
+    }
+}
+
+#[derive(Clone, Debug, AttributeDerive)]
+#[attribute(ident = prop)]
+struct PropOpt {
+    #[attribute(conflicts = [optional_no_strip, strip_option])]
+    pub optional: bool,
+    #[attribute(conflicts = [optional, strip_option])]
+    pub optional_no_strip: bool,
+    #[attribute(conflicts = [optional, optional_no_strip])]
+    pub strip_option: bool,
+    #[attribute(example = "5 * 10")]
+    pub default: Option<syn::Expr>,
+    pub into: bool,
+}
+
+struct TypedBuilderOpts {
+    default: bool,
+    default_with_value: Option<syn::Expr>,
+    strip_option: bool,
+    into: bool,
+}
+
+impl TypedBuilderOpts {
+    pub fn from_opts(opts: &PropOpt, is_ty_option: bool) -> Self {
+        Self {
+            default: opts.optional || opts.optional_no_strip,
+            default_with_value: opts.default.clone(),
+            strip_option: opts.strip_option || opts.optional && is_ty_option,
+            into: opts.into,
+        }
+    }
+}
+
+impl ToTokens for TypedBuilderOpts {
+    fn to_tokens(&self, tokens: &mut TokenStream) {
+        let default = if let Some(v) = &self.default_with_value {
+            let v = v.to_token_stream().to_string();
+            quote! { default_code=#v, }
+        } else if self.default {
+            quote! { default, }
+        } else {
+            quote! {}
+        };
+
+        let strip_option = if self.strip_option {
+            quote! { strip_option, }
+        } else {
+            quote! {}
+        };
+
+        let into = if self.into {
+            quote! { into, }
+        } else {
+            quote! {}
+        };
+
+        let setter = if !strip_option.is_empty() || !into.is_empty() {
+            quote! { setter(#strip_option #into) }
+        } else {
+            quote! {}
+        };
+
+        let output = quote! { #[builder(#default #setter)] };
+
+        tokens.append_all(output);
+    }
+}
+
+fn prop_builder_fields(vis: &Visibility, props: &[Prop]) -> TokenStream {
+    props
+        .iter()
+        .map(|prop| {
+            let Prop {
+                docs,
+                name,
+                prop_opts,
+                ty,
+            } = prop;
+
+            let builder_attrs =
+                TypedBuilderOpts::from_opts(prop_opts, is_option(ty));
+
+            let builder_docs = prop_to_doc(prop, PropDocStyle::Inline);
+
+            quote! {
+                #docs
+                #builder_docs
+                #builder_attrs
+                #vis #name: #ty,
+            }
+        })
+        .collect()
+}
+
+fn generate_prop_docs(props: &[Prop]) -> TokenStream {
+    let required_prop_docs = props
+        .iter()
+        .filter(|Prop { prop_opts, .. }| {
+            !(prop_opts.optional || prop_opts.optional_no_strip)
+        })
+        .map(|p| prop_to_doc(p, PropDocStyle::List))
+        .collect::<TokenStream>();
+
+    let optional_prop_docs = props
+        .iter()
+        .filter(|Prop { prop_opts, .. }| {
+            prop_opts.optional || prop_opts.optional_no_strip
+        })
+        .map(|p| prop_to_doc(p, PropDocStyle::List))
+        .collect::<TokenStream>();
+
+    let required_prop_docs = if !required_prop_docs.is_empty() {
+        quote! {
+            #[doc = "# Required Props"]
+            #required_prop_docs
+        }
+    } else {
+        quote! {}
+    };
+
+    let optional_prop_docs = if !optional_prop_docs.is_empty() {
+        quote! {
+            #[doc = "# Optional Props"]
+            #optional_prop_docs
+        }
+    } else {
+        quote! {}
+    };
+
+    quote! {
+        #required_prop_docs
+        #optional_prop_docs
+    }
+}
+
+#[derive(Clone, Copy)]
+enum PropDocStyle {
+    List,
+    Inline,
+}
+
+fn prop_to_doc(
+    Prop {
+        docs,
+        name,
+        ty,
+        prop_opts,
+    }: &Prop,
+    style: PropDocStyle,
+) -> TokenStream {
+    let ty = if (prop_opts.optional || prop_opts.strip_option) && is_option(ty)
+    {
+        unwrap_option(ty)
+    } else {
+        ty.to_owned()
+    };
+
+    let type_item: syn::Item = parse_quote! {
+        type SomeType = #ty;
+    };
+
+    let file = syn::File {
+        shebang: None,
+        attrs: vec![],
+        items: vec![type_item],
+    };
+
+    let pretty_ty = prettyplease::unparse(&file);
+
+    let pretty_ty = &pretty_ty[16..&pretty_ty.len() - 2];
+
+    match style {
+        PropDocStyle::List => {
+            let arg_ty_doc = LitStr::new(
+                &if !prop_opts.into {
+                    format!("- **{}**: [`{}`]", quote!(#name), pretty_ty)
+                } else {
+                    format!(
+                        "- **{}**: `impl`[`Into<{}>`]",
+                        quote!(#name),
+                        pretty_ty
+                    )
+                },
+                name.span(),
+            );
+
+            let arg_user_docs = docs.padded();
+
+            quote! {
+                #[doc = #arg_ty_doc]
+                #arg_user_docs
+            }
+        }
+        PropDocStyle::Inline => {
+            let arg_ty_doc = LitStr::new(
+                &if !prop_opts.into {
+                    format!(
+                        "**{}**: [`{}`]{}",
+                        quote!(#name),
+                        pretty_ty,
+                        docs.typed_builder()
+                    )
+                } else {
+                    format!(
+                        "**{}**: `impl`[`Into<{}>`]{}",
+                        quote!(#name),
+                        pretty_ty,
+                        docs.typed_builder()
+                    )
+                },
+                name.span(),
+            );
+
+            quote! {
+                #[builder(setter(doc = #arg_ty_doc))]
+            }
+        }
+    }
+}

leptos_macro/src/view.rs

@@ -1,7 +1,9 @@
 use crate::{attribute_value, Mode};
+use convert_case::{Case::Snake, Casing};
 use leptos_hot_reload::parsing::{is_component_node, value_to_string};
 use proc_macro2::{Ident, Span, TokenStream, TokenTree};
 use quote::{format_ident, quote, quote_spanned};
+use std::collections::HashMap;
 use syn::{spanned::Spanned, Expr, ExprLit, ExprPath, Lit};
 use syn_rsx::{Node, NodeAttribute, NodeElement, NodeName, NodeValueExpr};
 
@@ -149,14 +151,16 @@ pub(crate) fn render_view(
     global_class: Option<&TokenTree>,
     call_site: Option<String>,
 ) -> TokenStream {
+    let empty = {
+        let span = Span::call_site();
+        quote_spanned! {
+            span => leptos::leptos_dom::Unit
+        }
+    };
+
     if mode == Mode::Ssr {
         match nodes.len() {
-            0 => {
-                let span = Span::call_site();
-                quote_spanned! {
-                    span => leptos::leptos_dom::Unit
-                }
-            }
+            0 => empty,
             1 => {
                 root_node_to_tokens_ssr(cx, &nodes[0], global_class, call_site)
             }
@@ -170,28 +174,27 @@ pub(crate) fn render_view(
         }
     } else {
         match nodes.len() {
-            0 => {
-                let span = Span::call_site();
-                quote_spanned! {
-                    span => leptos::leptos_dom::Unit
-                }
-            }
+            0 => empty,
             1 => node_to_tokens(
                 cx,
                 &nodes[0],
                 TagType::Unknown,
+                None,
                 global_class,
                 call_site,
-            ),
+            )
+            .unwrap_or_default(),
             _ => fragment_to_tokens(
                 cx,
                 Span::call_site(),
                 nodes,
                 true,
                 TagType::Unknown,
+                None,
                 global_class,
                 call_site,
-            ),
+            )
+            .unwrap_or(empty),
         }
     }
 }
@@ -226,6 +229,7 @@ fn root_node_to_tokens_ssr(
         }
         Node::Element(node) => {
             root_element_to_tokens_ssr(cx, node, global_class, view_marker)
+                .unwrap_or_default()
         }
     }
 }
@@ -263,9 +267,14 @@ fn root_element_to_tokens_ssr(
     node: &NodeElement,
     global_class: Option<&TokenTree>,
     view_marker: Option<String>,
-) -> TokenStream {
+) -> Option<TokenStream> {
     if is_component_node(node) {
-        component_to_tokens(cx, node, global_class)
+        if let Some(slot) = get_slot(node) {
+            slot_to_tokens(cx, node, slot, None, global_class);
+            None
+        } else {
+            Some(component_to_tokens(cx, node, global_class))
+        }
     } else {
         let mut exprs_for_compiler = Vec::<TokenStream>::new();
 
@@ -275,6 +284,7 @@ fn root_element_to_tokens_ssr(
         element_to_tokens_ssr(
             cx,
             node,
+            None,
             &mut template,
             &mut holes,
             &mut chunks,
@@ -348,12 +358,12 @@ fn root_element_to_tokens_ssr(
         } else {
             quote! {}
         };
-        quote! {
+        Some(quote! {
         {
             #(#exprs_for_compiler)*
             ::leptos::HtmlElement::from_chunks(#cx, #full_name, [#(#chunks),*])#view_marker
         }
-        }
+        })
     }
 }
 
@@ -369,6 +379,7 @@ enum SsrElementChunks {
 fn element_to_tokens_ssr(
     cx: &Ident,
     node: &NodeElement,
+    parent_slots: Option<&mut HashMap<String, Vec<TokenStream>>>,
     template: &mut String,
     holes: &mut Vec<TokenStream>,
     chunks: &mut Vec<SsrElementChunks>,
@@ -377,13 +388,20 @@ fn element_to_tokens_ssr(
     global_class: Option<&TokenTree>,
 ) {
     if is_component_node(node) {
+        if let Some(slot) = get_slot(node) {
+            slot_to_tokens(cx, node, slot, parent_slots, global_class);
+            return;
+        }
+
         let component = component_to_tokens(cx, node, global_class);
+
         if !template.is_empty() {
             chunks.push(SsrElementChunks::String {
                 template: std::mem::take(template),
                 holes: std::mem::take(holes),
             })
         }
+
         chunks.push(SsrElementChunks::View(quote! {
           {#component}.into_view(#cx)
         }));
@@ -453,6 +471,7 @@ fn element_to_tokens_ssr(
                             element_to_tokens_ssr(
                                 cx,
                                 child,
+                                None,
                                 template,
                                 holes,
                                 chunks,
@@ -715,22 +734,50 @@ fn set_class_attribute_ssr(
     }
 }
 
+#[allow(clippy::too_many_arguments)]
 fn fragment_to_tokens(
     cx: &Ident,
     _span: Span,
     nodes: &[Node],
     lazy: bool,
     parent_type: TagType,
+    parent_slots: Option<&mut HashMap<String, Vec<TokenStream>>>,
     global_class: Option<&TokenTree>,
     view_marker: Option<String>,
-) -> TokenStream {
-    let nodes = nodes.iter().map(|node| {
-        let node = node_to_tokens(cx, node, parent_type, global_class, None);
+) -> Option<TokenStream> {
+    let mut slots = HashMap::new();
+    let has_slots = parent_slots.is_some();
 
-        quote! {
-            #node.into_view(#cx)
+    let mut nodes = nodes
+        .iter()
+        .filter_map(|node| {
+            let node = node_to_tokens(
+                cx,
+                node,
+                parent_type,
+                has_slots.then_some(&mut slots),
+                global_class,
+                None,
+            )?;
+
+            Some(quote! {
+                #node.into_view(#cx)
+            })
+        })
+        .peekable();
+
+    if nodes.peek().is_none() {
+        _ = nodes.collect::<Vec<_>>();
+        if let Some(parent_slots) = parent_slots {
+            for (slot, mut values) in slots.drain() {
+                parent_slots
+                    .entry(slot)
+                    .and_modify(|entry| entry.append(&mut values))
+                    .or_insert(values);
+            }
         }
-    });
+        return None;
+    }
 
     let view_marker = if let Some(marker) = view_marker {
         quote! { .with_view_marker(#marker) }
@@ -738,7 +785,7 @@ fn fragment_to_tokens(
         quote! {}
     };
 
-    if lazy {
+    let tokens = if lazy {
         quote! {
             {
                 leptos::Fragment::lazy(|| vec![
@@ -756,16 +803,28 @@ fn fragment_to_tokens(
                 #view_marker
             }
         }
+    };
+
+    if let Some(parent_slots) = parent_slots {
+        for (slot, mut values) in slots.drain() {
+            parent_slots
+                .entry(slot)
+                .and_modify(|entry| entry.append(&mut values))
+                .or_insert(values);
+        }
     }
+
+    Some(tokens)
 }
 
 fn node_to_tokens(
     cx: &Ident,
     node: &Node,
     parent_type: TagType,
+    parent_slots: Option<&mut HashMap<String, Vec<TokenStream>>>,
     global_class: Option<&TokenTree>,
     view_marker: Option<String>,
-) -> TokenStream {
+) -> Option<TokenStream> {
     match node {
         Node::Fragment(fragment) => fragment_to_tokens(
             cx,
@@ -773,24 +832,32 @@ fn node_to_tokens(
             &fragment.children,
             true,
             parent_type,
+            None,
             global_class,
             view_marker,
         ),
-        Node::Comment(_) | Node::Doctype(_) => quote! {},
+        Node::Comment(_) | Node::Doctype(_) => Some(quote! {}),
         Node::Text(node) => {
             let value = node.value.as_ref();
-            quote! {
+            Some(quote! {
                 leptos::leptos_dom::html::text(#value)
-            }
+            })
         }
         Node::Block(node) => {
             let value = node.value.as_ref();
-            quote! { #value }
+            Some(quote! { #value })
         }
-        Node::Attribute(node) => attribute_to_tokens(cx, node, global_class),
-        Node::Element(node) => {
-            element_to_tokens(cx, node, parent_type, global_class, view_marker)
+        Node::Attribute(node) => {
+            Some(attribute_to_tokens(cx, node, global_class))
         }
+        Node::Element(node) => element_to_tokens(
+            cx,
+            node,
+            parent_type,
+            parent_slots,
+            global_class,
+            view_marker,
+        ),
     }
 }
 
@@ -798,11 +865,17 @@ fn element_to_tokens(
     cx: &Ident,
     node: &NodeElement,
     mut parent_type: TagType,
+    parent_slots: Option<&mut HashMap<String, Vec<TokenStream>>>,
     global_class: Option<&TokenTree>,
     view_marker: Option<String>,
-) -> TokenStream {
+) -> Option<TokenStream> {
     if is_component_node(node) {
-        component_to_tokens(cx, node, global_class)
+        if let Some(slot) = get_slot(node) {
+            slot_to_tokens(cx, node, slot, parent_slots, global_class);
+            None
+        } else {
+            Some(component_to_tokens(cx, node, global_class))
+        }
     } else {
         let tag = node.name.to_string();
         let name = if is_custom_element(&tag) {
@@ -842,7 +915,10 @@ fn element_to_tokens(
         };
         let attrs = node.attributes.iter().filter_map(|node| {
             if let Node::Attribute(node) = node {
-                if node.key.to_string().trim().starts_with("class:") {
+                let name = node.key.to_string();
+                if name.trim().starts_with("class:")
+                    || fancy_class_name(&name, cx, node).is_some()
+                {
                     None
                 } else {
                     Some(attribute_to_tokens(cx, node, global_class))
@@ -853,7 +929,10 @@ fn element_to_tokens(
         });
         let class_attrs = node.attributes.iter().filter_map(|node| {
             if let Node::Attribute(node) = node {
-                if node.key.to_string().trim().starts_with("class:") {
+                let name = node.key.to_string();
+                if let Some((fancy, _, _)) = fancy_class_name(&name, cx, node) {
+                    Some(fancy)
+                } else if name.trim().starts_with("class:") {
                     Some(attribute_to_tokens(cx, node, global_class))
                 } else {
                     None
@@ -882,9 +961,16 @@ fn element_to_tokens(
                         &fragment.children,
                         true,
                         parent_type,
+                        None,
                         global_class,
                         None,
-                    ),
+                    )
+                    .unwrap_or({
+                        let span = Span::call_site();
+                        quote_spanned! {
+                            span => leptos::leptos_dom::Unit
+                        }
+                    }),
                     false,
                 ),
                 Node::Text(node) => {
@@ -918,9 +1004,11 @@ fn element_to_tokens(
                         cx,
                         node,
                         parent_type,
+                        None,
                         global_class,
                         None,
-                    ),
+                    )
+                    .unwrap_or_default(),
                     false,
                 ),
                 Node::Comment(_) | Node::Doctype(_) | Node::Attribute(_) => {
@@ -942,14 +1030,14 @@ fn element_to_tokens(
         } else {
             quote! {}
         };
-        quote! {
+        Some(quote! {
             #name
                 #(#attrs)*
                 #(#class_attrs)*
                 #global_class_expr
                 #(#children)*
                 #view_marker
-        }
+        })
     }
 }
 
@@ -1132,6 +1220,141 @@ pub(crate) fn parse_event_name(name: &str) -> (TokenStream, bool, bool) {
     (event_type, is_custom, is_force_undelegated)
 }
 
+pub(crate) fn slot_to_tokens(
+    cx: &Ident,
+    node: &NodeElement,
+    slot: &NodeAttribute,
+    parent_slots: Option<&mut HashMap<String, Vec<TokenStream>>>,
+    global_class: Option<&TokenTree>,
+) {
+    let name = slot.key.to_string();
+    let name = name.trim();
+    let name = convert_to_snake_case(if name.starts_with("slot:") {
+        name.replacen("slot:", "", 1)
+    } else {
+        node.name.to_string()
+    });
+
+    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 {
+            if is_slot(node) {
+                None
+            } else {
+                Some(node)
+            }
+        } else {
+            None
+        }
+    });
+
+    let props = attrs
+        .clone()
+        .filter(|attr| !attr.key.to_string().starts_with("clone:"))
+        .map(|attr| {
+            let name = &attr.key;
+
+            let value = attr
+                .value
+                .as_ref()
+                .map(|v| {
+                    let v = v.as_ref();
+                    quote! { #v }
+                })
+                .unwrap_or_else(|| quote! { #name });
+
+            quote! {
+                .#name(#[allow(unused_braces)] #value)
+            }
+        });
+
+    let items_to_clone = attrs
+        .clone()
+        .filter_map(|attr| {
+            attr.key
+                .to_string()
+                .strip_prefix("clone:")
+                .map(|ident| format_ident!("{ident}", span = attr.key.span()))
+        })
+        .collect::<Vec<_>>();
+
+    let mut slots = HashMap::new();
+    let children = if node.children.is_empty() {
+        quote! {}
+    } else {
+        cfg_if::cfg_if! {
+            if #[cfg(debug_assertions)] {
+                let marker = format!("<{component_name}/>-children");
+                let view_marker = quote! { .with_view_marker(#marker) };
+            } else {
+                let view_marker = quote! {};
+            }
+        }
+
+        let children = fragment_to_tokens(
+            cx,
+            span,
+            &node.children,
+            true,
+            TagType::Unknown,
+            Some(&mut slots),
+            global_class,
+            None,
+        );
+
+        if let Some(children) = children {
+            let clonables = items_to_clone
+                .iter()
+                .map(|ident| quote! { let #ident = #ident.clone(); });
+
+            quote! {
+                .children({
+                    #(#clonables)*
+
+                    Box::new(move |#cx| #children #view_marker)
+                })
+            }
+        } else {
+            quote! {}
+        }
+    };
+
+    let slots = slots.drain().map(|(slot, values)| {
+        let slot = Ident::new(&slot, span);
+        if values.len() > 1 {
+            quote! {
+                .#slot(vec![
+                    #(#values)*
+                ])
+            }
+        } else {
+            let value = &values[0];
+            quote! { .#slot(#value) }
+        }
+    });
+
+    let slot = quote! {
+        #component_name::builder()
+            #(#props)*
+            #(#slots)*
+            #children
+            .build()
+            .into(),
+    };
+
+    parent_slots
+        .entry(name)
+        .and_modify(|entry| entry.push(slot.clone()))
+        .or_insert(vec![slot]);
+}
+
 pub(crate) fn component_to_tokens(
     cx: &Ident,
     node: &NodeElement,
@@ -1193,6 +1416,7 @@ pub(crate) fn component_to_tokens(
         })
         .collect::<Vec<_>>();
 
+    let mut slots = HashMap::new();
     let children = if node.children.is_empty() {
         quote! {}
     } else {
@@ -1211,28 +1435,48 @@ pub(crate) fn component_to_tokens(
             &node.children,
             true,
             TagType::Unknown,
+            Some(&mut slots),
             global_class,
             None,
         );
 
-        let clonables = items_to_clone
-            .iter()
-            .map(|ident| quote! { let #ident = #ident.clone(); });
+        if let Some(children) = children {
+            let clonables = items_to_clone
+                .iter()
+                .map(|ident| quote! { let #ident = #ident.clone(); });
 
-        quote! {
-            .children({
-                #(#clonables)*
+            quote! {
+                .children({
+                    #(#clonables)*
 
-                Box::new(move |#cx| #children #view_marker)
-            })
+                    Box::new(move |#cx| #children #view_marker)
+                })
+            }
+        } else {
+            quote! {}
         }
     };
 
+    let slots = slots.drain().map(|(slot, values)| {
+        let slot = Ident::new(&slot, span);
+        if values.len() > 1 {
+            quote! {
+                .#slot(vec![
+                    #(#values)*
+                ])
+            }
+        } else {
+            let value = &values[0];
+            quote! { .#slot(#value) }
+        }
+    });
+
     let component = quote! {
         #name(
             #cx,
             ::leptos::component_props_builder(&#name)
                 #(#props)*
+                #(#slots)*
                 #children
                 .build()
         )
@@ -1320,6 +1564,34 @@ fn expr_to_ident(expr: &syn::Expr) -> Option<&ExprPath> {
     }
 }
 
+fn is_slot(node: &NodeAttribute) -> 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 {
+            if is_slot(node) {
+                Some(node)
+            } else {
+                None
+            }
+        } else {
+            None
+        }
+    })
+}
+
+fn convert_to_snake_case(name: String) -> String {
+    if !name.is_case(Snake) {
+        name.to_case(Snake)
+    } else {
+        name
+    }
+}
+
 fn is_custom_element(tag: &str) -> bool {
     tag.contains('-')
 }

leptos_reactive/src/context.rs

@@ -47,6 +47,10 @@ use std::any::{Any, TypeId};
 ///     todo!()
 /// }
 /// ```
+#[cfg_attr(
+    any(debug_assertions, feature = "ssr"),
+    instrument(level = "info", skip_all,)
+)]
 pub fn provide_context<T>(cx: Scope, value: T)
 where
     T: Clone + 'static,
@@ -106,6 +110,10 @@ where
 ///     todo!()
 /// }
 /// ```
+#[cfg_attr(
+    any(debug_assertions, feature = "ssr"),
+    instrument(level = "info", skip_all,)
+)]
 pub fn use_context<T>(cx: Scope) -> Option<T>
 where
     T: Clone + 'static,

leptos_reactive/src/effect.rs

@@ -47,7 +47,7 @@ use std::{any::Any, cell::RefCell, marker::PhantomData, rc::Rc};
 /// # }).dispose();
 /// ```
 #[cfg_attr(
-    debug_assertions,
+    any(debug_assertions, feature="ssr"),
     instrument(
         level = "trace",
         skip_all,
@@ -103,7 +103,7 @@ where
 /// # assert_eq!(b(), 2);
 /// # }).dispose();
 #[cfg_attr(
-    debug_assertions,
+    any(debug_assertions, feature="ssr"),
     instrument(
         level = "trace",
         skip_all,
@@ -128,7 +128,7 @@ pub fn create_isomorphic_effect<T>(
 
 #[doc(hidden)]
 #[cfg_attr(
-    debug_assertions,
+    any(debug_assertions, feature="ssr"),
     instrument(
         level = "trace",
         skip_all,
@@ -153,7 +153,7 @@ where
 {
     pub(crate) f: F,
     pub(crate) ty: PhantomData<T>,
-    #[cfg(debug_assertions)]
+    #[cfg(any(debug_assertions, feature = "ssr"))]
     pub(crate) defined_at: &'static std::panic::Location<'static>,
 }
 
@@ -167,7 +167,7 @@ where
     F: Fn(Option<T>) -> T,
 {
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             name = "Effect::run()",
             level = "debug",

leptos_reactive/src/lib.rs

@@ -67,7 +67,7 @@
 //! });
 //! ```
 
-#[cfg_attr(debug_assertions, macro_use)]
+#[cfg_attr(any(debug_assertions, feature = "ssr"), macro_use)]
 extern crate tracing;
 
 #[macro_use]

leptos_reactive/src/memo.rs

@@ -61,7 +61,7 @@ use std::{any::Any, cell::RefCell, fmt::Debug, marker::PhantomData, rc::Rc};
 /// # }).dispose();
 /// ```
 #[cfg_attr(
-    debug_assertions,
+    any(debug_assertions, feature="ssr"),
     instrument(
         level = "trace",
         skip_all,
@@ -159,7 +159,7 @@ where
     pub(crate) runtime: RuntimeId,
     pub(crate) id: NodeId,
     pub(crate) ty: PhantomData<T>,
-    #[cfg(debug_assertions)]
+    #[cfg(any(debug_assertions, feature = "ssr"))]
     pub(crate) defined_at: &'static std::panic::Location<'static>,
 }
 
@@ -172,7 +172,7 @@ where
             runtime: self.runtime,
             id: self.id,
             ty: PhantomData,
-            #[cfg(debug_assertions)]
+            #[cfg(any(debug_assertions, feature = "ssr"))]
             defined_at: self.defined_at,
         }
     }
@@ -182,7 +182,7 @@ impl<T> Copy for Memo<T> {}
 
 impl<T: Clone> SignalGetUntracked<T> for Memo<T> {
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "Memo::get_untracked()",
@@ -200,7 +200,7 @@ impl<T: Clone> SignalGetUntracked<T> for Memo<T> {
             match self.id.try_with_no_subscription(runtime, f) {
                 Ok(t) => t,
                 Err(_) => panic_getting_dead_memo(
-                    #[cfg(debug_assertions)]
+                    #[cfg(any(debug_assertions, feature = "ssr"))]
                     self.defined_at,
                 ),
             }
@@ -209,7 +209,7 @@ impl<T: Clone> SignalGetUntracked<T> for Memo<T> {
     }
 
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "Memo::try_get_untracked()",
@@ -229,7 +229,7 @@ impl<T: Clone> SignalGetUntracked<T> for Memo<T> {
 
 impl<T> SignalWithUntracked<T> for Memo<T> {
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "Memo::with_untracked()",
@@ -248,7 +248,7 @@ impl<T> SignalWithUntracked<T> for Memo<T> {
             match self.id.try_with_no_subscription(runtime, |v: &T| f(v)) {
                 Ok(t) => t,
                 Err(_) => panic_getting_dead_memo(
-                    #[cfg(debug_assertions)]
+                    #[cfg(any(debug_assertions, feature = "ssr"))]
                     self.defined_at,
                 ),
             }
@@ -257,7 +257,7 @@ impl<T> SignalWithUntracked<T> for Memo<T> {
     }
 
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "Memo::try_with_untracked()",
@@ -297,7 +297,7 @@ impl<T> SignalWithUntracked<T> for Memo<T> {
 /// ```
 impl<T: Clone> SignalGet<T> for Memo<T> {
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             name = "Memo::get()",
             level = "trace",
@@ -316,7 +316,7 @@ impl<T: Clone> SignalGet<T> for Memo<T> {
     }
 
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "Memo::try_get()",
@@ -337,7 +337,7 @@ impl<T: Clone> SignalGet<T> for Memo<T> {
 
 impl<T> SignalWith<T> for Memo<T> {
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "Memo::with()",
@@ -354,14 +354,14 @@ impl<T> SignalWith<T> for Memo<T> {
         match self.try_with(f) {
             Some(t) => t,
             None => panic_getting_dead_memo(
-                #[cfg(debug_assertions)]
+                #[cfg(any(debug_assertions, feature = "ssr"))]
                 self.defined_at,
             ),
         }
     }
 
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "Memo::try_with()",
@@ -392,7 +392,7 @@ impl<T> SignalWith<T> for Memo<T> {
 
 impl<T: Clone> SignalStream<T> for Memo<T> {
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "Memo::to_stream()",
@@ -439,7 +439,7 @@ where
 {
     pub f: F,
     pub t: PhantomData<T>,
-    #[cfg(debug_assertions)]
+    #[cfg(any(debug_assertions, feature = "ssr"))]
     pub(crate) defined_at: &'static std::panic::Location<'static>,
 }
 
@@ -449,7 +449,7 @@ where
     F: Fn(Option<&T>) -> T,
 {
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             name = "Memo::run()",
             level = "debug",
@@ -489,17 +489,18 @@ where
 #[track_caller]
 fn format_memo_warning(
     msg: &str,
-    #[cfg(debug_assertions)] defined_at: &'static std::panic::Location<'static>,
+    #[cfg(any(debug_assertions, feature = "ssr"))]
+    defined_at: &'static std::panic::Location<'static>,
 ) -> String {
     let location = std::panic::Location::caller();
 
     let defined_at_msg = {
-        #[cfg(debug_assertions)]
+        #[cfg(any(debug_assertions, feature = "ssr"))]
         {
             format!("signal created here: {defined_at}\n")
         }
 
-        #[cfg(not(debug_assertions))]
+        #[cfg(not(any(debug_assertions, feature = "ssr")))]
         {
             String::default()
         }
@@ -512,13 +513,14 @@ fn format_memo_warning(
 #[inline(never)]
 #[track_caller]
 pub(crate) fn panic_getting_dead_memo(
-    #[cfg(debug_assertions)] defined_at: &'static std::panic::Location<'static>,
+    #[cfg(any(debug_assertions, feature = "ssr"))]
+    defined_at: &'static std::panic::Location<'static>,
 ) -> ! {
     panic!(
         "{}",
         format_memo_warning(
             "Attempted to get a memo after it was disposed.",
-            #[cfg(debug_assertions)]
+            #[cfg(any(debug_assertions, feature = "ssr"))]
             defined_at,
         )
     )

leptos_reactive/src/resource.rs

@@ -63,6 +63,18 @@ use std::{
 /// # }
 /// # }).dispose();
 /// ```
+#[cfg_attr(
+    any(debug_assertions, feature="ssr"),
+    instrument(
+        level = "info",
+        skip_all,
+        fields(
+            scope = ?cx.id,
+            ty = %std::any::type_name::<T>(),
+            signal_ty = %std::any::type_name::<S>(),
+        )
+    )
+)]
 pub fn create_resource<S, T, Fu>(
     cx: Scope,
     source: impl Fn() -> S + 'static,
@@ -88,9 +100,9 @@ where
 /// serialized, or you just want to make sure the [`Future`] runs locally, use
 /// [`create_local_resource_with_initial_value()`].
 #[cfg_attr(
-    debug_assertions,
+    any(debug_assertions, feature="ssr"),
     instrument(
-        level = "trace",
+        level = "info",
         skip_all,
         fields(
             scope = ?cx.id,
@@ -135,9 +147,9 @@ where
 /// **Note**: This is not “blocking” in the sense that it blocks the current thread. Rather,
 /// it is blocking in the sense that it blocks the server from sending a response.
 #[cfg_attr(
-    debug_assertions,
+    any(debug_assertions, feature="ssr"),
     instrument(
-        level = "trace",
+        level = "info",
         skip_all,
         fields(
             scope = ?cx.id,
@@ -224,7 +236,7 @@ where
         id,
         source_ty: PhantomData,
         out_ty: PhantomData,
-        #[cfg(debug_assertions)]
+        #[cfg(any(debug_assertions, features = "ssr"))]
         defined_at: std::panic::Location::caller(),
     }
 }
@@ -260,6 +272,18 @@ where
 /// # }
 /// # }).dispose();
 /// ```
+#[cfg_attr(
+    any(debug_assertions, feature="ssr"),
+    instrument(
+        level = "info",
+        skip_all,
+        fields(
+            scope = ?cx.id,
+            ty = %std::any::type_name::<T>(),
+            signal_ty = %std::any::type_name::<S>(),
+        )
+    )
+)]
 pub fn create_local_resource<S, T, Fu>(
     cx: Scope,
     source: impl Fn() -> S + 'static,
@@ -282,9 +306,9 @@ where
 /// on the local system and therefore its output type does not need to be
 /// [`Serializable`].
 #[cfg_attr(
-    debug_assertions,
+    any(debug_assertions, feature="ssr"),
     instrument(
-        level = "trace",
+        level = "info",
         skip_all,
         fields(
             scope = ?cx.id,
@@ -348,7 +372,7 @@ where
         id,
         source_ty: PhantomData,
         out_ty: PhantomData,
-        #[cfg(debug_assertions)]
+        #[cfg(any(debug_assertions, features = "ssr"))]
         defined_at: std::panic::Location::caller(),
     }
 }
@@ -447,6 +471,10 @@ where
     ///
     /// If you want to get the value without cloning it, use [`Resource::with`].
     /// (`value.read(cx)` is equivalent to `value.with(cx, T::clone)`.)
+    #[cfg_attr(
+        any(debug_assertions, feature = "ssr"),
+        instrument(level = "info", skip_all,)
+    )]
     #[track_caller]
     pub fn read(&self, cx: Scope) -> Option<T>
     where
@@ -469,6 +497,10 @@ where
     ///
     /// If you want to get the value by cloning it, you can use
     /// [`Resource::read`].
+    #[cfg_attr(
+        any(debug_assertions, feature = "ssr"),
+        instrument(level = "info", skip_all,)
+    )]
     #[track_caller]
     pub fn with<U>(&self, cx: Scope, f: impl FnOnce(&T) -> U) -> Option<U> {
         let location = std::panic::Location::caller();
@@ -482,6 +514,10 @@ where
     }
 
     /// Returns a signal that indicates whether the resource is currently loading.
+    #[cfg_attr(
+        any(debug_assertions, feature = "ssr"),
+        instrument(level = "trace", skip_all,)
+    )]
     pub fn loading(&self) -> ReadSignal<bool> {
         with_runtime(self.runtime, |runtime| {
             runtime.resource(self.id, |resource: &ResourceState<S, T>| {
@@ -495,6 +531,10 @@ where
     }
 
     /// Re-runs the async function with the current source data.
+    #[cfg_attr(
+        any(debug_assertions, feature = "ssr"),
+        instrument(level = "trace", skip_all,)
+    )]
     pub fn refetch(&self) {
         _ = with_runtime(self.runtime, |runtime| {
             runtime.resource(self.id, |resource: &ResourceState<S, T>| {
@@ -506,6 +546,10 @@ where
     /// Returns a [`Future`] that will resolve when the resource has loaded,
     /// yield its [`ResourceId`] and a JSON string.
     #[cfg(any(feature = "ssr", doc))]
+    #[cfg_attr(
+        any(debug_assertions, feature = "ssr"),
+        instrument(level = "trace", skip_all,)
+    )]
     pub async fn to_serialization_resolver(
         &self,
         cx: Scope,
@@ -674,7 +718,7 @@ where
     pub(crate) id: ResourceId,
     pub(crate) source_ty: PhantomData<S>,
     pub(crate) out_ty: PhantomData<T>,
-    #[cfg(debug_assertions)]
+    #[cfg(any(debug_assertions, features = "ssr"))]
     pub(crate) defined_at: &'static std::panic::Location<'static>,
 }
 
@@ -689,13 +733,17 @@ where
     S: 'static,
     T: 'static,
 {
+    #[cfg_attr(
+        any(debug_assertions, feature = "ssr"),
+        instrument(level = "trace", skip_all,)
+    )]
     fn clone(&self) -> Self {
         Self {
             runtime: self.runtime,
             id: self.id,
             source_ty: PhantomData,
             out_ty: PhantomData,
-            #[cfg(debug_assertions)]
+            #[cfg(any(debug_assertions, features = "ssr"))]
             defined_at: self.defined_at,
         }
     }
@@ -745,6 +793,10 @@ where
     S: Clone + 'static,
     T: 'static,
 {
+    #[cfg_attr(
+        any(debug_assertions, feature = "ssr"),
+        instrument(level = "info", skip_all,)
+    )]
     #[track_caller]
     pub fn read(
         &self,
@@ -757,6 +809,10 @@ where
         self.with(cx, T::clone, location)
     }
 
+    #[cfg_attr(
+        any(debug_assertions, feature = "ssr"),
+        instrument(level = "info", skip_all,)
+    )]
     #[track_caller]
     pub fn with<U>(
         &self,
@@ -825,11 +881,17 @@ where
         create_isomorphic_effect(cx, increment);
         v
     }
-
+    #[cfg_attr(
+        any(debug_assertions, feature = "ssr"),
+        instrument(level = "trace", skip_all,)
+    )]
     pub fn refetch(&self) {
         self.load(true);
     }
-
+    #[cfg_attr(
+        any(debug_assertions, feature = "ssr"),
+        instrument(level = "trace", skip_all,)
+    )]
     fn load(&self, refetching: bool) {
         // doesn't refetch if already refetching
         if refetching && self.scheduled.get() {
@@ -896,7 +958,10 @@ where
             })
         });
     }
-
+    #[cfg_attr(
+        any(debug_assertions, feature = "ssr"),
+        instrument(level = "trace", skip_all,)
+    )]
     pub fn resource_to_serialization_resolver(
         &self,
         cx: Scope,
@@ -957,7 +1022,10 @@ where
     fn as_any(&self) -> &dyn Any {
         self
     }
-
+    #[cfg_attr(
+        any(debug_assertions, feature = "ssr"),
+        instrument(level = "trace", skip_all,)
+    )]
     fn to_serialization_resolver(
         &self,
         cx: Scope,

leptos_reactive/src/runtime.rs

@@ -360,6 +360,10 @@ impl Debug for Runtime {
 }
 /// Get the selected runtime from the thread-local set of runtimes. On the server,
 /// this will return the correct runtime. In the browser, there should only be one runtime.
+#[cfg_attr(
+    any(debug_assertions, feature = "ssr"),
+    instrument(level = "trace", skip_all,)
+)]
 #[inline(always)] // it monomorphizes anyway
 pub(crate) fn with_runtime<T>(
     id: RuntimeId,
@@ -522,14 +526,14 @@ impl RuntimeId {
                 runtime: self,
                 id,
                 ty: PhantomData,
-                #[cfg(debug_assertions)]
+                #[cfg(any(debug_assertions, feature = "ssr"))]
                 defined_at: std::panic::Location::caller(),
             },
             WriteSignal {
                 runtime: self,
                 id,
                 ty: PhantomData,
-                #[cfg(debug_assertions)]
+                #[cfg(any(debug_assertions, feature = "ssr"))]
                 defined_at: std::panic::Location::caller(),
             },
         )
@@ -573,14 +577,14 @@ impl RuntimeId {
                             runtime: self,
                             id,
                             ty: PhantomData,
-                            #[cfg(debug_assertions)]
+                            #[cfg(any(debug_assertions, feature = "ssr"))]
                             defined_at: std::panic::Location::caller(),
                         },
                         WriteSignal {
                             runtime: self,
                             id,
                             ty: PhantomData,
-                            #[cfg(debug_assertions)]
+                            #[cfg(any(debug_assertions, feature = "ssr"))]
                             defined_at: std::panic::Location::caller(),
                         },
                     )
@@ -608,7 +612,7 @@ impl RuntimeId {
             runtime: self,
             id,
             ty: PhantomData,
-            #[cfg(debug_assertions)]
+            #[cfg(any(debug_assertions, feature = "ssr"))]
             defined_at: std::panic::Location::caller(),
         }
     }
@@ -671,7 +675,7 @@ impl RuntimeId {
             Rc::new(Effect {
                 f,
                 ty: PhantomData,
-                #[cfg(debug_assertions)]
+                #[cfg(any(debug_assertions, feature = "ssr"))]
                 defined_at: std::panic::Location::caller(),
             }),
         )
@@ -693,12 +697,12 @@ impl RuntimeId {
                 Rc::new(MemoState {
                     f,
                     t: PhantomData,
-                    #[cfg(debug_assertions)]
+                    #[cfg(any(debug_assertions, feature = "ssr"))]
                     defined_at: std::panic::Location::caller(),
                 }),
             ),
             ty: PhantomData,
-            #[cfg(debug_assertions)]
+            #[cfg(any(debug_assertions, feature = "ssr"))]
             defined_at: std::panic::Location::caller(),
         }
     }
@@ -726,7 +730,10 @@ impl Runtime {
             .borrow_mut()
             .insert(AnyResource::Serializable(state))
     }
-
+    #[cfg_attr(
+        any(debug_assertions, feature = "ssr"),
+        instrument(level = "trace", skip_all,)
+    )]
     pub(crate) fn resource<S, T, U>(
         &self,
         id: ResourceId,

leptos_reactive/src/scope.rs

@@ -37,6 +37,10 @@ pub fn create_scope(
 /// values will not have access to values created under another `create_scope`.
 ///
 /// You usually don't need to call this manually.
+#[cfg_attr(
+    any(debug_assertions, features = "ssr"),
+    instrument(level = "trace", skip_all,)
+)]
 pub fn raw_scope_and_disposer(runtime: RuntimeId) -> (Scope, ScopeDisposer) {
     runtime.raw_scope_and_disposer()
 }
@@ -48,6 +52,10 @@ pub fn raw_scope_and_disposer(runtime: RuntimeId) -> (Scope, ScopeDisposer) {
 /// of the synchronous operation.
 ///
 /// You usually don't need to call this manually.
+#[cfg_attr(
+    any(debug_assertions, features = "ssr"),
+    instrument(level = "trace", skip_all,)
+)]
 pub fn run_scope<T>(
     runtime: RuntimeId,
     f: impl FnOnce(Scope) -> T + 'static,
@@ -61,6 +69,10 @@ pub fn run_scope<T>(
 /// If you do not dispose of the scope on your own, memory will leak.
 ///
 /// You usually don't need to call this manually.
+#[cfg_attr(
+    any(debug_assertions, features = "ssr"),
+    instrument(level = "trace", skip_all,)
+)]
 pub fn run_scope_undisposed<T>(
     runtime: RuntimeId,
     f: impl FnOnce(Scope) -> T + 'static,
@@ -116,6 +128,10 @@ impl Scope {
     /// This is useful for applications like a list or a router, which may want to create child scopes and
     /// dispose of them when they are no longer needed (e.g., a list item has been destroyed or the user
     /// has navigated away from the route.)
+    #[cfg_attr(
+        any(debug_assertions, features = "ssr"),
+        instrument(level = "trace", skip_all,)
+    )]
     #[inline(always)]
     pub fn child_scope(self, f: impl FnOnce(Scope)) -> ScopeDisposer {
         let (_, disposer) = self.run_child_scope(f);
@@ -131,6 +147,10 @@ impl Scope {
     /// This is useful for applications like a list or a router, which may want to create child scopes and
     /// dispose of them when they are no longer needed (e.g., a list item has been destroyed or the user
     /// has navigated away from the route.)
+    #[cfg_attr(
+        any(debug_assertions, features = "ssr"),
+        instrument(level = "trace", skip_all,)
+    )]
     #[inline(always)]
     pub fn run_child_scope<T>(
         self,
@@ -183,6 +203,10 @@ impl Scope {
     ///
     /// # });
     /// ```
+    #[cfg_attr(
+        any(debug_assertions, features = "ssr"),
+        instrument(level = "trace", skip_all,)
+    )]
     #[inline(always)]
     pub fn untrack<T>(&self, f: impl FnOnce() -> T) -> T {
         with_runtime(self.runtime, |runtime| {
@@ -228,6 +252,10 @@ impl Scope {
     /// 1. dispose of all child `Scope`s
     /// 2. run all cleanup functions defined for this scope by [`on_cleanup`](crate::on_cleanup).
     /// 3. dispose of all signals, effects, and resources owned by this `Scope`.
+    #[cfg_attr(
+        any(debug_assertions, features = "ssr"),
+        instrument(level = "trace", skip_all,)
+    )]
     pub fn dispose(self) {
         _ = with_runtime(self.runtime, |runtime| {
             // dispose of all child scopes
@@ -301,7 +329,10 @@ impl Scope {
             }
         })
     }
-
+    #[cfg_attr(
+        any(debug_assertions, features = "ssr"),
+        instrument(level = "trace", skip_all,)
+    )]
     pub(crate) fn push_scope_property(&self, prop: ScopeProperty) {
         _ = with_runtime(self.runtime, |runtime| {
             let scopes = runtime.scopes.borrow();
@@ -314,7 +345,10 @@ impl Scope {
             }
         })
     }
-
+    #[cfg_attr(
+        any(debug_assertions, features = "ssr"),
+        instrument(level = "trace", skip_all,)
+    )]
     /// Returns the the parent Scope, if any.
     pub fn parent(&self) -> Option<Scope> {
         match with_runtime(self.runtime, |runtime| {
@@ -329,6 +363,10 @@ impl Scope {
     }
 }
 
+#[cfg_attr(
+    any(debug_assertions, features = "ssr"),
+    instrument(level = "trace", skip_all,)
+)]
 fn push_cleanup(cx: Scope, cleanup_fn: Box<dyn FnOnce()>) {
     _ = with_runtime(cx.runtime, |runtime| {
         let mut cleanups = runtime.scope_cleanups.borrow_mut();
@@ -388,6 +426,10 @@ impl ScopeDisposer {
 
 impl Scope {
     /// Returns IDs for all [`Resource`](crate::Resource)s found on any scope.
+    #[cfg_attr(
+        any(debug_assertions, features = "ssr"),
+        instrument(level = "trace", skip_all,)
+    )]
     pub fn all_resources(&self) -> Vec<ResourceId> {
         with_runtime(self.runtime, |runtime| runtime.all_resources())
             .unwrap_or_default()
@@ -395,12 +437,20 @@ impl Scope {
 
     /// Returns IDs for all [`Resource`](crate::Resource)s found on any scope that are
     /// pending from the server.
+    #[cfg_attr(
+        any(debug_assertions, features = "ssr"),
+        instrument(level = "trace", skip_all,)
+    )]
     pub fn pending_resources(&self) -> Vec<ResourceId> {
         with_runtime(self.runtime, |runtime| runtime.pending_resources())
             .unwrap_or_default()
     }
 
     /// Returns IDs for all [`Resource`](crate::Resource)s found on any scope.
+    #[cfg_attr(
+        any(debug_assertions, features = "ssr"),
+        instrument(level = "trace", skip_all,)
+    )]
     pub fn serialization_resolvers(
         &self,
     ) -> FuturesUnordered<PinnedFuture<(ResourceId, String)>> {
@@ -412,6 +462,10 @@ impl Scope {
 
     /// Registers the given [`SuspenseContext`](crate::SuspenseContext) with the current scope,
     /// calling the `resolver` when its resources are all resolved.
+    #[cfg_attr(
+        any(debug_assertions, features = "ssr"),
+        instrument(level = "trace", skip_all,)
+    )]
     pub fn register_suspense(
         &self,
         context: SuspenseContext,
@@ -465,6 +519,10 @@ impl Scope {
     ///
     /// The keys are hydration IDs. Values are tuples of two pinned
     /// `Future`s that return content for out-of-order and in-order streaming, respectively.
+    #[cfg_attr(
+        any(debug_assertions, features = "ssr"),
+        instrument(level = "trace", skip_all,)
+    )]
     pub fn pending_fragments(&self) -> HashMap<String, FragmentData> {
         with_runtime(self.runtime, |runtime| {
             let mut shared_context = runtime.shared_context.borrow_mut();
@@ -474,6 +532,10 @@ impl Scope {
     }
 
     /// A future that will resolve when all blocking fragments are ready.
+    #[cfg_attr(
+        any(debug_assertions, features = "ssr"),
+        instrument(level = "trace", skip_all,)
+    )]
     pub fn blocking_fragments_ready(self) -> PinnedFuture<()> {
         use futures::StreamExt;
 
@@ -497,6 +559,10 @@ impl Scope {
     ///
     /// Returns a tuple of two pinned `Future`s that return content for out-of-order
     /// and in-order streaming, respectively.
+    #[cfg_attr(
+        any(debug_assertions, features = "ssr"),
+        instrument(level = "trace", skip_all,)
+    )]
     pub fn take_pending_fragment(&self, id: &str) -> Option<FragmentData> {
         with_runtime(self.runtime, |runtime| {
             let mut shared_context = runtime.shared_context.borrow_mut();
@@ -512,6 +578,10 @@ impl Scope {
     ///
     /// # Panics
     /// Panics if the runtime this scope belongs to has already been disposed.
+    #[cfg_attr(
+        any(debug_assertions, features = "ssr"),
+        instrument(level = "trace", skip_all,)
+    )]
     #[inline(always)]
     pub fn batch<T>(&self, f: impl FnOnce() -> T) -> T {
         with_runtime(self.runtime, move |runtime| {

leptos_reactive/src/signal.rs

@@ -332,7 +332,7 @@ pub trait SignalDispose {
 /// #
 /// ```
 #[cfg_attr(
-    debug_assertions,
+ any(debug_assertions, features="ssr"),
     instrument(
         level = "trace",
         skip_all,
@@ -354,7 +354,7 @@ pub fn create_signal<T>(
 
 /// Works exactly as [`create_signal`], but creates multiple signals at once.
 #[cfg_attr(
-    debug_assertions,
+ any(debug_assertions, features="ssr"),
     instrument(
         level = "trace",
         skip_all,
@@ -374,7 +374,7 @@ pub fn create_many_signals<T>(
 
 /// Works exactly as [`create_many_signals`], but applies the map function to each signal pair.
 #[cfg_attr(
-    debug_assertions,
+ any(debug_assertions, features="ssr"),
     instrument(
         level = "trace",
         skip_all,
@@ -404,7 +404,7 @@ where
 /// **Note**: If used on the server side during server rendering, this will return `None`
 /// immediately and not begin driving the stream.
 #[cfg_attr(
-    debug_assertions,
+ any(debug_assertions, features="ssr"),
     instrument(
         level = "trace",
         skip_all,
@@ -496,13 +496,13 @@ where
     pub(crate) runtime: RuntimeId,
     pub(crate) id: NodeId,
     pub(crate) ty: PhantomData<T>,
-    #[cfg(debug_assertions)]
+    #[cfg(any(debug_assertions, feature = "ssr"))]
     pub(crate) defined_at: &'static std::panic::Location<'static>,
 }
 
 impl<T: Clone> SignalGetUntracked<T> for ReadSignal<T> {
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "ReadSignal::get_untracked()",
@@ -522,14 +522,14 @@ impl<T: Clone> SignalGetUntracked<T> for ReadSignal<T> {
         {
             Ok(t) => t,
             Err(_) => panic_getting_dead_signal(
-                #[cfg(debug_assertions)]
+                #[cfg(any(debug_assertions, feature = "ssr"))]
                 self.defined_at,
             ),
         }
     }
 
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "ReadSignal::try_get_untracked()",
@@ -553,7 +553,7 @@ impl<T: Clone> SignalGetUntracked<T> for ReadSignal<T> {
 
 impl<T> SignalWithUntracked<T> for ReadSignal<T> {
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "ReadSignal::with_untracked()",
@@ -571,7 +571,7 @@ impl<T> SignalWithUntracked<T> for ReadSignal<T> {
     }
 
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "ReadSignal::try_with_untracked()",
@@ -617,7 +617,7 @@ impl<T> SignalWithUntracked<T> for ReadSignal<T> {
 /// ```
 impl<T> SignalWith<T> for ReadSignal<T> {
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "ReadSignal::with()",
@@ -641,14 +641,14 @@ impl<T> SignalWith<T> for ReadSignal<T> {
         {
             Ok(o) => o,
             Err(_) => panic_getting_dead_signal(
-                #[cfg(debug_assertions)]
+                #[cfg(any(debug_assertions, feature = "ssr"))]
                 self.defined_at,
             ),
         }
     }
 
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "ReadSignal::try_with()",
@@ -688,7 +688,7 @@ impl<T> SignalWith<T> for ReadSignal<T> {
 /// ```
 impl<T: Clone> SignalGet<T> for ReadSignal<T> {
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "ReadSignal::get()",
@@ -711,14 +711,14 @@ impl<T: Clone> SignalGet<T> for ReadSignal<T> {
         {
             Ok(t) => t,
             Err(_) => panic_getting_dead_signal(
-                #[cfg(debug_assertions)]
+                #[cfg(any(debug_assertions, feature = "ssr"))]
                 self.defined_at,
             ),
         }
     }
 
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "ReadSignal::try_get()",
@@ -737,7 +737,7 @@ impl<T: Clone> SignalGet<T> for ReadSignal<T> {
 
 impl<T: Clone> SignalStream<T> for ReadSignal<T> {
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "ReadSignal::to_stream()",
@@ -862,7 +862,7 @@ where
     pub(crate) runtime: RuntimeId,
     pub(crate) id: NodeId,
     pub(crate) ty: PhantomData<T>,
-    #[cfg(debug_assertions)]
+    #[cfg(any(debug_assertions, feature = "ssr"))]
     pub(crate) defined_at: &'static std::panic::Location<'static>,
 }
 
@@ -871,7 +871,7 @@ where
     T: 'static,
 {
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "WriteSignal::set_untracked()",
@@ -889,7 +889,7 @@ where
     }
 
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "WriteSignal::try_set_untracked()",
@@ -913,7 +913,7 @@ where
 
 impl<T> SignalUpdateUntracked<T> for WriteSignal<T> {
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "WriteSignal::updated_untracked()",
@@ -931,7 +931,7 @@ impl<T> SignalUpdateUntracked<T> for WriteSignal<T> {
     }
 
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "WriteSignal::update_returning_untracked()",
@@ -978,7 +978,7 @@ impl<T> SignalUpdateUntracked<T> for WriteSignal<T> {
 /// ```
 impl<T> SignalUpdate<T> for WriteSignal<T> {
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             name = "WriteSignal::update()",
             level = "trace",
@@ -994,14 +994,14 @@ impl<T> SignalUpdate<T> for WriteSignal<T> {
     fn update(&self, f: impl FnOnce(&mut T)) {
         if self.id.update(self.runtime, f).is_none() {
             warn_updating_dead_signal(
-                #[cfg(debug_assertions)]
+                #[cfg(any(debug_assertions, feature = "ssr"))]
                 self.defined_at,
             );
         }
     }
 
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             name = "WriteSignal::try_update()",
             level = "trace",
@@ -1038,7 +1038,7 @@ impl<T> SignalUpdate<T> for WriteSignal<T> {
 /// ```
 impl<T> SignalSet<T> for WriteSignal<T> {
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "WriteSignal::set()",
@@ -1055,7 +1055,7 @@ impl<T> SignalSet<T> for WriteSignal<T> {
     }
 
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "WriteSignal::try_set()",
@@ -1113,7 +1113,7 @@ impl<T> Copy for WriteSignal<T> {}
 /// #
 /// ```
 #[cfg_attr(
-    debug_assertions,
+ any(debug_assertions, features="ssr"),
     instrument(
         level = "trace",
         skip_all,
@@ -1180,7 +1180,7 @@ where
     pub(crate) runtime: RuntimeId,
     pub(crate) id: NodeId,
     pub(crate) ty: PhantomData<T>,
-    #[cfg(debug_assertions)]
+    #[cfg(any(debug_assertions, feature = "ssr"))]
     pub(crate) defined_at: &'static std::panic::Location<'static>,
 }
 
@@ -1194,7 +1194,7 @@ impl<T> Copy for RwSignal<T> {}
 
 impl<T: Clone> SignalGetUntracked<T> for RwSignal<T> {
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "RwSignal::get_untracked()",
@@ -1211,7 +1211,7 @@ impl<T: Clone> SignalGetUntracked<T> for RwSignal<T> {
     }
 
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "RwSignal::try_get_untracked()",
@@ -1231,7 +1231,7 @@ impl<T: Clone> SignalGetUntracked<T> for RwSignal<T> {
         {
             Ok(t) => t,
             Err(_) => panic_getting_dead_signal(
-                #[cfg(debug_assertions)]
+                #[cfg(any(debug_assertions, feature = "ssr"))]
                 self.defined_at,
             ),
         }
@@ -1240,7 +1240,7 @@ impl<T: Clone> SignalGetUntracked<T> for RwSignal<T> {
 
 impl<T> SignalWithUntracked<T> for RwSignal<T> {
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "RwSignal::with_untracked()",
@@ -1258,7 +1258,7 @@ impl<T> SignalWithUntracked<T> for RwSignal<T> {
     }
 
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "RwSignal::try_with_untracked()",
@@ -1286,7 +1286,7 @@ impl<T> SignalWithUntracked<T> for RwSignal<T> {
 
 impl<T> SignalSetUntracked<T> for RwSignal<T> {
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "RwSignal::set_untracked()",
@@ -1304,7 +1304,7 @@ impl<T> SignalSetUntracked<T> for RwSignal<T> {
     }
 
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "RwSignal::try_set_untracked()",
@@ -1328,7 +1328,7 @@ impl<T> SignalSetUntracked<T> for RwSignal<T> {
 
 impl<T> SignalUpdateUntracked<T> for RwSignal<T> {
     #[cfg_attr(
-    debug_assertions,
+ any(debug_assertions, features="ssr"),
     instrument(
         level = "trace",
         name = "RwSignal::update_untracked()",
@@ -1346,7 +1346,7 @@ impl<T> SignalUpdateUntracked<T> for RwSignal<T> {
     }
 
     #[cfg_attr(
-    debug_assertions,
+ any(debug_assertions, features="ssr"),
     instrument(
         level = "trace",
         name = "RwSignal::update_returning_untracked()",
@@ -1367,7 +1367,7 @@ impl<T> SignalUpdateUntracked<T> for RwSignal<T> {
     }
 
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "RwSignal::try_update_untracked()",
@@ -1409,7 +1409,7 @@ impl<T> SignalUpdateUntracked<T> for RwSignal<T> {
 /// ```
 impl<T> SignalWith<T> for RwSignal<T> {
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "RwSignal::with()",
@@ -1433,14 +1433,14 @@ impl<T> SignalWith<T> for RwSignal<T> {
         {
             Ok(o) => o,
             Err(_) => panic_getting_dead_signal(
-                #[cfg(debug_assertions)]
+                #[cfg(any(debug_assertions, feature = "ssr"))]
                 self.defined_at,
             ),
         }
     }
 
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "RwSignal::try_with()",
@@ -1481,7 +1481,7 @@ impl<T> SignalWith<T> for RwSignal<T> {
 /// ```
 impl<T: Clone> SignalGet<T> for RwSignal<T> {
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "RwSignal::get()",
@@ -1507,14 +1507,14 @@ impl<T: Clone> SignalGet<T> for RwSignal<T> {
         {
             Ok(t) => t,
             Err(_) => panic_getting_dead_signal(
-                #[cfg(debug_assertions)]
+                #[cfg(any(debug_assertions, feature = "ssr"))]
                 self.defined_at,
             ),
         }
     }
 
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "RwSignal::try_get()",
@@ -1561,7 +1561,7 @@ impl<T: Clone> SignalGet<T> for RwSignal<T> {
 /// ```
 impl<T> SignalUpdate<T> for RwSignal<T> {
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "RwSignal::update()",
@@ -1577,14 +1577,14 @@ impl<T> SignalUpdate<T> for RwSignal<T> {
     fn update(&self, f: impl FnOnce(&mut T)) {
         if self.id.update(self.runtime, f).is_none() {
             warn_updating_dead_signal(
-                #[cfg(debug_assertions)]
+                #[cfg(any(debug_assertions, feature = "ssr"))]
                 self.defined_at,
             );
         }
     }
 
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "RwSignal::try_update()",
@@ -1616,7 +1616,7 @@ impl<T> SignalUpdate<T> for RwSignal<T> {
 /// ```
 impl<T> SignalSet<T> for RwSignal<T> {
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "RwSignal::set()",
@@ -1633,7 +1633,7 @@ impl<T> SignalSet<T> for RwSignal<T> {
     }
 
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "RwSignal::try_set()",
@@ -1697,7 +1697,7 @@ impl<T> RwSignal<T> {
     /// # }).dispose();
     /// ```
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "RwSignal::read_only()",
@@ -1715,7 +1715,7 @@ impl<T> RwSignal<T> {
             runtime: self.runtime,
             id: self.id,
             ty: PhantomData,
-            #[cfg(debug_assertions)]
+            #[cfg(any(debug_assertions, feature = "ssr"))]
             defined_at: std::panic::Location::caller(),
         }
     }
@@ -1735,7 +1735,7 @@ impl<T> RwSignal<T> {
     /// # }).dispose();
     /// ```
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "RwSignal::write_only()",
@@ -1753,7 +1753,7 @@ impl<T> RwSignal<T> {
             runtime: self.runtime,
             id: self.id,
             ty: PhantomData,
-            #[cfg(debug_assertions)]
+            #[cfg(any(debug_assertions, feature = "ssr"))]
             defined_at: std::panic::Location::caller(),
         }
     }
@@ -1772,7 +1772,7 @@ impl<T> RwSignal<T> {
     /// # }).dispose();
     /// ```
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "RwSignal::split()",
@@ -1791,14 +1791,14 @@ impl<T> RwSignal<T> {
                 runtime: self.runtime,
                 id: self.id,
                 ty: PhantomData,
-                #[cfg(debug_assertions)]
+                #[cfg(any(debug_assertions, feature = "ssr"))]
                 defined_at: std::panic::Location::caller(),
             },
             WriteSignal {
                 runtime: self.runtime,
                 id: self.id,
                 ty: PhantomData,
-                #[cfg(debug_assertions)]
+                #[cfg(any(debug_assertions, feature = "ssr"))]
                 defined_at: std::panic::Location::caller(),
             },
         )
@@ -2028,17 +2028,18 @@ impl NodeId {
 #[track_caller]
 fn format_signal_warning(
     msg: &str,
-    #[cfg(debug_assertions)] defined_at: &'static std::panic::Location<'static>,
+    #[cfg(any(debug_assertions, feature = "ssr"))]
+    defined_at: &'static std::panic::Location<'static>,
 ) -> String {
     let location = std::panic::Location::caller();
 
     let defined_at_msg = {
-        #[cfg(debug_assertions)]
+        #[cfg(any(debug_assertions, feature = "ssr"))]
         {
             format!("signal created here: {defined_at}\n")
         }
 
-        #[cfg(not(debug_assertions))]
+        #[cfg(not(any(debug_assertions, feature = "ssr")))]
         {
             String::default()
         }
@@ -2051,13 +2052,14 @@ fn format_signal_warning(
 #[inline(never)]
 #[track_caller]
 pub(crate) fn panic_getting_dead_signal(
-    #[cfg(debug_assertions)] defined_at: &'static std::panic::Location<'static>,
+    #[cfg(any(debug_assertions, feature = "ssr"))]
+    defined_at: &'static std::panic::Location<'static>,
 ) -> ! {
     panic!(
         "{}",
         format_signal_warning(
             "Attempted to get a signal after it was disposed.",
-            #[cfg(debug_assertions)]
+            #[cfg(any(debug_assertions, feature = "ssr"))]
             defined_at,
         )
     )
@@ -2067,11 +2069,12 @@ pub(crate) fn panic_getting_dead_signal(
 #[inline(never)]
 #[track_caller]
 pub(crate) fn warn_updating_dead_signal(
-    #[cfg(debug_assertions)] defined_at: &'static std::panic::Location<'static>,
+    #[cfg(any(debug_assertions, feature = "ssr"))]
+    defined_at: &'static std::panic::Location<'static>,
 ) {
     console_warn(&format_signal_warning(
         "Attempted to update a signal after it was disposed.",
-        #[cfg(debug_assertions)]
+        #[cfg(any(debug_assertions, feature = "ssr"))]
         defined_at,
     ));
 }

leptos_reactive/src/signal_wrappers_read.rs

@@ -66,7 +66,7 @@ where
     T: 'static,
 {
     inner: SignalTypes<T>,
-    #[cfg(debug_assertions)]
+    #[cfg(any(debug_assertions, feature = "ssr"))]
     defined_at: &'static std::panic::Location<'static>,
 }
 
@@ -74,7 +74,7 @@ impl<T> Clone for Signal<T> {
     fn clone(&self) -> Self {
         Self {
             inner: self.inner,
-            #[cfg(debug_assertions)]
+            #[cfg(any(debug_assertions, feature = "ssr"))]
             defined_at: self.defined_at,
         }
     }
@@ -87,7 +87,7 @@ impl<T> Copy for Signal<T> {}
 /// `Signal::get_untracked`.
 impl<T: Clone> SignalGetUntracked<T> for Signal<T> {
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "Signal::get_untracked()",
@@ -109,7 +109,7 @@ impl<T: Clone> SignalGetUntracked<T> for Signal<T> {
     }
 
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "Signal::try_get_untracked()",
@@ -133,7 +133,7 @@ impl<T: Clone> SignalGetUntracked<T> for Signal<T> {
 
 impl<T> SignalWithUntracked<T> for Signal<T> {
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "Signal::with_untracked()",
@@ -159,7 +159,7 @@ impl<T> SignalWithUntracked<T> for Signal<T> {
     }
 
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "Signal::try_with_untracked()",
@@ -212,7 +212,7 @@ impl<T> SignalWithUntracked<T> for Signal<T> {
 /// ```
 impl<T> SignalWith<T> for Signal<T> {
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "Signal::with()",
@@ -232,7 +232,7 @@ impl<T> SignalWith<T> for Signal<T> {
     }
 
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "Signal::try_with()",
@@ -338,7 +338,7 @@ where
     /// ```
     #[track_caller]
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             skip_all,
@@ -360,7 +360,7 @@ where
                 cx,
                 store_value(cx, Box::new(derived_signal)),
             ),
-            #[cfg(debug_assertions)]
+            #[cfg(any(debug_assertions, feature = "ssr"))]
             defined_at: std::panic::Location::caller(),
         }
     }
@@ -380,7 +380,7 @@ impl<T> From<ReadSignal<T>> for Signal<T> {
     fn from(value: ReadSignal<T>) -> Self {
         Self {
             inner: SignalTypes::ReadSignal(value),
-            #[cfg(debug_assertions)]
+            #[cfg(any(debug_assertions, feature = "ssr"))]
             defined_at: std::panic::Location::caller(),
         }
     }
@@ -391,7 +391,7 @@ impl<T> From<RwSignal<T>> for Signal<T> {
     fn from(value: RwSignal<T>) -> Self {
         Self {
             inner: SignalTypes::ReadSignal(value.read_only()),
-            #[cfg(debug_assertions)]
+            #[cfg(any(debug_assertions, feature = "ssr"))]
             defined_at: std::panic::Location::caller(),
         }
     }
@@ -402,7 +402,7 @@ impl<T> From<Memo<T>> for Signal<T> {
     fn from(value: Memo<T>) -> Self {
         Self {
             inner: SignalTypes::Memo(value),
-            #[cfg(debug_assertions)]
+            #[cfg(any(debug_assertions, feature = "ssr"))]
             defined_at: std::panic::Location::caller(),
         }
     }
@@ -606,7 +606,7 @@ impl<T: Clone> SignalGet<T> for MaybeSignal<T> {
 /// ```
 impl<T> SignalWith<T> for MaybeSignal<T> {
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "MaybeSignal::with()",
@@ -622,7 +622,7 @@ impl<T> SignalWith<T> for MaybeSignal<T> {
     }
 
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "MaybeSignal::try_with()",
@@ -711,7 +711,7 @@ where
     /// # });
     /// ```
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             name = "MaybeSignal::derive()",

leptos_reactive/src/signal_wrappers_write.rs

@@ -57,7 +57,7 @@ where
     T: 'static,
 {
     inner: SignalSetterTypes<T>,
-    #[cfg(debug_assertions)]
+    #[cfg(any(debug_assertions, feature = "ssr"))]
     defined_at: &'static std::panic::Location<'static>,
 }
 
@@ -65,7 +65,7 @@ impl<T> Clone for SignalSetter<T> {
     fn clone(&self) -> Self {
         Self {
             inner: self.inner,
-            #[cfg(debug_assertions)]
+            #[cfg(any(debug_assertions, feature = "ssr"))]
             defined_at: self.defined_at,
         }
     }
@@ -76,7 +76,7 @@ impl<T: Default + 'static> Default for SignalSetter<T> {
     fn default() -> Self {
         Self {
             inner: SignalSetterTypes::Default,
-            #[cfg(debug_assertions)]
+            #[cfg(any(debug_assertions, feature = "ssr"))]
             defined_at: std::panic::Location::caller(),
         }
     }
@@ -138,7 +138,7 @@ where
     /// ```
     #[track_caller]
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             skip_all,
@@ -153,7 +153,7 @@ where
                 cx,
                 store_value(cx, Box::new(mapped_setter)),
             ),
-            #[cfg(debug_assertions)]
+            #[cfg(any(debug_assertions, feature = "ssr"))]
             defined_at: std::panic::Location::caller(),
         }
     }
@@ -179,7 +179,7 @@ where
     /// assert_eq!(count(), 8);
     /// # });
     #[cfg_attr(
-        debug_assertions,
+        any(debug_assertions, feature = "ssr"),
         instrument(
             level = "trace",
             skip_all,
@@ -203,7 +203,7 @@ impl<T> From<WriteSignal<T>> for SignalSetter<T> {
     fn from(value: WriteSignal<T>) -> Self {
         Self {
             inner: SignalSetterTypes::Write(value),
-            #[cfg(debug_assertions)]
+            #[cfg(any(debug_assertions, feature = "ssr"))]
             defined_at: std::panic::Location::caller(),
         }
     }
@@ -214,7 +214,7 @@ impl<T> From<RwSignal<T>> for SignalSetter<T> {
     fn from(value: RwSignal<T>) -> Self {
         Self {
             inner: SignalSetterTypes::Write(value.write_only()),
-            #[cfg(debug_assertions)]
+            #[cfg(any(debug_assertions, feature = "ssr"))]
             defined_at: std::panic::Location::caller(),
         }
     }

leptos_reactive/src/stored_value.rs

@@ -191,8 +191,10 @@ impl<T> StoredValue<T> {
     /// the signal is still valid. [`None`] otherwise.
     pub fn try_with_value<O>(&self, f: impl FnOnce(&T) -> O) -> Option<O> {
         with_runtime(self.runtime, |runtime| {
-            let values = runtime.stored_values.borrow();
-            let value = values.get(self.id)?;
+            let value = {
+                let values = runtime.stored_values.borrow();
+                values.get(self.id)?.clone()
+            };
             let value = value.borrow();
             let value = value.downcast_ref::<T>()?;
             Some(f(value))
@@ -407,6 +409,7 @@ impl<T> StoredValue<T> {
 /// let callback_b = move || data.with(|data| data.value == "b");
 /// # }).dispose();
 /// ```
+#[track_caller]
 pub fn store_value<T>(cx: Scope, value: T) -> StoredValue<T>
 where
     T: 'static,

leptos_server/Cargo.toml

@@ -14,6 +14,7 @@ server_fn = { workspace = true, default-features = false }
 lazy_static = "1"
 serde = { version = "1", features = ["derive"] }
 thiserror = "1"
+tracing = "0.1"
 
 [dev-dependencies]
 leptos = { path = "../leptos" }

leptos_server/src/action.rs

@@ -89,16 +89,28 @@ where
     O: 'static,
 {
     /// Calls the `async` function with a reference to the input type as its argument.
+    #[cfg_attr(
+        any(debug_assertions, feature = "ssr"),
+        tracing::instrument(level = "trace", skip_all,)
+    )]
     pub fn dispatch(&self, input: I) {
         self.0.with_value(|a| a.dispatch(input))
     }
 
     /// Whether the action has been dispatched and is currently waiting for its future to be resolved.
+    #[cfg_attr(
+        any(debug_assertions, feature = "ssr"),
+        tracing::instrument(level = "trace", skip_all,)
+    )]
     pub fn pending(&self) -> ReadSignal<bool> {
         self.0.with_value(|a| a.pending.read_only())
     }
 
     /// Updates whether the action is currently pending.
+    #[cfg_attr(
+        any(debug_assertions, feature = "ssr"),
+        tracing::instrument(level = "trace", skip_all,)
+    )]
     pub fn set_pending(&self, pending: bool) {
         self.0.try_with_value(|a| a.pending.set(pending));
     }
@@ -111,6 +123,10 @@ where
 
     /// Associates the URL of the given server function with this action.
     /// This enables integration with the `ActionForm` component in `leptos_router`.
+    #[cfg_attr(
+        any(debug_assertions, feature = "ssr"),
+        tracing::instrument(level = "trace", skip_all,)
+    )]
     pub fn using_server_fn<T: ServerFn>(self) -> Self {
         let prefix = T::prefix();
         self.0.update_value(|state| {
@@ -130,11 +146,19 @@ where
 
     /// The current argument that was dispatched to the `async` function.
     /// `Some` while we are waiting for it to resolve, `None` if it has resolved.
+    #[cfg_attr(
+        any(debug_assertions, feature = "ssr"),
+        tracing::instrument(level = "trace", skip_all,)
+    )]
     pub fn input(&self) -> RwSignal<Option<I>> {
         self.0.with_value(|a| a.input)
     }
 
     /// The most recent return value of the `async` function.
+    #[cfg_attr(
+        any(debug_assertions, feature = "ssr"),
+        tracing::instrument(level = "trace", skip_all,)
+    )]
     pub fn value(&self) -> RwSignal<Option<O>> {
         self.0.with_value(|a| a.value)
     }
@@ -181,6 +205,10 @@ where
     O: 'static,
 {
     /// Calls the `async` function with a reference to the input type as its argument.
+    #[cfg_attr(
+        any(debug_assertions, feature = "ssr"),
+        tracing::instrument(level = "trace", skip_all,)
+    )]
     pub fn dispatch(&self, input: I) {
         let fut = (self.action_fn)(&input);
         self.input.set(Some(input));
@@ -273,6 +301,10 @@ where
 ///     create_action(cx, |input: &(usize, String)| async { todo!() });
 /// # });
 /// ```
+#[cfg_attr(
+    any(debug_assertions, feature = "ssr"),
+    tracing::instrument(level = "trace", skip_all,)
+)]
 pub fn create_action<I, O, F, Fu>(cx: Scope, action_fn: F) -> Action<I, O>
 where
     I: 'static,
@@ -316,6 +348,10 @@ where
 /// let my_server_action = create_server_action::<MyServerFn>(cx);
 /// # });
 /// ```
+#[cfg_attr(
+    any(debug_assertions, feature = "ssr"),
+    tracing::instrument(level = "trace", skip_all,)
+)]
 pub fn create_server_action<S>(
     cx: Scope,
 ) -> Action<S, Result<S::Output, ServerFnError>>

leptos_server/src/lib.rs

@@ -85,6 +85,8 @@ mod action;
 mod multi_action;
 pub use action::*;
 pub use multi_action::*;
+extern crate tracing;
+
 #[cfg(any(feature = "ssr", doc))]
 use std::{
     collections::HashMap,

leptos_server/src/multi_action.rs

@@ -94,11 +94,19 @@ where
     O: 'static,
 {
     /// Calls the `async` function with a reference to the input type as its argument.
+    #[cfg_attr(
+        any(debug_assertions, features = "ssr"),
+        tracing::instrument(level = "trace", skip_all,)
+    )]
     pub fn dispatch(&self, input: I) {
         self.0.with_value(|a| a.dispatch(input))
     }
 
     /// The set of all submissions to this multi-action.
+    #[cfg_attr(
+        any(debug_assertions, features = "ssr"),
+        tracing::instrument(level = "trace", skip_all,)
+    )]
     pub fn submissions(&self) -> ReadSignal<Vec<Submission<I, O>>> {
         self.0.with_value(|a| a.submissions())
     }
@@ -110,12 +118,20 @@ where
     }
 
     /// How many times an action has successfully resolved.
+    #[cfg_attr(
+        any(debug_assertions, features = "ssr"),
+        tracing::instrument(level = "trace", skip_all,)
+    )]
     pub fn version(&self) -> RwSignal<usize> {
         self.0.with_value(|a| a.version)
     }
 
     /// Associates the URL of the given server function with this action.
     /// This enables integration with the `MultiActionForm` component in `leptos_router`.
+    #[cfg_attr(
+        any(debug_assertions, features = "ssr"),
+        tracing::instrument(level = "trace", skip_all,)
+    )]
     pub fn using_server_fn<T: ServerFn>(self) -> Self {
         let prefix = T::prefix();
         self.0.update_value(|a| {
@@ -195,6 +211,10 @@ where
     O: 'static,
 {
     /// Calls the `async` function with a reference to the input type as its argument.
+    #[cfg_attr(
+        any(debug_assertions, features = "ssr"),
+        tracing::instrument(level = "trace", skip_all,)
+    )]
     pub fn dispatch(&self, input: I) {
         let cx = self.cx;
         let fut = (self.action_fn)(&input);
@@ -283,6 +303,10 @@ where
 ///     create_multi_action(cx, |input: &(usize, String)| async { todo!() });
 /// # });
 /// ```
+#[cfg_attr(
+    any(debug_assertions, features = "ssr"),
+    tracing::instrument(level = "trace", skip_all,)
+)]
 pub fn create_multi_action<I, O, F, Fu>(
     cx: Scope,
     action_fn: F,
@@ -326,6 +350,10 @@ where
 /// let my_server_multi_action = create_server_multi_action::<MyServerFn>(cx);
 /// # });
 /// ```
+#[cfg_attr(
+    any(debug_assertions, features = "ssr"),
+    tracing::instrument(level = "trace", skip_all,)
+)]
 pub fn create_server_multi_action<S>(
     cx: Scope,
 ) -> MultiAction<S, Result<S::Output, ServerFnError>>

router/Cargo.toml

@@ -10,7 +10,7 @@ description = "Router for the Leptos web framework."
 
 [dependencies]
 leptos = { workspace = true }
-cached = { optional = true }
+cached = { version = "0.43.0", optional = true }
 cfg-if = "1"
 common_macros = "0.1"
 gloo-net = { version = "0.2", features = ["http"] }

router/src/components/form.rs

@@ -10,6 +10,10 @@ type OnResponse = Rc<dyn Fn(&web_sys::Response)>;
 
 /// An HTML [`form`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) progressively
 /// enhanced to use client-side routing.
+#[cfg_attr(
+    any(debug_assertions, feature = "ssr"),
+    tracing::instrument(level = "trace", skip_all,)
+)]
 #[component]
 pub fn Form<A>(
     cx: Scope,
@@ -202,6 +206,10 @@ where
 /// Automatically turns a server [Action](leptos_server::Action) into an HTML
 /// [`form`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form)
 /// progressively enhanced to use client-side routing.
+#[cfg_attr(
+    any(debug_assertions, feature = "ssr"),
+    tracing::instrument(level = "trace", skip_all,)
+)]
 #[component]
 pub fn ActionForm<I, O>(
     cx: Scope,
@@ -328,6 +336,10 @@ where
 /// Automatically turns a server [MultiAction](leptos_server::MultiAction) into an HTML
 /// [`form`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form)
 /// progressively enhanced to use client-side routing.
+#[cfg_attr(
+    any(debug_assertions, feature = "ssr"),
+    tracing::instrument(level = "trace", skip_all,)
+)]
 #[component]
 pub fn MultiActionForm<I, O>(
     cx: Scope,
@@ -408,7 +420,10 @@ where
     }
     form
 }
-
+#[cfg_attr(
+    any(debug_assertions, feature = "ssr"),
+    tracing::instrument(level = "trace", skip_all,)
+)]
 fn extract_form_attributes(
     ev: &web_sys::Event,
 ) -> (web_sys::HtmlFormElement, String, String, String) {
@@ -536,6 +551,10 @@ impl<T> FromFormData for T
 where
     T: serde::de::DeserializeOwned,
 {
+    #[cfg_attr(
+        any(debug_assertions, feature = "ssr"),
+        tracing::instrument(level = "trace", skip_all,)
+    )]
     fn from_event(
         ev: &web_sys::Event,
     ) -> Result<Self, serde_urlencoded::de::Error> {
@@ -545,7 +564,10 @@ where
 
         Self::from_form_data(&form_data)
     }
-
+    #[cfg_attr(
+        any(debug_assertions, feature = "ssr"),
+        tracing::instrument(level = "trace", skip_all,)
+    )]
     fn from_form_data(
         form_data: &web_sys::FormData,
     ) -> Result<Self, serde_urlencoded::de::Error> {

router/src/components/link.rs

@@ -42,6 +42,10 @@ where
 /// 2) Sets the `aria-current` attribute if this link is the active link (i.e., it’s a link to the page you’re on).
 ///    This is helpful for accessibility and for styling. For example, maybe you want to set the link a
 ///    different color if it’s a link to the page you’re currently on.
+#[cfg_attr(
+    any(debug_assertions, feature = "ssr"),
+    tracing::instrument(level = "info", skip_all,)
+)]
 #[component]
 pub fn A<H>(
     cx: Scope,
@@ -71,6 +75,10 @@ pub fn A<H>(
 where
     H: ToHref + 'static,
 {
+    #[cfg_attr(
+        any(debug_assertions, feature = "ssr"),
+        tracing::instrument(level = "trace", skip_all,)
+    )]
     fn inner(
         cx: Scope,
         href: Memo<Option<String>>,

router/src/components/outlet.rs

@@ -8,6 +8,10 @@ use web_sys::AnimationEvent;
 
 /// Displays the child route nested in a parent route, allowing you to control exactly where
 /// that child route is displayed. Renders nothing if there is no nested child.
+#[cfg_attr(
+    any(debug_assertions, feature = "ssr"),
+    tracing::instrument(level = "info", skip_all,)
+)]
 #[component]
 pub fn Outlet(cx: Scope) -> impl IntoView {
     let id = HydrationCtx::id();
@@ -166,14 +170,25 @@ pub fn AnimatedOutlet(
             animation_class.to_string()
         }
     };
+    let node_ref = create_node_ref::<html::Div>(cx);
     let animationend = move |ev: AnimationEvent| {
-        ev.stop_propagation();
-        let current = current_animation.get();
-        set_animation_state.update(|current_state| {
-            let (next, _) =
-                animation.next_state(&current, is_back.get_untracked());
-            *current_state = next;
-        });
+        use wasm_bindgen::JsCast;
+        if let Some(target) = ev.target() {
+            let node_ref = node_ref.get();
+            if node_ref.is_none()
+                || target
+                    .unchecked_ref::<web_sys::Node>()
+                    .is_same_node(Some(&*node_ref.unwrap()))
+            {
+                ev.stop_propagation();
+                let current = current_animation.get();
+                set_animation_state.update(|current_state| {
+                    let (next, _) =
+                        animation.next_state(&current, is_back.get_untracked());
+                    *current_state = next;
+                });
+            }
+        }
     };
 
     view! { cx,

router/src/components/redirect.rs

@@ -14,6 +14,10 @@ use std::rc::Rc;
 /// integrations (`leptos_actix`, `leptos_axum`, and `leptos_viz`). If you’re not using one of those
 /// integrations, you should manually provide a way of redirecting on the server
 /// using [provide_server_redirect].
+#[cfg_attr(
+    any(debug_assertions, feature = "ssr"),
+    tracing::instrument(level = "trace", skip_all,)
+)]
 #[component]
 pub fn Redirect<P>(
     cx: Scope,
@@ -74,6 +78,10 @@ impl std::fmt::Debug for ServerRedirectFunction {
 /// Provides a function that can be used to redirect the user to another
 /// absolute path, on the server. This should set a `302` status code and an
 /// appropriate `Location` header.
+#[cfg_attr(
+    any(debug_assertions, feature = "ssr"),
+    tracing::instrument(level = "trace", skip_all,)
+)]
 pub fn provide_server_redirect(cx: Scope, handler: impl Fn(&str) + 'static) {
     provide_context(
         cx,

router/src/components/route.rs

@@ -33,6 +33,10 @@ pub enum Method {
 
 /// Describes a portion of the nested layout of the app, specifying the route it should match,
 /// the element it should display, and data that should be loaded alongside the route.
+#[cfg_attr(
+    any(debug_assertions, feature = "ssr"),
+    tracing::instrument(level = "info", skip_all,)
+)]
 #[component(transparent)]
 pub fn Route<E, F, P>(
     cx: Scope,
@@ -72,6 +76,10 @@ where
 /// Describes a route that is guarded by a certain condition. This works the same way as
 /// [`<Route/>`](Route), except that if the `condition` function evaluates to `false`, it
 /// redirects to `redirect_path` instead of displaying its `view`.
+#[cfg_attr(
+    any(debug_assertions, feature = "ssr"),
+    tracing::instrument(level = "info", skip_all,)
+)]
 #[component(transparent)]
 pub fn ProtectedRoute<P, E, F, C>(
     cx: Scope,
@@ -120,7 +128,10 @@ where
         methods,
     )
 }
-
+#[cfg_attr(
+    any(debug_assertions, feature = "ssr"),
+    tracing::instrument(level = "info", skip_all,)
+)]
 pub(crate) fn define_route(
     cx: Scope,
     children: Option<Children>,
@@ -173,6 +184,10 @@ pub struct RouteContext {
 }
 
 impl RouteContext {
+    #[cfg_attr(
+        any(debug_assertions, feature = "ssr"),
+        tracing::instrument(level = "info", skip_all,)
+    )]
     pub(crate) fn new(
         cx: Scope,
         router: &RouterContext,

router/src/components/router.rs

@@ -55,6 +55,7 @@ pub(crate) struct RouterContextInner {
     state: ReadSignal<State>,
     set_state: WriteSignal<State>,
     pub(crate) is_back: RwSignal<bool>,
+    pub(crate) path_stack: StoredValue<Vec<String>>,
 }
 
 impl std::fmt::Debug for RouterContextInner {
@@ -68,11 +69,16 @@ impl std::fmt::Debug for RouterContextInner {
             .field("referrers", &self.referrers)
             .field("state", &self.state)
             .field("set_state", &self.set_state)
+            .field("path_stack", &self.path_stack)
             .finish()
     }
 }
 
 impl RouterContext {
+    #[cfg_attr(
+        any(debug_assertions, feature = "ssr"),
+        tracing::instrument(level = "trace", skip_all,)
+    )]
     pub(crate) fn new(
         cx: Scope,
         base: Option<&'static str>,
@@ -111,7 +117,6 @@ impl RouterContext {
                     replace: true,
                     scroll: false,
                     state: State(None),
-                    back: false,
                 });
             }
         }
@@ -142,6 +147,7 @@ impl RouterContext {
         // 2) update the reference (URL)
         // 3) update the state
         // this will trigger the new route match below
+
         create_render_effect(cx, move |_| {
             let LocationChange { value, state, .. } = source.get();
             cx.untrack(move || {
@@ -154,6 +160,10 @@ impl RouterContext {
 
         let inner = Rc::new(RouterContextInner {
             base_path: base_path.into_owned(),
+            path_stack: store_value(
+                cx,
+                vec![location.pathname.get_untracked()],
+            ),
             location,
             base,
             history: Box::new(history),
@@ -169,7 +179,7 @@ impl RouterContext {
 
         // handle all click events on anchor tags
         #[cfg(not(feature = "ssr"))]
-        leptos::window_event_listener("click", {
+        leptos::window_event_listener_untyped("click", {
             let inner = Rc::clone(&inner);
             move |ev| inner.clone().handle_anchor_click(ev)
         });
@@ -199,11 +209,14 @@ impl RouterContext {
 }
 
 impl RouterContextInner {
+    #[cfg_attr(
+        any(debug_assertions, feature = "ssr"),
+        tracing::instrument(level = "trace", skip_all,)
+    )]
     pub(crate) fn navigate_from_route(
         self: Rc<Self>,
         to: &str,
         options: &NavigateOptions,
-        back: bool,
     ) -> Result<(), NavigationError> {
         let cx = self.cx;
         let this = Rc::clone(&self);
@@ -231,7 +244,6 @@ impl RouterContextInner {
                                 replace: options.replace,
                                 scroll: options.scroll,
                                 state: self.state.get(),
-                                back,
                             });
                         }
                         let len = self.referrers.borrow().len();
@@ -249,13 +261,17 @@ impl RouterContextInner {
                             let next_state = state.clone();
                             move |state| *state = next_state
                         });
+
+                        self.path_stack.update_value(|stack| {
+                            stack.push(resolved_to.clone())
+                        });
+
                         if referrers.borrow().len() == len {
                             this.navigate_end(LocationChange {
                                 value: resolved_to,
                                 replace: false,
                                 scroll: true,
                                 state,
-                                back,
                             })
                         }
                     }
@@ -280,6 +296,8 @@ impl RouterContextInner {
 
     #[cfg(not(feature = "ssr"))]
     pub(crate) fn handle_anchor_click(self: Rc<Self>, ev: web_sys::Event) {
+        use wasm_bindgen::JsValue;
+
         let ev = ev.unchecked_into::<web_sys::MouseEvent>();
         if ev.default_prevented()
             || ev.button() != 0
@@ -343,7 +361,7 @@ impl RouterContextInner {
                 leptos_dom::helpers::get_property(a.unchecked_ref(), "state")
                     .ok()
                     .and_then(|value| {
-                        if value == wasm_bindgen::JsValue::UNDEFINED {
+                        if value == JsValue::UNDEFINED {
                             None
                         } else {
                             Some(value)
@@ -365,7 +383,6 @@ impl RouterContextInner {
                     scroll: !a.has_attribute("noscroll"),
                     state: State(state),
                 },
-                false,
             ) {
                 leptos::error!("{e:#?}");
             }

router/src/components/routes.rs

@@ -19,6 +19,10 @@ use std::{
 /// You should locate the `<Routes/>` component wherever on the page you want the routes to appear.
 ///
 /// **Note:** Your application should only include one `<Routes/>` or `<AnimatedRoutes/>` component.
+#[cfg_attr(
+    any(debug_assertions, feature = "ssr"),
+    tracing::instrument(level = "info", skip_all,)
+)]
 #[component]
 pub fn Routes(
     cx: Scope,
@@ -121,7 +125,10 @@ pub fn AnimatedRoutes(
         create_signal(cx, AnimationState::Finally);
     let next_route = router.pathname();
 
+    let is_complete = Rc::new(Cell::new(true));
     let animation_and_route = create_memo(cx, {
+        let is_complete = Rc::clone(&is_complete);
+
         move |prev: Option<&(AnimationState, String)>| {
             let animation_state = animation_state.get();
             let next_route = next_route.get();
@@ -140,7 +147,7 @@ pub fn AnimatedRoutes(
                         let (next_state, can_advance) = animation
                             .next_state(prev_state, is_back.get_untracked());
 
-                        if can_advance {
+                        if can_advance || !is_complete.get() {
                             (next_state, next_route)
                         } else {
                             (next_state, prev_route.to_owned())
@@ -158,8 +165,10 @@ pub fn AnimatedRoutes(
     let route_states = route_states(cx, &router, current_route, &root_equal);
 
     let root = root_route(cx, base_route, route_states, root_equal);
+    let node_ref = create_node_ref::<html::Div>(cx);
 
     html::div(cx)
+        .node_ref(node_ref)
         .attr(
             "class",
             (cx, move || {
@@ -171,6 +180,7 @@ pub fn AnimatedRoutes(
                     AnimationState::OutroBack => outro_back.unwrap_or_default(),
                     AnimationState::IntroBack => intro_back.unwrap_or_default(),
                 };
+                is_complete.set(animation_class == finally.unwrap_or_default());
                 if let Some(class) = &class {
                     format!("{} {animation_class}", class.get())
                 } else {
@@ -178,13 +188,21 @@ pub fn AnimatedRoutes(
                 }
             }),
         )
-        .on(leptos::ev::animationend, move |_| {
-            let current = current_animation.get();
-            set_animation_state.update(|current_state| {
-                let (next, _) =
-                    animation.next_state(&current, is_back.get_untracked());
-                *current_state = next;
-            })
+        .on(leptos::ev::animationend, move |ev| {
+            use wasm_bindgen::JsCast;
+            if let Some(target) = ev.target() {
+                if target
+                    .unchecked_ref::<web_sys::Node>()
+                    .is_same_node(Some(&*node_ref.get().unwrap()))
+                {
+                    let current = current_animation.get();
+                    set_animation_state.update(|current_state| {
+                        let (next, _) = animation
+                            .next_state(&current, is_back.get_untracked());
+                        *current_state = next;
+                    })
+                }
+            }
         })
         .child(move || root.get())
         .into_view(cx)
@@ -477,7 +495,10 @@ pub(crate) fn create_branch(routes: &[RouteData], index: usize) -> Branch {
         score: routes.last().unwrap().score() * 10000 - (index as i32),
     }
 }
-
+#[cfg_attr(
+    any(debug_assertions, feature = "ssr"),
+    tracing::instrument(level = "info", skip_all,)
+)]
 fn create_routes(route_def: &RouteDefinition, base: &str) -> Vec<RouteData> {
     let RouteDefinition { children, .. } = route_def;
     let is_leaf = children.is_empty();

router/src/history/location.rs

@@ -62,8 +62,6 @@ pub struct LocationChange {
     pub scroll: bool,
     /// The [`state`](https://developer.mozilla.org/en-US/docs/Web/API/History/state) that will be added during navigation.
     pub state: State,
-    /// Whether the navigation is a “back” navigation.
-    pub back: bool,
 }
 
 impl Default for LocationChange {
@@ -73,7 +71,6 @@ impl Default for LocationChange {
             replace: true,
             scroll: true,
             state: Default::default(),
-            back: false,
         }
     }
 }

router/src/history/mod.rs

@@ -35,7 +35,7 @@ pub trait History {
 pub struct BrowserIntegration {}
 
 impl BrowserIntegration {
-    fn current(back: bool) -> LocationChange {
+    fn current() -> LocationChange {
         let loc = leptos_dom::helpers::location();
         LocationChange {
             value: loc.pathname().unwrap_or_default()
@@ -43,8 +43,7 @@ impl BrowserIntegration {
                 + &loc.hash().unwrap_or_default(),
             replace: true,
             scroll: true,
-            state: State(None), // TODO
-            back,
+            state: State(None),
         }
     }
 }
@@ -53,14 +52,28 @@ impl History for BrowserIntegration {
     fn location(&self, cx: Scope) -> ReadSignal<LocationChange> {
         use crate::{NavigateOptions, RouterContext};
 
-        let (location, set_location) = create_signal(cx, Self::current(false));
+        let (location, set_location) = create_signal(cx, Self::current());
 
-        leptos::window_event_listener("popstate", move |_| {
+        leptos::window_event_listener_untyped("popstate", move |_| {
             let router = use_context::<RouterContext>(cx);
             if let Some(router) = router {
+                let path_stack = router.inner.path_stack;
+
                 let is_back = router.inner.is_back;
-                let change = Self::current(true);
-                is_back.set(true);
+                let change = Self::current();
+
+                let is_navigating_back = path_stack.with_value(|stack| {
+                    stack.len() == 1
+                        || stack.get(stack.len() - 2) == Some(&change.value)
+                });
+                if is_navigating_back {
+                    path_stack.update_value(|stack| {
+                        stack.pop();
+                    });
+                }
+
+                is_back.set(is_navigating_back);
+
                 request_animation_frame(move || {
                     is_back.set(false);
                 });
@@ -72,11 +85,10 @@ impl History for BrowserIntegration {
                         scroll: change.scroll,
                         state: change.state,
                     },
-                    true,
                 ) {
                     leptos::error!("{e:#?}");
                 }
-                set_location.set(Self::current(true));
+                set_location.set(Self::current());
             } else {
                 leptos::warn!("RouterContext not found");
             }
@@ -97,12 +109,10 @@ impl History for BrowserIntegration {
                 )
                 .unwrap_throw();
         } else {
+            // push the "forward direction" marker
+            let state = &loc.state.to_js_value();
             history
-                .push_state_with_url(
-                    &loc.state.to_js_value(),
-                    "",
-                    Some(&loc.value),
-                )
+                .push_state_with_url(state, "", Some(&loc.value))
                 .unwrap_throw();
         }
         // scroll to el
@@ -172,7 +182,6 @@ impl History for ServerIntegration {
                 replace: false,
                 scroll: true,
                 state: State(None),
-                back: false,
             },
         )
         .0

router/src/hooks.rs

@@ -81,7 +81,7 @@ pub fn use_navigate(
 ) -> impl Fn(&str, NavigateOptions) -> Result<(), NavigationError> {
     let router = use_router(cx);
     move |to, options| {
-        Rc::clone(&router.inner).navigate_from_route(to, &options, false)
+        Rc::clone(&router.inner).navigate_from_route(to, &options)
     }
 }
 

router/src/lib.rs

@@ -203,3 +203,4 @@ pub use history::*;
 pub use hooks::*;
 pub use matching::{RouteDefinition, *};
 pub use render_mode::*;
+extern crate tracing;