Fix MetaContext debug for wasm target

Add programmatic navigation in router example

.github/workflows/test.yml

@@ -39,16 +39,7 @@ jobs:
       - name: Run Rustfmt
         run: cargo fmt -- --check
 
-      - name: Cargo cache
-        uses: actions/cache@v3
-        with:
-          path: |
-            ~/.cargo/bin/
-            ~/.cargo/registry/index/
-            ~/.cargo/registry/cache/
-            ~/.cargo/git/db/
-            target/
-          key: ${{ runner.os }}-cargo-${{ matrix.rust }}-${{ hashFiles('**/Cargo.lock') }}
+      - uses: Swatinem/rust-cache@v2
 
       - name: Run tests with all features
         run: cargo make ci

CODE_OF_CONDUCT.md

@@ -0,0 +1,51 @@
+# Contributor Covenant Code of Conduct
+
+_This Code of Conduct is based on the [Rust Code of Conduct](https://www.rust-lang.org/policies/code-of-conduct)
+and the [Bevy Code of Conduct](https://raw.githubusercontent.com/bevyengine/bevy/main/CODE_OF_CONDUCT.md),
+which are adapted from the [Node.js Policy on Trolling](http://blog.izs.me/post/30036893703/policy-on-trolling) 
+and the [Contributor Covenant](https://www.contributor-covenant.org)._
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, religion, or sexual identity
+and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+We are a community of people learning and exploring how to build better web applications
+with Rust. When interacting with one another, please remember that there are no experts and there are
+no stupid questions. Assume the best in other people's communication, and take a step back if
+you find yourself getting defensive.
+
+Please note the following guidelines as well:
+
+* Please avoid using overtly sexual aliases or other nicknames that might detract from a friendly, safe and welcoming environment for all.
+* Please be kind and courteous. There’s no need to be mean or rude.
+* Respect that people have differences of opinion and that every design or implementation choice carries a trade-off and numerous costs. There is seldom a right answer.
+* Please keep unstructured critique to a minimum. If you have solid ideas you want to experiment with, make a fork and see how it works.
+* We will exclude you from interaction if you insult, demean or harass anyone. That is not welcome behavior. We interpret the term “harassment” as including the definition in the [Citizen Code of Conduct](https://github.com/stumpsyn/policies/blob/master/citizen_code_of_conduct.md); if you have any lack of clarity about what might be included in that concept, please read their definition. In particular, we don’t tolerate behavior that excludes people in socially marginalized groups.
+* Private harassment is also unacceptable. No matter who you are, if you feel you have been or are being harassed or made uncomfortable by a community member, please contact the maintainers immediately. Whether you’re a regular contributor or a newcomer, we care about making this community a safe place for you and we’ve got your back.
+* Do not make casual mention of slavery or indentured servitude and/or false comparisons of one's occupation or situation to slavery. Please consider using or asking about alternate terminology when referring to such metaphors in technology.
+* Likewise any spamming, trolling, flaming, baiting or other attention-stealing behavior is not welcome.
+
+## Moderation
+
+These are the policies for upholding [our community’s standards of conduct](#our-standards). If you feel that a thread needs moderation, please contact the maintainers.
+
+1. Remarks that violate the community standards of conduct, including hateful, hurtful, oppressive, or exclusionary remarks, are not allowed. (Cursing is allowed, but never targeting another user, and never in a hateful manner).
+2. Remarks that maintainers find inappropriate, whether listed in the code of conduct or not, are also not allowed.
+3. Maintainers will first respond to such remarks with a warning.
+4. If the warning is unheeded, the user will be “kicked,” i.e., kicked out of the communication channel to cool off.
+5. If the user comes back and continues to make trouble, they will be banned, i.e., indefinitely excluded.
+6. Maintainers may choose at their discretion to un-ban the user if it was a first offense and they offer the offended party a genuine apology.
+7. If a maintainer bans someone and you think it was unjustified, please take it up with that maintainer, or with a different maintainer, in private. Complaints about bans in-channel are not allowed.
+8. Maintainers are held to a higher standard than other community members. If a maintainer creates an inappropriate situation, they should expect less leeway than others.
+
+The enforcement policies in the code of conduct apply to all official venues, including Discord channels, GitHub repositories, and all other forums.

README.md

@@ -1,5 +1,3 @@
-**NOTE: We're in the middle of merging changes and making fixes to support our upcoming `0.1.0` release. Some of the examples may be in a broken state. You can continue using the `0.0` releases with no issues.**
-
 <picture>
     <source srcset="https://raw.githubusercontent.com/leptos-rs/leptos/main/docs/logos/Leptos_logo_pref_dark_RGB.svg" media="(prefers-color-scheme: dark)">
     <img src="https://raw.githubusercontent.com/leptos-rs/leptos/main/docs/logos/Leptos_logo_RGB.svg" alt="Leptos Logo">
@@ -31,7 +29,7 @@ pub fn SimpleCounter(cx: Scope, initial_value: i32) -> impl IntoView {
         <div>
             <button on:click=clear>"Clear"</button>
             <button on:click=decrement>"-1"</button>
-            <span>"Value: " {move || value().to_string()} "!"</span>
+            <span>"Value: " {value} "!"</span>
             <button on:click=increment>"+1"</button>
         </div>
     }
@@ -61,9 +59,9 @@ Leptos is a full-stack, isomorphic Rust web framework leveraging fine-grained re
 
 Here are some resources for learning more about Leptos:
 
-- [Examples](https://github.com/gbj/leptos/tree/main/examples)
+- [Examples](https://github.com/leptos-rs/leptos/tree/main/examples)
 - [API Documentation](https://docs.rs/leptos/latest/leptos/)
-- [Common Bugs](https://github.com/gbj/leptos/tree/main/docs/COMMON_BUGS.md) (and how to fix them!)
+- [Common Bugs](https://github.com/leptos-rs/leptos/tree/main/docs/COMMON_BUGS.md) (and how to fix them!)
 - Leptos Guide (in progress)
 
 ## `nightly` Note
@@ -82,13 +80,13 @@ If you’re on `stable`, note the following:
 
 1. You need to enable the `"stable"` flag in `Cargo.toml`: `leptos = { version = "0.1.0-alpha", features = ["stable"] }`
 2. `nightly` enables the function call syntax for accessing and setting signals. If you’re using `stable`,
-   you’ll just call `.get()`, `.set()`, or `.update()` manually. Check out the
-   [`counters-stable` example](https://github.com/gbj/leptos/blob/main/examples/counters-stable/src/main.rs)
+   you’ll just call `.get()`, `.set()`, or `.update()` manually. Check out the 
+   [`counters_stable` example](https://github.com/leptos-rs/leptos/blob/main/examples/counters_stable/src/main.rs)
    for examples of the correct API.
 
 ## `cargo-leptos`
 
-[`cargo-leptos`](https://github.com/akesson/cargo-leptos) is a build tool that's designed to make it easy to build apps that run on both the client and the server, with seamless integration. The best way to get started with a real Leptos project right now is to use `cargo-leptos` and our [starter template](https://github.com/leptos-rs/start).
+[`cargo-leptos`](https://github.com/leptos-rs/cargo-leptos) is a build tool that's designed to make it easy to build apps that run on both the client and the server, with seamless integration. The best way to get started with a real Leptos project right now is to use `cargo-leptos` and our [starter template](https://github.com/leptos-rs/start).
 
 ```bash
 cargo install cargo-leptos
@@ -108,7 +106,7 @@ Sure! Obviously the `view` macro is for generating DOM nodes but you can use the
 - Use event listeners to update signals
 - Create effects to update the UI
 
-I've put together a [very simple GTK example](https://github.com/gbj/leptos/blob/main/examples/gtk/src/main.rs) so you can see what I mean.
+I've put together a [very simple GTK example](https://github.com/leptos-rs/leptos/blob/main/examples/gtk/src/main.rs) so you can see what I mean.
 
 ### How is this different from Yew/Dioxus?
 
@@ -126,7 +124,6 @@ There are some practical differences that make a significant difference:
 
 - **Maturity:** Sycamore is obviously a much more mature and stable library with a larger ecosystem.
 - **Templating:** Leptos uses a JSX-like template format (built on [syn-rsx](https://github.com/stoically/syn-rsx)) for its `view` macro. Sycamore offers the choice of its own templating DSL or a builder syntax.
-- **Template node cloning:** Leptos's `view` macro compiles to a static HTML string and a set of instructions of how to assign its reactive values. This means that at runtime, Leptos can clone a `<template>` node rather than calling `document.createElement()` to create DOM nodes. This is a _significantly_ faster way of rendering components.
 - **Read-write segregation:** Leptos, like Solid, encourages read-write segregation between signal getters and setters, so you end up accessing signals with tuples like `let (count, set_count) = create_signal(cx, 0);` _(If you prefer or if it's more convenient for your API, you can use `create_rw_signal` to give a unified read/write signal.)_
 - **Signals are functions:** In Leptos, you can call a signal to access it rather than calling a specific method (so, `count()` instead of `count.get()`) This creates a more consistent mental model: accessing a reactive value is always a matter of calling a function. For example:
 

docs/book/src/01_introduction.md

@@ -1,6 +1,6 @@
 # Introduction
 
-This book is intended as an introduction to the [Leptos](https://github.com/gbj/leptos) Web framework. Together, we’ll build a simple todo app—first as a client-side app, then as a full-stack app.
+This book is intended as an introduction to the [Leptos](https://github.com/leptos-rs/leptos) Web framework. Together, we’ll build a simple todo app—first as a client-side app, then as a full-stack app.
 
 The guide doesn’t assume you know anything about fine-grained reactivity or the details of modern Web frameworks. It does assume you are familiar with the Rust programming language, HTML, CSS, and the DOM and other Web APIs.
 

docs/book/src/02_getting_started.md

@@ -1,8 +1,8 @@
 # Getting Started
 
-> The code for this chapter can be found [here](https://github.com/gbj/leptos/tree/main/docs/book/project/ch02_getting_started).
+> The code for this chapter can be found [here](https://github.com/leptos-rs/leptos/tree/main/docs/book/project/ch02_getting_started).
 
-The easiest way to get started using Leptos is to use [Trunk](https://trunkrs.dev/), as many of our [examples](https://github.com/gbj/leptos/tree/main/examples) do. (Trunk is a simple build tool that includes a dev server.)
+The easiest way to get started using Leptos is to use [Trunk](https://trunkrs.dev/), as many of our [examples](https://github.com/leptos-rs/leptos/tree/main/examples) do. (Trunk is a simple build tool that includes a dev server.)
 
 If you don’t already have it installed, you can install Trunk by running
 

docs/book/src/03_building_ui.md

@@ -1,6 +1,6 @@
 # Templating: Building User Interfaces
 
-> The code for this chapter can be found [here](https://github.com/gbj/leptos/tree/main/docs/book/project/ch03_building_ui).
+> The code for this chapter can be found [here](https://github.com/leptos-rs/leptos/tree/main/docs/book/project/ch03_building_ui).
 
 ## RSX and the `view!` macro
 

examples/counter/src/lib.rs

@@ -17,7 +17,7 @@ pub fn SimpleCounter(
         <div>
             <button on:click=move |_| set_value(0)>"Clear"</button>
             <button on:click=move |_| set_value.update(|value| *value -= step)>"-1"</button>
-            <span>"Value: " {move || value().to_string()} "!"</span>
+            <span>"Value: " {value} "!"</span>
             <button on:click=move |_| set_value.update(|value| *value += step)>"+1"</button>
         </div>
     }

examples/counter_isomorphic/README.md

@@ -25,7 +25,7 @@ cargo leptos build --release
 ## Server Side Rendering without cargo-leptos
 To run it as a server side app with hydration, you'll need to have wasm-pack installed.
 
-0. Edit the `[package.metadata.leptos]` section and set `site-root` to `"pkg"`. You'll also want to change the path of the `<StyleSheet / >` component in the root component to point towards the CSS file in the root. This tells leptos that the WASM/JS files generated by wasm-pack are available at `./pkg` and that the CSS files are no longer processed by cargo-leptos. Building to alternative folders is not supported at this time.
+0. Edit the `[package.metadata.leptos]` section and set `site-root` to `"."`. You'll also want to change the path of the `<StyleSheet / >` component in the root component to point towards the CSS file in the root. This tells leptos that the WASM/JS files generated by wasm-pack are available at `./pkg` and that the CSS files are no longer processed by cargo-leptos. Building to alternative folders is not supported at this time. You'll also want to edit the call to `get_configuration()` to pass in `Some(Cargo.toml)`, so that Leptos will read the settings instead of cargo-leptos. If you do so, your file/folder names cannot include dashes.
 1. Install wasm-pack
 ```bash
 cargo install wasm-pack

examples/counter_isomorphic/src/counters.rs

@@ -116,7 +116,7 @@ pub fn Counter(cx: Scope) -> impl IntoView {
             <div>
                 <button on:click=move |_| clear.dispatch(())>"Clear"</button>
                 <button on:click=move |_| dec.dispatch(())>"-1"</button>
-                <span>"Value: " {move || value().to_string()} "!"</span>
+                <span>"Value: " {value} "!"</span>
                 <button on:click=move |_| inc.dispatch(())>"+1"</button>
             </div>
             {move || error_msg().map(|msg| view! { cx, <p>"Error: " {msg.to_string()}</p>})}

examples/counter_isomorphic/src/main.rs

@@ -33,7 +33,9 @@ cfg_if! {
 
             crate::counters::register_server_functions();
 
-            let conf = get_configuration(Some("Cargo.toml")).await.unwrap();
+            // Setting this to None means we'll be using cargo-leptos and its env vars.
+            let conf = get_configuration(None).await.unwrap();
+
             let addr = conf.leptos_options.site_address.clone();
             let routes = generate_route_list(|cx| view! { cx, <Counters/> });
 

examples/counters/src/lib.rs

@@ -97,10 +97,10 @@ fn Counter(
         <li>
             <button on:click=move |_| set_value.update(move |value| *value -= 1)>"-1"</button>
             <input type="text"
-                prop:value={move || value().to_string()}
+                prop:value={value}
                 on:input=input
             />
-            <span>{move || value().to_string()}</span>
+            <span>{value}</span>
             <button on:click=move |_| set_value.update(move |value| *value += 1)>"+1"</button>
             <button on:click=move |_| set_counters.update(move |counters| counters.retain(|(counter_id, _)| counter_id != &id))>"x"</button>
         </li>

examples/hackernews/README.md

@@ -25,7 +25,7 @@ cargo leptos build --release
 ## Server Side Rendering without cargo-leptos
 To run it as a server side app with hydration, you'll need to have wasm-pack installed.
 
-0. Edit the `[package.metadata.leptos]` section and set `site-root` to `"pkg"`. You'll also want to change the path of the `<StyleSheet / >` component in the root component to point towards the CSS file in the root. This tells leptos that the WASM/JS files generated by wasm-pack are available at `./pkg` and that the CSS files are no longer processed by cargo-leptos. Building to alternative folders is not supported at this time.
+0. Edit the `[package.metadata.leptos]` section and set `site-root` to `"."`. You'll also want to change the path of the `<StyleSheet / >` component in the root component to point towards the CSS file in the root. This tells leptos that the WASM/JS files generated by wasm-pack are available at `./pkg` and that the CSS files are no longer processed by cargo-leptos. Building to alternative folders is not supported at this time. You'll also want to edit the call to `get_configuration()` to pass in `Some(Cargo.toml)`, so that Leptos will read the settings instead of cargo-leptos. If you do so, your file/folder names cannot include dashes..
 1. Install wasm-pack
 ```bash
 cargo install wasm-pack

examples/hackernews/src/main.rs

@@ -21,7 +21,9 @@ cfg_if! {
 
         #[actix_web::main]
         async fn main() -> std::io::Result<()> {
-            let conf = get_configuration(Some("Cargo.toml")).await.unwrap();
+            // Setting this to None means we'll be using cargo-leptos and its env vars.
+            let conf = get_configuration(None).await.unwrap();
+
             let addr = conf.leptos_options.site_address.clone();
             // Generate the list of routes in your Leptos App
             let routes = generate_route_list(|cx| view! { cx, <App/> });

examples/hackernews_axum/README.md

@@ -25,7 +25,7 @@ cargo leptos build --release
 ## Server Side Rendering without cargo-leptos
 To run it as a server side app with hydration, you'll need to have wasm-pack installed.
 
-0. Edit the `[package.metadata.leptos]` section and set `site-root` to `"pkg"`. You'll also want to change the path of the `<StyleSheet / >` component in the root component to point towards the CSS file in the root. This tells leptos that the WASM/JS files generated by wasm-pack are available at `./pkg` and that the CSS files are no longer processed by cargo-leptos. Building to alternative folders is not supported at this time.
+0. Edit the `[package.metadata.leptos]` section and set `site-root` to `"."`. You'll also want to change the path of the `<StyleSheet / >` component in the root component to point towards the CSS file in the root. This tells leptos that the WASM/JS files generated by wasm-pack are available at `./pkg` and that the CSS files are no longer processed by cargo-leptos. Building to alternative folders is not supported at this time. You'll also want to edit the call to `get_configuration()` to pass in `Some(Cargo.toml)`, so that Leptos will read the settings instead of cargo-leptos. If you do so, your file/folder names cannot include dashes..
 1. Install wasm-pack
 ```bash
 cargo install wasm-pack

examples/router/src/lib.rs

@@ -12,6 +12,11 @@ pub fn RouterExample(cx: Scope) -> impl IntoView {
     view! { cx,
         <Router>
             <nav>
+                // ordinary <a> elements can be used for client-side navigation
+                // using <A> has two effects:
+                // 1) ensuring that relative routing works properly for nested routes
+                // 2) setting the `aria-current` attribute on the current link,
+                //    for a11y and styling purposes
                 <A exact=true href="/">"Contacts"</A>
                 <A href="about">"About"</A>
                 <A href="settings">"Settings"</A>
@@ -105,12 +110,15 @@ pub fn Contact(cx: Scope) -> impl IntoView {
         // Some(None) => has loaded and found no contact
         Some(None) => Some(view! { cx, <p>"No contact with this ID was found."</p> }.into_any()),
         // Some(Some) => has loaded and found a contact
-        Some(Some(contact)) => Some(view! { cx,
-            <section class="card">
-                <h1>{contact.first_name} " " {contact.last_name}</h1>
-                <p>{contact.address_1}<br/>{contact.address_2}</p>
-            </section>
-        }.into_any()),
+        Some(Some(contact)) => Some(
+            view! { cx,
+                <section class="card">
+                    <h1>{contact.first_name} " " {contact.last_name}</h1>
+                    <p>{contact.address_1}<br/>{contact.address_2}</p>
+                </section>
+            }
+            .into_any(),
+        ),
     };
 
     view! { cx,
@@ -125,9 +133,18 @@ pub fn Contact(cx: Scope) -> impl IntoView {
 #[component]
 pub fn About(cx: Scope) -> impl IntoView {
     log::debug!("rendering <About/>");
+    // use_navigate allows you to navigate programmatically by calling a function
+    let navigate = use_navigate(cx);
 
     view! { cx,
         <>
+            // note: this is just an illustration of how to use `use_navigate`
+            // <button on:click> to navigate is an *anti-pattern*
+            // you should ordinarily use a link instead,
+            // both semantically and so your link will work before WASM loads
+            <button on:click=move |_| { _ = navigate("/", Default::default()); }>
+                "Home"
+            </button>
             <h1>"About"</h1>
             <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
         </>

examples/tailwind/README.md

@@ -1,6 +1,6 @@
 # Leptos Starter Template
 
-This is a template demonstrating how to integrate [TailwindCSS](https://tailwindcss.com/) with the [Leptos](https://github.com/gbj/leptos) web framework and the [cargo-leptos](https://github.com/akesson/cargo-leptos) tool.
+This is a template demonstrating how to integrate [TailwindCSS](https://tailwindcss.com/) with the [Leptos](https://github.com/leptos-rs/leptos) web framework and the [cargo-leptos](https://github.com/akesson/cargo-leptos) tool.
 
 If you don't have `cargo-leptos` installed you can install it with
 
@@ -52,13 +52,11 @@ If you're using VS Code, add the following to your `settings.json`
   "css.validate": false,
 ```
 
-
 Install [Tailwind CSS Intellisense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss).
 
     Install "VS Browser" extension, a browser at the right window.
     Allow vscode Ports forward: 3000, 3001.
 
-
 ## Notes about Tooling
 
 By default, `cargo-leptos` uses `nightly` Rust, `cargo-generate`, and `sass`. If you run into any trouble, you may need to install one or more of these tools.
@@ -72,8 +70,8 @@ By default, `cargo-leptos` uses `nightly` Rust, `cargo-generate`, and `sass`. If
 ## Alternatives to cargo-leptos
 
 This crate can be run without `cargo-leptos`, using `wasm-pack` and `cargo`. To do so, you'll need to install some other tools.
-
-1. `cargo install wasm-pack`
+0. `cargo install wasm-pack`
+1. Edit the `[package.metadata.leptos]` section and set `site-root` to `"."`. You'll also want to change the path of the `<StyleSheet / >` component in the root component to point towards the CSS file in the root. This tells leptos that the WASM/JS files generated by wasm-pack are available at `./pkg` and that the CSS files are no longer processed by cargo-leptos. Building to alternative folders is not supported at this time. You'll also want to edit the call to `get_configuration()` to pass in `Some(Cargo.toml)`, so that Leptos will read the settings instead of cargo-leptos. If you do so, your file/folder names cannot include dashes.
 
 ### Server Side Rendering With Hydration
 
@@ -91,15 +89,16 @@ Then run the server with `cargo run` to serve the server side rendered HTML and
 cargo run --no-default-features --features=ssr
 ```
 
-> Note that if your hydration code changes, you will have to rerun the wasm-pack command above before running 
+> Note that if your hydration code changes, you will have to rerun the wasm-pack command above before running
 > `cargo run`
 
 ### Client Side Rendering
 
 You'll need to install trunk to client side render this bundle.
+
 1. `cargo install trunk`
-Then the site can be served with `trunk serve --open`
+   Then the site can be served with `trunk serve --open`
 
 ## Attribution
 
-Many thanks to GreatGreg for putting together this guide. You can find the original, with added details, [here](https://github.com/gbj/leptos/discussions/125).
+Many thanks to GreatGreg for putting together this guide. You can find the original, with added details, [here](https://github.com/leptos-rs/leptos/discussions/125).

examples/tailwind/src/main.rs

@@ -17,7 +17,9 @@ cfg_if! {
         #[actix_web::main]
         async fn main() -> std::io::Result<()> {
 
-            let conf = get_configuration(Some("Cargo.toml")).await.unwrap();
+            // Setting this to None means we'll be using cargo-leptos and its env vars.
+            let conf = get_configuration(None).await.unwrap();
+
             let addr = conf.leptos_options.site_address.clone();
 
             // Generate the list of routes in your Leptos App

examples/todo_app_sqlite/README.md

@@ -25,7 +25,7 @@ cargo leptos build --release
 ## Server Side Rendering without cargo-leptos
 To run it as a server side app with hydration, you'll need to have wasm-pack installed.
 
-0. Edit the `[package.metadata.leptos]` section and set `site-root` to `"pkg"`. You'll also want to change the path of the `<StyleSheet / >` component in the root component to point towards the CSS file in the root. This tells leptos that the WASM/JS files generated by wasm-pack are available at `./pkg` and that the CSS file is no longer processed by cargo-leptos. Building to alternative folders is not supported at this time
+0. Edit the `[package.metadata.leptos]` section and set `site-root` to `"."`. You'll also want to change the path of the `<StyleSheet / >` component in the root component to point towards the CSS file in the root. This tells leptos that the WASM/JS files generated by wasm-pack are available at `./pkg` and that the CSS files are no longer processed by cargo-leptos. Building to alternative folders is not supported at this time. You'll also want to edit the call to `get_configuration()` to pass in `Some(Cargo.toml)`, so that Leptos will read the settings instead of cargo-leptos. If you do so, your file/folder names cannot include dashes.
 1. Install wasm-pack
 ```bash
 cargo install wasm-pack

examples/todo_app_sqlite/src/main.rs

@@ -26,7 +26,9 @@ cfg_if! {
 
             crate::todo::register_server_functions();
 
-            let conf = get_configuration(Some("Cargo.toml")).await.unwrap();
+            // Setting this to None means we'll be using cargo-leptos and its env vars.
+            let conf = get_configuration(None).await.unwrap();
+
             let addr = conf.leptos_options.site_address.clone();
 
             // Generate the list of routes in your Leptos App

examples/todo_app_sqlite_axum/src/main.rs

@@ -26,7 +26,8 @@ if #[cfg(feature = "ssr")] {
 
         crate::todo::register_server_functions();
 
-        let conf = get_configuration(Some("Cargo.toml")).await.unwrap();
+        // Setting this to None means we'll be using cargo-leptos and its env vars
+        let conf = get_configuration(None).await.unwrap();
         let leptos_options = conf.leptos_options;
         let addr = leptos_options.site_address.clone();
         let routes = generate_route_list(|cx| view! { cx, <TodoApp/> }).await;

integrations/actix/Cargo.toml

@@ -1,10 +1,10 @@
 [package]
 name = "leptos_actix"
-version = {workspace = true}
+version = { workspace = true }
 edition = "2021"
 authors = ["Greg Johnston"]
 license = "MIT"
-repository = "https://github.com/gbj/leptos"
+repository = "https://github.com/leptos-rs/leptos"
 description = "Actix integrations for the Leptos web framework."
 
 [dependencies]

integrations/axum/Cargo.toml

@@ -1,10 +1,10 @@
 [package]
 name = "leptos_axum"
-version = {workspace = true}
+version = { workspace = true }
 edition = "2021"
 authors = ["Greg Johnston"]
 license = "MIT"
-repository = "https://github.com/gbj/leptos"
+repository = "https://github.com/leptos-rs/leptos"
 description = "Axum integrations for the Leptos web framework."
 
 [dependencies]

integrations/axum/src/lib.rs

@@ -321,7 +321,9 @@ where
 
             async move {
                 // Need to get the path and query string of the Request
-                let path = req.uri();
+                // For reasons that escape me, if the incoming URI protocol is https, it provides the absolute URI
+                // if http, it returns a relative path. Adding .path() seems to make it explicitly return the relative uri
+                let path = req.uri().path_and_query().unwrap().as_str();
 
                 let full_path = format!("http://leptos.dev{path}");
 

leptos/src/lib.rs

@@ -19,33 +19,33 @@
 //! 1. You need to enable the `"stable"` flag in `Cargo.toml`: `leptos = { version = "0.0", features = ["stable"] }`
 //! 2. `nightly` enables the function call syntax for accessing and setting signals. If you’re using `stable`,
 //!    you’ll just call `.get()`, `.set()`, or `.update()` manually. Check out the
-//!    [`counters_stable` example](https://github.com/gbj/leptos/blob/main/examples/counters_stable/src/main.rs)
+//!    [`counters_stable` example](https://github.com/leptos-rs/leptos/blob/main/examples/counters_stable/src/main.rs)
 //!    for examples of the correct API.
 //!
 //! # Learning by Example
 //!
 //! These docs are a work in progress. If you want to see what Leptos is capable of, check out
-//! the [examples](https://github.com/gbj/leptos/tree/main/examples):
-//! - [`counter`](https://github.com/gbj/leptos/tree/main/examples/counter) is the classic
+//! the [examples](https://github.com/leptos-rs/leptos/tree/main/examples):
+//! - [`counter`](https://github.com/leptos-rs/leptos/tree/main/examples/counter) is the classic
 //!   counter example, showing the basics of client-side rendering and reactive DOM updates
-//! - [`counters`](https://github.com/gbj/leptos/tree/main/examples/counter) introduces parent-child
+//! - [`counters`](https://github.com/leptos-rs/leptos/tree/main/examples/counters) introduces parent-child
 //!   communication via contexts, and the `<For/>` component for efficient keyed list updates.
-//! - [`parent_child`](https://github.com/gbj/leptos/tree/main/examples/parent_child) shows four different
+//! - [`parent_child`](https://github.com/leptos-rs/leptos/tree/main/examples/parent_child) shows four different
 //!   ways a parent component can communicate with a child, including passing a closure, context, and more
-//! - [`todomvc`](https://github.com/gbj/leptos/tree/main/examples/todomvc) implements the classic to-do
+//! - [`todomvc`](https://github.com/leptos-rs/leptos/tree/main/examples/todomvc) implements the classic to-do
 //!   app in Leptos. This is a good example of a complete, simple app. In particular, you might want to
-//!   see how we use [create_effect] to [serialize JSON to `localStorage`](https://github.com/gbj/leptos/blob/16f084a71268ac325fbc4a5e50c260df185eadb6/examples/todomvc/src/lib.rs#L164)
-//!   and [reactively call DOM methods](https://github.com/gbj/leptos/blob/6d7c36655c9e7dcc3a3ad33d2b846a3f00e4ae74/examples/todomvc/src/lib.rs#L291)
-//!   on [references to elements](https://github.com/gbj/leptos/blob/6d7c36655c9e7dcc3a3ad33d2b846a3f00e4ae74/examples/todomvc/src/lib.rs#L254).
-//! - [`fetch`](https://github.com/gbj/leptos/tree/main/examples/fetch) introduces
+//!   see how we use [create_effect] to [serialize JSON to `localStorage`](https://github.com/leptos-rs/leptos/blob/16f084a71268ac325fbc4a5e50c260df185eadb6/examples/todomvc/src/lib.rs#L164)
+//!   and [reactively call DOM methods](https://github.com/leptos-rs/leptos/blob/6d7c36655c9e7dcc3a3ad33d2b846a3f00e4ae74/examples/todomvc/src/lib.rs#L291)
+//!   on [references to elements](https://github.com/leptos-rs/leptos/blob/6d7c36655c9e7dcc3a3ad33d2b846a3f00e4ae74/examples/todomvc/src/lib.rs#L254).
+//! - [`fetch`](https://github.com/leptos-rs/leptos/tree/main/examples/fetch) introduces
 //!   [Resource](leptos_reactive::Resource)s, which allow you to integrate arbitrary `async` code like an
 //!   HTTP request within your reactive code.
-//! - [`router`](https://github.com/gbj/leptos/tree/main/examples/router) shows how to use Leptos’s nested router
+//! - [`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.
-//! - [`todomvc`](https://github.com/gbj/leptos/tree/main/examples/todomvc) shows the basics of building an
+//! - [`todomvc`](https://github.com/leptos-rs/leptos/tree/main/examples/todomvc) shows the basics of building an
 //!   isomorphic web app. Both the server and the client import the same app code from the `todomvc` example.
 //!   The server renders the app directly to an HTML string, and the client hydrates that HTML to make it interactive.
-//! - [`hackernews`](https://github.com/gbj/leptos/tree/main/examples/hackernews) pulls everything together.
+//! - [`hackernews`](https://github.com/leptos-rs/leptos/tree/main/examples/hackernews) pulls everything together.
 //!   It integrates calls to a real external REST API, routing, server-side rendering and hydration to create
 //!   a fully-functional PEMPA that works as intended even before WASM has loaded and begun to run.
 //!

leptos/src/suspense.rs

@@ -1,7 +1,7 @@
 use cfg_if::cfg_if;
-use leptos_dom::{Component, DynChild, Fragment, IntoView};
 #[cfg(not(any(feature = "csr", feature = "hydrate")))]
-use leptos_dom::{HydrationCtx, HydrationKey};
+use leptos_dom::HydrationCtx;
+use leptos_dom::{DynChild, Fragment, IntoView};
 use leptos_macro::component;
 use leptos_reactive::{provide_context, Scope, SuspenseContext};
 use std::rc::Rc;
@@ -73,7 +73,7 @@ where
 
     let orig_child = Rc::new(children);
 
-    Component::new("Suspense", move |cx| {
+    leptos_dom::custom(cx, leptos_dom::Custom::new("leptos-suspense")).child({
         #[cfg(not(any(feature = "csr", feature = "hydrate")))]
         let current_id = HydrationCtx::peek();
 
@@ -104,13 +104,9 @@ where
                                 &current_id.to_string(),
                                 {
                                     let current_id = current_id.clone();
-                                    let fragment_id = HydrationKey {
-                                        previous: current_id.previous,
-                                        offset: current_id.offset + 1
-                                    };
                                     move || {
-                                        HydrationCtx::continue_from(fragment_id);
-                                        orig_child(cx)
+                                        HydrationCtx::continue_from(current_id.clone());
+                                        DynChild::new(move || orig_child(cx))
                                             .into_view(cx)
                                             .render_to_string(cx)
                                             .to_string()

leptos/tests/ssr.rs

@@ -16,7 +16,7 @@ fn simple_ssr_test() {
 
         assert_eq!(
             rendered.into_view(cx).render_to_string(cx),
-            "<div id=\"_0-1\"><button id=\"_0-2\">-1</button><span id=\"_0-3\">Value: <leptos-dyn-child-start leptos id=\"_0-4o\"></leptos-dyn-child-start>0<leptos-dyn-child-end leptos id=\"_0-4c\"></leptos-dyn-child-end>!</span><button id=\"_0-5\">+1</button></div>"
+            "<div id=\"_0-1\"><button id=\"_0-2\">-1</button><span id=\"_0-3\">Value: <!--hk=_0-4o|leptos-dyn-child-start-->0<!--hk=_0-4c|leptos-dyn-child-end-->!</span><button id=\"_0-5\">+1</button></div>"
         );
     });
 }
@@ -50,7 +50,7 @@ fn ssr_test_with_components() {
 
         assert_eq!(
             rendered.into_view(cx).render_to_string(cx),
-            "<div class=\"counters\" id=\"_0-1\"><leptos-counter-start leptos id=\"_0-1-0o\"></leptos-counter-start><div id=\"_0-1-1\"><button id=\"_0-1-2\">-1</button><span id=\"_0-1-3\">Value: <leptos-dyn-child-start leptos id=\"_0-1-4o\"></leptos-dyn-child-start>1<leptos-dyn-child-end leptos id=\"_0-1-4c\"></leptos-dyn-child-end>!</span><button id=\"_0-1-5\">+1</button></div><leptos-counter-end leptos id=\"_0-1-0c\"></leptos-counter-end><leptos-counter-start leptos id=\"_0-1-5-0o\"></leptos-counter-start><div id=\"_0-1-5-1\"><button id=\"_0-1-5-2\">-1</button><span id=\"_0-1-5-3\">Value: <leptos-dyn-child-start leptos id=\"_0-1-5-4o\"></leptos-dyn-child-start>2<leptos-dyn-child-end leptos id=\"_0-1-5-4c\"></leptos-dyn-child-end>!</span><button id=\"_0-1-5-5\">+1</button></div><leptos-counter-end leptos id=\"_0-1-5-0c\"></leptos-counter-end></div>"
+            "<div class=\"counters\" id=\"_0-1\"><!--hk=_0-1-0o|leptos-counter-start--><div id=\"_0-1-1\"><button id=\"_0-1-2\">-1</button><span id=\"_0-1-3\">Value: <!--hk=_0-1-4o|leptos-dyn-child-start-->1<!--hk=_0-1-4c|leptos-dyn-child-end-->!</span><button id=\"_0-1-5\">+1</button></div><!--hk=_0-1-0c|leptos-counter-end--><!--hk=_0-1-5-0o|leptos-counter-start--><div id=\"_0-1-5-1\"><button id=\"_0-1-5-2\">-1</button><span id=\"_0-1-5-3\">Value: <!--hk=_0-1-5-4o|leptos-dyn-child-start-->2<!--hk=_0-1-5-4c|leptos-dyn-child-end-->!</span><button id=\"_0-1-5-5\">+1</button></div><!--hk=_0-1-5-0c|leptos-counter-end--></div>"
         );
     });
 }

leptos_config/Cargo.toml

@@ -6,6 +6,7 @@ authors = ["Greg Johnston"]
 license = "MIT"
 repository = "https://github.com/leptos-rs/leptos"
 description = "Configuraiton for the Leptos web framework."
+readme = "../README.md"
 
 [dependencies]
 config = "0.13.3"
@@ -13,4 +14,4 @@ fs = "0.0.5"
 regex = "1.7.0"
 serde = { version = "1.0.151", features = ["derive"] }
 thiserror = "1.0.38"
-typed-builder = "0.11.0"
+typed-builder = "0.11"

leptos_config/src/lib.rs

@@ -152,7 +152,10 @@ impl TryFrom<String> for Env {
 }
 
 /// Loads [LeptosOptions] from a Cargo.toml with layered overrides. If an env var is specified, like `LEPTOS_ENV`,
-/// it will override a setting in the file.
+/// it will override a setting in the file. It takes in an optional path to a Cargo.toml file. If None is provided,
+/// you'll need to set the options as environment variables or rely on the defaults. This is the preferred
+/// approach for cargo-leptos. If Some("./Cargo.toml") is provided, Leptos will read in the settings itself. This
+/// option currently does not allow dashes in file or foldernames, as all dashes become underscores
 pub async fn get_configuration(path: Option<&str>) -> Result<ConfFile, LeptosConfigError> {
     if let Some(path) = path {
         let text = fs::read_to_string(path).map_err(|_| LeptosConfigError::ConfigNotFound)?;

leptos_dom/Cargo.toml

@@ -4,7 +4,7 @@ version = { workspace = true }
 edition = "2021"
 authors = ["Greg Johnston"]
 license = "MIT"
-repository = "https://github.com/gbj/leptos"
+repository = "https://github.com/leptos-rs/leptos"
 description = "DOM operations for the Leptos web framework."
 
 [dependencies]
@@ -39,6 +39,7 @@ features = [
   "Range",
   "Text",
   "HtmlCollection",
+  "TreeWalker",
 
   # Events we cast to in leptos_macro -- added here so we don't force users to import them
   "AnimationEvent",

leptos_dom/src/html.rs

@@ -165,6 +165,66 @@ pub struct Custom {
   id: HydrationKey,
 }
 
+impl Custom {
+  pub fn new(name: impl Into<Cow<'static, str>>) -> Self {
+    let name = name.into();
+    let id = HydrationCtx::id();
+
+    #[cfg(all(target_arch = "wasm32", feature = "web"))]
+    let element = if HydrationCtx::is_hydrating() {
+      if let Some(el) = crate::document().get_element_by_id(&format!("_{id}")) {
+        #[cfg(debug_assertions)]
+        assert_eq!(
+          el.node_name().to_ascii_uppercase(),
+          name.to_ascii_uppercase(),
+          "SSR and CSR elements have the same `TopoId` but different node \
+           kinds. This is either a discrepancy between SSR and CSR rendering
+                    logic, which is considered a bug, or it can also be a \
+           leptos hydration issue."
+        );
+
+        el.remove_attribute("id").unwrap();
+
+        el.unchecked_into()
+      } else if let Ok(Some(el)) =
+        crate::document().query_selector(&format!("[leptos-hk=_{id}]"))
+      {
+        #[cfg(debug_assertions)]
+        assert_eq!(
+          el.node_name().to_ascii_uppercase(),
+          name.to_ascii_uppercase(),
+          "SSR and CSR elements have the same `TopoId` but different node \
+           kinds. This is either a discrepancy between SSR and CSR rendering
+                    logic, which is considered a bug, or it can also be a \
+           leptos hydration issue."
+        );
+
+        el.remove_attribute("leptos-hk").unwrap();
+
+        el.unchecked_into()
+      } else {
+        gloo::console::warn!(
+          "element with id",
+          format!("_{id}"),
+          "not found, ignoring it for hydration"
+        );
+
+        crate::document().create_element(&name).unwrap()
+      }
+    } else {
+      crate::document().create_element(&name).unwrap()
+    };
+
+    Self {
+      name,
+      #[cfg(all(target_arch = "wasm32", feature = "web"))]
+      element: element.unchecked_into(),
+      #[cfg(not(all(target_arch = "wasm32", feature = "web")))]
+      id,
+    }
+  }
+}
+
 #[cfg(all(target_arch = "wasm32", feature = "web"))]
 impl std::ops::Deref for Custom {
   type Target = web_sys::HtmlElement;

leptos_dom/src/hydration.rs

@@ -1,21 +1,51 @@
+use cfg_if::cfg_if;
 use std::{cell::RefCell, fmt::Display};
 
-#[cfg(all(target_arch = "wasm32", feature = "web"))]
-use once_cell::unsync::Lazy as LazyCell;
+cfg_if! {
+  if #[cfg(all(target_arch = "wasm32", feature = "web"))] {
+    use once_cell::unsync::Lazy as LazyCell;
+    use std::collections::HashMap;
+    use wasm_bindgen::JsCast;
 
-// We can tell if we start in hydration mode by checking to see if the
-// id "_0-0-0" is present in the DOM. If it is, we know we are hydrating from
-// the server, if not, we are starting off in CSR
-#[cfg(all(target_arch = "wasm32", feature = "web"))]
-thread_local! {
-  static IS_HYDRATING: RefCell<LazyCell<bool>> = RefCell::new(LazyCell::new(|| {
-    #[cfg(debug_assertions)]
-    return crate::document().get_element_by_id("_0-0-0").is_some()
-      || crate::document().get_element_by_id("_0-0-0o").is_some();
+    // We can tell if we start in hydration mode by checking to see if the
+    // id "_0-0-0" is present in the DOM. If it is, we know we are hydrating from
+    // the server, if not, we are starting off in CSR
+    thread_local! {
+      static HYDRATION_COMMENTS: LazyCell<HashMap<String, web_sys::Comment>> = LazyCell::new(|| {
+        let document = crate::document();
+        let body = document.body().unwrap();
+        let walker = document
+          .create_tree_walker_with_what_to_show(&body, 128)
+          .unwrap();
+        let mut map = HashMap::new();
+        while let Ok(Some(node)) = walker.next_node() {
+          if let Some(content) = node.text_content() {
+            if let Some(hk) = content.strip_prefix("hk=") {
+              if let Some(hk) = hk.split("|").next() {
+                map.insert(hk.into(), node.unchecked_into());
+              }
+            }
+          }
+        }
+        map
+      });
 
-    #[cfg(not(debug_assertions))]
-    return crate::document().get_element_by_id("_0-0-0").is_some();
-  }));
+      static IS_HYDRATING: RefCell<LazyCell<bool>> = RefCell::new(LazyCell::new(|| {
+        #[cfg(debug_assertions)]
+        return crate::document().get_element_by_id("_0-0-0").is_some()
+          || crate::document().get_element_by_id("_0-0-0o").is_some()
+          || HYDRATION_COMMENTS.with(|comments| comments.get("_0-0-0o").is_some());
+
+        #[cfg(not(debug_assertions))]
+        return crate::document().get_element_by_id("_0-0-0").is_some()
+          || HYDRATION_COMMENTS.with(|comments| comments.get("_0-0-0").is_some());
+      }));
+    }
+
+    pub(crate) fn get_marker(id: &str) -> Option<web_sys::Comment> {
+      HYDRATION_COMMENTS.with(|comments| comments.get(id).cloned())
+    }
+  }
 }
 
 /// A stable identifer within the server-rendering or hydration process.

leptos_dom/src/lib.rs

@@ -303,7 +303,7 @@ impl Comment {
       if HydrationCtx::is_hydrating() {
         let id = HydrationCtx::to_string(id, closing);
 
-        if let Some(marker) = document().get_element_by_id(&id) {
+        if let Some(marker) = hydration::get_marker(&id) {
           marker.before_with_node_1(&node).unwrap();
 
           marker.remove();
@@ -548,7 +548,7 @@ impl View {
   pub fn on<E: ev::EventDescriptor + 'static>(
     self,
     event: E,
-    mut event_handler: impl FnMut(E::EventType) + 'static,
+    #[allow(unused_mut)] mut event_handler: impl FnMut(E::EventType) + 'static,
   ) -> Self {
     cfg_if::cfg_if! {
       if #[cfg(debug_assertions)] {

leptos_dom/src/ssr.rs

@@ -16,7 +16,7 @@ use std::borrow::Cow;
 ///   <p>"Hello, world!"</p>
 /// });
 /// // static HTML includes some hydration info
-/// assert_eq!(html, "<style>[leptos]{display:none;}</style><p id=\"_0-1\">Hello, world!</p>");
+/// assert_eq!(html, "<p id=\"_0-1\">Hello, world!</p>");
 /// # }}
 /// ```
 pub fn render_to_string<F, N>(f: F) -> String
@@ -33,13 +33,7 @@ where
 
   runtime.dispose();
 
-  #[cfg(debug_assertions)]
-  {
-    format!("<style>[leptos]{{display:none;}}</style>{html}")
-  }
-
-  #[cfg(not(debug_assertions))]
-  format!("<style>l-m{{display:none;}}</style>{html}")
+  html.into()
 }
 
 /// Renders a function to a stream of HTML strings.
@@ -122,16 +116,6 @@ pub fn render_to_stream_with_prefix_undisposed(
       let pending_resources = serde_json::to_string(&resources).unwrap();
       let prefix = prefix(cx);
 
-      let shell = {
-        #[cfg(debug_assertions)]
-        {
-          format!("<style>[leptos]{{display:none;}}</style>{shell}")
-        }
-
-        #[cfg(not(debug_assertions))]
-        format!("<style>l-m{{display:none;}}</style>{shell}")
-      };
-
       (
         shell,
         prefix,
@@ -149,45 +133,19 @@ pub fn render_to_stream_with_prefix_undisposed(
 
   // resources and fragments
   // stream HTML for each <Suspense/> as it resolves
-  let fragments = fragments.map(|(fragment_id, id_before_suspense, html)| {
-    cfg_if! {
-      if #[cfg(debug_assertions)] {
-        _ = id_before_suspense;
-        // Debug-mode <Suspense/>-replacement code
-        format!(
-          r#"
-                  <template id="{fragment_id}f">{html}</template>
-                  <script>
-                      var start = document.getElementById("_{fragment_id}o");
-                      var end = document.getElementById("_{fragment_id}c");
-                      var range = new Range();
-                      range.setStartBefore(start.nextSibling.nextSibling);
-                      range.setEndAfter(end.previousSibling.previousSibling);
-                      range.deleteContents();
-                      var tpl = document.getElementById("{fragment_id}f");
-                      end.parentNode.insertBefore(tpl.content.cloneNode(true), end.previousSibling);
-                  </script>
-                  "#
-        )
-      } else {
-        // Release-mode <Suspense/>-replacement code
-        format!(
-          r#"
-                  <template id="{fragment_id}f">{html}</template>
-                  <script>
-                      var start = document.getElementById("_{id_before_suspense}");
-                      var end = document.getElementById("_{fragment_id}");
-                      var range = new Range();
-                      range.setStartAfter(start);
-                      range.setEndBefore(end);
-                      range.deleteContents();
-                      var tpl = document.getElementById("{fragment_id}f");
-                      end.parentNode.insertBefore(tpl.content.cloneNode(true), end.previousSibling);
-                  </script>
-                  "#
-        )
-      }
-    }
+  // TODO can remove id_before_suspense entirely now
+  let fragments = fragments.map(|(fragment_id, _, html)| {
+    format!(
+      r#"
+              <template id="{fragment_id}f">{html}</template>
+              <script>
+                  var placeholder = document.getElementById("_{fragment_id}");
+                  var tpl = document.getElementById("{fragment_id}f");
+                  placeholder.textContent = "";
+                  placeholder.append(tpl.content.cloneNode(true));
+              </script>
+              "#
+    )
   });
   // stream data for each Resource as it resolves
   let resources = serializers.map(|(id, json)| {
@@ -244,7 +202,7 @@ impl View {
         };
         cfg_if! {
           if #[cfg(debug_assertions)] {
-            format!(r#"<leptos-{name}-start leptos id="{}"></leptos-{name}-start>{}<leptos-{name}-end leptos id="{}"></leptos-{name}-end>"#,
+            format!(r#"<!--hk={}|leptos-{name}-start-->{}<!--hk={}|leptos-{name}-end-->"#,
               HydrationCtx::to_string(&node.id, false),
               content(),
               HydrationCtx::to_string(&node.id, true),
@@ -252,7 +210,7 @@ impl View {
             ).into()
           } else {
             format!(
-              r#"{}<l-m id="{}"></l-m>"#,
+              r#"{}<!--hk={}-->"#,
               content(),
               HydrationCtx::to_string(&node.id, true)
             ).into()
@@ -269,14 +227,14 @@ impl View {
               #[cfg(debug_assertions)]
               {
                 format!(
-                  "<leptos-unit leptos id={}></leptos-unit>",
+                  "<!--hk={}|leptos-unit-->",
                   HydrationCtx::to_string(&u.id, true)
                 )
                 .into()
               }
 
               #[cfg(not(debug_assertions))]
-              format!("<l-m id={}></l-m>", HydrationCtx::to_string(&u.id, true))
+              format!("<!--hk={}-->", HydrationCtx::to_string(&u.id, true))
                 .into()
             }) as Box<dyn FnOnce() -> Cow<'static, str>>,
           ),
@@ -312,7 +270,6 @@ impl View {
           }
           CoreComponent::Each(node) => {
             let children = node.children.take();
-
             (
               node.id,
               "each",
@@ -329,10 +286,8 @@ impl View {
                     #[cfg(debug_assertions)]
                     {
                       format!(
-                        "<leptos-each-item-start leptos \
-                         id=\"{}\"></\
-                         leptos-each-item-start>{}<leptos-each-item-end \
-                         leptos id=\"{}\"></leptos-each-item-end>",
+                        "<!--hk={}|leptos-each-item-start-->{}<!\
+                         --hk={}|leptos-each-item-end-->",
                         HydrationCtx::to_string(&id, false),
                         content(),
                         HydrationCtx::to_string(&id, true),
@@ -341,7 +296,7 @@ impl View {
 
                     #[cfg(not(debug_assertions))]
                     format!(
-                      "{}<l-m id=\"{}\"></l-m>",
+                      "{}<!--hk={}-->",
                       content(),
                       HydrationCtx::to_string(&id, true)
                     )
@@ -357,7 +312,7 @@ impl View {
           cfg_if! {
             if #[cfg(debug_assertions)] {
               format!(
-                r#"<leptos-{name}-start leptos id="{}"></leptos-{name}-start>{}<leptos-{name}-end leptos id="{}"></leptos-{name}-end>"#,
+                r#"<!--hk={}|leptos-{name}-start-->{}<!--hk={}|leptos-{name}-end-->"#,
                 HydrationCtx::to_string(&id, false),
                 content(),
                 HydrationCtx::to_string(&id, true),
@@ -366,7 +321,7 @@ impl View {
               let _ = name;
 
               format!(
-                r#"{}<l-m id="{}"></l-m>"#,
+                r#"{}<!--hk={}-->"#,
                 content(),
                 HydrationCtx::to_string(&id, true)
               ).into()
@@ -425,6 +380,7 @@ impl View {
   }
 }
 
+#[cfg(debug_assertions)]
 fn to_kebab_case(name: &str) -> String {
   if name.is_empty() {
     return String::new();

leptos_macro/Cargo.toml

@@ -4,8 +4,9 @@ version = { workspace = true }
 edition = "2021"
 authors = ["Greg Johnston"]
 license = "MIT"
-repository = "https://github.com/gbj/leptos"
+repository = "https://github.com/leptos-rs/leptos"
 description = "view macro for the Leptos web framework."
+readme = "../README.md"
 
 [lib]
 proc-macro = true
@@ -29,7 +30,7 @@ lazy_static = "1.4"
 
 [dev-dependencies]
 log = "0.4"
-typed-builder = "0.10"
+typed-builder = "0.11"
 leptos = { path = "../leptos" }
 
 [features]

leptos_macro/src/server.rs

@@ -49,7 +49,7 @@ pub fn server_macro_impl(args: proc_macro::TokenStream, s: TokenStream2) -> Resu
             #[cfg(not(target_os = "windows"))]
             let url = format!("{}/{}", span.source_file().path().to_string_lossy(), fn_name_as_str).replace('/', "-");
             #[cfg(target_os = "windows")]
-            let url = format!("{}/{}", span.source_file().path().to_string_lossy(), fn_name_as_str).replace("\\", "-");
+            let url = format!("{}\\{}", span.source_file().path().to_string_lossy(), fn_name_as_str).replace("\\", "-");
         } else {
             let url = fn_name_as_str;
         }

leptos_macro/src/view.rs

@@ -554,7 +554,7 @@ fn element_to_tokens(cx: &Ident, node: &NodeElement, mut parent_type: TagType) -
         let tag = node.name.to_string();
         let name = if is_custom_element(&tag) {
             let name = node.name.to_string();
-            quote! { leptos::leptos_dom::custom(#cx, #name) }
+            quote! { leptos::leptos_dom::custom(#cx, leptos::leptos_dom::Custom::new(#name)) }
         } else if is_svg_element(&tag) {
             let name = &node.name;
             parent_type = TagType::Svg;

leptos_reactive/src/slice.rs

@@ -1,21 +1,20 @@
 use crate::{create_memo, IntoSignalSetter, RwSignal, Scope, Signal, SignalSetter};
 
-/// derives a reactive slice from an [RwSignal](crate::RwSignal)
+/// Derives a reactive slice of an [RwSignal](crate::RwSignal).
 ///
-/// Slices have the same guarantees as [Memos](crate::Memo),
+/// Slices have the same guarantees as [Memos](crate::Memo):
 /// they only emit their value when it has actually been changed.
 ///
-/// slices need a getter and a setter, and you must make sure that
+/// Slices need a getter and a setter, and you must make sure that
 /// the setter and getter only touch their respective field and nothing else.
 /// They optimally should not have any side effects.
 ///
-/// you can use slices whenever you want to react to only parts
-/// of a bigger signal, the prime example would be state management
-/// where you want all state variables grouped up but also need
+/// You can use slices whenever you want to react to only parts
+/// of a bigger signal. The prime example would be state management,
+/// where you want all state variables grouped together, but also need
 /// fine-grained signals for each or some of these variables.
 /// In the example below, setting an auth token will only trigger
 /// the token signal, but none of the other derived signals.
-///
 /// ```
 /// # use leptos_reactive::*;
 /// # let (cx, disposer) = raw_scope_and_disposer(create_runtime());
@@ -49,13 +48,14 @@ use crate::{create_memo, IntoSignalSetter, RwSignal, Scope, Signal, SignalSetter
 /// );
 /// let count_token_updates = create_rw_signal(cx, 0);
 /// count_token_updates.with(|counter| assert_eq!(counter, &0));
-/// create_effect(cx, move |_| {
-///     token.with(|_| {});
+/// create_isomorphic_effect(cx, move |_| {
+///     _ = token.with(|_| {});
 ///     count_token_updates.update(|counter| *counter += 1)
 /// });
 /// count_token_updates.with(|counter| assert_eq!(counter, &1));
 /// set_token.set("this is not a token!".into());
 /// // token was updated with the new token
+/// token.with(|token| assert_eq!(token, "this is not a token!"));
 /// count_token_updates.with(|counter| assert_eq!(counter, &2));
 /// set_dark_mode.set(true);
 /// // since token didn't change, there was also no update emitted

leptos_server/Cargo.toml

@@ -6,6 +6,7 @@ authors = ["Greg Johnston"]
 license = "MIT"
 repository = "https://github.com/gbj/leptos"
 description = "RPC for the Leptos web framework."
+readme = "../README.md"
 
 [dependencies]
 leptos_dom = { workspace = true }

meta/src/lib.rs

@@ -4,7 +4,7 @@
 //! # Leptos Meta
 //!
 //! Leptos Meta allows you to modify content in a document’s `<head>` from within components
-//! using the [Leptos](https://github.com/gbj/leptos) web framework.
+//! using the [Leptos](https://github.com/leptos-rs/leptos) web framework.
 //!
 //! Document metadata is updated automatically when running in the browser. For server-side
 //! rendering, after the component tree is rendered to HTML, [MetaContext::dehydrate] can generate
@@ -64,7 +64,7 @@ pub use title::*;
 ///
 /// This should generally by provided somewhere in the root of your application using
 /// [provide_meta_context].
-#[derive(Clone, Default)]
+#[derive(Clone, Default, Debug)]
 pub struct MetaContext {
     pub(crate) title: TitleContext,
     pub(crate) tags: MetaTagsContext,
@@ -78,6 +78,12 @@ pub(crate) struct MetaTagsContext {
     els: Rc<RefCell<HashMap<String, (HtmlElement<AnyElement>, Scope, Option<web_sys::Element>)>>>,
 }
 
+impl std::fmt::Debug for MetaTagsContext {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        f.debug_struct("MetaTagsContext").finish()
+    }
+}
+
 impl MetaTagsContext {
     #[cfg(feature = "ssr")]
     pub fn as_string(&self) -> String {
@@ -208,10 +214,10 @@ impl MetaContext {
     ///   // `app` contains only the body content w/ hydration stuff, not the meta tags
     ///   assert_eq!(
     ///      app.into_view(cx).render_to_string(cx),
-    ///      "<main id=\"_0-1\"><leptos-unit leptos id=_0-2c></leptos-unit><leptos-unit leptos id=_0-4c></leptos-unit><p id=\"_0-5\">Some text</p></main>"
+    ///      "<main id=\"_0-1\"><!--hk=_0-2c|leptos-unit--><!--hk=_0-4c|leptos-unit--><p id=\"_0-5\">Some text</p></main>"
     ///   );
     ///   // `MetaContext::dehydrate()` gives you HTML that should be in the `<head>`
-    ///   assert_eq!(use_head(cx).dehydrate(), r#"<title>my title</title><link id="leptos-link-1" href="/style.css" rel="stylesheet" leptos-hk="_0-3"/>"#)
+    ///   assert_eq!(use_head(cx).dehydrate(), "<title>my title</title><link id=\"leptos-link-1\" href=\"/style.css\" rel=\"stylesheet\" leptos-hk=\"_0-3\"/>")
     /// });
     /// # }
     /// ```

meta/src/meta_tags.rs

@@ -17,7 +17,7 @@ use crate::{use_head, TextProp};
 ///     <main>
 ///       <Meta charset="utf-8"/>
 ///       <Meta name="description" content="A Leptos fan site."/>
-///       <Meta http_equiv="refresh" content="3;url=https://github.com/gbj/leptos"/>
+///       <Meta http_equiv="refresh" content="3;url=https://github.com/leptos-rs/leptos"/>
 ///     </main>
 ///   }
 /// }

router/Cargo.toml

@@ -4,6 +4,7 @@ version = "0.1.0"
 edition = "2021"
 authors = ["Greg Johnston"]
 license = "MIT"
+README = "../README.md"
 repository = "https://github.com/leptos-rs/leptos"
 description = "Router for the Leptos web framework."
 

router/src/components/link.rs

@@ -36,6 +36,14 @@ where
 
 /// An HTML [`a`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a)
 /// progressively enhanced to use client-side routing.
+///
+/// Client-side routing also works with ordinary HTML `<a>` tags, but `<A>` does two additional things:
+/// 1) Correctly resolves relative nested routes. Relative routing with ordinary `<a>` tags can be tricky.
+///    For example, if you have a route like `/post/:id`, `<A href="1">` will generate the correct relative
+///    route, but `<a href="1">` likely will not (depending on where it appears in your view.)
+/// 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.
 #[component]
 pub fn A<H>(
     cx: Scope,

router/src/components/route.rs

@@ -138,7 +138,7 @@ impl RouteContext {
         self.inner.params
     }
 
-    pub(crate) fn base(cx: Scope, path: &str, fallback: Option<fn() -> View>) -> Self {
+    pub(crate) fn base(cx: Scope, path: &str, fallback: Option<fn(Scope) -> View>) -> Self {
         Self {
             inner: Rc::new(RouteContextInner {
                 cx,
@@ -148,7 +148,7 @@ impl RouteContext {
                 path: path.to_string(),
                 original_path: path.to_string(),
                 params: create_memo(cx, |_| ParamsMap::new()),
-                outlet: Box::new(move || fallback.map(|f| f().into_view(cx))),
+                outlet: Box::new(move || fallback.as_ref().map(move |f| f(cx))),
             }),
         }
     }

router/src/components/router.rs

@@ -28,7 +28,7 @@ pub fn Router(
     base: Option<&'static str>,
     /// A fallback that should be shown if no route is matched.
     #[prop(optional)]
-    fallback: Option<fn() -> View>,
+    fallback: Option<fn(Scope) -> View>,
     /// The `<Router/>` should usually wrap your whole page. It can contain
     /// any elements, and should include a [Routes](crate::Routes) component somewhere
     /// to define and display [Route](crate::Route)s.
@@ -80,7 +80,7 @@ impl RouterContext {
     pub(crate) fn new(
         cx: Scope,
         base: Option<&'static str>,
-        fallback: Option<fn() -> View>,
+        fallback: Option<fn(Scope) -> View>,
     ) -> Self {
         cfg_if! {
             if #[cfg(any(feature = "csr", feature = "hydrate"))] {

router/src/components/routes.rs

@@ -28,6 +28,7 @@ pub fn Routes(
         log::warn!("<Routes/> component should be nested within a <Router/>.");
         panic!()
     });
+    let base_route = router.base();
 
     let mut branches = Vec::new();
     let id_before = HydrationCtx::peek();
@@ -192,16 +193,20 @@ pub fn Routes(
     let root = create_memo(cx, move |prev| {
         provide_context(cx, route_states);
         route_states.with(|state| {
-            let root = state.routes.borrow();
-            let root = root.get(0);
-            if let Some(route) = root {
-                provide_context(cx, route.clone());
-            }
-
-            if prev.is_none() || !root_equal.get() {
-                root.as_ref().map(|route| route.outlet().into_view(cx))
+            if state.routes.borrow().is_empty() {
+                Some(base_route.outlet().into_view(cx))
             } else {
-                prev.cloned().unwrap()
+                let root = state.routes.borrow();
+                let root = root.get(0);
+                if let Some(route) = root {
+                    provide_context(cx, route.clone());
+                }
+
+                if prev.is_none() || !root_equal.get() {
+                    root.as_ref().map(|route| route.outlet().into_view(cx))
+                } else {
+                    prev.cloned().unwrap()
+                }
             }
         })
     });