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

ported to leptos 0.5 alpha

Browse source
This commit is contained in:
Maccesch 2023-07-27 18:06:36 +01:00
parent 95ef0e2651
commit 2e08874db0
157 changed files with 1026 additions and 1280 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
.idea/icon.svg generated
View file

@ -2,6 +2,17 @@
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg"
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<style>
path.black {
fill: #1e1838;
}
@media (prefers-color-scheme: dark) {
path.black {
fill: white;
}
}
</style>
<path d="M16.114,22.343c-1.714,-0 -3.2,-0.914 -3.885,-2.514c-0.458,-1.029 -0.572,-2.172 -0.229,-3.315c0.343,-1.143 1.143,-1.943 2.171,-2.514c0.572,-0.343 1.258,-0.457 1.829,-0.457c1.714,-0 3.2,0.914 3.886,2.514c1.028,2.172 0.114,4.8 -2.057,5.829c-0.458,0.228 -1.029,0.457 -1.715,0.457Z"
style="fill:#e1393a;fill-rule:nonzero;"/>
<path d="M16.114,15.943c0.572,-0 1.486,0.343 1.829,1.143c0.343,0.685 0.228,1.257 0.114,1.6c-0.114,0.343 -0.343,0.8 -1.028,1.143c-0.229,0.114 -0.572,0.228 -0.915,0.228c-0.571,0 -1.485,-0.343 -1.828,-1.143c-0.457,-1.028 -0.115,-2.285 0.914,-2.743c0.343,-0.228 0.571,-0.228 0.914,-0.228Zm0,-4.572c-0.914,0 -1.943,0.229 -2.857,0.686c-3.314,1.486 -4.686,5.486 -3.086,8.8c1.143,2.4 3.543,3.772 5.943,3.772c0.915,-0 1.943,-0.229 2.857,-0.686c3.315,-1.6 4.686,-5.6 3.086,-8.8c-1.143,-2.4 -3.428,-3.772 -5.943,-3.772Z"
@ -12,5 +23,5 @@
style="fill:#e1393a;fill-rule:nonzero;"/>
<path class="black"
d="M27.314,10.914c0,-0.114 -0.114,-0.343 -0.343,-0.571c0,-0.114 -0.114,-0.229 -0.114,-0.229c-0.457,-0.8 -1.143,-1.943 -1.143,-1.943l-2.514,1.486l1.486,2.629c1.943,3.657 2.057,7.657 0.571,10.857c-1.6,3.428 -5.028,5.371 -9.143,5.371c-4.228,0 -7.543,-1.943 -9.143,-5.371c-1.6,-3.2 -1.371,-7.2 0.572,-10.857l1.6,-2.629l-2.743,-1.486c-0,0 -0.686,1.029 -1.143,1.943c-0.114,0 -0.228,0.115 -0.228,0.229c-0.115,0.228 -0.229,0.457 -0.343,0.571c-2.286,4.572 -2.515,9.486 -0.457,13.715c2.171,4.457 6.4,6.971 11.771,6.971c5.257,0 9.6,-2.514 11.771,-6.971c2.058,-4.229 1.829,-9.258 -0.457,-13.715Z"
style="fill-rule:nonzero;fill:white;"/>
style="fill-rule:nonzero;"/>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

4
.idea/leptos-use.iml generated
View file

@ -48,6 +48,10 @@
<sourceFolder url="file://$MODULE_DIR$/examples/use_websocket/src" isTestSource="false" />
<sourceFolder url="file://$MODULE_DIR$/testtest/src" isTestSource="false" />
<sourceFolder url="file://$MODULE_DIR$/examples/use_drop_zone/src" isTestSource="false" />
<sourceFolder url="file://$MODULE_DIR$/examples/signal_debounced/src" isTestSource="false" />
<sourceFolder url="file://$MODULE_DIR$/examples/signal_throttled/src" isTestSource="false" />
<sourceFolder url="file://$MODULE_DIR$/examples/use_draggable/src" isTestSource="false" />
<sourceFolder url="file://$MODULE_DIR$/examples/use_raf_fn/src" isTestSource="false" />
<excludeFolder url="file://$MODULE_DIR$/examples/use_event_listener/target" />
<excludeFolder url="file://$MODULE_DIR$/target" />
<excludeFolder url="file://$MODULE_DIR$/docs/book/book" />

3
CHANGELOG.md
View file

@ -12,6 +12,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Braking Changes 🛠
- Leptos version is now 0.5
- No `cx: Scope` params are supported/needed anymore because of the changes in Leptos.
Please check the release notes of Leptos 0.5 for how to upgrade.
- `watch` is now deprecated in favor of `leptos::watch`. `watch_with_options`
will continue to exist.

6
Cargo.toml
View file

@ -1,6 +1,6 @@
[package]
name = "leptos-use"
version = "0.6.0"
version = "0.7.0-alpha"
edition = "2021"
authors = ["Marc-Stefan Cassola"]
categories = ["gui", "web-programming"]
@ -13,7 +13,7 @@ repository = "https://github.com/Synphonyte/leptos-use"
homepage = "https://leptos-use.rs"
[dependencies]
leptos = "0.4"
leptos = "0.5.0-alpha"
wasm-bindgen = "0.2"
js-sys = "0.3"
default-struct-builder = "0.4"
@ -80,5 +80,3 @@ all-features = true
rustdoc-args = ["--cfg=web_sys_unstable_apis"]
rustc-args = ["--cfg=web_sys_unstable_apis"]
[dev-dependencies]
leptos = "0.4"

5
README.md
View file

