add agent but not working(yet)

Cargo.lock

@@ -391,6 +391,7 @@ checksum = "645c6916888f6cb6350d2550b80fb63e734897a8498abe35cfb732b6487804b0"
 dependencies = [
  "futures-channel",
  "futures-core",
+ "futures-executor",
  "futures-io",
  "futures-sink",
  "futures-task",
@@ -413,6 +414,17 @@ version = "0.3.30"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "dfc6580bb841c5a68e9ef15c77ccc837b40a7504914d52e47b8b0e9bbda25a1d"
 
+[[package]]
+name = "futures-executor"
+version = "0.3.30"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a576fc72ae164fca6b9db127eaa9a9dda0d61316034f33a0a0d4eda41f02b01d"
+dependencies = [
+ "futures-core",
+ "futures-task",
+ "futures-util",
+]
+
 [[package]]
 name = "futures-io"
 version = "0.3.30"
@@ -1213,6 +1225,7 @@ dependencies = [
  "anyhow",
  "axum",
  "console-subscriber",
+ "futures",
  "gloo 0.10.0",
  "include_dir",
  "log",
@@ -1226,6 +1239,7 @@ dependencies = [
  "tracing-subscriber",
  "wasm-logger",
  "yew",
+ "yew-agent",
  "yew-router",
 ]
 
@@ -2354,6 +2368,31 @@ dependencies = [
  "yew-macro",
 ]
 
+[[package]]
+name = "yew-agent"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7e27eaca61ea9d0e1a6589dce592283b0e62ced527d8a8b28447957295d588f5"
+dependencies = [
+ "futures",
+ "gloo-worker 0.4.0",
+ "serde",
+ "wasm-bindgen",
+ "yew",
+ "yew-agent-macro",
+]
+
+[[package]]
+name = "yew-agent-macro"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7ad00f6c9436d25c9225ed0fd8eea27e6d2886c1387bf934afdf91e9131b8b77"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.79",
+]
+
 [[package]]
 name = "yew-macro"
 version = "0.21.0"

Cargo.toml

@@ -22,6 +22,8 @@ thiserror = "1"
 yew = { version = "0.21" }
 yew-router = "0.18"
 gloo = "0.10"
+yew-agent = "0.3.0"
+futures = "0.3"
 
 [target.'cfg(not(target_arch = "wasm32"))'.dependencies]
 # server side

index.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link data-trunk rel="rust" data-bin="frontend" data-cargo-features="frontend" />
+    <link data-trunk rel="rust" data-bin="worker" data-type="worker" />
 
     <title>Yew • SSR Router</title>
     <link data-trunk rel="css" href="index.css" />

src/bin/worker.rs

@@ -0,0 +1,7 @@
+use networkd::frontend::worker;
+use yew_agent::Registrable;
+
+fn main() {
+    worker::Echo::registrar().register();
+    worker::Counter::registrar().register();
+}

src/frontend.rs

@@ -1,5 +1,6 @@
 pub mod app;
 pub mod pages;
 pub mod components;
+pub mod worker;
 
 pub use app::*;

src/frontend/pages/counter.rs

@@ -1,16 +1,48 @@
-use yew::{function_component, html, use_state_eq, Callback, Html};
+use std::rc::Rc;
 
+use yew::{function_component, html, use_context, use_state_eq, Callback, Html};
+use yew_agent::{prelude::{use_reactor_bridge, use_reactor_subscription}, reactor::{ReactorEvent, ReactorProvider}};
 
 #[function_component]
-pub fn CounterPage() -> Html {
-    let counter = use_state_eq(|| 1);
-    let counter_handle = counter.clone();
-    let callback = Callback::from(move |_: yew::MouseEvent| {
-        counter_handle.set(*counter_handle + 1);
-    });
+pub fn Counter() -> Html {
+    let count_value = use_state_eq(||None);
+    let counter = use_reactor_subscription::<crate::frontend::worker::Counter>();
+    let callback = {
+        let counter_handle = counter.clone();
+        let count_value = count_value.clone();
+
+        Callback::from(move |_: yew::MouseEvent| {
+            counter_handle.send(());
+
+            let count_default = Rc::new(0);
+            let count_result = **(counter.iter().next().unwrap_or(&count_default));
+            count_value.set(Some(count_result));
+        })
+    };
+
+    let counter_widget = if let Some(value) = *count_value {
+        html! {
+            <h1 class="mx-auto my-auto" onclick={callback}>{format!("{}", value)}</h1>
+        }
+    } else {
+        html! {
+            <h1 class="mx-auto my-auto" onclick={callback}>{"not yet"}</h1>
+        }
+    } ;
+
     html! {
         <div class="w-full h-full flex">{"Counter: "}
-            <h1 class="mx-auto my-auto" onclick={callback}>{format!("{}",*counter)}</h1>
+            {counter_widget}
         </div>
     }
 }
+
+#[function_component]
+pub fn CounterPage() -> Html {
+    
+    html! {
+        <ReactorProvider<crate::frontend::worker::Counter> path="/worker.js">
+            <Counter />
+        </ReactorProvider<crate::frontend::worker::Counter>>
+    }
+}

src/frontend/worker.rs

@@ -0,0 +1,19 @@
+use yew_agent::prelude::*;
+use futures::sink::SinkExt;
+use futures::stream::StreamExt;
+
+#[reactor(Counter)]
+pub async fn counter(mut scope: ReactorScope<(), u64>) {
+    let mut count = 0;
+    while let Some(input) = scope.next().await {
+        count += 1;
+        let _ = scope.send(count+1).await;
+    }
+}
+
+#[reactor(Echo)]
+pub async fn echo(mut scope: ReactorScope<String, String>) {
+    while let Some(input) = scope.next().await {
+        let _ = scope.send(input).await;
+    }
+}