feat: use_channel (#3)

* feat: use_channel

* improvements

* simplified

* clean up

* clean up

* clean up

Author: marc2332

.vscode/settings.json

@@ -1,4 +1,7 @@
 {
-    "rust-analyzer.cargo.features": ["geolocation"],
+    "rust-analyzer.cargo.features": [
+        "geolocation",
+        "use_channel"
+    ],
     //"rust-analyzer.check.allTargets": true,
 }

Cargo.toml

@@ -21,6 +21,7 @@ clipboard = ["dep:clipboard"]
 notifications = ["dep:notify-rust"]
 geolocation = ["dep:dioxus", "dep:windows", "dep:futures-util", "dep:futures"]
 
+use_channel = ["dep:async-broadcast", "dep:uuid", "dep:dioxus"]
 use_preferred_color_scheme = ["dep:dioxus", "dep:web-sys", "dep:wasm-bindgen", "dep:wasm-bindgen-futures"]
 use_rw = ["dep:dioxus"]
 
@@ -30,6 +31,8 @@ dioxus = { version = "0.3", optional = true }
 cfg-if = "1.0.0"
 futures-util = {version = "0.3.28", optional = true }
 
+uuid = { version = "1.3.2", features = ["v4"], optional = true }
+async-broadcast = { version = "0.5.1", optional = true }
 clipboard = { version = "0.5.0", optional = true }
 notify-rust = { version = "4.8.0", optional = true }
 futures = { version = "0.3.28", features = ["std"], optional = true }
@@ -42,6 +45,7 @@ web-sys = { version = "0.3.60", features = ["Window", "MediaQueryList", "Navigat
 wasm-bindgen = { version = "0.2.85", optional = true }
 wasm-bindgen-futures = { version = "0.4.35", optional = true}
 js-sys = "0.3.62"
+uuid = {  version = "1.3.2", features = ["v4", "js"]}
 
 [package.metadata.docs.rs]
 all-features = true

examples/channel/Cargo.toml

@@ -0,0 +1,15 @@
+[package]
+name = "channel"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+dioxus-std = { path="../../", features = ["use_channel"] }
+dioxus = "0.3"
+dioxus-web = "0.3"
+
+log = "0.4.6"
+
+# WebAssembly Debug
+wasm-logger = "0.2.0"
+console_error_panic_hook = "0.1.7"

examples/channel/Dioxus.toml

@@ -0,0 +1,42 @@
+[application]
+
+# App (Project) Name
+name = "channel"
+
+# Dioxus App Default Platform
+# desktop, web, mobile, ssr
+default_platform = "web"
+
+# `build` & `serve` dist path
+out_dir = "dist"
+
+# resource (public) file folder
+asset_dir = "public"
+
+[web.app]
+
+# HTML title tag content
+title = "dioxus | ⛺"
+
+[web.watcher]
+
+# when watcher trigger, regenerate the `index.html`
+reload_html = true
+
+# which files or dirs will be watcher monitoring
+watch_path = ["src", "public"]
+
+# include `assets` in web platform
+[web.resource]
+
+# CSS style file
+style = []
+
+# Javascript code file
+script = []
+
+[web.resource.dev]
+
+# Javascript code file
+# serve: [dev-server] only
+script = []

examples/channel/README.md

@@ -0,0 +1,7 @@
+# use_channel
+
+Learn how to use `use_channel`.
+
+Run:
+
+```dioxus serve```

examples/channel/public/favicon.ico

@@ -0,0 +1,35 @@
+use dioxus::prelude::*;
+use dioxus_std::hooks::{use_channel, use_listen_channel};
+
+fn main() {
+    // init debug tool for WebAssembly
+    wasm_logger::init(wasm_logger::Config::default());
+    console_error_panic_hook::set_once();
+
+    dioxus_web::launch(app);
+}
+
+fn app(cx: Scope) -> Element {
+    let channel = use_channel::<String>(cx, 5);
+
+    use_listen_channel(cx, &channel, move |message| async move {
+        match message {
+            Ok(value) => log::info!("Incoming message: {value}"),
+            Err(err) => log::info!("Error: {err:?}"),
+        }
+    });
+
+    let send = move |_: MouseEvent| {
+        to_owned![channel];
+        async move {
+            channel.send("Hello").await.ok();
+        }
+    };
+
+    render!(
+        button {
+            onclick: send,
+            "Send hello"
+        }
+    )
+}

examples/channel/src/main.rs

@@ -19,3 +19,10 @@ cfg_if::cfg_if! {
         pub use use_rw::*;
     }
 }
+
+cfg_if::cfg_if! {
+    if #[cfg(feature = "use_channel")] {
+        pub mod use_channel;
+        pub use use_channel::*;
+    }
+}

src/hooks/mod.rs

@@ -0,0 +1,79 @@
+use std::future::Future;
+
+use async_broadcast::{broadcast, InactiveReceiver, Receiver, RecvError, SendError, Sender};
+use dioxus::prelude::{to_owned, use_effect, ScopeState};
+use uuid::Uuid;
+
+pub type UseListenChannelError = RecvError;
+
+/// Send and listen for messages between multiple components.
+#[derive(Debug, Clone)]
+pub struct UseChannel<MessageType: Clone> {
+    id: Uuid,
+    sender: Sender<MessageType>,
+    inactive_receiver: InactiveReceiver<MessageType>,
+}
+
+impl<T: Clone> PartialEq for UseChannel<T> {
+    fn eq(&self, other: &Self) -> bool {
+        self.id == other.id
+    }
+}
+
+impl<MessageType: Clone> UseChannel<MessageType> {
+    /// Sends a message to all listeners of the channel.
+    pub async fn send(&self, msg: impl Into<MessageType>) -> Result<(), SendError<MessageType>> {
+        self.sender.broadcast(msg.into()).await.map(|_| ())
+    }
+
+    /// Create a receiver for the channel.
+    /// You probably want to use [`use_listen_channel`].
+    pub fn receiver(&mut self) -> Receiver<MessageType> {
+        self.inactive_receiver.clone().activate()
+    }
+}
+
+/// Send and listen for messages between multiple components.
+pub fn use_channel<MessageType: Clone + 'static>(
+    cx: &ScopeState,
+    size: usize,
+) -> UseChannel<MessageType> {
+    let id = cx.use_hook(Uuid::new_v4);
+    let (sender, inactive_receiver) = cx.use_hook(|| {
+        let (sender, receiver) = broadcast::<MessageType>(size);
+
+        (sender, receiver.deactivate())
+    });
+
+    UseChannel {
+        id: *id,
+        sender: sender.clone(),
+        inactive_receiver: inactive_receiver.clone(),
+    }
+}
+
+/// Create a messages listener for the given channel.
+pub fn use_listen_channel<MessageType: Clone + 'static, Handler>(
+    cx: &ScopeState,
+    channel: &UseChannel<MessageType>,
+    action: impl Fn(Result<MessageType, UseListenChannelError>) -> Handler + 'static,
+) where
+    Handler: Future<Output = ()> + 'static,
+{
+    use_effect(cx, (channel,), move |(channel,)| {
+        to_owned![channel];
+        async move {
+            let action = Box::new(action);
+            let mut receiver = channel.receiver();
+
+            loop {
+                let message = receiver.recv().await;
+                let message_err = message.clone().err();
+                action(message).await;
+                if message_err == Some(UseListenChannelError::Closed) {
+                    break;
+                }
+            }
+        }
+    });
+}