Add an example for reactor agent.

yewstack · Aug 20, 2023 · 1d3f081 · 1d3f081
1 parent dd627aa
commit 1d3f081
Show file tree

Hide file tree

Showing 11 changed files with 182 additions and 9 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/examples/README.md b/examples/README.md
@@ -62,7 +62,8 @@ As an example, check out the TodoMVC example here: <https://examples.yew.rs/todo
 | [timer_functional](timer_functional)                                                      | [F]  | Demonstrates the use of the interval and timeout services using function components                                                 |
 | [todomvc](todomvc)                                                                        | [S]  | Implementation of [TodoMVC](http://todomvc.com/).                                                                                   |
 | [two_apps](two_apps)                                                                      | [S]  | Runs two separate Yew apps which can communicate with each other.                                                                   |
-| [web_worker_fib](web_worker_fib)                                                          | [S]  | Calculate Fibonacci numbers in a web worker thread using [`gloo-worker`](https://docs.rs/gloo-worker/latest/gloo_worker/).          |
+| [web_worker_fib](web_worker_fib)                                                          | [S]  | Calculate Fibonacci numbers in a web worker thread using [`yew-agent`](https://docs.rs/gloo-worker/latest/yew_agent/).              |
+| [web_worker_prime](web_worker_prime)                                                      | [F]  | Calculate Prime numbers in a web worker thread using [`yew-agent`](https://docs.rs/gloo-worker/latest/yew_agent/).                  |
 | [webgl](webgl)                                                                            | [S]  | Controls a [WebGL canvas](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL) from Yew. |
 
 [CT]: ## "Component Type"

diff --git a/examples/web_worker_prime/Cargo.toml b/examples/web_worker_prime/Cargo.toml
@@ -0,0 +1,11 @@
+[package]
+name = "yew-worker-prime"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+yew-agent = { path = "../../packages/yew-agent" }
+yew = { path = "../../packages/yew", features = ["csr"] }
+futures = "0.3.25"
+primes = "0.3.0"
+serde = { version = "1.0.147", features = ["derive"] }
diff --git a/examples/web_worker_prime/README.md b/examples/web_worker_prime/README.md
@@ -0,0 +1,17 @@
+# Web Worker Prime
+
+[![Demo](https://img.shields.io/website?label=demo&url=https%3A%2F%2Fexamples.yew.rs%2Fweb_worker_prime)](https://examples.yew.rs/web_worker_prime)
+
+Calculate primes until stop button is pressed, without blocking the main thread.
+
+## Concepts
+
+The example illustrates how to use reactor agents to offload CPU bound tasks to a worker thread in a Yew application.
+
+## Running
+
+Run this application with the trunk development server:
+
+```bash
+trunk serve --open
+```
diff --git a/examples/web_worker_prime/index.html b/examples/web_worker_prime/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title>Yew • Web Worker Prime</title>
+
+    <link data-trunk rel="rust" href="Cargo.toml" data-bin="app" data-type="main" data-weak-refs />
+    <link data-trunk rel="rust" href="Cargo.toml" data-bin="worker" data-type="worker" data-weak-refs />
+</head>
+
+<body>
+</body>
+
+</html>
diff --git a/examples/web_worker_prime/src/agent.rs b/examples/web_worker_prime/src/agent.rs
@@ -0,0 +1,38 @@
+use std::time::Duration;
+
+use futures::sink::SinkExt;
+use futures::{FutureExt, StreamExt};
+use serde::{Deserialize, Serialize};
+use yew::platform::time::sleep;
+use yew_agent::prelude::*;
+
+#[derive(Debug, PartialEq, Eq, Serialize, Deserialize)]
+pub enum ControlSignal {
+    Start,
+    Stop,
+}
+
+#[reactor]
+pub async fn Prime(mut scope: ReactorScope<ControlSignal, u64>) {
+    while let Some(m) = scope.next().await {
+        if m == ControlSignal::Start {
+            'inner: for i in 1.. {
+                // This is not the most efficient way to calculate prime,
+                // but this example is here to demonstrate how primes can be
+                // sent to the application in an ascending order.
+                if primes::is_prime(i) {
+                    scope.send(i).await.unwrap();
+                }
+
+                futures::select! {
+                    m = scope.next() => {
+                        if m == Some(ControlSignal::Stop) {
+                            break 'inner;
+                        }
+                    },
+                    _ = sleep(Duration::from_millis(100)).fuse() => {},
+                }
+            }
+        }
+    }
+}
diff --git a/examples/web_worker_prime/src/bin/app.rs b/examples/web_worker_prime/src/bin/app.rs
@@ -0,0 +1,3 @@
+fn main() {
+    yew::Renderer::<yew_worker_prime::App>::new().render();
+}
diff --git a/examples/web_worker_prime/src/bin/worker.rs b/examples/web_worker_prime/src/bin/worker.rs
@@ -0,0 +1,6 @@
+use yew_agent::Registrable;
+use yew_worker_prime::agent::Prime;
+
+fn main() {
+    Prime::registrar().register();
+}
diff --git a/examples/web_worker_prime/src/lib.rs b/examples/web_worker_prime/src/lib.rs
@@ -0,0 +1,64 @@
+pub mod agent;
+use agent::{ControlSignal, Prime};
+use yew::prelude::*;
+use yew_agent::reactor::{use_reactor_subscription, ReactorProvider};
+
+#[function_component]
+fn Main() -> Html {
+    let prime_sub = use_reactor_subscription::<Prime>();
+    let started = use_state_eq(|| false);
+    let skip_len = use_state_eq(|| 0);
+
+    let result_s = prime_sub
+        .iter()
+        // Skip results in previous runs.
+        .skip(*skip_len)
+        .fold("".to_string(), |mut output, item| {
+            if !output.is_empty() {
+                output.push_str(", ");
+            }
+
+            output.push_str(&item.to_string());
+
+            output
+        });
+
+    let start_prime_calc = use_callback(
+        (prime_sub.clone(), started.setter(), skip_len.setter()),
+        |_input, (prime_sub, started_setter, skip_len)| {
+            skip_len.set(prime_sub.len());
+            prime_sub.send(ControlSignal::Start);
+            started_setter.set(true);
+        },
+    );
+
+    let stop_prime_calc = use_callback(
+        (prime_sub, started.setter()),
+        |_input, (prime_sub, started_setter)| {
+            prime_sub.send(ControlSignal::Stop);
+            started_setter.set(false);
+        },
+    );
+
+    html! {
+        <>
+            <h1>{"Find Prime"}</h1>
+            <p>{"This page demonstrates how to calculate prime in a web worker."}</p>
+            if *started {
+                <button onclick={stop_prime_calc}>{"Stop"}</button>
+            } else {
+                <button onclick={start_prime_calc}>{"Start"}</button>
+            }
+            <div id="result">{result_s}</div>
+        </>
+    }
+}
+
+#[function_component]
+pub fn App() -> Html {
+    html! {
+        <ReactorProvider<Prime> path="/worker.js">
+            <Main />
+        </ReactorProvider<Prime>>
+    }
+}
diff --git a/packages/yew-agent/src/lib.rs b/packages/yew-agent/src/lib.rs
@@ -56,11 +56,12 @@
 //! Similar to bridges, a subscription produces a handle to send inputs to agents. However, instead
 //! of notifying the receiver with a callback, it collect all outputs into a slice.
 //!
-//! #### Task
+//! #### Oneshot
 //!
-//! See: [`use_task`](task::use_task)
+//! See: [`use_oneshot_bridge`](oneshot::use_oneshot_bridge)
 //!
-//! Unlike other agents, tasks provides a `use_task` hook to execute tasks on demand.
+//! Unlike other agents, oneshot bridges provide a `use_oneshot_bridge` hook to execute oneshot
+//! agents on demand.
 
 #![deny(
     clippy::all,
@@ -99,13 +100,13 @@ pub mod prelude {
     pub use crate::oneshot::{oneshot, use_oneshot_bridge, UseOneshotBridgeHandle};
     pub use crate::reach::Reach;
     pub use crate::reactor::{
-        reactor, use_reactor_bridge, use_reactor_subscription, ReactorEvent,
+        reactor, use_reactor_bridge, use_reactor_subscription, ReactorEvent, ReactorScope,
         UseReactorBridgeHandle, UseReactorSubscriptionHandle,
     };
     pub use crate::scope_ext::{AgentScopeExt, ReactorBridgeHandle, WorkerBridgeHandle};
     pub use crate::worker::{
         use_worker_bridge, use_worker_subscription, UseWorkerBridgeHandle,
-        UseWorkerSubscriptionHandle,
+        UseWorkerSubscriptionHandle, WorkerScope,
     };
     pub use crate::{Registrable, Spawnable};
 }
diff --git a/packages/yew-agent/src/scope_ext.rs b/packages/yew-agent/src/scope_ext.rs
@@ -84,8 +84,8 @@ pub trait AgentScopeExt {
         R: Reactor + 'static,
         <R::Scope as ReactorScoped>::Output: 'static;
 
-    /// Runs a task in a Task Agent.
-    fn run_task<T>(&self, input: T::Input, callback: Callback<T::Output>)
+    /// Runs an oneshot in an Oneshot Agent.
+    fn run_oneshot<T>(&self, input: T::Input, callback: Callback<T::Output>)
     where
         T: Oneshot + 'static;
 }
@@ -132,7 +132,7 @@ where
         ReactorBridgeHandle { tx }
     }
 
-    fn run_task<T>(&self, input: T::Input, callback: Callback<T::Output>)
+    fn run_oneshot<T>(&self, input: T::Input, callback: Callback<T::Output>)
     where
         T: Oneshot + 'static,
     {