From 005fba49dcf19e68b31895274d60c277718f2f61 Mon Sep 17 00:00:00 2001 From: Miles Murgaw Date: Tue, 23 Apr 2024 00:53:26 -0400 Subject: [PATCH 1/3] fix: make hooks reactive --- examples/geolocation/Cargo.toml | 2 +- examples/geolocation/src/main.rs | 2 +- examples/use_window_size/README.md | 9 ++++-- examples/use_window_size/src/main.rs | 4 +-- sdk/src/geolocation/use_geolocation.rs | 39 ++++++++++++++------------ sdk/src/utils/window.rs | 4 +-- 6 files changed, 34 insertions(+), 26 deletions(-) diff --git a/examples/geolocation/Cargo.toml b/examples/geolocation/Cargo.toml index 53c9f69..7a30b79 100644 --- a/examples/geolocation/Cargo.toml +++ b/examples/geolocation/Cargo.toml @@ -6,5 +6,5 @@ edition = "2021" [dependencies] dioxus-sdk = { workspace = true, features = ["geolocation"] } # You can change from 'desktop' to 'web' as well -dioxus = { workspace = true, features = ["desktop"] } +dioxus = { workspace = true, features = ["web"] } diff --git a/examples/geolocation/src/main.rs b/examples/geolocation/src/main.rs index 9407c49..8547f2f 100644 --- a/examples/geolocation/src/main.rs +++ b/examples/geolocation/src/main.rs @@ -18,7 +18,7 @@ fn app() -> Element { }); let latest_coords = use_geolocation(); - let latest_coords = match latest_coords { + let latest_coords = match latest_coords() { Ok(v) => v, Err(e) => { let e = format!("Initializing: {:?}", e); diff --git a/examples/use_window_size/README.md b/examples/use_window_size/README.md index dc18396..71a1159 100644 --- a/examples/use_window_size/README.md +++ b/examples/use_window_size/README.md @@ -2,6 +2,11 @@ Learn how to use `use_window_size`. -Run: -```dioxus serve``` \ No newline at end of file +### Run + +**Desktop** +```dioxus serve --platform desktop``` + +**Web** +```dioxus serve --platform web``` \ No newline at end of file diff --git a/examples/use_window_size/src/main.rs b/examples/use_window_size/src/main.rs index 55306d5..1d4a9d9 100644 --- a/examples/use_window_size/src/main.rs +++ b/examples/use_window_size/src/main.rs @@ -17,8 +17,8 @@ fn app() -> Element { p { "Height: {initial_size().height}" } h3 { "Current Size" } - p { "Width: {window_size.width}" } - p { "Height: {window_size.height}" } + p { "Width: {window_size().width}" } + p { "Height: {window_size().height}" } } ) } diff --git a/sdk/src/geolocation/use_geolocation.rs b/sdk/src/geolocation/use_geolocation.rs index 16bb8cb..baf4f46 100644 --- a/sdk/src/geolocation/use_geolocation.rs +++ b/sdk/src/geolocation/use_geolocation.rs @@ -3,8 +3,8 @@ use super::core::{Error, Event, Geocoordinates, Geolocator, PowerMode, Status}; use dioxus::{ prelude::{ - provide_context, try_consume_context, use_coroutine, use_hook, use_signal, Signal, - UnboundedReceiver, + provide_context, try_consume_context, use_coroutine, use_hook, use_signal, ReadOnlySignal, + Signal, UnboundedReceiver, }, signals::{Readable, Writable}, }; @@ -14,19 +14,10 @@ use std::sync::Once; static INIT: Once = Once::new(); /// Provides the latest geocoordinates. Good for navigation-type apps. -pub fn use_geolocation() -> Result { +pub fn use_geolocation() -> ReadOnlySignal> { // Store the coords let mut coords: Signal> = use_signal(|| Err(Error::NotInitialized)); - let Some(geolocator) = try_consume_context::>>() else { - return Err(Error::NotInitialized); - }; - let geolocator = geolocator.read(); - - // Get geolocator - let Ok(geolocator) = geolocator.as_ref() else { - return Err(Error::NotInitialized); - }; // Initialize the handler of events let listener = use_coroutine(|mut rx: UnboundedReceiver| async move { @@ -43,13 +34,25 @@ pub fn use_geolocation() -> Result { } }); - // Start listening - INIT.call_once(|| { - geolocator.listen(listener).ok(); - }); + // Try getting the geolocator and starting the listener. + match try_consume_context::>>() { + Some(geo) => { + let geo = geo.read(); + match geo.as_ref() { + Ok(geolocator) => { + INIT.call_once(|| { + geolocator.listen(listener).ok(); + }); + } + Err(e) => coords.set(Err(e.clone())), + } + } + None => { + coords.set(Err(Error::NotInitialized)); + } + } - // Get the result and return a clone - coords.read_unchecked().clone() + use_hook(|| ReadOnlySignal::new(coords)) } /// Must be called before any use of the geolocation abstraction. diff --git a/sdk/src/utils/window.rs b/sdk/src/utils/window.rs index a609465..5e3fb5b 100644 --- a/sdk/src/utils/window.rs +++ b/sdk/src/utils/window.rs @@ -36,7 +36,7 @@ pub struct WindowSize { /// } /// } /// ``` -pub fn use_window_size() -> WindowSize { +pub fn use_window_size() -> ReadOnlySignal { let mut window_size = use_signal(get_window_size); // Initialize the handler @@ -48,7 +48,7 @@ pub fn use_window_size() -> WindowSize { listen(tx); - *window_size.read_unchecked() + use_hook(|| ReadOnlySignal::new(window_size)) } // Listener for the web implementation. From 99328640101e57dcf7c0502f7ded26d6f62d8654 Mon Sep 17 00:00:00 2001 From: Miles Murgaw Date: Tue, 23 Apr 2024 00:57:05 -0400 Subject: [PATCH 2/3] revision: switch geo example back to desktop --- examples/geolocation/Cargo.toml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/geolocation/Cargo.toml b/examples/geolocation/Cargo.toml index 7a30b79..53c9f69 100644 --- a/examples/geolocation/Cargo.toml +++ b/examples/geolocation/Cargo.toml @@ -6,5 +6,5 @@ edition = "2021" [dependencies] dioxus-sdk = { workspace = true, features = ["geolocation"] } # You can change from 'desktop' to 'web' as well -dioxus = { workspace = true, features = ["web"] } +dioxus = { workspace = true, features = ["desktop"] } From 6f2319ce3b0fc3c8db5dd0d216414d900eafcb58 Mon Sep 17 00:00:00 2001 From: Miles Murgaw Date: Tue, 23 Apr 2024 01:01:44 -0400 Subject: [PATCH 3/3] fix: doc test --- sdk/src/utils/window.rs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/sdk/src/utils/window.rs b/sdk/src/utils/window.rs index 5e3fb5b..5571f24 100644 --- a/sdk/src/utils/window.rs +++ b/sdk/src/utils/window.rs @@ -31,8 +31,8 @@ pub struct WindowSize { /// let size = use_window_size(); /// /// rsx! { -/// p { "Width: {size.width}" } -/// p { "Height: {size.height}" } +/// p { "Width: {size().width}" } +/// p { "Height: {size().height}" } /// } /// } /// ```