feat: add WASM clipboard support with async/sync APIs

.gitignore

@@ -1,2 +1,2 @@
-/target
+**/target/
 Cargo.lock

Cargo.toml

@@ -11,9 +11,20 @@ repository = "https://github.com/dioxus-community/dioxus-clipboard"
 keywords = ["dioxus"]
 categories = ["gui"]
 
+[features]
+default = ["copypasta"]
+wasm = ["web-sys", "wasm-bindgen", "js-sys", "wasm-bindgen-futures"]
+async = []
+
 [dependencies]
 dioxus = { version = "0.7.0-alpha.3", default-features = false, features = ["macro", "hooks", "signals"] }
-copypasta = "0.10"
+copypasta = { version = "0.10", optional = true }
+
+# WASM dependencies
+web-sys = { version = "0.3", optional = true, features = ["Clipboard", "Navigator", "Window"] }
+wasm-bindgen = { version = "0.2", optional = true }
+js-sys = { version = "0.3", optional = true }  
+wasm-bindgen-futures = { version = "0.4", optional = true }
 
 [dev-dependencies]
 dioxus = { version = "0.7.0-alpha.3", features = ["desktop"]}

README.md

@@ -8,6 +8,4 @@ Clipboard integration for [Dioxus 🧬](https://dioxuslabs.com/).
 
 - **Dioxus v0.7** 🧬
 - Native renderers ([desktop](https://dioxuslabs.com/learn/0.5/getting_started/desktop) and [freya](https://github.com/marc2332/freya))
-
-### Not supported
-- Web (See https://github.com/dioxus-community/dioxus-clipboard/issues/3)
+- Web

examples/wasm_async/Cargo.toml

@@ -0,0 +1,18 @@
+[package]
+name = "wasm-async-example"
+version = "0.1.0"
+edition = "2021"
+publish = false
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+dioxus = { version = "0.7.0-alpha.3", features = ["fullstack"] }
+dioxus-clipboard = { path = "../..", features = ["wasm", "async"] }
+serde = "1.0"
+reqwest = "0.12"
+
+[features]
+default = []
+server = ["dioxus/server"]
+web = ["dioxus/web"]

examples/wasm_async/assets/hello.css

@@ -0,0 +1,3 @@
+body {
+    background-color: rgb(108, 104, 104);
+}

examples/wasm_async/src/main.rs

@@ -0,0 +1,87 @@
+//! WASM Async Clipboard Example
+//!
+//! Tests the async clipboard API with wasm + async features
+//!
+//! Run with:
+//!
+//! ```sh
+//! dx serve --web
+//! ```
+
+#![allow(non_snake_case, unused)]
+use dioxus::logger::tracing;
+use dioxus::prelude::*;
+use dioxus_clipboard::prelude::*;
+use serde::{Deserialize, Serialize};
+
+fn app() -> Element {
+    let mut count = use_signal(|| 0);
+    let mut text = use_signal(|| "...".to_string());
+    let mut clipboard = use_clipboard();
+    let server_future = use_server_future(get_server_data)?;
+
+    rsx! {
+        document::Link { href: asset!("/assets/hello.css"), rel: "stylesheet" }
+        h1 { "High-Five counter: {count}" }
+        button { onclick: move |_| count += 1, "Up high!" }
+        button { onclick: move |_| count -= 1, "Down low!" }
+        button {
+            onclick: move |_| async move {
+                let data = get_server_data().await?;
+                println!("Client received: {}", data);
+                text.set(data.clone());
+                post_server_data(data).await?;
+                Ok(())
+            },
+            "Run a server function!"
+        }
+        "Server said: {text}"
+
+        // Async clipboard test
+        button {
+            onclick: move |_| async move {
+                let counter_text = format!("Counter: {}", count());
+                match clipboard.set(counter_text).await {
+                    Ok(()) => {
+                        tracing::info!("✅ Async copied to clipboard!");
+                    }
+                    Err(e) => {
+                        tracing::error!("❌ Async clipboard failed: {:?}", e);
+                    }
+                }
+            },
+            "Copy Counter to Clipboard (Async)"
+        }
+
+        button {
+            onclick: move |_| async move {
+                match clipboard.get().await {
+                    Ok(content) => {
+                        tracing::info!("✅ Async read from clipboard: {}", content);
+                        text.set(format!("Clipboard: {}", content));
+                    }
+                    Err(e) => {
+                        tracing::error!("❌ Async clipboard read failed: {:?}", e);
+                    }
+                }
+            },
+            "Read from Clipboard (Async)"
+        }
+    }
+}
+
+#[server]
+async fn post_server_data(data: String) -> ServerFnResult {
+    println!("Server received: {}", data);
+
+    Ok(())
+}
+
+#[server]
+async fn get_server_data() -> ServerFnResult<String> {
+    Ok(reqwest::get("https://httpbin.org/ip").await?.text().await?)
+}
+
+fn main() {
+    dioxus::launch(app);
+}

examples/wasm_sync/Cargo.toml

@@ -0,0 +1,18 @@
+[package]
+name = "wasm-sync-example"
+version = "0.1.0"
+edition = "2021"
+publish = false
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+dioxus = { version = "0.7.0-alpha.3", features = ["fullstack"] }
+dioxus-clipboard = { path = "../..", features = ["wasm"] }
+serde = "1.0"
+reqwest = "0.12"
+
+[features]
+default = []
+server = ["dioxus/server"]
+web = ["dioxus/web"]

examples/wasm_sync/assets/hello.css

@@ -0,0 +1,3 @@
+body {
+    background-color: rgb(108, 104, 104);
+}

examples/wasm_sync/src/main.rs

@@ -0,0 +1,83 @@
+//! Run with:
+//!
+//! ```sh
+//! dx serve --web
+//! ```
+
+#![allow(non_snake_case, unused)]
+use dioxus::logger::tracing;
+use dioxus::prelude::*;
+use dioxus_clipboard::prelude::*;
+use serde::{Deserialize, Serialize};
+
+fn app() -> Element {
+    let mut count = use_signal(|| 0);
+    let mut text = use_signal(|| "...".to_string());
+    let mut clipboard = use_clipboard();
+    let server_future = use_server_future(get_server_data)?;
+
+    rsx! {
+        document::Link { href: asset!("/assets/hello.css"), rel: "stylesheet" }
+        h1 { "High-Five counter: {count}" }
+        button { onclick: move |_| count += 1, "Up high!" }
+        button { onclick: move |_| count -= 1, "Down low!" }
+        button {
+            onclick: move |_| async move {
+                let data = get_server_data().await?;
+                println!("Client received: {}", data);
+                text.set(data.clone());
+                post_server_data(data).await?;
+                Ok(())
+            },
+            "Run a server function!"
+        }
+        "Server said: {text}"
+
+        // Simple clipboard test
+        button {
+            onclick: move |_| {
+                let counter_text = format!("Counter: {}", count());
+                match clipboard.set(counter_text) {
+                    Ok(()) => {
+                        tracing::info!("✅ Copied to clipboard!");
+                    }
+                    Err(e) => {
+                        tracing::error!("❌ Clipboard failed: {:?}", e);
+                    }
+                }
+            },
+            "Copy Counter to Clipboard"
+        }
+
+        button {
+            onclick: move |_| {
+                match clipboard.get() {
+                    Ok(content) => {
+                        tracing::info!("✅ Read from clipboard: {}", content);
+                        text.set(format!("Clipboard: {}", content));
+                    }
+                    Err(e) => {
+                        tracing::error!("❌ Clipboard read failed: {:?}", e);
+                    }
+                }
+            },
+            "Read from Clipboard"
+        }
+    }
+}
+
+#[server]
+async fn post_server_data(data: String) -> ServerFnResult {
+    println!("Server received: {}", data);
+
+    Ok(())
+}
+
+#[server]
+async fn get_server_data() -> ServerFnResult<String> {
+    Ok(reqwest::get("https://httpbin.org/ip").await?.text().await?)
+}
+
+fn main() {
+    dioxus::launch(app);
+}