@ -32,8 +32,8 @@ use leptos::*;
use leptos_use::{use_mouse, UseMouseReturn};
#[component]
fn Demo(cx: Scope) -> impl IntoView {
let UseMouseReturn { x, y, .. } = use_mouse(cx);
fn Demo() -> impl IntoView {
let UseMouseReturn { x, y, .. } = use_mouse();
view! { cx,
{x} " x " {y}
@ -89,3 +89,4 @@ To scaffold a new function quickly you can run `template/createfn.sh`. It requir
|---------------|---------------------------|
| <= 0.3 | 0.3 |
| 0.4, 0.5, 0.6 | 0.4 |
| main | 0.5.0-alpha |

5
docs/book/src/SUMMARY.md
View file

@ -62,6 +62,11 @@
- [watch_with_options](watch/watch_with_options.md)
- [whenever](watch/whenever.md)
# Reactivity
- [signal_debounced](reactivity/signal_debounced.md)
- [signal_throttled](reactivity/signal_throttled.md)
# Utilities
- [is_err](utilities/is_err.md)

4
docs/book/src/get_started.md
View file

@ -19,8 +19,8 @@ use leptos::*;
use leptos_use::{use_mouse, UseMouseReturn};
#[component]
fn Demo(cx: Scope) -> impl IntoView {
let UseMouseReturn { x, y, .. } = use_mouse(cx);
fn Demo() -> impl IntoView {
let UseMouseReturn { x, y, .. } = use_mouse();
view! { cx,
{x} " x " {y}

2
docs/book/src/server_side_rendering.md
View file

@ -41,7 +41,7 @@ create_effect(
cx,
move |_| {
// window() doesn't work on the server
use_event_listener(cx, window(), "resize", move |_| {
use_event_listener(window(), "resize", move |_| {
// ...
})
},

2
examples/Cargo.toml
View file

@ -3,6 +3,8 @@ resolver = "2"
members = [
"on_click_outside",
"signal_debounced",
"signal_throttled",
"use_abs",
"use_active_element",
"use_breakpoints",

2
examples/on_click_outside/Cargo.toml
View file

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

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

@ -4,16 +4,15 @@ use leptos_use::docs::demo_or_body;
use leptos_use::on_click_outside;
#[component]
fn Demo(cx: Scope) -> impl IntoView {
let (show_modal, set_show_modal) = create_signal(cx, false);
let modal_ref = create_node_ref::<Div>(cx);
fn Demo() -> impl IntoView {
let (show_modal, set_show_modal) = create_signal(false);
let modal_ref = create_node_ref::<Div>();
let _ = on_click_outside(cx, modal_ref, move |_| set_show_modal.set(false));
let _ = on_click_outside(modal_ref, move |_| set_show_modal.set(false));
view! { cx,
<button on:click=move |_| set_show_modal.set(true)>"Open Modal"</button>
view! { <button on:click=move |_| set_show_modal.set(true)>"Open Modal"</button>
<Show when=move || show_modal.get() fallback=|_| ()>
<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.set(false)>"𝖷"</button>
@ -70,7 +69,7 @@ fn main() {
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
mount_to(demo_or_body(), |cx| {
view! { cx, <Demo /> }
mount_to(demo_or_body(), || {
view! { <Demo /> }
})
}

2
examples/signal_debounced/Cargo.toml
View file

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

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

@ -3,19 +3,17 @@ use leptos_use::docs::demo_or_body;
use leptos_use::signal_debounced;
#[component]
fn Demo(cx: Scope) -> impl IntoView {
fn Demo() -> impl IntoView {
// signal_debounced();
signal_debounced(cx);
view! { cx,
}
view! {}
}
fn main() {
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
mount_to(demo_or_body(), |cx| {
view! { cx, <Demo /> }
mount_to(demo_or_body(), || {
view! { <Demo /> }
})
}

2
examples/signal_throttled/Cargo.toml
View file

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

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

@ -3,19 +3,17 @@ use leptos_use::docs::demo_or_body;
use leptos_use::signal_throttled;
#[component]
fn Demo(cx: Scope) -> impl IntoView {
fn Demo() -> impl IntoView {
// signal_throttled();
signal_throttled(cx);
view! { cx,
}
view! {}
}
fn main() {
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
mount_to(demo_or_body(), |cx| {
view! { cx, <Demo /> }
mount_to(demo_or_body(), || {
view! { <Demo /> }
})
}

10
examples/ssr/Cargo.toml
View file

@ -11,16 +11,16 @@ axum = { version = "0.6.4", optional = true }
console_error_panic_hook = "0.1"
console_log = "1"
cfg-if = "1"
leptos = { version = "0.4", features = ["nightly"] }
leptos_axum = { version = "0.4", optional = true }
leptos_meta = { version = "0.4", features = ["nightly"] }
leptos_router = { version = "0.4", features = ["nightly"] }
leptos = { version = "0.5.0-alpha", features = ["nightly"] }
leptos_axum = { version = "0.5.0-alpha", optional = true }
leptos_meta = { version = "0.5.0-alpha", features = ["nightly"] }
leptos_router = { version = "0.5.0-alpha", features = ["nightly"] }
leptos-use = { path = "../..", features = ["storage"] }
log = "0.4"
simple_logger = "4"
tokio = { version = "1.25.0", optional = true }
tower = { version = "0.4.13", optional = true }
tower-http = { version = "0.4", features = ["fs"], optional = true }
tower-http = { version = "0.5.0-alpha", features = ["fs"], optional = true }
wasm-bindgen = "=0.2.87"
thiserror = "1.0.38"
tracing = { version = "0.1.37", optional = true }

31
examples/ssr/src/app.rs
View file

@ -9,28 +9,26 @@ use leptos_use::{
};
#[component]
pub fn App(cx: Scope) -> impl IntoView {
pub fn App() -> impl IntoView {
// Provides context that manages stylesheets, titles, meta tags, etc.
provide_meta_context(cx);
provide_meta_context();
view! {
cx,
<Stylesheet id="leptos" href="/pkg/start-axum.css"/>
<Title text="Leptos-Use SSR Example"/>
<Router fallback=|cx| {
<Router fallback=|| {
let mut outside_errors = Errors::default();
outside_errors.insert_with_default_key(AppError::NotFound);
view! { cx,
<ErrorTemplate outside_errors/>
view! { <ErrorTemplate outside_errors/>
}
.into_view(cx)
.into_view()
}>
<main>
<Routes>
<Route path="" view=|cx| view! { cx, <HomePage/> }/>
<Route path="" view=|| view! { <HomePage/> }/>
</Routes>
</main>
</Router>
@ -39,27 +37,27 @@ pub fn App(cx: Scope) -> impl IntoView {
/// Renders the home page of your application.
#[component]
fn HomePage(cx: Scope) -> impl IntoView {
fn HomePage() -> impl IntoView {
// Creates a reactive value to update the button
let (count, set_count, _) = use_local_storage(cx, "count-state", 0);
let (count, set_count, _) = use_local_storage("count-state", 0);
let on_click = move |_| set_count.update(|count| *count += 1);
let nf = use_intl_number_format(
UseIntlNumberFormatOptions::default().locale("zh-Hans-CN-u-nu-hanidec"),
);
let zh_count = nf.format::<i32>(cx, count);
let zh_count = nf.format::<i32>(count);
let (key, set_key) = create_signal(cx, "".to_string());
let (key, set_key) = create_signal("".to_string());
create_effect(cx, move |_| {
create_effect(move |_| {
// window() doesn't work on the server
let _ = use_event_listener(cx, window(), keypress, move |evt: KeyboardEvent| {
let _ = use_event_listener(window(), keypress, move |evt: KeyboardEvent| {
set_key(evt.key())
});
});
let (debounce_value, set_debounce_value) = create_signal(cx, "not called");
let (debounce_value, set_debounce_value) = create_signal("not called");
let debounced_fn = use_debounce_fn(
move || {
@ -69,8 +67,7 @@ fn HomePage(cx: Scope) -> impl IntoView {
);
debounced_fn();
view! { cx,
<h1>"Leptos-Use SSR Example"</h1>
view! { <h1>"Leptos-Use SSR Example"</h1>
<button on:click=on_click>"Click Me: " { count }</button>
<p>"Locale \"zh-Hans-CN-u-nu-hanidec\": " { zh_count }</p>
<p>"Press any key: " { key }</p>

11
examples/ssr/src/error_template.rs
View file

@ -24,12 +24,11 @@ impl AppError {
// Feel free to do more complicated things here than just displaying the error.
#[component]
pub fn ErrorTemplate(
cx: Scope,
#[prop(optional)] outside_errors: Option<Errors>,
#[prop(optional)] errors: Option<RwSignal<Errors>>,
) -> impl IntoView {
let errors = match outside_errors {
Some(e) => create_rw_signal(cx, e),
Some(e) => create_rw_signal(e),
None => match errors {
Some(e) => e,
None => panic!("No Errors found and we expected errors!"),
@ -48,25 +47,23 @@ pub fn ErrorTemplate(
// Only the response code for the first error is actually sent from the server
// this may be customized by the specific application
cfg_if! { if #[cfg(feature="ssr")] {
let response = use_context::<ResponseOptions>(cx);
let response = use_context::<ResponseOptions>();
if let Some(response) = response {
response.set_status(errors[0].status_code());
}
}}
view! {cx,
<h1>{if errors.len() > 1 {"Errors"} else {"Error"}}</h1>
view! { <h1>{if errors.len() > 1 {"Errors"} else {"Error"}}</h1>
<For
// a function that returns the items we're iterating over; a signal is fine
each= move || {errors.clone().into_iter().enumerate()}
// a unique key for each item as a reference
key=|(index, _error)| *index
// renders each item to a view
view= move |cx, error| {
view= move |error| {
let error_string = error.1.to_string();
let error_code= error.1.status_code();
view! {
cx,
<h2>{error_code.to_string()}</h2>
<p>"Error: " {error_string}</p>
}

2
examples/ssr/src/fileserv.rs
View file

@ -20,7 +20,7 @@ cfg_if! { if #[cfg(feature = "ssr")] {
if res.status() == StatusCode::OK {
res.into_response()
} else {
let handler = leptos_axum::render_app_to_stream(options.to_owned(), move |cx| view!{cx, <App/>});
let handler = leptos_axum::render_app_to_stream(options.to_owned(), move || view!{<App/>});
handler(req).await.into_response()
}
}

4
examples/ssr/src/lib.rs
View file

@ -14,8 +14,8 @@ cfg_if! { if #[cfg(feature = "hydrate")] {
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
leptos::mount_to_body(move |cx| {
view! { cx, <App/> }
leptos::mount_to_body(move || {
view! { <App/> }
});
}
}}

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

@ -17,12 +17,12 @@ async fn main() {
let conf = get_configuration(None).await.unwrap();
let leptos_options = conf.leptos_options;
let addr = leptos_options.site_addr;
let routes = generate_route_list(|cx| view! { cx, <App/> }).await;
let routes = generate_route_list(|| view! { <App/> }).await;
// build our application with a route
let app = Router::new()
.route("/api/*fn_name", post(leptos_axum::handle_server_fns))
.leptos_routes(&leptos_options, routes, |cx| view! { cx, <App/> })
.leptos_routes(&leptos_options, routes, || view! { <App/> })
.fallback(file_and_error_handler)
.with_state(leptos_options);

2
examples/use_abs/Cargo.toml
View file

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

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

@ -3,13 +3,12 @@ use leptos_use::docs::demo_or_body;
use leptos_use::math::use_abs;
#[component]
fn Demo(cx: Scope) -> impl IntoView {
let (value, set_value) = create_signal(cx, -32.25);
fn Demo() -> impl IntoView {
let (value, set_value) = create_signal(-32.25);
let result: Signal<f64> = use_abs(cx, value);
let result: Signal<f64> = use_abs(value);
view! { cx,
<input
view! { <input
class="block"
prop:value=move || value.get()
on:input=move |e| set_value.set(event_target_value(&e).parse().unwrap())
@ -27,7 +26,7 @@ fn main() {
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
mount_to(demo_or_body(), |cx| {
view! { cx, <Demo /> }
mount_to(demo_or_body(), || {
view! { <Demo /> }
})
}

2
examples/use_active_element/Cargo.toml
View file

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

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

@ -3,26 +3,25 @@ use leptos_use::docs::{demo_or_body, Note};
use leptos_use::use_active_element;
#[component]
fn Demo(cx: Scope) -> impl IntoView {
let active_element = use_active_element(cx);
fn Demo() -> impl IntoView {
let active_element = use_active_element();
let key = move || {
format!(
"{:?}",
active_element.get()
active_element
.get()
.map(|el| el.dataset().get("id"))
.unwrap_or_default()
)
};
view! { cx,
<Note class="mb-3">"Select the inputs below to see the changes"</Note>
view! { <Note class="mb-3">"Select the inputs below to see the changes"</Note>
<div class="grid grid-cols-1 md:grid-cols-3 gap-2">
<For
each=move || (1..7)
key=|i| *i
view=move |cx, i| view! { cx,
<input type="text" data-id=i class="!my-0 !min-w-0" placeholder=i />
view=move |i| view! { <input type="text" data-id=i class="!my-0 !min-w-0" placeholder=i />
}
/>
</div>
@ -38,7 +37,7 @@ fn main() {
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
mount_to(demo_or_body(), |cx| {
view! { cx, <Demo /> }
mount_to(demo_or_body(), || {
view! { <Demo /> }
})
}

2
examples/use_breakpoints/Cargo.toml
View file

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

11
examples/use_breakpoints/src/main.rs
View file

@ -3,10 +3,10 @@ use leptos_use::docs::{demo_or_body, BooleanDisplay};
use leptos_use::{breakpoints_tailwind, use_breakpoints, BreakpointsTailwind};
#[component]
fn Demo(cx: Scope) -> impl IntoView {
fn Demo() -> impl IntoView {
let breakpoints = breakpoints_tailwind();
let screen_size = use_breakpoints(cx, breakpoints.clone());
let screen_size = use_breakpoints(breakpoints.clone());
use BreakpointsTailwind::*;
@ -24,8 +24,7 @@ fn Demo(cx: Scope) -> impl IntoView {
let label_classes = "justify-self-end".to_string();
let svg_classes = "align-middle ml-3 mr-1 opacity-60".to_string();
view! { cx,
<div class="grid grid-cols-2 gap-x-4 gap-y-3">
view! { <div class="grid grid-cols-2 gap-x-4 gap-y-3">
<div class=label_classes.clone()>"Current breakpoints :"</div>
<code>{move || format!("{:?}", current.get()) }</code>
@ -145,7 +144,7 @@ fn main() {
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
mount_to(demo_or_body(), |cx| {
view! { cx, <Demo /> }
mount_to(demo_or_body(), || {
view! { <Demo /> }
})
}

2
examples/use_ceil/Cargo.toml
View file

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

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

@ -3,13 +3,12 @@ use leptos_use::docs::demo_or_body;
use leptos_use::math::use_ceil;
#[component]
fn Demo(cx: Scope) -> impl IntoView {
let (value, set_value) = create_signal(cx, 4.15);
fn Demo() -> impl IntoView {
let (value, set_value) = create_signal(4.15);
let result: Signal<f64> = use_ceil(cx, value);
let result: Signal<f64> = use_ceil(value);
view! { cx,
<input
view! { <input
class="block"
prop:value=move || value.get()
on:input=move |e| set_value.set(event_target_value(&e).parse().unwrap())
@ -27,7 +26,7 @@ fn main() {
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
mount_to(demo_or_body(), |cx| {
view! { cx, <Demo /> }
mount_to(demo_or_body(), || {
view! { <Demo /> }
})
}

2
examples/use_color_mode/Cargo.toml
View file

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

13
examples/use_color_mode/src/main.rs
View file

@ -7,9 +7,8 @@ use leptos_use::{
};
#[component]
fn Demo(cx: Scope) -> impl IntoView {
fn Demo() -> impl IntoView {
let UseColorModeReturn { mode, set_mode, .. } = use_color_mode_with_options(
cx,
UseColorModeOptions::default()
.custom_modes(vec![
"rust".into(),
@ -17,11 +16,10 @@ fn Demo(cx: Scope) -> impl IntoView {
"navy".into(),
"ayu".into(),
])
.initial_value(ColorMode::from(html(cx).class_name())),
.initial_value(ColorMode::from(html().class_name())),
);
let UseCycleListReturn { state, next, .. } = use_cycle_list_with_options(
cx,
vec![
ColorMode::Light,
ColorMode::Custom("rust".into()),
@ -32,8 +30,7 @@ fn Demo(cx: Scope) -> impl IntoView {
UseCycleListOptions::default().initial_value(Some((mode, set_mode).into())),
);
view! { cx,
<button on:click=move |_| next()>
view! { <button on:click=move |_| next()>
{ move || format!("{}", state.get()) }
</button>
<Note>"Click to change the color mode"</Note>
@ -44,7 +41,7 @@ fn main() {
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
mount_to(demo_or_body(), |cx| {
view! { cx, <Demo /> }
mount_to(demo_or_body(), || {
view! { <Demo /> }
})
}

2
examples/use_css_var/Cargo.toml
View file

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

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

@ -4,10 +4,10 @@ use leptos_use::docs::demo_or_body;
use leptos_use::{use_css_var_with_options, UseCssVarOptions};
#[component]
fn Demo(cx: Scope) -> impl IntoView {
let el = create_node_ref::<Div>(cx);
fn Demo() -> impl IntoView {
let el = create_node_ref::<Div>();
let (color, set_color) =
use_css_var_with_options(cx, "--color", UseCssVarOptions::default().target(el));
use_css_var_with_options("--color", UseCssVarOptions::default().target(el));
let switch_color = move |_| {
if color.get() == "#df8543" {
set_color.set("#7fa998".to_string());
@ -16,9 +16,9 @@ fn Demo(cx: Scope) -> impl IntoView {
}
};
let elv = create_node_ref::<Div>(cx);
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 elv = create_node_ref::<Div>();
let (key, set_key) = create_signal("--color".to_string());
let (color_val, _) = use_css_var_with_options(key, UseCssVarOptions::default().target(elv));
let change_var = move |_| {
if key.get() == "--color" {
set_key.set("--color-one".to_string());
@ -33,8 +33,7 @@ fn Demo(cx: Scope) -> impl IntoView {
)
};
view! { cx,
<div>
view! { <div>
<div node_ref=el style="--color: #7fa998; color: var(--color)">
"Sample text, " {color}
</div>
@ -54,7 +53,7 @@ fn main() {
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
mount_to(demo_or_body(), |cx| {
view! { cx, <Demo /> }
mount_to(demo_or_body(), || {
view! { <Demo /> }
})
}

2
examples/use_cycle_list/Cargo.toml
View file

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

16
examples/use_cycle_list/src/main.rs
View file

@ -3,18 +3,14 @@ use leptos_use::docs::demo_or_body;
use leptos_use::{use_cycle_list, UseCycleListReturn};
#[component]
fn Demo(cx: Scope) -> impl IntoView {
fn Demo() -> impl IntoView {
let UseCycleListReturn {
state, next, prev, ..
} = use_cycle_list(
cx,
vec![
} = use_cycle_list(vec![
"Dog", "Cat", "Lizard", "Shark", "Whale", "Dolphin", "Octopus", "Seal",
],
);
]);
view! { cx,
<div>
view! { <div>
<div class="text-primary text-lg font-bold">{state}</div>
<button on:click=move |_| { prev() }>"Prev"</button>
<button on:click=move |_| { next() }>"Next"</button>
@ -26,7 +22,7 @@ fn main() {
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
mount_to(demo_or_body(), |cx| {
view! { cx, <Demo /> }
mount_to(demo_or_body(), || {
view! { <Demo /> }
})
}

2
examples/use_debounce_fn/Cargo.toml
View file

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

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

@ -3,9 +3,9 @@ use leptos_use::docs::{demo_or_body, Note};
use leptos_use::{use_debounce_fn_with_options, DebounceOptions};
#[component]
fn Demo(cx: Scope) -> impl IntoView {
let (click_count, set_click_count) = create_signal(cx, 0);
let (debounced_count, set_debounced_count) = create_signal(cx, 0);
fn Demo() -> impl IntoView {
let (click_count, set_click_count) = create_signal(0);
let (debounced_count, set_debounced_count) = create_signal(0);
let debounced_fn = use_debounce_fn_with_options(
move || set_debounced_count.set(debounced_count.get_untracked() + 1),
@ -13,8 +13,7 @@ fn Demo(cx: Scope) -> impl IntoView {
DebounceOptions::default().max_wait(Some(5000.0)),
);
view! { cx,
<button
view! { <button
on:click=move |_| {
set_click_count.set(click_count.get_untracked() + 1);
debounced_fn();
@ -32,7 +31,7 @@ fn main() {
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
mount_to(demo_or_body(), |cx| {
view! { cx, <Demo /> }
mount_to(demo_or_body(), || {
view! { <Demo /> }
})
}

2
examples/use_document_visibility/Cargo.toml
View file

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

23
examples/use_document_visibility/src/main.rs
View file

@ -1,15 +1,17 @@
use leptos::*;
use leptos_use::docs::demo_or_body;
use leptos_use::{use_document_visibility, watch};
use leptos_use::use_document_visibility;
use std::time::Duration;
#[component]
fn Demo(cx: Scope) -> impl IntoView {
fn Demo() -> impl IntoView {
let start_message = "💡 Minimize the page or switch tab then return";
let (message, set_message) = create_signal(cx, start_message);
let visibility = use_document_visibility(cx);
let (message, set_message) = create_signal(start_message);
let visibility = use_document_visibility();
let _ = watch(cx, visibility, move |cur, prev, _| {
let _ = watch(
visibility,
move |cur, prev, _| {
if let Some(prev) = prev {
if *cur == web_sys::VisibilityState::Visible
&& *prev == web_sys::VisibilityState::Hidden
@ -24,10 +26,11 @@ fn Demo(cx: Scope) -> impl IntoView {
)
}
}
});
},
false,
);
view! { cx,
<div>{ message }</div>
view! { <div>{ message }</div>
}
}
@ -35,7 +38,7 @@ fn main() {
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
mount_to(demo_or_body(), |cx| {
view! { cx, <Demo /> }
mount_to(demo_or_body(), || {
view! { <Demo /> }
})
}

2
examples/use_draggable/Cargo.toml
View file

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

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

@ -5,13 +5,12 @@ use leptos_use::docs::demo_or_body;
use leptos_use::{use_draggable_with_options, UseDraggableOptions, UseDraggableReturn};
#[component]
fn Demo(cx: Scope) -> impl IntoView {
let el = create_node_ref::<Div>(cx);
fn Demo() -> impl IntoView {
let el = create_node_ref::<Div>();
let inner_width = window().inner_width().unwrap().as_f64().unwrap();
let UseDraggableReturn { x, y, style, .. } = use_draggable_with_options(
cx,
el,
UseDraggableOptions::default()
.initial_value(Position {
@ -21,8 +20,7 @@ fn Demo(cx: Scope) -> impl IntoView {
.prevent_default(true),
);
view! { cx,
<p class="italic op50 text-center">
view! { <p class="italic op50 text-center">
Check the floating box
</p>
<div
@ -42,7 +40,7 @@ fn main() {
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
mount_to(demo_or_body(), |cx| {
view! { cx, <Demo /> }
mount_to(demo_or_body(), || {
view! { <Demo /> }
})
}

2
examples/use_drop_zone/Cargo.toml
View file

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

19
examples/use_drop_zone/src/main.rs
View file

@ -4,24 +4,22 @@ use leptos_use::docs::{demo_or_body, BooleanDisplay};
use leptos_use::{use_drop_zone_with_options, UseDropZoneOptions, UseDropZoneReturn};
#[component]
fn Demo(cx: Scope) -> impl IntoView {
let (dropped, set_dropped) = create_signal(cx, false);
fn Demo() -> impl IntoView {
let (dropped, set_dropped) = create_signal(false);
let drop_zone_el = create_node_ref::<Div>(cx);
let drop_zone_el = create_node_ref::<Div>();
let UseDropZoneReturn {
is_over_drop_zone,
files,
} = use_drop_zone_with_options(
cx,
drop_zone_el,
UseDropZoneOptions::default()
.on_drop(move |_| set_dropped(true))
.on_enter(move |_| set_dropped(false)),
);
view! { cx,
<div class="flex">
view! { <div class="flex">
<div class="w-full h-auto relative">
<p>Drop files into dropZone</p>
<img width="64" src="use_drop_zone/demo/img/leptos-use-logo.svg" alt="Drop me"/>
@ -36,9 +34,8 @@ fn Demo(cx: Scope) -> impl IntoView {
dropped: <BooleanDisplay value=dropped />
</div>
<div class="flex flex-wrap justify-center items-center">
<For each=files key=|f| f.name() view=move |cx, file| {
view! { cx,
<div class="w-200px bg-black-200/10 ma-2 pa-6">
<For each=files key=|f| f.name() view=move |file| {
view! { <div class="w-200px bg-black-200/10 ma-2 pa-6">
<p>Name: {file.name()}</p>
<p>Size: {file.size()}</p>
<p>Type: {file.type_()}</p>
@ -57,7 +54,7 @@ fn main() {
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
mount_to(demo_or_body(), |cx| {
view! { cx, <Demo /> }
mount_to(demo_or_body(), || {
view! { <Demo /> }
})
}

2
examples/use_element_hover/Cargo.toml
View file

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

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

@ -4,19 +4,17 @@ use leptos_use::docs::demo_or_body;
use leptos_use::{use_element_hover_with_options, UseElementHoverOptions};
#[component]
fn Demo(cx: Scope) -> impl IntoView {
let el = create_node_ref::<Button>(cx);
fn Demo() -> impl IntoView {
let el = create_node_ref::<Button>();
let is_hovered = use_element_hover_with_options(
cx,
el,
UseElementHoverOptions::default()
.delay_enter(200)
.delay_leave(600),
);
view! { cx,
<button node_ref=el>{ move || if is_hovered.get() { "Thank you!" } else { "Hover me" } }</button>
view! { <button node_ref=el>{ move || if is_hovered.get() { "Thank you!" } else { "Hover me" } }</button>
}
}
@ -24,7 +22,7 @@ fn main() {
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
mount_to(demo_or_body(), |cx| {
view! { cx, <Demo /> }
mount_to(demo_or_body(), || {
view! { <Demo /> }
})
}

2
examples/use_element_size/Cargo.toml
View file

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

13
examples/use_element_size/src/main.rs
View file

@ -4,15 +4,14 @@ use leptos_use::docs::{demo_or_body, Note};
use leptos_use::{use_element_size, UseElementSizeReturn};
#[component]
fn Demo(cx: Scope) -> impl IntoView {
let el = create_node_ref::<Textarea>(cx);
fn Demo() -> impl IntoView {
let el = create_node_ref::<Textarea>();
let UseElementSizeReturn { width, height } = use_element_size(cx, el);
let UseElementSizeReturn { width, height } = use_element_size(el);
let text = move || format!("width: {}\nheight: {}", width.get(), height.get());
view! { cx,
<Note class="mb-2">"Resize the box to see changes"</Note>
view! { <Note class="mb-2">"Resize the box to see changes"</Note>
<textarea
node_ref=el
readonly
@ -26,7 +25,7 @@ fn main() {
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
mount_to(demo_or_body(), |cx| {
view! { cx, <Demo /> }
mount_to(demo_or_body(), || {
view! { <Demo /> }
})
}

2
examples/use_element_visibility/Cargo.toml
View file

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

13
examples/use_element_visibility/src/main.rs
View file

@ -4,13 +4,12 @@ use leptos_use::docs::{demo_or_body, BooleanDisplay, Note};
use leptos_use::use_element_visibility;
#[component]
fn Demo(cx: Scope) -> impl IntoView {
let el = create_node_ref::<Div>(cx);
fn Demo() -> impl IntoView {
let el = create_node_ref::<Div>();
let is_visible = use_element_visibility(cx, el);
let is_visible = use_element_visibility(el);
view! { cx,
<div>
view! { <div>
<Note class="mb-4">"Info on the right bottom corner"</Note>
<div node_ref=el class="max-w-lg relative area dark:bg-gray-800 shadow-lg z-60">
"Target Element (scroll down)"
@ -28,7 +27,7 @@ fn main() {
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
mount_to(demo_or_body(), |cx| {
view! { cx, <Demo /> }
mount_to(demo_or_body(), || {
view! { <Demo /> }
})
}

2
examples/use_event_listener/Cargo.toml
View file

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

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

@ -4,14 +4,14 @@ use leptos::*;
use leptos_use::use_event_listener;
#[component]
fn Demo(cx: Scope) -> impl IntoView {
let _ = use_event_listener(cx, window(), keydown, |evt| {
fn Demo() -> impl IntoView {
let _ = use_event_listener(window(), keydown, |evt| {
log!("window keydown: '{}'", evt.key());
});
let element = create_node_ref::<A>(cx);
let element = create_node_ref::<A>();
let _ = use_event_listener(cx, element, click, |evt| {
let _ = use_event_listener(element, click, |evt| {
log!(
"click from element '{:?}'",
event_target::<web_sys::HtmlElement>(&evt).inner_text()
@ -20,10 +20,9 @@ fn Demo(cx: Scope) -> impl IntoView {
evt.prevent_default();
});
let (cond, set_cond) = create_signal(cx, true);
let (cond, set_cond) = create_signal(true);
view! { cx,
<p>"Check in the dev tools console"</p>
view! { <p>"Check in the dev tools console"</p>
<p>
<label>
<input
@ -35,8 +34,7 @@ fn Demo(cx: Scope) -> impl IntoView {
</p>
<Show
when=move || cond.get()
fallback=move |cx| view! { cx,
<a node_ref=element href="#">
fallback=move || view! { <a node_ref=element href="#">
"Condition"
<b>" false "</b>
"[click me]"
@ -56,9 +54,8 @@ fn main() {
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
mount_to_body(|cx| {
view! {cx,
<Demo />
mount_to_body(|| {
view! { <Demo />
}
})
}

2
examples/use_favicon/Cargo.toml
View file

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

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

@ -3,17 +3,14 @@ use leptos_use::docs::demo_or_body;
use leptos_use::{use_favicon_with_options, UseFaviconOptions};
#[component]
fn Demo(cx: Scope) -> impl IntoView {
let (_, set_icon) = use_favicon_with_options(
cx,
UseFaviconOptions::default().base_url("use_favicon/demo/img/"),
);
fn Demo() -> impl IntoView {
let (_, set_icon) =
use_favicon_with_options(UseFaviconOptions::default().base_url("use_favicon/demo/img/"));
let classes = "border border-solid border-b-4 rounded p-2 block border-gray-500/50 bg-[--bg] active:translate-y-1 active:border-b".to_string();
let img_classes = "block".to_string();
view! { cx,
<p>"Click on an icon to change the favicon"</p>
view! { <p>"Click on an icon to change the favicon"</p>
<p class="flex gap-2">
<a class=classes.clone() href="#" on:click=move |e| {
e.prevent_default();
@ -57,7 +54,7 @@ fn main() {
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
mount_to(demo_or_body(), |cx| {
view! { cx, <Demo /> }
mount_to(demo_or_body(), || {
view! { <Demo /> }
})
}

2
examples/use_floor/Cargo.toml
View file

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

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

@ -3,13 +3,12 @@ use leptos_use::docs::demo_or_body;
use leptos_use::math::use_floor;
#[component]
fn Demo(cx: Scope) -> impl IntoView {
let (value, set_value) = create_signal(cx, 5.95);
fn Demo() -> impl IntoView {
let (value, set_value) = create_signal(5.95);
let result: Signal<f64> = use_floor(cx, value);
let result: Signal<f64> = use_floor(value);
view! { cx,
<input
view! { <input
class="block"
prop:value=move || value.get()
on:input=move |e| set_value.set(event_target_value(&e).parse().unwrap())
@ -27,7 +26,7 @@ fn main() {
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
mount_to(demo_or_body(), |cx| {
view! { cx, <Demo /> }
mount_to(demo_or_body(), || {
view! { <Demo /> }
})
}

2
examples/use_intersection_observer/Cargo.toml
View file

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

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

@ -7,10 +7,10 @@ use leptos_use::{
};
#[component]
fn Demo(cx: Scope) -> impl IntoView {
let root = create_node_ref::<Div>(cx);
let target = create_node_ref::<Div>(cx);
let (is_visible, set_visible) = create_signal(cx, false);
fn Demo() -> impl IntoView {
let root = create_node_ref::<Div>();
let target = create_node_ref::<Div>();
let (is_visible, set_visible) = create_signal(false);
let UseIntersectionObserverReturn {
is_active,
@ -18,7 +18,6 @@ fn Demo(cx: Scope) -> impl IntoView {
resume,
..
} = use_intersection_observer_with_options(
cx,
target,
move |entries, _| {
set_visible.set(entries[0].is_intersecting());
@ -26,8 +25,7 @@ fn Demo(cx: Scope) -> impl IntoView {
UseIntersectionObserverOptions::default().root(Some(root)),
);
view! { cx,
<div class="text-center">
view! { <div class="text-center">
<label class="checkbox">
<input
type="checkbox"
@ -89,7 +87,7 @@ fn main() {
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
mount_to(demo_or_body(), |cx| {
view! { cx, <Demo /> }
mount_to(demo_or_body(), || {
view! { <Demo /> }
})
}

2
examples/use_interval/Cargo.toml
View file

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

11
examples/use_interval/src/main.rs
View file

@ -3,11 +3,10 @@ use leptos_use::docs::demo_or_body;
use leptos_use::{use_interval, UseIntervalReturn};
#[component]
fn Demo(cx: Scope) -> impl IntoView {
let UseIntervalReturn { counter, .. } = use_interval(cx, 200);
fn Demo() -> impl IntoView {
let UseIntervalReturn { counter, .. } = use_interval(200);
view! { cx,
<div>
view! { <div>
<p>"Interval fired: " { counter }</p>
</div>
}
@ -17,7 +16,7 @@ fn main() {
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
mount_to(demo_or_body(), |cx| {
view! { cx, <Demo /> }
mount_to(demo_or_body(), || {
view! { <Demo /> }
})
}

2
examples/use_interval_fn/Cargo.toml
View file

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

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

@ -4,7 +4,7 @@ use leptos_use::use_interval_fn;
use leptos_use::utils::Pausable;
#[component]
fn Demo(cx: Scope) -> impl IntoView {
fn Demo() -> impl IntoView {
let greetings = [
"Hello",
"Hi",
@ -18,16 +18,15 @@ fn Demo(cx: Scope) -> impl IntoView {
"Привет",
];
let (word, set_word) = create_signal(cx, greetings[0]);
let (interval, set_interval) = create_signal(cx, 500_u64);
let (index, set_index) = create_signal(cx, 0);
let (word, set_word) = create_signal(greetings[0]);
let (interval, set_interval) = create_signal(500_u64);
let (index, set_index) = create_signal(0);
let Pausable {
pause,
resume,
is_active,
} = use_interval_fn(
cx,
move || {
set_index.set((index.get() + 1) % greetings.len());
set_word.set(greetings[index.get()]);
@ -35,8 +34,7 @@ fn Demo(cx: Scope) -> impl IntoView {
interval,
);
view! { cx,
<p>{move || word.get()}</p>
view! { <p>{move || word.get()}</p>
<p>
"Interval:"
<input
@ -48,17 +46,15 @@ fn Demo(cx: Scope) -> impl IntoView {
</p>
<Show
when=move || is_active.get()
fallback=move |cx| {
fallback=move || {
let resume = resume.clone();
view! {cx,
<button on:click=move |_| resume()>"Resume"</button>
view! { <button on:click=move |_| resume()>"Resume"</button>
}
}
>
{
let pause = pause.clone();
view! {cx,
<button on:click=move |_| pause()>"Pause"</button>
view! { <button on:click=move |_| pause()>"Pause"</button>
}
}
</Show>
@ -69,7 +65,7 @@ fn main() {
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
mount_to(demo_or_body(), |cx| {
view! { cx, <Demo /> }
mount_to(demo_or_body(), || {
view! { <Demo /> }
})
}

2
examples/use_intl_number_format/Cargo.toml
View file

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

17
examples/use_intl_number_format/src/main.rs
View file

@ -3,8 +3,8 @@ use leptos_use::docs::demo_or_body;
use leptos_use::{use_intl_number_format, NumberStyle, UseIntlNumberFormatOptions};
#[component]
fn Demo(cx: Scope) -> impl IntoView {
let (number, set_number) = create_signal(cx, 123456.78);
fn Demo() -> impl IntoView {
let (number, set_number) = create_signal(123456.78);
let de_nf = use_intl_number_format(
UseIntlNumberFormatOptions::default()
@ -12,7 +12,7 @@ fn Demo(cx: Scope) -> impl IntoView {
.style(NumberStyle::Currency)
.currency("EUR"),
);
let de_num = de_nf.format::<f64>(cx, number);
let de_num = de_nf.format::<f64>(number);
let ja_nf = use_intl_number_format(
UseIntlNumberFormatOptions::default()
@ -20,17 +20,16 @@ fn Demo(cx: Scope) -> impl IntoView {
.style(NumberStyle::Currency)
.currency("JPY"),
);
let ja_num = ja_nf.format::<f64>(cx, number);
let ja_num = ja_nf.format::<f64>(number);
let in_nf = use_intl_number_format(
UseIntlNumberFormatOptions::default()
.locale("en-IN")
.maximum_significant_digits(3),
);
let in_num = in_nf.format::<f64>(cx, number);
let in_num = in_nf.format::<f64>(number);
view! { cx,
<input
view! { <input
class="block"
prop:value=number
on:input=move |e| set_number(event_target_value(&e).parse().unwrap())
@ -50,7 +49,7 @@ fn main() {
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
mount_to(demo_or_body(), |cx| {
view! { cx, <Demo /> }
mount_to(demo_or_body(), || {
view! { <Demo /> }
})
}

2
examples/use_media_query/Cargo.toml
View file

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

13
examples/use_media_query/src/main.rs
View file

@ -3,12 +3,11 @@ use leptos_use::docs::{demo_or_body, BooleanDisplay};
use leptos_use::use_media_query;
#[component]
fn Demo(cx: Scope) -> impl IntoView {
let is_large_screen = use_media_query(cx, "(min-width: 1024px)");
let is_dark_preferred = use_media_query(cx, "(prefers-color-scheme: dark)");
fn Demo() -> impl IntoView {
let is_large_screen = use_media_query("(min-width: 1024px)");
let is_dark_preferred = use_media_query("(prefers-color-scheme: dark)");
view! { cx,
<p>"Is large screen: " <BooleanDisplay value=is_large_screen /></p>
view! { <p>"Is large screen: " <BooleanDisplay value=is_large_screen /></p>
<p>"Is dark preferred: " <BooleanDisplay value=is_dark_preferred /></p>
}
}
@ -17,7 +16,7 @@ fn main() {
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
mount_to(demo_or_body(), |cx| {
view! { cx, <Demo /> }
mount_to(demo_or_body(), || {
view! { <Demo /> }
})
}

2
examples/use_mouse/Cargo.toml
View file

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

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

@ -22,20 +22,18 @@ impl UseMouseEventExtractor for Extractor {
}
#[component]
fn Demo(cx: Scope) -> impl IntoView {
let el = create_node_ref::<Div>(cx);
fn Demo() -> impl IntoView {
let el = create_node_ref::<Div>();
let mouse_default = use_mouse(cx);
let mouse_default = use_mouse();
let mouse_with_extractor = use_mouse_with_options(
cx,
UseMouseOptions::default()
.target(el)
.coord_type(UseMouseCoordType::Custom(Extractor)),
);
view! { cx,
<div node_ref=el>
view! { <div node_ref=el>
<p class="font-semibold">"Basic Usage"</p>
<pre lang="yaml">
{ move || format!(r#" x: {}
@ -59,7 +57,7 @@ fn main() {
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
mount_to(demo_or_body(), |cx| {
view! { cx, <Demo /> }
mount_to(demo_or_body(), || {
view! { <Demo /> }
})
}

2
examples/use_mutation_observer/Cargo.toml
View file

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

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

@ -5,17 +5,16 @@ use leptos_use::use_mutation_observer_with_options;
use std::time::Duration;
#[component]
fn Demo(cx: Scope) -> impl IntoView {
let el = create_node_ref::<Div>(cx);
let (messages, set_messages) = create_signal(cx, vec![]);
let (class_name, set_class_name) = create_signal(cx, String::new());
let (style, set_style) = create_signal(cx, String::new());
fn Demo() -> impl IntoView {
let el = create_node_ref::<Div>();
let (messages, set_messages) = create_signal(vec![]);
let (class_name, set_class_name) = create_signal(String::new());
let (style, set_style) = create_signal(String::new());
let mut init = web_sys::MutationObserverInit::new();
init.attributes(true);
use_mutation_observer_with_options(
cx,
el,
move |mutations, _| {
if let Some(mutation) = mutations.first() {
@ -41,16 +40,14 @@ fn Demo(cx: Scope) -> impl IntoView {
Duration::from_millis(1550),
);
let enum_msgs = Signal::derive(cx, move || {
messages.get().into_iter().enumerate().collect::<Vec<_>>()
});
let enum_msgs =
Signal::derive(move || messages.get().into_iter().enumerate().collect::<Vec<_>>());
view! { cx,
<div node_ref=el class=move || class_name.get() style=move || style.get()>
view! { <div node_ref=el class=move || class_name.get() style=move || style.get()>
<For
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> }
view=|message| view! { <div>"Mutation Attribute: " <code>{message.1}</code></div> }
/>
</div>
}
@ -60,7 +57,7 @@ fn main() {
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
mount_to(demo_or_body(), |cx| {
view! { cx, <Demo /> }
mount_to(demo_or_body(), || {
view! { <Demo /> }
})
}

2
examples/use_raf_fn/Cargo.toml
View file

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

13
examples/use_raf_fn/src/main.rs
View file

@ -3,19 +3,18 @@ use leptos_use::docs::demo_or_body;
use leptos_use::{use_raf_fn, utils::Pausable};
#[component]
fn Demo(cx: Scope) -> impl IntoView {
let (count, set_count) = create_signal(cx, 0);
fn Demo() -> impl IntoView {
let (count, set_count) = create_signal(0);
let Pausable {
pause,
resume,
is_active,
} = use_raf_fn(cx, move |_| {
} = use_raf_fn(move |_| {
set_count.update(|count| *count += 1);
});
view! { cx,
<div>Count: { count }</div>
view! { <div>Count: { count }</div>
<button on:click=move |_| pause() disabled=move || !is_active()>Pause</button>
<button on:click=move |_| resume() disabled=is_active>Resume</button>
}
@ -25,7 +24,7 @@ fn main() {
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
mount_to(demo_or_body(), |cx| {
view! { cx, <Demo /> }
mount_to(demo_or_body(), || {
view! { <Demo /> }
})
}

2
examples/use_resize_observer/Cargo.toml
View file

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

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

@ -4,11 +4,11 @@ use leptos_use::docs::{demo_or_body, Note};
use leptos_use::use_resize_observer;
#[component]
fn Demo(cx: Scope) -> impl IntoView {
let el = create_node_ref::<Textarea>(cx);
let (text, set_text) = create_signal(cx, "".to_string());
fn Demo() -> impl IntoView {
let el = create_node_ref::<Textarea>();
let (text, set_text) = create_signal("".to_string());
use_resize_observer(cx, el, move |entries, _| {
use_resize_observer(el, move |entries, _| {
let rect = entries[0].content_rect();
set_text.set(format!(
"width: {:.0}\nheight: {:.0}",
@ -17,8 +17,7 @@ fn Demo(cx: Scope) -> impl IntoView {
));
});
view! { cx,
<Note class="mb-2">"Resize the box to see changes"</Note>
view! { <Note class="mb-2">"Resize the box to see changes"</Note>
<textarea
node_ref=el
readonly
@ -32,7 +31,7 @@ fn main() {
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
mount_to(demo_or_body(), |cx| {
view! { cx, <Demo /> }
mount_to(demo_or_body(), || {
view! { <Demo /> }
})
}

2
examples/use_round/Cargo.toml
View file

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

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

@ -3,13 +3,12 @@ use leptos_use::docs::demo_or_body;
use leptos_use::math::use_round;
#[component]
fn Demo(cx: Scope) -> impl IntoView {
let (value, set_value) = create_signal(cx, 5.95);
fn Demo() -> impl IntoView {
let (value, set_value) = create_signal(5.95);
let result: Signal<f64> = use_round(cx, value);
let result: Signal<f64> = use_round(value);
view! { cx,
<input
view! { <input
class="block"
prop:value=move || value.get()
on:input=move |e| set_value.set(event_target_value(&e).parse().unwrap())
@ -27,7 +26,7 @@ fn main() {
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
mount_to(demo_or_body(), |cx| {
view! { cx, <Demo /> }
mount_to(demo_or_body(), || {
view! { <Demo /> }
})
}

2
examples/use_scroll/Cargo.toml
View file

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

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

@ -6,10 +6,10 @@ use leptos_use::{use_scroll_with_options, ScrollBehavior, UseScrollOptions, UseS
use web_sys::Event;
#[component]
fn Demo(cx: Scope) -> impl IntoView {
let el = create_node_ref::<Div>(cx);
let (smooth, set_smooth) = create_signal(cx, false);
let behavior = Signal::derive(cx, move || {
fn Demo() -> impl IntoView {
let el = create_node_ref::<Div>();
let (smooth, set_smooth) = create_signal(false);
let behavior = Signal::derive(move || {
if smooth.get() {
ScrollBehavior::Smooth
} else {
@ -35,7 +35,6 @@ fn Demo(cx: Scope) -> impl IntoView {
directions,
..
} = use_scroll_with_options(
cx,
el,
UseScrollOptions::default()
.behavior(behavior)
@ -43,8 +42,7 @@ fn Demo(cx: Scope) -> impl IntoView {
.on_scroll(on_scroll.clone()),
);
view! { cx,
<div class="flex">
view! { <div class="flex">
<div node_ref=el class="w-[300px] h-[300px] m-auto my-auto overflow-scroll bg-gray-500/5 rounded">
<div class="w-[500px] h-[400px] relative">
<div class="absolute left-0 top-0 bg-gray-500/5 px-2 py-1">
@ -124,35 +122,35 @@ fn Demo(cx: Scope) -> impl IntoView {
<div class="text-right opacity-75">
"Top Arrived"
</div>
<BooleanDisplay value=Signal::derive(cx, move || arrived_state.get().top) />
<BooleanDisplay value=Signal::derive(move || arrived_state.get().top) />
<div class="text-right opacity-75">
"Right Arrived"
</div>
<BooleanDisplay value=Signal::derive(cx, move || arrived_state.get().right) />
<BooleanDisplay value=Signal::derive(move || arrived_state.get().right) />
<div class="text-right opacity-75">
"Bottom Arrived"
</div>
<BooleanDisplay value=Signal::derive(cx, move || arrived_state.get().bottom) />
<BooleanDisplay value=Signal::derive(move || arrived_state.get().bottom) />
<div class="text-right opacity-75">
"Left Arrived"
</div>
<BooleanDisplay value=Signal::derive(cx, move || arrived_state.get().left) />
<BooleanDisplay value=Signal::derive(move || arrived_state.get().left) />
<div class="text-right opacity-75">
"Scrolling Up"
</div>
<BooleanDisplay value=Signal::derive(cx, move || directions.get().top) />
<BooleanDisplay value=Signal::derive(move || directions.get().top) />
<div class="text-right opacity-75">
"Scrolling Right"
</div>
<BooleanDisplay value=Signal::derive(cx, move || directions.get().right) />
<BooleanDisplay value=Signal::derive(move || directions.get().right) />
<div class="text-right opacity-75">
"Scrolling Down"
</div>
<BooleanDisplay value=Signal::derive(cx, move || directions.get().bottom) />
<BooleanDisplay value=Signal::derive(move || directions.get().bottom) />
<div class="text-right opacity-75">
"Scrolling Left"
</div>
<BooleanDisplay value=Signal::derive(cx, move || directions.get().left) />
<BooleanDisplay value=Signal::derive(move || directions.get().left) />
</div>
</div>
</div>
@ -163,7 +161,7 @@ fn main() {
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
mount_to(demo_or_body(), |cx| {
view! { cx, <Demo /> }
mount_to(demo_or_body(), || {
view! { <Demo /> }
})
}

2
examples/use_storage/Cargo.toml
View file

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

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

@ -12,7 +12,7 @@ pub struct BananaState {
}
#[component]
fn Demo(cx: Scope) -> impl IntoView {
fn Demo() -> impl IntoView {
let the_default = BananaState {
name: "Banana".to_string(),
color: "Yellow".to_string(),
@ -20,12 +20,11 @@ fn Demo(cx: Scope) -> impl IntoView {
count: 0,
};
let (state, set_state, _) = use_storage(cx, "banana-state", the_default.clone());
let (state, set_state, _) = use_storage("banana-state", the_default.clone());
let (state2, ..) = use_storage(cx, "banana-state", the_default.clone());
let (state2, ..) = use_storage("banana-state", the_default.clone());
view! { cx,
<input
view! { <input
class="block"
prop:value=move || state.get().name
on:input=move |e| set_state.update(|s| s.name = event_target_value(&e))
@ -60,7 +59,7 @@ fn Demo(cx: Scope) -> impl IntoView {
{ move || format!("{:#?}", state2.get()) }
</pre>
<Note>"The values are persistant. When you reload the page the values will be the same."</Note>
<Note>"The values are persistent. When you reload the page the values will be the same."</Note>
}
}
@ -68,7 +67,7 @@ fn main() {
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
mount_to(demo_or_body(), |cx| {
view! { cx, <Demo /> }
mount_to(demo_or_body(), || {
view! { <Demo /> }
})
}

2
examples/use_throttle_fn/Cargo.toml
View file

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

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

@ -3,14 +3,16 @@ use leptos_use::docs::{demo_or_body, Note};
use leptos_use::use_throttle_fn;
#[component]
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);
fn Demo() -> impl IntoView {
let (click_count, set_click_count) = create_signal(0);
let (throttled_count, set_throttled_count) = create_signal(0);
let throttled_fn = use_throttle_fn(move || set_throttled_count.set(throttled_count.get_untracked() + 1), 1000.0);
let throttled_fn = use_throttle_fn(
move || set_throttled_count.set(throttled_count.get_untracked() + 1),
1000.0,
);
view! { cx,
<button
view! { <button
on:click=move |_| {
set_click_count.set(click_count.get_untracked() + 1);
throttled_fn();
@ -28,7 +30,7 @@ fn main() {
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
mount_to(demo_or_body(), |cx| {
view! { cx, <Demo /> }
mount_to(demo_or_body(), || {
view! { <Demo /> }
})
}

2
examples/use_websocket/Cargo.toml
View file

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

32
examples/use_websocket/src/main.rs
View file

@ -8,8 +8,8 @@ use leptos_use::{
use web_sys::{CloseEvent, Event};
#[component]
fn Demo(cx: Scope) -> impl IntoView {
let (history, set_history) = create_signal(cx, vec![]);
fn Demo() -> impl IntoView {
let (history, set_history) = create_signal(vec![]);
fn update_history(&history: &WriteSignal<Vec<String>>, message: String) {
let _ = &history.update(|history: &mut Vec<_>| history.push(message));
@ -27,7 +27,7 @@ fn Demo(cx: Scope) -> impl IntoView {
open,
close,
..
} = use_websocket(cx, "wss://echo.websocket.events/".to_string());
} = use_websocket("wss://echo.websocket.events/".to_string());
let send_message = move |_| {
let m = "Hello, world!".to_string();
@ -52,13 +52,13 @@ fn Demo(cx: Scope) -> impl IntoView {
close();
};
create_effect(cx, move |_| {
create_effect(move |_| {
if let Some(m) = message.get() {
update_history(&set_history, format! {"[message]: {:?}", m});
};
});
create_effect(cx, move |_| {
create_effect(move |_| {
if let Some(m) = message_bytes.get() {
update_history(&set_history, format! {"[message_bytes]: {:?}", m});
};
@ -68,7 +68,7 @@ fn Demo(cx: Scope) -> impl IntoView {
// use_websocket_with_options
// ----------------------------
let (history2, set_history2) = create_signal(cx, vec![]);
let (history2, set_history2) = create_signal(vec![]);
let on_open_callback = move |e: Event| {
set_history2.update(|history: &mut Vec<_>| {
@ -107,7 +107,6 @@ fn Demo(cx: Scope) -> impl IntoView {
message_bytes: message_bytes2,
..
} = use_websocket_with_options(
cx,
"wss://echo.websocket.events/".to_string(),
UseWebSocketOptions::default()
.manual(true)
@ -139,13 +138,13 @@ fn Demo(cx: Scope) -> impl IntoView {
let status2 = move || ready_state2.get().to_string();
create_effect(cx, move |_| {
create_effect(move |_| {
if let Some(m) = message2.get() {
update_history(&set_history2, format! {"[message]: {:?}", m});
};
});
create_effect(cx, move |_| {
create_effect(move |_| {
if let Some(m) = message_bytes2.get() {
update_history(&set_history2, format! {"[message_bytes]: {:?}", m});
};
@ -153,8 +152,7 @@ fn Demo(cx: Scope) -> impl IntoView {
let connected2 = move || ready_state2.get() == UseWebSocketReadyState::Open;
view! { cx,
<div class="container">
view! { <div class="container">
<div class="flex flex-col lg:flex-row gap-4">
<div class="w-full lg:w-1/2">
<h1 class="text-xl lg:text-4xl mb-2">"use_websocket"</h1>
@ -170,8 +168,8 @@ fn Demo(cx: Scope) -> impl IntoView {
<For
each=move || history.get().into_iter().enumerate()
key=|(index, _)| *index
view=move |cx, (_, message)| {
view! {cx, <div>{message}</div> }
view=move |(_, message)| {
view! { <div>{message}</div> }
}
/>
@ -191,8 +189,8 @@ fn Demo(cx: Scope) -> impl IntoView {
<For
each=move || history2.get().into_iter().enumerate()
key=|(index, _)| *index
view=move |cx, (_, message)| {
view! {cx, <li>{message}</li> }
view=move |(_, message)| {
view! { <li>{message}</li> }
}
/>
</ul>
@ -208,7 +206,7 @@ fn main() {
_ = console_log::init_with_level(log::Level::Info);
console_error_panic_hook::set_once();
mount_to(demo_or_body(), |cx| {
view! { cx, <Demo /> }
mount_to(demo_or_body(), || {
view! { <Demo /> }
})
}

2
examples/use_window_focus/Cargo.toml
View file

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

23
examples/use_window_focus/src/main.rs
View file

@ -1,25 +1,28 @@
use leptos::*;
use leptos_use::docs::demo_or_body;
use leptos_use::{use_window_focus, watch};
use leptos_use::use_window_focus;
#[component]
fn Demo(cx: Scope) -> impl IntoView {
fn Demo() -> impl IntoView {
let start_message = "💡 Click somewhere outside of the document to unfocus.";
let (message, set_message) = create_signal(cx, start_message);
let (message, set_message) = create_signal(start_message);
let focused = use_window_focus(cx);
let focused = use_window_focus();
let _ = watch(cx, focused, move |focused, _, _| {
let _ = watch(
focused,
move |focused, _, _| {
if *focused {
set_message(start_message);
} else {
set_message("ℹ Tab is unfocused")
}
});
},
false,
);
view! { cx,
<div>{ message }</div>
view! { <div>{ message }</div>
}
}
@ -27,7 +30,7 @@ fn main() {
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
mount_to(demo_or_body(), |cx| {
view! { cx, <Demo /> }
mount_to(demo_or_body(), || {
view! { <Demo /> }
})
}

2
examples/use_window_scroll/Cargo.toml
View file

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

11
examples/use_window_scroll/src/main.rs
View file

@ -3,8 +3,8 @@ use leptos_use::docs::{demo_or_body, Note};
use leptos_use::use_window_scroll;
#[component]
fn Demo(cx: Scope) -> impl IntoView {
let (x, y) = use_window_scroll(cx);
fn Demo() -> impl IntoView {
let (x, y) = use_window_scroll();
let div = document().create_element("div").unwrap();
div.set_attribute(
@ -15,8 +15,7 @@ fn Demo(cx: Scope) -> impl IntoView {
document().body().unwrap().append_child(&div).unwrap();
view! { cx,
<div>See scroll values in the lower right corner of the screen.</div>
view! { <div>See scroll values in the lower right corner of the screen.</div>
<div class="float m-5 area shadow-lg">
<Note class="mb-2">Scroll value</Note>
<div>
@ -31,7 +30,7 @@ fn main() {
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
mount_to(demo_or_body(), |cx| {
view! { cx, <Demo /> }
mount_to(demo_or_body(), || {
view! { <Demo /> }
})
}

2
examples/watch_debounced/Cargo.toml
View file

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

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

@ -3,12 +3,11 @@ use leptos_use::docs::{demo_or_body, Note};
use leptos_use::{watch_debounced_with_options, WatchDebouncedOptions};
#[component]
fn Demo(cx: Scope) -> impl IntoView {
let (input, set_input) = create_signal(cx, "".to_string());
let (updated, set_updated) = create_signal(cx, 0);
fn Demo() -> impl IntoView {
let (input, set_input) = create_signal("".to_string());
let (updated, set_updated) = create_signal(0);
let _ = watch_debounced_with_options(
cx,
move || input.get(),
move |_, _, _| {
set_updated.update(|x| *x += 1);
@ -17,8 +16,7 @@ fn Demo(cx: Scope) -> impl IntoView {
WatchDebouncedOptions::default().max_wait(Some(5000.0)),
);
view! { cx,
<input
view! { <input
class="block"
prop:value=move || input.get()
on:input=move |e| set_input.set(event_target_value(&e))
@ -40,7 +38,7 @@ fn main() {
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
mount_to(demo_or_body(), |cx| {
view! { cx, <Demo /> }
mount_to(demo_or_body(), || {
view! { <Demo /> }
})
}

2
examples/watch_pausable/Cargo.toml
View file

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

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

@ -4,10 +4,10 @@ use leptos_use::docs::{demo_or_body, Note};
use leptos_use::{watch_pausable, WatchPausableReturn};
#[component]
fn Demo(cx: Scope) -> impl IntoView {
let input = create_node_ref::<Input>(cx);
let (log, set_log) = create_signal(cx, "".to_string());
let (source, set_source) = create_signal(cx, "".to_string());
fn Demo() -> impl IntoView {
let input = create_node_ref::<Input>();
let (log, set_log) = create_signal("".to_string());
let (source, set_source) = create_signal("".to_string());
let WatchPausableReturn {
pause,
@ -15,7 +15,6 @@ fn Demo(cx: Scope) -> impl IntoView {
is_active,
..
} = watch_pausable(
cx,
move || source.get(),
move |v, _, _| {
set_log.update(|log| *log = format!("{log}Changed to \"{v}\"\n"));
@ -34,8 +33,7 @@ fn Demo(cx: Scope) -> impl IntoView {
resume();
};
view! { cx,
<Note class="mb-2">"Type something below to trigger the watch"</Note>
view! { <Note class="mb-2">"Type something below to trigger the watch"</Note>
<input
node_ref=input
class="block"
@ -58,7 +56,7 @@ fn main() {
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
mount_to(demo_or_body(), |cx| {
view! { cx, <Demo /> }
mount_to(demo_or_body(), || {
view! { <Demo /> }
})
}

2
examples/watch_throttled/Cargo.toml
View file

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

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

@ -3,12 +3,11 @@ use leptos_use::docs::{demo_or_body, Note};
use leptos_use::watch_throttled;
#[component]
fn Demo(cx: Scope) -> impl IntoView {
let (input, set_input) = create_signal(cx, "".to_string());
let (updated, set_updated) = create_signal(cx, 0);
fn Demo() -> impl IntoView {
let (input, set_input) = create_signal("".to_string());
let (updated, set_updated) = create_signal(0);
let _ = watch_throttled(
cx,
move || input.get(),
move |_, _, _| {
set_updated.update(|x| *x += 1);
@ -16,8 +15,7 @@ fn Demo(cx: Scope) -> impl IntoView {
1000.0,
);
view! { cx,
<input
view! { <input
class="block"
prop:value=move || input.get()
on:input=move |e| set_input.set(event_target_value(&e))
@ -37,7 +35,7 @@ fn main() {
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
mount_to(demo_or_body(), |cx| {
view! { cx, <Demo /> }
mount_to(demo_or_body(), || {
view! { <Demo /> }
})
}

53
src/core/element_maybe_signal.rs
View file

@ -127,35 +127,26 @@ where
// From static element //////////////////////////////////////////////////////////////
impl<T, E> From<(Scope, T)> for ElementMaybeSignal<T, E>
impl<T, E> From<T> for ElementMaybeSignal<T, E>
where
T: Into<E> + Clone + 'static,
{
fn from(value: (Scope, T)) -> Self {
ElementMaybeSignal::Static(Some(value.1))
fn from(value: T) -> Self {
ElementMaybeSignal::Static(Some(value))
}
}
impl<T, E> From<(Scope, Option<T>)> for ElementMaybeSignal<T, E>
impl<T, E> From<Option<T>> for ElementMaybeSignal<T, E>
where
T: Into<E> + Clone + 'static,
{
fn from(target: (Scope, Option<T>)) -> Self {
ElementMaybeSignal::Static(target.1)
fn from(target: Option<T>) -> Self {
ElementMaybeSignal::Static(target)
}
}
// From string (selector) ///////////////////////////////////////////////////////////////
impl<'a, E> From<(Scope, &'a str)> for ElementMaybeSignal<web_sys::Element, E>
where
E: From<web_sys::Element> + 'static,
{
fn from(target: (Scope, &'a str)) -> Self {
Self::Static(document().query_selector(target.1).unwrap_or_default())
}
}
impl<'a, E> From<&'a str> for ElementMaybeSignal<web_sys::Element, E>
where
E: From<web_sys::Element> + 'static,
@ -174,17 +165,13 @@ where
}
}
impl<E> From<(Scope, Signal<String>)> for ElementMaybeSignal<web_sys::Element, E>
impl<E> From<Signal<String>> for ElementMaybeSignal<web_sys::Element, E>
where
E: From<web_sys::Element> + 'static,
{
fn from(target: (Scope, Signal<String>)) -> Self {
let (cx, signal) = target;
fn from(signal: Signal<String>) -> Self {
Self::Dynamic(
create_memo(cx, move |_| {
document().query_selector(&signal.get()).unwrap_or_default()
})
create_memo(move |_| document().query_selector(&signal.get()).unwrap_or_default())
.into(),
)
}
@ -194,12 +181,12 @@ where
macro_rules! impl_from_signal_option {
($ty:ty) => {
impl<T, E> From<(Scope, $ty)> for ElementMaybeSignal<T, E>
impl<T, E> From<$ty> for ElementMaybeSignal<T, E>
where
T: Into<E> + Clone + 'static,
{
fn from(target: (Scope, $ty)) -> Self {
Self::Dynamic(target.1.into())
fn from(target: $ty) -> Self {
Self::Dynamic(target.into())
}
}
};
@ -212,14 +199,12 @@ impl_from_signal_option!(Memo<Option<T>>);
macro_rules! impl_from_signal {
($ty:ty) => {
impl<T, E> From<(Scope, $ty)> for ElementMaybeSignal<T, E>
impl<T, E> From<$ty> for ElementMaybeSignal<T, E>
where
T: Into<E> + Clone + 'static,
{
fn from(target: (Scope, $ty)) -> Self {
let (cx, signal) = target;
Self::Dynamic(Signal::derive(cx, move || Some(signal.get())))
fn from(signal: $ty) -> Self {
Self::Dynamic(Signal::derive(move || Some(signal.get())))
}
}
};
@ -234,14 +219,12 @@ impl_from_signal!(Memo<T>);
macro_rules! impl_from_node_ref {
($ty:ty) => {
impl<R> From<(Scope, NodeRef<R>)> for ElementMaybeSignal<$ty, $ty>
impl<R> From<NodeRef<R>> for ElementMaybeSignal<$ty, $ty>
where
R: ElementDescriptor + Clone + 'static,
{
fn from(target: (Scope, NodeRef<R>)) -> Self {
let (cx, node_ref) = target;
Self::Dynamic(Signal::derive(cx, move || {
fn from(node_ref: NodeRef<R>) -> Self {
Self::Dynamic(Signal::derive(move || {
node_ref.get().map(move |el| {
let el = el.into_any();
let el: $ty = el.deref().clone().into();

106
src/core/elements_maybe_signal.rs
View file

@ -128,32 +128,32 @@ where
// From single static element //////////////////////////////////////////////////////////////
impl<T, E> From<(Scope, T)> for ElementsMaybeSignal<T, E>
impl<T, E> From<T> for ElementsMaybeSignal<T, E>
where
T: Into<E> + Clone + 'static,
{
fn from(value: (Scope, T)) -> Self {
ElementsMaybeSignal::Static(vec![Some(value.1)])
fn from(value: T) -> Self {
ElementsMaybeSignal::Static(vec![Some(value)])
}
}
impl<T, E> From<(Scope, Option<T>)> for ElementsMaybeSignal<T, E>
impl<T, E> From<Option<T>> for ElementsMaybeSignal<T, E>
where
T: Into<E> + Clone + 'static,
{
fn from(target: (Scope, Option<T>)) -> Self {
ElementsMaybeSignal::Static(vec![target.1])
fn from(target: Option<T>) -> Self {
ElementsMaybeSignal::Static(vec![target])
}
}
// From string (selector) ///////////////////////////////////////////////////////////////
impl<'a, E> From<(Scope, &'a str)> for ElementsMaybeSignal<web_sys::Node, E>
impl<'a, E> From<&'a str> for ElementsMaybeSignal<web_sys::Node, E>
where
E: From<web_sys::Node> + 'static,
{
fn from(target: (Scope, &'a str)) -> Self {
if let Ok(node_list) = document().query_selector_all(target.1) {
fn from(target: &'a str) -> Self {
if let Ok(node_list) = document().query_selector_all(target) {
let mut list = Vec::with_capacity(node_list.length() as usize);
for i in 0..node_list.length() {
let node = node_list.get(i).expect("checked the range");
@ -167,15 +167,13 @@ where
}
}
impl<E> From<(Scope, Signal<String>)> for ElementsMaybeSignal<web_sys::Node, E>
impl<E> From<Signal<String>> for ElementsMaybeSignal<web_sys::Node, E>
where
E: From<web_sys::Node> + 'static,
{
fn from(target: (Scope, Signal<String>)) -> Self {
let (cx, signal) = target;
fn from(signal: Signal<String>) -> Self {
Self::Dynamic(
create_memo(cx, move |_| {
create_memo(move |_| {
if let Ok(node_list) = document().query_selector_all(&signal.get()) {
let mut list = Vec::with_capacity(node_list.length() as usize);
for i in 0..node_list.length() {
@ -196,13 +194,12 @@ where
macro_rules! impl_from_signal_option {
($ty:ty) => {
impl<T, E> From<(Scope, $ty)> for ElementsMaybeSignal<T, E>
impl<T, E> From<$ty> for ElementsMaybeSignal<T, E>
where
T: Into<E> + Clone + 'static,
{
fn from(target: (Scope, $ty)) -> Self {
let (cx, signal) = target;
Self::Dynamic(Signal::derive(cx, move || vec![signal.get()]))
fn from(signal: $ty) -> Self {
Self::Dynamic(Signal::derive(move || vec![signal.get()]))
}
}
};
@ -215,14 +212,12 @@ impl_from_signal_option!(Memo<Option<T>>);
macro_rules! impl_from_signal {
($ty:ty) => {
impl<T, E> From<(Scope, $ty)> for ElementsMaybeSignal<T, E>
impl<T, E> From<$ty> for ElementsMaybeSignal<T, E>
where
T: Into<E> + Clone + 'static,
{
fn from(target: (Scope, $ty)) -> Self {
let (cx, signal) = target;
Self::Dynamic(Signal::derive(cx, move || vec![Some(signal.get())]))
fn from(signal: $ty) -> Self {
Self::Dynamic(Signal::derive(move || vec![Some(signal.get())]))
}
}
};
@ -237,14 +232,12 @@ impl_from_signal!(Memo<T>);
macro_rules! impl_from_node_ref {
($ty:ty) => {
impl<R> From<(Scope, NodeRef<R>)> for ElementsMaybeSignal<$ty, $ty>
impl<R> From<NodeRef<R>> for ElementsMaybeSignal<$ty, $ty>
where
R: ElementDescriptor + Clone + 'static,
{
fn from(target: (Scope, NodeRef<R>)) -> Self {
let (cx, node_ref) = target;
Self::Dynamic(Signal::derive(cx, move || {
fn from(node_ref: NodeRef<R>) -> Self {
Self::Dynamic(Signal::derive(move || {
vec![node_ref.get().map(move |el| {
let el = el.into_any();
let el: $ty = el.deref().clone().into();
@ -261,74 +254,69 @@ impl_from_node_ref!(web_sys::Element);
// From multiple static elements //////////////////////////////////////////////////////////////
impl<T, E> From<(Scope, &[T])> for ElementsMaybeSignal<T, E>
impl<T, E> From<&[T]> for ElementsMaybeSignal<T, E>
where
T: Into<E> + Clone + 'static,
{
fn from(target: (Scope, &[T])) -> Self {
Self::Static(target.1.iter().map(|t| Some(t.clone())).collect())
fn from(target: &[T]) -> Self {
Self::Static(target.iter().map(|t| Some(t.clone())).collect())
}
}
impl<T, E> From<(Scope, &[Option<T>])> for ElementsMaybeSignal<T, E>
impl<T, E> From<&[Option<T>]> for ElementsMaybeSignal<T, E>
where
T: Into<E> + Clone + 'static,
{
fn from(target: (Scope, &[Option<T>])) -> Self {
Self::Static(target.1.to_vec())
fn from(target: &[Option<T>]) -> Self {
Self::Static(target.to_vec())
}
}
// From signal of vec ////////////////////////////////////////////////////////////////
impl<T, E> From<(Scope, Signal<Vec<T>>)> for ElementsMaybeSignal<T, E>
impl<T, E> From<Signal<Vec<T>>> for ElementsMaybeSignal<T, E>
where
T: Into<E> + Clone + 'static,
{
fn from(target: (Scope, Signal<Vec<T>>)) -> Self {
let (cx, signal) = target;
Self::Dynamic(Signal::derive(cx, move || {
fn from(signal: Signal<Vec<T>>) -> Self {
Self::Dynamic(Signal::derive(move || {
signal.get().into_iter().map(|t| Some(t)).collect()
}))
}
}
impl<T, E> From<(Scope, Signal<Vec<Option<T>>>)> for ElementsMaybeSignal<T, E>
impl<T, E> From<Signal<Vec<Option<T>>>> for ElementsMaybeSignal<T, E>
where
T: Into<E> + Clone + 'static,
{
fn from(target: (Scope, Signal<Vec<Option<T>>>)) -> Self {
Self::Dynamic(target.1)
fn from(target: Signal<Vec<Option<T>>>) -> Self {
Self::Dynamic(target)
}
}
// From multiple signals //////////////////////////////////////////////////////////////
impl<T, E> From<(Scope, &[Signal<T>])> for ElementsMaybeSignal<T, E>
impl<T, E> From<&[Signal<T>]> for ElementsMaybeSignal<T, E>
where
T: Into<E> + Clone + 'static,
{
fn from(target: (Scope, &[Signal<T>])) -> Self {
let (cx, list) = target;
fn from(list: &[Signal<T>]) -> Self {
let list = list.to_vec();
Self::Dynamic(Signal::derive(cx, move || {
Self::Dynamic(Signal::derive(move || {
list.iter().map(|t| Some(t.get())).collect()
}))
}
}
impl<T, E> From<(Scope, &[Signal<Option<T>>])> for ElementsMaybeSignal<T, E>
impl<T, E> From<&[Signal<Option<T>>]> for ElementsMaybeSignal<T, E>
where
T: Into<E> + Clone + 'static,
{
fn from(target: (Scope, &[Signal<Option<T>>])) -> Self {
let (cx, list) = target;
fn from(list: &[Signal<Option<T>>]) -> Self {
let list = list.to_vec();
Self::Dynamic(Signal::derive(cx, move || {
Self::Dynamic(Signal::derive(move || {
list.iter().map(|t| t.get()).collect()
}))
}
@ -338,16 +326,14 @@ where
macro_rules! impl_from_multi_node_ref {
($ty:ty) => {
impl<R> From<(Scope, &[NodeRef<R>])> for ElementsMaybeSignal<$ty, $ty>
impl<R> From<&[NodeRef<R>]> for ElementsMaybeSignal<$ty, $ty>
where
R: ElementDescriptor + Clone + 'static,
{
fn from(target: (Scope, &[NodeRef<R>])) -> Self {
let (cx, node_refs) = target;
fn from(node_refs: &[NodeRef<R>]) -> Self {
let node_refs = node_refs.to_vec();
Self::Dynamic(Signal::derive(cx, move || {
Self::Dynamic(Signal::derive(move || {
node_refs
.iter()
.map(|node_ref| {
@ -369,16 +355,14 @@ impl_from_multi_node_ref!(web_sys::Element);
// From ElementMaybeSignal //////////////////////////////////////////////////////////////
impl<T, E> From<(Scope, ElementMaybeSignal<T, E>)> for ElementsMaybeSignal<T, E>
impl<T, E> From<ElementMaybeSignal<T, E>> for ElementsMaybeSignal<T, E>
where
T: Into<E> + Clone + 'static,
{
fn from(target: (Scope, ElementMaybeSignal<T, E>)) -> Self {
let (cx, signal) = target;
fn from(signal: ElementMaybeSignal<T, E>) -> Self {
match signal {
ElementMaybeSignal::Dynamic(signal) => {
Self::Dynamic(Signal::derive(cx, move || vec![signal.get()]))
Self::Dynamic(Signal::derive(move || vec![signal.get()]))
}
ElementMaybeSignal::Static(el) => Self::Static(vec![el]),
ElementMaybeSignal::_Phantom(_) => unreachable!(),

8
src/core/maybe_rw_signal.rs
View file

@ -77,12 +77,12 @@ impl From<&str> for MaybeRwSignal<String> {
}
impl<T: Clone> MaybeRwSignal<T> {
pub fn into_signal(self, cx: Scope) -> (Signal<T>, WriteSignal<T>) {
pub fn into_signal(self) -> (Signal<T>, WriteSignal<T>) {
match self {
Self::DynamicRead(s) => {
let (r, w) = create_signal(cx, s.get_untracked());
let (r, w) = create_signal(s.get_untracked());
create_effect(cx, move |_| {
create_effect(move |_| {
w.update(move |w| {
*w = s.get();
});
@ -92,7 +92,7 @@ impl<T: Clone> MaybeRwSignal<T> {
}
Self::DynamicRw(r, w) => (r, w),
Self::Static(v) => {
let (r, w) = create_signal(cx, v.clone());
let (r, w) = create_signal(v.clone());
(Signal::from(r), w)
}
}

4
src/docs/boolean_display.rs
View file

@ -2,7 +2,6 @@ use leptos::*;
#[component]
pub fn BooleanDisplay(
cx: Scope,
#[prop(into)] value: MaybeSignal<bool>,
#[prop(optional, into)] class: String,
#[prop(default = "true")] true_str: &'static str,
@ -19,8 +18,7 @@ pub fn BooleanDisplay(
)
};
view! { cx,
<span class=class>
view! { <span class=class>
{ move || if value.get() { true_str} else { false_str } }
</span>
}

5
src/docs/note.rs
View file

@ -1,10 +1,9 @@
use leptos::*;
#[component]
pub fn Note(cx: Scope, #[prop(optional, into)] class: String, children: Children) -> impl IntoView {
pub fn Note(#[prop(optional, into)] class: String, children: Children) -> impl IntoView {
let class = format!("note {class}");
view! { cx,
<div class=class>{ children(cx) }</div>
view! { <div class=class>{ children() }</div>
}
}

7
src/is_err.rs
View file

@ -11,15 +11,14 @@ use_derive_signal!(
/// # use leptos_use::is_err;
/// #
/// # #[component]
/// # fn Demo(cx: Scope) -> impl IntoView {
/// # fn Demo() -> impl IntoView {
/// let (example, set_example) = create_signal(
/// cx,
/// if js_sys::Math::random() < 0.5 { Ok("Example") } else { Err(()) }
/// );
///
/// let is_error = is_err(cx, example);
/// let is_error = is_err(example);
/// #
/// # view! { cx, }
/// # view! { }
/// # }
/// ```
is_err<Result<T, ()>, T: 'static> -> bool

7
src/is_none.rs
View file

@ -11,15 +11,14 @@ use_derive_signal!(
/// # use leptos_use::is_none;
/// #
/// # #[component]
/// # fn Demo(cx: Scope) -> impl IntoView {
/// # fn Demo() -> impl IntoView {
/// let (example, set_example) = create_signal(
/// cx,
/// if js_sys::Math::random() < 0.5 { Some("Example") } else { None }
/// );
///
/// let is_empty = is_none(cx, example);
/// let is_empty = is_none(example);
/// #
/// # view! { cx, }
/// # view! { }
/// # }
/// ```
is_none<Option<T>, T: 'static> -> bool

Some files were not shown because too many files have changed in this diff Show more