adam/leptos-use
1
0
Fork 0
mirror of https://github.com/adoyle0/leptos-use.git synced 2025-02-02 10:54:15 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'main' into use_webtransport

Browse source
This commit is contained in:
Maccesch 2023-09-30 18:31:54 +01:00
commit 0e45b9a9c6
64 changed files with 292 additions and 141 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
CHANGELOG.md
View file

@ -3,7 +3,7 @@
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## [Unreleased] - ## [0.7.0] - 2023-09-30
### New Functions 🚀 ### New Functions 🚀
@ -29,12 +29,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
a `web_sys::MutationObserverInit`. a `web_sys::MutationObserverInit`.
- `use_websocket`: - `use_websocket`:
- takes now a `&str` instead of a `String` as its `url` parameter. - takes now a `&str` instead of a `String` as its `url` parameter.
- same for the returned `send` method.
- The `ready_state` return type is now renamed to `ConnectionReadyState` instead of `UseWebSocketReadyState`. - The `ready_state` return type is now renamed to `ConnectionReadyState` instead of `UseWebSocketReadyState`.
- The returned signals `ready_state`, `message`, `message_bytes` have now the type - The returned signals `ready_state`, `message`, `message_bytes` have now the type
`Signal<...>` instead of `ReadSignal<...>` to make them more consistent with other functions. `Signal<...>` instead of `ReadSignal<...>` to make them more consistent with other functions.
- The options `reconnect_limit` and `reconnect_interval` now take a `u64` instead of `Option<u64>` to improve DX. - The options `reconnect_limit` and `reconnect_interval` now take a `u64` instead of `Option<u64>` to improve DX.
- The option `manual` has been renamed to `immediate` to make it more consistent with other functions. - The option `manual` has been renamed to `immediate` to make it more consistent with other functions.
To port please note that `immediate` is the inverse of `manual` (`immediate` = `!manual`). To port please note that `immediate` is the inverse of `manual` (`immediate` = `!manual`).
- Added documentation how pass it ergonomically as context.
- `use_color_mode`: - `use_color_mode`:
- The optional `on_changed` handler parameters have changed slightly. Please refer to the docs for more details. - The optional `on_changed` handler parameters have changed slightly. Please refer to the docs for more details.
- Throttled or debounced functions cannot be `FnOnce` anymore. - Throttled or debounced functions cannot be `FnOnce` anymore.
@ -45,8 +47,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- `use_websocket` can use relative urls now - `use_websocket` can use relative urls now
- Callbacks in options don't require to be cloneable anymore - Callbacks in options don't require to be cloneable anymore
- Callback in `use_raf_fn` doesn't require to be cloneable anymore - Callback in `use_raf_fn` doesn't require to be cloneable anymore
- All (!) functions can now be safely called on the server. Specifically this includes the following that - All (!) functions can now be safely called on the server. Specifically this includes the following that before
- panicked on the server: panicked on the server:
- `use_scroll` - `use_scroll`
- `use_event_listener` - `use_event_listener`
- `use_element_hover` - `use_element_hover`

4
Cargo.toml
View file

@ -1,6 +1,6 @@
[package] [package]
name = "leptos-use" name = "leptos-use"
version = "0.7.0-rc" version = "0.7.0"
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.5.0-rc2" leptos = "0.5"
wasm-bindgen = "0.2" wasm-bindgen = "0.2"
js-sys = "0.3" js-sys = "0.3"
default-struct-builder = "0.5" default-struct-builder = "0.5"

7
README.md
View file

