mirror of
https://github.com/leptos-rs/leptos
synced 2024-11-10 14:54:16 +00:00
Merge pull request #2511 from leptos-rs/simplify-stable
Simplify stable syntax in examples
This commit is contained in:
commit
454a4f4ccb
17 changed files with 47 additions and 34 deletions
|
@ -16,7 +16,7 @@ pub fn SimpleCounter(
|
|||
<div>
|
||||
<button on:click=move |_| set_value.set(0)>"Clear"</button>
|
||||
<button on:click=move |_| set_value.update(|value| *value -= step)>"-1"</button>
|
||||
<span>"Value: " {move || value.get()} "!"</span>
|
||||
<span>"Value: " {value} "!"</span>
|
||||
<button on:click=move |_| set_value.update(|value| *value += step)>"+1"</button>
|
||||
</div>
|
||||
}
|
||||
|
|
|
@ -63,7 +63,7 @@ pub fn Counters() -> impl IntoView {
|
|||
</p>
|
||||
<ul>
|
||||
<For
|
||||
each=move||counters.get()
|
||||
each=move || counters.get()
|
||||
key=|counter| counter.0
|
||||
children=move |(id, (value, set_value)): (usize, (ReadSignal<i32>, WriteSignal<i32>))| {
|
||||
view! {
|
||||
|
|
|
@ -11,7 +11,7 @@ pub fn error_template(errors: Option<RwSignal<Errors>>) -> View {
|
|||
<h1>"Errors"</h1>
|
||||
<For
|
||||
// a function that returns the items we're iterating over; a signal is fine
|
||||
each=move||errors.get()
|
||||
each=move || errors.get()
|
||||
// a unique key for each item as a reference
|
||||
key=|(key, _)| key.clone()
|
||||
// renders each item to a view
|
||||
|
|
|
@ -11,7 +11,7 @@ pub fn error_template(errors: Option<RwSignal<Errors>>) -> View {
|
|||
<h1>"Errors"</h1>
|
||||
<For
|
||||
// a function that returns the items we're iterating over; a signal is fine
|
||||
each=move||errors.get()
|
||||
each=move || errors.get()
|
||||
// a unique key for each item as a reference
|
||||
key=|(key, _)| key.clone()
|
||||
// renders each item to a view
|
||||
|
|
|
@ -92,7 +92,7 @@ pub fn Story() -> impl IntoView {
|
|||
pub fn Toggle(children: Children) -> impl IntoView {
|
||||
let (open, set_open) = create_signal(true);
|
||||
view! {
|
||||
<div class="toggle" class:open=move||open.get()>
|
||||
<div class="toggle" class:open=open>
|
||||
<a on:click=move |_| set_open.update(|n| *n = !*n)>
|
||||
{move || if open.get() {
|
||||
"[-]"
|
||||
|
|
|
@ -11,7 +11,7 @@ pub fn error_template(errors: Option<RwSignal<Errors>>) -> View {
|
|||
<h1>"Errors"</h1>
|
||||
<For
|
||||
// a function that returns the items we're iterating over; a signal is fine
|
||||
each=move||errors.get()
|
||||
each=move || errors.get()
|
||||
// a unique key for each item as a reference
|
||||
key=|(key, _)| key.clone()
|
||||
// renders each item to a view
|
||||
|
|
|
@ -83,7 +83,7 @@ pub fn Comment(comment: api::Comment) -> impl IntoView {
|
|||
{(!comment.comments.is_empty()).then(|| {
|
||||
view! {
|
||||
<div>
|
||||
<div class="toggle" class:open=move||open.get()>
|
||||
<div class="toggle" class:open=open>
|
||||
<a on:click=move |_| set_open.update(|n| *n = !*n)>
|
||||
{
|
||||
let comments_len = comment.comments.len();
|
||||
|
|
|
@ -166,7 +166,7 @@ pub fn App() -> impl IntoView {
|
|||
<table class="table table-hover table-striped test-data">
|
||||
<tbody>
|
||||
<For
|
||||
each=move||data.get()
|
||||
each=move || data.get()
|
||||
key={|row| row.id}
|
||||
children=move |row: RowData| {
|
||||
let row_id = row.id;
|
||||
|
@ -182,7 +182,7 @@ pub fn App() -> impl IntoView {
|
|||
template! {
|
||||
<tr class:danger={move || is_selected.selected(Some(row_id))}>
|
||||
<td class="col-md-1">{row_id.to_string()}</td>
|
||||
<td class="col-md-4"><a on:click=move |_| set_selected.set(Some(row_id))>{move || label.get()}</a></td>
|
||||
<td class="col-md-4"><a on:click=move |_| set_selected.set(Some(row_id))>{label}</a></td>
|
||||
<td class="col-md-1"><a on:click=move |_| remove(row_id)><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>
|
||||
<td class="col-md-6"/>
|
||||
</tr>
|
||||
|
|
|
@ -31,10 +31,10 @@ pub fn App() -> impl IntoView {
|
|||
<main>
|
||||
<p
|
||||
// class: attributes take F: Fn() => bool, and these signals all implement Fn()
|
||||
class:red=move||red.get()
|
||||
class:right=move||right.get()
|
||||
class:italics=move||italics.get()
|
||||
class:smallcaps=move||smallcaps.get()
|
||||
class:red=red
|
||||
class:right=right
|
||||
class:italics=italics
|
||||
class:smallcaps=smallcaps
|
||||
>
|
||||
"Lorem ipsum sit dolor amet."
|
||||
</p>
|
||||
|
|
|
@ -11,7 +11,7 @@ pub fn App() -> impl IntoView {
|
|||
Show Overlay
|
||||
</button>
|
||||
|
||||
<Show when=move||show_overlay.get() fallback=|| ()>
|
||||
<Show when=move || show_overlay.get() fallback=|| ()>
|
||||
<div>Show</div>
|
||||
<Portal mount=document().get_element_by_id("app").unwrap()>
|
||||
<div style="position: fixed; z-index: 10; width: 100vw; height: 100vh; top: 0; left: 0; background: rgba(0, 0, 0, 0.8); color: white;">
|
||||
|
@ -23,7 +23,7 @@ pub fn App() -> impl IntoView {
|
|||
Toggle inner
|
||||
</button>
|
||||
|
||||
<Show when=move||show_inside_overlay.get() fallback=|| view! { "Hidden" }>
|
||||
<Show when=move || show_inside_overlay.get() fallback=|| view! { "Hidden" }>
|
||||
Visible
|
||||
</Show>
|
||||
</div>
|
||||
|
|
|
@ -193,7 +193,7 @@ pub fn WithAnAction() -> impl IntoView {
|
|||
<p>You submitted: {move || format!("{:?}", action.input().get())}</p>
|
||||
<p>The result was: {move || format!("{:?}", action.value().get())}</p>
|
||||
<Transition>
|
||||
<p>Total rows: {move || row_count.get()}</p>
|
||||
<p>Total rows: {row_count}</p>
|
||||
</Transition>
|
||||
}
|
||||
}
|
||||
|
@ -227,7 +227,7 @@ pub fn WithActionForm() -> impl IntoView {
|
|||
<p>You submitted: {move || format!("{:?}", action.input().get())}</p>
|
||||
<p>The result was: {move || format!("{:?}", action.value().get())}</p>
|
||||
<Transition>archive underaligned: need alignment 4 but have alignment 1
|
||||
<p>Total rows: {move || row_count.get()}</p>
|
||||
<p>Total rows: {row_count}</p>
|
||||
</Transition>
|
||||
}
|
||||
}
|
||||
|
@ -285,7 +285,7 @@ pub fn ServerFnArgumentExample() -> impl IntoView {
|
|||
>
|
||||
Click to see length
|
||||
</button>
|
||||
<p>Length is {move||result.get()}</p>
|
||||
<p>Length is {result}</p>
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -313,8 +313,6 @@ pub fn RkyvExample() -> impl IntoView {
|
|||
|
||||
view! {
|
||||
<h3>Using <code>rkyv</code> encoding</h3>
|
||||
<p>
|
||||
</p>
|
||||
<input node_ref=input_ref placeholder="Type something here."/>
|
||||
<button
|
||||
on:click=move |_| {
|
||||
|
@ -324,9 +322,9 @@ pub fn RkyvExample() -> impl IntoView {
|
|||
>
|
||||
Click to capitalize
|
||||
</button>
|
||||
<p>{move||input.get()}</p>
|
||||
<p>{input}</p>
|
||||
<Transition>
|
||||
{move || rkyv_result.get()}
|
||||
{rkyv_result}
|
||||
</Transition>
|
||||
}
|
||||
}
|
||||
|
@ -797,7 +795,7 @@ pub fn CustomEncoding() -> impl IntoView {
|
|||
>
|
||||
Submit
|
||||
</button>
|
||||
<p>{move||result.get()}</p>
|
||||
<p>{result}</p>
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -49,7 +49,7 @@ pub fn App() -> impl IntoView {
|
|||
|
||||
view! {
|
||||
<button on:click=move |_| set_count.update(|value| *value += 1)>"+1"</button>
|
||||
" "{move||count.get()}" is "
|
||||
" "{count}" is "
|
||||
<SlotIf cond=is_even>
|
||||
// The slot name can be emitted if it would match the slot struct name (in snake case).
|
||||
<Then slot>"even"</Then>
|
||||
|
|
|
@ -129,7 +129,7 @@ pub fn App() -> impl IntoView {
|
|||
<Route path="" view=move || {
|
||||
view!{
|
||||
{display_email}
|
||||
<Show when=move||email.get().is_some() fallback=||view!{<SignIn/>}>
|
||||
<Show when=move || email.get().is_some() fallback=||view!{<SignIn/>}>
|
||||
<LogOut/>
|
||||
</Show>
|
||||
}
|
||||
|
|
|
@ -31,7 +31,7 @@ fn Home() -> impl IntoView {
|
|||
"+"
|
||||
</button>
|
||||
<button class="rounded px-3 py-2 m-1 border-b-4 border-l-2 shadow-lg bg-blue-800 border-blue-900 text-white">
|
||||
{move||value.get()}
|
||||
{value}
|
||||
</button>
|
||||
<button on:click=move |_| set_value.update(|value| *value -= 1) class="rounded px-3 py-2 m-1 border-b-4 border-l-2 shadow-lg bg-blue-700 border-blue-800 text-white">
|
||||
"-"
|
||||
|
|
|
@ -21,9 +21,9 @@ pub fn TimerDemo() -> impl IntoView {
|
|||
view! {
|
||||
<div>
|
||||
<div>"Count A (fixed interval of 1000 ms)"</div>
|
||||
<div>{move||count_a.get()}</div>
|
||||
<div>"Count B (dynamic interval, currently " {move||interval.get()} " ms)"</div>
|
||||
<div>{move||count_b.get()}</div>
|
||||
<div>{count_a}</div>
|
||||
<div>"Count B (dynamic interval, currently " {interval} " ms)"</div>
|
||||
<div>{count_b}</div>
|
||||
<input prop:value=interval on:input=move |ev| {
|
||||
if let Ok(value) = event_target_value(&ev).parse::<u64>() {
|
||||
set_interval.set(value);
|
||||
|
|
|
@ -300,14 +300,14 @@ pub fn Todo(todo: Todo) -> impl IntoView {
|
|||
<li
|
||||
class="todo"
|
||||
class:editing={editing}
|
||||
class:completed={move || todo.completed.get()}
|
||||
class:completed={todo.completed}
|
||||
>
|
||||
<div class="view">
|
||||
<input
|
||||
node_ref=todo_input
|
||||
class="toggle"
|
||||
type="checkbox"
|
||||
prop:checked={move || todo.completed.get()}
|
||||
prop:checked={todo.completed}
|
||||
on:input={move |ev| {
|
||||
let checked = event_target_checked(&ev);
|
||||
todo.completed.set(checked);
|
||||
|
@ -320,7 +320,7 @@ pub fn Todo(todo: Todo) -> impl IntoView {
|
|||
_ = input.focus();
|
||||
}
|
||||
}>
|
||||
{move || todo.title.get()}
|
||||
{todo.title}
|
||||
</label>
|
||||
<button class="destroy" on:click=move |_| set_todos.update(|t| t.remove(todo.id))/>
|
||||
</div>
|
||||
|
@ -328,7 +328,7 @@ pub fn Todo(todo: Todo) -> impl IntoView {
|
|||
<input
|
||||
class="edit"
|
||||
class:hidden={move || !editing.get()}
|
||||
prop:value={move || todo.title.get()}
|
||||
prop:value=todo.title
|
||||
on:focusout=move |ev: web_sys::FocusEvent| save(&event_target_value(&ev))
|
||||
on:keyup={move |ev: web_sys::KeyboardEvent| {
|
||||
let key_code = ev.key_code();
|
||||
|
|
|
@ -45,7 +45,8 @@ use html::{AnyElement, ElementDescriptor};
|
|||
pub use hydration::{HydrationCtx, HydrationKey};
|
||||
#[cfg(not(feature = "nightly"))]
|
||||
use leptos_reactive::{
|
||||
MaybeProp, MaybeSignal, Memo, ReadSignal, RwSignal, Signal, SignalGet,
|
||||
MaybeProp, MaybeSignal, Memo, ReadSignal, Resource, RwSignal, Signal,
|
||||
SignalGet,
|
||||
};
|
||||
use leptos_reactive::{Oco, TextProp};
|
||||
pub use macro_helpers::*;
|
||||
|
@ -207,6 +208,20 @@ where
|
|||
}
|
||||
}
|
||||
#[cfg(not(feature = "nightly"))]
|
||||
impl<S, T> IntoView for Resource<S, T>
|
||||
where
|
||||
S: Clone,
|
||||
T: IntoView + Clone,
|
||||
{
|
||||
#[cfg_attr(
|
||||
any(debug_assertions, feature = "ssr"),
|
||||
instrument(level = "trace", name = "Signal<T>", skip_all)
|
||||
)]
|
||||
fn into_view(self) -> View {
|
||||
DynChild::new(move || self.get()).into_view()
|
||||
}
|
||||
}
|
||||
#[cfg(not(feature = "nightly"))]
|
||||
impl<T> IntoView for MaybeSignal<T>
|
||||
where
|
||||
T: IntoView + Clone,
|
||||
|
|
Loading…
Reference in a new issue