electrobun 0.0.19-beta.7 → 0.0.19-beta.71

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

@@ -0,0 +1,349 @@
+import {  native, toCString, ffi } from "../proc/native";
+import * as fs from "fs";
+import { execSync } from "child_process";
+import electrobunEventEmitter from "../events/eventEmitter";
+import {
+  type RPCSchema,
+  type RPCRequestHandler,
+  type RPCMessageHandlerFn,
+  type WildcardRPCMessageHandlerFn,
+  type RPCOptions,
+  createRPC,
+} from "rpc-anywhere";
+import { Updater } from "./Updater";
+import type { BuiltinBunToWebviewSchema,BuiltinWebviewToBunSchema } from "../../browser/builtinrpcSchema";
+import { rpcPort, sendMessageToWebviewViaSocket } from "./Socket";
+import { randomBytes } from "crypto";
+import {FFIType, type Pointer}  from 'bun:ffi';
+
+const BrowserViewMap: {
+  [id: number]: BrowserView<any>;
+} = {};
+let nextWebviewId = 1;
+
+const CHUNK_SIZE = 1024 * 4; // 4KB
+
+type BrowserViewOptions<T = undefined> = {
+  url: string | null;
+  html: string | null;
+  preload: string | null;
+  renderer: 'native' | 'cef';
+  partition: string | null;
+  frame: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  };
+  rpc: T;  
+  hostWebviewId: number;
+  autoResize: boolean;
+
+  windowId: number;
+  navigationRules: string | null;
+  // renderer: 
+};
+
+interface ElectrobunWebviewRPCSChema {
+  bun: RPCSchema;
+  webview: RPCSchema;
+}
+
+const defaultOptions: Partial<BrowserViewOptions> = {
+  url: null,
+  html: null,
+  preload: null,
+  renderer: 'native',
+  frame: {
+    x: 0,
+    y: 0,
+    width: 800,
+    height: 600,
+  },
+};
+
+
+
+const hash = await Updater.localInfo.hash();
+// Note: we use the build's hash to separate from different apps and different builds
+// but we also want a randomId to separate different instances of the same app
+const randomId = Math.random().toString(36).substring(7);
+
+export class BrowserView<T> {
+  id: number = nextWebviewId++;
+  ptr: Pointer;
+  hostWebviewId?: number;
+  windowId: number;
+  renderer: 'cef' | 'native';
+  url: string | null = null;
+  html: string | null = null;
+  preload: string | null = null;
+  partition: string | null = null;
+  autoResize: boolean = true;
+  frame: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  } = {
+    x: 0,
+    y: 0,
+    width: 800,
+    height: 600,
+  };
+  pipePrefix: string;
+  inStream: fs.WriteStream;
+  outStream: ReadableStream<Uint8Array>;
+  secretKey: Uint8Array;
+  rpc?: T;  
+  rpcHandler?: (msg: any) => void;
+  navigationRules: string | null;
+
+  constructor(options: Partial<BrowserViewOptions<T>> = defaultOptions) {
+    // const rpc = options.rpc;        
+    
+    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.partition = options.partition || null;
+    // todo (yoav): since collisions can crash the app add a function that checks if the
+    // file exists first
+    this.pipePrefix = `/private/tmp/electrobun_ipc_pipe_${hash}_${randomId}_${this.id}`;
+    this.hostWebviewId = options.hostWebviewId;
+    this.windowId = options.windowId;
+    this.autoResize = options.autoResize === false ? false : true;
+    this.navigationRules = options.navigationRules || null;
+    this.renderer = options.renderer || defaultOptions.renderer;
+
+    BrowserViewMap[this.id] = this;
+    this.ptr = this.init();
+  }
+
+  init() {
+    console.log('browserView init', this.id, this.windowId, this.renderer);
+    this.createStreams();
+
+    
+   console.log('ffi createWEbview')
+    // TODO: add a then to this that fires an onReady event
+    return ffi.request.createWebview({
+      id: this.id,
+      windowId: this.windowId,
+      renderer: this.renderer, 
+      rpcPort: rpcPort,
+      // todo: consider sending secretKey as base64
+      secretKey: this.secretKey.toString(),
+      hostWebviewId: this.hostWebviewId || null,
+      pipePrefix: this.pipePrefix,
+      partition: this.partition,      
+      url: this.url,      
+      html: this.html,
+      preload: this.preload,
+      frame: {
+        width: this.frame.width,
+        height: this.frame.height,
+        x: this.frame.x,
+        y: this.frame.y,
+      },
+      autoResize: this.autoResize,
+      navigationRules: this.navigationRules,
+    });
+
+    
+  }
+
+  createStreams() {    
+    if (!this.rpc) {
+      this.rpc = BrowserView.defineRPC({
+        handlers: { requests: {}, messages: {} },
+      });
+    }
+    
+    this.rpc.setTransport(this.createTransport());
+    
+  }
+
+  sendMessageToWebviewViaExecute(jsonMessage) {
+    const stringifiedMessage =
+      typeof jsonMessage === "string"
+        ? jsonMessage
+        : JSON.stringify(jsonMessage);
+    // todo (yoav): make this a shared const with the browser api
+    const wrappedMessage = `window.__electrobun.receiveMessageFromBun(${stringifiedMessage})`;
+    this.executeJavascript(wrappedMessage);
+  }
+
+  sendInternalMessageViaExecute(jsonMessage) {
+    const stringifiedMessage =
+      typeof jsonMessage === "string"
+        ? jsonMessage
+        : JSON.stringify(jsonMessage);
+    // todo (yoav): make this a shared const with the browser api
+    const wrappedMessage = `window.__electrobun.receiveInternalMessageFromBun(${stringifiedMessage})`;
+    this.executeJavascript(wrappedMessage);
+  }
+
+  // Note: the OS has a buffer limit on named pipes. If we overflow it
+  // it won't trigger the kevent for zig to read the pipe and we'll be stuck.
+  // so we have to chunk it
+  // TODO: is this still needed after switching from named pipes
+  executeJavascript(js: string) {
+    ffi.request.evaluateJavascriptWithNoCompletion({id: this.id, js});
+  }
+
+  loadURL(url: string) {
+    this.url = url;    
+    native.symbols.loadURLInWebView(this.ptr, toCString(this.url))      
+  }
+
+  loadHTML(html: string) {
+    // Note: CEF doesn't natively support "setting html" so we just return
+    // this BrowserView's html when a special views:// url is hit.
+    // So we can update that content and ask the webview to load that url
+    this.html = html;
+    this.loadURL('views://internal/index.html');
+  }
+
+
+  // todo (yoav): move this to a class that also has off, append, prepend, etc.
+  // name should only allow browserView events
+  // Note: normalize event names to willNavigate instead of ['will-navigate'] to save
+  // 5 characters per usage and allow minification to be more effective.
+  on(
+    name:
+      | "will-navigate"
+      | "did-navigate"
+      | "did-navigate-in-page"
+      | "did-commit-navigation"
+      | "dom-ready",
+    handler
+  ) {
+    const specificName = `${name}-${this.id}`;
+    electrobunEventEmitter.on(specificName, handler);
+  }
+
+  createTransport = () => {
+    const that = this;
+
+    return {
+      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;       
+      },
+    };
+  };
+
+  static getById(id: number) {
+    return BrowserViewMap[id];
+  }
+
+  static getAll() {
+    return Object.values(BrowserViewMap);
+  }
+
+  static defineRPC<
+    Schema extends ElectrobunWebviewRPCSChema,
+    BunSchema extends RPCSchema = Schema["bun"],
+    WebviewSchema extends RPCSchema = Schema["webview"]
+  >(config: {
+    maxRequestTime?: number;
+    handlers: {
+      requests?: RPCRequestHandler<BunSchema["requests"]>;
+      messages?: {
+        [key in keyof BunSchema["messages"]]: RPCMessageHandlerFn<
+          BunSchema["messages"],
+          key
+        >;
+      } & {
+        "*"?: WildcardRPCMessageHandlerFn<BunSchema["messages"]>;
+      };
+    };
+  }) {
+    // Note: RPC Anywhere requires defining the requests that a schema handles and the messages that a schema sends.
+    // eg: BunSchema {
+    //   requests: // ... requests bun handles, sent by webview
+    //   messages: // ... messages bun sends, handled by webview
+    // }
+    // In some generlized contexts that makes sense,
+    // In the Electrobun context it can feel a bit counter-intuitive so we swap this around a bit. In Electrobun, the
+    // webview and bun are known endpoints so we simplify schema definitions by combining them.
+    // Schema {
+    //   bun: BunSchema {
+    //      requests: // ... requests bun handles, sent by webview,
+    //      messages: // ... messages bun handles, sent by webview
+    //    },
+    //   webview: WebviewSchema {
+    //      requests: // ... requests webview handles, sent by bun,
+    //      messages: // ... messages webview handles, sent by bun
+    //    },
+    // }
+    // This way from bun, webview.rpc.request.getTitle() and webview.rpc.send.someMessage maps to the schema
+    // MySchema.webview.requests.getTitle and MySchema.webview.messages.someMessage
+    // and in the webview, Electroview.rpc.request.getFileContents maps to
+    // MySchema.bun.requests.getFileContents.
+    // electrobun also treats messages as "requests that we don't wait for to complete", and normalizes specifying the
+    // handlers for them alongside request handlers.
+
+    type mixedWebviewSchema = {
+      requests: BunSchema["requests"]// & BuiltinWebviewToBunSchema["requests"];
+      messages: WebviewSchema["messages"];
+    };
+
+    type mixedBunSchema = {      
+      messages: BunSchema["messages"];
+    };
+
+    const rpcOptions = {
+      maxRequestTime: config.maxRequestTime,
+      requestHandler: {
+        ...config.handlers.requests,
+        // ...internalRpcHandlers,
+      },
+      transport: {
+        // Note: RPC Anywhere will throw if you try add a message listener if transport.registerHandler is falsey
+        registerHandler: () => {},
+      },
+    } as RPCOptions<mixedWebviewSchema, mixedBunSchema>;
+
+    const rpc = createRPC<mixedWebviewSchema, mixedBunSchema>(rpcOptions);
+    
+    const messageHandlers = config.handlers.messages;
+    if (messageHandlers) {
+      // note: this can only be done once there is a transport
+      // @ts-ignore - this is due to all the schema mixing we're doing, fine to ignore
+      // while types in here are borked, they resolve correctly/bubble up to the defineRPC call site.
+      rpc.addMessageListener(
+        "*",
+        (messageName: keyof BunSchema["messages"], payload) => {
+          const globalHandler = messageHandlers["*"];
+          if (globalHandler) {
+            globalHandler(messageName, payload);
+          }
+
+          const messageHandler = messageHandlers[messageName];
+          if (messageHandler) {
+            messageHandler(payload);
+          }
+        }
+      );
+    }
+
+    return rpc;
+  }
+}

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

@@ -0,0 +1,191 @@
+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 });
+  }
+
+  // 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");