ported to leptos 0.5 alpha

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

13
.idea/icon.svg generated
View file

@ -2,6 +2,17 @@
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> "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" <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="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" <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;"/> 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" <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;"/> style="fill:#e1393a;fill-rule:nonzero;"/>
<path class="black" <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" 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> </svg>

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$/examples/use_websocket/src" isTestSource="false" />
<sourceFolder url="file://$MODULE_DIR$/testtest/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/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$/examples/use_event_listener/target" />
<excludeFolder url="file://$MODULE_DIR$/target" /> <excludeFolder url="file://$MODULE_DIR$/target" />
<excludeFolder url="file://$MODULE_DIR$/docs/book/book" /> <excludeFolder url="file://$MODULE_DIR$/docs/book/book" />

View file

@ -12,6 +12,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Braking Changes 🛠 ### 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` - `watch` is now deprecated in favor of `leptos::watch`. `watch_with_options`
will continue to exist. will continue to exist.

View file

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

View file

@ -32,8 +32,8 @@ use leptos::*;
use leptos_use::{use_mouse, UseMouseReturn}; use leptos_use::{use_mouse, UseMouseReturn};
#[component] #[component]
fn Demo(cx: Scope) -> impl IntoView { fn Demo() -> impl IntoView {
let UseMouseReturn { x, y, .. } = use_mouse(cx); let UseMouseReturn { x, y, .. } = use_mouse();
view! { cx, view! { cx,
{x} " x " {y} {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.3 | 0.3 |
| 0.4, 0.5, 0.6 | 0.4 | | 0.4, 0.5, 0.6 | 0.4 |
| main | 0.5.0-alpha |

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -4,16 +4,15 @@ use leptos_use::docs::demo_or_body;
use leptos_use::on_click_outside; use leptos_use::on_click_outside;
#[component] #[component]
fn Demo(cx: Scope) -> impl IntoView { fn Demo() -> impl IntoView {
let (show_modal, set_show_modal) = create_signal(cx, false); let (show_modal, set_show_modal) = create_signal(false);
let modal_ref = create_node_ref::<Div>(cx); 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, view! { <button on:click=move |_| set_show_modal.set(true)>"Open Modal"</button>
<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 node_ref=modal_ref class="modal">
<div class="inner"> <div class="inner">
<button class="button small" title="Close" on:click=move |_| set_show_modal.set(false)>"𝖷"</button> <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_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once(); console_error_panic_hook::set_once();
mount_to(demo_or_body(), |cx| { mount_to(demo_or_body(), || {
view! { cx, <Demo /> } view! { <Demo /> }
}) })
} }

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -20,7 +20,7 @@ cfg_if! { if #[cfg(feature = "ssr")] {
if res.status() == StatusCode::OK { if res.status() == StatusCode::OK {
res.into_response() res.into_response()
} else { } 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() handler(req).await.into_response()
} }
} }

View file

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

View file

@ -17,12 +17,12 @@ async fn main() {
let conf = get_configuration(None).await.unwrap(); let conf = get_configuration(None).await.unwrap();
let leptos_options = conf.leptos_options; let leptos_options = conf.leptos_options;
let addr = leptos_options.site_addr; 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 // build our application with a route
let app = Router::new() let app = Router::new()
.route("/api/*fn_name", post(leptos_axum::handle_server_fns)) .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) .fallback(file_and_error_handler)
.with_state(leptos_options); .with_state(leptos_options);

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -12,7 +12,7 @@ pub struct BananaState {
} }
#[component] #[component]
fn Demo(cx: Scope) -> impl IntoView { fn Demo() -> impl IntoView {
let the_default = BananaState { let the_default = BananaState {
name: "Banana".to_string(), name: "Banana".to_string(),
color: "Yellow".to_string(), color: "Yellow".to_string(),
@ -20,12 +20,11 @@ fn Demo(cx: Scope) -> impl IntoView {
count: 0, 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, view! { <input
<input
class="block" class="block"
prop:value=move || state.get().name prop:value=move || state.get().name
on:input=move |e| set_state.update(|s| s.name = event_target_value(&e)) 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()) } { move || format!("{:#?}", state2.get()) }
</pre> </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_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once(); console_error_panic_hook::set_once();
mount_to(demo_or_body(), |cx| { mount_to(demo_or_body(), || {
view! { cx, <Demo /> } view! { <Demo /> }
}) })
} }

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -1,10 +1,9 @@
use leptos::*; use leptos::*;
#[component] #[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}"); let class = format!("note {class}");
view! { cx, view! { <div class=class>{ children() }</div>
<div class=class>{ children(cx) }</div>
} }
} }

View file

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

View file

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

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