electrobun 0.0.13 → 0.0.15

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

@@ -0,0 +1,402 @@
+import { zigRPC } from "../proc/zig";
+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 } from "../../browser/builtinrpcSchema";
+
+const BrowserViewMap = {};
+let nextWebviewId = 1;
+
+const CHUNK_SIZE = 1024 * 4; // 4KB
+
+type BrowserViewOptions<T = undefined> = {
+  url: string | null;
+  html: string | null;
+  preload: string | null;
+  partition: string | null;
+  frame: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  };
+  rpc: T;
+  syncRpc: { [method: string]: (params: any) => any };
+  hostWebviewId: number;
+  autoResize: boolean;
+};
+
+interface ElectrobunWebviewRPCSChema {
+  bun: RPCSchema;
+  webview: RPCSchema;
+}
+
+const defaultOptions: BrowserViewOptions = {
+  url: "https://electrobun.dev",
+  html: null,
+  preload: null,
+  frame: {
+    x: 0,
+    y: 0,
+    width: 800,
+    height: 600,
+  },
+};
+
+const internalSyncRpcHandlers = {
+  webviewTagInit: ({
+    hostWebviewId,
+    windowId,
+    url,
+    html,
+    preload,
+    partition,
+    frame,
+  }) => {
+    const webviewForTag = new BrowserView({
+      url,
+      html,
+      preload,
+      partition,
+      frame,
+      hostWebviewId,
+      autoResize: false,
+    });
+
+    // Note: we have to give it a couple of ticks to fully create the browserview
+    // which has a settimout init() which calls rpc that has a settimeout and all the serialization/deserialization
+
+    // TODO: we really need a better way to handle the whole view creation flow and
+    // maybe an onready event or something.
+    setTimeout(() => {
+      zigRPC.request.addWebviewToWindow({
+        windowId: windowId,
+        webviewId: webviewForTag.id,
+      });
+
+      if (url) {
+        webviewForTag.loadURL(url);
+      } else if (html) {
+        webviewForTag.loadHTML(html);
+      }
+    }, 100);
+
+    return webviewForTag.id;
+  },
+};
+
+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++;
+  hostWebviewId?: number;
+  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>;
+  rpc?: T;
+  syncRpc?: { [method: string]: (params: any) => any };
+
+  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.frame = options.frame
+      ? { ...defaultOptions.frame, ...options.frame }
+      : { ...defaultOptions.frame };
+    this.rpc = options.rpc;
+    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
+    // 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();
+  }
+
+  init() {
+    // TODO: add a then to this that fires an onReady event
+    zigRPC.request.createWebview({
+      id: this.id,
+      hostWebviewId: this.hostWebviewId || null,
+      pipePrefix: this.pipePrefix,
+      partition: this.partition,
+      // 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: {
+        width: this.frame.width,
+        height: this.frame.height,
+        x: this.frame.x,
+        y: this.frame.y,
+      },
+      autoResize: this.autoResize,
+    });
+
+    this.createStreams();
+
+    BrowserViewMap[this.id] = this;
+  }
+
+  createStreams() {
+    const webviewPipeIn = this.pipePrefix + "_in";
+    const webviewPipeOut = this.pipePrefix + "_out";
+
+    try {
+      execSync("mkfifo " + webviewPipeOut);
+    } catch (e) {
+      console.log("pipe out already exists");
+    }
+
+    try {
+      execSync("mkfifo " + webviewPipeIn);
+    } catch (e) {
+      console.log("pipe in already exists");
+    }
+
+    const inStream = fs.createWriteStream(webviewPipeIn, {
+      flags: "r+",
+    });
+
+    // todo: something has to be written to it to open it
+    // look into this
+    inStream.write("\n");
+
+    this.inStream = inStream;
+
+    // Open the named pipe for reading
+    const outStream = Bun.file(webviewPipeOut).stream();
+    this.outStream = outStream;
+
+    if (this.rpc) {
+      this.rpc.setTransport(this.createTransport());
+    }
+  }
+
+  sendMessageToWebview(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);
+  }
+
+  // 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
+  executeJavascript(js: string) {
+    let offset = 0;
+    while (offset < js.length) {
+      const chunk = js.slice(offset, offset + CHUNK_SIZE);
+      this.inStream.write(chunk);
+      offset += CHUNK_SIZE;
+    }
+
+    // Ensure the newline is written after all chunks
+    this.inStream.write("\n");
+  }
+
+  loadURL(url: string) {
+    this.url = url;
+    zigRPC.request.loadURL({ webviewId: this.id, url: this.url });
+  }
+
+  loadHTML(html: string) {
+    this.html = html;
+    zigRPC.request.loadHTML({ webviewId: this.id, html: this.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) {
+        // 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);
+        }
+      },
+      registerHandler(handler) {
+        async function readFromPipe(
+          reader: ReadableStreamDefaultReader<Uint8Array>
+        ) {
+          let buffer = "";
+          while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+
+            buffer += new TextDecoder().decode(value);
+            let eolIndex;
+
+            while ((eolIndex = buffer.indexOf("\n")) >= 0) {
+              const line = buffer.slice(0, eolIndex).trim();
+              buffer = buffer.slice(eolIndex + 1);
+              if (line) {
+                try {
+                  const event = JSON.parse(line);
+                  handler(event);
+                } catch (error) {
+                  console.error("webview: ", line);
+                }
+              }
+            }
+          }
+        }
+
+        const reader = that.outStream.getReader();
+        readFromPipe(reader);
+      },
+    };
+  };
+
+  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"];
+      messages: WebviewSchema["messages"];
+    };
+
+    type mixedBunSchema = {
+      requests: WebviewSchema["requests"] &
+        BuiltinBunToWebviewSchema["requests"];
+      messages: BunSchema["messages"];
+    };
+
+    const rpcOptions = {
+      maxRequestTime: config.maxRequestTime,
+      requestHandler: config.handlers.requests,
+      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,178 @@
+import { zigRPC } from "../proc/zig";
+import electrobunEventEmitter from "../events/eventEmitter";
+import { BrowserView } from "./BrowserView";
+import { type RPC } from "rpc-anywhere";
+
+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;
+  rpc?: T;
+  syncRpc?: { [method: string]: (params: any) => any };
+  styleMask?: {};
+  // TODO: implement all of them
+  titleBarStyle: "hiddenInset" | "default";
+};
+
+const defaultOptions: WindowOptionsType = {
+  title: "Electrobun",
+  frame: {
+    x: 0,
+    y: 0,
+    width: 800,
+    height: 600,
+  },
+  url: "https://electrobun.dev",
+  html: null,
+  preload: null,
+  titleBarStyle: "default",
+};
+
+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++;
+  title: string = "Electrobun";
+  state: "creating" | "created" = "creating";
+  url: string | null = null;
+  html: string | null = null;
+  preload: string | null = null;
+  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.init(options);
+  }
+
+  init({
+    rpc,
+    syncRpc,
+    styleMask,
+    titleBarStyle,
+  }: Partial<WindowOptionsType<T>>) {
+    zigRPC.request.createWindow({
+      id: this.id,
+      title: this.title,
+      url: this.url,
+      html: this.html,
+      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",
+    });
+
+    // 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,
+      frame: {
+        x: 0,
+        y: 0,
+        width: this.frame.width,
+        height: this.frame.height,
+      },
+      rpc,
+      syncRpc,
+    });
+
+    this.webviewId = webview.id;
+
+    zigRPC.request.addWebviewToWindow({
+      windowId: this.id,
+      webviewId: webview.id,
+    });
+
+    if (this.url) {
+      webview.loadURL(this.url);
+    } else if (this.html) {
+      webview.loadHTML(this.html);
+    }
+
+    BrowserWindowMap[this.id] = this;
+  }
+
+  get webview() {
+    // 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>;
+  }
+
+  setTitle(title: string) {
+    this.title = title;
+    return zigRPC.request.setTitle({ winId: this.id, title });
+  }
+
+  close() {
+    return zigRPC.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 { zigRPC, type ApplicationMenuItemConfig } from "../proc/zig";
+import electrobunEventEmitter from "../events/eventEmitter";
+
+export const showContextMenu = (menu: Array<ApplicationMenuItemConfig>) => {
+  const menuWithDefaults = menuConfigWithDefaults(menu);
+  zigRPC.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");