From 51b6149e45eb9d24e11268f933f4f5bf7bd25b99 Mon Sep 17 00:00:00 2001 From: Greg Johnston Date: Tue, 3 Dec 2024 09:32:43 -0500 Subject: [PATCH] correct missing 0.7 updates --- src/islands.md | 47 ++++++++++++++--------------- src/router/18_params_and_queries.md | 16 ++++++---- src/router/19_a.md | 41 +++++++++++++------------ 3 files changed, 54 insertions(+), 50 deletions(-) diff --git a/src/islands.md b/src/islands.md index aff5ab1..ed9f1a9 100644 --- a/src/islands.md +++ b/src/islands.md @@ -56,6 +56,7 @@ leptos::mount::hydrate_islands(); Rather than running the whole application and hydrating the view that it creates, this will hydrate each individual island, in order. In `app.rs`, in the `shell` functions, we’ll also need to add `islands=true` to the `HydrationScripts` component: + ```rust ``` @@ -126,8 +127,11 @@ If you open up the source for the page now, you’ll see that your `HomePage` is ```html -

Welcome to Leptos!

- +

Welcome to Leptos!

+ ``` @@ -173,7 +177,7 @@ The point comes when you combine two key facts: This means you can run server-only code directly in the body of a component, and pass it directly into the children. Certain tasks that take a complex blend of server functions and Suspense in fully-hydrated apps can be done inline in islands. -> \* This “unless you use it in an island” is important. It is *not* the case that `#[component]` components only run on the server. Rather, they are “shared components” that are only compiled into the WASM binary if they’re used in the body of an `#[island]`. But if you don’t use them in an island, they won’t run in the browser. +> \* This “unless you use it in an island” is important. It is _not_ the case that `#[component]` components only run on the server. Rather, they are “shared components” that are only compiled into the WASM binary if they’re used in the body of an `#[island]`. But if you don’t use them in an island, they won’t run in the browser. We’re going to rely on a third fact in the rest of this demo: @@ -238,16 +242,16 @@ fn HomePage() -> impl IntoView { If you take a look in the DOM inspector, you’ll see the island is now something like ```html - -
- - - - -
+
+ + + + +
``` @@ -413,19 +417,14 @@ Check out the [`islands` example](https://github.com/leptos-rs/leptos/blob/main/ ## Demo Code ```rust -use leptos::*; -use leptos_router::*; +use leptos::prelude::*; #[component] pub fn App() -> impl IntoView { view! { - -
- - - -
- +
+ +
} } @@ -463,7 +462,7 @@ fn HomePage() -> impl IntoView { #[island] fn Tabs(labels: Vec, children: Children) -> impl IntoView { - let (selected, set_selected) = create_signal(0); + let (selected, set_selected) = signal(0); provide_context(selected); let buttons = labels @@ -471,7 +470,7 @@ fn Tabs(labels: Vec, children: Children) -> impl IntoView { .enumerate() .map(|(index, label)| { view! { - } @@ -495,7 +494,7 @@ fn Tab(index: usize, children: Children) -> impl IntoView {
`Params` is a very lightweight trait to convert a flat key-value map of strings into a struct by applying `FromStr` to each field. Because of the flat structure of route params and URL queries, it’s significantly less flexible than something like `serde`; it also adds much less weight to your binary. ```rust -use leptos::*; -use leptos_router::*; +use leptos::Params; +use leptos_router::params::Params; #[derive(Params, PartialEq)] struct ContactParams { - id: Option + id: Option, } #[derive(Params, PartialEq)] struct ContactSearch { - q: Option + q: Option, } ``` @@ -45,6 +45,8 @@ Now we can use them in a component. Imagine a URL that has both params and a que The typed versions return `Memo>`. It’s a Memo so it reacts to changes in the URL. It’s a `Result` because the params or query need to be parsed from the URL, and may or may not be valid. ```rust +use leptos_router::hooks::{use_params, use_query}; + let params = use_params::(); let query = use_query::(); @@ -62,6 +64,8 @@ let id = move || { The untyped versions return `Memo`. Again, it’s memo to react to changes in the URL. [`ParamsMap`](https://docs.rs/leptos_router/0.7.0-gamma3/leptos_router/params/struct.ParamsMap.html) behaves a lot like any other map type, with a `.get()` method that returns `Option`. ```rust +use leptos_router::hooks::{use_params_map, use_query_map}; + let params = use_params_map(); let query = use_query_map(); @@ -78,14 +82,14 @@ This can get a little messy: deriving a signal that wraps an `Option<_>` or `Res ```admonish sandbox title="Live example" collapsible=true -[Click to open CodeSandbox.]([https://codesandbox.io/p/sandbox/16-router-0-5-4xp4zz?file=%2Fsrc%2Fmain.rs%3A102%2C2](https://codesandbox.io/p/devbox/16-router-0-7-csm8t5?file=%2Fsrc%2Fmain.rs)) +[Click to open CodeSandbox.]([https://codesandbox.io/p/devbox/16-router-0-7-csm8t5?file=%2Fsrc%2Fmain.rs](https://codesandbox.io/p/devbox/16-router-0-7-csm8t5?file=%2Fsrc%2Fmain.rs)) ``` diff --git a/src/router/19_a.md b/src/router/19_a.md index 525f1a8..d9cd8ab 100644 --- a/src/router/19_a.md +++ b/src/router/19_a.md @@ -37,14 +37,14 @@ The second argument here is a set of [`NavigateOptions`](https://docs.rs/leptos_ ```admonish sandbox title="Live example" collapsible=true -[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/16-router-0-5-4xp4zz?file=%2Fsrc%2Fmain.rs%3A102%2C2) +[Click to open CodeSandbox.](https://codesandbox.io/p/devbox/16-router-0-7-csm8t5?file=%2Fsrc%2Fmain.rs) ``` @@ -52,11 +52,13 @@ The second argument here is a set of [`NavigateOptions`](https://docs.rs/leptos_ CodeSandbox Source ```rust -use leptos::*; -use leptos_router::*; +use leptos::prelude::*; +use leptos_router::components::{Outlet, ParentRoute, Route, Router, Routes, A}; +use leptos_router::hooks::use_params_map; +use leptos_router::path; #[component] -fn App() -> impl IntoView { +pub fn App() -> impl IntoView { view! {

"Contact App"

@@ -65,41 +67,40 @@ fn App() -> impl IntoView { // note: we can just use normal tags // and the router will use client-side navigation
- + // / just has an un-nested "Home" - "Home" }/> // /contacts has nested routes - // if no id specified, fall back - - + "(Contact Info)"
}/> - "(Conversations)" }/> - + // if no id specified, fall back - "Select a user to view contact info." }/> - + @@ -111,8 +112,8 @@ fn ContactList() -> impl IntoView { view! {
// here's our contact list component itself +

"Contacts"

-

"Contacts"

"Alice" "Bob" "Steve" @@ -130,7 +131,7 @@ fn ContactList() -> impl IntoView { fn ContactInfo() -> impl IntoView { // we can access the :id param reactively with `use_params_map` let params = use_params_map(); - let id = move || params.with(|params| params.get("id").cloned().unwrap_or_default()); + let id = move || params.read().get("id").unwrap_or_default(); // imagine we're loading data from an API here let name = move || match id().as_str() { @@ -141,8 +142,8 @@ fn ContactInfo() -> impl IntoView { }; view! { +

{name}

-

{name}

"Contact Info" "Conversations" @@ -156,7 +157,7 @@ fn ContactInfo() -> impl IntoView { } fn main() { - leptos::mount_to_body(App) + leptos::mount::mount_to_body(App) } ```