electrobun 0.0.19-beta.13 → 0.0.19-beta.130

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

@@ -0,0 +1,195 @@
+import { ffi } from "../proc/native";
+import electrobunEventEmitter from "../events/eventEmitter";
+import { BrowserView } from "./BrowserView";
+import { type RPC } from "rpc-anywhere";
+import {FFIType} from 'bun:ffi'
+
+let nextWindowId = 1;
+
+// todo (yoav): if we default to builtInSchema, we don't want dev to have to define custom handlers
+// for the built-in schema stuff.
+type WindowOptionsType<T = undefined> = {
+  title: string;
+  frame: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  };
+  url: string | null;
+  html: string | null;
+  preload: string | null;
+  renderer: 'native' | 'cef';
+  rpc?: T;  
+  styleMask?: {};
+  // TODO: implement all of them
+  titleBarStyle: "hiddenInset" | "default";
+  navigationRules: string | null;
+};
+
+const defaultOptions: WindowOptionsType = {
+  title: "Electrobun",  
+  frame: {
+    x: 0,
+    y: 0,
+    width: 800,
+    height: 600,
+  },
+  url: "https://electrobun.dev",
+  html: null,
+  preload: null,
+  renderer: 'native',
+  titleBarStyle: "default",
+  navigationRules: null,
+};
+
+export const BrowserWindowMap = {};
+
+// todo (yoav): do something where the type extends the default schema
+// that way we can provide built-in requests/messages and devs can extend it
+
+export class BrowserWindow<T> {
+  id: number = nextWindowId++;
+  ptr: FFIType.ptr;
+  title: string = "Electrobun";
+  state: "creating" | "created" = "creating";
+  url: string | null = null;
+  html: string | null = null;
+  preload: string | null = null;
+  renderer:  'native' | 'cef';
+  frame: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  } = {
+    x: 0,
+    y: 0,
+    width: 800,
+    height: 600,
+  };
+  // todo (yoav): make this an array of ids or something
+  webviewId: number;
+
+  constructor(options: Partial<WindowOptionsType<T>> = defaultOptions) {
+    this.title = options.title || "New Window";
+    this.frame = options.frame
+      ? { ...defaultOptions.frame, ...options.frame }
+      : { ...defaultOptions.frame };
+    this.url = options.url || null;
+    this.html = options.html || null;
+    this.preload = options.preload || null;
+    this.renderer = options.renderer === 'cef' ? 'cef' : 'native';
+    this.navigationRules = options.navigationRules || null;
+    
+    this.init(options);
+  }
+
+  init({
+    rpc,    
+    styleMask,
+    titleBarStyle,
+  }: Partial<WindowOptionsType<T>>) {
+    
+    this.ptr = ffi.request.createWindow({
+      id: this.id,
+      title: this.title,
+      url: this.url || "",      
+      frame: {
+        width: this.frame.width,
+        height: this.frame.height,
+        x: this.frame.x,
+        y: this.frame.y,
+      },
+      styleMask: {
+        Borderless: false,
+        Titled: true,
+        Closable: true,
+        Miniaturizable: true,
+        Resizable: true,
+        UnifiedTitleAndToolbar: false,
+        FullScreen: false,
+        FullSizeContentView: false,
+        UtilityWindow: false,
+        DocModalWindow: false,
+        NonactivatingPanel: false,
+        HUDWindow: false,
+        ...(styleMask || {}),
+        ...(titleBarStyle === "hiddenInset"
+          ? {
+              Titled: true,
+              FullSizeContentView: true,
+            }
+          : {}),
+      },
+      titleBarStyle: titleBarStyle || "default",
+    });
+
+    BrowserWindowMap[this.id] = this;
+
+    
+
+    // todo (yoav): user should be able to override this and pass in their
+    // own webview instance, or instances for attaching to the window.
+    const webview = new BrowserView({
+      // TODO: decide whether we want to keep sending url/html
+      // here, if we're manually calling loadURL/loadHTML below
+      // then we can remove it from the api here
+      url: this.url,
+      html: this.html,
+      preload: this.preload,
+      // frame: this.frame,
+      renderer: this.renderer, 
+      frame: {
+        x: 0,
+        y: 0,
+        width: this.frame.width,
+        height: this.frame.height,
+      },
+      rpc,      
+      // todo: we need to send the window here and attach it in one go
+      // then the view creation code in objc can toggle between offscreen
+      // or on screen views depending on if windowId is null
+      // does this mean browserView needs to track the windowId or handle it ephemerally?
+      windowId: this.id,
+      navigationRules: this.navigationRules,
+    });
+
+    console.log('setting webviewId: ', webview.id)
+
+    this.webviewId = webview.id;   
+
+    
+  }
+
+  get webview() {
+    console.log('getting webview for window: ', this.webviewId)
+    // todo (yoav): we don't want this to be undefined, so maybe we should just
+    // link directly to the browserview object instead of a getter
+    return BrowserView.getById(this.webviewId) as BrowserView<T>;
+  }
+
+  static getById(id: number) {
+    return BrowserWindowMap[id];
+  }
+
+  setTitle(title: string) {
+    this.title = title;
+    return ffi.request.setTitle({ winId: this.id, title });
+  }
+
+  close() {
+    return ffi.request.closeWindow({ winId: this.id });
+  }
+
+  focus() {
+    return ffi.request.focusWindow({ winId: this.id });
+  }
+
+  // todo (yoav): move this to a class that also has off, append, prepend, etc.
+  // name should only allow browserWindow events
+  on(name, handler) {
+    const specificName = `${name}-${this.id}`;
+    electrobunEventEmitter.on(specificName, handler);
+  }
+}

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

