working on examples

This commit is contained in:
Greg Johnston 2024-04-08 08:05:33 -04:00
parent b50de3a005
commit ec3f0933fe
4 changed files with 21 additions and 16 deletions

View file

@ -9,7 +9,7 @@ codegen-units = 1
lto = true
[dependencies]
leptos = { path = "../../leptos", features = ["csr"] }
leptos = { path = "../../leptos" }
console_log = "1"
log = "0.4"
console_error_panic_hook = "0.1.7"

View file

@ -1,4 +1,4 @@
use leptos::{html::*, *};
use leptos::{html::*, prelude::*, signals::RwSignal, IntoView};
/// A simple counter view.
// A component is really just a function call: it runs once to create the DOM and reactive system

View file

@ -8,7 +8,7 @@ codegen-units = 1
lto = true
[dependencies]
leptos = { path = "../../leptos", features = ["csr"] }
leptos = { path = "../../leptos" }
console_log = "1"
log = "0.4"
console_error_panic_hook = "0.1.7"
@ -16,9 +16,7 @@ wasm-bindgen = "0.2"
[dependencies.web-sys]
version = "0.3"
features = [
"Window",
]
features = ["Window"]
[dev-dependencies]
wasm-bindgen-test = "0.3.0"

View file

@ -1,4 +1,10 @@
use leptos::{leptos_dom::helpers::IntervalHandle, *};
use leptos::{
effect::Effect,
leptos_dom::helpers::{set_interval_with_handle, IntervalHandle},
prelude::*,
signals::RwSignal,
*,
};
use std::time::Duration;
/// Timer example, demonstrating the use of `use_interval`.
@ -6,16 +12,16 @@ use std::time::Duration;
pub fn TimerDemo() -> impl IntoView {
// count_a updates with a fixed interval of 1000 ms, whereas count_b has a dynamic
// update interval.
let (count_a, set_count_a) = create_signal(0_i32);
let (count_b, set_count_b) = create_signal(0_i32);
let count_a = RwSignal::new(0_i32);
let count_b = RwSignal::new(0_i32);
let (interval, set_interval) = create_signal(1000);
let interval = RwSignal::new(1000);
use_interval(1000, move || {
set_count_a.update(|c| *c += 1);
count_a.update(|c| *c += 1);
});
use_interval(interval, move || {
set_count_b.update(|c| *c += 1);
count_b.update(|c| *c += 1);
});
view! {
@ -24,9 +30,10 @@ pub fn TimerDemo() -> impl IntoView {
<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);
// TODO impl Property directly on signal types in stable
<input prop:value=interval on:input:target=move |ev| {
if let Ok(value) = ev.target().value().parse::<u64>() {
interval.set.set(value);
}
}/>
</div>
@ -41,7 +48,7 @@ where
T: Into<MaybeSignal<u64>> + 'static,
{
let interval_millis = interval_millis.into();
create_effect(move |prev_handle: Option<IntervalHandle>| {
Effect::new(move |prev_handle: Option<IntervalHandle>| {
// effects get their previous return value as an argument
// each time the effect runs, it will return the interval handle
// so if we have a previous one, we cancel it