Fix MetaContext debug for wasm target

Add programmatic navigation in router example

README.md

@@ -29,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>
     }

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/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/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/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>
         </>

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_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_macro/Cargo.toml

@@ -6,6 +6,7 @@ authors = ["Greg Johnston"]
 license = "MIT"
 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_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

@@ -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 {

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()
+                }
             }
         })
     });