@@ -0,0 +1,67 @@
+// TODO: have a context specific menu that excludes role
+import { ffi, type ApplicationMenuItemConfig } from "../proc/native";
+import electrobunEventEmitter from "../events/eventEmitter";
+
+export const showContextMenu = (menu: Array<ApplicationMenuItemConfig>) => {
+  const menuWithDefaults = menuConfigWithDefaults(menu);
+  ffi.request.showContextMenu({
+    menuConfig: JSON.stringify(menuWithDefaults),
+  });
+};
+
+export const on = (name: "context-menu-clicked", handler) => {
+  const specificName = `${name}`;
+  electrobunEventEmitter.on(specificName, handler);
+};
+
+// todo: Consolidate Application menu, context menu, and tray menus can all have roles.
+const roleLabelMap = {
+  quit: "Quit",
+  hide: "Hide",
+  hideOthers: "Hide Others",
+  showAll: "Show All",
+  undo: "Undo",
+  redo: "Redo",
+  cut: "Cut",
+  copy: "Copy",
+  paste: "Paste",
+  pasteAndMatchStyle: "Paste And Match Style",
+  delete: "Delete",
+  selectAll: "Select All",
+  startSpeaking: "Start Speaking",
+  stopSpeaking: "Stop Speaking",
+  enterFullScreen: "Enter FullScreen",
+  exitFullScreen: "Exit FullScreen",
+  toggleFullScreen: "Toggle Full Screen",
+  minimize: "Minimize",
+  zoom: "Zoom",
+  bringAllToFront: "Bring All To Front",
+  close: "Close",
+  cycleThroughWindows: "Cycle Through Windows",
+  showHelp: "Show Help",
+};
+
+const menuConfigWithDefaults = (
+  menu: Array<ApplicationMenuItemConfig>
+): Array<ApplicationMenuItemConfig> => {
+  return menu.map((item) => {
+    if (item.type === "divider" || item.type === "separator") {
+      return { type: "divider" };
+    } else {
+      return {
+        label: item.label || roleLabelMap[item.role] || "",
+        type: item.type || "normal",
+        // application menus can either have an action or a role. not both.
+        ...(item.role ? { role: item.role } : { action: item.action || "" }),
+        // default enabled to true unless explicitly set to false
+        enabled: item.enabled === false ? false : true,
+        checked: Boolean(item.checked),
+        hidden: Boolean(item.hidden),
+        tooltip: item.tooltip || undefined,
+        ...(item.submenu
+          ? { submenu: menuConfigWithDefaults(item.submenu) }
+          : {}),
+      };
+    }
+  });
+};

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

