Implement webview IPC support (#51)

* Add IPC support

* Prepare 0.0.10 (0.1.9)

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.0.10 (binary 0.1.9) -- 2024-09-23
+
+- Adds an `ipc` flag to enable sending messages from the webview back to the host deno process.
+- Adds an IPC example
+- Updates notifications to pass message bodies through
+
 ## 0.0.9 (binary 0.1.8) -- 2024-09-23
 
 - Adds a `getVersion` method to `Webview` that returns the binary version.

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "deno-webview"
-version = "0.1.8"
+version = "0.1.9"
 edition = "2021"
 
 [profile.release]

deno.json

@@ -1,15 +1,16 @@
 {
   "name": "@justbe/webview",
   "exports": "./src/lib.ts",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "tasks": {
     "dev": "deno run --watch main.ts",
     "gen": "deno task gen:rust && deno task gen:deno",
     "gen:rust": "cargo test",
     "gen:deno": "deno run -A scripts/generate-schema.ts && deno run -A scripts/sync-versions.ts",
-    "build": "deno task gen && cargo build -F transparent",
+    "build": "deno task gen && cargo build -F transparent -F devtools",
     "run": "export WEBVIEW_BIN=./target/debug/deno-webview && deno run -E=WEBVIEW_BIN --allow-run=$WEBVIEW_BIN",
-    "example:simple": "deno task run examples/simple.ts"
+    "example:simple": "deno task run examples/simple.ts",
+    "example:ipc": "deno task run examples/ipc.ts"
   },
   "publish": {
     "include": ["README.md", "LICENSE", "src/**/*.ts"]

examples/ipc.ts

@@ -0,0 +1,15 @@
+import { createWebView } from "../src/lib.ts";
+
+using webview = await createWebView({
+  title: "Simple",
+  html:
+    '<button onclick="window.ipc.postMessage(`button clicked ${Date.now()}`)">Click me</button>',
+  ipc: true,
+});
+
+// @ts-expect-error event emitter types still need to be corrected
+webview.on("ipc", ({ message }) => {
+  console.log(message);
+});
+
+await webview.waitUntilClosed();

src/lib.ts

@@ -38,7 +38,7 @@ export type { WebViewOptions } from "./schemas.ts";
 
 // Should match the cargo package version
 /** The version of the webview binary that's expected */
-export const BIN_VERSION = "0.1.8";
+export const BIN_VERSION = "0.1.9";
 
 type JSON =
   | string
@@ -296,17 +296,17 @@ export class WebView implements Disposable {
       const { $type, data } = result;
 
       if ($type === "notification") {
-        const notification = data;
-        this.#externalEvent.emit(notification.$type);
-        if (notification.$type === "started") {
-          const version = notification.version;
+        const { $type, ...body } = data;
+        this.#externalEvent.emit($type, body);
+        if (data.$type === "started") {
+          const version = data.version;
           if (version !== BIN_VERSION) {
             console.warn(
               `Expected webview to be version ${BIN_VERSION} but got ${version}. Some features may not work as expected.`,
             );
           }
         }
-        if (notification.$type === "closed") {
+        if ($type === "closed") {
           return;
         }
       }

src/main.rs

@@ -48,6 +48,9 @@ struct WebViewOptions {
     /// Sets whether clicking an inactive window also clicks through to the webview. Default is false.
     #[serde(default)]
     accept_first_mouse: bool,
+    /// Sets whether host should be able to receive messages from the webview via `window.ipc.postMessage`.
+    #[serde(default)]
+    ipc: bool,
 }
 
 fn default_true() -> bool {
@@ -78,6 +81,7 @@ enum Message {
 #[serde(tag = "$type")]
 enum Notification {
     Started { version: String },
+    Ipc { message: String },
     Closed,
 }
 
@@ -139,6 +143,9 @@ fn main() -> wry::Result<()> {
     };
     use wry::WebViewBuilder;
 
+    let (tx, to_deno) = mpsc::channel::<Message>();
+    let (from_deno, rx) = mpsc::channel::<Request>();
+
     let event_loop = EventLoop::new();
     let mut window_builder = WindowBuilder::new()
         .with_title(webview_options.title)
@@ -149,7 +156,7 @@ fn main() -> wry::Result<()> {
     }
     let window = window_builder.build(&event_loop).unwrap();
 
-    let webview_builder = match webview_options.target {
+    let mut webview_builder = match webview_options.target {
         WebViewTarget::Url(url) => WebViewBuilder::new(&window).with_url(url),
         WebViewTarget::Html(html) => WebViewBuilder::new(&window).with_html(html),
     }
@@ -160,11 +167,18 @@ fn main() -> wry::Result<()> {
     .with_focused(webview_options.focused)
     .with_devtools(webview_options.devtools)
     .with_accept_first_mouse(webview_options.accept_first_mouse);
+    let ipc_tx = tx.clone();
+    if webview_options.ipc {
+        webview_builder = webview_builder.with_ipc_handler(move |message| {
+            ipc_tx
+                .send(Message::Notification(Notification::Ipc {
+                    message: message.body().to_string(),
+                }))
+                .unwrap()
+        })
+    }
     let webview = webview_builder.build()?;
 
-    let (tx, to_deno) = mpsc::channel::<Message>();
-    let (from_deno, rx) = mpsc::channel::<Request>();
-
     let notify_tx = tx.clone();
     let notify = move |notification: Notification| {
         notify_tx.send(Message::Notification(notification)).unwrap();

src/schemas.ts

@@ -11,6 +11,7 @@ export type WebViewOptions =
     focused?: boolean;
     fullscreen?: boolean;
     incognito?: boolean;
+    ipc?: boolean;
     title: string;
     transparent?: boolean;
   }
@@ -32,6 +33,7 @@ export const WebViewOptions: z.ZodType<WebViewOptions> = z.intersection(
     focused: z.boolean().optional(),
     fullscreen: z.boolean().optional(),
     incognito: z.boolean().optional(),
+    ipc: z.boolean().optional(),
     title: z.string(),
     transparent: z.boolean().optional(),
   }),
@@ -143,6 +145,10 @@ export type WebViewMessage =
         $type: "started";
         version: string;
       }
+      | {
+        $type: "ipc";
+        message: string;
+      }
       | {
         $type: "closed";
       };
@@ -184,6 +190,7 @@ export const WebViewMessage: z.ZodType<WebViewMessage> = z.discriminatedUnion(
       $type: z.literal("notification"),
       data: z.discriminatedUnion("$type", [
         z.object({ $type: z.literal("started"), version: z.string() }),
+        z.object({ $type: z.literal("ipc"), message: z.string() }),
         z.object({ $type: z.literal("closed") }),
       ]),
     }),