electrobun 0.0.3 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "electrobun",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Build ultra fast, tiny, and cross-platform desktop apps with Typescript.",
   "license": "MIT",
   "author": "Blackboard Technologies Inc.",

package/src/browser/index.ts

@@ -45,6 +45,7 @@ type WebviewTagHandlers = RPCSchema<{
         width: number;
         height: number;
       };
+      masks: string;
     };
     webviewTagUpdateSrc: {
       id: number;
@@ -77,6 +78,10 @@ type WebviewTagHandlers = RPCSchema<{
       id: number;
       transparent: boolean;
     };
+    webviewTagToggleMirroring: {
+      id: number;
+      enable: boolean;
+    };
     webviewTagSetPassthrough: {
       id: number;
       enablePassthrough: boolean;
@@ -236,24 +241,32 @@ class Electroview<T> {
   }
 
   bunBridge(msg: string) {
-    // Note: zig sets up this custom message handler bridge
-    window.webkit.messageHandlers.bunBridge.postMessage(msg);
-  }
-
-  bunBridgeWithReply(msg: string) {
-    // Note: zig sets up this custom message handler bridge
-    // Note: Since post message is async in the browser context and bun will reply async
-    // We're using postMessage handler (via bunBridge above) without a reply, and then letting bun reply
-    // via pipesin and evaluateJavascript.
-    // addScriptMessageHandlerWithReply is just here as reference and for future use cases.
-    return window.webkit.messageHandlers.bunBridgeWithReply.postMessage(msg);
+    // 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
+    // remote content).
+
+    // Since most messages--especially those on remote content, are small
+    // we can solve most use cases by having a fallback to xhr for
+    // large messages
+
+    // 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 {
+      var xhr = new XMLHttpRequest();
+
+      // Note: we're only using synchronouse http on this async
+      // call to get around CORS for now
+      // Note: DO NOT use postMessage handlers since it
+      // freezes the process when sending lots of large messages
+
+      xhr.open("POST", "views://rpc", false); // sychronous call
+      xhr.send(msg);
+    }
   }
 
-  // webviewTagBridge(msg) {
-  //     // Note: zig sets up this custom message handler bridge
-  //     window.webkit.messageHandlers.webviewTagBridge.postMessage(msg);
-  // }
-
   receiveMessageFromBun(msg) {
     // NOTE: in the webview messages are passed by executing ElectrobunView.receiveMessageFromBun(object)
     // so they're already parsed into an object here

package/src/browser/webviewtag.ts

@@ -4,6 +4,8 @@ type WebviewEventTypes =
   | "did-commit-navigation"
   | "dom-ready";
 
+type Rect = { x: number; y: number; width: number; height: number };
+
 const ConfigureWebviewTags = (
   enableWebviewTags: boolean,
   zigRpc: (params: any) => any,
@@ -24,6 +26,10 @@ const ConfigureWebviewTags = (
     zigRpc: any;
     syncRpc: any;
 
+    // querySelectors for elements that you want to appear
+    // in front of the webview.
+    maskSelectors: Set<string> = new Set();
+
     // observers
     resizeObserver?: ResizeObserver;
     // intersectionObserver?: IntersectionObserver;
@@ -39,12 +45,16 @@ const ConfigureWebviewTags = (
       height: 0,
     };
 
+    lastMasksJSON: string = "";
+    lastMasks: Rect[] = [];
+
     transparent: boolean = false;
     passthroughEnabled: boolean = false;
     hidden: boolean = false;
     delegateMode: boolean = false;
     hiddenMirrorMode: boolean = false;
     wasZeroRect: boolean = false;
+    isMirroring: boolean = false;
 
     partition: string | null = null;
 
@@ -59,6 +69,16 @@ const ConfigureWebviewTags = (
       });
     }
 
+    addMaskSelector(selector: string) {
+      this.maskSelectors.add(selector);
+      this.syncDimensions();
+    }
+
+    removeMaskSelector(selector: string) {
+      this.maskSelectors.delete(selector);
+      this.syncDimensions();
+    }
+
     initWebview() {
       const rect = this.getBoundingClientRect();
       this.lastRect = rect;
@@ -206,6 +226,10 @@ const ConfigureWebviewTags = (
     // know that they're chaning something in order to eliminate the lag that the
     // catch all loop will catch
     syncDimensions(force: boolean = false) {
+      if (!force && this.hidden) {
+        return;
+      }
+
       const rect = this.getBoundingClientRect();
       const { x, y, width, height } =
         this.adjustDimensionsForHiddenMirrorMode(rect);
@@ -215,24 +239,49 @@ const ConfigureWebviewTags = (
         if (this.wasZeroRect === false) {
           this.wasZeroRect = true;
           this.toggleHidden(true, true);
-          this.stopMirroring();
         }
         return;
       }
 
+      const masks: Rect[] = [];
+      this.maskSelectors.forEach((selector) => {
+        const els = document.querySelectorAll(selector);
+
+        for (let i = 0; i < els.length; i++) {
+          const el = els[i];
+
+          if (el) {
+            const maskRect = el.getBoundingClientRect();
+
+            masks.push({
+              // reposition the bounding rect to be relative to the webview rect
+              // so objc can apply the mask correctly and handle the actual overlap
+              x: maskRect.x - x,
+              y: maskRect.y - y,
+              width: maskRect.width,
+              height: maskRect.height,
+            });
+          }
+        }
+      });
+
+      // store jsonStringified last masks value to compare
+      const masksJson = masks.length ? JSON.stringify(masks) : "";
+
       if (
         force ||
         lastRect.x !== x ||
         lastRect.y !== y ||
         lastRect.width !== width ||
-        lastRect.height !== height
+        lastRect.height !== height ||
+        this.lastMasksJSON !== masksJson
       ) {
-        // if we're not already in an accelerated loop then accelerate it
-        if (!this.positionCheckLoopReset) {
-          this.setPositionCheckLoop(true);
-        }
+        // let it know we're still accelerating
+        this.setPositionCheckLoop(true);
 
         this.lastRect = rect;
+        this.lastMasks = masks;
+        this.lastMasksJSON = masksJson;
 
         this.zigRpc.send.webviewTagResize({
           id: this.webviewId,
@@ -242,6 +291,7 @@ const ConfigureWebviewTags = (
             x: x,
             y: y,
           },
+          masks: masksJson,
         });
       }
 
@@ -265,13 +315,12 @@ const ConfigureWebviewTags = (
         this.positionCheckLoopReset = undefined;
       }
 
-      const delay = accelerate ? 100 : 400;
+      const delay = accelerate ? 0 : 300;
 
       if (accelerate) {
-        clearTimeout(this.positionCheckLoopReset);
         this.positionCheckLoopReset = setTimeout(() => {
           this.setPositionCheckLoop(false);
-        }, 600);
+        }, 2000);
       }
       // Note: Since there's not catch all way to listen for x/y changes
       // we have a 400ms interval to check
@@ -300,7 +349,6 @@ const ConfigureWebviewTags = (
       // we still need to send it to objc to calculate from its bottom left position
       // otherwise it'll move around unexpectedly.
       window.addEventListener("resize", this.boundForceSyncDimensions);
-
       window.addEventListener("scroll", this.boundSyncDimensions);
 
       // todo: For chromium webviews (windows native or chromium bundled)
@@ -311,7 +359,6 @@ const ConfigureWebviewTags = (
     disconnectedCallback() {
       // removed from the dom
       clearInterval(this.positionCheckLoop);
-      this.stopMirroring();
 
       this.resizeObserver?.disconnect();
       // this.intersectionObserver?.disconnect();
@@ -407,9 +454,8 @@ const ConfigureWebviewTags = (
     DEFAULT_FRAME_RATE = Math.round(1000 / 30); // 30fps
     streamScreenInterval?: Timer;
 
-    // todo: add a flag to disable automirroring since it's cpu intensive and
-    // developers may want to disable it in specific cases
-    startMirroring(frameRate: number = this.DEFAULT_FRAME_RATE) {
+    // NOTE: This is very cpu intensive, Prefer startMirroring where possible
+    startMirroringToDom(frameRate: number = this.DEFAULT_FRAME_RATE) {
       if (this.streamScreenInterval) {
         clearInterval(this.streamScreenInterval);
       }
@@ -419,13 +465,39 @@ const ConfigureWebviewTags = (
       }, frameRate);
     }
 
-    stopMirroring() {
+    stopMirroringToDom() {
       if (this.streamScreenInterval) {
         clearInterval(this.streamScreenInterval);
         this.streamScreenInterval = undefined;
       }
     }
 
+    startMirroring() {
+      // TEMP: mirroring now happens automatically in objc
+      // when the mouse moves. I'm leaving this here for now
+      // because I suspect there may still be use cases to
+      // toggle it from the dom outside of the mouse moving.
+      return;
+      if (this.isMirroring === false) {
+        this.isMirroring = true;
+        this.zigRpc.send.webviewTagToggleMirroring({
+          id: this.webviewId,
+          enable: true,
+        });
+      }
+    }
+
+    stopMirroring() {
+      return;
+      if (this.isMirroring === true) {
+        this.isMirroring = false;
+        this.zigRpc.send.webviewTagToggleMirroring({
+          id: this.webviewId,
+          enable: false,
+        });
+      }
+    }
+
     clearScreenImage() {
       this.style.backgroundImage = "";
     }
@@ -503,11 +575,11 @@ const ConfigureWebviewTags = (
         this.syncScreenshot(() => {
           this.delegateMode = true;
           this.toggleTransparent(true, true);
-          this.startMirroring();
+          this.startMirroringToDom();
         });
       } else {
         this.delegateMode = false;
-        this.stopMirroring();
+        this.stopMirroringToDom();
         this.toggleTransparent(this.transparent);
         this.tryClearScreenImage();
       }
@@ -527,10 +599,10 @@ const ConfigureWebviewTags = (
           this.hiddenMirrorMode = true;
           this.toggleHidden(true, true);
           this.togglePassthrough(true, true);
-          this.startMirroring();
+          this.startMirroringToDom();
         });
       } else {
-        this.stopMirroring();
+        this.stopMirroringToDom();
         this.toggleHidden(this.hidden);
         this.togglePassthrough(this.passthroughEnabled);
         this.tryClearScreenImage();

package/src/bun/core/BrowserView.ts

@@ -16,7 +16,7 @@ import type { BuiltinBunToWebviewSchema } from "../../browser/builtinrpcSchema";
 const BrowserViewMap = {};
 let nextWebviewId = 1;
 
-const CHUNK_SIZE = 4096; // 4KB
+const CHUNK_SIZE = 1024 * 4; // 4KB
 
 type BrowserViewOptions<T = undefined> = {
   url: string | null;
@@ -32,6 +32,7 @@ type BrowserViewOptions<T = undefined> = {
   rpc: T;
   syncRpc: { [method: string]: (params: any) => any };
   hostWebviewId: number;
+  autoResize: boolean;
 };
 
 interface ElectrobunWebviewRPCSChema {
@@ -68,6 +69,7 @@ const internalSyncRpcHandlers = {
       partition,
       frame,
       hostWebviewId,
+      autoResize: false,
     });
 
     // Note: we have to give it a couple of ticks to fully create the browserview
@@ -104,6 +106,7 @@ export class BrowserView<T> {
   html: string | null = null;
   preload: string | null = null;
   partition: string | null = null;
+  autoResize: boolean = true;
   frame: {
     x: number;
     y: number;
@@ -135,6 +138,7 @@ export class BrowserView<T> {
     // file exists first
     this.pipePrefix = `/private/tmp/electrobun_ipc_pipe_${hash}_${randomId}_${this.id}`;
     this.hostWebviewId = options.hostWebviewId;
+    this.autoResize = options.autoResize === false ? false : true;
 
     this.init();
   }
@@ -158,7 +162,7 @@ export class BrowserView<T> {
         x: this.frame.x,
         y: this.frame.y,
       },
-      //   autoResize: true,
+      autoResize: this.autoResize,
     });
 
     this.createStreams();

package/src/bun/proc/zig.ts

@@ -192,6 +192,7 @@ type ZigHandlers = RPCSchema<{
           width: number;
           height: number;
         };
+        autoResize: boolean;
       };
       response: void;
     };