From c781b4e1c78f79e0cac16112381be3cecf9482cf Mon Sep 17 00:00:00 2001 From: Greg Johnston Date: Fri, 6 Oct 2023 14:20:01 -0400 Subject: [PATCH] docs: update CodeSandboxes to 0.5 --- docs/book/src/15_global_state.md | 5 +-- docs/book/src/async/10_resources.md | 18 ++++----- docs/book/src/async/11_suspense.md | 17 ++++----- docs/book/src/async/12_transition.md | 7 ++-- docs/book/src/async/13_actions.md | 6 +-- docs/book/src/reactivity/14_create_effect.md | 15 +++----- docs/book/src/router/17_nested_routing.md | 7 ++-- docs/book/src/router/18_params_and_queries.md | 9 ++--- docs/book/src/router/19_a.md | 9 ++--- docs/book/src/router/20_form.md | 7 ++-- docs/book/src/view/01_basic_component.md | 4 +- docs/book/src/view/02_dynamic_attributes.md | 32 ++++++++++++++-- docs/book/src/view/03_components.md | 6 +-- docs/book/src/view/04_iteration.md | 11 ++---- docs/book/src/view/05_forms.md | 37 +++++++++---------- docs/book/src/view/06_control_flow.md | 7 ++-- docs/book/src/view/07_errors.md | 7 ++-- docs/book/src/view/08_parent_child.md | 14 ++----- docs/book/src/view/09_component_children.md | 10 ++--- 19 files changed, 113 insertions(+), 115 deletions(-) diff --git a/docs/book/src/15_global_state.md b/docs/book/src/15_global_state.md index 04337a0213..57873be079 100644 --- a/docs/book/src/15_global_state.md +++ b/docs/book/src/15_global_state.md @@ -180,9 +180,9 @@ data flow and of fine-grained reactive updates. > **Note**: There are some significant drawbacks to this approach. Both signals and memos need to own their values, so a memo will need to clone the field’s value on every change. The most natural way to manage state in a framework like Leptos is always to provide signals that are as locally-scoped and fine-grained as they can be, not to hoist everything up into global state. But when you _do_ need some kind of global state, `create_slice` can be a useful tool. -[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/1-basic-component-forked-8bte19?selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A2%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A2%7D%5D&file=%2Fsrc%2Fmain.rs) +[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/15-global-state-0-5-8c2ff6?file=%2Fsrc%2Fmain.rs%3A1%2C2) - +
CodeSandbox Source @@ -396,7 +396,6 @@ fn GlobalStateInput() -> impl IntoView { fn main() { leptos::mount_to_body(|| view! { }) } - ```
diff --git a/docs/book/src/async/10_resources.md b/docs/book/src/async/10_resources.md index ae1b81ee5a..86ea16b025 100644 --- a/docs/book/src/async/10_resources.md +++ b/docs/book/src/async/10_resources.md @@ -30,7 +30,7 @@ To create a resource that simply runs once, you can pass a non-reactive, empty s let once = create_resource(|| (), |_| async move { load_data().await }); ``` -To access the value you can use `.read()` or `.with(|data| /* */)`. These work just like `.get()` and `.with()` on a signal—`read` clones the value and returns it, `with` applies a closure to it—but for any `Resource<_, T>`, they always return `Option`, not `T`: because it’s always possible that your resource is still loading. +To access the value you can use `.get()` or `.with(|data| /* */)`. These work just like `.get()` and `.with()` on a signal—`get` clones the value and returns it, `with` applies a closure to it—but for any `Resource<_, T>`, they always return `Option`, not `T`: because it’s always possible that your resource is still loading. So, you can show the current state of a resource in your view: @@ -38,7 +38,7 @@ So, you can show the current state of a resource in your view: let once = create_resource(|| (), |_| async move { load_data().await }); view! {

"My Data"

- {move || match once.read() { + {move || match once.get() { None => view! {

"Loading..."

}.into_view(), Some(data) => view! { }.into_view() }} @@ -47,9 +47,9 @@ view! { Resources also provide a `refetch()` method that allows you to manually reload the data (for example, in response to a button click) and a `loading()` method that returns a `ReadSignal` indicating whether the resource is currently loading or not. -[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/10-async-resources-4z0qt3?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A3%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A3%7D%5D) +[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/10-resources-0-5-9jq86q?file=%2Fsrc%2Fmain.rs%3A1%2C2) - +
CodeSandbox Source @@ -74,7 +74,6 @@ fn App() -> impl IntoView { // create_resource takes two arguments after its scope let async_data = create_resource( - // the first is the "source signal" count, // the second is the loader @@ -89,12 +88,12 @@ fn App() -> impl IntoView { // that doesn't depend on anything: we just load it once let stable = create_resource(|| (), |_| async move { load_data(1).await }); - // we can access the resource values with .read() + // we can access the resource values with .get() // this will reactively return None before the Future has resolved // and update to Some(T) when it has resolved let async_result = move || { async_data - .read() + .get() .map(|value| format!("Server returned {value:?}")) // This loading state will only show before the first load .unwrap_or_else(|| "Loading...".into()) @@ -114,7 +113,7 @@ fn App() -> impl IntoView { "Click me"

- "stable"": " {move || stable.read()} + "stable"": " {move || stable.get()}

"count"": " {count} @@ -129,9 +128,8 @@ fn App() -> impl IntoView { } fn main() { - leptos::mount_to_body(|| view! { }) + leptos::mount_to_body(App) } - ```

diff --git a/docs/book/src/async/11_suspense.md b/docs/book/src/async/11_suspense.md index 45906b7a07..e23f764ea1 100644 --- a/docs/book/src/async/11_suspense.md +++ b/docs/book/src/async/11_suspense.md @@ -8,7 +8,7 @@ let once = create_resource(count, |count| async move { load_a(count).await }); view! {

"My Data"

- {move || match once.read() { + {move || match once.get() { None => view! {

"Loading..."

}.into_view(), Some(data) => view! { }.into_view() }} @@ -25,7 +25,7 @@ let b = create_resource(count2, |count| async move { load_b(count).await }); view! {

"My Data"

- {move || match (a.read(), b.read()) { + {move || match (a.get(), b.get()) { (Some(a), Some(b)) => view! { @@ -53,12 +53,12 @@ view! {

"My Data"

"A"

{move || { - a.read() + a.get() .map(|a| view! { }) }}

"B"

{move || { - b.read() + b.get() .map(|b| view! { }) }} @@ -97,9 +97,9 @@ view! { } ``` -[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/11-suspense-907niv?file=%2Fsrc%2Fmain.rs) +[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/11-suspense-0-5-qzpgqs?file=%2Fsrc%2Fmain.rs%3A1%2C1) - +
CodeSandbox Source @@ -141,16 +141,15 @@ fn App() -> impl IntoView { // and then whenever any resources has been resolved

"Your shouting name is " - {move || async_data.read()} + {move || async_data.get()}

} } fn main() { - leptos::mount_to_body(|| view! { }) + leptos::mount_to_body(App) } - ```
diff --git a/docs/book/src/async/12_transition.md b/docs/book/src/async/12_transition.md index bc52b30c3b..668785fba6 100644 --- a/docs/book/src/async/12_transition.md +++ b/docs/book/src/async/12_transition.md @@ -6,9 +6,9 @@ You’ll notice in the `` example that if you keep reloading the data This example shows how you can create a simple tabbed contact list with ``. When you select a new tab, it continues showing the current contact until the new data loads. This can be a much better user experience than constantly falling back to a loading message. -[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/12-transition-sn38sd?selection=%5B%7B%22endColumn%22%3A15%2C%22endLineNumber%22%3A2%2C%22startColumn%22%3A15%2C%22startLineNumber%22%3A2%7D%5D&file=%2Fsrc%2Fmain.rs) +[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/12-transition-0-5-2jg5lz?file=%2Fsrc%2Fmain.rs%3A1%2C1) - +
CodeSandbox Source @@ -75,9 +75,8 @@ fn App() -> impl IntoView { } fn main() { - leptos::mount_to_body(|| view! { }) + leptos::mount_to_body(App) } - ```
diff --git a/docs/book/src/async/13_actions.md b/docs/book/src/async/13_actions.md index 35b5a16614..625dc33baa 100644 --- a/docs/book/src/async/13_actions.md +++ b/docs/book/src/async/13_actions.md @@ -91,9 +91,9 @@ view! { Now, there’s a chance this all seems a little over-complicated, or maybe too restricted. I wanted to include actions here, alongside resources, as the missing piece of the puzzle. In a real Leptos app, you’ll actually most often use actions alongside server functions, [`create_server_action`](https://docs.rs/leptos/latest/leptos/fn.create_server_action.html), and the [``](https://docs.rs/leptos_router/latest/leptos_router/fn.ActionForm.html) component to create really powerful progressively-enhanced forms. So if this primitive seems useless to you... Don’t worry! Maybe it will make sense later. (Or check out our [`todo_app_sqlite`](https://github.com/leptos-rs/leptos/blob/main/examples/todo_app_sqlite/src/todo.rs) example now.) -[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/10-async-resources-forked-hgpfp0?selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A4%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A4%7D%5D&file=%2Fsrc%2Fmain.rs) +[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/13-actions-0-5-8xk35v?file=%2Fsrc%2Fmain.rs%3A1%2C1) - +
CodeSandbox Source @@ -168,7 +168,7 @@ fn App() -> impl IntoView { } fn main() { - leptos::mount_to_body(|| view! { }) + leptos::mount_to_body(App) } ``` diff --git a/docs/book/src/reactivity/14_create_effect.md b/docs/book/src/reactivity/14_create_effect.md index da92d8ce3e..991074f4a8 100644 --- a/docs/book/src/reactivity/14_create_effect.md +++ b/docs/book/src/reactivity/14_create_effect.md @@ -135,9 +135,9 @@ stop(); // stop watching set_num.set(2); // (nothing happens) ``` -[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/serene-thompson-40974n?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A2%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A2%7D%5D) +[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/14-effect-0-5-d6hkch?file=%2Fsrc%2Fmain.rs%3A1%2C1) - +
CodeSandbox Source @@ -293,10 +293,8 @@ fn EffectVsDerivedSignal() -> impl IntoView { } } -/*#[component] +#[component] pub fn Show( - /// The scope the component is running in - /// The components Show wraps children: Box Fragment>, /// A closure that returns a bool that determines whether this thing runs @@ -315,17 +313,16 @@ where true => children().into_view(), false => fallback().into_view(), } -}*/ +} -fn log(std::fmt::Display) { +fn log(msg: impl std::fmt::Display) { let log = use_context::>>().unwrap(); log.update(|log| log.push(msg.to_string())); } fn main() { - leptos::mount_to_body(|| view! { }) + leptos::mount_to_body(App) } - ```
diff --git a/docs/book/src/router/17_nested_routing.md b/docs/book/src/router/17_nested_routing.md index 82ca0961a8..88444cce61 100644 --- a/docs/book/src/router/17_nested_routing.md +++ b/docs/book/src/router/17_nested_routing.md @@ -204,9 +204,9 @@ In fact, in this case, we don’t even need to rerender the `` compone > This sandbox includes a couple features (like nested routing) discussed in this section and the previous one, and a couple we’ll cover in the rest of this chapter. The router is such an integrated system that it makes sense to provide a single example, so don’t be surprised if there’s anything you don’t understand. -[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/16-router-fy4tjv?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A3%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A3%7D%5D) +[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/16-router-0-5-4xp4zz?file=%2Fsrc%2Fmain.rs%3A102%2C2) - +
CodeSandbox Source @@ -316,9 +316,8 @@ fn ContactInfo() -> impl IntoView { } fn main() { - leptos::mount_to_body(|| view! { }) + leptos::mount_to_body(App) } - ```
diff --git a/docs/book/src/router/18_params_and_queries.md b/docs/book/src/router/18_params_and_queries.md index a3e0bab04f..bd64eb436d 100644 --- a/docs/book/src/router/18_params_and_queries.md +++ b/docs/book/src/router/18_params_and_queries.md @@ -82,9 +82,9 @@ This can get a little messy: deriving a signal that wraps an `Option<_>` or `Res > This is the same example from the previous section. The router is such an integrated system that it makes sense to provide a single example highlighting multiple features, even if we haven’t explained them all yet. -[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/16-router-fy4tjv?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A3%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A3%7D%5D) +[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/16-router-0-5-4xp4zz?file=%2Fsrc%2Fmain.rs%3A102%2C2) - +
CodeSandbox Source @@ -117,7 +117,7 @@ fn App() -> impl IntoView { + > // if no id specified, fall back impl IntoView { } fn main() { - leptos::mount_to_body(|| view! { }) + leptos::mount_to_body(App) } - ```
diff --git a/docs/book/src/router/19_a.md b/docs/book/src/router/19_a.md index bcdc491103..ea384387e3 100644 --- a/docs/book/src/router/19_a.md +++ b/docs/book/src/router/19_a.md @@ -35,9 +35,9 @@ The second argument here is a set of [`NavigateOptions`](https://docs.rs/leptos_ > Once again, this is the same example. Check out the relative `` components, and take a look at the CSS in `index.html` to see the ARIA-based styling. -[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/16-router-fy4tjv?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A3%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A3%7D%5D) +[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/16-router-0-5-4xp4zz?file=%2Fsrc%2Fmain.rs%3A102%2C2) - +
CodeSandbox Source @@ -70,7 +70,7 @@ fn App() -> impl IntoView { + > // if no id specified, fall back impl IntoView { } fn main() { - leptos::mount_to_body(|| view! { }) + leptos::mount_to_body(App) } - ```
diff --git a/docs/book/src/router/20_form.md b/docs/book/src/router/20_form.md index f1bc1cbfe4..4d3531f6d7 100644 --- a/docs/book/src/router/20_form.md +++ b/docs/book/src/router/20_form.md @@ -62,9 +62,9 @@ view! { You’ll notice that this version drops the `Submit` button. Instead, we add an `oninput` attribute to the input. Note that this is _not_ `on:input`, which would listen for the `input` event and run some Rust code. Without the colon, `oninput` is the plain HTML attribute. So the string is actually a JavaScript string. `this.form` gives us the form the input is attached to. `requestSubmit()` fires the `submit` event on the `
`, which is caught by `` just as if we had clicked a `Submit` button. Now the form will “navigate” on every keystroke or input to keep the URL (and therefore the search) perfectly in sync with the user’s input as they type. -[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/16-router-forked-hrrt3h?file=%2Fsrc%2Fmain.rs) +[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/20-form-0-5-9g7v9p?file=%2Fsrc%2Fmain.rs%3A1%2C1) - +
CodeSandbox Source @@ -172,9 +172,8 @@ pub fn FormExample() -> impl IntoView { } fn main() { - leptos::mount_to_body(|| view! { }) + leptos::mount_to_body(App) } - ```
diff --git a/docs/book/src/view/01_basic_component.md b/docs/book/src/view/01_basic_component.md index 171f768d2b..1f0c39a676 100644 --- a/docs/book/src/view/01_basic_component.md +++ b/docs/book/src/view/01_basic_component.md @@ -156,9 +156,9 @@ You can see here that while `set_count` just sets the value, `set_count.update() Other Previews > 8080.` Hover over any of the variables to show Rust-Analyzer details > and docs for what’s going on. Feel free to fork the examples to play with them yourself! -[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/1-basic-component-3d74p3?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A31%2C%22endLineNumber%22%3A19%2C%22startColumn%22%3A31%2C%22startLineNumber%22%3A19%7D%5D) +[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/1-basic-component-3d74p3?file=%2Fsrc%2Fmain.rs%3A1%2C1) - +
CodeSandbox Source diff --git a/docs/book/src/view/02_dynamic_attributes.md b/docs/book/src/view/02_dynamic_attributes.md index 1c847cadfb..85dc29b21e 100644 --- a/docs/book/src/view/02_dynamic_attributes.md +++ b/docs/book/src/view/02_dynamic_attributes.md @@ -166,9 +166,9 @@ are designed to solve this problem for expensive calculations. > > [Click here for the full `view` macros docs](https://docs.rs/leptos/latest/leptos/macro.view.html). -[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/2-dynamic-attribute-pqyvzl?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A2%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A2%7D%5D) +[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/2-dynamic-attributes-0-5-lwdrpm?file=%2Fsrc%2Fmain.rs%3A1%2C1) - +
Code Sandbox Source @@ -227,7 +227,33 @@ fn App() -> impl IntoView { } fn main() { - leptos::mount_to_body(|| view! { }) + leptos::mount_to_body(App) +} + + // passing a function to an attribute + // reactively sets that attribute + // signals are functions, so this <=> `move || count.get()` + value=count + > + +
+ + // This progress bar will use `double_count` + // so it should move twice as fast! + + +

"Count: " {count}

+

"Double Count: " {double_count}

+ } +} + +fn main() { + leptos::mount_to_body(App) } ``` diff --git a/docs/book/src/view/03_components.md b/docs/book/src/view/03_components.md index 5e68218796..481e22c061 100644 --- a/docs/book/src/view/03_components.md +++ b/docs/book/src/view/03_components.md @@ -404,9 +404,9 @@ and see the power of the `#[component]` macro combined with rust-analyzer here. > In general, you should not need to use transparent components unless you are > creating custom wrapping components that fall into one of these two categories. -[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/3-components-50t2e7?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A7%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A7%7D%5D) +[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/3-components-0-5-5vvl69?file=%2Fsrc%2Fmain.rs%3A1%2C1) - +
CodeSandbox Source @@ -473,7 +473,7 @@ fn App() -> impl IntoView { } fn main() { - leptos::mount_to_body(|| view! { }) + leptos::mount_to_body(App) } ``` diff --git a/docs/book/src/view/04_iteration.md b/docs/book/src/view/04_iteration.md index 7884087c90..65f2e91950 100644 --- a/docs/book/src/view/04_iteration.md +++ b/docs/book/src/view/04_iteration.md @@ -86,7 +86,7 @@ keyed dynamic list. It takes three props: - `each`: a function (such as a signal) that returns the items `T` to be iterated over - `key`: a key function that takes `&T` and returns a stable, unique key or ID -- `view`: renders each `T` into a view +- `children`: renders each `T` into a view `key` is, well, the key. You can add, remove, and move items within the list. As long as each item’s key is stable over time, the framework does not need to rerender @@ -103,9 +103,9 @@ it is generated, and using that as an ID for the key function. Check out the `` component below for an example. -[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/4-iteration-sglt1o?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A6%2C%22endLineNumber%22%3A55%2C%22startColumn%22%3A5%2C%22startLineNumber%22%3A31%7D%5D) +[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/4-iteration-0-5-pwdn2y?file=%2Fsrc%2Fmain.rs%3A1%2C1) - +
CodeSandbox Source @@ -136,7 +136,6 @@ fn App() -> impl IntoView { /// to add or remove any. #[component] fn StaticList( - /// How many counters to include in this list. length: usize, ) -> impl IntoView { @@ -172,7 +171,6 @@ fn StaticList( /// remove counters. #[component] fn DynamicList( - /// The number of counters to begin with. initial_length: usize, ) -> impl IntoView { @@ -258,9 +256,8 @@ fn DynamicList( } fn main() { - leptos::mount_to_body(|| view! { }) + leptos::mount_to_body(App) } - ```
diff --git a/docs/book/src/view/05_forms.md b/docs/book/src/view/05_forms.md index 4da47cac21..2b7ac218ed 100644 --- a/docs/book/src/view/05_forms.md +++ b/docs/book/src/view/05_forms.md @@ -19,7 +19,7 @@ There are two important things to remember: 2. The `value` _attribute_ only sets the initial value of the input, i.e., it only updates the input up to the point that you begin typing. The `value` _property_ continues updating the input after that. You usually want to set - `prop:value` for this reason. (The same is true for `checked` and `prop:checked` + `prop:value` for this reason. (The same is true for `checked` and `prop:checked` on an ``.) ```rust @@ -44,28 +44,28 @@ view! { ``` > #### Why do you need `prop:value`? -> +> > Web browsers are the most ubiquitous and stable platform for rendering graphical user interfaces in existence. They have also maintained an incredible backwards compatibility over their three decades of existence. Inevitably, this means there are some quirks. -> +> > One odd quirk is that there is a distinction between HTML attributes and DOM element properties, i.e., between something called an “attribute” which is parsed from HTML and can be set on a DOM element with `.setAttribute()`, and something called a “property” which is a field of the JavaScript class representation of that parsed HTML element. > -> In the case of an ``, setting the `value` *attribute* is defined as setting the initial value for the input, and setting `value` *property* sets its current value. It maybe easiest to understand this by opening `about:blank` and running the following JavaScript in the browser console, line by line: -> +> In the case of an ``, setting the `value` _attribute_ is defined as setting the initial value for the input, and setting `value` _property_ sets its current value. It maybe easiest to understand this by opening `about:blank` and running the following JavaScript in the browser console, line by line: +> > ```js > // create an input and append it to the DOM -> const el = document.createElement("input") -> document.body.appendChild(el) -> -> el.setAttribute("value", "test") // updates the input -> el.setAttribute("value", "another test") // updates the input again -> +> const el = document.createElement("input"); +> document.body.appendChild(el); +> +> el.setAttribute("value", "test"); // updates the input +> el.setAttribute("value", "another test"); // updates the input again +> > // now go and type into the input: delete some characters, etc. -> -> el.setAttribute("value", "one more time?") +> +> el.setAttribute("value", "one more time?"); > // nothing should have changed. setting the "initial value" does nothing now -> +> > // however... -> el.value = "But this works" +> el.value = "But this works"; > ``` > > Many other frontend frameworks conflate attributes and properties, or create a special case for inputs that sets the value correctly. Maybe Leptos should do this too; but for now, I prefer giving users the maximum amount of control over whether they’re setting an attribute or a property, and doing my best to educate people about the actual underlying browser behavior rather than obscuring it. @@ -137,9 +137,9 @@ The view should be pretty self-explanatory by now. Note two things: 2. We use `node_ref` to fill the `NodeRef`. (Older examples sometimes use `_ref`. They are the same thing, but `node_ref` has better rust-analyzer support.) -[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/5-form-inputs-ih9m62?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A12%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A12%7D%5D) +[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/5-forms-0-5-rf2t7c?file=%2Fsrc%2Fmain.rs%3A1%2C1) - +
CodeSandbox Source @@ -242,9 +242,8 @@ fn UncontrolledComponent() -> impl IntoView { // Because we defined it as `fn App`, we can now use it in a // template as fn main() { - leptos::mount_to_body(|| view! { }) + leptos::mount_to_body(App) } - ```
diff --git a/docs/book/src/view/06_control_flow.md b/docs/book/src/view/06_control_flow.md index 3ae7efe455..b3f1af6e20 100644 --- a/docs/book/src/view/06_control_flow.md +++ b/docs/book/src/view/06_control_flow.md @@ -283,9 +283,9 @@ view! { } ``` -[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/6-control-flow-in-view-zttwfx?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A2%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A2%7D%5D) +[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/6-control-flow-0-5-4yn7qz?file=%2Fsrc%2Fmain.rs%3A1%2C1) - +
CodeSandbox Source @@ -376,9 +376,8 @@ fn App() -> impl IntoView { } fn main() { - leptos::mount_to_body(|| view! { }) + leptos::mount_to_body(App) } - ```
diff --git a/docs/book/src/view/07_errors.md b/docs/book/src/view/07_errors.md index e3b0884aad..375fcb469f 100644 --- a/docs/book/src/view/07_errors.md +++ b/docs/book/src/view/07_errors.md @@ -110,9 +110,9 @@ Not a number! Errors: If you fix the error, the error message will disappear and the content you’re wrapping in an `` will appear again. -[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/7-error-handling-and-error-boundaries-sroncx?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A2%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A2%7D%5D) +[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/7-errors-0-5-5mptv9?file=%2Fsrc%2Fmain.rs%3A1%2C1) - +
CodeSandbox Source @@ -167,9 +167,8 @@ fn App() -> impl IntoView { } fn main() { - leptos::mount_to_body(|| view! { }) + leptos::mount_to_body(App) } - ```
diff --git a/docs/book/src/view/08_parent_child.md b/docs/book/src/view/08_parent_child.md index 1550a2a501..b64b01d4a4 100644 --- a/docs/book/src/view/08_parent_child.md +++ b/docs/book/src/view/08_parent_child.md @@ -282,9 +282,9 @@ in `` and a single text node in ``. It’s as if the components themselves don’t exist at all. And, well... at runtime, they don’t. It’s just signals and effects, all the way down. -[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/8-parent-child-communication-84we8m?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A3%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A3%7D%5D) +[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/8-parent-child-0-5-7rz7qd?file=%2Fsrc%2Fmain.rs%3A1%2C2) - +
CodeSandbox Source @@ -318,7 +318,6 @@ pub fn App() -> impl IntoView { provide_context(SmallcapsContext(set_smallcaps)); view! { -

bool, and these signals all implement Fn() @@ -350,12 +349,10 @@ pub fn App() -> impl IntoView { /// Button A receives a signal setter and updates the signal itself #[component] pub fn ButtonA( - /// Signal that will be toggled when the button is clicked. setter: WriteSignal, ) -> impl IntoView { view! { - @@ -415,7 +409,6 @@ pub fn ButtonD() -> impl IntoView { let setter = use_context::().unwrap().0; view! { -

diff --git a/docs/book/src/view/09_component_children.md b/docs/book/src/view/09_component_children.md index 8bf8224058..4382bc3065 100644 --- a/docs/book/src/view/09_component_children.md +++ b/docs/book/src/view/09_component_children.md @@ -122,9 +122,9 @@ view! { } ``` -[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/9-component-children-2wrdfd?file=%2Fsrc%2Fmain.rs&selection=%5B%7B%22endColumn%22%3A12%2C%22endLineNumber%22%3A19%2C%22startColumn%22%3A12%2C%22startLineNumber%22%3A19%7D%5D) +[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/9-component-children-0-5-m4jwhp?file=%2Fsrc%2Fmain.rs%3A1%2C1) - +
CodeSandbox Source @@ -178,7 +178,6 @@ pub fn App() -> impl IntoView { /// Displays a `render_prop` and some children within markup. #[component] pub fn TakesChildren( - /// Takes a function (type F) that returns anything that can be /// converted into a View (type IV) render_prop: F, @@ -203,7 +202,7 @@ where /// Wraps each child in an `
  • ` and embeds them in a `
      `. #[component] -pub fn WrapsChildren(Children) -> impl IntoView { +pub fn WrapsChildren(children: Children) -> impl IntoView { // children() returns a `Fragment`, which has a // `nodes` field that contains a Vec // this means we can iterate over the children @@ -222,9 +221,8 @@ pub fn WrapsChildren(Children) -> impl IntoView { } fn main() { - leptos::mount_to_body(|| view! { }) + leptos::mount_to_body(App) } - ```