@ -13,7 +13,7 @@
<a href="https://crates.io/crates/leptos-use"><img src="https://img.shields.io/crates/v/leptos-use.svg?label=&color=%232C1275" alt="Crates.io"/></a> <a href="https://crates.io/crates/leptos-use"><img src="https://img.shields.io/crates/v/leptos-use.svg?label=&color=%232C1275" alt="Crates.io"/></a>
<a href="https://leptos-use.rs/server_side_rendering.html"><img src="https://img.shields.io/badge/-SSR-%236a214b" alt="SSR"></a> <a href="https://leptos-use.rs/server_side_rendering.html"><img src="https://img.shields.io/badge/-SSR-%236a214b" alt="SSR"></a>
<a href="https://leptos-use.rs"><img src="https://img.shields.io/badge/-docs%20%26%20demos-%239A233F" alt="Docs & Demos"></a> <a href="https://leptos-use.rs"><img src="https://img.shields.io/badge/-docs%20%26%20demos-%239A233F" alt="Docs & Demos"></a>
<a href="https://leptos-use.rs"><img src="https://img.shields.io/badge/-51%20functions-%23EF3939" alt="51 Functions" /></a> <a href="https://leptos-use.rs"><img src="https://img.shields.io/badge/-58%20functions-%23EF3939" alt="58 Functions" /></a>
</p> </p>
<br/> <br/>
@ -82,7 +82,8 @@ python3 post_build.py use_storage
### New Function Template ### New Function Template
To scaffold a new function quickly you can run `template/createfn.sh`. It requires that [`ffizer`](https://ffizer.github.io/) is installed. To scaffold a new function quickly you can run `template/createfn.sh`. It requires that [`ffizer`](https://ffizer.github.io/) and Python 3 is installed.
This will create the function file in the src directory, scaffold an example directory and an entry in the book.
## Leptos compatibility ## Leptos compatibility
@ -90,4 +91,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/beta/rc | | 0.7 | 0.5 |

2
docs/add_version_to_docs.py
View file

@ -64,7 +64,7 @@ def add_to_compat_table(leptos_version: str, crate_version: str, original_text:
if table_row is None: if table_row is None:
lines.append(f"| {crate_version} | {leptos_version} |") lines.append(f"| {crate_version} | {leptos_version} |")
elif re.search(rf"^\| .*? {crate_version}\s*\| {leptos_version}", table_row) is not None: elif re.search(rf"^\| (.* )?{crate_version}\s*\| {leptos_version}", table_row) is not None:
return original_text return original_text
else: else:
index = table_row.index("|", 1) index = table_row.index("|", 1)

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

@ -12,6 +12,6 @@
<a href="https://crates.io/crates/leptos-use"><img src="https://img.shields.io/crates/v/leptos-use.svg?label=&color=%232C1275" alt="Crates.io"/></a> <a href="https://crates.io/crates/leptos-use"><img src="https://img.shields.io/crates/v/leptos-use.svg?label=&color=%232C1275" alt="Crates.io"/></a>
<a href="https://leptos-use.rs/server_side_rendering.html"><img src="https://img.shields.io/badge/-SSR-%236a214b" alt="SSR"></a> <a href="https://leptos-use.rs/server_side_rendering.html"><img src="https://img.shields.io/badge/-SSR-%236a214b" alt="SSR"></a>
<a href="./get_started.html"><img src="https://img.shields.io/badge/-docs%20%26%20demos-%239A233F" alt="Docs & Demos"></a> <a href="./get_started.html"><img src="https://img.shields.io/badge/-docs%20%26%20demos-%239A233F" alt="Docs & Demos"></a>
<a href="./functions.html"><img src="https://img.shields.io/badge/-51%20functions-%23EF3939" alt="51 Functions" /></a> <a href="./functions.html"><img src="https://img.shields.io/badge/-58%20functions-%23EF3939" alt="58 Functions" /></a>
</p> </p>
</div> </div>

2
examples/on_click_outside/Cargo.toml
View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021" edition = "2021"
[dependencies] [dependencies]
leptos = { version = "0.5.0-rc2", features = ["nightly", "csr"] } leptos = { version = "0.5", 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"

2
examples/signal_debounced/Cargo.toml
View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021" edition = "2021"
[dependencies] [dependencies]
leptos = { version = "0.5.0-rc2", features = ["nightly", "csr"] } leptos = { version = "0.5", 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"

2
examples/signal_throttled/Cargo.toml
View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021" edition = "2021"
[dependencies] [dependencies]
leptos = { version = "0.5.0-rc2", features = ["nightly", "csr"] } leptos = { version = "0.5", 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"

8
examples/ssr/Cargo.toml
View file

@ -11,10 +11,10 @@ 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.5.0-rc2", features = ["nightly"] } leptos = { version = "0.5", features = ["nightly"] }
leptos_axum = { version = "0.5.0-rc2", optional = true } leptos_axum = { version = "0.5", optional = true }
leptos_meta = { version = "0.5.0-rc2", features = ["nightly"] } leptos_meta = { version = "0.5", features = ["nightly"] }
leptos_router = { version = "0.5.0-rc2", features = ["nightly"] } leptos_router = { version = "0.5", features = ["nightly"] }
leptos-use = { path = "../..", features = ["storage"] } leptos-use = { path = "../..", features = ["storage"] }
log = "0.4" log = "0.4"
simple_logger = "4" simple_logger = "4"

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

@ -64,10 +64,24 @@ fn HomePage() -> impl IntoView {
debounced_fn(); debounced_fn();
view! { view! {
<h1>Leptos-Use SSR Example</h1> <h1>
<button on:click=on_click>Click Me: {count}</button> Leptos-Use SSR Example
<p>Locale zh-Hans-CN-u-nu-hanidec: {zh_count}</p> </h1>
<p>Press any key: {key}</p> <button on:click=on_click>
<p>Debounced called: {debounce_value}</p> Click Me:
{count}
</button>
<p>
Locale zh-Hans-CN-u-nu-hanidec:
{zh_count}
</p>
<p>
Press any key:
{key}
</p>
<p>
Debounced called:
{debounce_value}
</p>
} }
} }

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

@ -61,7 +61,7 @@ pub fn ErrorTemplate(
// 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 |error| { children=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! {

2
examples/use_abs/Cargo.toml
View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021" edition = "2021"
[dependencies] [dependencies]
leptos = { version = "0.5.0-rc2", features = ["nightly", "csr"] } leptos = { version = "0.5", 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"

2
examples/use_active_element/Cargo.toml
View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021" edition = "2021"
[dependencies] [dependencies]
leptos = { version = "0.5.0-rc2", features = ["nightly", "csr"] } leptos = { version = "0.5", 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"

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

@ -22,10 +22,10 @@ fn Demo() -> impl IntoView {
<For <For
each=move || (1..7) each=move || (1..7)
key=|i| *i key=|i| *i
view=move |i| { let: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/>
/> </For>
</div> </div>

2
examples/use_breakpoints/Cargo.toml
View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021" edition = "2021"
[dependencies] [dependencies]
leptos = { version = "0.5.0-rc2", features = ["nightly", "csr"] } leptos = { version = "0.5", 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"

2
examples/use_ceil/Cargo.toml
View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021" edition = "2021"
[dependencies] [dependencies]
leptos = { version = "0.5.0-rc2", features = ["nightly", "csr"] } leptos = { version = "0.5", 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"

2
examples/use_color_mode/Cargo.toml
View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021" edition = "2021"
[dependencies] [dependencies]
leptos = { version = "0.5.0-rc2", features = ["nightly", "csr"] } leptos = { version = "0.5", 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"

2
examples/use_css_var/Cargo.toml
View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021" edition = "2021"
[dependencies] [dependencies]
leptos = { version = "0.5.0-rc2", features = ["nightly", "csr"] } leptos = { version = "0.5", 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"

2
examples/use_cycle_list/Cargo.toml
View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021" edition = "2021"
[dependencies] [dependencies]
leptos = { version = "0.5.0-rc2", features = ["nightly", "csr"] } leptos = { version = "0.5", 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"

2
examples/use_debounce_fn/Cargo.toml
View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021" edition = "2021"
[dependencies] [dependencies]
leptos = { version = "0.5.0-rc2", features = ["nightly", "csr"] } leptos = { version = "0.5", 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"

2
examples/use_document_visibility/Cargo.toml
View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021" edition = "2021"
[dependencies] [dependencies]
leptos = { version = "0.5.0-rc2", features = ["nightly", "csr"] } leptos = { version = "0.5", 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"

2
examples/use_draggable/Cargo.toml
View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021" edition = "2021"
[dependencies] [dependencies]
leptos = { version = "0.5.0-rc2", features = ["nightly", "csr"] } leptos = { version = "0.5", 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"

2
examples/use_drop_zone/Cargo.toml
View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021" edition = "2021"
[dependencies] [dependencies]
leptos = { version = "0.5.0-rc2", features = ["nightly", "csr"] } leptos = { version = "0.5", 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"

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

@ -42,8 +42,8 @@ fn Demo() -> impl IntoView {
<For <For
each=files each=files
key=|f| f.name() key=|f| f.name()
view=move |file| { let:file
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> <p>
Name: Name:
@ -62,9 +62,7 @@ fn Demo() -> impl IntoView {
{file.last_modified()} {file.last_modified()}
</p> </p>
</div> </div>
} </For>
}
/>
</div> </div>
</div> </div>
</div> </div>

2
examples/use_element_hover/Cargo.toml
View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021" edition = "2021"
[dependencies] [dependencies]
leptos = { version = "0.5.0-rc2", features = ["nightly", "csr"] } leptos = { version = "0.5", 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"

2
examples/use_element_size/Cargo.toml
View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021" edition = "2021"
[dependencies] [dependencies]
leptos = { version = "0.5.0-rc2", features = ["nightly", "csr"] } leptos = { version = "0.5", 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"

2
examples/use_element_visibility/Cargo.toml
View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021" edition = "2021"
[dependencies] [dependencies]
leptos = { version = "0.5.0-rc2", features = ["nightly", "csr"] } leptos = { version = "0.5", 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"

2
examples/use_event_listener/Cargo.toml
View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021" edition = "2021"
[dependencies] [dependencies]
leptos = { version = "0.5.0-rc2", features = ["nightly", "csr"] } leptos = { version = "0.5", 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"

2
examples/use_favicon/Cargo.toml
View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021" edition = "2021"
[dependencies] [dependencies]
leptos = { version = "0.5.0-rc2", features = ["nightly", "csr"] } leptos = { version = "0.5", 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"

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

@ -21,6 +21,7 @@ fn Demo() -> impl IntoView {
set_icon.set(Some("favicon-leptos.ico".into())); set_icon.set(Some("favicon-leptos.ico".into()));
} }
> >
<img <img
class=img_classes.clone() class=img_classes.clone()
width="32" width="32"
@ -37,6 +38,7 @@ fn Demo() -> impl IntoView {
set_icon.set(Some("favicon-red.svg".into())); set_icon.set(Some("favicon-red.svg".into()));
} }
> >
<img <img
class=img_classes.clone() class=img_classes.clone()
width="32" width="32"
@ -53,6 +55,7 @@ fn Demo() -> impl IntoView {
set_icon.set(Some("favicon-green.svg".into())); set_icon.set(Some("favicon-green.svg".into()));
} }
> >
<img <img
class=img_classes.clone() class=img_classes.clone()
width="32" width="32"
@ -69,6 +72,7 @@ fn Demo() -> impl IntoView {
set_icon.set(Some("favicon-blue.svg".into())); set_icon.set(Some("favicon-blue.svg".into()));
} }
> >
<img <img
class=img_classes.clone() class=img_classes.clone()
width="32" width="32"
@ -85,6 +89,7 @@ fn Demo() -> impl IntoView {
set_icon.set(Some("favicon-orange.svg".into())); set_icon.set(Some("favicon-orange.svg".into()));
} }
> >
<img <img
class=img_classes class=img_classes
width="32" width="32"

2
examples/use_floor/Cargo.toml
View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021" edition = "2021"
[dependencies] [dependencies]
leptos = { version = "0.5.0-rc2", features = ["nightly", "csr"] } leptos = { version = "0.5", 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"

2
examples/use_geolocation/Cargo.toml
View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021" edition = "2021"
[dependencies] [dependencies]
leptos = { version = "0.5.0-rc2", features = ["nightly", "csr"] } leptos = { version = "0.5", 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"

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

@ -14,8 +14,11 @@ fn Demo() -> impl IntoView {
view! { view! {
<pre lang="json"> <pre lang="json">
coords: {move || if let Some(coords) = coords() { coords:
format!(r#"{{ {move || {
if let Some(coords) = coords() {
format!(
r#"{{
accuracy: {}, accuracy: {},
latitude: {}, latitude: {},
longitude: {}, longitude: {},
@ -23,14 +26,21 @@ fn Demo() -> impl IntoView {
altitude_accuracy: {:?}, altitude_accuracy: {:?},
heading: {:?}, heading: {:?},
speed: {:?}, speed: {:?},
}}"#, coords.accuracy(), coords.latitude(), coords.longitude(), coords.altitude(), coords.altitude_accuracy(), coords.heading(), coords.speed()) }}"#,
coords.accuracy(), coords.latitude(), coords.longitude(), coords.altitude(),
coords.altitude_accuracy(), coords.heading(), coords.speed()
)
} else { } else {
"None".to_string() "None".to_string()
}}, }
located_at: {located_at}, }}
error: {move || if let Some(error) = error() { ,
error.message() located_at:
} else {"None".to_string()}}, {located_at}
,
error:
{move || if let Some(error) = error() { error.message() } else { "None".to_string() }}
,
</pre> </pre>
<button on:click=move |_| pause()>"Pause watch"</button> <button on:click=move |_| pause()>"Pause watch"</button>
<button on:click=move |_| resume()>"Resume watch"</button> <button on:click=move |_| resume()>"Resume watch"</button>

2
examples/use_idle/Cargo.toml
View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021" edition = "2021"
[dependencies] [dependencies]
leptos = { version = "0.5.0-rc2", features = ["nightly", "csr"] } leptos = { version = "0.5", 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"

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

@ -14,13 +14,19 @@ fn Demo() -> impl IntoView {
view! { view! {
<Note class="mb-2"> <Note class="mb-2">
For demonstration purpose, the idle timeout is set to <b>5s</b> in this demo (default 1min). For demonstration purpose, the idle timeout is set to
<b>
5s
</b>
in this demo (default 1min).
</Note> </Note>
<div class="mb-2"> <div class="mb-2">
Idle: <BooleanDisplay value=idle/> Idle:
<BooleanDisplay value=idle/>
</div> </div>
<div> <div>
Inactive: <b>{idled_for}s</b> Inactive:
<b>{idled_for} s</b>
</div> </div>
} }
} }

2
examples/use_intersection_observer/Cargo.toml
View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021" edition = "2021"
[dependencies] [dependencies]
leptos = { version = "0.5.0-rc2", features = ["nightly", "csr"] } leptos = { version = "0.5", 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"

2
examples/use_interval/Cargo.toml
View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021" edition = "2021"
[dependencies] [dependencies]
leptos = { version = "0.5.0-rc2", features = ["nightly", "csr"] } leptos = { version = "0.5", 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"

2
examples/use_interval_fn/Cargo.toml
View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021" edition = "2021"
[dependencies] [dependencies]
leptos = { version = "0.5.0-rc2", features = ["nightly", "csr"] } leptos = { version = "0.5", 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"

2
examples/use_intl_number_format/Cargo.toml
View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021" edition = "2021"
[dependencies] [dependencies]
leptos = { version = "0.5.0-rc2", features = ["nightly", "csr"] } leptos = { version = "0.5", 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"

2
examples/use_media_query/Cargo.toml
View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021" edition = "2021"
[dependencies] [dependencies]
leptos = { version = "0.5.0-rc2", features = ["nightly", "csr"] } leptos = { version = "0.5", 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"

2
examples/use_mouse/Cargo.toml
View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021" edition = "2021"
[dependencies] [dependencies]
leptos = { version = "0.5.0-rc2", features = ["nightly", "csr"] } leptos = { version = "0.5", 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"

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

@ -46,6 +46,7 @@ fn Demo() -> impl IntoView {
mouse_default.y.get(), mouse_default.source_type.get() mouse_default.y.get(), mouse_default.source_type.get()
) )
}} }}
</pre> </pre>
<p class="font-semibold">"Extractor Usage"</p> <p class="font-semibold">"Extractor Usage"</p>
<Note>"Only works when the mouse is over the demo element"</Note> <Note>"Only works when the mouse is over the demo element"</Note>
@ -59,6 +60,7 @@ fn Demo() -> impl IntoView {
.get(), mouse_with_extractor.y.get(), mouse_with_extractor.source_type.get() .get(), mouse_with_extractor.y.get(), mouse_with_extractor.source_type.get()
) )
}} }}
</pre> </pre>
</div> </div>
} }

2
examples/use_mutation_observer/Cargo.toml
View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021" edition = "2021"
[dependencies] [dependencies]
leptos = { version = "0.5.0-rc2", features = ["nightly", "csr"] } leptos = { version = "0.5", 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"

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

@ -46,8 +46,10 @@ fn Demo() -> impl IntoView {
each=move || enum_msgs.get() each=move || enum_msgs.get()
// list only grows so this is fine here // list only grows so this is fine here
key=|message| message.0 key=|message| message.0
view=|message| view! { <div>"Mutation Attribute: " <code>{message.1}</code></div> } let:message
/> >
<div>"Mutation Attribute: " <code>{message.1}</code></div>
</For>
</div> </div>
} }
} }

2
examples/use_raf_fn/Cargo.toml
View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021" edition = "2021"
[dependencies] [dependencies]
leptos = { version = "0.5.0-rc2", features = ["nightly", "csr"] } leptos = { version = "0.5", 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"

2
examples/use_resize_observer/Cargo.toml
View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021" edition = "2021"
[dependencies] [dependencies]
leptos = { version = "0.5.0-rc2", features = ["nightly", "csr"] } leptos = { version = "0.5", 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"

2
examples/use_round/Cargo.toml
View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021" edition = "2021"
[dependencies] [dependencies]
leptos = { version = "0.5.0-rc2", features = ["nightly", "csr"] } leptos = { version = "0.5", 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"

2
examples/use_scroll/Cargo.toml
View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021" edition = "2021"
[dependencies] [dependencies]
leptos = { version = "0.5.0-rc2", features = ["nightly", "csr"] } leptos = { version = "0.5", 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"

2
examples/use_storage/Cargo.toml
View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021" edition = "2021"
[dependencies] [dependencies]
leptos = { version = "0.5.0-rc2", features = ["nightly", "csr"] } leptos = { version = "0.5", 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"

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

@ -51,6 +51,7 @@ fn Demo() -> impl IntoView {
set_state set_state
.update(|s| s.count = event_target_value(&e).parse::<f64>().unwrap() as u32) .update(|s| s.count = event_target_value(&e).parse::<f64>().unwrap() as u32)
} }
type="number" type="number"
min="0" min="0"
step="1" step="1"

2
examples/use_throttle_fn/Cargo.toml
View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021" edition = "2021"
[dependencies] [dependencies]
leptos = { version = "0.5.0-rc2", features = ["nightly", "csr"] } leptos = { version = "0.5", 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"

2
examples/use_timestamp/Cargo.toml
View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021" edition = "2021"
[dependencies] [dependencies]
leptos = { version = "0.5.0-rc2", features = ["nightly", "csr"] } leptos = { version = "0.5", 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"

5
examples/use_timestamp/src/main.rs
View file

@ -7,7 +7,10 @@ fn Demo() -> impl IntoView {
let timestamp = use_timestamp(); let timestamp = use_timestamp();
view! { view! {
<div>Timestamp: {timestamp}</div> <div>
Timestamp:
{timestamp}
</div>
} }
} }

2
examples/use_websocket/Cargo.toml
View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021" edition = "2021"
[dependencies] [dependencies]
leptos = { version = "0.5.0-rc2", features = ["nightly", "csr"] } leptos = { version = "0.5", 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"

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

@ -30,8 +30,8 @@ fn Demo() -> impl IntoView {
} = use_websocket("wss://echo.websocket.events/"); } = use_websocket("wss://echo.websocket.events/");
let send_message = move |_| { let send_message = move |_| {
let m = "Hello, world!".to_string(); let m = "Hello, world!";
send(m.clone()); send(m);
set_history.update(|history: &mut Vec<_>| history.push(format! {"[send]: {:?}", m})); set_history.update(|history: &mut Vec<_>| history.push(format! {"[send]: {:?}", m}));
}; };
@ -125,8 +125,8 @@ fn Demo() -> impl IntoView {
}; };
let send_message2 = move |_| { let send_message2 = move |_| {
let message = "Hello, use_leptos!".to_string(); let message = "Hello, use_leptos!";
send2(message.clone()); send2(message);
update_history(&set_history2, format! {"[send]: {:?}", message}); update_history(&set_history2, format! {"[send]: {:?}", message});
}; };
@ -182,10 +182,10 @@ fn Demo() -> 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 |(_, message)| { let:item
view! { <div>{message}</div> } >
} <div>{item.1}</div>
/> </For>
</div> </div>
<div class="w-full lg:w-1/2"> <div class="w-full lg:w-1/2">
@ -216,11 +216,10 @@ fn Demo() -> 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 |(_, message)| { let:item
view! { <li>{message}</li> } >
} <li>{item.1}</li>
/> </For>
</ul> </ul>
</div> </div>
</div> </div>

2
examples/use_window_focus/Cargo.toml
View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021" edition = "2021"
[dependencies] [dependencies]
leptos = { version = "0.5.0-rc2", features = ["nightly", "csr"] } leptos = { version = "0.5", 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"

2
examples/use_window_scroll/Cargo.toml
View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021" edition = "2021"
[dependencies] [dependencies]
leptos = { version = "0.5.0-rc2", features = ["nightly", "csr"] } leptos = { version = "0.5", 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"

2
examples/watch_debounced/Cargo.toml
View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021" edition = "2021"
[dependencies] [dependencies]
leptos = { version = "0.5.0-rc2", features = ["nightly", "csr"] } leptos = { version = "0.5", 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"

2
examples/watch_pausable/Cargo.toml
View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021" edition = "2021"
[dependencies] [dependencies]
leptos = { version = "0.5.0-rc2", features = ["nightly", "csr"] } leptos = { version = "0.5", 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"

2
examples/watch_throttled/Cargo.toml
View file

@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021" edition = "2021"
[dependencies] [dependencies]
leptos = { version = "0.5.0-rc2", features = ["nightly", "csr"] } leptos = { version = "0.5", 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"

5
src/docs/boolean_display.rs
View file

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

3
src/docs/note.rs
View file

@ -4,6 +4,5 @@ use leptos::*;
pub fn Note(#[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! { <div class=class>{ children() }</div> view! { <div class=class>{children()}</div> }
}
} }

22
src/use_breakpoints.rs
View file

@ -251,15 +251,27 @@ impl<K: Eq + Hash + Debug + Clone> UseBreakpointsReturn<K> {
/// Reactive Vec of all breakpoints that fulfill `[screen size]` >= `key` /// Reactive Vec of all breakpoints that fulfill `[screen size]` >= `key`
pub fn current(&self) -> Signal<Vec<K>> { pub fn current(&self) -> Signal<Vec<K>> {
let this = self.clone(); let breakpoints = self.breakpoints.clone();
let keys: Vec<_> = breakpoints.keys().cloned().collect();
Signal::derive(move || { let ge = move |key: &K| {
this.breakpoints let value = breakpoints
.keys() .get(key)
.filter(|k| this.ge((**k).clone()).get()) .expect("only used with keys() from the HashMap");
use_media_query(format_media_query!("min", =, value))
};
let signals: Vec<_> = keys.iter().map(ge.clone()).collect();
create_memo(move |_| {
keys.iter()
.cloned() .cloned()
.zip(signals.iter().cloned())
.filter_map(|(key, signal)| signal.get().then_some(key))
.collect::<Vec<_>>() .collect::<Vec<_>>()
}) })
.into()
} }
} }

116
src/use_websocket.rs
View file

@ -39,7 +39,7 @@ use web_sys::{BinaryType, CloseEvent, Event, MessageEvent, WebSocket};
/// } = use_websocket("wss://echo.websocket.events/"); /// } = use_websocket("wss://echo.websocket.events/");
/// ///
/// let send_message = move |_| { /// let send_message = move |_| {
/// send("Hello, world!".to_string()); /// send("Hello, world!");
/// }; /// };
/// ///
/// let send_byte_message = move |_| { /// let send_byte_message = move |_| {
@ -67,8 +67,8 @@ use web_sys::{BinaryType, CloseEvent, Event, MessageEvent, WebSocket};
/// <button on:click=open_connection disabled=connected>"Open"</button> /// <button on:click=open_connection disabled=connected>"Open"</button>
/// <button on:click=close_connection disabled=move || !connected()>"Close"</button> /// <button on:click=close_connection disabled=move || !connected()>"Close"</button>
/// ///
/// <p>"Receive message: " {format! {"{:?}", message}}</p> /// <p>"Receive message: " {move || format!("{:?}", message.get())}</p>
/// <p>"Receive byte message: " {format! {"{:?}", message_bytes}}</p> /// <p>"Receive byte message: " {move || format!("{:?}", message_bytes.get())}</p>
/// </div> /// </div>
/// } /// }
/// # } /// # }
@ -87,6 +87,106 @@ use web_sys::{BinaryType, CloseEvent, Event, MessageEvent, WebSocket};
/// | https://example.com/some/where | //otherdomain.com/api/ws | wss://otherdomain.com/api/ws | /// | https://example.com/some/where | //otherdomain.com/api/ws | wss://otherdomain.com/api/ws |
/// ///
/// ///
/// ## Usage with `provide_context`
///
/// The return value of `use_websocket` utilizes several type parameters which can make it
/// cumbersome to use with `provide_context` + `expect_context`.
/// The following example shows how to avoid type parameters with dynamic dispatch.
/// This sacrifices a little bit of performance for the sake of ergonomics. However,
/// compared to network transmission speeds this loss of performance is negligible.
///
/// First we define the `struct` that is going to be passed around as context.
///
/// ```
/// # use leptos::*;
/// use std::rc::Rc;
///
/// #[derive(Clone)]
/// pub struct WebsocketContext {
/// pub message: Signal<Option<String>>,
/// send: Rc<dyn Fn(&str)>, // use Rc to make it easily cloneable
/// }
///
/// impl WebsocketContext {
/// pub fn new(message: Signal<Option<String>>, send: Rc<dyn Fn(&str)>) -> Self {
/// Self {
/// message,
/// send,
/// }
/// }
///
/// // create a method to avoid having to use parantheses around the field
/// #[inline(always)]
/// pub fn send(&self, message: &str) {
/// (self.send)(message)
/// }
/// }
/// ```
///
/// Now you can provide the context like the following.
///
/// ```
/// # use leptos::*;
/// # use leptos_use::{use_websocket, UseWebsocketReturn};
/// # use std::rc::Rc;
/// # #[derive(Clone)]
/// # pub struct WebsocketContext {
/// # pub message: Signal<Option<String>>,
/// # send: Rc<dyn Fn(&str)>,
/// # }
/// #
/// # impl WebsocketContext {
/// # pub fn new(message: Signal<Option<String>>, send: Rc<dyn Fn(&str)>) -> Self {
/// # Self {
/// # message,
/// # send,
/// # }
/// # }
/// # }
///
/// # #[component]
/// # fn Demo() -> impl IntoView {
/// let UseWebsocketReturn {
/// message,
/// send,
/// ..
/// } = use_websocket("ws:://some.websocket.io");
///
/// provide_context(WebsocketContext::new(message, Rc::new(send.clone())));
/// #
/// # view! {}
/// # }
/// ```
///
/// Finally let's use the context:
///
/// ```
/// # use leptos::*;
/// # use leptos_use::{use_websocket, UseWebsocketReturn};
/// # use std::rc::Rc;
/// # #[derive(Clone)]
/// # pub struct WebsocketContext {
/// # pub message: Signal<Option<String>>,
/// # send: Rc<dyn Fn(&str)>,
/// # }
/// #
/// # impl WebsocketContext {
/// # #[inline(always)]
/// # pub fn send(&self, message: &str) {
/// # (self.send)(message)
/// # }
/// # }
///
/// # #[component]
/// # fn Demo() -> impl IntoView {
/// let websocket = expect_context::<WebsocketContext>();
///
/// websocket.send("Hello World!");
/// #
/// # view! {}
/// # }
/// ```
///
/// ## Server-Side Rendering /// ## Server-Side Rendering
/// ///
/// On the server the returned functions amount to no-ops. /// On the server the returned functions amount to no-ops.
@ -95,7 +195,7 @@ pub fn use_websocket(
) -> UseWebsocketReturn< ) -> UseWebsocketReturn<
impl Fn() + Clone + 'static, impl Fn() + Clone + 'static,
impl Fn() + Clone + 'static, impl Fn() + Clone + 'static,
impl Fn(String) + Clone + 'static, impl Fn(&str) + Clone + 'static,
impl Fn(Vec<u8>) + Clone + 'static, impl Fn(Vec<u8>) + Clone + 'static,
> { > {
use_websocket_with_options(url, UseWebSocketOptions::default()) use_websocket_with_options(url, UseWebSocketOptions::default())
@ -108,7 +208,7 @@ pub fn use_websocket_with_options(
) -> UseWebsocketReturn< ) -> UseWebsocketReturn<
impl Fn() + Clone + 'static, impl Fn() + Clone + 'static,
impl Fn() + Clone + 'static, impl Fn() + Clone + 'static,
impl Fn(String) + Clone + 'static, impl Fn(&str) + Clone + 'static,
impl Fn(Vec<u8>) + Clone, impl Fn(Vec<u8>) + Clone,
> { > {
let url = normalize_url(url); let url = normalize_url(url);
@ -302,10 +402,10 @@ pub fn use_websocket_with_options(
// Send text (String) // Send text (String)
let send = { let send = {
Box::new(move |data: String| { Box::new(move |data: &str| {
if ready_state.get() == ConnectionReadyState::Open { if ready_state.get() == ConnectionReadyState::Open {
if let Some(web_socket) = ws_ref.get_value() { if let Some(web_socket) = ws_ref.get_value() {
let _ = web_socket.send_with_str(&data); let _ = web_socket.send_with_str(data);
} }
} }
}) })
@ -412,7 +512,7 @@ pub struct UseWebsocketReturn<OpenFn, CloseFn, SendFn, SendBytesFn>
where where
OpenFn: Fn() + Clone + 'static, OpenFn: Fn() + Clone + 'static,
CloseFn: Fn() + Clone + 'static, CloseFn: Fn() + Clone + 'static,
SendFn: Fn(String) + Clone + 'static, SendFn: Fn(&str) + Clone + 'static,
SendBytesFn: Fn(Vec<u8>) + Clone + 'static, SendBytesFn: Fn(Vec<u8>) + Clone + 'static,
{ {
/// The current state of the `WebSocket` connection. /// The current state of the `WebSocket` connection.