adam/leptos-use
1
0
Fork 0
mirror of https://github.com/adoyle0/leptos-use.git synced 2025-01-23 09:09:21 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Allow users to use the stable toolchain

Browse source
This commit is contained in:
Lukas Potthast 2023-06-21 13:09:00 +02:00
parent 661356d78f
commit b5ddeeda97
87 changed files with 203 additions and 214 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.vscode/settings.json vendored Normal file
View file

@ -0,0 +1,5 @@
{
"rust-analyzer.linkedProjects": [
"./examples/use_element_size/Cargo.toml"
]
}

3
Cargo.toml
View file

@ -12,9 +12,8 @@ readme = "README.md"
repository = "https://github.com/Synphonyte/leptos-use"
homepage = "https://leptos-use.rs"
[dependencies]
leptos = "0.3.0"
leptos = { version = "0.3", features = ["stable"] }
wasm-bindgen = "0.2.86"
js-sys = "0.3.63"
default-struct-builder = "0.2.1"

2
examples/on_click_outside/rust-toolchain.toml
View file

@ -1,2 +1,2 @@
[toolchain]
channel = "nightly"
channel = "stable"

8
examples/on_click_outside/src/main.rs
View file

@ -7,15 +7,15 @@ fn Demo(cx: Scope) -> impl IntoView {
let (show_modal, set_show_modal) = create_signal(cx, false);
let modal_ref = create_node_ref(cx);
let _ = on_click_outside(cx, modal_ref, move |_| set_show_modal(false));
let _ = on_click_outside(cx, modal_ref, move |_| set_show_modal.set(false));
view! { cx,
<button on:click=move |_| set_show_modal(true)>"Open Modal"</button>
<button on:click=move |_| set_show_modal.set(true)>"Open Modal"</button>
<Show when=show_modal fallback=|_| view! { cx, }>
<Show when=move || show_modal.get() fallback=|_| ()>
<div node_ref=modal_ref class="modal">
<div class="inner">
<button class="button small" title="Close" on:click=move |_| set_show_modal(false)>"𝖷"</button>
<button class="button small" title="Close" on:click=move |_| set_show_modal.set(false)>"𝖷"</button>
<p class="heading">"Demo Modal"</p>
<p>"Click outside this modal to close it."</p>
</div>

2
examples/use_abs/rust-toolchain.toml
View file

@ -1,2 +1,2 @@
[toolchain]
channel = "nightly"
channel = "stable"

8
examples/use_abs/src/main.rs
View file

@ -11,15 +11,15 @@ fn Demo(cx: Scope) -> impl IntoView {
view! { cx,
<input
class="block"
prop:value=value
on:input=move |e| set_value(event_target_value(&e).parse().unwrap())
prop:value=move || value.get()
on:input=move |e| set_value.set(event_target_value(&e).parse().unwrap())
type="range"
min="-30"
max="10"
step="0.1"
/>
<p>"Value: " {value}</p>
<p>"Absolute: " {result}</p>
<p>"Value: " {move || value.get()}</p>
<p>"Absolute: " {move || result.get()}</p>
}
}

2
examples/use_active_element/rust-toolchain.toml
View file

@ -1,2 +1,2 @@
[toolchain]
channel = "nightly"
channel = "stable"

2
examples/use_active_element/src/main.rs
View file

@ -8,7 +8,7 @@ fn Demo(cx: Scope) -> impl IntoView {
let key = move || {
format!(
"{:?}",
active_element()
active_element.get()
.map(|el| el.dataset().get("id"))
.unwrap_or_default()
)

2
examples/use_breakpoints/rust-toolchain.toml
View file

@ -1,2 +1,2 @@
[toolchain]
channel = "nightly"
channel = "stable"

2
examples/use_ceil/rust-toolchain.toml
View file

@ -1,2 +1,2 @@
[toolchain]
channel = "nightly"
channel = "stable"

8
examples/use_ceil/src/main.rs
View file

@ -11,15 +11,15 @@ fn Demo(cx: Scope) -> impl IntoView {
view! { cx,
<input
class="block"
prop:value=value
on:input=move |e| set_value(event_target_value(&e).parse().unwrap())
prop:value=move || value.get()
on:input=move |e| set_value.set(event_target_value(&e).parse().unwrap())
type="range"
min="0"
max="10"
step="0.01"
/>
<p>"Value: " {value}</p>
<p>"Ceiled: " {result}</p>
<p>"Value: " {move || value.get()}</p>
<p>"Ceiled: " {move || result.get()}</p>
}
}

2
examples/use_css_var/rust-toolchain.toml
View file

@ -1,2 +1,2 @@
[toolchain]
channel = "nightly"
channel = "stable"

14
examples/use_css_var/src/main.rs
View file

@ -8,10 +8,10 @@ fn Demo(cx: Scope) -> impl IntoView {
let (color, set_color) =
use_css_var_with_options(cx, "--color", UseCssVarOptions::default().target(el));
let switch_color = move |_| {
if color() == "#df8543" {
set_color("#7fa998".to_string());
if color.get() == "#df8543" {
set_color.set("#7fa998".to_string());
} else {
set_color("#df8543".to_string());
set_color.set("#df8543".to_string());
}
};
@ -19,16 +19,16 @@ fn Demo(cx: Scope) -> impl IntoView {
let (key, set_key) = create_signal(cx, "--color".to_string());
let (color_val, _) = use_css_var_with_options(cx, key, UseCssVarOptions::default().target(elv));
let change_var = move |_| {
if key() == "--color" {
set_key("--color-one".to_string());
if key.get() == "--color" {
set_key.set("--color-one".to_string());
} else {
set_key("--color".to_string());
set_key.set("--color".to_string());
}
};
let style = move || {
format!(
"--color: #7fa998; --color-one: #df8543; color: {}",
color_val()
color_val.get()
)
};

2
examples/use_debounce_fn/rust-toolchain.toml
View file

@ -1,2 +1,2 @@
[toolchain]
channel = "nightly"
channel = "stable"

4
examples/use_debounce_fn/src/main.rs
View file

@ -8,7 +8,7 @@ fn Demo(cx: Scope) -> impl IntoView {
let (debounced_count, set_debounced_count) = create_signal(cx, 0);
let debounced_fn = use_debounce_fn_with_options(
move || set_debounced_count(debounced_count() + 1),
move || set_debounced_count.set(debounced_count.get_untracked() + 1),
1000.0,
DebounceOptions::default().max_wait(Some(5000.0)),
);
@ -16,7 +16,7 @@ fn Demo(cx: Scope) -> impl IntoView {
view! { cx,
<button
on:click=move |_| {
set_click_count(click_count() + 1);
set_click_count.set(click_count.get_untracked() + 1);
debounced_fn();
}
>

2
examples/use_element_hover/rust-toolchain.toml
View file

@ -1,2 +1,2 @@
[toolchain]
channel = "nightly"
channel = "stable"

2
examples/use_element_hover/src/main.rs
View file

@ -15,7 +15,7 @@ fn Demo(cx: Scope) -> impl IntoView {
);
view! { cx,
<button node_ref=el>{ move || if is_hovered() { "Thank you!" } else { "Hover me" } }</button>
<button node_ref=el>{ move || if is_hovered.get() { "Thank you!" } else { "Hover me" } }</button>
}
}

2
examples/use_element_size/Cargo.toml
View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
leptos = "0.3"
leptos = { version = "0.3", features = ["stable"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"

2
examples/use_element_size/rust-toolchain.toml
View file

@ -1,2 +1,2 @@
[toolchain]
channel = "nightly"
channel = "stable"

2
examples/use_element_visibility/rust-toolchain.toml
View file

@ -1,2 +1,2 @@
[toolchain]
channel = "nightly"
channel = "stable"

2
examples/use_event_listener/rust-toolchain.toml
View file

@ -1,2 +1,2 @@
[toolchain]
channel = "nightly"
channel = "stable"

6
examples/use_event_listener/src/main.rs
View file

@ -26,14 +26,14 @@ fn Demo(cx: Scope) -> impl IntoView {
<p>
<label>
<input
type="checkbox" on:change=move |evt| set_cond(event_target_checked(&evt))
prop:checked=cond
type="checkbox" on:change=move |evt| set_cond.set(event_target_checked(&evt))
prop:checked=move || cond.get()
/>
"Condition enabled"
</label>
</p>
<Show
when=move || cond()
when=move || cond.get()
fallback=move |cx| view! { cx,
<a node_ref=element href="#">
"Condition"

2
examples/use_favicon/rust-toolchain.toml
View file

@ -1,2 +1,2 @@
[toolchain]
channel = "nightly"
channel = "stable"

10
examples/use_favicon/src/main.rs
View file

@ -17,35 +17,35 @@ fn Demo(cx: Scope) -> impl IntoView {
<p class="flex gap-2">
<a class=classes.clone() href="#" on:click=move |e| {
e.prevent_default();
set_icon(Some("favicon-leptos.ico".into()));
set_icon.set(Some("favicon-leptos.ico".into()));
}>
<img class=img_classes.clone() width="32" src="use_favicon/demo/img/favicon-leptos.ico" alt="favicon-red" />
</a>
<a class=classes.clone() href="#" on:click=move |e| {
e.prevent_default();
set_icon(Some("favicon-red.svg".into()));
set_icon.set(Some("favicon-red.svg".into()));
}>
<img class=img_classes.clone() width="32" src="use_favicon/demo/img/favicon-red.svg" alt="favicon-red" />
</a>
<a class=classes.clone() href="#" on:click=move |e| {
e.prevent_default();
set_icon(Some("favicon-green.svg".into()));
set_icon.set(Some("favicon-green.svg".into()));
}>
<img class=img_classes.clone() width="32" src="use_favicon/demo/img/favicon-green.svg" alt="favicon-green" />
</a>
<a class=classes.clone() href="#" on:click=move |e| {
e.prevent_default();
set_icon(Some("favicon-blue.svg".into()));
set_icon.set(Some("favicon-blue.svg".into()));
}>
<img class=img_classes.clone() width="32" src="use_favicon/demo/img/favicon-blue.svg" alt="favicon-blue" />
</a>
<a class=classes.clone() href="#" on:click=move |e| {
e.prevent_default();
set_icon(Some("favicon-orange.svg".into()));
set_icon.set(Some("favicon-orange.svg".into()));
}>
<img class=img_classes width="32" src="use_favicon/demo/img/favicon-orange.svg" alt="favicon-orange" />
</a>

2
examples/use_floor/rust-toolchain.toml
View file

@ -1,2 +1,2 @@
[toolchain]
channel = "nightly"
channel = "stable"

8
examples/use_floor/src/main.rs
View file

@ -11,15 +11,15 @@ fn Demo(cx: Scope) -> impl IntoView {
view! { cx,
<input
class="block"
prop:value=value
on:input=move |e| set_value(event_target_value(&e).parse().unwrap())
prop:value=move || value.get()
on:input=move |e| set_value.set(event_target_value(&e).parse().unwrap())
type="range"
min="0"
max="10"
step="0.01"
/>
<p>"Value: " {value}</p>
<p>"Floored: " {result}</p>
<p>"Value: " {move || value.get()}</p>
<p>"Floored: " {move || result.get()}</p>
}
}

2
examples/use_intersection_observer/rust-toolchain.toml
View file

@ -1,2 +1,2 @@
[toolchain]
channel = "nightly"
channel = "stable"

4
examples/use_intersection_observer/src/main.rs
View file

@ -20,7 +20,7 @@ fn Demo(cx: Scope) -> impl IntoView {
cx,
target,
move |entries, _| {
set_visible(entries[0].is_intersecting());
set_visible.set(entries[0].is_intersecting());
},
UseIntersectionObserverOptions::default().root(Some(root)),
);
@ -30,7 +30,7 @@ fn Demo(cx: Scope) -> impl IntoView {
<label class="checkbox">
<input
type="checkbox"
prop:checked=is_active
prop:checked=move || is_active.get()
name="enabled"
on:input=move |e| {
if event_target_checked(&e) {

2
examples/use_interval/rust-toolchain.toml
View file

@ -1,2 +1,2 @@
[toolchain]
channel = "nightly"
channel = "stable"

2
examples/use_interval_fn/rust-toolchain.toml
View file

@ -1,2 +1,2 @@
[toolchain]
channel = "nightly"
channel = "stable"

12
examples/use_interval_fn/src/main.rs
View file

@ -29,25 +29,25 @@ fn Demo(cx: Scope) -> impl IntoView {
} = use_interval_fn(
cx,
move || {
set_index((index.get() + 1) % greetings.len());
set_word(greetings[index.get()]);
set_index.set((index.get() + 1) % greetings.len());
set_word.set(greetings[index.get()]);
},
interval,
);
view! { cx,
<p>{word}</p>
<p>{move || word.get()}</p>
<p>
"Interval:"
<input
prop:value=interval
on:input=move |e| set_interval(event_target_value(&e).parse().unwrap())
prop:value=move || interval.get()
on:input=move |e| set_interval.set(event_target_value(&e).parse().unwrap())
type="number"
placeholder="interval"
/>
</p>
<Show
when=is_active
when=move || is_active.get()
fallback=move |cx| {
let resume = resume.clone();
view! {cx,

2
examples/use_media_query/rust-toolchain.toml
View file

@ -1,2 +1,2 @@
[toolchain]
channel = "nightly"
channel = "stable"

2
examples/use_mouse/rust-toolchain.toml
View file

@ -1,2 +1,2 @@
[toolchain]
channel = "nightly"
channel = "stable"

2
examples/use_mutation_observer/rust-toolchain.toml
View file

@ -1,2 +1,2 @@
[toolchain]
channel = "nightly"
channel = "stable"

8
examples/use_mutation_observer/src/main.rs
View file

@ -28,14 +28,14 @@ fn Demo(cx: Scope) -> impl IntoView {
let _ = set_timeout_with_handle(
move || {
set_class_name("test test2".to_string());
set_class_name.set("test test2".to_string());
},
Duration::from_millis(1000),
);
let _ = set_timeout_with_handle(
move || {
set_style("color: red;".to_string());
set_style.set("color: red;".to_string());
},
Duration::from_millis(1550),
);
@ -45,9 +45,9 @@ fn Demo(cx: Scope) -> impl IntoView {
});
view! { cx,
<div node_ref=el class=class_name style=style>
<div node_ref=el class=move || class_name.get() style=move || style.get()>
<For
each=enum_msgs
each=move || enum_msgs.get()
key=|message| message.0 // list only grows so this is fine here
view=|cx, message| view! { cx, <div>"Mutation Attribute: " <code>{message.1}</code></div> }
/>

2
examples/use_resize_observer/rust-toolchain.toml
View file

@ -1,2 +1,2 @@
[toolchain]
channel = "nightly"
channel = "stable"

4
examples/use_resize_observer/src/main.rs
View file

@ -9,7 +9,7 @@ fn Demo(cx: Scope) -> impl IntoView {
use_resize_observer(cx, el, move |entries, _| {
let rect = entries[0].content_rect();
set_text(format!(
set_text.set(format!(
"width: {:.0}\nheight: {:.0}",
rect.width(),
rect.height()
@ -22,7 +22,7 @@ fn Demo(cx: Scope) -> impl IntoView {
node_ref=el
readonly
class="resize rounded-md p-4 w-[200px] h-[100px] text-2xl leading-10"
prop:value=text
prop:value=move || text.get()
/>
}
}

2
examples/use_round/rust-toolchain.toml
View file

@ -1,2 +1,2 @@
[toolchain]
channel = "nightly"
channel = "stable"

8
examples/use_round/src/main.rs
View file

@ -11,15 +11,15 @@ fn Demo(cx: Scope) -> impl IntoView {
view! { cx,
<input
class="block"
prop:value=value
on:input=move |e| set_value(event_target_value(&e).parse().unwrap())
prop:value=move || value.get()
on:input=move |e| set_value.set(event_target_value(&e).parse().unwrap())
type="range"
min="0"
max="10"
step="0.01"
/>
<p>"Value: " {value}</p>
<p>"Rounded: " {result}</p>
<p>"Value: " {move|| value.get()}</p>
<p>"Rounded: " {move || result.get()}</p>
}
}

2
examples/use_scroll/rust-toolchain.toml
View file

@ -1,2 +1,2 @@
[toolchain]
channel = "nightly"
channel = "stable"

26
examples/use_scroll/src/main.rs
View file

@ -7,7 +7,7 @@ fn Demo(cx: Scope) -> impl IntoView {
let el = create_node_ref(cx);
let (smooth, set_smooth) = create_signal(cx, false);
let behavior = Signal::derive(cx, move || {
if smooth() {
if smooth.get() {
ScrollBehavior::Smooth
} else {
ScrollBehavior::Auto
@ -56,7 +56,7 @@ fn Demo(cx: Scope) -> impl IntoView {
<div class="text-primary">
<div>
<input
prop:value=move || format!("{:.1}", x())
prop:value=move || format!("{:.1}", x.get())
on:input=move |e| {
if let Ok(num) = event_target_value(&e).parse::<f64>() {
set_x(num);
@ -75,7 +75,7 @@ fn Demo(cx: Scope) -> impl IntoView {
<div class="text-primary">
<div>
<input
prop:value=move || format!("{:.1}", y())
prop:value=move || format!("{:.1}", y.get())
on:input=move |e| {
if let Ok(num) = event_target_value(&e).parse::<f64>() {
set_y(num);
@ -94,8 +94,8 @@ fn Demo(cx: Scope) -> impl IntoView {
<span>
<input
id="smooth-scrolling-option"
prop:checked=smooth
on:input=move |e| set_smooth(event_target_checked(&e))
prop:checked=move || smooth.get()
on:input=move |e| set_smooth.set(event_target_checked(&e))
type="checkbox"
/>
</span>
@ -106,35 +106,35 @@ fn Demo(cx: Scope) -> impl IntoView {
<div class="text-right opacity-75">
"Top Arrived"
</div>
<BooleanDisplay value=Signal::derive(cx, move || arrived_state().top) />
<BooleanDisplay value=Signal::derive(cx, move || arrived_state.get().top) />
<div class="text-right opacity-75">
"Right Arrived"
</div>
<BooleanDisplay value=Signal::derive(cx, move || arrived_state().right) />
<BooleanDisplay value=Signal::derive(cx, move || arrived_state.get().right) />
<div class="text-right opacity-75">
"Bottom Arrived"
</div>
<BooleanDisplay value=Signal::derive(cx, move || arrived_state().bottom) />
<BooleanDisplay value=Signal::derive(cx, move || arrived_state.get().bottom) />
<div class="text-right opacity-75">
"Left Arrived"
</div>
<BooleanDisplay value=Signal::derive(cx, move || arrived_state().left) />
<BooleanDisplay value=Signal::derive(cx, move || arrived_state.get().left) />
<div class="text-right opacity-75">
"Scrolling Up"
</div>
<BooleanDisplay value=Signal::derive(cx, move || directions().top) />
<BooleanDisplay value=Signal::derive(cx, move || directions.get().top) />
<div class="text-right opacity-75">
"Scrolling Right"
</div>
<BooleanDisplay value=Signal::derive(cx, move || directions().right) />
<BooleanDisplay value=Signal::derive(cx, move || directions.get().right) />
<div class="text-right opacity-75">
"Scrolling Down"
</div>
<BooleanDisplay value=Signal::derive(cx, move || directions().bottom) />
<BooleanDisplay value=Signal::derive(cx, move || directions.get().bottom) />
<div class="text-right opacity-75">
"Scrolling Left"
</div>
<BooleanDisplay value=Signal::derive(cx, move || directions().left) />
<BooleanDisplay value=Signal::derive(cx, move || directions.get().left) />
</div>
</div>
</div>

2
examples/use_storage/rust-toolchain.toml
View file

@ -1,2 +1,2 @@
[toolchain]
channel = "nightly"
channel = "stable"

12
examples/use_storage/src/main.rs
View file

@ -27,26 +27,26 @@ fn Demo(cx: Scope) -> impl IntoView {
view! { cx,
<input
class="block"
prop:value=move || state().name
prop:value=move || state.get().name
on:input=move |e| set_state.update(|s| s.name = event_target_value(&e))
type="text"
/>
<input
class="block"
prop:value=move || state().color
prop:value=move || state.get().color
on:input=move |e| set_state.update(|s| s.color = event_target_value(&e))
type="text"
/>
<input
class="block"
prop:value=move || state().size
prop:value=move || state.get().size
on:input=move |e| set_state.update(|s| s.size = event_target_value(&e))
type="text"
/>
<input
class="block"
prop:value=move || state().count
value=move || state().count
prop:value=move || state.get().count
value=move || state.get().count
on:input=move |e| set_state.update(|s| s.count = event_target_value(&e).parse::<f64>().unwrap() as u32)
type="number"
min="0"
@ -57,7 +57,7 @@ fn Demo(cx: Scope) -> impl IntoView {
<p>"Second "<b><code>"use_storage"</code></b>":"</p>
<pre>
{ move || format!("{:#?}", state2()) }
{ move || format!("{:#?}", state2.get()) }
</pre>
<Note>"The values are persistant. When you reload the page the values will be the same."</Note>

2
examples/use_throttle_fn/rust-toolchain.toml
View file

@ -1,2 +1,2 @@
[toolchain]
channel = "nightly"
channel = "stable"

4
examples/use_throttle_fn/src/main.rs
View file

@ -7,12 +7,12 @@ fn Demo(cx: Scope) -> impl IntoView {
let (click_count, set_click_count) = create_signal(cx, 0);
let (throttled_count, set_throttled_count) = create_signal(cx, 0);
let throttled_fn = use_throttle_fn(move || set_throttled_count(throttled_count() + 1), 1000.0);
let throttled_fn = use_throttle_fn(move || set_throttled_count.set(throttled_count.get_untracked() + 1), 1000.0);
view! { cx,
<button
on:click=move |_| {
set_click_count(click_count() + 1);
set_click_count.set(click_count.get_untracked() + 1);
throttled_fn();
}
>

2
examples/watch_debounced/rust-toolchain.toml
View file

@ -1,2 +1,2 @@
[toolchain]
channel = "nightly"
channel = "stable"

6
examples/watch_debounced/src/main.rs
View file

@ -9,7 +9,7 @@ fn Demo(cx: Scope) -> impl IntoView {
let _ = watch_debounced_with_options(
cx,
input,
move || input.get(),
move |_, _, _| {
set_updated.update(|x| *x += 1);
},
@ -20,8 +20,8 @@ fn Demo(cx: Scope) -> impl IntoView {
view! { cx,
<input
class="block"
prop:value=input
on:input=move |e| set_input(event_target_value(&e))
prop:value=move || input.get()
on:input=move |e| set_input.set(event_target_value(&e))
placeholder="Try to type anything..."
type="text"
/>

2
examples/watch_pausable/rust-toolchain.toml
View file

@ -1,2 +1,2 @@
[toolchain]
channel = "nightly"
channel = "stable"

12
examples/watch_pausable/src/main.rs
View file

@ -13,11 +13,11 @@ fn Demo(cx: Scope) -> impl IntoView {
resume,
is_active,
..
} = watch_pausable(cx, source, move |v, _, _| {
} = watch_pausable(cx, move || source.get(), move |v, _, _| {
set_log.update(|log| *log = format!("{log}Changed to \"{v}\"\n"));
});
let clear = move |_| set_log("".to_string());
let clear = move |_| set_log.set("".to_string());
let pause = move |_| {
set_log.update(|log| *log = format!("{log}Paused\n"));
@ -34,13 +34,13 @@ fn Demo(cx: Scope) -> impl IntoView {
<input
node_ref=input
class="block"
prop:value=source
on:input=move |e| set_source(event_target_value(&e))
prop:value=move || source.get()
on:input=move |e| set_source.set(event_target_value(&e))
type="text"
/>
<p>"Value: " {source}</p>
<button prop:disabled=move || !is_active() class="orange" on:click=pause>"Pause"</button>
<button prop:disabled=is_active on:click=resume>"Resume"</button>
<button prop:disabled=move || !is_active.get() class="orange" on:click=pause>"Pause"</button>
<button prop:disabled=move || is_active.get() on:click=resume>"Resume"</button>
<button on:click=clear>"Clear Log"</button>
<br />
<br />

2
examples/watch_throttled/rust-toolchain.toml
View file

@ -1,2 +1,2 @@
[toolchain]
channel = "nightly"
channel = "stable"

6
examples/watch_throttled/src/main.rs
View file

@ -9,7 +9,7 @@ fn Demo(cx: Scope) -> impl IntoView {
let _ = watch_throttled(
cx,
input,
move || input.get(),
move |_, _, _| {
set_updated.update(|x| *x += 1);
},
@ -19,8 +19,8 @@ fn Demo(cx: Scope) -> impl IntoView {
view! { cx,
<input
class="block"
prop:value=input
on:input=move |e| set_input(event_target_value(&e))
prop:value=move || input.get()
on:input=move |e| set_input.set(event_target_value(&e))
placeholder="Try to type anything..."
type="text"
/>

2
rust-toolchain.toml
View file

@ -1,2 +1,2 @@
[toolchain]
channel = "nightly"
channel = "stable"

2
src/docs/boolean_display.rs
View file

@ -21,7 +21,7 @@ pub fn BooleanDisplay(
view! { cx,
<span class=class>
{ move || if value() { true_str} else { false_str } }
{ move || if value.get() { true_str} else { false_str } }
</span>
}
}

2
src/docs/mod.rs
View file

@ -1,4 +1,4 @@
#![doc(cfg(feature = "docs"))]
//#![doc(cfg(feature = "docs"))]
//! Collection of documentation related utilities. Used extensively in the examples.
mod boolean_display;

2
src/lib.rs
View file

@ -1,4 +1,4 @@
#![feature(doc_cfg)]
//#![feature(doc_cfg)]
//! Collection of essential Leptos utilities inspired by SolidJS USE / VueUse
pub mod core;

1
src/math/mod.rs
View file

@ -1,4 +1,3 @@
#![doc(cfg(feature = "math"))]
//! Collection of reactive math functions
mod shared;

1
src/math/use_abs.rs
View file

@ -25,6 +25,5 @@ use_simple_math!(
/// # view! { cx, }
/// # }
/// ```
#[doc(cfg(feature = "math"))]
abs
);

1
src/math/use_ceil.rs
View file

@ -25,6 +25,5 @@ use_simple_math!(
/// # view! { cx, }
/// # }
/// ```
#[doc(cfg(feature = "math"))]
ceil
);

1
src/math/use_floor.rs
View file

@ -25,6 +25,5 @@ use_simple_math!(
/// # view! { cx, }
/// # }
/// ```
#[doc(cfg(feature = "math"))]
floor
);

1
src/math/use_max.rs
View file

@ -26,7 +26,6 @@ use_partial_cmp!(
/// # view! { cx, }
/// # }
/// ```
#[doc(cfg(feature = "math"))]
use_max,
Ordering::Less
);

1
src/math/use_min.rs
View file

@ -26,7 +26,6 @@ use_partial_cmp!(
/// # view! { cx, }
/// # }
/// ```
#[doc(cfg(feature = "math"))]
use_min,
Ordering::Greater
);

1
src/math/use_round.rs
View file

@ -25,6 +25,5 @@ use_simple_math!(
/// # view! { cx, }
/// # }
/// ```
#[doc(cfg(feature = "math"))]
round
);

1
src/storage/shared.rs
View file

@ -49,7 +49,6 @@ macro_rules! use_specific_storage {
pub(crate) use use_specific_storage;
/// Options for [`use_local_storage_with_options`].
#[doc(cfg(feature = "storage"))]
#[derive(DefaultBuilder)]
pub struct UseSpecificStorageOptions<T> {
/// Listen to changes to this storage key from somewhere else. Defaults to true.

1
src/storage/use_local_storage.rs
View file

@ -15,7 +15,6 @@ use_specific_storage!(
///
/// * [`use_storage`]
/// * [`use_session_storage`]
#[doc(cfg(feature = "storage"))]
local
/// [`use_local_storage`]
);

1
src/storage/use_session_storage.rs
View file

@ -15,7 +15,6 @@ use_specific_storage!(
///
/// * [`use_storage`]
/// * [`use_local_storage`]
#[doc(cfg(feature = "storage"))]
session
/// [`use_session_storage`]
);

11
src/storage/use_storage.rs
View file

@ -146,7 +146,6 @@ const CUSTOM_STORAGE_EVENT_NAME: &str = "leptos-use-storage";
///
/// * [`use_local_storage`]
/// * [`use_session_storage`]
#[doc(cfg(feature = "storage"))]
pub fn use_storage<T, D>(
cx: Scope,
key: &str,
@ -161,7 +160,6 @@ where
}
/// Version of [`use_storage`] that accepts [`UseStorageOptions`]. See [`use_storage`] for how to use.
#[doc(cfg(feature = "storage"))]
pub fn use_storage_with_options<T, D>(
cx: Scope,
key: &str,
@ -295,7 +293,7 @@ where
..
} = watch_pausable_with_options(
cx,
data,
move || data.get(),
move |data, _, _| write.clone()(data),
WatchOptions::default().filter(filter),
);
@ -311,7 +309,7 @@ where
match &event_detail.key {
None => {
set_data(defaults.get_untracked());
set_data.set(defaults.get_untracked());
return;
}
Some(event_key) => {
@ -325,7 +323,7 @@ where
pause_watch();
if let Some(value) = read(event_detail.clone()) {
set_data(value);
set_data.set(value);
}
if event_detail.is_some() {
@ -429,7 +427,6 @@ fn get_optional_string(v: &JsValue, key: &str) -> Option<String> {
}
/// Error type for use_storage_with_options
#[doc(cfg(feature = "storage"))]
pub enum UseStorageError<E = ()> {
NoStorage(JsValue),
StorageAccessError(JsValue),
@ -439,7 +436,6 @@ pub enum UseStorageError<E = ()> {
}
/// Options for [`use_storage_with_options`].
#[doc(cfg(feature = "storage"))]
#[derive(DefaultBuilder)]
pub struct UseStorageOptions<T> {
/// Type of storage. Can be `Local` (default), `Session` or `Custom(web_sys::Storage)`
@ -480,7 +476,6 @@ impl<T> UseStorageOptions<T> {
}
/// Local or session storage or a custom store that is a `web_sys::Storage`.
#[doc(cfg(feature = "storage"))]
#[derive(Default)]
pub enum StorageType {
#[default]

2
src/use_active_element.rs
View file

@ -21,7 +21,7 @@ use web_sys::AddEventListenerOptions;
/// let active_element = use_active_element(cx);
///
/// create_effect(cx, move |_| {
/// log!("focus changed to {:?}", active_element());
/// log!("focus changed to {:?}", active_element.get());
/// });
/// #
/// # view! { cx, }

4
src/use_css_var.rs
View file

@ -22,7 +22,7 @@ use wasm_bindgen::{JsCast, JsValue};
/// # fn Demo(cx: Scope) -> impl IntoView {
/// let (color, set_color) = use_css_var(cx, "--color");
///
/// set_color("red".to_string());
/// set_color.set("red".to_string());
/// #
/// # view! { cx, }
/// # }
@ -152,7 +152,7 @@ where
);
}
let _ = watch(cx, variable, move |val, _, _| {
let _ = watch(cx, move || variable.get(), move |val, _, _| {
if let Some(el) = el_signal.get() {
let el = el.into().unchecked_into::<web_sys::HtmlElement>();
let style = el.style();

6
src/use_element_hover.rs
View file

@ -25,7 +25,7 @@ use web_sys::AddEventListenerOptions;
/// let is_hovered = use_element_hover(cx, el);
///
/// view! { cx,
/// <button node_ref=el>{ move || format!("{:?}", is_hovered()) }</button>
/// <button node_ref=el>{ move || format!("{:?}", is_hovered.get()) }</button>
/// }
/// # }
/// ```
@ -69,12 +69,12 @@ where
if delay > 0 {
timer = set_timeout_with_handle(
move || set_hovered(entering),
move || set_hovered.set(entering),
Duration::from_millis(delay),
)
.ok();
} else {
set_hovered(entering);
set_hovered.set(entering);
}
};

20
src/use_element_size.rs
View file

@ -108,13 +108,13 @@ where
if is_svg() {
if let Some(target) = target.get() {
if let Ok(Some(styles)) = window.get_computed_style(&target.into()) {
set_height(
set_height.set(
styles
.get_property_value("height")
.map(|v| v.parse().unwrap_or_default())
.unwrap_or_default(),
);
set_width(
set_width.set(
styles
.get_property_value("width")
.map(|v| v.parse().unwrap_or_default())
@ -129,16 +129,16 @@ where
vec![box_size.into()]
};
set_width(format_box_size.iter().fold(0.0, |acc, v| {
set_width.set(format_box_size.iter().fold(0.0, |acc, v| {
acc + v.as_ref().clone().unchecked_into::<BoxSize>().inline_size()
}));
set_height(format_box_size.iter().fold(0.0, |acc, v| {
set_height.set(format_box_size.iter().fold(0.0, |acc, v| {
acc + v.as_ref().clone().unchecked_into::<BoxSize>().block_size()
}))
} else {
// fallback
set_width(entry.content_rect().width());
set_height(entry.content_rect().height())
set_width.set(entry.content_rect().width());
set_height.set(entry.content_rect().height())
}
},
options.into(),
@ -150,11 +150,11 @@ where
move || target.get(),
move |ele, _, _| {
if ele.is_some() {
set_width(initial_size.width);
set_height(initial_size.height);
set_width.set(initial_size.width);
set_height.set(initial_size.height);
} else {
set_width(0.0);
set_height(0.0);
set_width.set(0.0);
set_height.set(0.0);
}
},
WatchOptions::default().immediate(false),

2
src/use_element_visibility.rs
View file

@ -63,7 +63,7 @@ where
cx,
(cx, target).into(),
move |entries, _| {
set_visible(entries[0].is_intersecting());
set_visible.set(entries[0].is_intersecting());
},
UseIntersectionObserverOptions::default().root(options.viewport),
);

2
src/use_event_listener.rs
View file

@ -47,7 +47,7 @@ use wasm_bindgen::JsCast;
///
/// view! { cx,
/// <Show
/// when=move || cond()
/// when=move || cond.get()
/// fallback=move |cx| view! { cx, <div node_ref=element>"Condition false"</div> }
/// >
/// <div node_ref=element>"Condition true"</div>

8
src/use_favicon.rs
View file

@ -20,7 +20,7 @@ use wasm_bindgen::JsCast;
/// #
/// let (icon, set_icon) = use_favicon(cx);
///
/// set_icon(Some("dark.png".to_string())); // change current icon
/// set_icon.set(Some("dark.png".to_string())); // change current icon
/// #
/// # view! { cx, }
/// # }
@ -44,7 +44,7 @@ use wasm_bindgen::JsCast;
/// cx,
/// UseFaviconOptions::default().new_icon(
/// Signal::derive(cx, move || {
/// Some((if is_dark() { "dark.png" } else { "light.png" }).to_string())
/// Some((if is_dark.get() { "dark.png" } else { "light.png" }).to_string())
/// }),
/// )
/// );
@ -73,7 +73,7 @@ pub fn use_favicon_with_options(
let (favicon, set_favicon) = create_signal(cx, new_icon.get_untracked());
if matches!(&new_icon, MaybeSignal::Dynamic(_)) {
create_effect(cx, move |_| set_favicon(new_icon.get()));
create_effect(cx, move |_| set_favicon.set(new_icon.get()));
}
let apply_icon = move |icon: &String| {
@ -90,7 +90,7 @@ pub fn use_favicon_with_options(
}
};
let _ = watch(cx, favicon, move |new_icon, prev_icon, _| {
let _ = watch(cx, move || favicon.get(), move |new_icon, prev_icon, _| {
if Some(new_icon) != prev_icon {
if let Some(new_icon) = new_icon {
apply_icon(new_icon);

6
src/use_intersection_observer.rs
View file

@ -30,7 +30,7 @@ use wasm_bindgen::prelude::*;
/// cx,
/// el,
/// move |entries, _| {
/// set_visible(entries[0].is_intersecting());
/// set_visible.set(entries[0].is_intersecting());
/// },
/// );
///
@ -184,7 +184,7 @@ where
move || {
cleanup();
set_active(false);
set_active.set(false);
}
};
@ -193,7 +193,7 @@ where
pause,
resume: move || {
cleanup();
set_active(true);
set_active.set(true);
},
stop,
}

4
src/use_interval.rs
View file

@ -55,11 +55,11 @@ where
let (counter, set_counter) = create_signal(cx, 0u64);
let update = move || set_counter.update(|count| *count += 1);
let reset = move || set_counter(0);
let reset = move || set_counter.set(0);
let cb = move || {
update();
callback.clone()(counter());
callback.clone()(counter.get());
};
let Pausable {

6
src/use_interval_fn.rs
View file

@ -78,7 +78,7 @@ where
let clean = clean.clone();
move || {
set_active(false);
set_active.set(false);
clean();
}
};
@ -91,7 +91,7 @@ where
return;
}
set_active(true);
set_active.set(true);
if immediate_callback {
callback.clone()();
@ -110,7 +110,7 @@ where
if matches!(interval, MaybeSignal::Dynamic(_)) {
let resume = resume.clone();
let stop_watch = watch(cx, interval, move |_, _, _| {
let stop_watch = watch(cx, move || interval.get(), move |_, _, _| {
if is_active.get() {
resume();
}

4
src/use_media_query.rs
View file

@ -64,7 +64,7 @@ pub fn use_media_query(cx: Scope, query: impl Into<MaybeSignal<String>>) -> Sign
*media_query = window().match_media(&query.get()).unwrap_or(None);
if let Some(media_query) = media_query.as_ref() {
set_matches(media_query.matches());
set_matches.set(media_query.matches());
remove_listener.replace(Some(Box::new(use_event_listener(
cx,
@ -76,7 +76,7 @@ pub fn use_media_query(cx: Scope, query: impl Into<MaybeSignal<String>>) -> Sign
.clone(),
))));
} else {
set_matches(false);
set_matches.set(false);
}
}
};

16
src/use_mouse.rs
View file

@ -108,9 +108,9 @@ where
let result = coord_type.extract_mouse_coords(&event);
if let Some((x, y)) = result {
set_x(x);
set_y(y);
set_source_type(UseMouseSourceType::Mouse);
set_x.set(x);
set_y.set(y);
set_source_type.set(UseMouseSourceType::Mouse);
}
}
};
@ -137,9 +137,9 @@ where
);
if let Some((x, y)) = result {
set_x(x);
set_y(y);
set_source_type(UseMouseSourceType::Touch);
set_x.set(x);
set_y.set(y);
set_source_type.set(UseMouseSourceType::Touch);
}
}
}
@ -147,8 +147,8 @@ where
let initial_value = options.initial_value;
let reset = move || {
set_x(initial_value.x);
set_y(initial_value.y);
set_x.set(initial_value.x);
set_y.set(initial_value.y);
};
// TODO : event filters?

2
src/use_mutation_observer.rs
View file

@ -110,7 +110,7 @@ where
move |targets, _, _| {
cleanup();
if is_supported() && !targets.is_empty() {
if is_supported.get() && !targets.is_empty() {
let obs = web_sys::MutationObserver::new(closure_js.as_ref().unchecked_ref())
.expect("failed to create MutationObserver");

6
src/use_resize_observer.rs
View file

@ -34,12 +34,12 @@ use wasm_bindgen::prelude::*;
/// el,
/// move |entries, observer| {
/// let rect = entries[0].content_rect();
/// set_text(format!("width: {}\nheight: {}", rect.width(), rect.height()));
/// set_text.set(format!("width: {}\nheight: {}", rect.width(), rect.height()));
/// },
/// );
///
/// view! { cx,
/// <div node_ref=el>{ text }</div>
/// <div node_ref=el>{ move || text.get() }</div>
/// }
/// # }
/// ```
@ -112,7 +112,7 @@ where
move |targets, _, _| {
cleanup();
if is_supported() && !targets.is_empty() {
if is_supported.get() && !targets.is_empty() {
let obs =
web_sys::ResizeObserver::new(closure_js.clone().as_ref().unchecked_ref())
.expect("failed to create ResizeObserver");

16
src/use_scroll.rs
View file

@ -94,8 +94,8 @@ use wasm_bindgen::JsCast;
///
/// view! { cx,
/// <div node_ref=element>"..."</div>
/// <button on:click=move |_| set_x(x() + 10.0)>"Scroll right 10px"</button>
/// <button on:click=move |_| set_y(y() + 10.0)>"Scroll down 10px"</button>
/// <button on:click=move |_| set_x(x.get_untracked() + 10.0)>"Scroll right 10px"</button>
/// <button on:click=move |_| set_y(y.get_untracked() + 10.0)>"Scroll down 10px"</button>
/// }
/// # }
/// ```
@ -140,10 +140,10 @@ use wasm_bindgen::JsCast;
/// # fn Demo(cx: Scope) -> impl IntoView {
/// # let element = create_node_ref(cx);
/// #
/// let (smooth, set_smoot) = create_signal(cx, false);
/// let (smooth, set_smooth) = create_signal(cx, false);
///
/// let behavior = Signal::derive(cx, move || {
/// if smooth() { ScrollBehavior::Smooth } else { ScrollBehavior::Auto }
/// if smooth.get() { ScrollBehavior::Smooth } else { ScrollBehavior::Auto }
/// });
///
/// let UseScrollReturn {
@ -246,7 +246,7 @@ where
return;
}
set_is_scrolling(false);
set_is_scrolling.set(false);
directions.update(|directions| {
directions.left = false;
directions.right = false;
@ -298,7 +298,7 @@ where
arrived_state.right = right;
}
});
set_internal_x(scroll_left);
set_internal_x.set(scroll_left);
let mut scroll_top = target.scroll_top() as f64;
@ -330,7 +330,7 @@ where
}
});
set_internal_y(scroll_top);
set_internal_y.set(scroll_top);
}
};
@ -341,7 +341,7 @@ where
let target: web_sys::Element = event_target(&e);
set_arrived_state(target);
set_is_scrolling(true);
set_is_scrolling.set(true);
on_scroll_end_debounced.clone()(e.clone());
on_scroll.clone()(e);
}

2
src/use_supported.rs
View file

@ -15,7 +15,7 @@ use leptos::*;
/// || JsValue::from("getBattery").js_in(&window().navigator())
/// );
///
/// if is_supported() {
/// if is_supported.get() {
/// // do something
/// }
/// # view! { cx, }

18
src/watch.rs
View file

@ -22,18 +22,18 @@ use std::rc::Rc;
///
/// let stop = watch(
/// cx,
/// num,
/// move || num.get(),
/// move |num, _, _| {
/// log!("Number {}", num);
/// },
/// );
///
/// set_num(1); // > "Number 1"
/// set_num.set(1); // > "Number 1"
///
/// set_timeout_with_handle(move || {
/// stop(); // stop watching
///
/// set_num(2); // (nothing happens)
/// set_num.set(2); // (nothing happens)
/// }, Duration::from_millis(1000));
/// # view! { cx, }
/// # }
@ -54,14 +54,14 @@ use std::rc::Rc;
///
/// watch_with_options(
/// cx,
/// num,
/// move || num.get(),
/// move |num, _, _| {
/// log!("Number {}", num);
/// },
/// WatchOptions::default().immediate(true),
/// ); // > "Number 0"
///
/// set_num(1); // > "Number 1"
/// set_num.set(1); // > "Number 1"
/// # view! { cx, }
/// # }
/// ```
@ -79,7 +79,7 @@ use std::rc::Rc;
/// #
/// watch_with_options(
/// cx,
/// num,
/// move || num.get(),
/// move |num, _, _| {
/// log!("Number {}", num);
/// },
@ -98,7 +98,7 @@ use std::rc::Rc;
/// #
/// watch_with_options(
/// cx,
/// num,
/// move || num.get(),
/// move |num, _, _| {
/// log!("number {}", num);
/// },
@ -162,7 +162,7 @@ where
create_filter_wrapper(options.filter.filter_fn(), wrapped_callback.clone());
create_effect(cx, move |did_run_before| {
if !is_active() {
if !is_active.get() {
return;
}
@ -187,7 +187,7 @@ where
});
move || {
set_active(false);
set_active.set(false);
}
}

4
src/watch_debounced.rs
View file

@ -19,7 +19,7 @@ use leptos::*;
/// #
/// watch_debounced(
/// cx,
/// source,
/// move || source.get(),
/// move |_, _, _| {
/// log!("changed!");
/// },
@ -43,7 +43,7 @@ use leptos::*;
/// #
/// watch_debounced_with_options(
/// cx,
/// source,
/// move || source.get(),
/// move |_, _, _| {
/// log!("changed!");
/// },

12
src/watch_pausable.rs
View file

@ -23,21 +23,21 @@ use leptos::*;
/// ..
/// } = watch_pausable(
/// cx,
/// source,
/// move || source.get(),
/// |v, _, _| {
/// log!("Changed to {}", v);
/// },
/// );
///
/// set_source("bar".to_string()); // > "Changed to bar"
/// set_source.set("bar".to_string()); // > "Changed to bar"
///
/// pause();
///
/// set_source("foobar".to_string()); // (nothing happens)
/// set_source.set("foobar".to_string()); // (nothing happens)
///
/// resume();
///
/// set_source("hello".to_string()); // > "Changed to hello"
/// set_source.set("hello".to_string()); // > "Changed to hello"
/// # view! { cx, }
/// # }
/// ```
@ -87,11 +87,11 @@ where
let stop = watch_with_options(cx, deps, pausable_callback, options);
let pause = move || {
set_active(false);
set_active.set(false);
};
let resume = move || {
set_active(true);
set_active.set(true);
};
WatchPausableReturn {

4
src/watch_throttled.rs
View file

@ -19,7 +19,7 @@ use leptos::*;
/// #
/// watch_throttled(
/// cx,
/// source,
/// move || source.get(),
/// move |_, _, _| {
/// log!("changed!");
/// },
@ -43,7 +43,7 @@ use leptos::*;
/// #
/// watch_throttled_with_options(
/// cx,
/// source,
/// move || source.get(),
/// move |_, _, _| {
/// log!("changed!");
/// },

8
src/whenever.rs
View file

@ -12,7 +12,7 @@ use leptos::*;
/// # pub fn Demo(cx: Scope) -> impl IntoView {
/// let (is_ready, set_ready) = create_signal(cx, false);
///
/// whenever(cx, is_ready, |v, _, _| log!("{}", v));
/// whenever(cx, move || is_ready.get(), |v, _, _| log!("{}", v));
/// #
/// # view! { cx, }
/// # }
@ -28,7 +28,7 @@ use leptos::*;
/// #
/// # pub fn Demo(cx: Scope) -> impl IntoView {
/// # let (is_ready, set_ready) = create_signal(cx, false);
/// whenever(cx, is_ready, |value, prev_value, _| {
/// whenever(cx, move || is_ready.get(), |value, prev_value, _| {
/// log!("before: {prev_value:?}; now: {value}");
/// });
/// #
@ -48,7 +48,7 @@ use leptos::*;
/// # let (counter, set_counter) = create_signal(cx, 0);
/// whenever(
/// cx,
/// move || counter() == 7,
/// move || counter.get() == 7,
/// |_, _, _| log!("counter is 7 now!"),
/// );
/// #
@ -68,7 +68,7 @@ use leptos::*;
/// # let (counter, set_counter) = create_signal(cx, 0);
/// whenever_with_options(
/// cx,
/// move || counter() == 7,
/// move || counter.get() == 7,
/// |_, _, _| log!("counter is 7 now!"),
/// WatchOptions::default().immediate(true),
/// );