Use of async_std::task::sleep instead of tokio::time::sleep in examples (#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 <evanalmloff@gmail.com>
This commit is contained in:
ASR-ASU 2024-09-03 17:16:37 +02:00 committed by GitHub
parent ffb5c98449
commit 1dfa1b5e7f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 47 additions and 26 deletions

12
Cargo.lock generated
View file

@ -2603,6 +2603,7 @@ dependencies = [
name = "dioxus-examples" name = "dioxus-examples"
version = "0.6.0-alpha.2" version = "0.6.0-alpha.2"
dependencies = [ dependencies = [
"async-std",
"base64 0.21.7", "base64 0.21.7",
"ciborium", "ciborium",
"dioxus", "dioxus",
@ -2619,6 +2620,7 @@ dependencies = [
"serde_json", "serde_json",
"tokio", "tokio",
"tracing-subscriber", "tracing-subscriber",
"web-time",
] ]
[[package]] [[package]]
@ -11945,6 +11947,16 @@ dependencies = [
"wasm-bindgen", "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]] [[package]]
name = "webbrowser" name = "webbrowser"
version = "0.8.15" version = "0.8.15"

View file

@ -202,6 +202,8 @@ serde = { version = "1.0.136", features = ["derive"] }
serde_json = "1.0.79" serde_json = "1.0.79"
rand = { version = "0.8.4", features = ["small_rng"] } rand = { version = "0.8.4", features = ["small_rng"] }
form_urlencoded = "1.2.0" form_urlencoded = "1.2.0"
async-std = "1.12.0"
web-time = "1.1.0"
[target.'cfg(target_arch = "wasm32")'.dev-dependencies] [target.'cfg(target_arch = "wasm32")'.dev-dependencies]
getrandom = { version = "0.2.12", features = ["js"] } getrandom = { version = "0.2.12", features = ["js"] }
@ -281,7 +283,6 @@ doc-scrape-examples = true
[[example]] [[example]]
name = "clock" name = "clock"
required-features = ["desktop"]
doc-scrape-examples = true doc-scrape-examples = true
[[example]] [[example]]
@ -316,7 +317,6 @@ doc-scrape-examples = true
[[example]] [[example]]
name = "future" name = "future"
required-features = ["desktop"]
doc-scrape-examples = true doc-scrape-examples = true
[[example]] [[example]]
@ -351,7 +351,6 @@ doc-scrape-examples = true
[[example]] [[example]]
name = "streams" name = "streams"
required-features = ["desktop"]
doc-scrape-examples = true doc-scrape-examples = true
[[example]] [[example]]
@ -368,3 +367,11 @@ doc-scrape-examples = true
name = "window_zoom" name = "window_zoom"
required-features = ["desktop"] required-features = ["desktop"]
doc-scrape-examples = true doc-scrape-examples = true
[[example]]
name = "control_focus"
doc-scrape-examples = true
[[example]]
name = "eval"
doc-scrape-examples = true

View file

@ -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. //! 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::*; use dioxus::prelude::*;
fn main() { fn main() {
launch_desktop(app); launch(app);
} }
fn app() -> Element { fn app() -> Element {
@ -48,7 +49,7 @@ fn Child(count: Signal<i32>) -> Element {
use_future(move || async move { use_future(move || async move {
loop { loop {
tokio::time::sleep(std::time::Duration::from_millis(100)).await; sleep(std::time::Duration::from_millis(100)).await;
println!("Child") println!("Child")
} }
}); });

View file

@ -1,14 +1,14 @@
//! A simple little clock that updates the time every few milliseconds. //! 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 dioxus::prelude::*;
use tokio::time::sleep;
use web_time::Instant;
const STYLE: &str = asset!("./examples/assets/clock.css"); const STYLE: &str = asset!("./examples/assets/clock.css");
fn main() { fn main() {
launch_desktop(app); launch(app);
} }
fn app() -> Element { fn app() -> Element {
@ -16,12 +16,10 @@ fn app() -> Element {
use_future(move || async move { use_future(move || async move {
// Save our initial timea // Save our initial timea
let start = std::time::Instant::now(); let start = Instant::now();
loop { loop {
// In lieu of an interval, we just sleep until the next update sleep(std::time::Duration::from_millis(27)).await;
let now = tokio::time::Instant::now();
tokio::time::sleep_until(now + std::time::Duration::from_millis(27)).await;
// Update the time, using a more precise approach of getting the duration since we started the timer // 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); millis.set(start.elapsed().as_millis() as i64);

View file

@ -3,13 +3,15 @@
//! This example shows how to manage focus in a Dioxus application. We implement a "roulette" that focuses on each input //! 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. //! in the grid every few milliseconds until the user interacts with the inputs.
use dioxus::prelude::*;
use std::rc::Rc; use std::rc::Rc;
use async_std::task::sleep;
use dioxus::prelude::*;
const STYLE: &str = asset!("./examples/assets/roulette.css"); const STYLE: &str = asset!("./examples/assets/roulette.css");
fn main() { fn main() {
launch_desktop(app); launch(app);
} }
fn app() -> Element { fn app() -> Element {
@ -21,7 +23,7 @@ fn app() -> Element {
let mut focused = 0; let mut focused = 0;
loop { loop {
tokio::time::sleep(std::time::Duration::from_millis(50)).await; sleep(std::time::Duration::from_millis(50)).await;
if !running() { if !running() {
continue; continue;

View file

@ -3,6 +3,7 @@
//! Eval will only work with renderers that support javascript - so currently only the web and desktop/mobile renderers //! 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`. //! that use a webview. Native renderers will throw "unsupported" errors when calling `eval`.
use async_std::task::sleep;
use dioxus::prelude::*; use dioxus::prelude::*;
fn main() { fn main() {
@ -13,7 +14,7 @@ fn app() -> Element {
// Create a future that will resolve once the javascript has been successfully executed. // Create a future that will resolve once the javascript has been successfully executed.
let future = use_resource(move || async move { let future = use_resource(move || async move {
// Wait a little bit just to give the appearance of a loading screen // 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. // 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()` // Dioxus' eval is interesting since it allows sending messages to and from the JS code using the `await dioxus.recv()`

View file

@ -3,11 +3,11 @@
//! use_future won't return a value, analogous to use_effect. //! 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. //! If you want to return a value from a future, use use_resource instead.
use async_std::task::sleep;
use dioxus::prelude::*; use dioxus::prelude::*;
use std::time::Duration;
fn main() { fn main() {
launch_desktop(app); launch(app);
} }
fn app() -> Element { fn app() -> Element {
@ -16,7 +16,7 @@ fn app() -> Element {
// use_future will run the future // use_future will run the future
use_future(move || async move { use_future(move || async move {
loop { loop {
tokio::time::sleep(Duration::from_millis(200)).await; sleep(std::time::Duration::from_millis(200)).await;
count += 1; count += 1;
} }
}); });
@ -24,7 +24,7 @@ fn app() -> Element {
// We can also spawn futures from effects, handlers, or other futures // We can also spawn futures from effects, handlers, or other futures
use_effect(move || { use_effect(move || {
spawn(async move { spawn(async move {
tokio::time::sleep(Duration::from_secs(5)).await; sleep(std::time::Duration::from_secs(5)).await;
count.set(100); count.set(100);
}); });
}); });

View file

@ -6,8 +6,8 @@
//! Most signals implement Into<ReadOnlySignal<T>>, making ReadOnlySignal a good default type when building new //! 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. //! library components that don't need to modify their values.
use async_std::task::sleep;
use dioxus::prelude::*; use dioxus::prelude::*;
use std::time::Duration;
fn main() { fn main() {
launch(app); launch(app);
@ -39,13 +39,13 @@ fn app() -> Element {
if running() { if running() {
count += 1; 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 // use_resource will spawn a future that resolves to a value
let _slow_count = use_resource(move || async move { 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 count() * 2
}); });

View file

@ -1,11 +1,11 @@
//! Handle async streams using use_future and awaiting the next value. //! Handle async streams using use_future and awaiting the next value.
use async_std::task::sleep;
use dioxus::prelude::*; use dioxus::prelude::*;
use futures_util::{future, stream, Stream, StreamExt}; use futures_util::{future, stream, Stream, StreamExt};
use std::time::Duration;
fn main() { fn main() {
launch_desktop(app); launch(app);
} }
fn app() -> Element { fn app() -> Element {
@ -30,7 +30,7 @@ fn app() -> Element {
fn some_stream() -> std::pin::Pin<Box<dyn Stream<Item = i32>>> { fn some_stream() -> std::pin::Pin<Box<dyn Stream<Item = i32>>> {
Box::pin( Box::pin(
stream::once(future::ready(0)).chain(stream::iter(1..).then(|second| async move { 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 second
})), })),
) )