electrobun 0.0.4 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "electrobun",
-  "version": "0.0.4",
+  "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

@@ -241,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

@@ -239,7 +239,6 @@ const ConfigureWebviewTags = (
         if (this.wasZeroRect === false) {
           this.wasZeroRect = true;
           this.toggleHidden(true, true);
-          this.stopMirroring();
         }
         return;
       }
@@ -338,59 +337,6 @@ const ConfigureWebviewTags = (
       this.positionCheckLoop = setInterval(() => this.syncDimensions(), delay);
     }
 
-    // The global document mousemove will fire even when the mouse is over
-    // an OOPIF that's layered above this host webview. The two edge cases we
-    // solve for are:
-    // 1. dragging an element on the host over or dropping on the webview anchor
-    // 2. clicking on an element that's "layered over" the OOPIF visually but really uses a
-    // mask to make a section transparent. We want the underlying overlay UI to be
-    // interactive not the OOPIF.
-    //
-    // Solution: Have mirroing on by default.
-    // 1. mouse move events don't fire during drag. So the OOPIF remains non-interactive
-    // and effectively passes through to the host's anchor element underneath letting you
-    // react to drag events on the host as needed.
-    // 2. Detect when the mouse is moving over the anchor and turn mirroring off to make
-    // it interactive. Unless the mouse is over a masked area in which case we want to
-    // keep it non-interactive and pass through to the host "overylay UI".
-    handleDocumentMouseMove(e: MouseEvent) {
-      if (this.hidden) {
-        return;
-      }
-
-      const isInBounds =
-        e.clientX >= this.lastRect.x &&
-        e.clientX <= this.lastRect.x + this.lastRect.width &&
-        e.clientY >= this.lastRect.y &&
-        e.clientY <= this.lastRect.y + this.lastRect.height;
-
-      if (isInBounds) {
-        const isInMaskBounds = this.lastMasks.find((mask) => {
-          // we send relative x/y to objc but here we need the clientX/Y
-          // to compare against. consider doing the opposite or storing both.
-          const clientX = this.lastRect.x + mask.x;
-          const clientY = this.lastRect.y + mask.y;
-          const isInMaskBounds =
-            e.clientX >= clientX &&
-            e.clientX <= clientX + mask.width &&
-            e.clientY <= clientY + mask.height &&
-            e.clientY >= clientY;
-
-          return isInMaskBounds;
-        });
-        if (isInMaskBounds) {
-          this.startMirroring();
-        } else {
-          this.stopMirroring();
-        }
-      } else {
-        this.startMirroring();
-      }
-    }
-
-    boundhandleDocumentMouseMove = (e: MouseEvent) =>
-      this.handleDocumentMouseMove(e);
-
     connectedCallback() {
       this.setPositionCheckLoop();
 
@@ -404,13 +350,6 @@ const ConfigureWebviewTags = (
       // otherwise it'll move around unexpectedly.
       window.addEventListener("resize", this.boundForceSyncDimensions);
       window.addEventListener("scroll", this.boundSyncDimensions);
-      // Note: mousemove won't fire during a drag so we get that behaviour
-      // for free without doing calculations.
-      document.addEventListener(
-        "mousemove",
-        this.boundhandleDocumentMouseMove,
-        true
-      );
 
       // todo: For chromium webviews (windows native or chromium bundled)
       // should be able to use performanceObservers on layout-shift to
@@ -420,17 +359,12 @@ const ConfigureWebviewTags = (
     disconnectedCallback() {
       // removed from the dom
       clearInterval(this.positionCheckLoop);
-      this.stopMirroring();
 
       this.resizeObserver?.disconnect();
       // this.intersectionObserver?.disconnect();
       // this.mutationObserver?.disconnect();
       window.removeEventListener("resize", this.boundForceSyncDimensions);
       window.removeEventListener("scroll", this.boundSyncDimensions);
-      document.removeEventListener(
-        "mousemove",
-        this.boundhandleDocumentMouseMove
-      );
       this.zigRpc.send.webviewTagRemove({ id: this.webviewId });
     }
 
@@ -539,6 +473,11 @@ const ConfigureWebviewTags = (
     }
 
     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({
@@ -549,6 +488,7 @@ const ConfigureWebviewTags = (
     }
 
     stopMirroring() {
+      return;
       if (this.isMirroring === true) {
         this.isMirroring = false;
         this.zigRpc.send.webviewTagToggleMirroring({

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;