Use of async_std::task::sleep instead of tokio::time::sleep in ex…

…amples (DioxusLabs#2912)

* Use of async_std::task::sleep instead of tokio::time::sleep

* Make the clock example run on wasm

* Add control_focus and eval examples to Cargo.toml

* Use web-time on desktop; It just falls back to std on non-wasm platforms

---------

Co-authored-by: Evan Almloff <[email protected]>

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

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<i32>) -> 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")
         }
     });

examples/clock.rs

@@ -1,27 +1,25 @@
 //! 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 {
     let mut millis = use_signal(|| 0);
 
     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);

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;

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()`

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,15 +16,15 @@ 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;
         }
     });
 
     // 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);
         });
     });

examples/signals.rs

@@ -6,8 +6,8 @@
 //! Most signals implement Into<ReadOnlySignal<T>>, 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
     });
 

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<dyn Stream<Item = i32>>> {
     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
         })),
     )