diff --git a/Cargo.lock b/Cargo.lock index 3a8c4dc006..85828f9dc7 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -2603,6 +2603,7 @@ dependencies = [ name = "dioxus-examples" version = "0.6.0-alpha.2" dependencies = [ + "async-std", "base64 0.21.7", "ciborium", "dioxus", @@ -2619,6 +2620,7 @@ dependencies = [ "serde_json", "tokio", "tracing-subscriber", + "web-time", ] [[package]] @@ -11945,6 +11947,16 @@ dependencies = [ "wasm-bindgen", ] +[[package]] +name = "web-time" +version = "1.1.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "5a6580f308b1fad9207618087a65c04e7a10bc77e02c8e84e9b00dd4b12fa0bb" +dependencies = [ + "js-sys", + "wasm-bindgen", +] + [[package]] name = "webbrowser" version = "0.8.15" diff --git a/Cargo.toml b/Cargo.toml index 47aca3d8a7..50f20b5e7d 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -202,6 +202,8 @@ serde = { version = "1.0.136", features = ["derive"] } serde_json = "1.0.79" rand = { version = "0.8.4", features = ["small_rng"] } form_urlencoded = "1.2.0" +async-std = "1.12.0" +web-time = "1.1.0" [target.'cfg(target_arch = "wasm32")'.dev-dependencies] getrandom = { version = "0.2.12", features = ["js"] } @@ -281,7 +283,6 @@ doc-scrape-examples = true [[example]] name = "clock" -required-features = ["desktop"] doc-scrape-examples = true [[example]] @@ -316,7 +317,6 @@ doc-scrape-examples = true [[example]] name = "future" -required-features = ["desktop"] doc-scrape-examples = true [[example]] @@ -351,7 +351,6 @@ doc-scrape-examples = true [[example]] name = "streams" -required-features = ["desktop"] doc-scrape-examples = true [[example]] @@ -368,3 +367,11 @@ doc-scrape-examples = true name = "window_zoom" required-features = ["desktop"] doc-scrape-examples = true + +[[example]] +name = "control_focus" +doc-scrape-examples = true + +[[example]] +name = "eval" +doc-scrape-examples = true diff --git a/examples/backgrounded_futures.rs b/examples/backgrounded_futures.rs index 160b9c122e..4cafad439e 100644 --- a/examples/backgrounded_futures.rs +++ b/examples/backgrounded_futures.rs @@ -7,10 +7,11 @@ //! //! This example is more of a demonstration of the behavior than a practical use case, but it's still interesting to see. +use async_std::task::sleep; use dioxus::prelude::*; fn main() { - launch_desktop(app); + launch(app); } fn app() -> Element { @@ -48,7 +49,7 @@ fn Child(count: Signal) -> Element { use_future(move || async move { loop { - tokio::time::sleep(std::time::Duration::from_millis(100)).await; + sleep(std::time::Duration::from_millis(100)).await; println!("Child") } }); diff --git a/examples/clock.rs b/examples/clock.rs index 048ceb56ee..7bbcd305d6 100644 --- a/examples/clock.rs +++ b/examples/clock.rs @@ -1,14 +1,14 @@ //! A simple little clock that updates the time every few milliseconds. //! -//! Neither Rust nor Tokio have an interval function, so we just sleep until the next update. -//! Tokio timer's don't work on WASM though, so you'll need to use a slightly different approach if you're targeting the web. use dioxus::prelude::*; +use tokio::time::sleep; +use web_time::Instant; const STYLE: &str = asset!("./examples/assets/clock.css"); fn main() { - launch_desktop(app); + launch(app); } fn app() -> Element { @@ -16,12 +16,10 @@ fn app() -> Element { use_future(move || async move { // Save our initial timea - let start = std::time::Instant::now(); + let start = Instant::now(); loop { - // In lieu of an interval, we just sleep until the next update - let now = tokio::time::Instant::now(); - tokio::time::sleep_until(now + std::time::Duration::from_millis(27)).await; + sleep(std::time::Duration::from_millis(27)).await; // Update the time, using a more precise approach of getting the duration since we started the timer millis.set(start.elapsed().as_millis() as i64); diff --git a/examples/control_focus.rs b/examples/control_focus.rs index 723318c3ff..c69293c56d 100644 --- a/examples/control_focus.rs +++ b/examples/control_focus.rs @@ -3,13 +3,15 @@ //! This example shows how to manage focus in a Dioxus application. We implement a "roulette" that focuses on each input //! in the grid every few milliseconds until the user interacts with the inputs. -use dioxus::prelude::*; use std::rc::Rc; +use async_std::task::sleep; +use dioxus::prelude::*; + const STYLE: &str = asset!("./examples/assets/roulette.css"); fn main() { - launch_desktop(app); + launch(app); } fn app() -> Element { @@ -21,7 +23,7 @@ fn app() -> Element { let mut focused = 0; loop { - tokio::time::sleep(std::time::Duration::from_millis(50)).await; + sleep(std::time::Duration::from_millis(50)).await; if !running() { continue; diff --git a/examples/eval.rs b/examples/eval.rs index d67365c51e..9cfd15e941 100644 --- a/examples/eval.rs +++ b/examples/eval.rs @@ -3,6 +3,7 @@ //! Eval will only work with renderers that support javascript - so currently only the web and desktop/mobile renderers //! that use a webview. Native renderers will throw "unsupported" errors when calling `eval`. +use async_std::task::sleep; use dioxus::prelude::*; fn main() { @@ -13,7 +14,7 @@ fn app() -> Element { // Create a future that will resolve once the javascript has been successfully executed. let future = use_resource(move || async move { // Wait a little bit just to give the appearance of a loading screen - tokio::time::sleep(tokio::time::Duration::from_secs(1)).await; + sleep(std::time::Duration::from_secs(1)).await; // The `eval` is available in the prelude - and simply takes a block of JS. // Dioxus' eval is interesting since it allows sending messages to and from the JS code using the `await dioxus.recv()` diff --git a/examples/future.rs b/examples/future.rs index 8f54dadb37..f4ddc10468 100644 --- a/examples/future.rs +++ b/examples/future.rs @@ -3,11 +3,11 @@ //! use_future won't return a value, analogous to use_effect. //! If you want to return a value from a future, use use_resource instead. +use async_std::task::sleep; use dioxus::prelude::*; -use std::time::Duration; fn main() { - launch_desktop(app); + launch(app); } fn app() -> Element { @@ -16,7 +16,7 @@ fn app() -> Element { // use_future will run the future use_future(move || async move { loop { - tokio::time::sleep(Duration::from_millis(200)).await; + sleep(std::time::Duration::from_millis(200)).await; count += 1; } }); @@ -24,7 +24,7 @@ fn app() -> Element { // We can also spawn futures from effects, handlers, or other futures use_effect(move || { spawn(async move { - tokio::time::sleep(Duration::from_secs(5)).await; + sleep(std::time::Duration::from_secs(5)).await; count.set(100); }); }); diff --git a/examples/signals.rs b/examples/signals.rs index 511ed3f72c..26db9685c1 100644 --- a/examples/signals.rs +++ b/examples/signals.rs @@ -6,8 +6,8 @@ //! Most signals implement Into>, making ReadOnlySignal a good default type when building new //! library components that don't need to modify their values. +use async_std::task::sleep; use dioxus::prelude::*; -use std::time::Duration; fn main() { launch(app); @@ -39,13 +39,13 @@ fn app() -> Element { if running() { count += 1; } - tokio::time::sleep(Duration::from_millis(400)).await; + sleep(std::time::Duration::from_millis(400)).await; } }); // use_resource will spawn a future that resolves to a value let _slow_count = use_resource(move || async move { - tokio::time::sleep(Duration::from_millis(200)).await; + sleep(std::time::Duration::from_millis(200)).await; count() * 2 }); diff --git a/examples/streams.rs b/examples/streams.rs index 5e62c35aa6..6155cb35f9 100644 --- a/examples/streams.rs +++ b/examples/streams.rs @@ -1,11 +1,11 @@ //! Handle async streams using use_future and awaiting the next value. +use async_std::task::sleep; use dioxus::prelude::*; use futures_util::{future, stream, Stream, StreamExt}; -use std::time::Duration; fn main() { - launch_desktop(app); + launch(app); } fn app() -> Element { @@ -30,7 +30,7 @@ fn app() -> Element { fn some_stream() -> std::pin::Pin>> { Box::pin( stream::once(future::ready(0)).chain(stream::iter(1..).then(|second| async move { - tokio::time::sleep(Duration::from_secs(1)).await; + sleep(std::time::Duration::from_secs(1)).await; second })), )