yewstack · ranile · Dec 29, 2021 · Dec 22, 2021 · Dec 22, 2021 · Dec 22, 2021
diff --git a/Cargo.toml b/Cargo.toml
@@ -19,14 +19,13 @@ members = [
   "examples/js_callback",
   "examples/keyed_list",
   "examples/mount_point",
-  "examples/multi_thread",
+  "examples/agents",
   "examples/nested_list",
   "examples/node_refs",
   "examples/password_strength",
   "examples/portals",
-  "examples/pub_sub",
+  "examples/contexts",
   "examples/router",
-  "examples/store",
   "examples/timer",
   "examples/todomvc",
   "examples/two_apps",

diff --git a/examples/multi_thread/Cargo.toml → examples/agents/Cargo.toml b/examples/multi_thread/Cargo.toml → examples/agents/Cargo.toml
@@ -1,5 +1,5 @@
 [package]
-name = "multi_thread"
+name = "agents"
 version = "0.1.0"
 authors = ["Denis Kolodin <[email protected]>"]
 edition = "2018"

diff --git a/examples/agents/README.md b/examples/agents/README.md
@@ -0,0 +1,18 @@
+# Warning
+
+The agents example is a conceptual WIP and is currently blocked on [a future Trunk feature](https://github.com/thedodd/trunk/issues/46)
+
+There is an alternate agent example [here](https://github.com/yewstack/yew/tree/master/examples/web_worker_fib).
+
+
+# Multi-Thread Example
+
+[![Demo](https://img.shields.io/website?label=demo&url=https%3A%2F%2Fexamples.yew.rs%2Fagents)](https://examples.yew.rs/agents)
+
+
+## Concepts
+
+Uses an [Agent] that runs in a [Web Worker].
+
+[agent]: https://yew.rs/docs/concepts/agents/
+[web worker]: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers
diff --git a/examples/multi_thread/index.html → examples/agents/index.html b/examples/multi_thread/index.html → examples/agents/index.html
diff --git a/examples/multi_thread/src/bin/app.rs → examples/agents/src/bin/app.rs b/examples/multi_thread/src/bin/app.rs → examples/agents/src/bin/app.rs
@@ -1,4 +1,4 @@
 fn main() {
     wasm_logger::init(wasm_logger::Config::default());
-    yew::start_app::<multi_thread::Model>();
+    yew::start_app::<agents::Model>();
 }
diff --git a/examples/multi_thread/src/bin/worker.rs → examples/agents/src/bin/worker.rs b/examples/multi_thread/src/bin/worker.rs → examples/agents/src/bin/worker.rs
@@ -1,4 +1,4 @@
-use multi_thread::native_worker::Worker;
+use agents::native_worker::Worker;
 use yew_agent::Threaded;
 
 fn main() {

diff --git a/examples/agents/src/lib.rs b/examples/agents/src/lib.rs
@@ -0,0 +1,49 @@
+pub mod native_worker;
+
+use yew::{html, Component, Context, Html};
+use yew_agent::{Bridge, Bridged};
+
+pub enum Msg {
+    SendToWorker,
+    DataReceived,
+}
+
+pub struct Model {
+    worker: Box<dyn Bridge<native_worker::Worker>>,
+}
+
+impl Component for Model {
+    type Message = Msg;
+    type Properties = ();
+
+    fn create(ctx: &Context<Self>) -> Self {
+        let link = ctx.link();
+        let callback = link.callback(|_| Msg::DataReceived);
+        let worker = native_worker::Worker::bridge(callback);
+
+        Self { worker }
+    }
+
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            Msg::SendToWorker => {
+                self.worker.send(native_worker::Request::GetDataFromServer);
+                false
+            }
+            Msg::DataReceived => {
+                log::info!("DataReceived");
+                false
+            }
+        }
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        html! {
+            <div>
+                <nav class="menu">
+                    <button onclick={ctx.link().callback(|_| Msg::SendToWorker)}>{ "Send to Thread" }</button>
+                </nav>
+            </div>
+        }
+    }
+}
diff --git a/examples/multi_thread/src/native_worker.rs → examples/agents/src/native_worker.rs b/examples/multi_thread/src/native_worker.rs → examples/agents/src/native_worker.rs
diff --git a/examples/pub_sub/Cargo.toml → examples/contexts/Cargo.toml b/examples/pub_sub/Cargo.toml → examples/contexts/Cargo.toml
@@ -1,5 +1,5 @@
 [package]
-name = "pub_sub"
+name = "contexts"
 version = "0.1.0"
 edition = "2018"
 license = "MIT OR Apache-2.0"

diff --git a/examples/contexts/README.md b/examples/contexts/README.md
@@ -0,0 +1,10 @@
+# Context Example
+
+[![Demo](https://img.shields.io/website?label=demo&url=https%3A%2F%2Fexamples.yew.rs%2Fcontexts)](https://examples.yew.rs/contexts)
+
+This is currently a technical demonstration of Context API.
+
+## Concepts
+
+The example has two components, which communicates through a context
+as opposed to the traditional method using component links.
diff --git a/examples/pub_sub/index.html → examples/contexts/index.html b/examples/pub_sub/index.html → examples/contexts/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>Yew • Pub Sub</title>
+    <title>Yew • Context</title>
   </head>
 
   <body></body>

diff --git a/examples/contexts/src/main.rs b/examples/contexts/src/main.rs
@@ -0,0 +1,23 @@
+mod msg_ctx;
+mod producer;
+mod subscriber;
+
+use producer::Producer;
+use subscriber::Subscriber;
+use yew::prelude::*;
+
+use msg_ctx::MessageProvider;
+
+#[function_component]
+pub fn Model() -> Html {
+    html! {
+        <MessageProvider>
+            <Producer />
+            <Subscriber />
+        </MessageProvider>
+    }
+}
+
+fn main() {
+    yew::start_app::<Model>();
+}
diff --git a/examples/contexts/src/msg_ctx.rs b/examples/contexts/src/msg_ctx.rs
@@ -0,0 +1,37 @@
+use std::rc::Rc;
+
+use yew::prelude::*;
+
+#[derive(Debug, PartialEq, Clone)]
+pub struct Message {
+    pub inner: String,
+}
+
+impl Reducible for Message {
+    type Action = String;
+
+    fn reduce(self: Rc<Self>, action: Self::Action) -> Rc<Self> {
+        Message { inner: action }.into()
+    }
+}
+
+pub type MessageContext = UseReducerHandle<Message>;
+
+#[derive(Properties, Debug, PartialEq)]
+pub struct MessageProviderProps {
+    #[prop_or_default]
+    pub children: Children,
+}
+
+#[function_component]
+pub fn MessageProvider(props: &MessageProviderProps) -> Html {
+    let msg = use_reducer(|| Message {
+        inner: "No message yet.".to_string(),
+    });
+
+    html! {
+        <ContextProvider<MessageContext> context={msg}>
+            {props.children.clone()}
+        </ContextProvider<MessageContext>>
+    }
+}
diff --git a/examples/contexts/src/producer.rs b/examples/contexts/src/producer.rs
@@ -0,0 +1,16 @@
+use yew::prelude::*;
+
+use super::msg_ctx::MessageContext;
+
+#[function_component]
+pub fn Producer() -> Html {
+    let msg_ctx = use_context::<MessageContext>().unwrap();
+
+    let onclick = Callback::from(move |_| msg_ctx.dispatch("Message Received.".to_string()));
+
+    html! {
+        <button {onclick}>
+            {"PRESS ME"}
+        </button>
+    }
+}
diff --git a/examples/contexts/src/subscriber.rs b/examples/contexts/src/subscriber.rs
@@ -0,0 +1,14 @@
+use super::msg_ctx::MessageContext;
+
+use yew::prelude::*;
+
+#[function_component]
+pub fn Subscriber() -> Html {
+    let msg_ctx = use_context::<MessageContext>().unwrap();
+
+    let message = msg_ctx.inner.to_owned();
+
+    html! {
+        <h1>{ message }</h1>
+    }
+}
diff --git a/examples/multi_thread/README.md b/examples/multi_thread/README.md
diff --git a/examples/multi_thread/src/context.rs b/examples/multi_thread/src/context.rs
diff --git a/examples/multi_thread/src/job.rs b/examples/multi_thread/src/job.rs