electrobun 0.0.15 → 0.0.16

package/dist/api/browser/index.ts

@@ -18,6 +18,7 @@ interface ElectrobunWebviewRPCSChema {
 }
 
 const WEBVIEW_ID = window.__electrobunWebviewId;
+const RPC_SOCKET_PORT = window.__electrobunRpcSocketPort;
 
 // todo (yoav): move this stuff to browser/rpc/webview.ts
 type ZigWebviewHandlers = RPCSchema<{
@@ -94,6 +95,7 @@ type WebviewTagHandlers = RPCSchema<{
 }>;
 
 class Electroview<T> {
+  bunSocket?: WebSocket;
   // user's custom rpc browser <-> bun
   rpc?: T;
   rpcHandler?: (msg: any) => void;
@@ -114,6 +116,7 @@ class Electroview<T> {
     // todo (yoav): should init webviewTag by default when src is local
     // and have a setting that forces it enabled or disabled
     this.initZigRpc();
+    this.initSocketToBun();
     // Note:
     // syncRPC messages doesn't need to be defined since there's no need for sync 1-way message
     // just use non-blocking async rpc for that, we just need sync requests
@@ -156,6 +159,50 @@ class Electroview<T> {
     });
   }
 
+  initSocketToBun() {
+    // todo: upgrade to tls
+    const socket = new WebSocket(
+      `ws://localhost:${RPC_SOCKET_PORT}/socket?webviewId=${WEBVIEW_ID}`
+    );
+
+    this.bunSocket = socket;
+
+    socket.addEventListener("open", () => {
+      // this.bunSocket?.send("Hello from webview " + WEBVIEW_ID);
+    });
+
+    socket.addEventListener("message", async (event) => {
+      const message = event.data;
+      if (typeof message === "string") {
+        try {
+          const encryptedPacket = JSON.parse(message);
+
+          const decrypted = await window.__electrobun_decrypt(
+            encryptedPacket.encryptedData,
+            encryptedPacket.iv,
+            encryptedPacket.tag
+          );
+
+          this.rpcHandler?.(JSON.parse(decrypted));
+        } catch (err) {
+          console.error("Error parsing bun message:", err);
+        }
+      } else if (message instanceof Blob) {
+        // Handle binary data (e.g., convert Blob to ArrayBuffer if needed)
+      } else {
+        console.error("UNKNOWN DATA TYPE RECEIVED:", event.data);
+      }
+    });
+
+    socket.addEventListener("error", (event) => {
+      console.error("Socket error:", event);
+    });
+
+    socket.addEventListener("close", (event) => {
+      // console.log("Socket closed:", event);
+    });
+  }
+
   // This will be attached to the global object, zig can rpc reply by executingJavascript
   // of that global reference to the function
   receiveMessageFromZig(msg: any) {
@@ -220,6 +267,7 @@ class Electroview<T> {
 
   // call any of your bun syncrpc methods in a way that appears synchronous from the browser context
   bunBridgeSync(msg: string) {
+    console.warn("DEPRECATED: use async rpc if possible");
     var xhr = new XMLHttpRequest();
     // Note: setting false here makes the xhr request blocking. This completely
     // blocks the main thread which is terrible. You can use this safely from a webworker.
@@ -240,7 +288,28 @@ class Electroview<T> {
     }
   }
 
-  bunBridge(msg: string) {
+  async bunBridge(msg: string) {
+    if (this.bunSocket?.readyState === WebSocket.OPEN) {
+      try {
+        const { encryptedData, iv, tag } = await window.__electrobun_encrypt(
+          msg
+        );
+
+        const encryptedPacket = {
+          encryptedData: encryptedData,
+          iv: iv,
+          tag: tag,
+        };
+        const encryptedPacketString = JSON.stringify(encryptedPacket);
+        this.bunSocket.send(encryptedPacketString);
+        return;
+      } catch (error) {
+        console.error("Error sending message to bun via socket:", error);
+      }
+    }
+
+    // if socket's are unavailable, fallback to postMessage
+
     // Note: messageHandlers seem to freeze when sending large messages
     // but xhr to views://rpc can run into CORS issues on non views://
     // loaded content (eg: when writing extensions/preload scripts for
@@ -252,6 +321,7 @@ class Electroview<T> {
 
     // TEMP: disable the fallback for now. for some reason suddenly can't
     // repro now that other places are chunking messages and laptop restart
+
     if (true || msg.length < 8 * 1024) {
       window.webkit.messageHandlers.bunBridge.postMessage(msg);
     } else {

package/dist/api/bun/core/BrowserView.ts

@@ -12,8 +12,12 @@ import {
 } from "rpc-anywhere";
 import { Updater } from "./Updater";
 import type { BuiltinBunToWebviewSchema } from "../../browser/builtinrpcSchema";
+import { rpcPort, sendMessageToWebviewViaSocket } from "./Socket";
+import { randomBytes } from "crypto";
 
-const BrowserViewMap = {};
+const BrowserViewMap: {
+  [id: number]: BrowserView<any>;
+} = {};
 let nextWebviewId = 1;
 
 const CHUNK_SIZE = 1024 * 4; // 4KB
@@ -40,7 +44,7 @@ interface ElectrobunWebviewRPCSChema {
   webview: RPCSchema;
 }
 
-const defaultOptions: BrowserViewOptions = {
+const defaultOptions: Partial<BrowserViewOptions> = {
   url: "https://electrobun.dev",
   html: null,
   preload: null,
@@ -61,7 +65,7 @@ const internalSyncRpcHandlers = {
     preload,
     partition,
     frame,
-  }) => {
+  }: BrowserViewOptions & { windowId: number }) => {
     const webviewForTag = new BrowserView({
       url,
       html,
@@ -121,17 +125,20 @@ export class BrowserView<T> {
   pipePrefix: string;
   inStream: fs.WriteStream;
   outStream: ReadableStream<Uint8Array>;
+  secretKey: Uint8Array;
   rpc?: T;
   syncRpc?: { [method: string]: (params: any) => any };
+  rpcHandler?: (msg: any) => void;
 
   constructor(options: Partial<BrowserViewOptions<T>> = defaultOptions) {
-    this.url = options.url || defaultOptions.url;
-    this.html = options.html || defaultOptions.html;
-    this.preload = options.preload || defaultOptions.preload;
+    this.url = options.url || defaultOptions.url || null;
+    this.html = options.html || defaultOptions.html || null;
+    this.preload = options.preload || defaultOptions.preload || null;
     this.frame = options.frame
       ? { ...defaultOptions.frame, ...options.frame }
       : { ...defaultOptions.frame };
     this.rpc = options.rpc;
+    this.secretKey = new Uint8Array(randomBytes(32));
     this.syncRpc = { ...(options.syncRpc || {}), ...internalSyncRpcHandlers };
     this.partition = options.partition || null;
     // todo (yoav): since collisions can crash the app add a function that checks if the
@@ -147,6 +154,9 @@ export class BrowserView<T> {
     // TODO: add a then to this that fires an onReady event
     zigRPC.request.createWebview({
       id: this.id,
+      rpcPort: rpcPort,
+      // todo: consider sending secretKey as base64
+      secretKey: this.secretKey.toString(),
       hostWebviewId: this.hostWebviewId || null,
       pipePrefix: this.pipePrefix,
       partition: this.partition,
@@ -205,7 +215,7 @@ export class BrowserView<T> {
     }
   }
 
-  sendMessageToWebview(jsonMessage) {
+  sendMessageToWebviewViaExecute(jsonMessage) {
     const stringifiedMessage =
       typeof jsonMessage === "string"
         ? jsonMessage
@@ -261,16 +271,21 @@ export class BrowserView<T> {
     const that = this;
 
     return {
-      send(message) {
-        // todo (yoav): note: this is the same as the zig transport
-        try {
-          const messageString = JSON.stringify(message);
-          that.sendMessageToWebview(messageString);
-        } catch (error) {
-          console.error("bun: failed to serialize message to webview", error);
+      send(message: any) {
+        const sentOverSocket = sendMessageToWebviewViaSocket(that.id, message);
+
+        if (!sentOverSocket) {
+          try {
+            const messageString = JSON.stringify(message);
+            that.sendMessageToWebviewViaExecute(messageString);
+          } catch (error) {
+            console.error("bun: failed to serialize message to webview", error);
+          }
         }
       },
       registerHandler(handler) {
+        that.rpcHandler = handler;
+
         async function readFromPipe(
           reader: ReadableStreamDefaultReader<Uint8Array>
         ) {

package/dist/api/bun/core/Socket.ts

@@ -0,0 +1,181 @@
+import type { ServerWebSocket } from "bun";
+import { BrowserView } from "./BrowserView";
+import { createCipheriv, createDecipheriv, randomBytes } from "crypto";
+
+function base64ToUint8Array(base64: string) {
+  {
+    return new Uint8Array(
+      atob(base64)
+        .split("")
+        .map((char) => char.charCodeAt(0))
+    );
+  }
+}
+
+// Encrypt function
+function encrypt(secretKey: Uint8Array, text: string) {
+  const iv = new Uint8Array(randomBytes(12)); // IV for AES-GCM
+  const cipher = createCipheriv("aes-256-gcm", secretKey, iv);
+  const encrypted = Buffer.concat([
+    new Uint8Array(cipher.update(text, "utf8")),
+    new Uint8Array(cipher.final()),
+  ]).toString("base64");
+  const tag = cipher.getAuthTag().toString("base64");
+  return { encrypted, iv: Buffer.from(iv).toString("base64"), tag };
+}
+
+// Decrypt function
+function decrypt(
+  secretKey: Uint8Array,
+  encryptedData: Uint8Array,
+  iv: Uint8Array,
+  tag: Uint8Array
+) {
+  const decipher = createDecipheriv("aes-256-gcm", secretKey, iv);
+  decipher.setAuthTag(tag);
+  const decrypted = Buffer.concat([
+    new Uint8Array(decipher.update(encryptedData)),
+    new Uint8Array(decipher.final()),
+  ]);
+  return decrypted.toString("utf8");
+}
+
+export const socketMap: {
+  [webviewId: string]: {
+    socket: null | ServerWebSocket<unknown>;
+    queue: string[];
+  };
+} = {};
+
+const startRPCServer = () => {
+  const startPort = 50000;
+  const endPort = 65535;
+  const payloadLimit = 1024 * 1024 * 500; // 500MB
+  let port = startPort;
+  let server = null;
+
+  while (port <= endPort) {
+    try {
+      server = Bun.serve<{ webviewId: number }>({
+        port,
+        fetch(req, server) {
+          const url = new URL(req.url);
+          //   const token = new URL(req.url).searchParams.get("token");
+          //   if (token !== AUTH_TOKEN)
+          //     return new Response("Unauthorized", { status: 401 });
+          //   console.log("fetch!!", url.pathname);
+          if (url.pathname === "/socket") {
+            const webviewIdString = url.searchParams.get("webviewId");
+            if (!webviewIdString) {
+              return new Response("Missing webviewId", { status: 400 });
+            }
+            const webviewId = parseInt(webviewIdString, 10);
+            const success = server.upgrade(req, { data: { webviewId } });
+            return success
+              ? undefined
+              : new Response("Upgrade failed", { status: 500 });
+          }
+
+          console.log("unhandled RPC Server request", req.url);
+        },
+        websocket: {
+          idleTimeout: 960,
+          // 500MB max payload should be plenty
+          maxPayloadLength: payloadLimit,
+          // Anything beyond the backpressure limit will be dropped
+          backpressureLimit: payloadLimit * 2,
+          open(ws) {
+            const { webviewId } = ws.data;
+
+            if (!socketMap[webviewId]) {
+              socketMap[webviewId] = { socket: ws, queue: [] };
+            } else {
+              socketMap[webviewId].socket = ws;
+            }
+          },
+          close(ws, code, reason) {
+            const { webviewId } = ws.data;
+            console.log("Closed:", webviewId, code, reason);
+            socketMap[webviewId].socket = null;
+          },
+
+          message(ws, message) {
+            const { webviewId } = ws.data;
+            const browserView = BrowserView.getById(webviewId);
+
+            if (browserView.rpcHandler) {
+              if (typeof message === "string") {
+                try {
+                  const encryptedPacket = JSON.parse(message);
+                  const decrypted = decrypt(
+                    browserView.secretKey,
+                    base64ToUint8Array(encryptedPacket.encryptedData),
+                    base64ToUint8Array(encryptedPacket.iv),
+                    base64ToUint8Array(encryptedPacket.tag)
+                  );
+
+                  // Note: At this point the secretKey for the webview id would
+                  // have had to match the encrypted packet data, so we can trust
+                  // that this message can be passed to this browserview's rpc
+                  // methods.
+                  browserView.rpcHandler(JSON.parse(decrypted));
+                } catch (error) {
+                  console.log("Error handling message:", error);
+                }
+              } else if (message instanceof ArrayBuffer) {
+                console.log("TODO: Received ArrayBuffer message:", message);
+              }
+            }
+          },
+        },
+      });
+
+      break;
+    } catch (error: any) {
+      if (error.code === "EADDRINUSE") {
+        console.log(`Port ${port} in use, trying next port...`);
+        port++;
+      } else {
+        throw error;
+      }
+    }
+  }
+
+  return { rpcServer: server, rpcPort: port };
+};
+
+export const { rpcServer, rpcPort } = startRPCServer();
+
+// Will return true if message was sent over websocket
+// false if it was not (caller should fallback to postMessage/evaluateJS rpc)
+export const sendMessageToWebviewViaSocket = (
+  webviewId: number,
+  message: any
+): boolean => {
+  const rpc = socketMap[webviewId];
+  const browserView = BrowserView.getById(webviewId);
+
+  if (rpc?.socket?.readyState === WebSocket.OPEN) {
+    try {
+      const unencryptedString = JSON.stringify(message);
+      const encrypted = encrypt(browserView.secretKey, unencryptedString);
+
+      const encryptedPacket = {
+        encryptedData: encrypted.encrypted,
+        iv: encrypted.iv,
+        tag: encrypted.tag,
+      };
+
+      const encryptedPacketString = JSON.stringify(encryptedPacket);
+
+      rpc.socket.send(encryptedPacketString);
+      return true;
+    } catch (error) {
+      console.error("Error sending message to webview via socket:", error);
+    }
+  }
+
+  return false;
+};
+
+console.log("Server started at", rpcServer?.url.origin);

package/dist/api/bun/index.ts

@@ -9,6 +9,7 @@ import * as Utils from "./core/Utils";
 import { type RPCSchema, createRPC } from "rpc-anywhere";
 import type ElectrobunEvent from "./events/event";
 import * as PATHS from "./core/Paths";
+import * as Socket from "./core/Socket";
 
 // Named Exports
 export {
@@ -23,6 +24,7 @@ export {
   ApplicationMenu,
   ContextMenu,
   PATHS,
+  Socket,
 };
 
 // Default Export
@@ -36,6 +38,7 @@ const Electrobun = {
   ContextMenu,
   events: electobunEventEmmitter,
   PATHS,
+  Socket,
 };
 
 // Electrobun

package/dist/api/bun/proc/zig.ts

@@ -188,6 +188,8 @@ type ZigHandlers = RPCSchema<{
     createWebview: {
       params: {
         id: number;
+        rpcPort: number;
+        secretKey: string;
         hostWebviewId: number | null;
         pipePrefix: string;
         url: string | null;
@@ -458,7 +460,7 @@ const zigRPC = createRPC<BunHandlers, ZigHandlers>({
         console.log(err);
         return { payload: err };
       }
-
+      console.warn("DEPRECATED: use async rpc if possible", method);
       const handler = webview.syncRpc[method];
       var response;
       try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "electrobun",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "description": "Build ultra fast, tiny, and cross-platform desktop apps with Typescript.",
   "license": "MIT",
   "author": "Blackboard Technologies Inc.",
@@ -32,14 +32,14 @@
     "build:zig:release": "cd src/zig && ../../vendors/zig/zig build -Doptimize=ReleaseFast",
     "build:zig:trdiff:release": "cd src/bsdiff && ../../vendors/zig/zig build -Doptimize=ReleaseFast",
     "build:launcher:release": "cd src/launcher && ../../vendors/zig/zig build -Doptimize=ReleaseSmall",
-    "build:extractor:release": "cd src/extractor && ../../vendors/zig/zig build -Doptimize=ReleaseSmall",    
+    "build:extractor:release": "cd src/extractor && ../../vendors/zig/zig build -Doptimize=ReleaseSmall",
     "build:cli": "bun build src/cli/index.ts --compile --outfile src/cli/build/electrobun",
     "build:debug": "npm install && bun build:zig:trdiff && bun build:objc && bun build:zig && bun build:launcher && bun build:extractor && bun build:cli",
     "build:release": "bun build:objc && bun build:zig:trdiff:release && bun build:zig:release && bun build:launcher:release && bun build:extractor:release && bun build:cli",
     "build:package": "bun build:release && bun ./scripts/copy-to-dist.ts",
     "build:dev": "bun build:debug && bun ./scripts/copy-to-dist.ts",
     "build:electrobun": "bun build:objc && bun build:zig && bun build:bun",
-    "dev:playground": "bun build:dev && cd playground && npm install && bun build:dev && bun start",    
+    "dev:playground": "bun build:dev && cd playground && npm install && bun build:dev && bun start",
     "dev:playground:rerun": "cd playground && bun start",
     "dev:playground:canary": "bun build:package && cd playground && npm install && bun build:canary && bun start:canary",
     "dev:docs": "cd documentation && bun start",
@@ -51,8 +51,8 @@
     "bun": "1.1.29"
   },
   "dependencies": {
-    "@oneidentity/zstd-js": "^1.0.3",    
-    "rpc-anywhere": "1.5.0",
-    "tar": "^6.2.1"    
+    "@oneidentity/zstd-js": "^1.0.3",
+    "rpc-anywhere": "1.5.0",    
+    "tar": "^6.2.1"
   }
 }