@@ -0,0 +1,5 @@
+import { resolve } from "path";
+
+const RESOURCES_FOLDER = resolve("../Resources/");
+
+export const VIEWS_FOLDER = resolve(RESOURCES_FOLDER, "app/views");

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/core/Tray.ts

@@ -0,0 +1,121 @@
+import { ffi, type MenuItemConfig } from "../proc/native";
+import electrobunEventEmitter from "../events/eventEmitter";
+import { VIEWS_FOLDER } from "./Paths";
+import { join } from "path";
+import {FFIType} from 'bun:ffi';
+
+let nextTrayId = 1;
+const TrayMap = {};
+
+type ConstructorOptions = {
+  title?: string;
+  image?: string;
+  template?: boolean;
+  width?: number;
+  height?: number;
+};
+
+export class Tray {
+  id: number = nextTrayId++;
+  ptr: FFIType.ptr;
+
+  constructor({
+    title = "",
+    image = "",
+    template = true,
+    width = 16,
+    height = 16,
+  }: ConstructorOptions = {}) {
+    console.log("img", image);
+    console.log("img", this.resolveImagePath(image));
+    this.ptr = ffi.request.createTray({
+      id: this.id,
+      title,
+      image: this.resolveImagePath(image),
+      template,
+      width,
+      height,
+    });
+
+    TrayMap[this.id] = this;
+  }
+
+  resolveImagePath(imgPath: string) {
+    if (imgPath.startsWith("views://")) {
+      return join(VIEWS_FOLDER, imgPath.replace("views://", ""));
+    } else {
+      // can specify any file path here
+      return imgPath;
+    }
+  }
+
+  setTitle(title: string) {
+    ffi.request.setTrayTitle({ id: this.id, title });
+  }
+
+  setImage(imgPath: string) {
+    ffi.request.setTrayImage({
+      id: this.id,
+      image: this.resolveImagePath(imgPath),
+    });
+  }
+
+  setMenu(menu: Array<MenuItemConfig>) {
+    const menuWithDefaults = menuConfigWithDefaults(menu);
+    ffi.request.setTrayMenu({
+      id: this.id,
+      menuConfig: JSON.stringify(menuWithDefaults),
+    });
+  }
+
+  on(name: "tray-clicked", handler) {
+    const specificName = `${name}-${this.id}`;
+    electrobunEventEmitter.on(specificName, handler);
+  }
+
+  remove() {
+    console.log('Tray.remove() called for id:', this.id);
+    ffi.request.removeTray({ id: this.id });
+    delete TrayMap[this.id];
+    console.log('Tray removed from TrayMap');
+  }
+
+  static getById(id: number) {
+    return TrayMap[id];
+  }
+
+  static getAll() {
+    return Object.values(TrayMap);
+  }
+
+  static removeById(id: number) {
+    const tray = TrayMap[id];
+    if (tray) {
+      tray.remove();
+    }
+  }
+}
+
+const menuConfigWithDefaults = (
+  menu: Array<MenuItemConfig>
+): Array<MenuItemConfig> => {
+  return menu.map((item) => {
+    if (item.type === "divider" || item.type === "separator") {
+      return { type: "divider" };
+    } else {
+      return {
+        label: item.label || "",
+        type: item.type || "normal",
+        action: item.action || "",
+        // default enabled to true unless explicitly set to false
+        enabled: item.enabled === false ? false : true,
+        checked: Boolean(item.checked),
+        hidden: Boolean(item.hidden),
+        tooltip: item.tooltip || undefined,
+        ...(item.submenu
+          ? { submenu: menuConfigWithDefaults(item.submenu) }
+          : {}),
+      };
+    }
+  });
+};