From 9529733d64480ef3a9aa23f624e01916ef02bde9 Mon Sep 17 00:00:00 2001
From: Maccesch <maccesch@synphonyte.com>
Date: Wed, 13 Dec 2023 14:58:07 +0000
Subject: [PATCH 01/34] started use_element_bounding
---
CHANGELOG.md | 6 +
docs/book/src/SUMMARY.md | 1 +
.../book/src/elements/use_element_bounding.md | 3 +
examples/Cargo.toml | 1 +
examples/use_element_bounding/Cargo.toml | 16 +
examples/use_element_bounding/README.md | 23 ++
examples/use_element_bounding/Trunk.toml | 2 +
examples/use_element_bounding/index.html | 7 +
examples/use_element_bounding/input.css | 3 +
.../use_element_bounding/rust-toolchain.toml | 2 +
examples/use_element_bounding/src/main.rs | 20 ++
.../use_element_bounding/style/output.css | 289 ++++++++++++++++++
.../use_element_bounding/tailwind.config.js | 15 +
src/lib.rs | 2 +
src/use_element_bounding.rs | 43 +++
15 files changed, 433 insertions(+)
create mode 100644 docs/book/src/elements/use_element_bounding.md
create mode 100644 examples/use_element_bounding/Cargo.toml
create mode 100644 examples/use_element_bounding/README.md
create mode 100644 examples/use_element_bounding/Trunk.toml
create mode 100644 examples/use_element_bounding/index.html
create mode 100644 examples/use_element_bounding/input.css
create mode 100644 examples/use_element_bounding/rust-toolchain.toml
create mode 100644 examples/use_element_bounding/src/main.rs
create mode 100644 examples/use_element_bounding/style/output.css
create mode 100644 examples/use_element_bounding/tailwind.config.js
create mode 100644 src/use_element_bounding.rs
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 66c789d..fe811be 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,12 @@
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).
+## [Unreleased] -
+
+### New Functions 🚀
+
+- `use_element_bounding`
+
## [0.9.0] - 2023-12-06
### New Functions 🚀
diff --git a/docs/book/src/SUMMARY.md b/docs/book/src/SUMMARY.md
index 2cf9fc6..69edac6 100644
--- a/docs/book/src/SUMMARY.md
+++ b/docs/book/src/SUMMARY.md
@@ -19,6 +19,7 @@
- [use_document_visibility](elements/use_document_visibility.md)
- [use_draggable](elements/use_draggable.md)
- [use_drop_zone](elements/use_drop_zone.md)
+- [use_element_bounding](elements/use_element_bounding.md)
- [use_element_size](elements/use_element_size.md)
- [use_element_visibility](elements/use_element_visibility.md)
- [use_intersection_observer](elements/use_intersection_observer.md)
diff --git a/docs/book/src/elements/use_element_bounding.md b/docs/book/src/elements/use_element_bounding.md
new file mode 100644
index 0000000..ca3c015
--- /dev/null
+++ b/docs/book/src/elements/use_element_bounding.md
@@ -0,0 +1,3 @@
+# use_element_bounding
+
+<!-- cmdrun python3 ../extract_doc_comment.py use_element_bounding -->
diff --git a/examples/Cargo.toml b/examples/Cargo.toml
index d9f03b9..17ec5e3 100644
--- a/examples/Cargo.toml
+++ b/examples/Cargo.toml
@@ -17,6 +17,7 @@ members = [
"use_document_visibility",
"use_draggable",
"use_drop_zone",
+ "use_element_bounding",
"use_element_hover",
"use_element_size",
"use_element_visibility",
diff --git a/examples/use_element_bounding/Cargo.toml b/examples/use_element_bounding/Cargo.toml
new file mode 100644
index 0000000..ff11b1f
--- /dev/null
+++ b/examples/use_element_bounding/Cargo.toml
@@ -0,0 +1,16 @@
+[package]
+name = "use_element_bounding"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+leptos = { version = "0.5", features = ["nightly", "csr"] }
+console_error_panic_hook = "0.1"
+console_log = "1"
+log = "0.4"
+leptos-use = { path = "../..", features = ["docs"] }
+web-sys = "0.3"
+
+[dev-dependencies]
+wasm-bindgen = "0.2"
+wasm-bindgen-test = "0.3.0"
diff --git a/examples/use_element_bounding/README.md b/examples/use_element_bounding/README.md
new file mode 100644
index 0000000..fa29264
--- /dev/null
+++ b/examples/use_element_bounding/README.md
@@ -0,0 +1,23 @@
+A simple example for `use_element_bounding`.
+
+If you don't have it installed already, install [Trunk](https://trunkrs.dev/) and [Tailwind](https://tailwindcss.com/docs/installation)
+as well as the nightly toolchain for Rust and the wasm32-unknown-unknown target:
+
+```bash
+cargo install trunk
+npm install -D tailwindcss @tailwindcss/forms
+rustup toolchain install nightly
+rustup target add wasm32-unknown-unknown
+```
+
+Then, open two terminals. In the first one, run:
+
+```
+npx tailwindcss -i ./input.css -o ./style/output.css --watch
+```
+
+In the second one, run:
+
+```bash
+trunk serve --open
+```
\ No newline at end of file
diff --git a/examples/use_element_bounding/Trunk.toml b/examples/use_element_bounding/Trunk.toml
new file mode 100644
index 0000000..3e4be08
--- /dev/null
+++ b/examples/use_element_bounding/Trunk.toml
@@ -0,0 +1,2 @@
+[build]
+public_url = "/demo/"
\ No newline at end of file
diff --git a/examples/use_element_bounding/index.html b/examples/use_element_bounding/index.html
new file mode 100644
index 0000000..ae249a6
--- /dev/null
+++ b/examples/use_element_bounding/index.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link data-trunk rel="css" href="style/output.css">
+ </head>
+ <body></body>
+</html>
diff --git a/examples/use_element_bounding/input.css b/examples/use_element_bounding/input.css
new file mode 100644
index 0000000..bd6213e
--- /dev/null
+++ b/examples/use_element_bounding/input.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file
diff --git a/examples/use_element_bounding/rust-toolchain.toml b/examples/use_element_bounding/rust-toolchain.toml
new file mode 100644
index 0000000..271800c
--- /dev/null
+++ b/examples/use_element_bounding/rust-toolchain.toml
@@ -0,0 +1,2 @@
+[toolchain]
+channel = "nightly"
\ No newline at end of file
diff --git a/examples/use_element_bounding/src/main.rs b/examples/use_element_bounding/src/main.rs
new file mode 100644
index 0000000..f0bb028
--- /dev/null
+++ b/examples/use_element_bounding/src/main.rs
@@ -0,0 +1,20 @@
+use leptos::*;
+use leptos_use::docs::demo_or_body;
+use leptos_use::use_element_bounding;
+
+#[component]
+fn Demo() -> impl IntoView {
+
+ use_element_bounding();
+
+ view! { }
+}
+
+fn main() {
+ _ = console_log::init_with_level(log::Level::Debug);
+ console_error_panic_hook::set_once();
+
+ mount_to(demo_or_body(), || {
+ view! { <Demo/> }
+ })
+}
diff --git a/examples/use_element_bounding/style/output.css b/examples/use_element_bounding/style/output.css
new file mode 100644
index 0000000..ab5191f
--- /dev/null
+++ b/examples/use_element_bounding/style/output.css
@@ -0,0 +1,289 @@
+[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ background-color: #fff;
+ border-color: #6b7280;
+ border-width: 1px;
+ border-radius: 0px;
+ padding-top: 0.5rem;
+ padding-right: 0.75rem;
+ padding-bottom: 0.5rem;
+ padding-left: 0.75rem;
+ font-size: 1rem;
+ line-height: 1.5rem;
+ --tw-shadow: 0 0 #0000;
+}
+
+[type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
+ outline: 2px solid transparent;
+ outline-offset: 2px;
+ --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
+ --tw-ring-offset-width: 0px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: #2563eb;
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+ border-color: #2563eb;
+}
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+ color: #6b7280;
+ opacity: 1;
+}
+
+input::placeholder,textarea::placeholder {
+ color: #6b7280;
+ opacity: 1;
+}
+
+::-webkit-datetime-edit-fields-wrapper {
+ padding: 0;
+}
+
+::-webkit-date-and-time-value {
+ min-height: 1.5em;
+}
+
+::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
+ padding-top: 0;
+ padding-bottom: 0;
+}
+
+select {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+ background-position: right 0.5rem center;
+ background-repeat: no-repeat;
+ background-size: 1.5em 1.5em;
+ padding-right: 2.5rem;
+ -webkit-print-color-adjust: exact;
+ print-color-adjust: exact;
+}
+
+[multiple] {
+ background-image: initial;
+ background-position: initial;
+ background-repeat: unset;
+ background-size: initial;
+ padding-right: 0.75rem;
+ -webkit-print-color-adjust: unset;
+ print-color-adjust: unset;
+}
+
+[type='checkbox'],[type='radio'] {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ padding: 0;
+ -webkit-print-color-adjust: exact;
+ print-color-adjust: exact;
+ display: inline-block;
+ vertical-align: middle;
+ background-origin: border-box;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+ flex-shrink: 0;
+ height: 1rem;
+ width: 1rem;
+ color: #2563eb;
+ background-color: #fff;
+ border-color: #6b7280;
+ border-width: 1px;
+ --tw-shadow: 0 0 #0000;
+}
+
+[type='checkbox'] {
+ border-radius: 0px;
+}
+
+[type='radio'] {
+ border-radius: 100%;
+}
+
+[type='checkbox']:focus,[type='radio']:focus {
+ outline: 2px solid transparent;
+ outline-offset: 2px;
+ --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
+ --tw-ring-offset-width: 2px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: #2563eb;
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+
+[type='checkbox']:checked,[type='radio']:checked {
+ border-color: transparent;
+ background-color: currentColor;
+ background-size: 100% 100%;
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+[type='checkbox']:checked {
+ background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+}
+
+[type='radio']:checked {
+ background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+}
+
+[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
+ border-color: transparent;
+ background-color: currentColor;
+}
+
+[type='checkbox']:indeterminate {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
+ border-color: transparent;
+ background-color: currentColor;
+ background-size: 100% 100%;
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
+ border-color: transparent;
+ background-color: currentColor;
+}
+
+[type='file'] {
+ background: unset;
+ border-color: inherit;
+ border-width: 0;
+ border-radius: 0;
+ padding: 0;
+ font-size: unset;
+ line-height: inherit;
+}
+
+[type='file']:focus {
+ outline: 1px solid ButtonText;
+ outline: 1px auto -webkit-focus-ring-color;
+}
+
+*, ::before, ::after {
+ --tw-border-spacing-x: 0;
+ --tw-border-spacing-y: 0;
+ --tw-translate-x: 0;
+ --tw-translate-y: 0;
+ --tw-rotate: 0;
+ --tw-skew-x: 0;
+ --tw-skew-y: 0;
+ --tw-scale-x: 1;
+ --tw-scale-y: 1;
+ --tw-pan-x: ;
+ --tw-pan-y: ;
+ --tw-pinch-zoom: ;
+ --tw-scroll-snap-strictness: proximity;
+ --tw-gradient-from-position: ;
+ --tw-gradient-via-position: ;
+ --tw-gradient-to-position: ;
+ --tw-ordinal: ;
+ --tw-slashed-zero: ;
+ --tw-numeric-figure: ;
+ --tw-numeric-spacing: ;
+ --tw-numeric-fraction: ;
+ --tw-ring-inset: ;
+ --tw-ring-offset-width: 0px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: rgb(59 130 246 / 0.5);
+ --tw-ring-offset-shadow: 0 0 #0000;
+ --tw-ring-shadow: 0 0 #0000;
+ --tw-shadow: 0 0 #0000;
+ --tw-shadow-colored: 0 0 #0000;
+ --tw-blur: ;
+ --tw-brightness: ;
+ --tw-contrast: ;
+ --tw-grayscale: ;
+ --tw-hue-rotate: ;
+ --tw-invert: ;
+ --tw-saturate: ;
+ --tw-sepia: ;
+ --tw-drop-shadow: ;
+ --tw-backdrop-blur: ;
+ --tw-backdrop-brightness: ;
+ --tw-backdrop-contrast: ;
+ --tw-backdrop-grayscale: ;
+ --tw-backdrop-hue-rotate: ;
+ --tw-backdrop-invert: ;
+ --tw-backdrop-opacity: ;
+ --tw-backdrop-saturate: ;
+ --tw-backdrop-sepia: ;
+}
+
+::backdrop {
+ --tw-border-spacing-x: 0;
+ --tw-border-spacing-y: 0;
+ --tw-translate-x: 0;
+ --tw-translate-y: 0;
+ --tw-rotate: 0;
+ --tw-skew-x: 0;
+ --tw-skew-y: 0;
+ --tw-scale-x: 1;
+ --tw-scale-y: 1;
+ --tw-pan-x: ;
+ --tw-pan-y: ;
+ --tw-pinch-zoom: ;
+ --tw-scroll-snap-strictness: proximity;
+ --tw-gradient-from-position: ;
+ --tw-gradient-via-position: ;
+ --tw-gradient-to-position: ;
+ --tw-ordinal: ;
+ --tw-slashed-zero: ;
+ --tw-numeric-figure: ;
+ --tw-numeric-spacing: ;
+ --tw-numeric-fraction: ;
+ --tw-ring-inset: ;
+ --tw-ring-offset-width: 0px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: rgb(59 130 246 / 0.5);
+ --tw-ring-offset-shadow: 0 0 #0000;
+ --tw-ring-shadow: 0 0 #0000;
+ --tw-shadow: 0 0 #0000;
+ --tw-shadow-colored: 0 0 #0000;
+ --tw-blur: ;
+ --tw-brightness: ;
+ --tw-contrast: ;
+ --tw-grayscale: ;
+ --tw-hue-rotate: ;
+ --tw-invert: ;
+ --tw-saturate: ;
+ --tw-sepia: ;
+ --tw-drop-shadow: ;
+ --tw-backdrop-blur: ;
+ --tw-backdrop-brightness: ;
+ --tw-backdrop-contrast: ;
+ --tw-backdrop-grayscale: ;
+ --tw-backdrop-hue-rotate: ;
+ --tw-backdrop-invert: ;
+ --tw-backdrop-opacity: ;
+ --tw-backdrop-saturate: ;
+ --tw-backdrop-sepia: ;
+}
+
+.block {
+ display: block;
+}
+
+.text-\[--brand-color\] {
+ color: var(--brand-color);
+}
+
+.text-green-600 {
+ --tw-text-opacity: 1;
+ color: rgb(22 163 74 / var(--tw-text-opacity));
+}
+
+.opacity-75 {
+ opacity: 0.75;
+}
+
+@media (prefers-color-scheme: dark) {
+ .dark\:text-green-500 {
+ --tw-text-opacity: 1;
+ color: rgb(34 197 94 / var(--tw-text-opacity));
+ }
+}
\ No newline at end of file
diff --git a/examples/use_element_bounding/tailwind.config.js b/examples/use_element_bounding/tailwind.config.js
new file mode 100644
index 0000000..bc09f5e
--- /dev/null
+++ b/examples/use_element_bounding/tailwind.config.js
@@ -0,0 +1,15 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: {
+ files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"],
+ },
+ theme: {
+ extend: {},
+ },
+ corePlugins: {
+ preflight: false,
+ },
+ plugins: [
+ require('@tailwindcss/forms'),
+ ],
+}
\ No newline at end of file
diff --git a/src/lib.rs b/src/lib.rs
index d42079d..1e1c5a8 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -14,6 +14,7 @@ mod is_none;
mod is_ok;
mod is_some;
mod on_click_outside;
+mod use_element_bounding;
mod signal_debounced;
mod signal_throttled;
mod use_active_element;
@@ -69,6 +70,7 @@ pub use is_none::*;
pub use is_ok::*;
pub use is_some::*;
pub use on_click_outside::*;
+pub use use_element_bounding::*;
pub use signal_debounced::*;
pub use signal_throttled::*;
pub use use_active_element::*;
diff --git a/src/use_element_bounding.rs b/src/use_element_bounding.rs
new file mode 100644
index 0000000..15cd98e
--- /dev/null
+++ b/src/use_element_bounding.rs
@@ -0,0 +1,43 @@
+use default_struct_builder::DefaultBuilder;
+use leptos::*;
+
+///
+///
+/// ## Demo
+///
+/// [Link to Demo](https://github.com/Synphonyte/leptos-use/tree/main/examples/use_element_bounding)
+///
+/// ## Usage
+///
+/// ```
+/// # use leptos::*;
+/// # use leptos_use::use_element_bounding;
+/// #
+/// # #[component]
+/// # fn Demo() -> impl IntoView {
+/// use_element_bounding();
+/// #
+/// # view! { }
+/// # }
+/// ```
+pub fn use_element_bounding() -> UseElementBoundingReturn {
+ use_element_bounding_with_options(UseElementBoundingOptions::default())
+}
+
+/// Version of [`use_element_bounding`] that takes a `UseElementBoundingOptions`. See [`use_element_bounding`] for how to use.
+pub fn use_element_bounding_with_options(options: UseElementBoundingOptions) -> UseElementBoundingReturn {
+ UseElementBoundingReturn {}
+}
+
+/// Options for [`use_element_bounding_with_options`].
+#[derive(DefaultBuilder)]
+pub struct UseElementBoundingOptions {}
+
+impl Default for UseElementBoundingOptions {
+ fn default() -> Self {
+ Self {}
+ }
+}
+
+/// Return type of [`use_element_bounding`].
+pub struct UseElementBoundingReturn {}
\ No newline at end of file
From c2a48631aaef693025532ca2e1bb2acb9f152b67 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81lvaro=20Mond=C3=A9jar=20Rubio?=
<mondejar1994@gmail.com>
Date: Mon, 1 Jan 2024 19:29:03 +0100
Subject: [PATCH 02/34] Add `use_device_pixel_ratio`
---
CHANGELOG.md | 6 +
docs/book/src/SUMMARY.md | 1 +
.../src/sensors/use_device_pixel_ratio.md | 3 +
examples/Cargo.toml | 1 +
examples/use_device_pixel_ratio/Cargo.toml | 16 +
examples/use_device_pixel_ratio/README.md | 23 ++
examples/use_device_pixel_ratio/Trunk.toml | 2 +
examples/use_device_pixel_ratio/index.html | 7 +
examples/use_device_pixel_ratio/input.css | 3 +
.../rust-toolchain.toml | 2 +
examples/use_device_pixel_ratio/src/main.rs | 24 ++
.../use_device_pixel_ratio/style/output.css | 289 ++++++++++++++++++
.../use_device_pixel_ratio/tailwind.config.js | 15 +
src/lib.rs | 2 +
src/use_device_pixel_ratio.rs | 58 ++++
15 files changed, 452 insertions(+)
create mode 100644 docs/book/src/sensors/use_device_pixel_ratio.md
create mode 100644 examples/use_device_pixel_ratio/Cargo.toml
create mode 100644 examples/use_device_pixel_ratio/README.md
create mode 100644 examples/use_device_pixel_ratio/Trunk.toml
create mode 100644 examples/use_device_pixel_ratio/index.html
create mode 100644 examples/use_device_pixel_ratio/input.css
create mode 100644 examples/use_device_pixel_ratio/rust-toolchain.toml
create mode 100644 examples/use_device_pixel_ratio/src/main.rs
create mode 100644 examples/use_device_pixel_ratio/style/output.css
create mode 100644 examples/use_device_pixel_ratio/tailwind.config.js
create mode 100644 src/use_device_pixel_ratio.rs
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 66c789d..ca4ec20 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,12 @@
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).
+## [Unreleased] -
+
+### New Functions 🚀
+
+- `use_device_pixel_ratio` (thanks to @mondeja)
+
## [0.9.0] - 2023-12-06
### New Functions 🚀
diff --git a/docs/book/src/SUMMARY.md b/docs/book/src/SUMMARY.md
index 2cf9fc6..e65afb5 100644
--- a/docs/book/src/SUMMARY.md
+++ b/docs/book/src/SUMMARY.md
@@ -45,6 +45,7 @@
# Sensors
- [on_click_outside](sensors/on_click_outside.md)
+- [use_device_pixel_ratio](sensors/use_device_pixel_ratio.md)
- [use_element_hover](sensors/use_element_hover.md)
- [use_geolocation](sensors/use_geolocation.md)
- [use_idle](sensors/use_idle.md)
diff --git a/docs/book/src/sensors/use_device_pixel_ratio.md b/docs/book/src/sensors/use_device_pixel_ratio.md
new file mode 100644
index 0000000..e032e92
--- /dev/null
+++ b/docs/book/src/sensors/use_device_pixel_ratio.md
@@ -0,0 +1,3 @@
+# use_device_pixel_ratio
+
+<!-- cmdrun python3 ../extract_doc_comment.py use_device_pixel_ratio -->
diff --git a/examples/Cargo.toml b/examples/Cargo.toml
index d9f03b9..e53eb6d 100644
--- a/examples/Cargo.toml
+++ b/examples/Cargo.toml
@@ -13,6 +13,7 @@ members = [
"use_css_var",
"use_cycle_list",
"use_debounce_fn",
+ "use_device_pixel_ratio",
"use_display_media",
"use_document_visibility",
"use_draggable",
diff --git a/examples/use_device_pixel_ratio/Cargo.toml b/examples/use_device_pixel_ratio/Cargo.toml
new file mode 100644
index 0000000..a5cbe0d
--- /dev/null
+++ b/examples/use_device_pixel_ratio/Cargo.toml
@@ -0,0 +1,16 @@
+[package]
+name = "use_device_pixel_ratio"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+leptos = { version = "0.5", features = ["nightly", "csr"] }
+console_error_panic_hook = "0.1"
+console_log = "1"
+log = "0.4"
+leptos-use = { path = "../..", features = ["docs"] }
+web-sys = "0.3"
+
+[dev-dependencies]
+wasm-bindgen = "0.2"
+wasm-bindgen-test = "0.3.0"
diff --git a/examples/use_device_pixel_ratio/README.md b/examples/use_device_pixel_ratio/README.md
new file mode 100644
index 0000000..50693db
--- /dev/null
+++ b/examples/use_device_pixel_ratio/README.md
@@ -0,0 +1,23 @@
+A simple example for `use_device_pixel_ratio`.
+
+If you don't have it installed already, install [Trunk](https://trunkrs.dev/) and [Tailwind](https://tailwindcss.com/docs/installation)
+as well as the nightly toolchain for Rust and the wasm32-unknown-unknown target:
+
+```bash
+cargo install trunk
+npm install -D tailwindcss @tailwindcss/forms
+rustup toolchain install nightly
+rustup target add wasm32-unknown-unknown
+```
+
+Then, open two terminals. In the first one, run:
+
+```
+npx tailwindcss -i ./input.css -o ./style/output.css --watch
+```
+
+In the second one, run:
+
+```bash
+trunk serve --open
+```
\ No newline at end of file
diff --git a/examples/use_device_pixel_ratio/Trunk.toml b/examples/use_device_pixel_ratio/Trunk.toml
new file mode 100644
index 0000000..3e4be08
--- /dev/null
+++ b/examples/use_device_pixel_ratio/Trunk.toml
@@ -0,0 +1,2 @@
+[build]
+public_url = "/demo/"
\ No newline at end of file
diff --git a/examples/use_device_pixel_ratio/index.html b/examples/use_device_pixel_ratio/index.html
new file mode 100644
index 0000000..ae249a6
--- /dev/null
+++ b/examples/use_device_pixel_ratio/index.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link data-trunk rel="css" href="style/output.css">
+ </head>
+ <body></body>
+</html>
diff --git a/examples/use_device_pixel_ratio/input.css b/examples/use_device_pixel_ratio/input.css
new file mode 100644
index 0000000..bd6213e
--- /dev/null
+++ b/examples/use_device_pixel_ratio/input.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file
diff --git a/examples/use_device_pixel_ratio/rust-toolchain.toml b/examples/use_device_pixel_ratio/rust-toolchain.toml
new file mode 100644
index 0000000..271800c
--- /dev/null
+++ b/examples/use_device_pixel_ratio/rust-toolchain.toml
@@ -0,0 +1,2 @@
+[toolchain]
+channel = "nightly"
\ No newline at end of file
diff --git a/examples/use_device_pixel_ratio/src/main.rs b/examples/use_device_pixel_ratio/src/main.rs
new file mode 100644
index 0000000..fb3e6f7
--- /dev/null
+++ b/examples/use_device_pixel_ratio/src/main.rs
@@ -0,0 +1,24 @@
+use leptos::*;
+use leptos_use::docs::demo_or_body;
+use leptos_use::use_device_pixel_ratio;
+
+#[component]
+fn Demo() -> impl IntoView {
+ let pixel_ratio = use_device_pixel_ratio();
+
+ view! {
+ <pre>{move || format!("pixelRatio: {}", pixel_ratio())}</pre>
+ <p>
+ "Zoom in and out (or move the window to a screen with a different scaling factor) to see the value changes."
+ </p>
+ }
+}
+
+fn main() {
+ _ = console_log::init_with_level(log::Level::Debug);
+ console_error_panic_hook::set_once();
+
+ mount_to(demo_or_body(), || {
+ view! { <Demo/> }
+ })
+}
diff --git a/examples/use_device_pixel_ratio/style/output.css b/examples/use_device_pixel_ratio/style/output.css
new file mode 100644
index 0000000..ab5191f
--- /dev/null
+++ b/examples/use_device_pixel_ratio/style/output.css
@@ -0,0 +1,289 @@
+[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ background-color: #fff;
+ border-color: #6b7280;
+ border-width: 1px;
+ border-radius: 0px;
+ padding-top: 0.5rem;
+ padding-right: 0.75rem;
+ padding-bottom: 0.5rem;
+ padding-left: 0.75rem;
+ font-size: 1rem;
+ line-height: 1.5rem;
+ --tw-shadow: 0 0 #0000;
+}
+
+[type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
+ outline: 2px solid transparent;
+ outline-offset: 2px;
+ --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
+ --tw-ring-offset-width: 0px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: #2563eb;
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+ border-color: #2563eb;
+}
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+ color: #6b7280;
+ opacity: 1;
+}
+
+input::placeholder,textarea::placeholder {
+ color: #6b7280;
+ opacity: 1;
+}
+
+::-webkit-datetime-edit-fields-wrapper {
+ padding: 0;
+}
+
+::-webkit-date-and-time-value {
+ min-height: 1.5em;
+}
+
+::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
+ padding-top: 0;
+ padding-bottom: 0;
+}
+
+select {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+ background-position: right 0.5rem center;
+ background-repeat: no-repeat;
+ background-size: 1.5em 1.5em;
+ padding-right: 2.5rem;
+ -webkit-print-color-adjust: exact;
+ print-color-adjust: exact;
+}
+
+[multiple] {
+ background-image: initial;
+ background-position: initial;
+ background-repeat: unset;
+ background-size: initial;
+ padding-right: 0.75rem;
+ -webkit-print-color-adjust: unset;
+ print-color-adjust: unset;
+}
+
+[type='checkbox'],[type='radio'] {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ padding: 0;
+ -webkit-print-color-adjust: exact;
+ print-color-adjust: exact;
+ display: inline-block;
+ vertical-align: middle;
+ background-origin: border-box;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+ flex-shrink: 0;
+ height: 1rem;
+ width: 1rem;
+ color: #2563eb;
+ background-color: #fff;
+ border-color: #6b7280;
+ border-width: 1px;
+ --tw-shadow: 0 0 #0000;
+}
+
+[type='checkbox'] {
+ border-radius: 0px;
+}
+
+[type='radio'] {
+ border-radius: 100%;
+}
+
+[type='checkbox']:focus,[type='radio']:focus {
+ outline: 2px solid transparent;
+ outline-offset: 2px;
+ --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
+ --tw-ring-offset-width: 2px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: #2563eb;
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+
+[type='checkbox']:checked,[type='radio']:checked {
+ border-color: transparent;
+ background-color: currentColor;
+ background-size: 100% 100%;
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+[type='checkbox']:checked {
+ background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+}
+
+[type='radio']:checked {
+ background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+}
+
+[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
+ border-color: transparent;
+ background-color: currentColor;
+}
+
+[type='checkbox']:indeterminate {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
+ border-color: transparent;
+ background-color: currentColor;
+ background-size: 100% 100%;
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
+ border-color: transparent;
+ background-color: currentColor;
+}
+
+[type='file'] {
+ background: unset;
+ border-color: inherit;
+ border-width: 0;
+ border-radius: 0;
+ padding: 0;
+ font-size: unset;
+ line-height: inherit;
+}
+
+[type='file']:focus {
+ outline: 1px solid ButtonText;
+ outline: 1px auto -webkit-focus-ring-color;
+}
+
+*, ::before, ::after {
+ --tw-border-spacing-x: 0;
+ --tw-border-spacing-y: 0;
+ --tw-translate-x: 0;
+ --tw-translate-y: 0;
+ --tw-rotate: 0;
+ --tw-skew-x: 0;
+ --tw-skew-y: 0;
+ --tw-scale-x: 1;
+ --tw-scale-y: 1;
+ --tw-pan-x: ;
+ --tw-pan-y: ;
+ --tw-pinch-zoom: ;
+ --tw-scroll-snap-strictness: proximity;
+ --tw-gradient-from-position: ;
+ --tw-gradient-via-position: ;
+ --tw-gradient-to-position: ;
+ --tw-ordinal: ;
+ --tw-slashed-zero: ;
+ --tw-numeric-figure: ;
+ --tw-numeric-spacing: ;
+ --tw-numeric-fraction: ;
+ --tw-ring-inset: ;
+ --tw-ring-offset-width: 0px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: rgb(59 130 246 / 0.5);
+ --tw-ring-offset-shadow: 0 0 #0000;
+ --tw-ring-shadow: 0 0 #0000;
+ --tw-shadow: 0 0 #0000;
+ --tw-shadow-colored: 0 0 #0000;
+ --tw-blur: ;
+ --tw-brightness: ;
+ --tw-contrast: ;
+ --tw-grayscale: ;
+ --tw-hue-rotate: ;
+ --tw-invert: ;
+ --tw-saturate: ;
+ --tw-sepia: ;
+ --tw-drop-shadow: ;
+ --tw-backdrop-blur: ;
+ --tw-backdrop-brightness: ;
+ --tw-backdrop-contrast: ;
+ --tw-backdrop-grayscale: ;
+ --tw-backdrop-hue-rotate: ;
+ --tw-backdrop-invert: ;
+ --tw-backdrop-opacity: ;
+ --tw-backdrop-saturate: ;
+ --tw-backdrop-sepia: ;
+}
+
+::backdrop {
+ --tw-border-spacing-x: 0;
+ --tw-border-spacing-y: 0;
+ --tw-translate-x: 0;
+ --tw-translate-y: 0;
+ --tw-rotate: 0;
+ --tw-skew-x: 0;
+ --tw-skew-y: 0;
+ --tw-scale-x: 1;
+ --tw-scale-y: 1;
+ --tw-pan-x: ;
+ --tw-pan-y: ;
+ --tw-pinch-zoom: ;
+ --tw-scroll-snap-strictness: proximity;
+ --tw-gradient-from-position: ;
+ --tw-gradient-via-position: ;
+ --tw-gradient-to-position: ;
+ --tw-ordinal: ;
+ --tw-slashed-zero: ;
+ --tw-numeric-figure: ;
+ --tw-numeric-spacing: ;
+ --tw-numeric-fraction: ;
+ --tw-ring-inset: ;
+ --tw-ring-offset-width: 0px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: rgb(59 130 246 / 0.5);
+ --tw-ring-offset-shadow: 0 0 #0000;
+ --tw-ring-shadow: 0 0 #0000;
+ --tw-shadow: 0 0 #0000;
+ --tw-shadow-colored: 0 0 #0000;
+ --tw-blur: ;
+ --tw-brightness: ;
+ --tw-contrast: ;
+ --tw-grayscale: ;
+ --tw-hue-rotate: ;
+ --tw-invert: ;
+ --tw-saturate: ;
+ --tw-sepia: ;
+ --tw-drop-shadow: ;
+ --tw-backdrop-blur: ;
+ --tw-backdrop-brightness: ;
+ --tw-backdrop-contrast: ;
+ --tw-backdrop-grayscale: ;
+ --tw-backdrop-hue-rotate: ;
+ --tw-backdrop-invert: ;
+ --tw-backdrop-opacity: ;
+ --tw-backdrop-saturate: ;
+ --tw-backdrop-sepia: ;
+}
+
+.block {
+ display: block;
+}
+
+.text-\[--brand-color\] {
+ color: var(--brand-color);
+}
+
+.text-green-600 {
+ --tw-text-opacity: 1;
+ color: rgb(22 163 74 / var(--tw-text-opacity));
+}
+
+.opacity-75 {
+ opacity: 0.75;
+}
+
+@media (prefers-color-scheme: dark) {
+ .dark\:text-green-500 {
+ --tw-text-opacity: 1;
+ color: rgb(34 197 94 / var(--tw-text-opacity));
+ }
+}
\ No newline at end of file
diff --git a/examples/use_device_pixel_ratio/tailwind.config.js b/examples/use_device_pixel_ratio/tailwind.config.js
new file mode 100644
index 0000000..bc09f5e
--- /dev/null
+++ b/examples/use_device_pixel_ratio/tailwind.config.js
@@ -0,0 +1,15 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: {
+ files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"],
+ },
+ theme: {
+ extend: {},
+ },
+ corePlugins: {
+ preflight: false,
+ },
+ plugins: [
+ require('@tailwindcss/forms'),
+ ],
+}
\ No newline at end of file
diff --git a/src/lib.rs b/src/lib.rs
index d42079d..24e625a 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -22,6 +22,7 @@ mod use_color_mode;
mod use_css_var;
mod use_cycle_list;
mod use_debounce_fn;
+mod use_device_pixel_ratio;
mod use_display_media;
mod use_document;
mod use_document_visibility;
@@ -77,6 +78,7 @@ pub use use_color_mode::*;
pub use use_css_var::*;
pub use use_cycle_list::*;
pub use use_debounce_fn::*;
+pub use use_device_pixel_ratio::*;
pub use use_display_media::*;
pub use use_document::*;
pub use use_document_visibility::*;
diff --git a/src/use_device_pixel_ratio.rs b/src/use_device_pixel_ratio.rs
new file mode 100644
index 0000000..4a829ad
--- /dev/null
+++ b/src/use_device_pixel_ratio.rs
@@ -0,0 +1,58 @@
+use crate::{use_event_listener_with_options, UseEventListenerOptions};
+use cfg_if::cfg_if;
+use leptos::{*, ev::change};
+
+/// Reactive [`window.devicePixelRatio`](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio)
+///
+/// > NOTE: there is no event listener for `window.devicePixelRatio` change.
+/// > So this function uses the same mechanism as described in
+/// > [this example](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio#monitoring_screen_resolution_or_zoom_level_changes).
+///
+/// ## Demo
+///
+/// [Link to Demo](https://github.com/Synphonyte/leptos-use/tree/main/examples/use_device_pixel_ratio)
+///
+/// ## Usage
+///
+/// ```
+/// # use leptos::*;
+/// # use leptos_use::use_device_pixel_ratio;
+/// #
+/// # #[component]
+/// # fn Demo() -> impl IntoView {
+/// let pixel_ratio = use_device_pixel_ratio();
+/// #
+/// # view! { }
+/// # }
+/// ```
+///
+/// ## Server-Side Rendering
+///
+/// On the server this function returns a Signal that is always `1.0`.
+pub fn use_device_pixel_ratio() -> Signal<f64> {
+ cfg_if! { if #[cfg(feature = "ssr")] {
+ let pixel_ratio = Signal::derive(|| 1.0);
+ } else {
+ let initial_pixel_ratio = window().device_pixel_ratio();
+ let (pixel_ratio, set_pixel_ratio) = create_signal(initial_pixel_ratio);
+
+ create_effect(move |_| {
+ let media = window().match_media(
+ &format!("(resolution: {}dppx)", pixel_ratio.get())
+ ).unwrap();
+
+ _ = use_event_listener_with_options(
+ media,
+ change,
+ move |_| {
+ set_pixel_ratio.set(window().device_pixel_ratio());
+ },
+ UseEventListenerOptions::default()
+ .capture(false)
+ .passive(true)
+ .once(true),
+ );
+ });
+ }}
+ pixel_ratio.into()
+}
From de39dc115465b23e983ca8a37f967561c655d055 Mon Sep 17 00:00:00 2001
From: Maccesch <maccesch@synphonyte.com>
Date: Wed, 3 Jan 2024 20:51:33 +0000
Subject: [PATCH 03/34] implemented use_element_bounding
---
examples/use_element_bounding/src/main.rs | 42 +++-
.../use_element_bounding/style/output.css | 72 ++++++-
src/lib.rs | 4 +-
src/use_element_bounding.rs | 198 ++++++++++++++++--
src/use_element_size.rs | 6 +-
5 files changed, 295 insertions(+), 27 deletions(-)
diff --git a/examples/use_element_bounding/src/main.rs b/examples/use_element_bounding/src/main.rs
index f0bb028..48ab2e4 100644
--- a/examples/use_element_bounding/src/main.rs
+++ b/examples/use_element_bounding/src/main.rs
@@ -1,13 +1,47 @@
+use leptos::html::Textarea;
use leptos::*;
-use leptos_use::docs::demo_or_body;
-use leptos_use::use_element_bounding;
+use leptos_use::docs::{demo_or_body, Note};
+use leptos_use::{use_element_bounding, UseElementBoundingReturn};
#[component]
fn Demo() -> impl IntoView {
+ let el = create_node_ref::<Textarea>();
- use_element_bounding();
+ let UseElementBoundingReturn {
+ width,
+ height,
+ left,
+ right,
+ top,
+ bottom,
+ x,
+ y,
+ ..
+ } = use_element_bounding(el);
- view! { }
+ let text = move || {
+ format!(
+ "width: {}\nheight: {}\nleft: {}\nright: {}\ntop: {}\nbottom: {}\nx: {}\ny: {}",
+ width.get(),
+ height.get(),
+ left.get(),
+ right.get(),
+ top.get(),
+ bottom.get(),
+ x.get(),
+ y.get()
+ )
+ };
+
+ view! {
+ <Note class="mb-2">Resize the box to see changes</Note>
+ <textarea
+ node_ref=el
+ readonly
+ class="resize rounded-md p-4 w-[335px] h-[175px] text-2xl leading-10"
+ prop:value=text
+ ></textarea>
+ }
}
fn main() {
diff --git a/examples/use_element_bounding/style/output.css b/examples/use_element_bounding/style/output.css
index ab5191f..263b210 100644
--- a/examples/use_element_bounding/style/output.css
+++ b/examples/use_element_bounding/style/output.css
@@ -1,4 +1,4 @@
-[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
+[type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@@ -15,7 +15,7 @@
--tw-shadow: 0 0 #0000;
}
-[type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
+[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
@@ -44,6 +44,11 @@ input::placeholder,textarea::placeholder {
::-webkit-date-and-time-value {
min-height: 1.5em;
+ text-align: inherit;
+}
+
+::-webkit-datetime-edit {
+ display: inline-flex;
}
::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
@@ -61,7 +66,7 @@ select {
print-color-adjust: exact;
}
-[multiple] {
+[multiple],[size]:where(select:not([size="1"])) {
background-image: initial;
background-position: initial;
background-repeat: unset;
@@ -126,10 +131,26 @@ select {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
+@media (forced-colors: active) {
+ [type='checkbox']:checked {
+ -webkit-appearance: auto;
+ -moz-appearance: auto;
+ appearance: auto;
+ }
+}
+
[type='radio']:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
+@media (forced-colors: active) {
+ [type='radio']:checked {
+ -webkit-appearance: auto;
+ -moz-appearance: auto;
+ appearance: auto;
+ }
+}
+
[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
border-color: transparent;
background-color: currentColor;
@@ -144,6 +165,14 @@ select {
background-repeat: no-repeat;
}
+@media (forced-colors: active) {
+ [type='checkbox']:indeterminate {
+ -webkit-appearance: auto;
+ -moz-appearance: auto;
+ appearance: auto;
+ }
+}
+
[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
border-color: transparent;
background-color: currentColor;
@@ -264,8 +293,41 @@ select {
--tw-backdrop-sepia: ;
}
-.block {
- display: block;
+.static {
+ position: static;
+}
+
+.mb-2 {
+ margin-bottom: 0.5rem;
+}
+
+.h-\[175px\] {
+ height: 175px;
+}
+
+.w-\[335px\] {
+ width: 335px;
+}
+
+.resize {
+ resize: both;
+}
+
+.rounded-md {
+ border-radius: 0.375rem;
+}
+
+.p-4 {
+ padding: 1rem;
+}
+
+.text-2xl {
+ font-size: 1.5rem;
+ line-height: 2rem;
+}
+
+.leading-10 {
+ line-height: 2.5rem;
}
.text-\[--brand-color\] {
diff --git a/src/lib.rs b/src/lib.rs
index 1e1c5a8..133ecb0 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -14,7 +14,6 @@ mod is_none;
mod is_ok;
mod is_some;
mod on_click_outside;
-mod use_element_bounding;
mod signal_debounced;
mod signal_throttled;
mod use_active_element;
@@ -28,6 +27,7 @@ mod use_document;
mod use_document_visibility;
mod use_draggable;
mod use_drop_zone;
+mod use_element_bounding;
mod use_element_hover;
mod use_element_size;
mod use_element_visibility;
@@ -70,7 +70,6 @@ pub use is_none::*;
pub use is_ok::*;
pub use is_some::*;
pub use on_click_outside::*;
-pub use use_element_bounding::*;
pub use signal_debounced::*;
pub use signal_throttled::*;
pub use use_active_element::*;
@@ -84,6 +83,7 @@ pub use use_document::*;
pub use use_document_visibility::*;
pub use use_draggable::*;
pub use use_drop_zone::*;
+pub use use_element_bounding::*;
pub use use_element_hover::*;
pub use use_element_size::*;
pub use use_element_visibility::*;
diff --git a/src/use_element_bounding.rs b/src/use_element_bounding.rs
index 15cd98e..d5b963a 100644
--- a/src/use_element_bounding.rs
+++ b/src/use_element_bounding.rs
@@ -1,7 +1,12 @@
+use crate::core::ElementMaybeSignal;
+use crate::{
+ use_event_listener_with_options, use_resize_observer, use_window, UseEventListenerOptions,
+};
use default_struct_builder::DefaultBuilder;
+use leptos::ev::{resize, scroll};
use leptos::*;
-///
+/// Reactive [bounding box](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) of an HTML element
///
/// ## Demo
///
@@ -11,33 +16,202 @@ use leptos::*;
///
/// ```
/// # use leptos::*;
-/// # use leptos_use::use_element_bounding;
+/// # use leptos::html::Div;
+/// # use leptos_use::{use_element_bounding, UseElementBoundingReturn};
/// #
/// # #[component]
/// # fn Demo() -> impl IntoView {
-/// use_element_bounding();
-/// #
-/// # view! { }
+/// let el = create_node_ref::<Div>();
+/// let UseElementBoundingReturn {
+/// x, y, top,right,bottom,left, width, height, ..
+/// } = use_element_bounding(el);
+///
+/// view! { <div node_ref=el></div> }
/// # }
/// ```
-pub fn use_element_bounding() -> UseElementBoundingReturn {
- use_element_bounding_with_options(UseElementBoundingOptions::default())
+pub fn use_element_bounding<El, T>(target: El) -> UseElementBoundingReturn<impl Fn() + Clone>
+where
+ El: Into<ElementMaybeSignal<T, web_sys::Element>> + Clone,
+ T: Into<web_sys::Element> + Clone + 'static,
+{
+ use_element_bounding_with_options(target, UseElementBoundingOptions::default())
}
/// Version of [`use_element_bounding`] that takes a `UseElementBoundingOptions`. See [`use_element_bounding`] for how to use.
-pub fn use_element_bounding_with_options(options: UseElementBoundingOptions) -> UseElementBoundingReturn {
- UseElementBoundingReturn {}
+pub fn use_element_bounding_with_options<El, T>(
+ target: El,
+ options: UseElementBoundingOptions,
+) -> UseElementBoundingReturn<impl Fn() + Clone>
+where
+ El: Into<ElementMaybeSignal<T, web_sys::Element>> + Clone,
+ T: Into<web_sys::Element> + Clone + 'static,
+{
+ let UseElementBoundingOptions {
+ reset,
+ window_resize,
+ window_scroll,
+ immediate,
+ } = options;
+
+ let (height, set_height) = create_signal(0.0);
+ let (width, set_width) = create_signal(0.0);
+ let (left, set_left) = create_signal(0.0);
+ let (right, set_right) = create_signal(0.0);
+ let (top, set_top) = create_signal(0.0);
+ let (bottom, set_bottom) = create_signal(0.0);
+ let (x, set_x) = create_signal(0.0);
+ let (y, set_y) = create_signal(0.0);
+
+ let target = target.into();
+
+ let update = {
+ let target = target.clone();
+
+ move || {
+ let el = target.get_untracked();
+
+ if let Some(el) = el {
+ let rect = el.into().get_bounding_client_rect();
+
+ set_height.set(rect.height());
+ set_width.set(rect.width());
+ set_left.set(rect.x());
+ set_right.set(rect.x() + rect.width());
+ set_top.set(rect.y());
+ set_bottom.set(rect.y() + rect.height());
+ set_x.set(rect.x());
+ set_y.set(rect.y());
+ } else if reset {
+ set_height.set(0.0);
+ set_width.set(0.0);
+ set_left.set(0.0);
+ set_right.set(0.0);
+ set_top.set(0.0);
+ set_bottom.set(0.0);
+ set_x.set(0.0);
+ set_y.set(0.0);
+ }
+ }
+ };
+
+ use_resize_observer(target.clone(), {
+ let update = update.clone();
+
+ move |_, _| {
+ update();
+ }
+ });
+
+ let _ = watch(
+ move || target.get(),
+ {
+ let update = update.clone();
+ move |_, _, _| {
+ update();
+ }
+ },
+ false,
+ );
+
+ if window_scroll {
+ let _ = use_event_listener_with_options(
+ use_window(),
+ scroll,
+ {
+ let update = update.clone();
+ move |_| update()
+ },
+ UseEventListenerOptions::default()
+ .capture(true)
+ .passive(true),
+ );
+ }
+
+ if window_resize {
+ let _ = use_event_listener_with_options(
+ use_window(),
+ resize,
+ {
+ let update = update.clone();
+ move |_| update()
+ },
+ UseEventListenerOptions::default().passive(true),
+ );
+ }
+
+ if immediate {
+ update();
+ }
+
+ UseElementBoundingReturn {
+ height: height.into(),
+ width: width.into(),
+ left: left.into(),
+ right: right.into(),
+ top: top.into(),
+ bottom: bottom.into(),
+ x: x.into(),
+ y: y.into(),
+ update,
+ }
}
/// Options for [`use_element_bounding_with_options`].
#[derive(DefaultBuilder)]
-pub struct UseElementBoundingOptions {}
+pub struct UseElementBoundingOptions {
+ /// Reset values to 0 on component disposal
+ ///
+ /// Default: `true`
+ pub reset: bool,
+
+ /// Listen to window resize event
+ ///
+ /// Default: `true`
+ pub window_resize: bool,
+
+ /// Listen to window scroll event
+ ///
+ /// Default: `true`
+ pub window_scroll: bool,
+
+ /// Immediately call update
+ ///
+ /// Default: `true`
+ pub immediate: bool,
+}
impl Default for UseElementBoundingOptions {
fn default() -> Self {
- Self {}
+ Self {
+ reset: true,
+ window_resize: true,
+ window_scroll: true,
+ immediate: true,
+ }
}
}
/// Return type of [`use_element_bounding`].
-pub struct UseElementBoundingReturn {}
\ No newline at end of file
+pub struct UseElementBoundingReturn<F>
+where
+ F: Fn() + Clone,
+{
+ /// Reactive version of [`BoudingClientRect.height`](https://developer.mozilla.org/en-US/docs/Web/API/DOMRectReadOnly/height)
+ pub height: Signal<f64>,
+ /// Reactive version of [`BoudingClientRect.width`](https://developer.mozilla.org/en-US/docs/Web/API/DOMRectReadOnly/width)
+ pub width: Signal<f64>,
+ /// Reactive version of [`BoudingClientRect.left`](https://developer.mozilla.org/en-US/docs/Web/API/DOMRectReadOnly/left)
+ pub left: Signal<f64>,
+ /// Reactive version of [`BoudingClientRect.right`](https://developer.mozilla.org/en-US/docs/Web/API/DOMRectReadOnly/right)
+ pub right: Signal<f64>,
+ /// Reactive version of [`BoudingClientRect.top`](https://developer.mozilla.org/en-US/docs/Web/API/DOMRectReadOnly/top)
+ pub top: Signal<f64>,
+ /// Reactive version of [`BoudingClientRect.bottom`](https://developer.mozilla.org/en-US/docs/Web/API/DOMRectReadOnly/bottom)
+ pub bottom: Signal<f64>,
+ /// Reactive version of [`BoudingClientRect.x`](https://developer.mozilla.org/en-US/docs/Web/API/DOMRectReadOnly/x)
+ pub x: Signal<f64>,
+ /// Reactive version of [`BoudingClientRect.y`](https://developer.mozilla.org/en-US/docs/Web/API/DOMRectReadOnly/y)
+ pub y: Signal<f64>,
+ /// Function to re-evaluate `get_bounding_client_rect()` and update the signals.
+ pub update: F,
+}
diff --git a/src/use_element_size.rs b/src/use_element_size.rs
index bc6a226..5d881e1 100644
--- a/src/use_element_size.rs
+++ b/src/use_element_size.rs
@@ -49,8 +49,7 @@ cfg_if! { if #[cfg(not(feature = "ssr"))] {
/// - [`use_resize_observer`]
pub fn use_element_size<El, T>(target: El) -> UseElementSizeReturn
where
- El: Clone,
- El: Into<ElementMaybeSignal<T, web_sys::Element>>,
+ El: Into<ElementMaybeSignal<T, web_sys::Element>> + Clone,
T: Into<web_sys::Element> + Clone + 'static,
{
use_element_size_with_options(target, UseElementSizeOptions::default())
@@ -63,8 +62,7 @@ pub fn use_element_size_with_options<El, T>(
options: UseElementSizeOptions,
) -> UseElementSizeReturn
where
- El: Clone,
- El: Into<ElementMaybeSignal<T, web_sys::Element>>,
+ El: Into<ElementMaybeSignal<T, web_sys::Element>> + Clone,
T: Into<web_sys::Element> + Clone + 'static,
{
let UseElementSizeOptions { box_, initial_size } = options;
From d9ff05afea5fd1fe8318c56ca5424551d14308a4 Mon Sep 17 00:00:00 2001
From: Maccesch <maccesch@synphonyte.com>
Date: Wed, 3 Jan 2024 20:58:03 +0000
Subject: [PATCH 04/34] chore: rustfmt
---
src/use_device_pixel_ratio.rs | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/use_device_pixel_ratio.rs b/src/use_device_pixel_ratio.rs
index 4a829ad..025a97d 100644
--- a/src/use_device_pixel_ratio.rs
+++ b/src/use_device_pixel_ratio.rs
@@ -1,6 +1,6 @@
use crate::{use_event_listener_with_options, UseEventListenerOptions};
use cfg_if::cfg_if;
-use leptos::{*, ev::change};
+use leptos::{ev::change, *};
/// Reactive [`window.devicePixelRatio`](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio)
///
From 34c913caae19c8e14549d64d9216c4a78caff7a7 Mon Sep 17 00:00:00 2001
From: Maccesch <maccesch@synphonyte.com>
Date: Wed, 3 Jan 2024 21:11:28 +0000
Subject: [PATCH 05/34] added ssr to use_element_bounding
---
src/use_device_pixel_ratio.rs | 6 +-
src/use_element_bounding.rs | 171 +++++++++++++++++++---------------
2 files changed, 100 insertions(+), 77 deletions(-)
diff --git a/src/use_device_pixel_ratio.rs b/src/use_device_pixel_ratio.rs
index 025a97d..e98b44c 100644
--- a/src/use_device_pixel_ratio.rs
+++ b/src/use_device_pixel_ratio.rs
@@ -1,6 +1,5 @@
-use crate::{use_event_listener_with_options, UseEventListenerOptions};
use cfg_if::cfg_if;
-use leptos::{ev::change, *};
+use leptos::*;
/// Reactive [`window.devicePixelRatio`](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio)
///
@@ -33,6 +32,9 @@ pub fn use_device_pixel_ratio() -> Signal<f64> {
cfg_if! { if #[cfg(feature = "ssr")] {
let pixel_ratio = Signal::derive(|| 1.0);
} else {
+ use crate::{use_event_listener_with_options, UseEventListenerOptions};
+ use leptos::ev::change;
+
let initial_pixel_ratio = window().device_pixel_ratio();
let (pixel_ratio, set_pixel_ratio) = create_signal(initial_pixel_ratio);
diff --git a/src/use_element_bounding.rs b/src/use_element_bounding.rs
index d5b963a..bb4e809 100644
--- a/src/use_element_bounding.rs
+++ b/src/use_element_bounding.rs
@@ -1,9 +1,6 @@
use crate::core::ElementMaybeSignal;
-use crate::{
- use_event_listener_with_options, use_resize_observer, use_window, UseEventListenerOptions,
-};
+use cfg_if::cfg_if;
use default_struct_builder::DefaultBuilder;
-use leptos::ev::{resize, scroll};
use leptos::*;
/// Reactive [bounding box](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) of an HTML element
@@ -29,6 +26,9 @@ use leptos::*;
/// view! { <div node_ref=el></div> }
/// # }
/// ```
+/// ## Server-Side Rendering
+///
+/// On the server the returned signals always are `0.0` and `update` is a no-op.
pub fn use_element_bounding<El, T>(target: El) -> UseElementBoundingReturn<impl Fn() + Clone>
where
El: Into<ElementMaybeSignal<T, web_sys::Element>> + Clone,
@@ -46,13 +46,6 @@ where
El: Into<ElementMaybeSignal<T, web_sys::Element>> + Clone,
T: Into<web_sys::Element> + Clone + 'static,
{
- let UseElementBoundingOptions {
- reset,
- window_resize,
- window_scroll,
- immediate,
- } = options;
-
let (height, set_height) = create_signal(0.0);
let (width, set_width) = create_signal(0.0);
let (left, set_left) = create_signal(0.0);
@@ -62,86 +55,114 @@ where
let (x, set_x) = create_signal(0.0);
let (y, set_y) = create_signal(0.0);
- let target = target.into();
+ cfg_if! { if #[cfg(feature = "ssr")] {
+ let _ = target;
+ let _ = options;
- let update = {
- let target = target.clone();
+ let _ = set_height;
+ let _ = set_width;
+ let _ = set_left;
+ let _ = set_right;
+ let _ = set_top;
+ let _ = set_bottom;
+ let _ = set_x;
+ let _ = set_y;
- move || {
- let el = target.get_untracked();
+ let update = move || ();
+ } else {
+ use leptos::ev::{resize, scroll};
+ use crate::{
+ use_event_listener_with_options, use_resize_observer, use_window, UseEventListenerOptions,
+ };
- if let Some(el) = el {
- let rect = el.into().get_bounding_client_rect();
+ let UseElementBoundingOptions {
+ reset,
+ window_resize,
+ window_scroll,
+ immediate,
+ } = options;
- set_height.set(rect.height());
- set_width.set(rect.width());
- set_left.set(rect.x());
- set_right.set(rect.x() + rect.width());
- set_top.set(rect.y());
- set_bottom.set(rect.y() + rect.height());
- set_x.set(rect.x());
- set_y.set(rect.y());
- } else if reset {
- set_height.set(0.0);
- set_width.set(0.0);
- set_left.set(0.0);
- set_right.set(0.0);
- set_top.set(0.0);
- set_bottom.set(0.0);
- set_x.set(0.0);
- set_y.set(0.0);
+ let target = target.into();
+
+ let update = {
+ let target = target.clone();
+
+ move || {
+ let el = target.get_untracked();
+
+ if let Some(el) = el {
+ let rect = el.into().get_bounding_client_rect();
+
+ set_height.set(rect.height());
+ set_width.set(rect.width());
+ set_left.set(rect.x());
+ set_right.set(rect.x() + rect.width());
+ set_top.set(rect.y());
+ set_bottom.set(rect.y() + rect.height());
+ set_x.set(rect.x());
+ set_y.set(rect.y());
+ } else if reset {
+ set_height.set(0.0);
+ set_width.set(0.0);
+ set_left.set(0.0);
+ set_right.set(0.0);
+ set_top.set(0.0);
+ set_bottom.set(0.0);
+ set_x.set(0.0);
+ set_y.set(0.0);
+ }
}
- }
- };
+ };
- use_resize_observer(target.clone(), {
- let update = update.clone();
-
- move |_, _| {
- update();
- }
- });
-
- let _ = watch(
- move || target.get(),
- {
+ use_resize_observer(target.clone(), {
let update = update.clone();
- move |_, _, _| {
+
+ move |_, _| {
update();
}
- },
- false,
- );
+ });
- if window_scroll {
- let _ = use_event_listener_with_options(
- use_window(),
- scroll,
+ let _ = watch(
+ move || target.get(),
{
let update = update.clone();
- move |_| update()
+ move |_, _, _| {
+ update();
+ }
},
- UseEventListenerOptions::default()
- .capture(true)
- .passive(true),
+ false,
);
- }
- if window_resize {
- let _ = use_event_listener_with_options(
- use_window(),
- resize,
- {
- let update = update.clone();
- move |_| update()
- },
- UseEventListenerOptions::default().passive(true),
- );
- }
+ if window_scroll {
+ let _ = use_event_listener_with_options(
+ use_window(),
+ scroll,
+ {
+ let update = update.clone();
+ move |_| update()
+ },
+ UseEventListenerOptions::default()
+ .capture(true)
+ .passive(true),
+ );
+ }
- if immediate {
- update();
- }
+ if window_resize {
+ let _ = use_event_listener_with_options(
+ use_window(),
+ resize,
+ {
+ let update = update.clone();
+ move |_| update()
+ },
+ UseEventListenerOptions::default().passive(true),
+ );
+ }
+
+ if immediate {
+ update();
+ }
+ }}
UseElementBoundingReturn {
height: height.into(),
From ffff14ea9ce410641840a072eb65d58fbb4e951e Mon Sep 17 00:00:00 2001
From: Maccesch <maccesch@synphonyte.com>
Date: Wed, 3 Jan 2024 22:52:59 +0000
Subject: [PATCH 06/34] added use_mouse_in_element
---
CHANGELOG.md | 5 +
docs/book/src/SUMMARY.md | 1 +
.../book/src/elements/use_mouse_in_element.md | 3 +
examples/Cargo.toml | 1 +
examples/use_mouse_in_element/Cargo.toml | 16 +
examples/use_mouse_in_element/README.md | 23 ++
examples/use_mouse_in_element/Trunk.toml | 2 +
examples/use_mouse_in_element/index.html | 7 +
examples/use_mouse_in_element/input.css | 3 +
.../use_mouse_in_element/rust-toolchain.toml | 2 +
examples/use_mouse_in_element/src/main.rs | 53 +++
.../use_mouse_in_element/style/output.css | 352 ++++++++++++++++++
.../use_mouse_in_element/tailwind.config.js | 15 +
src/lib.rs | 2 +
src/use_mouse.rs | 15 +-
src/use_mouse_in_element.rs | 251 +++++++++++++
16 files changed, 743 insertions(+), 8 deletions(-)
create mode 100644 docs/book/src/elements/use_mouse_in_element.md
create mode 100644 examples/use_mouse_in_element/Cargo.toml
create mode 100644 examples/use_mouse_in_element/README.md
create mode 100644 examples/use_mouse_in_element/Trunk.toml
create mode 100644 examples/use_mouse_in_element/index.html
create mode 100644 examples/use_mouse_in_element/input.css
create mode 100644 examples/use_mouse_in_element/rust-toolchain.toml
create mode 100644 examples/use_mouse_in_element/src/main.rs
create mode 100644 examples/use_mouse_in_element/style/output.css
create mode 100644 examples/use_mouse_in_element/tailwind.config.js
create mode 100644 src/use_mouse_in_element.rs
diff --git a/CHANGELOG.md b/CHANGELOG.md
index fdeb2dc..5881465 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,9 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### New Functions 🚀
+- `use_mouse_in_element`
- `use_device_pixel_ratio` (thanks to @mondeja)
- `use_element_bounding`
+### Changes 🔥
+
+- The `UseMouseReturn` signals `x`, `y`, and `source_type` are now of type `Signal<f64>` instead of `ReadSignal<f64>`.
+
## [0.9.0] - 2023-12-06
### New Functions 🚀
diff --git a/docs/book/src/SUMMARY.md b/docs/book/src/SUMMARY.md
index 6ecadec..b7bda4a 100644
--- a/docs/book/src/SUMMARY.md
+++ b/docs/book/src/SUMMARY.md
@@ -23,6 +23,7 @@
- [use_element_size](elements/use_element_size.md)
- [use_element_visibility](elements/use_element_visibility.md)
- [use_intersection_observer](elements/use_intersection_observer.md)
+- [use_mouse_in_element](elements/use_mouse_in_element.md)
- [use_mutation_observer](elements/use_mutation_observer.md)
- [use_resize_observer](elements/use_resize_observer.md)
- [use_window](elements/use_window.md)
diff --git a/docs/book/src/elements/use_mouse_in_element.md b/docs/book/src/elements/use_mouse_in_element.md
new file mode 100644
index 0000000..0be1884
--- /dev/null
+++ b/docs/book/src/elements/use_mouse_in_element.md
@@ -0,0 +1,3 @@
+# use_mouse_in_element
+
+<!-- cmdrun python3 ../extract_doc_comment.py use_mouse_in_element -->
diff --git a/examples/Cargo.toml b/examples/Cargo.toml
index 9a9b886..bb1e8a2 100644
--- a/examples/Cargo.toml
+++ b/examples/Cargo.toml
@@ -34,6 +34,7 @@ members = [
"use_intl_number_format",
"use_media_query",
"use_mouse",
+ "use_mouse_in_element",
"use_mutation_observer",
"use_raf_fn",
"use_resize_observer",
diff --git a/examples/use_mouse_in_element/Cargo.toml b/examples/use_mouse_in_element/Cargo.toml
new file mode 100644
index 0000000..5606222
--- /dev/null
+++ b/examples/use_mouse_in_element/Cargo.toml
@@ -0,0 +1,16 @@
+[package]
+name = "use_mouse_in_element"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+leptos = { version = "0.5", features = ["nightly", "csr"] }
+console_error_panic_hook = "0.1"
+console_log = "1"
+log = "0.4"
+leptos-use = { path = "../..", features = ["docs"] }
+web-sys = "0.3"
+
+[dev-dependencies]
+wasm-bindgen = "0.2"
+wasm-bindgen-test = "0.3.0"
diff --git a/examples/use_mouse_in_element/README.md b/examples/use_mouse_in_element/README.md
new file mode 100644
index 0000000..a22cdeb
--- /dev/null
+++ b/examples/use_mouse_in_element/README.md
@@ -0,0 +1,23 @@
+A simple example for `use_mouse_in_element`.
+
+If you don't have it installed already, install [Trunk](https://trunkrs.dev/) and [Tailwind](https://tailwindcss.com/docs/installation)
+as well as the nightly toolchain for Rust and the wasm32-unknown-unknown target:
+
+```bash
+cargo install trunk
+npm install -D tailwindcss @tailwindcss/forms
+rustup toolchain install nightly
+rustup target add wasm32-unknown-unknown
+```
+
+Then, open two terminals. In the first one, run:
+
+```
+npx tailwindcss -i ./input.css -o ./style/output.css --watch
+```
+
+In the second one, run:
+
+```bash
+trunk serve --open
+```
\ No newline at end of file
diff --git a/examples/use_mouse_in_element/Trunk.toml b/examples/use_mouse_in_element/Trunk.toml
new file mode 100644
index 0000000..3e4be08
--- /dev/null
+++ b/examples/use_mouse_in_element/Trunk.toml
@@ -0,0 +1,2 @@
+[build]
+public_url = "/demo/"
\ No newline at end of file
diff --git a/examples/use_mouse_in_element/index.html b/examples/use_mouse_in_element/index.html
new file mode 100644
index 0000000..ae249a6
--- /dev/null
+++ b/examples/use_mouse_in_element/index.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link data-trunk rel="css" href="style/output.css">
+ </head>
+ <body></body>
+</html>
diff --git a/examples/use_mouse_in_element/input.css b/examples/use_mouse_in_element/input.css
new file mode 100644
index 0000000..bd6213e
--- /dev/null
+++ b/examples/use_mouse_in_element/input.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file
diff --git a/examples/use_mouse_in_element/rust-toolchain.toml b/examples/use_mouse_in_element/rust-toolchain.toml
new file mode 100644
index 0000000..271800c
--- /dev/null
+++ b/examples/use_mouse_in_element/rust-toolchain.toml
@@ -0,0 +1,2 @@
+[toolchain]
+channel = "nightly"
\ No newline at end of file
diff --git a/examples/use_mouse_in_element/src/main.rs b/examples/use_mouse_in_element/src/main.rs
new file mode 100644
index 0000000..a0ba237
--- /dev/null
+++ b/examples/use_mouse_in_element/src/main.rs
@@ -0,0 +1,53 @@
+use leptos::html::Div;
+use leptos::*;
+use leptos_use::docs::demo_or_body;
+use leptos_use::{use_mouse_in_element, UseMouseInElementReturn};
+
+#[component]
+fn Demo() -> impl IntoView {
+ let el = create_node_ref::<Div>();
+
+ let UseMouseInElementReturn {
+ x,
+ y,
+ source_type,
+ element_x,
+ element_y,
+ element_position_x,
+ element_position_y,
+ element_width,
+ element_height,
+ is_outside,
+ ..
+ } = use_mouse_in_element(el);
+
+ view! {
+ <div class="flex gap-4">
+ <div
+ node_ref=el
+ class="el w-40 h-40 bg-gray-400/20 border-rounded flex place-content-center select-none"
+ >
+ <div class="m-auto">Hover me</div>
+ </div>
+ <pre lang="yaml"> x: {x}
+ y: {y}
+ source_type: {move || format!("{:?}", source_type())}
+ element_x: {element_x}
+ element_y: {element_y}
+ element_position_x: {element_position_x}
+ element_position_y: {element_position_y}
+ element_width: {element_width}
+ element_height: {element_height}
+ is_outside: {is_outside}</pre>
+ </div>
+ }
+}
+
+fn main() {
+ _ = console_log::init_with_level(log::Level::Debug);
+ console_error_panic_hook::set_once();
+
+ mount_to(demo_or_body(), || {
+ view! { <Demo/> }
+ })
+}
diff --git a/examples/use_mouse_in_element/style/output.css b/examples/use_mouse_in_element/style/output.css
new file mode 100644
index 0000000..da9fc94
--- /dev/null
+++ b/examples/use_mouse_in_element/style/output.css
@@ -0,0 +1,352 @@
+[type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ background-color: #fff;
+ border-color: #6b7280;
+ border-width: 1px;
+ border-radius: 0px;
+ padding-top: 0.5rem;
+ padding-right: 0.75rem;
+ padding-bottom: 0.5rem;
+ padding-left: 0.75rem;
+ font-size: 1rem;
+ line-height: 1.5rem;
+ --tw-shadow: 0 0 #0000;
+}
+
+[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
+ outline: 2px solid transparent;
+ outline-offset: 2px;
+ --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
+ --tw-ring-offset-width: 0px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: #2563eb;
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+ border-color: #2563eb;
+}
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+ color: #6b7280;
+ opacity: 1;
+}
+
+input::placeholder,textarea::placeholder {
+ color: #6b7280;
+ opacity: 1;
+}
+
+::-webkit-datetime-edit-fields-wrapper {
+ padding: 0;
+}
+
+::-webkit-date-and-time-value {
+ min-height: 1.5em;
+ text-align: inherit;
+}
+
+::-webkit-datetime-edit {
+ display: inline-flex;
+}
+
+::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
+ padding-top: 0;
+ padding-bottom: 0;
+}
+
+select {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+ background-position: right 0.5rem center;
+ background-repeat: no-repeat;
+ background-size: 1.5em 1.5em;
+ padding-right: 2.5rem;
+ -webkit-print-color-adjust: exact;
+ print-color-adjust: exact;
+}
+
+[multiple],[size]:where(select:not([size="1"])) {
+ background-image: initial;
+ background-position: initial;
+ background-repeat: unset;
+ background-size: initial;
+ padding-right: 0.75rem;
+ -webkit-print-color-adjust: unset;
+ print-color-adjust: unset;
+}
+
+[type='checkbox'],[type='radio'] {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ padding: 0;
+ -webkit-print-color-adjust: exact;
+ print-color-adjust: exact;
+ display: inline-block;
+ vertical-align: middle;
+ background-origin: border-box;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+ flex-shrink: 0;
+ height: 1rem;
+ width: 1rem;
+ color: #2563eb;
+ background-color: #fff;
+ border-color: #6b7280;
+ border-width: 1px;
+ --tw-shadow: 0 0 #0000;
+}
+
+[type='checkbox'] {
+ border-radius: 0px;
+}
+
+[type='radio'] {
+ border-radius: 100%;
+}
+
+[type='checkbox']:focus,[type='radio']:focus {
+ outline: 2px solid transparent;
+ outline-offset: 2px;
+ --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
+ --tw-ring-offset-width: 2px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: #2563eb;
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+
+[type='checkbox']:checked,[type='radio']:checked {
+ border-color: transparent;
+ background-color: currentColor;
+ background-size: 100% 100%;
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+[type='checkbox']:checked {
+ background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+}
+
+@media (forced-colors: active) {
+ [type='checkbox']:checked {
+ -webkit-appearance: auto;
+ -moz-appearance: auto;
+ appearance: auto;
+ }
+}
+
+[type='radio']:checked {
+ background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+}
+
+@media (forced-colors: active) {
+ [type='radio']:checked {
+ -webkit-appearance: auto;
+ -moz-appearance: auto;
+ appearance: auto;
+ }
+}
+
+[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
+ border-color: transparent;
+ background-color: currentColor;
+}
+
+[type='checkbox']:indeterminate {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
+ border-color: transparent;
+ background-color: currentColor;
+ background-size: 100% 100%;
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+@media (forced-colors: active) {
+ [type='checkbox']:indeterminate {
+ -webkit-appearance: auto;
+ -moz-appearance: auto;
+ appearance: auto;
+ }
+}
+
+[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
+ border-color: transparent;
+ background-color: currentColor;
+}
+
+[type='file'] {
+ background: unset;
+ border-color: inherit;
+ border-width: 0;
+ border-radius: 0;
+ padding: 0;
+ font-size: unset;
+ line-height: inherit;
+}
+
+[type='file']:focus {
+ outline: 1px solid ButtonText;
+ outline: 1px auto -webkit-focus-ring-color;
+}
+
+*, ::before, ::after {
+ --tw-border-spacing-x: 0;
+ --tw-border-spacing-y: 0;
+ --tw-translate-x: 0;
+ --tw-translate-y: 0;
+ --tw-rotate: 0;
+ --tw-skew-x: 0;
+ --tw-skew-y: 0;
+ --tw-scale-x: 1;
+ --tw-scale-y: 1;
+ --tw-pan-x: ;
+ --tw-pan-y: ;
+ --tw-pinch-zoom: ;
+ --tw-scroll-snap-strictness: proximity;
+ --tw-gradient-from-position: ;
+ --tw-gradient-via-position: ;
+ --tw-gradient-to-position: ;
+ --tw-ordinal: ;
+ --tw-slashed-zero: ;
+ --tw-numeric-figure: ;
+ --tw-numeric-spacing: ;
+ --tw-numeric-fraction: ;
+ --tw-ring-inset: ;
+ --tw-ring-offset-width: 0px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: rgb(59 130 246 / 0.5);
+ --tw-ring-offset-shadow: 0 0 #0000;
+ --tw-ring-shadow: 0 0 #0000;
+ --tw-shadow: 0 0 #0000;
+ --tw-shadow-colored: 0 0 #0000;
+ --tw-blur: ;
+ --tw-brightness: ;
+ --tw-contrast: ;
+ --tw-grayscale: ;
+ --tw-hue-rotate: ;
+ --tw-invert: ;
+ --tw-saturate: ;
+ --tw-sepia: ;
+ --tw-drop-shadow: ;
+ --tw-backdrop-blur: ;
+ --tw-backdrop-brightness: ;
+ --tw-backdrop-contrast: ;
+ --tw-backdrop-grayscale: ;
+ --tw-backdrop-hue-rotate: ;
+ --tw-backdrop-invert: ;
+ --tw-backdrop-opacity: ;
+ --tw-backdrop-saturate: ;
+ --tw-backdrop-sepia: ;
+}
+
+::backdrop {
+ --tw-border-spacing-x: 0;
+ --tw-border-spacing-y: 0;
+ --tw-translate-x: 0;
+ --tw-translate-y: 0;
+ --tw-rotate: 0;
+ --tw-skew-x: 0;
+ --tw-skew-y: 0;
+ --tw-scale-x: 1;
+ --tw-scale-y: 1;
+ --tw-pan-x: ;
+ --tw-pan-y: ;
+ --tw-pinch-zoom: ;
+ --tw-scroll-snap-strictness: proximity;
+ --tw-gradient-from-position: ;
+ --tw-gradient-via-position: ;
+ --tw-gradient-to-position: ;
+ --tw-ordinal: ;
+ --tw-slashed-zero: ;
+ --tw-numeric-figure: ;
+ --tw-numeric-spacing: ;
+ --tw-numeric-fraction: ;
+ --tw-ring-inset: ;
+ --tw-ring-offset-width: 0px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: rgb(59 130 246 / 0.5);
+ --tw-ring-offset-shadow: 0 0 #0000;
+ --tw-ring-shadow: 0 0 #0000;
+ --tw-shadow: 0 0 #0000;
+ --tw-shadow-colored: 0 0 #0000;
+ --tw-blur: ;
+ --tw-brightness: ;
+ --tw-contrast: ;
+ --tw-grayscale: ;
+ --tw-hue-rotate: ;
+ --tw-invert: ;
+ --tw-saturate: ;
+ --tw-sepia: ;
+ --tw-drop-shadow: ;
+ --tw-backdrop-blur: ;
+ --tw-backdrop-brightness: ;
+ --tw-backdrop-contrast: ;
+ --tw-backdrop-grayscale: ;
+ --tw-backdrop-hue-rotate: ;
+ --tw-backdrop-invert: ;
+ --tw-backdrop-opacity: ;
+ --tw-backdrop-saturate: ;
+ --tw-backdrop-sepia: ;
+}
+
+.static {
+ position: static;
+}
+
+.m-auto {
+ margin: auto;
+}
+
+.flex {
+ display: flex;
+}
+
+.h-40 {
+ height: 10rem;
+}
+
+.w-40 {
+ width: 10rem;
+}
+
+.select-none {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+}
+
+.place-content-center {
+ place-content: center;
+}
+
+.gap-4 {
+ gap: 1rem;
+}
+
+.bg-gray-400\/20 {
+ background-color: rgb(156 163 175 / 0.2);
+}
+
+.text-\[--brand-color\] {
+ color: var(--brand-color);
+}
+
+.text-green-600 {
+ --tw-text-opacity: 1;
+ color: rgb(22 163 74 / var(--tw-text-opacity));
+}
+
+.opacity-75 {
+ opacity: 0.75;
+}
+
+@media (prefers-color-scheme: dark) {
+ .dark\:text-green-500 {
+ --tw-text-opacity: 1;
+ color: rgb(34 197 94 / var(--tw-text-opacity));
+ }
+}
\ No newline at end of file
diff --git a/examples/use_mouse_in_element/tailwind.config.js b/examples/use_mouse_in_element/tailwind.config.js
new file mode 100644
index 0000000..bc09f5e
--- /dev/null
+++ b/examples/use_mouse_in_element/tailwind.config.js
@@ -0,0 +1,15 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: {
+ files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"],
+ },
+ theme: {
+ extend: {},
+ },
+ corePlugins: {
+ preflight: false,
+ },
+ plugins: [
+ require('@tailwindcss/forms'),
+ ],
+}
\ No newline at end of file
diff --git a/src/lib.rs b/src/lib.rs
index d7e8950..2c5fdc1 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -14,6 +14,7 @@ mod is_none;
mod is_ok;
mod is_some;
mod on_click_outside;
+mod use_mouse_in_element;
mod signal_debounced;
mod signal_throttled;
mod use_active_element;
@@ -71,6 +72,7 @@ pub use is_none::*;
pub use is_ok::*;
pub use is_some::*;
pub use on_click_outside::*;
+pub use use_mouse_in_element::*;
pub use signal_debounced::*;
pub use signal_throttled::*;
pub use use_active_element::*;
diff --git a/src/use_mouse.rs b/src/use_mouse.rs
index f81741a..74f943f 100644
--- a/src/use_mouse.rs
+++ b/src/use_mouse.rs
@@ -94,8 +94,7 @@ pub fn use_mouse() -> UseMouseReturn {
/// Variant of [`use_mouse`] that accepts options. Please see [`use_mouse`] for how to use.
pub fn use_mouse_with_options<El, T, Ex>(options: UseMouseOptions<El, T, Ex>) -> UseMouseReturn
where
- El: Clone,
- El: Into<ElementMaybeSignal<T, web_sys::EventTarget>>,
+ El: Into<ElementMaybeSignal<T, web_sys::EventTarget>> + Clone,
T: Into<web_sys::EventTarget> + Clone + 'static,
Ex: UseMouseEventExtractor + Clone + 'static,
{
@@ -196,11 +195,11 @@ where
}}
UseMouseReturn {
- x,
- y,
+ x: x.into(),
+ y: y.into(),
set_x,
set_y,
- source_type,
+ source_type: source_type.into(),
}
}
@@ -306,15 +305,15 @@ impl UseMouseEventExtractor for UseMouseEventExtractorDefault {}
/// Return type of [`use_mouse`].
pub struct UseMouseReturn {
/// X coordinate of the mouse pointer / touch
- pub x: ReadSignal<f64>,
+ pub x: Signal<f64>,
/// Y coordinate of the mouse pointer / touch
- pub y: ReadSignal<f64>,
+ pub y: Signal<f64>,
/// Sets the value of `x`. This does not actually move the mouse cursor.
pub set_x: WriteSignal<f64>,
/// Sets the value of `y`. This does not actually move the mouse cursor.
pub set_y: WriteSignal<f64>,
/// Identifies the source of the reported coordinates
- pub source_type: ReadSignal<UseMouseSourceType>,
+ pub source_type: Signal<UseMouseSourceType>,
}
/// Identifies the source of the reported coordinates
diff --git a/src/use_mouse_in_element.rs b/src/use_mouse_in_element.rs
new file mode 100644
index 0000000..29ad0f9
--- /dev/null
+++ b/src/use_mouse_in_element.rs
@@ -0,0 +1,251 @@
+use crate::core::{ElementMaybeSignal, Position};
+use crate::{
+ use_mouse_with_options, use_window, UseMouseCoordType, UseMouseEventExtractor,
+ UseMouseEventExtractorDefault, UseMouseOptions, UseMouseReturn, UseMouseSourceType, UseWindow,
+};
+use cfg_if::cfg_if;
+use default_struct_builder::DefaultBuilder;
+use leptos::*;
+use std::marker::PhantomData;
+
+/// Reactive mouse position related to an element.
+///
+/// ## Demo
+///
+/// [Link to Demo](https://github.com/Synphonyte/leptos-use/tree/main/examples/use_mouse_in_element)
+///
+/// ## Usage
+///
+/// ```
+/// # use leptos::*;
+/// # use leptos::html::Div;
+/// # use leptos_use::{use_mouse_in_element, UseMouseInElementReturn};
+/// #
+/// # #[component]
+/// # fn Demo() -> impl IntoView {
+/// let target = create_node_ref::<Div>();
+/// let UseMouseInElementReturn { x, y, is_outside, .. } = use_mouse_in_element(target);
+///
+/// view! {
+/// <div node_ref=target>
+/// <h1>Hello world</h1>
+/// </div>
+/// }
+/// # }
+/// ```
+///
+/// ## Server-Side Rendering
+///
+/// On the server this returns simple Signals with the `initial_value` for `x` and `y`,
+/// no-op for `stop`, `is_outside = true` and `0.0` for the rest of the signals.
+pub fn use_mouse_in_element<El, T>(target: El) -> UseMouseInElementReturn<impl Fn() + Clone>
+where
+ El: Into<ElementMaybeSignal<T, web_sys::Element>> + Clone,
+ T: Into<web_sys::Element> + Clone + 'static,
+{
+ use_mouse_in_element_with_options(target, Default::default())
+}
+
+/// Version of [`use_mouse_in_element`] that takes a `UseMouseInElementOptions`. See [`use_mouse_in_element`] for how to use.
+pub fn use_mouse_in_element_with_options<El, T, OptEl, OptT, OptEx>(
+ target: El,
+ options: UseMouseInElementOptions<OptEl, OptT, OptEx>,
+) -> UseMouseInElementReturn<impl Fn() + Clone>
+where
+ El: Into<ElementMaybeSignal<T, web_sys::Element>> + Clone,
+ T: Into<web_sys::Element> + Clone + 'static,
+ OptEl: Into<ElementMaybeSignal<OptT, web_sys::EventTarget>> + Clone,
+ OptT: Into<web_sys::EventTarget> + Clone + 'static,
+ OptEx: UseMouseEventExtractor + Clone + 'static,
+{
+ let UseMouseInElementOptions {
+ coord_type,
+ target: use_mouse_target,
+ touch,
+ reset_on_touch_ends,
+ initial_value,
+ handle_outside,
+ ..
+ } = options;
+
+ let UseMouseReturn {
+ x, y, source_type, ..
+ } = use_mouse_with_options(
+ UseMouseOptions::default()
+ .coord_type(coord_type)
+ .target(use_mouse_target)
+ .touch(touch)
+ .reset_on_touch_ends(reset_on_touch_ends)
+ .initial_value(initial_value),
+ );
+
+ let (element_x, set_element_x) = create_signal(0.0);
+ let (element_y, set_element_y) = create_signal(0.0);
+ let (element_position_x, set_element_position_x) = create_signal(0.0);
+ let (element_position_y, set_element_position_y) = create_signal(0.0);
+ let (element_width, set_element_width) = create_signal(0.0);
+ let (element_height, set_element_height) = create_signal(0.0);
+ let (is_outside, set_outside) = create_signal(true);
+
+ cfg_if! { if #[cfg(feature = "ssr")] {
+ let stop = || ();
+
+ let _ = handle_outside;
+
+ let _ = set_element_x;
+ let _ = set_element_y;
+ let _ = set_element_position_x;
+ let _ = set_element_position_y;
+ let _ = set_element_width;
+ let _ = set_element_height;
+ let _ = set_outside;
+ let _ = target;
+ } else {
+ use crate::use_event_listener;
+ use leptos::ev::mouseleave;
+
+ let target = target.into();
+ let window = window();
+
+ let stop = watch(
+ move || (target.get(), x.get(), y.get()),
+ move |(el, x, y), _, _| {
+ if let Some(el) = el {
+ let el: web_sys::Element = el.clone().into();
+ let rect = el.get_bounding_client_rect();
+ let left = rect.left();
+ let top = rect.top();
+ let width = rect.width();
+ let height = rect.height();
+
+ set_element_position_x.set(left + window.page_x_offset().unwrap_or_default());
+ set_element_position_y.set(top + window.page_y_offset().unwrap_or_default());
+
+ set_element_height.set(height);
+ set_element_width.set(width);
+
+ let el_x = *x - element_position_x.get_untracked();
+ let el_y = *y - element_position_y.get_untracked();
+
+ set_outside.set(
+ width == 0.0
+ || height == 0.0
+ || el_x <= 0.0
+ || el_y <= 0.0
+ || el_x > width
+ || el_y > height,
+ );
+
+ if handle_outside || !is_outside.get_untracked() {
+ set_element_x.set(el_x);
+ set_element_y.set(el_y);
+ }
+ }
+ },
+ false,
+ );
+
+ let _ = use_event_listener(document(), mouseleave, move |_| set_outside.set(true));
+ }}
+
+ UseMouseInElementReturn {
+ x,
+ y,
+ source_type,
+ element_x: element_x.into(),
+ element_y: element_y.into(),
+ element_position_x: element_position_x.into(),
+ element_position_y: element_position_y.into(),
+ element_width: element_width.into(),
+ element_height: element_height.into(),
+ is_outside: is_outside.into(),
+ stop,
+ }
+}
+
+/// Options for [`use_mouse_in_element_with_options`].
+#[derive(DefaultBuilder)]
+pub struct UseMouseInElementOptions<El, T, Ex>
+where
+ El: Clone + Into<ElementMaybeSignal<T, web_sys::EventTarget>>,
+ T: Into<web_sys::EventTarget> + Clone + 'static,
+ Ex: UseMouseEventExtractor + Clone,
+{
+ /// How to extract the x, y coordinates from mouse events or touches
+ coord_type: UseMouseCoordType<Ex>,
+
+ /// Listen events on `target` element. Defaults to `window`
+ target: El,
+
+ /// Listen to `touchmove` events. Defaults to `true`.
+ touch: bool,
+
+ /// Reset to initial value when `touchend` event fired. Defaults to `false`
+ reset_on_touch_ends: bool,
+
+ /// Initial values. Defaults to `{x: 0.0, y: 0.0}`.
+ initial_value: Position,
+
+ /// If `true` updates the `element_x` and `element_y` signals even if the
+ /// mouse is outside of the element. If `false` it doesn't update them when outside.
+ /// Defaults to `true`.
+ handle_outside: bool,
+
+ #[builder(skip)]
+ _marker: PhantomData<T>,
+}
+
+impl Default
+ for UseMouseInElementOptions<UseWindow, web_sys::Window, UseMouseEventExtractorDefault>
+{
+ fn default() -> Self {
+ Self {
+ coord_type: UseMouseCoordType::<UseMouseEventExtractorDefault>::default(),
+ target: use_window(),
+ touch: true,
+ reset_on_touch_ends: false,
+ initial_value: Position { x: 0.0, y: 0.0 },
+ handle_outside: true,
+ _marker: PhantomData,
+ }
+ }
+}
+
+/// Return type of [`use_mouse_in_element`].
+pub struct UseMouseInElementReturn<F>
+where
+ F: Fn() + Clone,
+{
+ /// X coordinate of the mouse pointer / touch
+ pub x: Signal<f64>,
+
+ /// Y coordinate of the mouse pointer / touch
+ pub y: Signal<f64>,
+
+ /// Identifies the source of the reported coordinates
+ pub source_type: Signal<UseMouseSourceType>,
+
+ /// X coordinate of the pointer relative to the left edge of the element
+ pub element_x: Signal<f64>,
+
+ /// Y coordinate of the pointer relative to the top edge of the element
+ pub element_y: Signal<f64>,
+
+ /// X coordinate of the element relative to the left edge of the document
+ pub element_position_x: Signal<f64>,
+
+ /// Y coordinate of the element relative to the top edge of the document
+ pub element_position_y: Signal<f64>,
+
+ /// Width of the element
+ pub element_width: Signal<f64>,
+
+ /// Height of the element
+ pub element_height: Signal<f64>,
+
+ /// `true` if the mouse is outside of the element
+ pub is_outside: Signal<bool>,
+
+ /// Stop watching
+ pub stop: F,
+}
From 84396b767591fea2fdfa9da53e6d2a37d07899da Mon Sep 17 00:00:00 2001
From: Maccesch <maccesch@synphonyte.com>
Date: Wed, 10 Jan 2024 23:37:32 +0000
Subject: [PATCH 07/34] implemented various conversions for
Element(s)MaybeSignal
closes #48
---
CHANGELOG.md | 2 +
docs/book/src/SUMMARY.md | 1 +
docs/book/src/element_parameters.md | 95 ++++++++
examples/ssr/src/main.rs | 2 +-
src/core/element_maybe_signal.rs | 65 +++--
src/core/elements_maybe_signal.rs | 354 ++++++++++++++++++++++++----
src/on_click_outside.rs | 45 +++-
7 files changed, 503 insertions(+), 61 deletions(-)
create mode 100644 docs/book/src/element_parameters.md
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5881465..8249bce 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Changes 🔥
- The `UseMouseReturn` signals `x`, `y`, and `source_type` are now of type `Signal<f64>` instead of `ReadSignal<f64>`.
+- You can now convert `leptos::html::HtmlElement<T>` into `Element(s)MaybeSignal`. This should make functions a lot easier to use in directives.
+- There's now a chapter in the book especially for `Element(s)MaybeSignal`.
## [0.9.0] - 2023-12-06
diff --git a/docs/book/src/SUMMARY.md b/docs/book/src/SUMMARY.md
index b7bda4a..87701a3 100644
--- a/docs/book/src/SUMMARY.md
+++ b/docs/book/src/SUMMARY.md
@@ -2,6 +2,7 @@
[Introduction](introduction.md)
[Get Started](get_started.md)
+[Element Parameters](element_parameters.md)
[Server-Side Rendering](server_side_rendering.md)
[Changelog](changelog.md)
[Functions](functions.md)
diff --git a/docs/book/src/element_parameters.md b/docs/book/src/element_parameters.md
new file mode 100644
index 0000000..086e48c
--- /dev/null
+++ b/docs/book/src/element_parameters.md
@@ -0,0 +1,95 @@
+# Element Parameters
+
+Many functions in this library operate on HTML/SVG elements. For example, the
+function [`use_element_size`](elements/use_element_size.md) returns the width and height of an element:
+
+```rust
+# use leptos::{*, html::Div};
+# use leptos_use::{use_element_size, UseElementSizeReturn};
+#
+# #[component]
+# pub fn Component() -> impl IntoView {
+let el = create_node_ref::<Div>();
+
+let UseElementSizeReturn { width, height } = use_element_size(el);
+
+view! {
+ <div node_ref=el></div>
+}
+# }
+```
+
+In the example above we used a Leptos `NodeRef` to pass into the function. But that is not
+the only way you can do that. All of these work as well:
+
+```rust
+use_element_size(window().body()); // Option<web_sys::Element>
+use_element_size(window().body().unwrap()); // web_sys::Element
+use_element_size("div > p.some-class"); // &str or String intepreted as CSS selector
+
+pub fn some_directive(el: HtmlElement<AnyElement>) {
+ use_element_size(el); // leptos::html::HtmlElement<T>
+}
+```
+
+Signal of Strings: `Signal<String>`, `ReadSignal<String>`, `RwSignal<String>`, `Memo<String>`; also works with `&str`:
+
+```rust
+let (str_signal, set_str_signal) = create_signal("div > p.some-class".to_string());
+use_element_size(str_signal);
+```
+
+Signals of Elements: `Signal<web_sys::Element>`, `ReadSignal<web_sys::Element>`, `RwSignal<web_sys::Element>`, `Memo<web_sys::Element>`; also works with `Option<web_sys::Element>`:
+
+```rust
+let (el_signal, set_el_signal) = create_signal(document().query_selector("div > p.some-class").unwrap());
+use_element_size(el_signal);
+```
+
+## How it works
+
+Looking at the source code of `use_element_size` you'll find sth like
+
+```rust
+pub fn use_element_size(el: Into<ElementMaybeSignal<...>>) -> UseElementSizeReturn {}
+```
+
+All the above code works because there are `From` implementations for all of these
+types for `ElementMaybeSignal`.
+
+## `ElementsMaybeSignal`
+
+Some functions work on one or more elements. Take [`use_resize_observer`](elements/use_resize_observer.md) for example.
+This works very much the same way as described above but instead of `Into<ElementMaybeSignal>`
+it takes an `Into<ElementsMaybeSignal>` (note the plural). This means you can use it exactly in
+the same ways as you saw with the singular `ElementMaybeSignal`. Only this time, when you use
+`String` or `&str` it will be interpreted as CSS selector with `query_selector_all`.
+
+But you can also use it with containers.
+
+```rust
+// Array of Option<web_sys::Element>
+use_resize_observer([window().body(), document().query_selector("div > p.some-class").unsrap()]);
+
+// Vec of &str. All of them will be interpreted as CSS selectors with query_selector_all() and the
+// results will be merged into one Vec.
+use_resize_observer(vec!["div > p.some-class", "p.some-class"]);
+
+// Slice of NodeRef
+let node_ref1 = create_node_ref::<Div>();
+let node_ref2 = create_node_ref::<Div>();
+use_resize_observer(vec![node_ref1, node_ref2].as_slice());
+```
+
+## Usage in Options
+
+Some functions have options that take `Element(s)MaybeSignal`.
+They can be used in the same way.
+
+```rust
+use_mouse_with_options(
+ UseMouseOptions::default().target("div > p.some-class")
+);
+```
+
+See also ["Excluding Elements" in `on_click_outside`](elements/on_click_outside.md#excluding-elements).
\ No newline at end of file
diff --git a/examples/ssr/src/main.rs b/examples/ssr/src/main.rs
index c08d00e..da34a9f 100644
--- a/examples/ssr/src/main.rs
+++ b/examples/ssr/src/main.rs
@@ -8,7 +8,7 @@ async fn main() {
use leptos_use_ssr::app::*;
use leptos_use_ssr::fileserv::file_and_error_handler;
- simple_logger::init_with_level(log::Level::Debug).expect("couldn't initialize logging");
+ simple_logger::init_with_level(log::Level::Info).expect("couldn't initialize logging");
// Setting get_configuration(None) means we'll be using cargo-leptos's env values
// For deployment these variables are:
diff --git a/src/core/element_maybe_signal.rs b/src/core/element_maybe_signal.rs
index a100b7e..47c08e6 100644
--- a/src/core/element_maybe_signal.rs
+++ b/src/core/element_maybe_signal.rs
@@ -1,6 +1,6 @@
use crate::{UseDocument, UseWindow};
use cfg_if::cfg_if;
-use leptos::html::ElementDescriptor;
+use leptos::html::{ElementDescriptor, HtmlElement};
use leptos::*;
use std::marker::PhantomData;
use std::ops::Deref;
@@ -196,23 +196,37 @@ where
}
}
-impl<E> From<Signal<String>> for ElementMaybeSignal<web_sys::Element, E>
-where
- E: From<web_sys::Element> + 'static,
-{
- fn from(signal: Signal<String>) -> Self {
- cfg_if! { if #[cfg(feature = "ssr")] {
- let _ = signal;
- Self::Dynamic(Signal::derive(|| None))
- } else {
- Self::Dynamic(
- create_memo(move |_| document().query_selector(&signal.get()).unwrap_or_default())
- .into(),
- )
- }}
- }
+macro_rules! impl_from_signal_string {
+ ($ty:ty) => {
+ impl<E> From<$ty> for ElementMaybeSignal<web_sys::Element, E>
+ where
+ E: From<web_sys::Element> + 'static,
+ {
+ fn from(signal: $ty) -> Self {
+ cfg_if! { if #[cfg(feature = "ssr")] {
+ let _ = signal;
+ Self::Dynamic(Signal::derive(|| None))
+ } else {
+ Self::Dynamic(
+ create_memo(move |_| document().query_selector(&signal.get()).unwrap_or_default())
+ .into(),
+ )
+ }}
+ }
+ }
+ };
}
+impl_from_signal_string!(Signal<String>);
+impl_from_signal_string!(ReadSignal<String>);
+impl_from_signal_string!(RwSignal<String>);
+impl_from_signal_string!(Memo<String>);
+
+impl_from_signal_string!(Signal<&str>);
+impl_from_signal_string!(ReadSignal<&str>);
+impl_from_signal_string!(RwSignal<&str>);
+impl_from_signal_string!(Memo<&str>);
+
// From signal ///////////////////////////////////////////////////////////////
macro_rules! impl_from_signal_option {
@@ -274,3 +288,22 @@ macro_rules! impl_from_node_ref {
impl_from_node_ref!(web_sys::EventTarget);
impl_from_node_ref!(web_sys::Element);
+
+// From leptos::html::HTMLElement ///////////////////////////////////////////////
+
+macro_rules! impl_from_html_element {
+ ($ty:ty) => {
+ impl<HtmlEl> From<HtmlElement<HtmlEl>> for ElementMaybeSignal<$ty, $ty>
+ where
+ HtmlEl: ElementDescriptor + std::ops::Deref<Target = $ty>,
+ {
+ fn from(value: HtmlElement<HtmlEl>) -> Self {
+ let el: &$ty = value.deref();
+ Self::Static(Some(el.clone()))
+ }
+ }
+ };
+}
+
+impl_from_html_element!(web_sys::EventTarget);
+impl_from_html_element!(web_sys::Element);
diff --git a/src/core/elements_maybe_signal.rs b/src/core/elements_maybe_signal.rs
index 2770d48..63cbad6 100644
--- a/src/core/elements_maybe_signal.rs
+++ b/src/core/elements_maybe_signal.rs
@@ -180,6 +180,9 @@ where
{
fn from(target: &'a str) -> Self {
cfg_if! { if #[cfg(feature = "ssr")] {
+ let _ = target;
+ Self::Static(vec![])
+ } else {
if let Ok(node_list) = document().query_selector_all(target) {
let mut list = Vec::with_capacity(node_list.length() as usize);
for i in 0..node_list.length() {
@@ -191,9 +194,6 @@ where
} else {
Self::Static(vec![])
}
- } else {
- let _ = target;
- Self::Static(vec![])
}}
}
}
@@ -207,34 +207,48 @@ where
}
}
-impl<E> From<Signal<String>> for ElementsMaybeSignal<web_sys::Node, E>
-where
- E: From<web_sys::Node> + 'static,
-{
- fn from(signal: Signal<String>) -> Self {
- cfg_if! { if #[cfg(feature = "ssr")] {
- Self::Dynamic(
- create_memo(move |_| {
- if let Ok(node_list) = document().query_selector_all(&signal.get()) {
- let mut list = Vec::with_capacity(node_list.length() as usize);
- for i in 0..node_list.length() {
- let node = node_list.get(i).expect("checked the range");
- list.push(Some(node));
- }
- list
- } else {
- vec![]
- }
- })
- .into(),
- )
- } else {
- let _ = signal;
- Self::Dynamic(Signal::derive(Vec::new))
- }}
- }
+macro_rules! impl_from_signal_string {
+ ($ty:ty) => {
+ impl<E> From<$ty> for ElementsMaybeSignal<web_sys::Node, E>
+ where
+ E: From<web_sys::Node> + 'static,
+ {
+ fn from(signal: $ty) -> Self {
+ cfg_if! { if #[cfg(feature = "ssr")] {
+ Self::Dynamic(
+ create_memo(move |_| {
+ if let Ok(node_list) = document().query_selector_all(&signal.get()) {
+ let mut list = Vec::with_capacity(node_list.length() as usize);
+ for i in 0..node_list.length() {
+ let node = node_list.get(i).expect("checked the range");
+ list.push(Some(node));
+ }
+ list
+ } else {
+ vec![]
+ }
+ })
+ .into(),
+ )
+ } else {
+ let _ = signal;
+ Self::Dynamic(Signal::derive(Vec::new))
+ }}
+ }
+ }
+ };
}
+impl_from_signal_string!(Signal<String>);
+impl_from_signal_string!(ReadSignal<String>);
+impl_from_signal_string!(RwSignal<String>);
+impl_from_signal_string!(Memo<String>);
+
+impl_from_signal_string!(Signal<&str>);
+impl_from_signal_string!(ReadSignal<&str>);
+impl_from_signal_string!(RwSignal<&str>);
+impl_from_signal_string!(Memo<&str>);
+
// From single signal ///////////////////////////////////////////////////////////////
macro_rules! impl_from_signal_option {
@@ -297,7 +311,26 @@ macro_rules! impl_from_node_ref {
impl_from_node_ref!(web_sys::EventTarget);
impl_from_node_ref!(web_sys::Element);
-// From multiple static elements //////////////////////////////////////////////////////////////
+// From single leptos::html::HTMLElement ///////////////////////////////////////////
+
+macro_rules! impl_from_html_element {
+ ($ty:ty) => {
+ impl<HtmlEl> From<HtmlElement<HtmlEl>> for ElementsMaybeSignal<$ty, $ty>
+ where
+ HtmlEl: ElementDescriptor + std::ops::Deref<Target = $ty>,
+ {
+ fn from(value: HtmlElement<HtmlEl>) -> Self {
+ let el: &$ty = value.deref();
+ Self::Static(vec![Some(el.clone())])
+ }
+ }
+ };
+}
+
+impl_from_html_element!(web_sys::EventTarget);
+impl_from_html_element!(web_sys::Element);
+
+// From multiple static elements //////////////////////////////////////////////////////
impl<T, E> From<&[T]> for ElementsMaybeSignal<T, E>
where
@@ -317,6 +350,105 @@ where
}
}
+impl<T, E> From<Vec<T>> for ElementsMaybeSignal<T, E>
+where
+ T: Into<E> + Clone + 'static,
+{
+ fn from(target: Vec<T>) -> Self {
+ Self::Static(target.iter().map(|t| Some(t.clone())).collect())
+ }
+}
+
+impl<T, E> From<Vec<Option<T>>> for ElementsMaybeSignal<T, E>
+where
+ T: Into<E> + Clone + 'static,
+{
+ fn from(target: Vec<Option<T>>) -> Self {
+ Self::Static(target.to_vec())
+ }
+}
+
+impl<T, E, const C: usize> From<[T; C]> for ElementsMaybeSignal<T, E>
+where
+ T: Into<E> + Clone + 'static,
+{
+ fn from(target: [T; C]) -> Self {
+ Self::Static(target.iter().map(|t| Some(t.clone())).collect())
+ }
+}
+
+impl<T, E, const C: usize> From<[Option<T>; C]> for ElementsMaybeSignal<T, E>
+where
+ T: Into<E> + Clone + 'static,
+{
+ fn from(target: [Option<T>; C]) -> Self {
+ Self::Static(target.to_vec())
+ }
+}
+
+// From multiple strings //////////////////////////////////////////////////////
+
+macro_rules! impl_from_strings_inner {
+ ($el_ty:ty, $str_ty:ty, $target:ident) => {
+ Self::Static(
+ $target
+ .iter()
+ .filter_map(|sel: &$str_ty| -> Option<Vec<Option<$el_ty>>> {
+ cfg_if! { if #[cfg(feature = "ssr")] {
+ let _ = sel;
+ None
+ } else {
+ if let Ok(node_list) = document().query_selector_all(sel) {
+ let mut list = Vec::with_capacity(node_list.length() as usize);
+ for i in 0..node_list.length() {
+ let node: $el_ty = node_list.get(i).expect("checked the range").unchecked_into();
+ list.push(Some(node));
+ }
+
+ Some(list)
+ } else {
+ None
+ }
+ }}
+ })
+ .flatten()
+ .collect(),
+ )
+ };
+}
+
+macro_rules! impl_from_strings_with_container {
+ ($el_ty:ty, $str_ty:ty, $container_ty:ty) => {
+ impl From<$container_ty> for ElementsMaybeSignal<$el_ty, $el_ty> {
+ fn from(target: $container_ty) -> Self {
+ impl_from_strings_inner!($el_ty, $str_ty, target)
+ }
+ }
+ };
+}
+
+macro_rules! impl_from_strings {
+ ($el_ty:ty, $str_ty:ty) => {
+ impl_from_strings_with_container!($el_ty, $str_ty, Vec<$str_ty>);
+ impl_from_strings_with_container!($el_ty, $str_ty, &[$str_ty]);
+ impl<const C: usize> From<[$str_ty; C]> for ElementsMaybeSignal<$el_ty, $el_ty> {
+ fn from(target: [$str_ty; C]) -> Self {
+ impl_from_strings_inner!($el_ty, $str_ty, target)
+ }
+ }
+ impl<const C: usize> From<&[$str_ty; C]> for ElementsMaybeSignal<$el_ty, $el_ty> {
+ fn from(target: &[$str_ty; C]) -> Self {
+ impl_from_strings_inner!($el_ty, $str_ty, target)
+ }
+ }
+ };
+}
+
+impl_from_strings!(web_sys::Element, &str);
+impl_from_strings!(web_sys::Element, String);
+impl_from_strings!(web_sys::EventTarget, &str);
+impl_from_strings!(web_sys::EventTarget, String);
+
// From signal of vec ////////////////////////////////////////////////////////////////
impl<T, E> From<Signal<Vec<T>>> for ElementsMaybeSignal<T, E>
@@ -367,8 +499,77 @@ where
}
}
+impl<T, E> From<Vec<Signal<T>>> for ElementsMaybeSignal<T, E>
+where
+ T: Into<E> + Clone + 'static,
+{
+ fn from(list: Vec<Signal<T>>) -> Self {
+ let list = list.clone();
+
+ Self::Dynamic(Signal::derive(move || {
+ list.iter().map(|t| Some(t.get())).collect()
+ }))
+ }
+}
+
+impl<T, E> From<Vec<Signal<Option<T>>>> for ElementsMaybeSignal<T, E>
+where
+ T: Into<E> + Clone + 'static,
+{
+ fn from(list: Vec<Signal<Option<T>>>) -> Self {
+ let list = list.clone();
+
+ Self::Dynamic(Signal::derive(move || {
+ list.iter().map(|t| t.get()).collect()
+ }))
+ }
+}
+
+impl<T, E, const C: usize> From<[Signal<T>; C]> for ElementsMaybeSignal<T, E>
+where
+ T: Into<E> + Clone + 'static,
+{
+ fn from(list: [Signal<T>; C]) -> Self {
+ let list = list.to_vec();
+
+ Self::Dynamic(Signal::derive(move || {
+ list.iter().map(|t| Some(t.get())).collect()
+ }))
+ }
+}
+
+impl<T, E, const C: usize> From<[Signal<Option<T>>; C]> for ElementsMaybeSignal<T, E>
+where
+ T: Into<E> + Clone + 'static,
+{
+ fn from(list: [Signal<Option<T>>; C]) -> Self {
+ let list = list.to_vec();
+
+ Self::Dynamic(Signal::derive(move || {
+ list.iter().map(|t| t.get()).collect()
+ }))
+ }
+}
+
// From multiple NodeRefs //////////////////////////////////////////////////////////////
+macro_rules! impl_from_multi_node_ref_inner {
+ ($ty:ty, $node_refs:ident) => {
+ Self::Dynamic(Signal::derive(move || {
+ $node_refs
+ .iter()
+ .map(|node_ref| {
+ node_ref.get().map(move |el| {
+ let el = el.into_any();
+ let el: $ty = el.deref().clone().into();
+ el
+ })
+ })
+ .collect()
+ }))
+ };
+}
+
macro_rules! impl_from_multi_node_ref {
($ty:ty) => {
impl<R> From<&[NodeRef<R>]> for ElementsMaybeSignal<$ty, $ty>
@@ -377,19 +578,27 @@ macro_rules! impl_from_multi_node_ref {
{
fn from(node_refs: &[NodeRef<R>]) -> Self {
let node_refs = node_refs.to_vec();
+ impl_from_multi_node_ref_inner!($ty, node_refs)
+ }
+ }
- Self::Dynamic(Signal::derive(move || {
- node_refs
- .iter()
- .map(|node_ref| {
- node_ref.get().map(move |el| {
- let el = el.into_any();
- let el: $ty = el.deref().clone().into();
- el
- })
- })
- .collect()
- }))
+ impl<R, const C: usize> From<[NodeRef<R>; C]> for ElementsMaybeSignal<$ty, $ty>
+ where
+ R: ElementDescriptor + Clone + 'static,
+ {
+ fn from(node_refs: [NodeRef<R>; C]) -> Self {
+ let node_refs = node_refs.to_vec();
+ impl_from_multi_node_ref_inner!($ty, node_refs)
+ }
+ }
+
+ impl<R> From<Vec<NodeRef<R>>> for ElementsMaybeSignal<$ty, $ty>
+ where
+ R: ElementDescriptor + Clone + 'static,
+ {
+ fn from(node_refs: Vec<NodeRef<R>>) -> Self {
+ let node_refs = node_refs.clone();
+ impl_from_multi_node_ref_inner!($ty, node_refs)
}
}
};
@@ -398,6 +607,67 @@ macro_rules! impl_from_multi_node_ref {
impl_from_multi_node_ref!(web_sys::EventTarget);
impl_from_multi_node_ref!(web_sys::Element);
+// From multiple leptos::html::HTMLElement /////////////////////////////////////////
+
+macro_rules! impl_from_multi_html_element {
+ ($ty:ty) => {
+ impl<HtmlEl> From<&[HtmlElement<HtmlEl>]> for ElementsMaybeSignal<$ty, $ty>
+ where
+ HtmlEl: ElementDescriptor + std::ops::Deref<Target = $ty>,
+ {
+ fn from(value: &[HtmlElement<HtmlEl>]) -> Self {
+ Self::Static(
+ value
+ .iter()
+ .map(|el| {
+ let el: &$ty = el.deref();
+ Some(el.clone())
+ })
+ .collect(),
+ )
+ }
+ }
+
+ impl<HtmlEl, const C: usize> From<[HtmlElement<HtmlEl>; C]>
+ for ElementsMaybeSignal<$ty, $ty>
+ where
+ HtmlEl: ElementDescriptor + std::ops::Deref<Target = $ty>,
+ {
+ fn from(value: [HtmlElement<HtmlEl>; C]) -> Self {
+ Self::Static(
+ value
+ .iter()
+ .map(|el| {
+ let el: &$ty = el.deref();
+ Some(el.clone())
+ })
+ .collect(),
+ )
+ }
+ }
+
+ impl<HtmlEl> From<Vec<HtmlElement<HtmlEl>>> for ElementsMaybeSignal<$ty, $ty>
+ where
+ HtmlEl: ElementDescriptor + std::ops::Deref<Target = $ty>,
+ {
+ fn from(value: Vec<HtmlElement<HtmlEl>>) -> Self {
+ Self::Static(
+ value
+ .iter()
+ .map(|el| {
+ let el: &$ty = el.deref();
+ Some(el.clone())
+ })
+ .collect(),
+ )
+ }
+ }
+ };
+}
+
+impl_from_multi_html_element!(web_sys::EventTarget);
+impl_from_multi_html_element!(web_sys::Element);
+
// From ElementMaybeSignal //////////////////////////////////////////////////////////////
impl<T, E> From<ElementMaybeSignal<T, E>> for ElementsMaybeSignal<T, E>
diff --git a/src/on_click_outside.rs b/src/on_click_outside.rs
index 3d1a542..eddb6bf 100644
--- a/src/on_click_outside.rs
+++ b/src/on_click_outside.rs
@@ -27,7 +27,6 @@ cfg_if! { if #[cfg(not(feature = "ssr"))] {
///
/// ```
/// # use leptos::*;
-/// # use leptos::ev::resize;
/// # use leptos::logging::log;
/// # use leptos::html::Div;
/// # use leptos_use::on_click_outside;
@@ -50,6 +49,33 @@ cfg_if! { if #[cfg(not(feature = "ssr"))] {
/// If you are targeting these browsers, we recommend you to include
/// [this code snippet](https://gist.github.com/sibbng/13e83b1dd1b733317ce0130ef07d4efd) on your project.
///
+/// ## Excluding Elements
+///
+/// Use this to ignore clicks on certain elements.
+///
+/// ```
+/// # use leptos::*;
+/// # use leptos::logging::log;
+/// # use leptos::html::Div;
+/// # use leptos_use::{on_click_outside_with_options, OnClickOutsideOptions};
+/// #
+/// # #[component]
+/// # fn Demo() -> impl IntoView {
+/// # let target = create_node_ref::<Div>();
+/// #
+/// on_click_outside_with_options(
+/// target,
+/// move |event| { log!("{:?}", event); },
+/// OnClickOutsideOptions::default().ignore(["input", "#some-id"]),
+/// );
+/// #
+/// # view! {
+/// # <div node_ref=target>"Hello World"</div>
+/// # }
+/// # }
+///
+/// ```
+///
/// ## Server-Side Rendering
///
/// On the server this amounts to a no-op.
@@ -230,12 +256,13 @@ where
/// Options for [`on_click_outside_with_options`].
#[derive(Clone, DefaultBuilder)]
+#[cfg_attr(feature = "ssr", allow(dead_code))]
pub struct OnClickOutsideOptions<T>
where
T: Into<web_sys::EventTarget> + Clone + 'static,
{
/// List of elementss that should not trigger the callback. Defaults to `[]`.
- #[cfg_attr(feature = "ssr", allow(dead_code))]
+ #[builder(skip)]
ignore: ElementsMaybeSignal<T, web_sys::EventTarget>,
/// Use capturing phase for internal event listener. Defaults to `true`.
@@ -257,3 +284,17 @@ where
}
}
}
+
+impl<T> OnClickOutsideOptions<T>
+where
+ T: Into<web_sys::EventTarget> + Clone + 'static,
+{
+ /// List of elementss that should not trigger the callback. Defaults to `[]`.
+ #[cfg_attr(feature = "ssr", allow(dead_code))]
+ pub fn ignore(self, ignore: impl Into<ElementsMaybeSignal<T, web_sys::EventTarget>>) -> Self {
+ Self {
+ ignore: ignore.into(),
+ ..self
+ }
+ }
+}
From 752cf1f83259279eccf41b1ed7c6741da8391fda Mon Sep 17 00:00:00 2001
From: Maccesch <maccesch@synphonyte.com>
Date: Wed, 10 Jan 2024 23:50:52 +0000
Subject: [PATCH 08/34] Throttled or debounced callbacks (in watch_* or *_fn)
no longer are called after the containing scope was cleaned up.
Closes #63
---
CHANGELOG.md | 1 +
src/use_debounce_fn.rs | 2 ++
src/use_throttle_fn.rs | 2 ++
src/utils/filters/debounce.rs | 6 +++++-
src/utils/filters/throttle.rs | 4 +++-
src/watch_debounced.rs | 2 ++
src/watch_throttled.rs | 2 ++
7 files changed, 17 insertions(+), 2 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8249bce..40cc0ab 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- The `UseMouseReturn` signals `x`, `y`, and `source_type` are now of type `Signal<f64>` instead of `ReadSignal<f64>`.
- You can now convert `leptos::html::HtmlElement<T>` into `Element(s)MaybeSignal`. This should make functions a lot easier to use in directives.
- There's now a chapter in the book especially for `Element(s)MaybeSignal`.
+- Throttled or debounced callbacks (in watch_* or *_fn) no longer are called after the containing scope was cleaned up.
## [0.9.0] - 2023-12-06
diff --git a/src/use_debounce_fn.rs b/src/use_debounce_fn.rs
index d512720..fb99da2 100644
--- a/src/use_debounce_fn.rs
+++ b/src/use_debounce_fn.rs
@@ -33,6 +33,8 @@ use std::rc::Rc;
/// # }
/// ```
///
+/// Please note that if the current component is cleaned up before the throttled callback is called, the throttled callback will not be called.
+///
/// You can also pass options to [`use_debounce_fn_with_options`] with a maximum wait time, similar to
/// [lodash debounce](https://lodash.com/docs/#debounce).
///
diff --git a/src/use_throttle_fn.rs b/src/use_throttle_fn.rs
index 6652248..2f9e61c 100644
--- a/src/use_throttle_fn.rs
+++ b/src/use_throttle_fn.rs
@@ -36,6 +36,8 @@ pub use crate::utils::ThrottleOptions;
/// # }
/// ```
///
+/// Please note that if the current component is cleaned up before the throttled callback is called, the throttled callback will not be called.
+///
/// You can provide options when you use [`use_throttle_fn_with_options`].
///
/// ```
diff --git a/src/utils/filters/debounce.rs b/src/utils/filters/debounce.rs
index 6186960..be108ea 100644
--- a/src/utils/filters/debounce.rs
+++ b/src/utils/filters/debounce.rs
@@ -3,7 +3,7 @@
use cfg_if::cfg_if;
use default_struct_builder::DefaultBuilder;
use leptos::leptos_dom::helpers::TimeoutHandle;
-use leptos::{set_timeout_with_handle, MaybeSignal, SignalGetUntracked};
+use leptos::{on_cleanup, set_timeout_with_handle, MaybeSignal, SignalGetUntracked};
use std::cell::{Cell, RefCell};
use std::rc::Rc;
use std::time::Duration;
@@ -34,6 +34,10 @@ where
}
};
+ on_cleanup(move || {
+ clear_timeout(&timer);
+ });
+
let ms = ms.into();
let max_wait_signal = options.max_wait;
diff --git a/src/utils/filters/throttle.rs b/src/utils/filters/throttle.rs
index ceda428..e4eb2c4 100644
--- a/src/utils/filters/throttle.rs
+++ b/src/utils/filters/throttle.rs
@@ -4,7 +4,7 @@ use crate::core::now;
use cfg_if::cfg_if;
use default_struct_builder::DefaultBuilder;
use leptos::leptos_dom::helpers::TimeoutHandle;
-use leptos::{set_timeout_with_handle, MaybeSignal, SignalGetUntracked};
+use leptos::{on_cleanup, set_timeout_with_handle, MaybeSignal, SignalGetUntracked};
use std::cell::{Cell, RefCell};
use std::cmp::max;
use std::rc::Rc;
@@ -47,6 +47,8 @@ where
}
};
+ on_cleanup(clear.clone());
+
let ms = ms.into();
move |mut _invoke: Rc<dyn Fn() -> R>| {
diff --git a/src/watch_debounced.rs b/src/watch_debounced.rs
index 55d6b26..b52d2eb 100644
--- a/src/watch_debounced.rs
+++ b/src/watch_debounced.rs
@@ -32,6 +32,8 @@ use leptos::*;
///
/// This really is only shorthand shorthand for `watch_with_options(deps, callback, WatchOptions::default().debounce(ms))`.
///
+/// Please note that if the current component is cleaned up before the debounced callback is called, the debounced callback will not be called.
+///
/// There's also `watch_debounced_with_options` where you can specify the other watch options (except `filter`).
///
/// ```
diff --git a/src/watch_throttled.rs b/src/watch_throttled.rs
index be45644..00497a3 100644
--- a/src/watch_throttled.rs
+++ b/src/watch_throttled.rs
@@ -31,6 +31,8 @@ use default_struct_builder::DefaultBuilder;
///
/// This really is only shorthand shorthand for `watch_with_options(deps, callback, WatchOptions::default().throttle(ms))`.
///
+/// Please note that if the current component is cleaned up before the throttled callback is called, the throttled callback will not be called.
+///
/// There's also `watch_throttled_with_options` where you can specify the other watch options (except `filter`).
///
/// ```
From 37f4a928c9beef3031495b42d243fbb48579d5a4 Mon Sep 17 00:00:00 2001
From: Maccesch <maccesch@synphonyte.com>
Date: Tue, 16 Jan 2024 10:24:49 +0000
Subject: [PATCH 09/34] Fixed compile errors
---
src/core/elements_maybe_signal.rs | 2 ++
src/utils/filters/debounce.rs | 8 ++++++--
2 files changed, 8 insertions(+), 2 deletions(-)
diff --git a/src/core/elements_maybe_signal.rs b/src/core/elements_maybe_signal.rs
index 63cbad6..6a086af 100644
--- a/src/core/elements_maybe_signal.rs
+++ b/src/core/elements_maybe_signal.rs
@@ -398,6 +398,8 @@ macro_rules! impl_from_strings_inner {
let _ = sel;
None
} else {
+ use wasm_bindgen::JsCast;
+
if let Ok(node_list) = document().query_selector_all(sel) {
let mut list = Vec::with_capacity(node_list.length() as usize);
for i in 0..node_list.length() {
diff --git a/src/utils/filters/debounce.rs b/src/utils/filters/debounce.rs
index be108ea..9e5bc86 100644
--- a/src/utils/filters/debounce.rs
+++ b/src/utils/filters/debounce.rs
@@ -34,8 +34,12 @@ where
}
};
- on_cleanup(move || {
- clear_timeout(&timer);
+ on_cleanup({
+ let timer = Rc::clone(&timer);
+
+ move || {
+ clear_timeout(&timer);
+ }
});
let ms = ms.into();
From 93b827dfc31afb625522b8e6922277063a8275b8 Mon Sep 17 00:00:00 2001
From: Maccesch <maccesch@synphonyte.com>
Date: Tue, 16 Jan 2024 10:36:28 +0000
Subject: [PATCH 10/34] added use_local_storage to ssr example
---
examples/ssr/src/app.rs | 23 +++++++++++++++++++++--
1 file changed, 21 insertions(+), 2 deletions(-)
diff --git a/examples/ssr/src/app.rs b/examples/ssr/src/app.rs
index cdfe5e3..8d3ddf9 100644
--- a/examples/ssr/src/app.rs
+++ b/examples/ssr/src/app.rs
@@ -5,8 +5,9 @@ use leptos_meta::*;
use leptos_router::*;
use leptos_use::storage::{use_local_storage, StringCodec};
use leptos_use::{
- use_color_mode, use_debounce_fn, use_event_listener, use_intl_number_format, use_timestamp,
- use_window, ColorMode, UseColorModeReturn, UseIntlNumberFormatOptions,
+ use_color_mode, use_debounce_fn, use_event_listener, use_interval, use_intl_number_format,
+ use_timestamp, use_window, ColorMode, UseColorModeReturn, UseIntervalReturn,
+ UseIntlNumberFormatOptions,
};
#[component]
@@ -78,5 +79,23 @@ fn HomePage() -> impl IntoView {
<button on:click=move |_| set_mode.set(ColorMode::Dark)>Change to Dark</button>
<button on:click=move |_| set_mode.set(ColorMode::Auto)>Change to Auto</button>
<p>{timestamp}</p>
+ <LocalStorageTest/>
+ }
+}
+
+#[component]
+pub fn LocalStorageTest() -> impl IntoView {
+ let UseIntervalReturn { counter, .. } = use_interval(1000);
+ logging::log!("test log");
+ let (state, set_state, ..) = use_local_storage::<String, StringCodec>("test-state");
+
+ view! {
+ <p>{counter}</p>
+ <input
+ class="block"
+ prop:value=move || state.get()
+ on:input=move |e| set_state.update(|s| *s = event_target_value(&e))
+ type="text"
+ />
}
}
From 1e9e03feb8e16836404490275afbf63e9af7aadf Mon Sep 17 00:00:00 2001
From: Maccesch <maccesch@synphonyte.com>
Date: Tue, 16 Jan 2024 11:24:52 +0000
Subject: [PATCH 11/34] fixed use_geolocation SSR fixes #66
---
CHANGELOG.md | 4 ++
src/use_geolocation.rs | 140 +++++++++++++++++++++++------------------
2 files changed, 83 insertions(+), 61 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 40cc0ab..0317b03 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- `use_device_pixel_ratio` (thanks to @mondeja)
- `use_element_bounding`
+### Fixes 🍕
+
+- Fixed `use_geolocation` SSR compile issue
+
### Changes 🔥
- The `UseMouseReturn` signals `x`, `y`, and `source_type` are now of type `Signal<f64>` instead of `ReadSignal<f64>`.
diff --git a/src/use_geolocation.rs b/src/use_geolocation.rs
index 034828f..2aeda83 100644
--- a/src/use_geolocation.rs
+++ b/src/use_geolocation.rs
@@ -1,9 +1,6 @@
-use crate::use_window;
+use cfg_if::cfg_if;
use default_struct_builder::DefaultBuilder;
use leptos::*;
-use std::cell::Cell;
-use std::rc::Rc;
-use wasm_bindgen::prelude::*;
/// Reactive [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API).
/// It allows the user to provide their location to web applications if they so desire. For privacy reasons,
@@ -32,6 +29,10 @@ use wasm_bindgen::prelude::*;
/// # view! { }
/// # }
/// ```
+///
+/// ## Server-Side Rendering
+///
+/// On the server all signals returns will always contain `None` and the functions do nothing.
pub fn use_geolocation() -> UseGeolocationReturn<impl Fn() + Clone, impl Fn() + Clone> {
use_geolocation_with_options(UseGeolocationOptions::default())
}
@@ -44,74 +45,89 @@ pub fn use_geolocation_with_options(
let (error, set_error) = create_signal(None::<web_sys::PositionError>);
let (coords, set_coords) = create_signal(None::<web_sys::Coordinates>);
- let update_position = move |position: web_sys::Position| {
- set_located_at.set(Some(position.timestamp()));
- set_coords.set(Some(position.coords()));
- set_error.set(None);
- };
+ cfg_if! { if #[cfg(feature = "ssr")] {
+ let resume = || ();
+ let pause = || ();
- let on_error = move |err: web_sys::PositionError| {
- set_error.set(Some(err));
- };
+ let _ = options;
+ let _ = set_located_at;
+ let _ = set_error;
+ let _ = set_coords;
+ } else {
+ use crate::use_window;
+ use std::cell::Cell;
+ use std::rc::Rc;
+ use wasm_bindgen::prelude::*;
- let watch_handle = Rc::new(Cell::new(None::<i32>));
+ let update_position = move |position: web_sys::Position| {
+ set_located_at.set(Some(position.timestamp()));
+ set_coords.set(Some(position.coords()));
+ set_error.set(None);
+ };
- let resume = {
- let watch_handle = Rc::clone(&watch_handle);
- let position_options = options.as_position_options();
+ let on_error = move |err: web_sys::PositionError| {
+ set_error.set(Some(err));
+ };
- move || {
- let navigator = use_window().navigator();
- if let Some(navigator) = navigator {
- if let Ok(geolocation) = navigator.geolocation() {
- let update_position =
- Closure::wrap(Box::new(update_position) as Box<dyn Fn(web_sys::Position)>);
- let on_error =
- Closure::wrap(Box::new(on_error) as Box<dyn Fn(web_sys::PositionError)>);
+ let watch_handle = Rc::new(Cell::new(None::<i32>));
- watch_handle.replace(
- geolocation
- .watch_position_with_error_callback_and_options(
- update_position.as_ref().unchecked_ref(),
- Some(on_error.as_ref().unchecked_ref()),
- &position_options,
- )
- .ok(),
- );
+ let resume = {
+ let watch_handle = Rc::clone(&watch_handle);
+ let position_options = options.as_position_options();
- update_position.forget();
- on_error.forget();
- }
- }
- }
- };
-
- if options.immediate {
- resume();
- }
-
- let pause = {
- let watch_handle = Rc::clone(&watch_handle);
-
- move || {
- let navigator = use_window().navigator();
- if let Some(navigator) = navigator {
- if let Some(handle) = watch_handle.take() {
+ move || {
+ let navigator = use_window().navigator();
+ if let Some(navigator) = navigator {
if let Ok(geolocation) = navigator.geolocation() {
- geolocation.clear_watch(handle);
+ let update_position =
+ Closure::wrap(Box::new(update_position) as Box<dyn Fn(web_sys::Position)>);
+ let on_error =
+ Closure::wrap(Box::new(on_error) as Box<dyn Fn(web_sys::PositionError)>);
+
+ watch_handle.replace(
+ geolocation
+ .watch_position_with_error_callback_and_options(
+ update_position.as_ref().unchecked_ref(),
+ Some(on_error.as_ref().unchecked_ref()),
+ &position_options,
+ )
+ .ok(),
+ );
+
+ update_position.forget();
+ on_error.forget();
}
}
}
- }
- };
+ };
- on_cleanup({
- let pause = pause.clone();
-
- move || {
- pause();
+ if options.immediate {
+ resume();
}
- });
+
+ let pause = {
+ let watch_handle = Rc::clone(&watch_handle);
+
+ move || {
+ let navigator = use_window().navigator();
+ if let Some(navigator) = navigator {
+ if let Some(handle) = watch_handle.take() {
+ if let Ok(geolocation) = navigator.geolocation() {
+ geolocation.clear_watch(handle);
+ }
+ }
+ }
+ }
+ };
+
+ on_cleanup({
+ let pause = pause.clone();
+
+ move || {
+ pause();
+ }
+ });
+ }}
UseGeolocationReturn {
coords: coords.into(),
@@ -123,7 +139,8 @@ pub fn use_geolocation_with_options(
}
/// Options for [`use_geolocation_with_options`].
-#[derive(DefaultBuilder)]
+#[derive(DefaultBuilder, Clone)]
+#[allow(dead_code)]
pub struct UseGeolocationOptions {
/// If `true` the geolocation watch is started when this function is called.
/// If `false` you have to call `resume` manually to start it. Defaults to `true`.
@@ -159,6 +176,7 @@ impl Default for UseGeolocationOptions {
}
}
+#[cfg(not(feature = "ssr"))]
impl UseGeolocationOptions {
fn as_position_options(&self) -> web_sys::PositionOptions {
let UseGeolocationOptions {
From 3a75c7376740cf5d07e207482ff34ad142047d02 Mon Sep 17 00:00:00 2001
From: Maccesch <maccesch@synphonyte.com>
Date: Tue, 16 Jan 2024 11:33:17 +0000
Subject: [PATCH 12/34] added is_dark_preferred to ssr example
---
examples/ssr/src/app.rs | 7 +++++--
1 file changed, 5 insertions(+), 2 deletions(-)
diff --git a/examples/ssr/src/app.rs b/examples/ssr/src/app.rs
index 8d3ddf9..491f896 100644
--- a/examples/ssr/src/app.rs
+++ b/examples/ssr/src/app.rs
@@ -6,8 +6,8 @@ use leptos_router::*;
use leptos_use::storage::{use_local_storage, StringCodec};
use leptos_use::{
use_color_mode, use_debounce_fn, use_event_listener, use_interval, use_intl_number_format,
- use_timestamp, use_window, ColorMode, UseColorModeReturn, UseIntervalReturn,
- UseIntlNumberFormatOptions,
+ use_preferred_dark, use_timestamp, use_window, ColorMode, UseColorModeReturn,
+ UseIntervalReturn, UseIntlNumberFormatOptions,
};
#[component]
@@ -68,6 +68,8 @@ fn HomePage() -> impl IntoView {
let timestamp = use_timestamp();
+ let is_dark_preferred = use_preferred_dark();
+
view! {
<h1>Leptos-Use SSR Example</h1>
<button on:click=on_click>Click Me: {count}</button>
@@ -79,6 +81,7 @@ fn HomePage() -> impl IntoView {
<button on:click=move |_| set_mode.set(ColorMode::Dark)>Change to Dark</button>
<button on:click=move |_| set_mode.set(ColorMode::Auto)>Change to Auto</button>
<p>{timestamp}</p>
+ <p>Dark preferred: {is_dark_preferred}</p>
<LocalStorageTest/>
}
}
From 73cad742f11316c4b335cb1ddafb7adde42dda39 Mon Sep 17 00:00:00 2001
From: Rakshith Ravi <rakshith.ravi@gmx.com>
Date: Sun, 21 Jan 2024 17:33:53 +0530
Subject: [PATCH 13/34] Added use-cookie TODO docs
---
Cargo.toml | 141 ++++++++++++++++++++++++----------------------
src/lib.rs | 2 +
src/use_cookie.rs | 47 ++++++++++++++++
3 files changed, 122 insertions(+), 68 deletions(-)
create mode 100644 src/use_cookie.rs
diff --git a/Cargo.toml b/Cargo.toml
index f770daf..4cf3e17 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -1,24 +1,25 @@
[package]
-name = "leptos-use"
-version = "0.9.0"
-edition = "2021"
authors = ["Marc-Stefan Cassola"]
categories = ["gui", "web-programming"]
description = "Collection of essential Leptos utilities inspired by SolidJS USE / VueUse"
+edition = "2021"
exclude = ["examples/", "tests/"]
+homepage = "https://leptos-use.rs"
keywords = ["leptos", "utilities"]
license = "MIT OR Apache-2.0"
+name = "leptos-use"
readme = "README.md"
repository = "https://github.com/Synphonyte/leptos-use"
-homepage = "https://leptos-use.rs"
+version = "0.9.0"
[dependencies]
base64 = { version = "0.21", optional = true }
cfg-if = "1"
+cookie = { version = "0.18", features = ["percent-encode"] }
default-struct-builder = "0.5"
futures-util = "0.3"
gloo-timers = { version = "0.3.0", features = ["futures"] }
-gloo-utils = { version = "0.2.0"}
+gloo-utils = { version = "0.2.0" }
js-sys = "0.3"
lazy_static = "1"
leptos = "0.5"
@@ -32,78 +33,82 @@ wasm-bindgen = "0.2.88"
wasm-bindgen-futures = "0.4"
[dependencies.web-sys]
-version = "0.3.65"
features = [
- "AddEventListenerOptions",
- "BinaryType",
- "Coordinates",
- "CloseEvent",
- "CssStyleDeclaration",
- "CustomEvent",
- "CustomEventInit",
- "DisplayMediaStreamConstraints",
- "DomRect",
- "DomRectReadOnly",
- "DataTransfer",
- "DragEvent",
- "Element",
- "EventListener",
- "EventListenerOptions",
- "EventTarget",
- "File",
- "FileList",
- "Geolocation",
- "HtmlElement",
- "HtmlLinkElement",
- "HtmlStyleElement",
- "IntersectionObserver",
- "IntersectionObserverInit",
- "IntersectionObserverEntry",
- "MediaDevices",
- "MediaQueryList",
- "MediaStream",
- "MediaStreamTrack",
- "MouseEvent",
- "MutationObserver",
- "MutationObserverInit",
- "MutationRecord",
- "Navigator",
- "NodeList",
- "Notification",
- "NotificationDirection",
- "NotificationOptions",
- "NotificationPermission",
- "PointerEvent",
- "Position",
- "PositionError",
- "PositionOptions",
- "ResizeObserver",
- "ResizeObserverBoxOptions",
- "ResizeObserverEntry",
- "ResizeObserverOptions",
- "ResizeObserverSize",
- "ScrollBehavior",
- "ScrollToOptions",
- "ServiceWorker",
- "ServiceWorkerContainer",
- "ServiceWorkerRegistration",
- "ServiceWorkerState",
- "Storage",
- "StorageEvent",
- "Touch",
- "TouchEvent",
- "TouchList",
- "VisibilityState",
- "WebSocket",
- "Window",
+ "AddEventListenerOptions",
+ "BinaryType",
+ "Coordinates",
+ "CloseEvent",
+ "CssStyleDeclaration",
+ "CustomEvent",
+ "CustomEventInit",
+ "DisplayMediaStreamConstraints",
+ "DomRect",
+ "DomRectReadOnly",
+ "DataTransfer",
+ "DragEvent",
+ "Element",
+ "EventListener",
+ "EventListenerOptions",
+ "EventTarget",
+ "File",
+ "FileList",
+ "Geolocation",
+ "HtmlDocument",
+ "HtmlElement",
+ "HtmlLinkElement",
+ "HtmlStyleElement",
+ "IntersectionObserver",
+ "IntersectionObserverInit",
+ "IntersectionObserverEntry",
+ "MediaDevices",
+ "MediaQueryList",
+ "MediaStream",
+ "MediaStreamTrack",
+ "MouseEvent",
+ "MutationObserver",
+ "MutationObserverInit",
+ "MutationRecord",
+ "Navigator",
+ "NodeList",
+ "Notification",
+ "NotificationDirection",
+ "NotificationOptions",
+ "NotificationPermission",
+ "PointerEvent",
+ "Position",
+ "PositionError",
+ "PositionOptions",
+ "ResizeObserver",
+ "ResizeObserverBoxOptions",
+ "ResizeObserverEntry",
+ "ResizeObserverOptions",
+ "ResizeObserverSize",
+ "ScrollBehavior",
+ "ScrollToOptions",
+ "ServiceWorker",
+ "ServiceWorkerContainer",
+ "ServiceWorkerRegistration",
+ "ServiceWorkerState",
+ "Storage",
+ "StorageEvent",
+ "Touch",
+ "TouchEvent",
+ "TouchList",
+ "VisibilityState",
+ "WebSocket",
+ "Window",
]
+version = "0.3"
[features]
+actix = ["actix-web/cookies"]
+axum = ["axum-extra/cookie", "leptos_axum"]
docs = []
math = ["num"]
prost = ["base64", "dep:prost"]
serde = ["dep:serde", "serde_json"]
ssr = []
+storage = ["serde", "serde_json", "web-sys/StorageEvent"]
[package.metadata.docs.rs]
all-features = true
diff --git a/src/lib.rs b/src/lib.rs
index 2c5fdc1..443038b 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -20,6 +20,7 @@ mod signal_throttled;
mod use_active_element;
mod use_breakpoints;
mod use_color_mode;
+mod use_cookie;
mod use_css_var;
mod use_cycle_list;
mod use_debounce_fn;
@@ -78,6 +79,7 @@ pub use signal_throttled::*;
pub use use_active_element::*;
pub use use_breakpoints::*;
pub use use_color_mode::*;
+pub use use_cookie::*;
pub use use_css_var::*;
pub use use_cycle_list::*;
pub use use_debounce_fn::*;
diff --git a/src/use_cookie.rs b/src/use_cookie.rs
new file mode 100644
index 0000000..d1529e0
--- /dev/null
+++ b/src/use_cookie.rs
@@ -0,0 +1,47 @@
+use cookie::Cookie;
+
+pub struct UseCookie {
+ pub cookie: Option<Cookie<'static>>,
+}
+
+pub fn use_cookie(cookie_name: &str) -> UseCookie {
+ let cookies;
+ #[cfg(feature = "ssr")]
+ {
+ use http::HeaderValue;
+ use leptos::expect_context;
+
+ let headers;
+ #[cfg(feature = "actix")]
+ {
+ headers = expect_context::<actix_web::HttpRequest>().headers().clone();
+ }
+ #[cfg(feature = "axum")]
+ {
+ headers = expect_context::<leptos_axum::RequestParts>().headers;
+ }
+ cookies = headers
+ .get(http::header::COOKIE)
+ .cloned()
+ .unwrap_or_else(|| HeaderValue::from_static(""))
+ .to_str()
+ .unwrap_or_default()
+ .to_owned();
+ }
+ #[cfg(not(feature = "ssr"))]
+ {
+ use wasm_bindgen::JsCast;
+
+ let js_value: wasm_bindgen::JsValue = leptos::window().document().unwrap().into();
+ let document: web_sys::HtmlDocument = js_value.unchecked_into();
+ cookies = document.cookie().unwrap_or_default();
+ }
+
+ let cookie = Cookie::split_parse_encoded(cookies)
+ .into_iter()
+ .filter_map(|cookie| cookie.ok())
+ .find(|cookie| cookie.name() == cookie_name)
+ .map(|cookie| cookie.into_owned());
+
+ UseCookie { cookie }
+}
From 07f592b2229f8af4a4f8878d8c05ab742f9923c4 Mon Sep 17 00:00:00 2001
From: Maccesch <maccesch@synphonyte.com>
Date: Sun, 21 Jan 2024 18:32:12 +0000
Subject: [PATCH 14/34] fixed use_intl_number_format fraction digits option
---
CHANGELOG.md | 1 +
src/use_intl_number_format.rs | 34 ++++++++++++++++++++--------------
2 files changed, 21 insertions(+), 14 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0317b03..3a4612b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Fixes 🍕
- Fixed `use_geolocation` SSR compile issue
+- Fixed `use_intl_number_format` maximum fraction digits option
### Changes 🔥
diff --git a/src/use_intl_number_format.rs b/src/use_intl_number_format.rs
index ef74094..576651e 100644
--- a/src/use_intl_number_format.rs
+++ b/src/use_intl_number_format.rs
@@ -659,10 +659,12 @@ pub struct UseIntlNumberFormatOptions {
maximum_fraction_digits: Option<u8>,
/// The minimum number of significant digits to use. Possible values are from 1 to 21; the default is 1.
- minimum_significant_digits: u8,
+ #[builder(into)]
+ minimum_significant_digits: Option<u8>,
/// The maximum number of significant digits to use. Possible values are from 1 to 21; the default is 21.
- maximum_significant_digits: u8,
+ #[builder(into)]
+ maximum_significant_digits: Option<u8>,
}
impl UseIntlNumberFormatOptions {
@@ -700,8 +702,8 @@ impl Default for UseIntlNumberFormatOptions {
minimum_integer_digits: 1,
minimum_fraction_digits: None,
maximum_fraction_digits: None,
- minimum_significant_digits: 1,
- maximum_significant_digits: 21,
+ minimum_significant_digits: None,
+ maximum_significant_digits: None,
}
}
}
@@ -785,16 +787,20 @@ impl From<UseIntlNumberFormatOptions> for js_sys::Object {
);
}
- let _ = Reflect::set(
- &obj,
- &"minimumSignificantDigits".into(),
- &options.minimum_significant_digits.into(),
- );
- let _ = Reflect::set(
- &obj,
- &"maximumSignificantDigits".into(),
- &options.maximum_significant_digits.into(),
- );
+ if let Some(minimum_significant_digits) = options.minimum_significant_digits {
+ let _ = Reflect::set(
+ &obj,
+ &"minimumSignificantDigits".into(),
+ &minimum_significant_digits.into(),
+ );
+ }
+ if let Some(maximum_significant_digits) = options.maximum_significant_digits {
+ let _ = Reflect::set(
+ &obj,
+ &"maximumSignificantDigits".into(),
+ &maximum_significant_digits.into(),
+ );
+ }
obj
}
From 58395be22b3bffec3b8b124c187898cf9a6921d2 Mon Sep 17 00:00:00 2001
From: Maccesch <maccesch@synphonyte.com>
Date: Sun, 21 Jan 2024 18:33:54 +0000
Subject: [PATCH 15/34] some more ElementMaybeSignal conversions and some minor
code improvements
---
.idea/leptos-use.iml | 5 ++-
examples/rust-toolchain.toml | 2 ++
src/core/element_maybe_signal.rs | 60 ++++++++++++++++++++++++++++++++
src/use_element_size.rs | 11 +++---
src/use_resize_observer.rs | 24 +++++++------
5 files changed, 87 insertions(+), 15 deletions(-)
create mode 100644 examples/rust-toolchain.toml
diff --git a/.idea/leptos-use.iml b/.idea/leptos-use.iml
index 224ebd7..2db780b 100644
--- a/.idea/leptos-use.iml
+++ b/.idea/leptos-use.iml
@@ -61,6 +61,9 @@
<sourceFolder url="file://$MODULE_DIR$/examples/use_service_worker/src" isTestSource="false" />
<sourceFolder url="file://$MODULE_DIR$/examples/use_infinite_scroll/src" isTestSource="false" />
<sourceFolder url="file://$MODULE_DIR$/examples/use_web_notification/src" isTestSource="false" />
+ <sourceFolder url="file://$MODULE_DIR$/examples/use_device_pixel_ratio/src" isTestSource="false" />
+ <sourceFolder url="file://$MODULE_DIR$/examples/use_element_bounding/src" isTestSource="false" />
+ <sourceFolder url="file://$MODULE_DIR$/examples/use_mouse_in_element/src" isTestSource="false" />
<excludeFolder url="file://$MODULE_DIR$/examples/use_event_listener/target" />
<excludeFolder url="file://$MODULE_DIR$/target" />
<excludeFolder url="file://$MODULE_DIR$/docs/book/book" />
@@ -93,4 +96,4 @@
<orderEntry type="sourceFolder" forTests="false" />
<orderEntry type="library" name="Python 3.9 interpreter library" level="application" />
</component>
-</module>
+</module>
\ No newline at end of file
diff --git a/examples/rust-toolchain.toml b/examples/rust-toolchain.toml
new file mode 100644
index 0000000..5d56faf
--- /dev/null
+++ b/examples/rust-toolchain.toml
@@ -0,0 +1,2 @@
+[toolchain]
+channel = "nightly"
diff --git a/src/core/element_maybe_signal.rs b/src/core/element_maybe_signal.rs
index 47c08e6..7a047e5 100644
--- a/src/core/element_maybe_signal.rs
+++ b/src/core/element_maybe_signal.rs
@@ -307,3 +307,63 @@ macro_rules! impl_from_html_element {
impl_from_html_element!(web_sys::EventTarget);
impl_from_html_element!(web_sys::Element);
+
+// From Signal<leptos::html::HTMLElement> /////////////////////////////////////////
+
+macro_rules! impl_from_signal_html_element {
+ ($signal:ty, $ty:ty) => {
+ impl<HtmlEl> From<$signal> for ElementMaybeSignal<$ty, $ty>
+ where
+ HtmlEl: ElementDescriptor + std::ops::Deref<Target = $ty> + Clone,
+ {
+ fn from(value: $signal) -> Self {
+ Self::Dynamic(Signal::derive(move || {
+ let value = value.get();
+ let el: &$ty = value.deref();
+ Some(el.clone())
+ }))
+ }
+ }
+ };
+}
+
+impl_from_signal_html_element!(Signal<HtmlElement<HtmlEl>>, web_sys::EventTarget);
+impl_from_signal_html_element!(ReadSignal<HtmlElement<HtmlEl>>, web_sys::EventTarget);
+impl_from_signal_html_element!(RwSignal<HtmlElement<HtmlEl>>, web_sys::EventTarget);
+impl_from_signal_html_element!(Memo<HtmlElement<HtmlEl>>, web_sys::EventTarget);
+
+impl_from_signal_html_element!(Signal<HtmlElement<HtmlEl>>, web_sys::Element);
+impl_from_signal_html_element!(ReadSignal<HtmlElement<HtmlEl>>, web_sys::Element);
+impl_from_signal_html_element!(RwSignal<HtmlElement<HtmlEl>>, web_sys::Element);
+impl_from_signal_html_element!(Memo<HtmlElement<HtmlEl>>, web_sys::Element);
+
+// From Signal<Option<leptos::html::HTMLElement>> /////////////////////////////////////////
+
+macro_rules! impl_from_signal_html_element {
+ ($signal:ty, $ty:ty) => {
+ impl<HtmlEl> From<$signal> for ElementMaybeSignal<$ty, $ty>
+ where
+ HtmlEl: ElementDescriptor + std::ops::Deref<Target = $ty> + Clone,
+ {
+ fn from(value: $signal) -> Self {
+ Self::Dynamic(Signal::derive(move || {
+ let el: Option<$ty> = value.get().map(|el| el.deref().clone());
+ el
+ }))
+ }
+ }
+ };
+}
+
+impl_from_signal_html_element!(Signal<Option<HtmlElement<HtmlEl>>>, web_sys::EventTarget);
+impl_from_signal_html_element!(
+ ReadSignal<Option<HtmlElement<HtmlEl>>>,
+ web_sys::EventTarget
+);
+impl_from_signal_html_element!(RwSignal<Option<HtmlElement<HtmlEl>>>, web_sys::EventTarget);
+impl_from_signal_html_element!(Memo<Option<HtmlElement<HtmlEl>>>, web_sys::EventTarget);
+
+impl_from_signal_html_element!(Signal<Option<HtmlElement<HtmlEl>>>, web_sys::Element);
+impl_from_signal_html_element!(ReadSignal<Option<HtmlElement<HtmlEl>>>, web_sys::Element);
+impl_from_signal_html_element!(RwSignal<Option<HtmlElement<HtmlEl>>>, web_sys::Element);
+impl_from_signal_html_element!(Memo<Option<HtmlElement<HtmlEl>>>, web_sys::Element);
diff --git a/src/use_element_size.rs b/src/use_element_size.rs
index 5d881e1..aa82d24 100644
--- a/src/use_element_size.rs
+++ b/src/use_element_size.rs
@@ -70,8 +70,8 @@ where
let (width, set_width) = create_signal(initial_size.width);
let (height, set_height) = create_signal(initial_size.height);
- cfg_if! { if #[cfg(not(feature = "ssr"))] {
-
+ #[cfg(not(feature = "ssr"))]
+ {
let box_ = box_.unwrap_or(web_sys::ResizeObserverBoxOptions::ContentBox);
let target = target.into();
@@ -126,7 +126,10 @@ where
);
}
}
- } else if !box_size.is_null() && !box_size.is_undefined() && box_size.length() > 0 {
+ } else if !box_size.is_null()
+ && !box_size.is_undefined()
+ && box_size.length() > 0
+ {
let format_box_size = if box_size.is_array() {
box_size.to_vec()
} else {
@@ -162,7 +165,7 @@ where
},
WatchOptions::default().immediate(false),
);
- }}
+ }
UseElementSizeReturn {
width: width.into(),
diff --git a/src/use_resize_observer.rs b/src/use_resize_observer.rs
index 07e5dd4..ce78e0d 100644
--- a/src/use_resize_observer.rs
+++ b/src/use_resize_observer.rs
@@ -75,12 +75,16 @@ where
T: Into<web_sys::Element> + Clone + 'static,
F: FnMut(Vec<web_sys::ResizeObserverEntry>, web_sys::ResizeObserver) + 'static,
{
- cfg_if! { if #[cfg(feature = "ssr")] {
+ #[cfg(feature = "ssr")]
+ {
UseResizeObserverReturn {
is_supported: Signal::derive(|| true),
- stop: || {}
+ stop: || {},
}
- } else {
+ }
+
+ #[cfg(not(feature = "ssr"))]
+ {
let closure_js = Closure::<dyn FnMut(js_sys::Array, web_sys::ResizeObserver)>::new(
move |entries: js_sys::Array, observer| {
callback(
@@ -121,20 +125,20 @@ where
move |targets, _, _| {
cleanup();
- if is_supported.get() && !targets.is_empty() {
- let obs =
- web_sys::ResizeObserver::new(closure_js.clone().as_ref().unchecked_ref())
- .expect("failed to create ResizeObserver");
+ if is_supported.get_untracked() && !targets.is_empty() {
+ let obs = web_sys::ResizeObserver::new(
+ closure_js.clone().as_ref().unchecked_ref(),
+ )
+ .expect("failed to create ResizeObserver");
for target in targets.iter().flatten() {
let target: web_sys::Element = target.clone().into();
obs.observe_with_options(&target, &options.clone().into());
}
-
observer.replace(Some(obs));
}
},
- false,
+ true,
)
};
@@ -146,7 +150,7 @@ where
on_cleanup(stop.clone());
UseResizeObserverReturn { is_supported, stop }
- }}
+ }
}
/// Options for [`use_resize_observer_with_options`].
From 7811fa7f2d0a63e46808f43d3d96e1ff21f67431 Mon Sep 17 00:00:00 2001
From: Maccesch <maccesch@synphonyte.com>
Date: Sun, 21 Jan 2024 18:35:20 +0000
Subject: [PATCH 16/34] The document returned from `use_document` now supports
the methods `query_selector` and `query_selector_all`
---
CHANGELOG.md | 1 +
src/use_document.rs | 11 +++++++++++
2 files changed, 12 insertions(+)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3a4612b..dd368c1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -22,6 +22,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- You can now convert `leptos::html::HtmlElement<T>` into `Element(s)MaybeSignal`. This should make functions a lot easier to use in directives.
- There's now a chapter in the book especially for `Element(s)MaybeSignal`.
- Throttled or debounced callbacks (in watch_* or *_fn) no longer are called after the containing scope was cleaned up.
+- The document returned from `use_document` now supports the methods `query_selector` and `query_selector_all`.
## [0.9.0] - 2023-12-06
diff --git a/src/use_document.rs b/src/use_document.rs
index d9afaac..dfbf8b7 100644
--- a/src/use_document.rs
+++ b/src/use_document.rs
@@ -4,6 +4,8 @@ use std::ops::Deref;
use crate::core::impl_ssr_safe_method;
#[cfg(not(feature = "ssr"))]
use leptos::*;
+use wasm_bindgen::JsValue;
+use web_sys::NodeList;
/// SSR safe `document()`.
/// This returns just a new-type wrapper around `Option<Document>`.
@@ -58,4 +60,13 @@ impl UseDocument {
active_element(&self) -> Option<web_sys::Element>;
.unwrap_or_default()
);
+
+ impl_ssr_safe_method!(
+ query_selector(&self, selector: &str) -> Result<Option<web_sys::Element>, JsValue>;
+ .unwrap_or(Ok(None))
+ );
+
+ impl_ssr_safe_method!(
+ query_selector_all(&self, selectors: &str) -> Option<Result<NodeList, JsValue>>
+ );
}
From 7bd54edb2d5fb2d8c314115c71af48b1e4a10adf Mon Sep 17 00:00:00 2001
From: Rakshith Ravi <rakshith.ravi@gmx.com>
Date: Sun, 21 Jan 2024 17:41:14 +0530
Subject: [PATCH 17/34] Fixed dependency issue Added documentation
---
.gitignore | 3 +-
CHANGELOG.md | 1 +
Cargo.toml | 17 +-
docs/book/src/SUMMARY.md | 1 +
docs/book/src/browser/use_cookie.md | 3 +
examples/Cargo.toml | 1 +
examples/use_cookie/Cargo.toml | 16 ++
examples/use_cookie/README.md | 23 ++
examples/use_cookie/Trunk.toml | 2 +
examples/use_cookie/index.html | 7 +
examples/use_cookie/input.css | 3 +
examples/use_cookie/rust-toolchain.toml | 2 +
examples/use_cookie/src/main.rs | 29 +++
examples/use_cookie/style/output.css | 289 ++++++++++++++++++++++++
examples/use_cookie/tailwind.config.js | 15 ++
src/lib.rs | 5 +-
src/use_cookie.rs | 50 ++--
17 files changed, 443 insertions(+), 24 deletions(-)
create mode 100644 docs/book/src/browser/use_cookie.md
create mode 100644 examples/use_cookie/Cargo.toml
create mode 100644 examples/use_cookie/README.md
create mode 100644 examples/use_cookie/Trunk.toml
create mode 100644 examples/use_cookie/index.html
create mode 100644 examples/use_cookie/input.css
create mode 100644 examples/use_cookie/rust-toolchain.toml
create mode 100644 examples/use_cookie/src/main.rs
create mode 100644 examples/use_cookie/style/output.css
create mode 100644 examples/use_cookie/tailwind.config.js
diff --git a/.gitignore b/.gitignore
index f67d4f2..d7a25fc 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,4 +4,5 @@ dist
node_modules
package*.json
.vscode
-.DS_Store
\ No newline at end of file
+.DS_Store
+.ffizer
\ No newline at end of file
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0317b03..717b0b0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### New Functions 🚀
+- `use_cookie`
- `use_mouse_in_element`
- `use_device_pixel_ratio` (thanks to @mondeja)
- `use_element_bounding`
diff --git a/Cargo.toml b/Cargo.toml
index 4cf3e17..0f0359b 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -1,18 +1,19 @@
[package]
+name = "leptos-use"
+version = "0.9.0"
+edition = "2021"
authors = ["Marc-Stefan Cassola"]
categories = ["gui", "web-programming"]
description = "Collection of essential Leptos utilities inspired by SolidJS USE / VueUse"
-edition = "2021"
exclude = ["examples/", "tests/"]
homepage = "https://leptos-use.rs"
keywords = ["leptos", "utilities"]
license = "MIT OR Apache-2.0"
-name = "leptos-use"
readme = "README.md"
repository = "https://github.com/Synphonyte/leptos-use"
-version = "0.9.0"
[dependencies]
+actix-web = { version = "4", optional = true, default-features = false }
base64 = { version = "0.21", optional = true }
cfg-if = "1"
cookie = { version = "0.18", features = ["percent-encode"] }
@@ -20,9 +21,11 @@ default-struct-builder = "0.5"
futures-util = "0.3"
gloo-timers = { version = "0.3.0", features = ["futures"] }
gloo-utils = { version = "0.2.0" }
+http = { version = "0.2", optional = true }
js-sys = "0.3"
lazy_static = "1"
leptos = "0.5"
+leptos_axum = { version = "0.5", optional = true }
num = { version = "0.4", optional = true }
paste = "1"
prost = { version = "0.12", optional = true }
@@ -33,6 +36,7 @@ wasm-bindgen = "0.2.88"
wasm-bindgen-futures = "0.4"
[dependencies.web-sys]
+version = "0.3"
features = [
"AddEventListenerOptions",
"BinaryType",
@@ -98,17 +102,14 @@ features = [
"WebSocket",
"Window",
]
-version = "0.3"
[features]
-actix = ["actix-web/cookies"]
-axum = ["axum-extra/cookie", "leptos_axum"]
+axum = ["dep:leptos_axum"]
docs = []
math = ["num"]
prost = ["base64", "dep:prost"]
serde = ["dep:serde", "serde_json"]
-ssr = []
-storage = ["serde", "serde_json", "web-sys/StorageEvent"]
+ssr = ["dep:http"]
[package.metadata.docs.rs]
all-features = true
diff --git a/docs/book/src/SUMMARY.md b/docs/book/src/SUMMARY.md
index 87701a3..4f1091c 100644
--- a/docs/book/src/SUMMARY.md
+++ b/docs/book/src/SUMMARY.md
@@ -35,6 +35,7 @@
- [use_breakpoints](browser/use_breakpoints.md)
- [use_color_mode](browser/use_color_mode.md)
+- [use_cookie](browser/use_cookie.md)
- [use_css_var](browser/use_css_var.md)
- [use_display_media](browser/use_display_media.md)
- [use_event_listener](browser/use_event_listener.md)
diff --git a/docs/book/src/browser/use_cookie.md b/docs/book/src/browser/use_cookie.md
new file mode 100644
index 0000000..b125e32
--- /dev/null
+++ b/docs/book/src/browser/use_cookie.md
@@ -0,0 +1,3 @@
+# use_cookie
+
+<!-- cmdrun python3 ../extract_doc_comment.py use_cookie -->
diff --git a/examples/Cargo.toml b/examples/Cargo.toml
index bb1e8a2..e5ae6c9 100644
--- a/examples/Cargo.toml
+++ b/examples/Cargo.toml
@@ -10,6 +10,7 @@ members = [
"use_breakpoints",
"use_ceil",
"use_color_mode",
+ "use_cookie",
"use_css_var",
"use_cycle_list",
"use_debounce_fn",
diff --git a/examples/use_cookie/Cargo.toml b/examples/use_cookie/Cargo.toml
new file mode 100644
index 0000000..93d1216
--- /dev/null
+++ b/examples/use_cookie/Cargo.toml
@@ -0,0 +1,16 @@
+[package]
+name = "use_cookie"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+leptos = { version = "0.5", features = ["nightly", "csr"] }
+console_error_panic_hook = "0.1"
+console_log = "1"
+log = "0.4"
+leptos-use = { path = "../..", features = ["docs"] }
+web-sys = "0.3"
+
+[dev-dependencies]
+wasm-bindgen = "0.2"
+wasm-bindgen-test = "0.3.0"
diff --git a/examples/use_cookie/README.md b/examples/use_cookie/README.md
new file mode 100644
index 0000000..aef10cd
--- /dev/null
+++ b/examples/use_cookie/README.md
@@ -0,0 +1,23 @@
+A simple example for `use_cookie`.
+
+If you don't have it installed already, install [Trunk](https://trunkrs.dev/) and [Tailwind](https://tailwindcss.com/docs/installation)
+as well as the nightly toolchain for Rust and the wasm32-unknown-unknown target:
+
+```bash
+cargo install trunk
+npm install -D tailwindcss @tailwindcss/forms
+rustup toolchain install nightly
+rustup target add wasm32-unknown-unknown
+```
+
+Then, open two terminals. In the first one, run:
+
+```
+npx tailwindcss -i ./input.css -o ./style/output.css --watch
+```
+
+In the second one, run:
+
+```bash
+trunk serve --open
+```
\ No newline at end of file
diff --git a/examples/use_cookie/Trunk.toml b/examples/use_cookie/Trunk.toml
new file mode 100644
index 0000000..3e4be08
--- /dev/null
+++ b/examples/use_cookie/Trunk.toml
@@ -0,0 +1,2 @@
+[build]
+public_url = "/demo/"
\ No newline at end of file
diff --git a/examples/use_cookie/index.html b/examples/use_cookie/index.html
new file mode 100644
index 0000000..ae249a6
--- /dev/null
+++ b/examples/use_cookie/index.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link data-trunk rel="css" href="style/output.css">
+ </head>
+ <body></body>
+</html>
diff --git a/examples/use_cookie/input.css b/examples/use_cookie/input.css
new file mode 100644
index 0000000..bd6213e
--- /dev/null
+++ b/examples/use_cookie/input.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file
diff --git a/examples/use_cookie/rust-toolchain.toml b/examples/use_cookie/rust-toolchain.toml
new file mode 100644
index 0000000..271800c
--- /dev/null
+++ b/examples/use_cookie/rust-toolchain.toml
@@ -0,0 +1,2 @@
+[toolchain]
+channel = "nightly"
\ No newline at end of file
diff --git a/examples/use_cookie/src/main.rs b/examples/use_cookie/src/main.rs
new file mode 100644
index 0000000..7b5acde
--- /dev/null
+++ b/examples/use_cookie/src/main.rs
@@ -0,0 +1,29 @@
+use leptos::*;
+use leptos_use::docs::demo_or_body;
+use leptos_use::use_cookie;
+
+#[component]
+fn Demo() -> impl IntoView {
+ if let Some(cookie) = use_cookie("auth") {
+ view! {
+ <div>
+ format!("'auth' cookie set to `{}`", cookie.value())
+ </div>
+ }.into_view()
+ } else {
+ view! {
+ <div>
+ "No 'auth' cookie set"
+ </div>
+ }.into_view()
+ }
+}
+
+fn main() {
+ _ = console_log::init_with_level(log::Level::Debug);
+ console_error_panic_hook::set_once();
+
+ mount_to(demo_or_body(), || {
+ view! { <Demo/> }
+ })
+}
diff --git a/examples/use_cookie/style/output.css b/examples/use_cookie/style/output.css
new file mode 100644
index 0000000..ab5191f
--- /dev/null
+++ b/examples/use_cookie/style/output.css
@@ -0,0 +1,289 @@
+[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ background-color: #fff;
+ border-color: #6b7280;
+ border-width: 1px;
+ border-radius: 0px;
+ padding-top: 0.5rem;
+ padding-right: 0.75rem;
+ padding-bottom: 0.5rem;
+ padding-left: 0.75rem;
+ font-size: 1rem;
+ line-height: 1.5rem;
+ --tw-shadow: 0 0 #0000;
+}
+
+[type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
+ outline: 2px solid transparent;
+ outline-offset: 2px;
+ --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
+ --tw-ring-offset-width: 0px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: #2563eb;
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+ border-color: #2563eb;
+}
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+ color: #6b7280;
+ opacity: 1;
+}
+
+input::placeholder,textarea::placeholder {
+ color: #6b7280;
+ opacity: 1;
+}
+
+::-webkit-datetime-edit-fields-wrapper {
+ padding: 0;
+}
+
+::-webkit-date-and-time-value {
+ min-height: 1.5em;
+}
+
+::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
+ padding-top: 0;
+ padding-bottom: 0;
+}
+
+select {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+ background-position: right 0.5rem center;
+ background-repeat: no-repeat;
+ background-size: 1.5em 1.5em;
+ padding-right: 2.5rem;
+ -webkit-print-color-adjust: exact;
+ print-color-adjust: exact;
+}
+
+[multiple] {
+ background-image: initial;
+ background-position: initial;
+ background-repeat: unset;
+ background-size: initial;
+ padding-right: 0.75rem;
+ -webkit-print-color-adjust: unset;
+ print-color-adjust: unset;
+}
+
+[type='checkbox'],[type='radio'] {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ padding: 0;
+ -webkit-print-color-adjust: exact;
+ print-color-adjust: exact;
+ display: inline-block;
+ vertical-align: middle;
+ background-origin: border-box;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+ flex-shrink: 0;
+ height: 1rem;
+ width: 1rem;
+ color: #2563eb;
+ background-color: #fff;
+ border-color: #6b7280;
+ border-width: 1px;
+ --tw-shadow: 0 0 #0000;
+}
+
+[type='checkbox'] {
+ border-radius: 0px;
+}
+
+[type='radio'] {
+ border-radius: 100%;
+}
+
+[type='checkbox']:focus,[type='radio']:focus {
+ outline: 2px solid transparent;
+ outline-offset: 2px;
+ --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
+ --tw-ring-offset-width: 2px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: #2563eb;
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+
+[type='checkbox']:checked,[type='radio']:checked {
+ border-color: transparent;
+ background-color: currentColor;
+ background-size: 100% 100%;
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+[type='checkbox']:checked {
+ background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+}
+
+[type='radio']:checked {
+ background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+}
+
+[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
+ border-color: transparent;
+ background-color: currentColor;
+}
+
+[type='checkbox']:indeterminate {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
+ border-color: transparent;
+ background-color: currentColor;
+ background-size: 100% 100%;
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
+ border-color: transparent;
+ background-color: currentColor;
+}
+
+[type='file'] {
+ background: unset;
+ border-color: inherit;
+ border-width: 0;
+ border-radius: 0;
+ padding: 0;
+ font-size: unset;
+ line-height: inherit;
+}
+
+[type='file']:focus {
+ outline: 1px solid ButtonText;
+ outline: 1px auto -webkit-focus-ring-color;
+}
+
+*, ::before, ::after {
+ --tw-border-spacing-x: 0;
+ --tw-border-spacing-y: 0;
+ --tw-translate-x: 0;
+ --tw-translate-y: 0;
+ --tw-rotate: 0;
+ --tw-skew-x: 0;
+ --tw-skew-y: 0;
+ --tw-scale-x: 1;
+ --tw-scale-y: 1;
+ --tw-pan-x: ;
+ --tw-pan-y: ;
+ --tw-pinch-zoom: ;
+ --tw-scroll-snap-strictness: proximity;
+ --tw-gradient-from-position: ;
+ --tw-gradient-via-position: ;
+ --tw-gradient-to-position: ;
+ --tw-ordinal: ;
+ --tw-slashed-zero: ;
+ --tw-numeric-figure: ;
+ --tw-numeric-spacing: ;
+ --tw-numeric-fraction: ;
+ --tw-ring-inset: ;
+ --tw-ring-offset-width: 0px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: rgb(59 130 246 / 0.5);
+ --tw-ring-offset-shadow: 0 0 #0000;
+ --tw-ring-shadow: 0 0 #0000;
+ --tw-shadow: 0 0 #0000;
+ --tw-shadow-colored: 0 0 #0000;
+ --tw-blur: ;
+ --tw-brightness: ;
+ --tw-contrast: ;
+ --tw-grayscale: ;
+ --tw-hue-rotate: ;
+ --tw-invert: ;
+ --tw-saturate: ;
+ --tw-sepia: ;
+ --tw-drop-shadow: ;
+ --tw-backdrop-blur: ;
+ --tw-backdrop-brightness: ;
+ --tw-backdrop-contrast: ;
+ --tw-backdrop-grayscale: ;
+ --tw-backdrop-hue-rotate: ;
+ --tw-backdrop-invert: ;
+ --tw-backdrop-opacity: ;
+ --tw-backdrop-saturate: ;
+ --tw-backdrop-sepia: ;
+}
+
+::backdrop {
+ --tw-border-spacing-x: 0;
+ --tw-border-spacing-y: 0;
+ --tw-translate-x: 0;
+ --tw-translate-y: 0;
+ --tw-rotate: 0;
+ --tw-skew-x: 0;
+ --tw-skew-y: 0;
+ --tw-scale-x: 1;
+ --tw-scale-y: 1;
+ --tw-pan-x: ;
+ --tw-pan-y: ;
+ --tw-pinch-zoom: ;
+ --tw-scroll-snap-strictness: proximity;
+ --tw-gradient-from-position: ;
+ --tw-gradient-via-position: ;
+ --tw-gradient-to-position: ;
+ --tw-ordinal: ;
+ --tw-slashed-zero: ;
+ --tw-numeric-figure: ;
+ --tw-numeric-spacing: ;
+ --tw-numeric-fraction: ;
+ --tw-ring-inset: ;
+ --tw-ring-offset-width: 0px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: rgb(59 130 246 / 0.5);
+ --tw-ring-offset-shadow: 0 0 #0000;
+ --tw-ring-shadow: 0 0 #0000;
+ --tw-shadow: 0 0 #0000;
+ --tw-shadow-colored: 0 0 #0000;
+ --tw-blur: ;
+ --tw-brightness: ;
+ --tw-contrast: ;
+ --tw-grayscale: ;
+ --tw-hue-rotate: ;
+ --tw-invert: ;
+ --tw-saturate: ;
+ --tw-sepia: ;
+ --tw-drop-shadow: ;
+ --tw-backdrop-blur: ;
+ --tw-backdrop-brightness: ;
+ --tw-backdrop-contrast: ;
+ --tw-backdrop-grayscale: ;
+ --tw-backdrop-hue-rotate: ;
+ --tw-backdrop-invert: ;
+ --tw-backdrop-opacity: ;
+ --tw-backdrop-saturate: ;
+ --tw-backdrop-sepia: ;
+}
+
+.block {
+ display: block;
+}
+
+.text-\[--brand-color\] {
+ color: var(--brand-color);
+}
+
+.text-green-600 {
+ --tw-text-opacity: 1;
+ color: rgb(22 163 74 / var(--tw-text-opacity));
+}
+
+.opacity-75 {
+ opacity: 0.75;
+}
+
+@media (prefers-color-scheme: dark) {
+ .dark\:text-green-500 {
+ --tw-text-opacity: 1;
+ color: rgb(34 197 94 / var(--tw-text-opacity));
+ }
+}
\ No newline at end of file
diff --git a/examples/use_cookie/tailwind.config.js b/examples/use_cookie/tailwind.config.js
new file mode 100644
index 0000000..bc09f5e
--- /dev/null
+++ b/examples/use_cookie/tailwind.config.js
@@ -0,0 +1,15 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: {
+ files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"],
+ },
+ theme: {
+ extend: {},
+ },
+ corePlugins: {
+ preflight: false,
+ },
+ plugins: [
+ require('@tailwindcss/forms'),
+ ],
+}
\ No newline at end of file
diff --git a/src/lib.rs b/src/lib.rs
index 443038b..d5f73a9 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -14,7 +14,6 @@ mod is_none;
mod is_ok;
mod is_some;
mod on_click_outside;
-mod use_mouse_in_element;
mod signal_debounced;
mod signal_throttled;
mod use_active_element;
@@ -45,6 +44,7 @@ mod use_interval_fn;
mod use_intl_number_format;
mod use_media_query;
mod use_mouse;
+mod use_mouse_in_element;
mod use_mutation_observer;
mod use_preferred_contrast;
mod use_preferred_dark;
@@ -73,13 +73,13 @@ pub use is_none::*;
pub use is_ok::*;
pub use is_some::*;
pub use on_click_outside::*;
-pub use use_mouse_in_element::*;
pub use signal_debounced::*;
pub use signal_throttled::*;
pub use use_active_element::*;
pub use use_breakpoints::*;
pub use use_color_mode::*;
pub use use_cookie::*;
+pub use use_cookie::*;
pub use use_css_var::*;
pub use use_cycle_list::*;
pub use use_debounce_fn::*;
@@ -104,6 +104,7 @@ pub use use_interval_fn::*;
pub use use_intl_number_format::*;
pub use use_media_query::*;
pub use use_mouse::*;
+pub use use_mouse_in_element::*;
pub use use_mutation_observer::*;
pub use use_preferred_contrast::*;
pub use use_preferred_dark::*;
diff --git a/src/use_cookie.rs b/src/use_cookie.rs
index d1529e0..436205d 100644
--- a/src/use_cookie.rs
+++ b/src/use_cookie.rs
@@ -1,10 +1,37 @@
use cookie::Cookie;
-pub struct UseCookie {
- pub cookie: Option<Cookie<'static>>,
-}
-
-pub fn use_cookie(cookie_name: &str) -> UseCookie {
+///
+///
+/// ## Demo
+///
+/// [Link to Demo](https://github.com/Synphonyte/leptos-use/tree/main/examples/use_cookie)
+///
+/// ## Usage
+///
+/// This provides you with the cookie that has been set. For more details on how to use the cookie provided, refer: https://docs.rs/cookie/0.18/cookie/struct.Cookie.html
+///
+/// ```
+/// # use leptos::*;
+/// # use leptos_use::use_cookie;
+/// #
+/// # #[component]
+/// # fn Demo() -> impl IntoView {
+/// if let Some(cookie) = use_cookie("auth") {
+/// view! {
+/// <div>
+/// format!("'auth' cookie set to `{}`", cookie.value())
+/// </div>
+/// }.into_view()
+/// } else {
+/// view! {
+/// <div>
+/// "No 'auth' cookie set"
+/// </div>
+/// }.into_view()
+/// }
+/// # }
+/// ```
+pub fn use_cookie(cookie_name: &str) -> Option<Cookie<'static>> {
let cookies;
#[cfg(feature = "ssr")]
{
@@ -12,7 +39,7 @@ pub fn use_cookie(cookie_name: &str) -> UseCookie {
use leptos::expect_context;
let headers;
- #[cfg(feature = "actix")]
+ #[cfg(not(feature = "axum"))]
{
headers = expect_context::<actix_web::HttpRequest>().headers().clone();
}
@@ -31,17 +58,14 @@ pub fn use_cookie(cookie_name: &str) -> UseCookie {
#[cfg(not(feature = "ssr"))]
{
use wasm_bindgen::JsCast;
-
- let js_value: wasm_bindgen::JsValue = leptos::window().document().unwrap().into();
+
+ let js_value: wasm_bindgen::JsValue = leptos::document().into();
let document: web_sys::HtmlDocument = js_value.unchecked_into();
cookies = document.cookie().unwrap_or_default();
}
- let cookie = Cookie::split_parse_encoded(cookies)
- .into_iter()
+ Cookie::split_parse_encoded(cookies)
.filter_map(|cookie| cookie.ok())
.find(|cookie| cookie.name() == cookie_name)
- .map(|cookie| cookie.into_owned());
-
- UseCookie { cookie }
+ .map(|cookie| cookie.into_owned())
}
From d18c3c45fd2d1e2d4bdbec351835b83f51928f57 Mon Sep 17 00:00:00 2001
From: Rakshith Ravi <rakshith.ravi@gmx.com>
Date: Sun, 21 Jan 2024 21:34:18 +0530
Subject: [PATCH 18/34] Removed unnecessarry changes
---
Cargo.toml | 130 ++++++++++++++++++++++++++---------------------------
1 file changed, 65 insertions(+), 65 deletions(-)
diff --git a/Cargo.toml b/Cargo.toml
index 0f0359b..6a6951d 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -6,11 +6,11 @@ authors = ["Marc-Stefan Cassola"]
categories = ["gui", "web-programming"]
description = "Collection of essential Leptos utilities inspired by SolidJS USE / VueUse"
exclude = ["examples/", "tests/"]
-homepage = "https://leptos-use.rs"
keywords = ["leptos", "utilities"]
license = "MIT OR Apache-2.0"
readme = "README.md"
repository = "https://github.com/Synphonyte/leptos-use"
+homepage = "https://leptos-use.rs"
[dependencies]
actix-web = { version = "4", optional = true, default-features = false }
@@ -36,71 +36,71 @@ wasm-bindgen = "0.2.88"
wasm-bindgen-futures = "0.4"
[dependencies.web-sys]
-version = "0.3"
+version = "0.3.65"
features = [
- "AddEventListenerOptions",
- "BinaryType",
- "Coordinates",
- "CloseEvent",
- "CssStyleDeclaration",
- "CustomEvent",
- "CustomEventInit",
- "DisplayMediaStreamConstraints",
- "DomRect",
- "DomRectReadOnly",
- "DataTransfer",
- "DragEvent",
- "Element",
- "EventListener",
- "EventListenerOptions",
- "EventTarget",
- "File",
- "FileList",
- "Geolocation",
- "HtmlDocument",
- "HtmlElement",
- "HtmlLinkElement",
- "HtmlStyleElement",
- "IntersectionObserver",
- "IntersectionObserverInit",
- "IntersectionObserverEntry",
- "MediaDevices",
- "MediaQueryList",
- "MediaStream",
- "MediaStreamTrack",
- "MouseEvent",
- "MutationObserver",
- "MutationObserverInit",
- "MutationRecord",
- "Navigator",
- "NodeList",
- "Notification",
- "NotificationDirection",
- "NotificationOptions",
- "NotificationPermission",
- "PointerEvent",
- "Position",
- "PositionError",
- "PositionOptions",
- "ResizeObserver",
- "ResizeObserverBoxOptions",
- "ResizeObserverEntry",
- "ResizeObserverOptions",
- "ResizeObserverSize",
- "ScrollBehavior",
- "ScrollToOptions",
- "ServiceWorker",
- "ServiceWorkerContainer",
- "ServiceWorkerRegistration",
- "ServiceWorkerState",
- "Storage",
- "StorageEvent",
- "Touch",
- "TouchEvent",
- "TouchList",
- "VisibilityState",
- "WebSocket",
- "Window",
+ "AddEventListenerOptions",
+ "BinaryType",
+ "Coordinates",
+ "CloseEvent",
+ "CssStyleDeclaration",
+ "CustomEvent",
+ "CustomEventInit",
+ "DisplayMediaStreamConstraints",
+ "DomRect",
+ "DomRectReadOnly",
+ "DataTransfer",
+ "DragEvent",
+ "Element",
+ "EventListener",
+ "EventListenerOptions",
+ "EventTarget",
+ "File",
+ "FileList",
+ "Geolocation",
+ "HtmlDocument",
+ "HtmlElement",
+ "HtmlLinkElement",
+ "HtmlStyleElement",
+ "IntersectionObserver",
+ "IntersectionObserverInit",
+ "IntersectionObserverEntry",
+ "MediaDevices",
+ "MediaQueryList",
+ "MediaStream",
+ "MediaStreamTrack",
+ "MouseEvent",
+ "MutationObserver",
+ "MutationObserverInit",
+ "MutationRecord",
+ "Navigator",
+ "NodeList",
+ "Notification",
+ "NotificationDirection",
+ "NotificationOptions",
+ "NotificationPermission",
+ "PointerEvent",
+ "Position",
+ "PositionError",
+ "PositionOptions",
+ "ResizeObserver",
+ "ResizeObserverBoxOptions",
+ "ResizeObserverEntry",
+ "ResizeObserverOptions",
+ "ResizeObserverSize",
+ "ScrollBehavior",
+ "ScrollToOptions",
+ "ServiceWorker",
+ "ServiceWorkerContainer",
+ "ServiceWorkerRegistration",
+ "ServiceWorkerState",
+ "Storage",
+ "StorageEvent",
+ "Touch",
+ "TouchEvent",
+ "TouchList",
+ "VisibilityState",
+ "WebSocket",
+ "Window",
]
[features]
From 84cc04430aeb35c34f7700fe9b47776473298f93 Mon Sep 17 00:00:00 2001
From: Rakshith Ravi <rakshith.ravi@gmx.com>
Date: Mon, 22 Jan 2024 07:56:42 +0530
Subject: [PATCH 19/34] Added one-liner for use-cookie
---
src/use_cookie.rs | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/use_cookie.rs b/src/use_cookie.rs
index 436205d..c2978ac 100644
--- a/src/use_cookie.rs
+++ b/src/use_cookie.rs
@@ -1,6 +1,6 @@
use cookie::Cookie;
-///
+/// Get a cookie by name, for both SSR and CSR
///
/// ## Demo
///
From 383e8ad689d36f45fb9c177c78fb25c49ccdba0a Mon Sep 17 00:00:00 2001
From: Maccesch <maccesch@synphonyte.com>
Date: Tue, 23 Jan 2024 15:39:52 +0000
Subject: [PATCH 20/34] added some docs to use_cookie and the actix feature
---
.idea/leptos-use.iml | 1 +
CHANGELOG.md | 2 +-
Cargo.toml | 1 +
src/use_cookie.rs | 36 ++++++++++++++++++++++--------------
4 files changed, 25 insertions(+), 15 deletions(-)
diff --git a/.idea/leptos-use.iml b/.idea/leptos-use.iml
index 2db780b..c23cffe 100644
--- a/.idea/leptos-use.iml
+++ b/.idea/leptos-use.iml
@@ -64,6 +64,7 @@
<sourceFolder url="file://$MODULE_DIR$/examples/use_device_pixel_ratio/src" isTestSource="false" />
<sourceFolder url="file://$MODULE_DIR$/examples/use_element_bounding/src" isTestSource="false" />
<sourceFolder url="file://$MODULE_DIR$/examples/use_mouse_in_element/src" isTestSource="false" />
+ <sourceFolder url="file://$MODULE_DIR$/examples/use_cookie/src" isTestSource="false" />
<excludeFolder url="file://$MODULE_DIR$/examples/use_event_listener/target" />
<excludeFolder url="file://$MODULE_DIR$/target" />
<excludeFolder url="file://$MODULE_DIR$/docs/book/book" />
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0aec3a1..4f7b994 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,7 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### New Functions 🚀
-- `use_cookie`
+- `use_cookie` (thanks to @rakshith-ravi)
- `use_mouse_in_element`
- `use_device_pixel_ratio` (thanks to @mondeja)
- `use_element_bounding`
diff --git a/Cargo.toml b/Cargo.toml
index 6a6951d..28a902a 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -104,6 +104,7 @@ features = [
]
[features]
+actix = ["dep:actix-web"]
axum = ["dep:leptos_axum"]
docs = []
math = ["num"]
diff --git a/src/use_cookie.rs b/src/use_cookie.rs
index c2978ac..5a2b6a3 100644
--- a/src/use_cookie.rs
+++ b/src/use_cookie.rs
@@ -16,21 +16,29 @@ use cookie::Cookie;
/// #
/// # #[component]
/// # fn Demo() -> impl IntoView {
-/// if let Some(cookie) = use_cookie("auth") {
-/// view! {
-/// <div>
-/// format!("'auth' cookie set to `{}`", cookie.value())
-/// </div>
-/// }.into_view()
-/// } else {
-/// view! {
-/// <div>
-/// "No 'auth' cookie set"
-/// </div>
-/// }.into_view()
-/// }
+/// if let Some(cookie) = use_cookie("auth") {
+/// view! {
+/// <div>
+/// format!("'auth' cookie set to `{}`", cookie.value())
+/// </div>
+/// }.into_view()
+/// } else {
+/// view! {
+/// <div>
+/// "No 'auth' cookie set"
+/// </div>
+/// }.into_view()
+/// }
/// # }
/// ```
+///
+/// Server-Side Rendering
+///
+/// This works equally well on the server or the client.
+/// On the server this function gets the cookie from the HTTP request header.
+///
+/// If you're using `axum` you have to enable the `"axum"` feature in your Cargo.toml.
+/// In case it's `actix-web` enable the feature `"actix"`.
pub fn use_cookie(cookie_name: &str) -> Option<Cookie<'static>> {
let cookies;
#[cfg(feature = "ssr")]
@@ -39,7 +47,7 @@ pub fn use_cookie(cookie_name: &str) -> Option<Cookie<'static>> {
use leptos::expect_context;
let headers;
- #[cfg(not(feature = "axum"))]
+ #[cfg(feature = "actix")]
{
headers = expect_context::<actix_web::HttpRequest>().headers().clone();
}
From 67fa44a5acc8a228350820fd612e2d25a7fb64a8 Mon Sep 17 00:00:00 2001
From: Maccesch <maccesch@synphonyte.com>
Date: Tue, 23 Jan 2024 15:44:33 +0000
Subject: [PATCH 21/34] fixed use_cookie docs
---
src/use_cookie.rs | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/use_cookie.rs b/src/use_cookie.rs
index 5a2b6a3..d85470c 100644
--- a/src/use_cookie.rs
+++ b/src/use_cookie.rs
@@ -32,7 +32,7 @@ use cookie::Cookie;
/// # }
/// ```
///
-/// Server-Side Rendering
+/// ## Server-Side Rendering
///
/// This works equally well on the server or the client.
/// On the server this function gets the cookie from the HTTP request header.
From 4598c27e292af6ec9b7a0a55f61491eee2b90de2 Mon Sep 17 00:00:00 2001
From: Maccesch <maccesch@synphonyte.com>
Date: Tue, 23 Jan 2024 15:55:12 +0000
Subject: [PATCH 22/34] updated to leptos 0.6.0-beta
---
CHANGELOG.md | 4 ++++
Cargo.toml | 10 +++++-----
src/lib.rs | 1 -
src/use_cookie.rs | 2 +-
4 files changed, 10 insertions(+), 7 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4f7b994..bdef9fa 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- `use_device_pixel_ratio` (thanks to @mondeja)
- `use_element_bounding`
+### Breaking Changes 🛠
+
+- The `leptos` version is now 0.6
+
### Fixes 🍕
- Fixed `use_geolocation` SSR compile issue
diff --git a/Cargo.toml b/Cargo.toml
index 28a902a..45b3bda 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -21,22 +21,22 @@ default-struct-builder = "0.5"
futures-util = "0.3"
gloo-timers = { version = "0.3.0", features = ["futures"] }
gloo-utils = { version = "0.2.0" }
-http = { version = "0.2", optional = true }
+http = { version = "1", optional = true }
js-sys = "0.3"
lazy_static = "1"
-leptos = "0.5"
-leptos_axum = { version = "0.5", optional = true }
+leptos = "0.6.0-beta"
+leptos_axum = { version = "0.6.0-beta", optional = true }
num = { version = "0.4", optional = true }
paste = "1"
prost = { version = "0.12", optional = true }
serde = { version = "1", optional = true }
serde_json = { version = "1", optional = true }
-thiserror = "1.0"
+thiserror = "1"
wasm-bindgen = "0.2.88"
wasm-bindgen-futures = "0.4"
[dependencies.web-sys]
-version = "0.3.65"
+version = "0.3.67"
features = [
"AddEventListenerOptions",
"BinaryType",
diff --git a/src/lib.rs b/src/lib.rs
index d5f73a9..f075f84 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -79,7 +79,6 @@ pub use use_active_element::*;
pub use use_breakpoints::*;
pub use use_color_mode::*;
pub use use_cookie::*;
-pub use use_cookie::*;
pub use use_css_var::*;
pub use use_cycle_list::*;
pub use use_debounce_fn::*;
diff --git a/src/use_cookie.rs b/src/use_cookie.rs
index d85470c..e810a57 100644
--- a/src/use_cookie.rs
+++ b/src/use_cookie.rs
@@ -53,7 +53,7 @@ pub fn use_cookie(cookie_name: &str) -> Option<Cookie<'static>> {
}
#[cfg(feature = "axum")]
{
- headers = expect_context::<leptos_axum::RequestParts>().headers;
+ headers = expect_context::<http::request::Parts>().headers;
}
cookies = headers
.get(http::header::COOKIE)
From 91071cf1197c7a1c657b53091e7f8579a73baa65 Mon Sep 17 00:00:00 2001
From: Maccesch <maccesch@synphonyte.com>
Date: Tue, 23 Jan 2024 16:05:07 +0000
Subject: [PATCH 23/34] fixed use_cookie example
---
examples/use_cookie/src/main.rs | 14 ++++----------
1 file changed, 4 insertions(+), 10 deletions(-)
diff --git a/examples/use_cookie/src/main.rs b/examples/use_cookie/src/main.rs
index 7b5acde..c6674f6 100644
--- a/examples/use_cookie/src/main.rs
+++ b/examples/use_cookie/src/main.rs
@@ -5,17 +5,11 @@ use leptos_use::use_cookie;
#[component]
fn Demo() -> impl IntoView {
if let Some(cookie) = use_cookie("auth") {
- view! {
- <div>
- format!("'auth' cookie set to `{}`", cookie.value())
- </div>
- }.into_view()
+ view! { <div>"'auth' cookie set to " <code>"`" {cookie.value().to_string()} "`"</code></div> }
+ .into_view()
} else {
- view! {
- <div>
- "No 'auth' cookie set"
- </div>
- }.into_view()
+ view! { <div>"No 'auth' cookie set"</div> }
+ .into_view()
}
}
From e4c6901140d856cc2fc4de91c72b0d8a5de0ac5b Mon Sep 17 00:00:00 2001
From: Maccesch <maccesch@synphonyte.com>
Date: Tue, 23 Jan 2024 16:06:16 +0000
Subject: [PATCH 24/34] use_cookie feature docs more prominent
---
src/use_cookie.rs | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/use_cookie.rs b/src/use_cookie.rs
index e810a57..5c32b58 100644
--- a/src/use_cookie.rs
+++ b/src/use_cookie.rs
@@ -37,8 +37,8 @@ use cookie::Cookie;
/// This works equally well on the server or the client.
/// On the server this function gets the cookie from the HTTP request header.
///
-/// If you're using `axum` you have to enable the `"axum"` feature in your Cargo.toml.
-/// In case it's `actix-web` enable the feature `"actix"`.
+/// > If you're using `axum` you have to enable the `"axum"` feature in your Cargo.toml.
+/// > In case it's `actix-web` enable the feature `"actix"`.
pub fn use_cookie(cookie_name: &str) -> Option<Cookie<'static>> {
let cookies;
#[cfg(feature = "ssr")]
From 943ae14f6c8913319d23ca43a2799bb1292eb486 Mon Sep 17 00:00:00 2001
From: Maccesch <maccesch@synphonyte.com>
Date: Tue, 23 Jan 2024 16:07:37 +0000
Subject: [PATCH 25/34] addd leptos compatibiliy for main to readme
---
README.md | 12 +++++++-----
1 file changed, 7 insertions(+), 5 deletions(-)
diff --git a/README.md b/README.md
index 7fa64c7..b28c69a 100644
--- a/README.md
+++ b/README.md
@@ -87,8 +87,10 @@ This will create the function file in the src directory, scaffold an example dir
## Leptos compatibility
-| Crate version | Compatible Leptos version |
-|----------------|---------------------------|
-| <= 0.3 | 0.3 |
-| 0.4, 0.5, 0.6 | 0.4 |
-| 0.7, 0.8, 0.9 | 0.5 |
+| Crate version | Compatible Leptos version |
+|---------------|---------------------------|
+| <= 0.3 | 0.3 |
+| 0.4, 0.5, 0.6 | 0.4 |
+| 0.7, 0.8, 0.9 | 0.5 |
+| main | 0.6.0-beta |
+
From c9c269b66f62c3f8b61de685e25559708dcc5cbe Mon Sep 17 00:00:00 2001
From: Maccesch <maccesch@synphonyte.com>
Date: Tue, 23 Jan 2024 17:07:14 +0000
Subject: [PATCH 26/34] updated examples to leptos 0.6.0-beta
---
examples/on_click_outside/Cargo.toml | 2 +-
examples/signal_debounced/Cargo.toml | 2 +-
examples/signal_throttled/Cargo.toml | 2 +-
examples/ssr/Cargo.toml | 2 +-
examples/use_abs/Cargo.toml | 2 +-
examples/use_active_element/Cargo.toml | 2 +-
examples/use_breakpoints/Cargo.toml | 2 +-
examples/use_ceil/Cargo.toml | 2 +-
examples/use_color_mode/Cargo.toml | 2 +-
examples/use_cookie/Cargo.toml | 2 +-
examples/use_css_var/Cargo.toml | 2 +-
examples/use_cycle_list/Cargo.toml | 2 +-
examples/use_debounce_fn/Cargo.toml | 2 +-
examples/use_device_pixel_ratio/Cargo.toml | 2 +-
examples/use_display_media/Cargo.toml | 2 +-
examples/use_document_visibility/Cargo.toml | 2 +-
examples/use_draggable/Cargo.toml | 2 +-
examples/use_drop_zone/Cargo.toml | 2 +-
examples/use_element_bounding/Cargo.toml | 2 +-
examples/use_element_hover/Cargo.toml | 2 +-
examples/use_element_size/Cargo.toml | 2 +-
examples/use_element_visibility/Cargo.toml | 2 +-
examples/use_event_listener/Cargo.toml | 2 +-
examples/use_favicon/Cargo.toml | 2 +-
examples/use_floor/Cargo.toml | 2 +-
examples/use_geolocation/Cargo.toml | 2 +-
examples/use_idle/Cargo.toml | 2 +-
examples/use_infinite_scroll/Cargo.toml | 2 +-
examples/use_intersection_observer/Cargo.toml | 2 +-
examples/use_interval/Cargo.toml | 2 +-
examples/use_interval_fn/Cargo.toml | 2 +-
examples/use_intl_number_format/Cargo.toml | 2 +-
examples/use_media_query/Cargo.toml | 2 +-
examples/use_mouse/Cargo.toml | 2 +-
examples/use_mouse_in_element/Cargo.toml | 2 +-
examples/use_mutation_observer/Cargo.toml | 2 +-
examples/use_raf_fn/Cargo.toml | 2 +-
examples/use_resize_observer/Cargo.toml | 2 +-
examples/use_round/Cargo.toml | 2 +-
examples/use_scroll/Cargo.toml | 2 +-
examples/use_service_worker/Cargo.toml | 2 +-
examples/use_sorted/Cargo.toml | 2 +-
examples/use_storage/Cargo.toml | 2 +-
examples/use_throttle_fn/Cargo.toml | 2 +-
examples/use_timestamp/Cargo.toml | 2 +-
examples/use_web_notification/Cargo.toml | 2 +-
examples/use_websocket/Cargo.toml | 2 +-
examples/use_window_focus/Cargo.toml | 2 +-
examples/use_window_scroll/Cargo.toml | 2 +-
examples/watch_debounced/Cargo.toml | 2 +-
examples/watch_pausable/Cargo.toml | 2 +-
examples/watch_throttled/Cargo.toml | 2 +-
52 files changed, 52 insertions(+), 52 deletions(-)
diff --git a/examples/on_click_outside/Cargo.toml b/examples/on_click_outside/Cargo.toml
index 76f570c..76fba89 100644
--- a/examples/on_click_outside/Cargo.toml
+++ b/examples/on_click_outside/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/signal_debounced/Cargo.toml b/examples/signal_debounced/Cargo.toml
index a14e69e..7ee45bd 100644
--- a/examples/signal_debounced/Cargo.toml
+++ b/examples/signal_debounced/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/signal_throttled/Cargo.toml b/examples/signal_throttled/Cargo.toml
index 78525ed..bfdcd5f 100644
--- a/examples/signal_throttled/Cargo.toml
+++ b/examples/signal_throttled/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/ssr/Cargo.toml b/examples/ssr/Cargo.toml
index d37a754..8eb93c8 100644
--- a/examples/ssr/Cargo.toml
+++ b/examples/ssr/Cargo.toml
@@ -11,7 +11,7 @@ axum = { version = "0.6.4", optional = true }
console_error_panic_hook = "0.1"
console_log = "1"
cfg-if = "1"
-leptos = { version = "0.5", features = ["nightly"] }
+leptos = { version = "0.6.0-beta", features = ["nightly"] }
leptos_axum = { version = "0.5", optional = true }
leptos_meta = { version = "0.5", features = ["nightly"] }
leptos_router = { version = "0.5", features = ["nightly"] }
diff --git a/examples/use_abs/Cargo.toml b/examples/use_abs/Cargo.toml
index 69755fa..b854708 100644
--- a/examples/use_abs/Cargo.toml
+++ b/examples/use_abs/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_active_element/Cargo.toml b/examples/use_active_element/Cargo.toml
index 291f327..5634283 100644
--- a/examples/use_active_element/Cargo.toml
+++ b/examples/use_active_element/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_breakpoints/Cargo.toml b/examples/use_breakpoints/Cargo.toml
index 99c6719..8e9a129 100644
--- a/examples/use_breakpoints/Cargo.toml
+++ b/examples/use_breakpoints/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_ceil/Cargo.toml b/examples/use_ceil/Cargo.toml
index 059b96b..a4c28d5 100644
--- a/examples/use_ceil/Cargo.toml
+++ b/examples/use_ceil/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_color_mode/Cargo.toml b/examples/use_color_mode/Cargo.toml
index 0b58b63..75fa144 100644
--- a/examples/use_color_mode/Cargo.toml
+++ b/examples/use_color_mode/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_cookie/Cargo.toml b/examples/use_cookie/Cargo.toml
index 93d1216..40a0de9 100644
--- a/examples/use_cookie/Cargo.toml
+++ b/examples/use_cookie/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_css_var/Cargo.toml b/examples/use_css_var/Cargo.toml
index 36dccaf..6eb9aa8 100644
--- a/examples/use_css_var/Cargo.toml
+++ b/examples/use_css_var/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_cycle_list/Cargo.toml b/examples/use_cycle_list/Cargo.toml
index 2c954a7..b07fb33 100644
--- a/examples/use_cycle_list/Cargo.toml
+++ b/examples/use_cycle_list/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_debounce_fn/Cargo.toml b/examples/use_debounce_fn/Cargo.toml
index 8fd9049..e00b9f6 100644
--- a/examples/use_debounce_fn/Cargo.toml
+++ b/examples/use_debounce_fn/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_device_pixel_ratio/Cargo.toml b/examples/use_device_pixel_ratio/Cargo.toml
index a5cbe0d..745cfea 100644
--- a/examples/use_device_pixel_ratio/Cargo.toml
+++ b/examples/use_device_pixel_ratio/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_display_media/Cargo.toml b/examples/use_display_media/Cargo.toml
index 32014f2..8532b71 100644
--- a/examples/use_display_media/Cargo.toml
+++ b/examples/use_display_media/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_document_visibility/Cargo.toml b/examples/use_document_visibility/Cargo.toml
index 61607d2..12ce38a 100644
--- a/examples/use_document_visibility/Cargo.toml
+++ b/examples/use_document_visibility/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_draggable/Cargo.toml b/examples/use_draggable/Cargo.toml
index c56104c..c00029d 100644
--- a/examples/use_draggable/Cargo.toml
+++ b/examples/use_draggable/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_drop_zone/Cargo.toml b/examples/use_drop_zone/Cargo.toml
index 461f924..de40fb3 100644
--- a/examples/use_drop_zone/Cargo.toml
+++ b/examples/use_drop_zone/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_element_bounding/Cargo.toml b/examples/use_element_bounding/Cargo.toml
index ff11b1f..8f371e4 100644
--- a/examples/use_element_bounding/Cargo.toml
+++ b/examples/use_element_bounding/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_element_hover/Cargo.toml b/examples/use_element_hover/Cargo.toml
index 8f11c26..35beba6 100644
--- a/examples/use_element_hover/Cargo.toml
+++ b/examples/use_element_hover/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_element_size/Cargo.toml b/examples/use_element_size/Cargo.toml
index 3e070b8..456a053 100644
--- a/examples/use_element_size/Cargo.toml
+++ b/examples/use_element_size/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_element_visibility/Cargo.toml b/examples/use_element_visibility/Cargo.toml
index 7c6bf4c..66df171 100644
--- a/examples/use_element_visibility/Cargo.toml
+++ b/examples/use_element_visibility/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_event_listener/Cargo.toml b/examples/use_event_listener/Cargo.toml
index 3b07dcd..3137659 100644
--- a/examples/use_event_listener/Cargo.toml
+++ b/examples/use_event_listener/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_favicon/Cargo.toml b/examples/use_favicon/Cargo.toml
index 3d9be8b..e144851 100644
--- a/examples/use_favicon/Cargo.toml
+++ b/examples/use_favicon/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_floor/Cargo.toml b/examples/use_floor/Cargo.toml
index 41b04b7..f25da26 100644
--- a/examples/use_floor/Cargo.toml
+++ b/examples/use_floor/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_geolocation/Cargo.toml b/examples/use_geolocation/Cargo.toml
index c09d504..35a00d3 100644
--- a/examples/use_geolocation/Cargo.toml
+++ b/examples/use_geolocation/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_idle/Cargo.toml b/examples/use_idle/Cargo.toml
index 8fbe4fc..1dfecde 100644
--- a/examples/use_idle/Cargo.toml
+++ b/examples/use_idle/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_infinite_scroll/Cargo.toml b/examples/use_infinite_scroll/Cargo.toml
index 93b5074..1cb3825 100644
--- a/examples/use_infinite_scroll/Cargo.toml
+++ b/examples/use_infinite_scroll/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_intersection_observer/Cargo.toml b/examples/use_intersection_observer/Cargo.toml
index 0ab8584..7707a3a 100644
--- a/examples/use_intersection_observer/Cargo.toml
+++ b/examples/use_intersection_observer/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_interval/Cargo.toml b/examples/use_interval/Cargo.toml
index 1955d1a..0bf8300 100644
--- a/examples/use_interval/Cargo.toml
+++ b/examples/use_interval/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_interval_fn/Cargo.toml b/examples/use_interval_fn/Cargo.toml
index 942ab19..e0685b0 100644
--- a/examples/use_interval_fn/Cargo.toml
+++ b/examples/use_interval_fn/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_intl_number_format/Cargo.toml b/examples/use_intl_number_format/Cargo.toml
index dfafe71..61a38b2 100644
--- a/examples/use_intl_number_format/Cargo.toml
+++ b/examples/use_intl_number_format/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_media_query/Cargo.toml b/examples/use_media_query/Cargo.toml
index 4b47f0b..3bad842 100644
--- a/examples/use_media_query/Cargo.toml
+++ b/examples/use_media_query/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_mouse/Cargo.toml b/examples/use_mouse/Cargo.toml
index 7882fe0..3d50d82 100644
--- a/examples/use_mouse/Cargo.toml
+++ b/examples/use_mouse/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_mouse_in_element/Cargo.toml b/examples/use_mouse_in_element/Cargo.toml
index 5606222..981ff8c 100644
--- a/examples/use_mouse_in_element/Cargo.toml
+++ b/examples/use_mouse_in_element/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_mutation_observer/Cargo.toml b/examples/use_mutation_observer/Cargo.toml
index 2f3dbe1..cc6661b 100644
--- a/examples/use_mutation_observer/Cargo.toml
+++ b/examples/use_mutation_observer/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_raf_fn/Cargo.toml b/examples/use_raf_fn/Cargo.toml
index 305b65e..15d9470 100644
--- a/examples/use_raf_fn/Cargo.toml
+++ b/examples/use_raf_fn/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_resize_observer/Cargo.toml b/examples/use_resize_observer/Cargo.toml
index dc8b881..4f63843 100644
--- a/examples/use_resize_observer/Cargo.toml
+++ b/examples/use_resize_observer/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_round/Cargo.toml b/examples/use_round/Cargo.toml
index 3956d90..a9c8b4e 100644
--- a/examples/use_round/Cargo.toml
+++ b/examples/use_round/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_scroll/Cargo.toml b/examples/use_scroll/Cargo.toml
index 1e73a51..41b0ee1 100644
--- a/examples/use_scroll/Cargo.toml
+++ b/examples/use_scroll/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_service_worker/Cargo.toml b/examples/use_service_worker/Cargo.toml
index 878fa9a..6b795e6 100644
--- a/examples/use_service_worker/Cargo.toml
+++ b/examples/use_service_worker/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_sorted/Cargo.toml b/examples/use_sorted/Cargo.toml
index 6b5a699..4933263 100644
--- a/examples/use_sorted/Cargo.toml
+++ b/examples/use_sorted/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_storage/Cargo.toml b/examples/use_storage/Cargo.toml
index 6686fe8..6f4d998 100644
--- a/examples/use_storage/Cargo.toml
+++ b/examples/use_storage/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_throttle_fn/Cargo.toml b/examples/use_throttle_fn/Cargo.toml
index d6e01f9..c0b889a 100644
--- a/examples/use_throttle_fn/Cargo.toml
+++ b/examples/use_throttle_fn/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_timestamp/Cargo.toml b/examples/use_timestamp/Cargo.toml
index 76d8d40..90452c1 100644
--- a/examples/use_timestamp/Cargo.toml
+++ b/examples/use_timestamp/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_web_notification/Cargo.toml b/examples/use_web_notification/Cargo.toml
index 26ee6c9..70d275d 100644
--- a/examples/use_web_notification/Cargo.toml
+++ b/examples/use_web_notification/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_websocket/Cargo.toml b/examples/use_websocket/Cargo.toml
index 64de6b0..7abbcaf 100644
--- a/examples/use_websocket/Cargo.toml
+++ b/examples/use_websocket/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_window_focus/Cargo.toml b/examples/use_window_focus/Cargo.toml
index 611a50e..63856fa 100644
--- a/examples/use_window_focus/Cargo.toml
+++ b/examples/use_window_focus/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_window_scroll/Cargo.toml b/examples/use_window_scroll/Cargo.toml
index bdaf522..3debe23 100644
--- a/examples/use_window_scroll/Cargo.toml
+++ b/examples/use_window_scroll/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/watch_debounced/Cargo.toml b/examples/watch_debounced/Cargo.toml
index c088b01..04c434b 100644
--- a/examples/watch_debounced/Cargo.toml
+++ b/examples/watch_debounced/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/watch_pausable/Cargo.toml b/examples/watch_pausable/Cargo.toml
index 50586e8..77bb531 100644
--- a/examples/watch_pausable/Cargo.toml
+++ b/examples/watch_pausable/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/watch_throttled/Cargo.toml b/examples/watch_throttled/Cargo.toml
index 7d03eb4..0b6c4d8 100644
--- a/examples/watch_throttled/Cargo.toml
+++ b/examples/watch_throttled/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.5", features = ["nightly", "csr"] }
+leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
From d6289cbf3c34e7710745e3826e6a3af733c40b4f Mon Sep 17 00:00:00 2001
From: Rakshith Ravi <rakshith.ravi@gmx.com>
Date: Sat, 27 Jan 2024 03:15:21 +0530
Subject: [PATCH 27/34] Upgraded to 0.6 :)
---
Cargo.toml | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/Cargo.toml b/Cargo.toml
index 45b3bda..a49a177 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -24,8 +24,8 @@ gloo-utils = { version = "0.2.0" }
http = { version = "1", optional = true }
js-sys = "0.3"
lazy_static = "1"
-leptos = "0.6.0-beta"
-leptos_axum = { version = "0.6.0-beta", optional = true }
+leptos = "0.6"
+leptos_axum = { version = "0.6", optional = true }
num = { version = "0.4", optional = true }
paste = "1"
prost = { version = "0.12", optional = true }
@@ -36,7 +36,7 @@ wasm-bindgen = "0.2.88"
wasm-bindgen-futures = "0.4"
[dependencies.web-sys]
-version = "0.3.67"
+version = "0.3"
features = [
"AddEventListenerOptions",
"BinaryType",
From d44b9a292df389c6bde9b7f77fc001360243c81e Mon Sep 17 00:00:00 2001
From: Rakshith Ravi <rakshith.ravi@gmx.com>
Date: Sat, 27 Jan 2024 03:29:14 +0530
Subject: [PATCH 28/34] Fixed differing http versions
---
Cargo.toml | 9 +++++----
src/use_cookie.rs | 15 ++++++++++++---
2 files changed, 17 insertions(+), 7 deletions(-)
diff --git a/Cargo.toml b/Cargo.toml
index a49a177..8c1c381 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -21,7 +21,8 @@ default-struct-builder = "0.5"
futures-util = "0.3"
gloo-timers = { version = "0.3.0", features = ["futures"] }
gloo-utils = { version = "0.2.0" }
-http = { version = "1", optional = true }
+http1 = { version = "1", optional = true, package = "http" }
+http0_2 = { version = "0.2", optional = true, package = "http" }
js-sys = "0.3"
lazy_static = "1"
leptos = "0.6"
@@ -104,13 +105,13 @@ features = [
]
[features]
-actix = ["dep:actix-web"]
-axum = ["dep:leptos_axum"]
+actix = ["dep:actix-web", "dep:http0_2"]
+axum = ["dep:leptos_axum", "dep:http1"]
docs = []
math = ["num"]
prost = ["base64", "dep:prost"]
serde = ["dep:serde", "serde_json"]
-ssr = ["dep:http"]
+ssr = []
[package.metadata.docs.rs]
all-features = true
diff --git a/src/use_cookie.rs b/src/use_cookie.rs
index 5c32b58..c4f89a8 100644
--- a/src/use_cookie.rs
+++ b/src/use_cookie.rs
@@ -43,8 +43,17 @@ pub fn use_cookie(cookie_name: &str) -> Option<Cookie<'static>> {
let cookies;
#[cfg(feature = "ssr")]
{
- use http::HeaderValue;
use leptos::expect_context;
+
+ #[cfg(feature = "actix")]
+ const COOKIE: http0_2::HeaderValue = http0_2::header::COOKIE;
+ #[cfg(feature = "axum")]
+ const COOKIE: http1::HeaderValue = http1::header::COOKIE;
+
+ #[cfg(feature = "actix")]
+ type HeaderValue = http0_2::HeaderValue;
+ #[cfg(feature = "axum")]
+ type HeaderValue = http1::HeaderValue;
let headers;
#[cfg(feature = "actix")]
@@ -53,10 +62,10 @@ pub fn use_cookie(cookie_name: &str) -> Option<Cookie<'static>> {
}
#[cfg(feature = "axum")]
{
- headers = expect_context::<http::request::Parts>().headers;
+ headers = expect_context::<http1::request::Parts>().headers;
}
cookies = headers
- .get(http::header::COOKIE)
+ .get(COOKIE)
.cloned()
.unwrap_or_else(|| HeaderValue::from_static(""))
.to_str()
From 91f483c850ed854d0a70dfa09575a6f280051c51 Mon Sep 17 00:00:00 2001
From: Rakshith Ravi <rakshith.ravi@gmx.com>
Date: Sat, 27 Jan 2024 03:30:30 +0530
Subject: [PATCH 29/34] Fixed formatting
---
src/use_cookie.rs | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/use_cookie.rs b/src/use_cookie.rs
index c4f89a8..5745ab7 100644
--- a/src/use_cookie.rs
+++ b/src/use_cookie.rs
@@ -44,7 +44,7 @@ pub fn use_cookie(cookie_name: &str) -> Option<Cookie<'static>> {
#[cfg(feature = "ssr")]
{
use leptos::expect_context;
-
+
#[cfg(feature = "actix")]
const COOKIE: http0_2::HeaderValue = http0_2::header::COOKIE;
#[cfg(feature = "axum")]
From ee930bbabb5b42912b5f6ae46a1bf2834d97a12e Mon Sep 17 00:00:00 2001
From: Rakshith Ravi <rakshith.ravi@gmx.com>
Date: Sat, 27 Jan 2024 03:35:29 +0530
Subject: [PATCH 30/34] Fixed typo
---
src/use_cookie.rs | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/use_cookie.rs b/src/use_cookie.rs
index 5745ab7..1cec388 100644
--- a/src/use_cookie.rs
+++ b/src/use_cookie.rs
@@ -46,9 +46,9 @@ pub fn use_cookie(cookie_name: &str) -> Option<Cookie<'static>> {
use leptos::expect_context;
#[cfg(feature = "actix")]
- const COOKIE: http0_2::HeaderValue = http0_2::header::COOKIE;
+ const COOKIE: http0_2::HeaderName = http0_2::header::COOKIE;
#[cfg(feature = "axum")]
- const COOKIE: http1::HeaderValue = http1::header::COOKIE;
+ const COOKIE: http1::HeaderName = http1::header::COOKIE;
#[cfg(feature = "actix")]
type HeaderValue = http0_2::HeaderValue;
From 42e95e7df504a39ab1a4c21be47564444b0ab229 Mon Sep 17 00:00:00 2001
From: Maccesch <maccesch@synphonyte.com>
Date: Mon, 29 Jan 2024 18:04:38 +0000
Subject: [PATCH 31/34] updated examples to leptos 0.6
---
examples/on_click_outside/Cargo.toml | 2 +-
examples/signal_debounced/Cargo.toml | 2 +-
examples/signal_throttled/Cargo.toml | 2 +-
examples/ssr/Cargo.toml | 2 +-
examples/use_abs/Cargo.toml | 2 +-
examples/use_active_element/Cargo.toml | 2 +-
examples/use_breakpoints/Cargo.toml | 2 +-
examples/use_ceil/Cargo.toml | 2 +-
examples/use_color_mode/Cargo.toml | 2 +-
examples/use_cookie/Cargo.toml | 2 +-
examples/use_css_var/Cargo.toml | 2 +-
examples/use_cycle_list/Cargo.toml | 2 +-
examples/use_debounce_fn/Cargo.toml | 2 +-
examples/use_device_pixel_ratio/Cargo.toml | 2 +-
examples/use_display_media/Cargo.toml | 2 +-
examples/use_document_visibility/Cargo.toml | 2 +-
examples/use_draggable/Cargo.toml | 2 +-
examples/use_drop_zone/Cargo.toml | 2 +-
examples/use_element_bounding/Cargo.toml | 2 +-
examples/use_element_hover/Cargo.toml | 2 +-
examples/use_element_size/Cargo.toml | 2 +-
examples/use_element_visibility/Cargo.toml | 2 +-
examples/use_event_listener/Cargo.toml | 2 +-
examples/use_favicon/Cargo.toml | 2 +-
examples/use_floor/Cargo.toml | 2 +-
examples/use_geolocation/Cargo.toml | 2 +-
examples/use_idle/Cargo.toml | 2 +-
examples/use_infinite_scroll/Cargo.toml | 2 +-
examples/use_intersection_observer/Cargo.toml | 2 +-
examples/use_interval/Cargo.toml | 2 +-
examples/use_interval_fn/Cargo.toml | 2 +-
examples/use_intl_number_format/Cargo.toml | 2 +-
examples/use_media_query/Cargo.toml | 2 +-
examples/use_mouse/Cargo.toml | 2 +-
examples/use_mouse_in_element/Cargo.toml | 2 +-
examples/use_mutation_observer/Cargo.toml | 2 +-
examples/use_raf_fn/Cargo.toml | 2 +-
examples/use_resize_observer/Cargo.toml | 2 +-
examples/use_round/Cargo.toml | 2 +-
examples/use_scroll/Cargo.toml | 2 +-
examples/use_service_worker/Cargo.toml | 2 +-
examples/use_sorted/Cargo.toml | 2 +-
examples/use_storage/Cargo.toml | 2 +-
examples/use_throttle_fn/Cargo.toml | 2 +-
examples/use_timestamp/Cargo.toml | 2 +-
examples/use_web_notification/Cargo.toml | 2 +-
examples/use_websocket/Cargo.toml | 2 +-
examples/use_window_focus/Cargo.toml | 2 +-
examples/use_window_scroll/Cargo.toml | 2 +-
examples/watch_debounced/Cargo.toml | 2 +-
examples/watch_pausable/Cargo.toml | 2 +-
examples/watch_throttled/Cargo.toml | 2 +-
52 files changed, 52 insertions(+), 52 deletions(-)
diff --git a/examples/on_click_outside/Cargo.toml b/examples/on_click_outside/Cargo.toml
index 76fba89..3313bf8 100644
--- a/examples/on_click_outside/Cargo.toml
+++ b/examples/on_click_outside/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/signal_debounced/Cargo.toml b/examples/signal_debounced/Cargo.toml
index 7ee45bd..6f85a28 100644
--- a/examples/signal_debounced/Cargo.toml
+++ b/examples/signal_debounced/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/signal_throttled/Cargo.toml b/examples/signal_throttled/Cargo.toml
index bfdcd5f..73b2b91 100644
--- a/examples/signal_throttled/Cargo.toml
+++ b/examples/signal_throttled/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/ssr/Cargo.toml b/examples/ssr/Cargo.toml
index 8eb93c8..28b1909 100644
--- a/examples/ssr/Cargo.toml
+++ b/examples/ssr/Cargo.toml
@@ -11,7 +11,7 @@ axum = { version = "0.6.4", optional = true }
console_error_panic_hook = "0.1"
console_log = "1"
cfg-if = "1"
-leptos = { version = "0.6.0-beta", features = ["nightly"] }
+leptos = { version = "0.6", features = ["nightly"] }
leptos_axum = { version = "0.5", optional = true }
leptos_meta = { version = "0.5", features = ["nightly"] }
leptos_router = { version = "0.5", features = ["nightly"] }
diff --git a/examples/use_abs/Cargo.toml b/examples/use_abs/Cargo.toml
index b854708..8195e32 100644
--- a/examples/use_abs/Cargo.toml
+++ b/examples/use_abs/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_active_element/Cargo.toml b/examples/use_active_element/Cargo.toml
index 5634283..c19c400 100644
--- a/examples/use_active_element/Cargo.toml
+++ b/examples/use_active_element/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_breakpoints/Cargo.toml b/examples/use_breakpoints/Cargo.toml
index 8e9a129..22b894b 100644
--- a/examples/use_breakpoints/Cargo.toml
+++ b/examples/use_breakpoints/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_ceil/Cargo.toml b/examples/use_ceil/Cargo.toml
index a4c28d5..d694257 100644
--- a/examples/use_ceil/Cargo.toml
+++ b/examples/use_ceil/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_color_mode/Cargo.toml b/examples/use_color_mode/Cargo.toml
index 75fa144..ead2ef6 100644
--- a/examples/use_color_mode/Cargo.toml
+++ b/examples/use_color_mode/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_cookie/Cargo.toml b/examples/use_cookie/Cargo.toml
index 40a0de9..90f4bb2 100644
--- a/examples/use_cookie/Cargo.toml
+++ b/examples/use_cookie/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_css_var/Cargo.toml b/examples/use_css_var/Cargo.toml
index 6eb9aa8..267c40e 100644
--- a/examples/use_css_var/Cargo.toml
+++ b/examples/use_css_var/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_cycle_list/Cargo.toml b/examples/use_cycle_list/Cargo.toml
index b07fb33..c59b61c 100644
--- a/examples/use_cycle_list/Cargo.toml
+++ b/examples/use_cycle_list/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_debounce_fn/Cargo.toml b/examples/use_debounce_fn/Cargo.toml
index e00b9f6..d5f4621 100644
--- a/examples/use_debounce_fn/Cargo.toml
+++ b/examples/use_debounce_fn/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_device_pixel_ratio/Cargo.toml b/examples/use_device_pixel_ratio/Cargo.toml
index 745cfea..5874c65 100644
--- a/examples/use_device_pixel_ratio/Cargo.toml
+++ b/examples/use_device_pixel_ratio/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_display_media/Cargo.toml b/examples/use_display_media/Cargo.toml
index 8532b71..c7ffe6a 100644
--- a/examples/use_display_media/Cargo.toml
+++ b/examples/use_display_media/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_document_visibility/Cargo.toml b/examples/use_document_visibility/Cargo.toml
index 12ce38a..cb9b8f1 100644
--- a/examples/use_document_visibility/Cargo.toml
+++ b/examples/use_document_visibility/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_draggable/Cargo.toml b/examples/use_draggable/Cargo.toml
index c00029d..e2e9a61 100644
--- a/examples/use_draggable/Cargo.toml
+++ b/examples/use_draggable/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_drop_zone/Cargo.toml b/examples/use_drop_zone/Cargo.toml
index de40fb3..115dc9d 100644
--- a/examples/use_drop_zone/Cargo.toml
+++ b/examples/use_drop_zone/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_element_bounding/Cargo.toml b/examples/use_element_bounding/Cargo.toml
index 8f371e4..7620bcd 100644
--- a/examples/use_element_bounding/Cargo.toml
+++ b/examples/use_element_bounding/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_element_hover/Cargo.toml b/examples/use_element_hover/Cargo.toml
index 35beba6..9d90e62 100644
--- a/examples/use_element_hover/Cargo.toml
+++ b/examples/use_element_hover/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_element_size/Cargo.toml b/examples/use_element_size/Cargo.toml
index 456a053..daf02f0 100644
--- a/examples/use_element_size/Cargo.toml
+++ b/examples/use_element_size/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_element_visibility/Cargo.toml b/examples/use_element_visibility/Cargo.toml
index 66df171..50ba543 100644
--- a/examples/use_element_visibility/Cargo.toml
+++ b/examples/use_element_visibility/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_event_listener/Cargo.toml b/examples/use_event_listener/Cargo.toml
index 3137659..653bb76 100644
--- a/examples/use_event_listener/Cargo.toml
+++ b/examples/use_event_listener/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_favicon/Cargo.toml b/examples/use_favicon/Cargo.toml
index e144851..260413a 100644
--- a/examples/use_favicon/Cargo.toml
+++ b/examples/use_favicon/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_floor/Cargo.toml b/examples/use_floor/Cargo.toml
index f25da26..c221e68 100644
--- a/examples/use_floor/Cargo.toml
+++ b/examples/use_floor/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_geolocation/Cargo.toml b/examples/use_geolocation/Cargo.toml
index 35a00d3..bb7c93e 100644
--- a/examples/use_geolocation/Cargo.toml
+++ b/examples/use_geolocation/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_idle/Cargo.toml b/examples/use_idle/Cargo.toml
index 1dfecde..1b412b4 100644
--- a/examples/use_idle/Cargo.toml
+++ b/examples/use_idle/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_infinite_scroll/Cargo.toml b/examples/use_infinite_scroll/Cargo.toml
index 1cb3825..e55811a 100644
--- a/examples/use_infinite_scroll/Cargo.toml
+++ b/examples/use_infinite_scroll/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_intersection_observer/Cargo.toml b/examples/use_intersection_observer/Cargo.toml
index 7707a3a..b401615 100644
--- a/examples/use_intersection_observer/Cargo.toml
+++ b/examples/use_intersection_observer/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_interval/Cargo.toml b/examples/use_interval/Cargo.toml
index 0bf8300..a49f0cd 100644
--- a/examples/use_interval/Cargo.toml
+++ b/examples/use_interval/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_interval_fn/Cargo.toml b/examples/use_interval_fn/Cargo.toml
index e0685b0..86bc8b2 100644
--- a/examples/use_interval_fn/Cargo.toml
+++ b/examples/use_interval_fn/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_intl_number_format/Cargo.toml b/examples/use_intl_number_format/Cargo.toml
index 61a38b2..7eadd70 100644
--- a/examples/use_intl_number_format/Cargo.toml
+++ b/examples/use_intl_number_format/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_media_query/Cargo.toml b/examples/use_media_query/Cargo.toml
index 3bad842..345aa87 100644
--- a/examples/use_media_query/Cargo.toml
+++ b/examples/use_media_query/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_mouse/Cargo.toml b/examples/use_mouse/Cargo.toml
index 3d50d82..1c91a04 100644
--- a/examples/use_mouse/Cargo.toml
+++ b/examples/use_mouse/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_mouse_in_element/Cargo.toml b/examples/use_mouse_in_element/Cargo.toml
index 981ff8c..ac23964 100644
--- a/examples/use_mouse_in_element/Cargo.toml
+++ b/examples/use_mouse_in_element/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_mutation_observer/Cargo.toml b/examples/use_mutation_observer/Cargo.toml
index cc6661b..fcf12fd 100644
--- a/examples/use_mutation_observer/Cargo.toml
+++ b/examples/use_mutation_observer/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_raf_fn/Cargo.toml b/examples/use_raf_fn/Cargo.toml
index 15d9470..48b8cd9 100644
--- a/examples/use_raf_fn/Cargo.toml
+++ b/examples/use_raf_fn/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_resize_observer/Cargo.toml b/examples/use_resize_observer/Cargo.toml
index 4f63843..0ce7f4c 100644
--- a/examples/use_resize_observer/Cargo.toml
+++ b/examples/use_resize_observer/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_round/Cargo.toml b/examples/use_round/Cargo.toml
index a9c8b4e..6786fc8 100644
--- a/examples/use_round/Cargo.toml
+++ b/examples/use_round/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_scroll/Cargo.toml b/examples/use_scroll/Cargo.toml
index 41b0ee1..ccb133a 100644
--- a/examples/use_scroll/Cargo.toml
+++ b/examples/use_scroll/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_service_worker/Cargo.toml b/examples/use_service_worker/Cargo.toml
index 6b795e6..8e3b8c7 100644
--- a/examples/use_service_worker/Cargo.toml
+++ b/examples/use_service_worker/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_sorted/Cargo.toml b/examples/use_sorted/Cargo.toml
index 4933263..05462ac 100644
--- a/examples/use_sorted/Cargo.toml
+++ b/examples/use_sorted/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_storage/Cargo.toml b/examples/use_storage/Cargo.toml
index 6f4d998..a4ba692 100644
--- a/examples/use_storage/Cargo.toml
+++ b/examples/use_storage/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_throttle_fn/Cargo.toml b/examples/use_throttle_fn/Cargo.toml
index c0b889a..04d6006 100644
--- a/examples/use_throttle_fn/Cargo.toml
+++ b/examples/use_throttle_fn/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_timestamp/Cargo.toml b/examples/use_timestamp/Cargo.toml
index 90452c1..a065eb4 100644
--- a/examples/use_timestamp/Cargo.toml
+++ b/examples/use_timestamp/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_web_notification/Cargo.toml b/examples/use_web_notification/Cargo.toml
index 70d275d..216f31e 100644
--- a/examples/use_web_notification/Cargo.toml
+++ b/examples/use_web_notification/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_websocket/Cargo.toml b/examples/use_websocket/Cargo.toml
index 7abbcaf..2f1f0a5 100644
--- a/examples/use_websocket/Cargo.toml
+++ b/examples/use_websocket/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_window_focus/Cargo.toml b/examples/use_window_focus/Cargo.toml
index 63856fa..d157e75 100644
--- a/examples/use_window_focus/Cargo.toml
+++ b/examples/use_window_focus/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/use_window_scroll/Cargo.toml b/examples/use_window_scroll/Cargo.toml
index 3debe23..d8a1c48 100644
--- a/examples/use_window_scroll/Cargo.toml
+++ b/examples/use_window_scroll/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/watch_debounced/Cargo.toml b/examples/watch_debounced/Cargo.toml
index 04c434b..8af3c77 100644
--- a/examples/watch_debounced/Cargo.toml
+++ b/examples/watch_debounced/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/watch_pausable/Cargo.toml b/examples/watch_pausable/Cargo.toml
index 77bb531..a14897d 100644
--- a/examples/watch_pausable/Cargo.toml
+++ b/examples/watch_pausable/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
diff --git a/examples/watch_throttled/Cargo.toml b/examples/watch_throttled/Cargo.toml
index 0b6c4d8..e711c4f 100644
--- a/examples/watch_throttled/Cargo.toml
+++ b/examples/watch_throttled/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
edition = "2021"
[dependencies]
-leptos = { version = "0.6.0-beta", features = ["nightly", "csr"] }
+leptos = { version = "0.6", features = ["nightly", "csr"] }
console_error_panic_hook = "0.1"
console_log = "1"
log = "0.4"
From 51c66e5e72f0e6cd08dc1b2080eb73c2cce6fb73 Mon Sep 17 00:00:00 2001
From: Maccesch <maccesch@synphonyte.com>
Date: Mon, 29 Jan 2024 18:05:06 +0000
Subject: [PATCH 32/34] updated tests to accomodate use_cookie and added
possibility to get your own cookie header value
---
.github/workflows/ci.yml | 47 +++-----------
.github/workflows/tests.yml | 8 ++-
src/use_cookie.rs | 124 ++++++++++++++++++++++++++++--------
3 files changed, 110 insertions(+), 69 deletions(-)
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 6ad089d..38f8cde 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -31,10 +31,14 @@ jobs:
run: cargo fmt --check
- name: Clippy
run: cargo clippy --features prost,serde,docs,math --tests -- -D warnings
- - name: Run tests
- run: cargo test --all-features
+ - name: Run tests (general)
+ run: cargo test --features math,docs,ssr,prost,serde
+ - name: Run tests (axum)
+ run: cargo test --features math,docs,ssr,prost,serde,axum --doc use_cookie::use_cookie
+ - name: Run tests (actix)
+ run: cargo test --features math,docs,ssr,prost,serde,actix --doc use_cookie::use_cookie
-#### mdbook
+ #### mdbook
- name: Install mdbook I
uses: taiki-e/install-action@v2
with:
@@ -59,7 +63,7 @@ jobs:
- name: Deploy book to github pages
id: deployment
uses: actions/deploy-pages@v2
-##### mdbook end
+ ##### mdbook end
- name: Publish crate leptos-use
uses: katyo/publish-crates@v2
@@ -76,38 +80,3 @@ jobs:
-F RELEASE.md
-t "Version $RELEASE_VERSION"
${GITHUB_REF#refs/*/}
-
-# coverage:
-# name: Coverage
-# runs-on: ubuntu-latest
-#
-# steps:
-# - name: Checkout sources
-# uses: actions/checkout@v2
-#
-# - name: Install rust
-# uses: actions-rs/toolchain@v1
-# with:
-# toolchain: stable
-# profile: minimal
-# override: true
-#
-# - name: Cache
-# uses: Swatinem/rust-cache@v1
-#
-# - name: Install cargo-tarpaulin
-# uses: actions-rs/cargo@v1
-# with:
-# command: install
-# args: cargo-tarpaulin
-#
-# - name: Run cargo tarpaulin
-# uses: actions-rs/cargo@v1
-# with:
-# command: tarpaulin
-# args: --output-dir coverage --out Lcov
-#
-# - name: Publish to Coveralls
-# uses: coverallsapp/github-action@master
-# with:
-# github-token: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
index f5500fb..d43d0b4 100644
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -24,5 +24,9 @@ jobs:
run: cargo fmt --check
- name: Clippy
run: cargo clippy --features prost,serde,docs,math --tests -- -D warnings
- - name: Run tests
- run: cargo test --all-features
+ - name: Run tests (general)
+ run: cargo test --features math,docs,ssr,prost,serde
+ - name: Run tests (axum)
+ run: cargo test --features math,docs,ssr,prost,serde,axum --doc use_cookie::use_cookie
+ - name: Run tests (actix)
+ run: cargo test --features math,docs,ssr,prost,serde,actix --doc use_cookie::use_cookie
diff --git a/src/use_cookie.rs b/src/use_cookie.rs
index 1cec388..438a8c4 100644
--- a/src/use_cookie.rs
+++ b/src/use_cookie.rs
@@ -1,4 +1,6 @@
use cookie::Cookie;
+use default_struct_builder::DefaultBuilder;
+use std::rc::Rc;
/// Get a cookie by name, for both SSR and CSR
///
@@ -39,39 +41,43 @@ use cookie::Cookie;
///
/// > If you're using `axum` you have to enable the `"axum"` feature in your Cargo.toml.
/// > In case it's `actix-web` enable the feature `"actix"`.
+///
+/// ### Bring your own header
+///
+/// In case you're neither using Axum nor Actix, or the default implementation is not to your liking,
+/// you can provide your own way of reading the cookie header value.
+///
+/// ```
+/// # use leptos::*;
+/// # use leptos_use::{use_cookie_with_options, UseCookieOptions};
+/// #
+/// # #[component]
+/// # fn Demo() -> impl IntoView {
+/// use_cookie_with_options("auth", UseCookieOptions::default().ssr_cookies_header_getter(|| {
+/// #[cfg(feature = "ssr")]
+/// {
+/// "Somehow get the value of the cookie header as a string".to_owned()
+/// }
+/// }));
+/// # view! {}
+/// # }
+/// ```
pub fn use_cookie(cookie_name: &str) -> Option<Cookie<'static>> {
+ use_cookie_with_options(cookie_name, UseCookieOptions::default())
+}
+
+/// Version of [`use_cookie`] that takes [`UseCookieOptions`].
+pub fn use_cookie_with_options(
+ cookie_name: &str,
+ options: UseCookieOptions,
+) -> Option<Cookie<'static>> {
let cookies;
+
#[cfg(feature = "ssr")]
{
- use leptos::expect_context;
-
- #[cfg(feature = "actix")]
- const COOKIE: http0_2::HeaderName = http0_2::header::COOKIE;
- #[cfg(feature = "axum")]
- const COOKIE: http1::HeaderName = http1::header::COOKIE;
-
- #[cfg(feature = "actix")]
- type HeaderValue = http0_2::HeaderValue;
- #[cfg(feature = "axum")]
- type HeaderValue = http1::HeaderValue;
-
- let headers;
- #[cfg(feature = "actix")]
- {
- headers = expect_context::<actix_web::HttpRequest>().headers().clone();
- }
- #[cfg(feature = "axum")]
- {
- headers = expect_context::<http1::request::Parts>().headers;
- }
- cookies = headers
- .get(COOKIE)
- .cloned()
- .unwrap_or_else(|| HeaderValue::from_static(""))
- .to_str()
- .unwrap_or_default()
- .to_owned();
+ cookies = (options.ssr_cookies_header_getter)();
}
+
#[cfg(not(feature = "ssr"))]
{
use wasm_bindgen::JsCast;
@@ -86,3 +92,65 @@ pub fn use_cookie(cookie_name: &str) -> Option<Cookie<'static>> {
.find(|cookie| cookie.name() == cookie_name)
.map(|cookie| cookie.into_owned())
}
+
+/// Options for [`use_cookie_with_options`].
+#[derive(Clone, DefaultBuilder)]
+pub struct UseCookieOptions {
+ /// Getter function to return the string value of the cookie header.
+ /// When you use one of the features "axum" or "actix" there's a valid default implementation provided.
+ ssr_cookies_header_getter: Rc<dyn Fn() -> String>,
+}
+
+impl Default for UseCookieOptions {
+ #[allow(dead_code)]
+ fn default() -> Self {
+ Self {
+ ssr_cookies_header_getter: Rc::new(move || {
+ #[cfg(feature = "ssr")]
+ {
+ #[cfg(any(feature = "axum", feature = "actix"))]
+ use leptos::expect_context;
+
+ #[cfg(all(feature = "actix", feature = "axum"))]
+ compile_error!("You cannot enable only one of features \"actix\" and \"axum\" at the same time");
+
+ #[cfg(feature = "actix")]
+ const COOKIE: http0_2::HeaderName = http0_2::header::COOKIE;
+ #[cfg(feature = "axum")]
+ const COOKIE: http1::HeaderName = http1::header::COOKIE;
+
+ #[cfg(feature = "actix")]
+ type HeaderValue = http0_2::HeaderValue;
+ #[cfg(feature = "axum")]
+ type HeaderValue = http1::HeaderValue;
+
+ #[cfg(any(feature = "axum", feature = "actix"))]
+ let headers;
+ #[cfg(feature = "actix")]
+ {
+ headers = expect_context::<actix_web::HttpRequest>().headers().clone();
+ }
+ #[cfg(feature = "axum")]
+ {
+ headers = expect_context::<http1::request::Parts>().headers;
+ }
+
+ #[cfg(all(not(feature = "axum"), not(feature = "actix")))]
+ {
+ leptos::logging::warn!("If you're using use_cookie without the feature `axum` or `actix` enabled, you should provide the option `ssr_cookies_header_getter`");
+ "".to_owned()
+ }
+
+ #[cfg(any(feature = "axum", feature = "actix"))]
+ headers
+ .get(COOKIE)
+ .cloned()
+ .unwrap_or_else(|| HeaderValue::from_static(""))
+ .to_str()
+ .unwrap_or_default()
+ .to_owned()
+ }
+ }),
+ }
+ }
+}
From e5e6eae9d12284029ab4c1e057c7f57b9e6e5f64 Mon Sep 17 00:00:00 2001
From: Maccesch <maccesch@synphonyte.com>
Date: Mon, 29 Jan 2024 19:15:18 +0000
Subject: [PATCH 33/34] started use_broadcast_channel
---
.idea/leptos-use.iml | 1 +
CHANGELOG.md | 1 +
Cargo.toml | 2 +
docs/book/src/SUMMARY.md | 1 +
.../book/src/browser/use_broadcast_channel.md | 3 +
examples/Cargo.toml | 1 +
examples/use_broadcast_channel/Cargo.toml | 16 +
examples/use_broadcast_channel/README.md | 23 ++
examples/use_broadcast_channel/Trunk.toml | 2 +
examples/use_broadcast_channel/index.html | 7 +
examples/use_broadcast_channel/input.css | 3 +
.../use_broadcast_channel/rust-toolchain.toml | 2 +
examples/use_broadcast_channel/src/main.rs | 20 ++
.../use_broadcast_channel/style/output.css | 289 ++++++++++++++++++
.../use_broadcast_channel/tailwind.config.js | 15 +
src/lib.rs | 2 +
src/use_broadcast_channel.rs | 69 +++++
17 files changed, 457 insertions(+)
create mode 100644 docs/book/src/browser/use_broadcast_channel.md
create mode 100644 examples/use_broadcast_channel/Cargo.toml
create mode 100644 examples/use_broadcast_channel/README.md
create mode 100644 examples/use_broadcast_channel/Trunk.toml
create mode 100644 examples/use_broadcast_channel/index.html
create mode 100644 examples/use_broadcast_channel/input.css
create mode 100644 examples/use_broadcast_channel/rust-toolchain.toml
create mode 100644 examples/use_broadcast_channel/src/main.rs
create mode 100644 examples/use_broadcast_channel/style/output.css
create mode 100644 examples/use_broadcast_channel/tailwind.config.js
create mode 100644 src/use_broadcast_channel.rs
diff --git a/.idea/leptos-use.iml b/.idea/leptos-use.iml
index c23cffe..66a5442 100644
--- a/.idea/leptos-use.iml
+++ b/.idea/leptos-use.iml
@@ -65,6 +65,7 @@
<sourceFolder url="file://$MODULE_DIR$/examples/use_element_bounding/src" isTestSource="false" />
<sourceFolder url="file://$MODULE_DIR$/examples/use_mouse_in_element/src" isTestSource="false" />
<sourceFolder url="file://$MODULE_DIR$/examples/use_cookie/src" isTestSource="false" />
+ <sourceFolder url="file://$MODULE_DIR$/examples/use_broadcast_channel/src" isTestSource="false" />
<excludeFolder url="file://$MODULE_DIR$/examples/use_event_listener/target" />
<excludeFolder url="file://$MODULE_DIR$/target" />
<excludeFolder url="file://$MODULE_DIR$/docs/book/book" />
diff --git a/CHANGELOG.md b/CHANGELOG.md
index bdef9fa..3f833c2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### New Functions 🚀
+- `use_broadcast_channel`
- `use_cookie` (thanks to @rakshith-ravi)
- `use_mouse_in_element`
- `use_device_pixel_ratio` (thanks to @mondeja)
diff --git a/Cargo.toml b/Cargo.toml
index 8c1c381..a627b38 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -41,6 +41,7 @@ version = "0.3"
features = [
"AddEventListenerOptions",
"BinaryType",
+ "BroadcastChannel",
"Coordinates",
"CloseEvent",
"CssStyleDeclaration",
@@ -69,6 +70,7 @@ features = [
"MediaQueryList",
"MediaStream",
"MediaStreamTrack",
+ "MessageEvent",
"MouseEvent",
"MutationObserver",
"MutationObserverInit",
diff --git a/docs/book/src/SUMMARY.md b/docs/book/src/SUMMARY.md
index 4f1091c..ecb5889 100644
--- a/docs/book/src/SUMMARY.md
+++ b/docs/book/src/SUMMARY.md
@@ -34,6 +34,7 @@
# Browser
- [use_breakpoints](browser/use_breakpoints.md)
+- [use_broadcast_channel](browser/use_broadcast_channel.md)
- [use_color_mode](browser/use_color_mode.md)
- [use_cookie](browser/use_cookie.md)
- [use_css_var](browser/use_css_var.md)
diff --git a/docs/book/src/browser/use_broadcast_channel.md b/docs/book/src/browser/use_broadcast_channel.md
new file mode 100644
index 0000000..8a2393a
--- /dev/null
+++ b/docs/book/src/browser/use_broadcast_channel.md
@@ -0,0 +1,3 @@
+# use_broadcast_channel
+
+<!-- cmdrun python3 ../extract_doc_comment.py use_broadcast_channel -->
diff --git a/examples/Cargo.toml b/examples/Cargo.toml
index e5ae6c9..25cc614 100644
--- a/examples/Cargo.toml
+++ b/examples/Cargo.toml
@@ -8,6 +8,7 @@ members = [
"use_abs",
"use_active_element",
"use_breakpoints",
+ "use_broadcast_channel",
"use_ceil",
"use_color_mode",
"use_cookie",
diff --git a/examples/use_broadcast_channel/Cargo.toml b/examples/use_broadcast_channel/Cargo.toml
new file mode 100644
index 0000000..d8414a1
--- /dev/null
+++ b/examples/use_broadcast_channel/Cargo.toml
@@ -0,0 +1,16 @@
+[package]
+name = "use_broadcast_channel"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+leptos = { version = "0.5", features = ["nightly", "csr"] }
+console_error_panic_hook = "0.1"
+console_log = "1"
+log = "0.4"
+leptos-use = { path = "../..", features = ["docs"] }
+web-sys = "0.3"
+
+[dev-dependencies]
+wasm-bindgen = "0.2"
+wasm-bindgen-test = "0.3.0"
diff --git a/examples/use_broadcast_channel/README.md b/examples/use_broadcast_channel/README.md
new file mode 100644
index 0000000..7365df6
--- /dev/null
+++ b/examples/use_broadcast_channel/README.md
@@ -0,0 +1,23 @@
+A simple example for `use_broadcast_channel`.
+
+If you don't have it installed already, install [Trunk](https://trunkrs.dev/) and [Tailwind](https://tailwindcss.com/docs/installation)
+as well as the nightly toolchain for Rust and the wasm32-unknown-unknown target:
+
+```bash
+cargo install trunk
+npm install -D tailwindcss @tailwindcss/forms
+rustup toolchain install nightly
+rustup target add wasm32-unknown-unknown
+```
+
+Then, open two terminals. In the first one, run:
+
+```
+npx tailwindcss -i ./input.css -o ./style/output.css --watch
+```
+
+In the second one, run:
+
+```bash
+trunk serve --open
+```
\ No newline at end of file
diff --git a/examples/use_broadcast_channel/Trunk.toml b/examples/use_broadcast_channel/Trunk.toml
new file mode 100644
index 0000000..3e4be08
--- /dev/null
+++ b/examples/use_broadcast_channel/Trunk.toml
@@ -0,0 +1,2 @@
+[build]
+public_url = "/demo/"
\ No newline at end of file
diff --git a/examples/use_broadcast_channel/index.html b/examples/use_broadcast_channel/index.html
new file mode 100644
index 0000000..ae249a6
--- /dev/null
+++ b/examples/use_broadcast_channel/index.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link data-trunk rel="css" href="style/output.css">
+ </head>
+ <body></body>
+</html>
diff --git a/examples/use_broadcast_channel/input.css b/examples/use_broadcast_channel/input.css
new file mode 100644
index 0000000..bd6213e
--- /dev/null
+++ b/examples/use_broadcast_channel/input.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file
diff --git a/examples/use_broadcast_channel/rust-toolchain.toml b/examples/use_broadcast_channel/rust-toolchain.toml
new file mode 100644
index 0000000..271800c
--- /dev/null
+++ b/examples/use_broadcast_channel/rust-toolchain.toml
@@ -0,0 +1,2 @@
+[toolchain]
+channel = "nightly"
\ No newline at end of file
diff --git a/examples/use_broadcast_channel/src/main.rs b/examples/use_broadcast_channel/src/main.rs
new file mode 100644
index 0000000..651183c
--- /dev/null
+++ b/examples/use_broadcast_channel/src/main.rs
@@ -0,0 +1,20 @@
+use leptos::*;
+use leptos_use::docs::demo_or_body;
+use leptos_use::use_broadcast_channel;
+
+#[component]
+fn Demo() -> impl IntoView {
+
+ use_broadcast_channel();
+
+ view! { }
+}
+
+fn main() {
+ _ = console_log::init_with_level(log::Level::Debug);
+ console_error_panic_hook::set_once();
+
+ mount_to(demo_or_body(), || {
+ view! { <Demo/> }
+ })
+}
diff --git a/examples/use_broadcast_channel/style/output.css b/examples/use_broadcast_channel/style/output.css
new file mode 100644
index 0000000..ab5191f
--- /dev/null
+++ b/examples/use_broadcast_channel/style/output.css
@@ -0,0 +1,289 @@
+[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ background-color: #fff;
+ border-color: #6b7280;
+ border-width: 1px;
+ border-radius: 0px;
+ padding-top: 0.5rem;
+ padding-right: 0.75rem;
+ padding-bottom: 0.5rem;
+ padding-left: 0.75rem;
+ font-size: 1rem;
+ line-height: 1.5rem;
+ --tw-shadow: 0 0 #0000;
+}
+
+[type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
+ outline: 2px solid transparent;
+ outline-offset: 2px;
+ --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
+ --tw-ring-offset-width: 0px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: #2563eb;
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+ border-color: #2563eb;
+}
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+ color: #6b7280;
+ opacity: 1;
+}
+
+input::placeholder,textarea::placeholder {
+ color: #6b7280;
+ opacity: 1;
+}
+
+::-webkit-datetime-edit-fields-wrapper {
+ padding: 0;
+}
+
+::-webkit-date-and-time-value {
+ min-height: 1.5em;
+}
+
+::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
+ padding-top: 0;
+ padding-bottom: 0;
+}
+
+select {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+ background-position: right 0.5rem center;
+ background-repeat: no-repeat;
+ background-size: 1.5em 1.5em;
+ padding-right: 2.5rem;
+ -webkit-print-color-adjust: exact;
+ print-color-adjust: exact;
+}
+
+[multiple] {
+ background-image: initial;
+ background-position: initial;
+ background-repeat: unset;
+ background-size: initial;
+ padding-right: 0.75rem;
+ -webkit-print-color-adjust: unset;
+ print-color-adjust: unset;
+}
+
+[type='checkbox'],[type='radio'] {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ padding: 0;
+ -webkit-print-color-adjust: exact;
+ print-color-adjust: exact;
+ display: inline-block;
+ vertical-align: middle;
+ background-origin: border-box;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+ flex-shrink: 0;
+ height: 1rem;
+ width: 1rem;
+ color: #2563eb;
+ background-color: #fff;
+ border-color: #6b7280;
+ border-width: 1px;
+ --tw-shadow: 0 0 #0000;
+}
+
+[type='checkbox'] {
+ border-radius: 0px;
+}
+
+[type='radio'] {
+ border-radius: 100%;
+}
+
+[type='checkbox']:focus,[type='radio']:focus {
+ outline: 2px solid transparent;
+ outline-offset: 2px;
+ --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
+ --tw-ring-offset-width: 2px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: #2563eb;
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+
+[type='checkbox']:checked,[type='radio']:checked {
+ border-color: transparent;
+ background-color: currentColor;
+ background-size: 100% 100%;
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+[type='checkbox']:checked {
+ background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+}
+
+[type='radio']:checked {
+ background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+}
+
+[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
+ border-color: transparent;
+ background-color: currentColor;
+}
+
+[type='checkbox']:indeterminate {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
+ border-color: transparent;
+ background-color: currentColor;
+ background-size: 100% 100%;
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
+ border-color: transparent;
+ background-color: currentColor;
+}
+
+[type='file'] {
+ background: unset;
+ border-color: inherit;
+ border-width: 0;
+ border-radius: 0;
+ padding: 0;
+ font-size: unset;
+ line-height: inherit;
+}
+
+[type='file']:focus {
+ outline: 1px solid ButtonText;
+ outline: 1px auto -webkit-focus-ring-color;
+}
+
+*, ::before, ::after {
+ --tw-border-spacing-x: 0;
+ --tw-border-spacing-y: 0;
+ --tw-translate-x: 0;
+ --tw-translate-y: 0;
+ --tw-rotate: 0;
+ --tw-skew-x: 0;
+ --tw-skew-y: 0;
+ --tw-scale-x: 1;
+ --tw-scale-y: 1;
+ --tw-pan-x: ;
+ --tw-pan-y: ;
+ --tw-pinch-zoom: ;
+ --tw-scroll-snap-strictness: proximity;
+ --tw-gradient-from-position: ;
+ --tw-gradient-via-position: ;
+ --tw-gradient-to-position: ;
+ --tw-ordinal: ;
+ --tw-slashed-zero: ;
+ --tw-numeric-figure: ;
+ --tw-numeric-spacing: ;
+ --tw-numeric-fraction: ;
+ --tw-ring-inset: ;
+ --tw-ring-offset-width: 0px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: rgb(59 130 246 / 0.5);
+ --tw-ring-offset-shadow: 0 0 #0000;
+ --tw-ring-shadow: 0 0 #0000;
+ --tw-shadow: 0 0 #0000;
+ --tw-shadow-colored: 0 0 #0000;
+ --tw-blur: ;
+ --tw-brightness: ;
+ --tw-contrast: ;
+ --tw-grayscale: ;
+ --tw-hue-rotate: ;
+ --tw-invert: ;
+ --tw-saturate: ;
+ --tw-sepia: ;
+ --tw-drop-shadow: ;
+ --tw-backdrop-blur: ;
+ --tw-backdrop-brightness: ;
+ --tw-backdrop-contrast: ;
+ --tw-backdrop-grayscale: ;
+ --tw-backdrop-hue-rotate: ;
+ --tw-backdrop-invert: ;
+ --tw-backdrop-opacity: ;
+ --tw-backdrop-saturate: ;
+ --tw-backdrop-sepia: ;
+}
+
+::backdrop {
+ --tw-border-spacing-x: 0;
+ --tw-border-spacing-y: 0;
+ --tw-translate-x: 0;
+ --tw-translate-y: 0;
+ --tw-rotate: 0;
+ --tw-skew-x: 0;
+ --tw-skew-y: 0;
+ --tw-scale-x: 1;
+ --tw-scale-y: 1;
+ --tw-pan-x: ;
+ --tw-pan-y: ;
+ --tw-pinch-zoom: ;
+ --tw-scroll-snap-strictness: proximity;
+ --tw-gradient-from-position: ;
+ --tw-gradient-via-position: ;
+ --tw-gradient-to-position: ;
+ --tw-ordinal: ;
+ --tw-slashed-zero: ;
+ --tw-numeric-figure: ;
+ --tw-numeric-spacing: ;
+ --tw-numeric-fraction: ;
+ --tw-ring-inset: ;
+ --tw-ring-offset-width: 0px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: rgb(59 130 246 / 0.5);
+ --tw-ring-offset-shadow: 0 0 #0000;
+ --tw-ring-shadow: 0 0 #0000;
+ --tw-shadow: 0 0 #0000;
+ --tw-shadow-colored: 0 0 #0000;
+ --tw-blur: ;
+ --tw-brightness: ;
+ --tw-contrast: ;
+ --tw-grayscale: ;
+ --tw-hue-rotate: ;
+ --tw-invert: ;
+ --tw-saturate: ;
+ --tw-sepia: ;
+ --tw-drop-shadow: ;
+ --tw-backdrop-blur: ;
+ --tw-backdrop-brightness: ;
+ --tw-backdrop-contrast: ;
+ --tw-backdrop-grayscale: ;
+ --tw-backdrop-hue-rotate: ;
+ --tw-backdrop-invert: ;
+ --tw-backdrop-opacity: ;
+ --tw-backdrop-saturate: ;
+ --tw-backdrop-sepia: ;
+}
+
+.block {
+ display: block;
+}
+
+.text-\[--brand-color\] {
+ color: var(--brand-color);
+}
+
+.text-green-600 {
+ --tw-text-opacity: 1;
+ color: rgb(22 163 74 / var(--tw-text-opacity));
+}
+
+.opacity-75 {
+ opacity: 0.75;
+}
+
+@media (prefers-color-scheme: dark) {
+ .dark\:text-green-500 {
+ --tw-text-opacity: 1;
+ color: rgb(34 197 94 / var(--tw-text-opacity));
+ }
+}
\ No newline at end of file
diff --git a/examples/use_broadcast_channel/tailwind.config.js b/examples/use_broadcast_channel/tailwind.config.js
new file mode 100644
index 0000000..bc09f5e
--- /dev/null
+++ b/examples/use_broadcast_channel/tailwind.config.js
@@ -0,0 +1,15 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: {
+ files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"],
+ },
+ theme: {
+ extend: {},
+ },
+ corePlugins: {
+ preflight: false,
+ },
+ plugins: [
+ require('@tailwindcss/forms'),
+ ],
+}
\ No newline at end of file
diff --git a/src/lib.rs b/src/lib.rs
index f075f84..1c75f59 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -14,6 +14,7 @@ mod is_none;
mod is_ok;
mod is_some;
mod on_click_outside;
+mod use_broadcast_channel;
mod signal_debounced;
mod signal_throttled;
mod use_active_element;
@@ -73,6 +74,7 @@ pub use is_none::*;
pub use is_ok::*;
pub use is_some::*;
pub use on_click_outside::*;
+pub use use_broadcast_channel::*;
pub use signal_debounced::*;
pub use signal_throttled::*;
pub use use_active_element::*;
diff --git a/src/use_broadcast_channel.rs b/src/use_broadcast_channel.rs
new file mode 100644
index 0000000..49b250a
--- /dev/null
+++ b/src/use_broadcast_channel.rs
@@ -0,0 +1,69 @@
+use crate::storage::Codec;
+use crate::use_supported;
+use default_struct_builder::DefaultBuilder;
+use leptos::*;
+
+///
+///
+/// ## Demo
+///
+/// [Link to Demo](https://github.com/Synphonyte/leptos-use/tree/main/examples/use_broadcast_channel)
+///
+/// ## Usage
+///
+/// ```
+/// # use leptos::*;
+/// # use leptos_use::use_broadcast_channel;
+/// #
+/// # #[component]
+/// # fn Demo() -> impl IntoView {
+/// use_broadcast_channel();
+/// #
+/// # view! { }
+/// # }
+/// ```
+pub fn use_broadcast_channel<T, C>(name: &str) -> UseBroadcastChannelReturn
+where
+ C: Codec<T> + Default + Clone,
+{
+ let is_supported = use_supported(|| JsValue::from("BroadcastChannel").js_in(&window()));
+
+ let (is_closed, set_closed) = create_signal(false);
+ let (channel, set_channel) = create_signal(None::<web_sys::BroadcastChannel>);
+ let (message, set_message) = create_signal(None::<T>);
+ let (error, set_error) = create_signal(None::<web_sys::MessageEvent>);
+
+ let post = move |data: T| {
+ if let Some(channel) = channel.get_untracked() {
+ channel.post_message().ok();
+ }
+ };
+}
+
+/// Return type of [`use_broadcast_channel`].
+pub struct UseBroadcastChannelReturn<T, PFn, CFn>
+where
+ PFn: Fn(T),
+ CFn: Fn(),
+{
+ /// `true` if this browser supports `BroadcastChannel`s.
+ is_supported: Signal<bool>,
+
+ /// The broadcast channel that is wrapped by this function
+ channel: Signal<Option<web_sys::BroadcastChannel>>,
+
+ /// Latest message received from the channel
+ message: Signal<Option<T>>,
+
+ /// Sends a message through the channel
+ post: PFn,
+
+ /// Closes the channel
+ close: CFn,
+
+ /// Latest error as reported by the `messageerror` event.
+ error: Signal<Option<web_sys::MessageEvent>>,
+
+ /// Wether the channel is closed
+ is_closed: Signal<bool>,
+}
From 37bf52b5c19eaa468206c94ba671740ae04f9897 Mon Sep 17 00:00:00 2001
From: Maccesch <maccesch@synphonyte.com>
Date: Mon, 29 Jan 2024 19:15:55 +0000
Subject: [PATCH 34/34] refactoring use_cookie
---
src/use_cookie.rs | 36 ++++++++++++++++++++----------------
1 file changed, 20 insertions(+), 16 deletions(-)
diff --git a/src/use_cookie.rs b/src/use_cookie.rs
index 438a8c4..ea9137e 100644
--- a/src/use_cookie.rs
+++ b/src/use_cookie.rs
@@ -71,21 +71,11 @@ pub fn use_cookie_with_options(
cookie_name: &str,
options: UseCookieOptions,
) -> Option<Cookie<'static>> {
- let cookies;
+ let UseCookieOptions {
+ ssr_cookies_header_getter,
+ } = options;
- #[cfg(feature = "ssr")]
- {
- cookies = (options.ssr_cookies_header_getter)();
- }
-
- #[cfg(not(feature = "ssr"))]
- {
- use wasm_bindgen::JsCast;
-
- let js_value: wasm_bindgen::JsValue = leptos::document().into();
- let document: web_sys::HtmlDocument = js_value.unchecked_into();
- cookies = document.cookie().unwrap_or_default();
- }
+ let cookie = read_cookies_string(ssr_cookies_header_getter);
Cookie::split_parse_encoded(cookies)
.filter_map(|cookie| cookie.ok())
@@ -98,14 +88,14 @@ pub fn use_cookie_with_options(
pub struct UseCookieOptions {
/// Getter function to return the string value of the cookie header.
/// When you use one of the features "axum" or "actix" there's a valid default implementation provided.
- ssr_cookies_header_getter: Rc<dyn Fn() -> String>,
+ ssr_cookies_header_getter: Box<dyn Fn() -> String>,
}
impl Default for UseCookieOptions {
#[allow(dead_code)]
fn default() -> Self {
Self {
- ssr_cookies_header_getter: Rc::new(move || {
+ ssr_cookies_header_getter: Box::new(move || {
#[cfg(feature = "ssr")]
{
#[cfg(any(feature = "axum", feature = "actix"))]
@@ -154,3 +144,17 @@ impl Default for UseCookieOptions {
}
}
}
+
+fn read_cookies_string(ssr_cookies_header_getter: Box<dyn Fn() -> String>) -> String {
+ #[cfg(feature = "ssr")]
+ ssr_cookies_header_getter();
+
+ #[cfg(not(feature = "ssr"))]
+ {
+ use wasm_bindgen::JsCast;
+
+ let js_value: wasm_bindgen::JsValue = leptos::document().into();
+ let document: web_sys::HtmlDocument = js_value.unchecked_into();
+ document.cookie().unwrap_or_default()
+ }
+}