Skip to content

Commit

Permalink
correct missing 0.7 updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@gbj
gbj committed Dec 3, 2024
1 parent f18e456 commit 51b6149
Show file tree
Hide file tree
Showing 3 changed files with 54 additions and 50 deletions.
47 changes: 23 additions & 24 deletions src/islands.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
<HydrationScripts options islands=true/>
```
Expand Down Expand Up @@ -126,8 +127,11 @@ If you open up the source for the page now, you’ll see that your `HomePage` is

```html
<leptos-island data-component="HomePage_7432294943247405892">
<h1>Welcome to Leptos!</h1>
<button>Click Me: <!>0</button>
<h1>Welcome to Leptos!</h1>
<button>
Click Me:
<!>0
</button>
</leptos-island>
```

Expand Down Expand Up @@ -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:

Expand Down Expand Up @@ -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
<leptos-island
data-component="Tabs_1030591929019274801"
data-props="{&quot;labels&quot;:[&quot;a.txt&quot;,&quot;b.txt&quot;,&quot;c.txt&quot;]}"
<leptos-island
data-component="Tabs_1030591929019274801"
data-props='{"labels":["a.txt","b.txt","c.txt"]}'
>
<div style="display: flex; width: 100%; justify-content: space-between;;">
<button>a.txt</button>
<button>b.txt</button>
<button>c.txt</button>
<!---->
</div>
<div style="display: flex; width: 100%; justify-content: space-between;;">
<button>a.txt</button>
<button>b.txt</button>
<button>c.txt</button>
<!---->
</div>
</leptos-island>
```

Expand Down Expand Up @@ -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! {
<Router>
<main style="background-color: lightblue; padding: 10px">
<Routes>
<Route path="" view=HomePage/>
</Routes>
</main>
</Router>
<main style="background-color: lightblue; padding: 10px">
<HomePage/>
</main>
}
}

Expand Down Expand Up @@ -463,15 +462,15 @@ fn HomePage() -> impl IntoView {

#[island]
fn Tabs(labels: Vec<String>, children: Children) -> impl IntoView {
let (selected, set_selected) = create_signal(0);
let (selected, set_selected) = signal(0);
provide_context(selected);

let buttons = labels
.into_iter()
.enumerate()
.map(|(index, label)| {
view! {
<button on:click=move |_| set_selected(index)>
<button on:click=move |_| set_selected.set(index)>
{label}
</button>
}
Expand All @@ -495,7 +494,7 @@ fn Tab(index: usize, children: Children) -> impl IntoView {
<div
style:background-color="lightgreen"
style:padding="10px"
style:display=move || if selected() == index {
style:display=move || if selected.get() == index {
"block"
} else {
"none"
Expand Down
16 changes: 10 additions & 6 deletions src/router/18_params_and_queries.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,17 +21,17 @@ The untyped versions hold a simple key-value map. To use the typed versions, der
> `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<usize>
id: Option<usize>,
}

#[derive(Params, PartialEq)]
struct ContactSearch {
q: Option<String>
q: Option<String>,
}
```

Expand All @@ -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<Result<T, _>>`. 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::<ContactParams>();
let query = use_query::<ContactSearch>();

Expand All @@ -62,6 +64,8 @@ let id = move || {
The untyped versions return `Memo<ParamsMap>`. 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<String>`.

```rust
use leptos_router::hooks::{use_params_map, use_query_map};

let params = use_params_map();
let query = use_query_map();

Expand All @@ -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))
<noscript>
Please enable JavaScript to view examples.
</noscript>
<template>
<iframe src="[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)" width="100%" height="1000px" style="max-height: 100vh"></iframe>
<iframe src="[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)" width="100%" height="1000px" style="max-height: 100vh"></iframe>
</template>
```
Expand Down
41 changes: 21 additions & 20 deletions src/router/19_a.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,26 +37,28 @@ 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)
<noscript>
Please enable JavaScript to view examples.
</noscript>
<template>
<iframe src="https://codesandbox.io/p/sandbox/16-router-0-5-4xp4zz?file=%2Fsrc%2Fmain.rs%3A102%2C2" width="100%" height="1000px" style="max-height: 100vh"></iframe>
<iframe src="https://codesandbox.io/p/devbox/16-router-0-7-csm8t5?file=%2Fsrc%2Fmain.rs" width="100%" height="1000px" style="max-height: 100vh"></iframe>
</template>
```

<details>
<summary>CodeSandbox Source</summary>

```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! {
<Router>
<h1>"Contact App"</h1>
Expand All @@ -65,41 +67,40 @@ fn App() -> impl IntoView {
// note: we can just use normal <a> tags
// and the router will use client-side navigation
<nav>
<h2>"Navigation"</h2>
<a href="/">"Home"</a>
<a href="/contacts">"Contacts"</a>
</nav>
<main>
<Routes>
<Routes fallback=|| "Not found.">
// / just has an un-nested "Home"
<Route path="/" view=|| view! {
<Route path=path!("/") view=|| view! {
<h3>"Home"</h3>
}/>
// /contacts has nested routes
<Route
path="/contacts"
<ParentRoute
path=path!("/contacts")
view=ContactList
>
// if no id specified, fall back
<Route path=":id" view=ContactInfo>
<Route path="" view=|| view! {
<ParentRoute path=path!(":id") view=ContactInfo>
<Route path=path!("") view=|| view! {
<div class="tab">
"(Contact Info)"
</div>
}/>
<Route path="conversations" view=|| view! {
<Route path=path!("conversations") view=|| view! {
<div class="tab">
"(Conversations)"
</div>
}/>
</Route>
</ParentRoute>
// if no id specified, fall back
<Route path="" view=|| view! {
<Route path=path!("") view=|| view! {
<div class="select-user">
"Select a user to view contact info."
</div>
}/>
</Route>
</ParentRoute>
</Routes>
</main>
</Router>
Expand All @@ -111,8 +112,8 @@ fn ContactList() -> impl IntoView {
view! {
<div class="contact-list">
// here's our contact list component itself
<h3>"Contacts"</h3>
<div class="contact-list-contacts">
<h3>"Contacts"</h3>
<A href="alice">"Alice"</A>
<A href="bob">"Bob"</A>
<A href="steve">"Steve"</A>
Expand All @@ -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() {
Expand All @@ -141,8 +142,8 @@ fn ContactInfo() -> impl IntoView {
};

view! {
<h4>{name}</h4>
<div class="contact-info">
<h4>{name}</h4>
<div class="tabs">
<A href="" exact=true>"Contact Info"</A>
<A href="conversations">"Conversations"</A>
Expand All @@ -156,7 +157,7 @@ fn ContactInfo() -> impl IntoView {
}

fn main() {
leptos::mount_to_body(App)
leptos::mount::mount_to_body(App)
}
```

Expand Down

0 comments on commit 51b6149

Please sign in to comment.