electrobun 0.0.19-beta.118 → 0.0.19-beta.119

package/README.md

@@ -20,7 +20,7 @@ Visit <a href="https://www.electrobun.dev/">Electrobun.dev</a> to see api docume
 - Write typescript for the main process and webviews without having to think about it.
 - Isolation between main and webview processes with fast, typed, easy to implement RPC between them.
 - Small self-extracting app bundles ~12MB (when using system webview, most of this is the bun runtime)
-- Even smaller app updates as small as 4KB (using bsdiff it only downloads tiny patches between versions)
+- Even smaller app updates as small as 14KB (using bsdiff it only downloads tiny patches between versions)
 - Provide everything you need in one tightly integrated workflow to start writing code in 5 minutes and distribute in 10.
 
 ## Architecture

package/dist/api/browser/webviewtag.ts

@@ -54,6 +54,7 @@ const ConfigureWebviewTags = (
     hiddenMirrorMode: boolean = false;
     wasZeroRect: boolean = false;
     isMirroring: boolean = false;
+    masks: string = '';
 
     partition: string | null = null;
 
@@ -83,7 +84,15 @@ const ConfigureWebviewTags = (
       this.lastRect = rect;
 
       const url = this.src || this.getAttribute("src");
-      const html = this.html || this.getAttribute("html");      
+      const html = this.html || this.getAttribute("html");   
+      
+      const maskSelectors = this.masks || this.getAttribute("masks");
+
+      if (maskSelectors) {
+        maskSelectors.split(',').forEach(s => {
+          this.maskSelectors.add(s);
+        })
+      }
 
       const webviewId = await this.internalRpc.request.webviewTagInit({        
         hostWebviewId: window.__electrobunWebviewId,
@@ -371,7 +380,12 @@ const ConfigureWebviewTags = (
       // this.mutationObserver?.disconnect();
       window.removeEventListener("resize", this.boundForceSyncDimensions);
       window.removeEventListener("scroll", this.boundSyncDimensions);
-      this.internalRpc.send.webviewTagRemove({ id: this.webviewId });
+      
+      if (this.webviewId) {
+        this.internalRpc.send.webviewTagRemove({ id: this.webviewId });
+        // Mark webview as removed to prevent further method calls
+        this.webviewId = undefined;
+      }
     }
 
     static get observedAttributes() {
@@ -393,6 +407,7 @@ const ConfigureWebviewTags = (
 
     updateIFrameSrc(src: string) {
       if (!this.webviewId) {
+        console.warn('updateIFrameSrc called on removed webview');
         return;
       }
       this.internalRpc.send.webviewTagUpdateSrc({
@@ -403,6 +418,7 @@ const ConfigureWebviewTags = (
 
     updateIFrameHtml(html: string) {
       if (!this.webviewId) {
+        console.warn('updateIFrameHtml called on removed webview');
         return;
       }
       
@@ -414,6 +430,7 @@ const ConfigureWebviewTags = (
 
     updateIFramePreload(preload: string) {
       if (!this.webviewId) {
+        console.warn('updateIFramePreload called on removed webview');
         return;
       }
       this.internalRpc.send.webviewTagUpdatePreload({
@@ -423,17 +440,33 @@ const ConfigureWebviewTags = (
     }
 
     goBack() {
+      if (!this.webviewId) {
+        console.warn('goBack called on removed webview');
+        return;
+      }
       this.internalRpc.send.webviewTagGoBack({ id: this.webviewId });
     }
 
     goForward() {
+      if (!this.webviewId) {
+        console.warn('goForward called on removed webview');
+        return;
+      }
       this.internalRpc.send.webviewTagGoForward({ id: this.webviewId });
     }
 
     reload() {
+      if (!this.webviewId) {
+        console.warn('reload called on removed webview');
+        return;
+      }
       this.internalRpc.send.webviewTagReload({ id: this.webviewId });
     }
     loadURL(url: string) {
+      if (!this.webviewId) {
+        console.warn('loadURL called on removed webview');
+        return;
+      }
       this.setAttribute("src", url);
       this.internalRpc.send.webviewTagUpdateSrc({
         id: this.webviewId,
@@ -441,6 +474,10 @@ const ConfigureWebviewTags = (
       });
     }
     loadHTML(html: string) {
+      if (!this.webviewId) {
+        console.warn('loadHTML called on removed webview');
+        return;
+      }
       this.setAttribute("html", html);
       this.internalRpc.send.webviewTagUpdateHtml({
         id: this.webviewId,
@@ -450,6 +487,11 @@ const ConfigureWebviewTags = (
 
     // This sets the native webview hovering over the dom to be transparent
     toggleTransparent(transparent?: boolean, bypassState?: boolean) {
+      if (!this.webviewId) {
+        console.warn('toggleTransparent called on removed webview');
+        return;
+      }
+
       if (!bypassState) {
         if (typeof transparent === "undefined") {
           this.transparent = !this.transparent;
@@ -464,6 +506,11 @@ const ConfigureWebviewTags = (
       });
     }
     togglePassthrough(enablePassthrough?: boolean, bypassState?: boolean) {
+      if (!this.webviewId) {
+        console.warn('togglePassthrough called on removed webview');
+        return;
+      }
+
       if (!bypassState) {
         if (typeof enablePassthrough === "undefined") {
           this.passthroughEnabled = !this.passthroughEnabled;
@@ -480,6 +527,11 @@ const ConfigureWebviewTags = (
     }
 
     toggleHidden(hidden?: boolean, bypassState?: boolean) {
+      if (!this.webviewId) {
+        console.warn('toggleHidden called on removed webview');
+        return;
+      }
+
       if (!bypassState) {
         if (typeof hidden === "undefined") {
           this.hidden = !this.hidden;

package/dist/api/bun/ElectrobunConfig.ts

@@ -0,0 +1,171 @@
+/**
+ * Electrobun configuration type definitions
+ * Used in electrobun.config.ts files
+ */
+
+export interface ElectrobunConfig {
+  /**
+   * Application metadata configuration
+   */
+  app: {
+    /**
+     * The display name of your application
+     */
+    name: string;
+    
+    /**
+     * Unique identifier for your application (e.g., "com.example.myapp")
+     * Used for platform-specific identifiers
+     */
+    identifier: string;
+    
+    /**
+     * Application version string (e.g., "1.0.0")
+     */
+    version: string;
+  };
+
+  /**
+   * Build configuration options
+   */
+  build?: {
+        /**
+     * Bun process build configuration
+     */
+    bun?: {
+      /**
+       * Entry point for the main Bun process
+       * @default "src/bun/index.ts"
+       */
+      entrypoint?: string;
+      
+      /**
+       * External modules to exclude from bundling
+       * @default []
+       */
+      external?: string[];
+    };
+
+    /**
+     * Browser view build configurations
+     */
+    views?: {
+      [viewName: string]: {
+        /**
+         * Entry point for this view's TypeScript code
+         */
+        entrypoint: string;
+        
+        /**
+         * External modules to exclude from bundling for this view
+         */
+        external?: string[];
+      };
+    };
+
+    /**
+     * Files to copy directly to the build output
+     * Key is source path, value is destination path
+     */
+    copy?: {
+      [sourcePath: string]: string;
+    };
+    /**
+     * Output folder for built application
+     * @default "build"
+     */
+    buildFolder?: string;
+    
+    /**
+     * Output folder for distribution artifacts
+     * @default "artifacts"
+     */
+    artifactFolder?: string;
+    
+    /**
+     * Build targets to compile for
+     * Can be "current", "all", or comma-separated list like "macos-arm64,win-x64"
+     */
+    targets?: string;
+
+    /**
+     * macOS-specific build configuration
+     */
+    mac?: {
+      /**
+       * Enable code signing for macOS builds
+       * @default false
+       */
+      codesign?: boolean;
+      
+      /**
+       * Enable notarization for macOS builds (requires codesign)
+       * @default false
+       */
+      notarize?: boolean;
+      
+      /**
+       * Bundle CEF (Chromium Embedded Framework) instead of using system WebView
+       * @default false
+       */
+      bundleCEF?: boolean;
+      
+      /**
+       * macOS entitlements for code signing
+       */
+      entitlements?: Record<string, boolean | string>;
+      
+      /**
+       * Path to .iconset folder containing app icons
+       * @default "icon.iconset"
+       */
+      icons?: string;
+    };
+
+    /**
+     * Windows-specific build configuration
+     */
+    win?: {
+      /**
+       * Bundle CEF (Chromium Embedded Framework) instead of using WebView2
+       * @default false
+       */
+      bundleCEF?: boolean;
+    };
+
+    /**
+     * Linux-specific build configuration
+     */
+    linux?: {
+      /**
+       * Bundle CEF (Chromium Embedded Framework) instead of using GTKWebKit
+       * Recommended on Linux for advanced layer compositing features
+       * @default false
+       */
+      bundleCEF?: boolean;
+    };
+  };
+
+  /**
+   * Build scripts configuration
+   */
+  scripts?: {
+    /**
+     * Script to run after build completes
+     * Can be a path to a script file
+     */
+    postBuild?: string;
+  };
+
+  /**
+   * Release and distribution configuration
+   */
+  release?: {
+    /**
+     * Base URL for artifact distribution (e.g., S3 bucket URL)
+     * Used for auto-updates and patch generation
+     */
+    bucketUrl?: string;
+  };
+}
+

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

@@ -182,6 +182,10 @@ export class BrowserWindow<T> {
     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) {

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

@@ -73,6 +73,13 @@ export class Tray {
     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];
   }
@@ -80,6 +87,13 @@ export class Tray {
   static getAll() {
     return Object.values(TrayMap);
   }
+
+  static removeById(id: number) {
+    const tray = TrayMap[id];
+    if (tray) {
+      tray.remove();
+    }
+  }
 }
 
 const menuConfigWithDefaults = (

package/dist/api/bun/index.ts

@@ -10,11 +10,13 @@ import { type RPCSchema, createRPC } from "rpc-anywhere";
 import type ElectrobunEvent from "./events/event";
 import * as PATHS from "./core/Paths";
 import * as Socket from "./core/Socket";
+import type { ElectrobunConfig } from "./ElectrobunConfig";
 
 // Named Exports
 export {
   type RPCSchema,
   type ElectrobunEvent,
+  type ElectrobunConfig,
   createRPC,
   BrowserWindow,
   BrowserView,

package/dist/api/bun/proc/native.ts

@@ -186,6 +186,10 @@ export const native = (() => {
         args: [FFIType.ptr, FFIType.cstring],
         returns: FFIType.void
       },
+      removeTray: {
+        args: [FFIType.ptr],
+        returns: FFIType.void
+      },
       setApplicationMenu: {
         args: [FFIType.cstring, FFIType.function],
         returns: FFIType.void
@@ -382,6 +386,17 @@ export const ffi = {
         // Note: Cleanup of BrowserWindowMap happens in the windowCloseCallback
       },
 
+      focusWindow: (params: {winId: number}) => {
+        const {winId} = params;
+        const windowPtr = BrowserWindow.getById(winId)?.ptr;
+        
+        if (!windowPtr) {
+          throw `Can't focus window. Window no longer exists`;
+        }
+        
+        native.symbols.makeNSWindowKeyAndOrderFront(windowPtr);
+      },
+
       createWebview: (params: {
         id: number;
         windowId: number;
@@ -674,6 +689,22 @@ export const ffi = {
           toCString(menuConfig)
         );
       },
+
+      removeTray: (params: { id: number }): void => {
+        const { id } = params;
+        console.log('removeTray called with id:', id);
+        const tray = Tray.getById(id);
+        console.log('Found tray:', tray);
+        
+        if (!tray) {
+          throw `Can't remove tray. Tray no longer exists`;
+        }
+        
+        console.log('Calling native.symbols.removeTray with ptr:', tray.ptr);
+        native.symbols.removeTray(tray.ptr);
+        console.log('Native removeTray called successfully');
+        // The Tray class will handle removing from TrayMap
+      },
       setApplicationMenu: (params: {menuConfig: string}): void => {
         const {
           menuConfig
@@ -1141,6 +1172,7 @@ export const internalRpcHandlers = {
     },  
     webviewTagCallAsyncJavaScript: (params) => {
       console.log('-----------+ request: ', 'webviewTagCallAsyncJavaScript', params)
+      // Not implemented - users can use RPC for JavaScript execution if needed
     }
   },
   message: {
@@ -1157,33 +1189,60 @@ export const internalRpcHandlers = {
       native.symbols.resizeWebview(webviewPtr, x, y, width, height, toCString(params.masks))
     },      
     webviewTagUpdateSrc: (params) => {
-      const webviewPtr = BrowserView.getById(params.id)?.ptr;
-      native.symbols.loadURLInWebView(webviewPtr, toCString(params.url))      
+      const webview = BrowserView.getById(params.id);
+      if (!webview || !webview.ptr) {
+        console.error(`webviewTagUpdateSrc: BrowserView not found or has no ptr for id ${params.id}`);
+        return;
+      }
+      native.symbols.loadURLInWebView(webview.ptr, toCString(params.url));      
     },
     webviewTagUpdateHtml: (params) => {      
-      const webview = BrowserView.getById(params.id);   
-      webview.loadHTML(params.html) 
+      const webview = BrowserView.getById(params.id);
+      if (!webview || !webview.ptr) {
+        console.error(`webviewTagUpdateHtml: BrowserView not found or has no ptr for id ${params.id}`);
+        return;
+      }   
+      webview.loadHTML(params.html);
       webview.html = params.html;
-      
     },
     webviewTagUpdatePreload: (params) => {
       const webview = BrowserView.getById(params.id);
+      if (!webview || !webview.ptr) {
+        console.error(`webviewTagUpdatePreload: BrowserView not found or has no ptr for id ${params.id}`);
+        return;
+      }
       native.symbols.updatePreloadScriptToWebView(webview.ptr, toCString('electrobun_custom_preload_script'), toCString(params.preload), true);
     },
     webviewTagGoBack: (params) => {
       const webview = BrowserView.getById(params.id);
+      if (!webview || !webview.ptr) {
+        console.error(`webviewTagGoBack: BrowserView not found or has no ptr for id ${params.id}`);
+        return;
+      }
       native.symbols.webviewGoBack(webview.ptr);
     },
     webviewTagGoForward: (params) => {
       const webview = BrowserView.getById(params.id);
+      if (!webview || !webview.ptr) {
+        console.error(`webviewTagGoForward: BrowserView not found or has no ptr for id ${params.id}`);
+        return;
+      }
       native.symbols.webviewGoForward(webview.ptr);
     },
     webviewTagReload: (params) => {
       const webview = BrowserView.getById(params.id);
+      if (!webview || !webview.ptr) {
+        console.error(`webviewTagReload: BrowserView not found or has no ptr for id ${params.id}`);
+        return;
+      }
       native.symbols.webviewReload(webview.ptr);
     },
     webviewTagRemove: (params) => {
       const webview = BrowserView.getById(params.id);
+      if (!webview || !webview.ptr) {
+        console.error(`webviewTagRemove: BrowserView not found or has no ptr for id ${params.id}`);
+        return;
+      }
       native.symbols.webviewRemove(webview.ptr);
     },
     startWindowMove: (params) => {
@@ -1195,14 +1254,26 @@ export const internalRpcHandlers = {
     },
     webviewTagSetTransparent: (params) => {
       const webview = BrowserView.getById(params.id);
+      if (!webview || !webview.ptr) {
+        console.error(`webviewTagSetTransparent: BrowserView not found or has no ptr for id ${params.id}`);
+        return;
+      }
       native.symbols.webviewSetTransparent(webview.ptr, params.transparent);
     },
     webviewTagSetPassthrough: (params) => {
       const webview = BrowserView.getById(params.id);
+      if (!webview || !webview.ptr) {
+        console.error(`webviewTagSetPassthrough: BrowserView not found or has no ptr for id ${params.id}`);
+        return;
+      }
       native.symbols.webviewSetPassthrough(webview.ptr, params.enablePassthrough);
     },
     webviewTagSetHidden: (params) => {
       const webview = BrowserView.getById(params.id);
+      if (!webview || !webview.ptr) {
+        console.error(`webviewTagSetHidden: BrowserView not found or has no ptr for id ${params.id}`);
+        return;
+      }
       native.symbols.webviewSetHidden(webview.ptr, params.hidden);
     },
     webviewEvent: (params) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "electrobun",
-  "version": "0.0.19-beta.118",
+  "version": "0.0.19-beta.119",
   "description": "Build ultra fast, tiny, and cross-platform desktop apps with Typescript.",
   "license": "MIT",
   "author": "Blackboard Technologies Inc.",
@@ -36,6 +36,7 @@
     "dev:playground:clean": "cd playground && rm -rf node_modules && npm install && cd .. && bun dev:playground",
     "dev:playground:rerun": "cd playground && bun start",
     "dev:playground:canary": "bun build:release && cd playground && npm install && bun build:canary && bun start:canary",
+    "run:playground": "bun build:dev && bun build:cli && cd templates/interactive-playground && npm install && bun build:dev && bun start",
     "dev:docs": "cd documentation && bun start",
     "build:docs:release": "cd documentation && bun run build",
     "npm:publish": "bun build:release && npm publish",
@@ -45,7 +46,8 @@
     "push:patch": "npm version patch && git push origin main --tags",
     "push:minor": "npm version minor && git push origin main --tags",
     "push:major": "npm version major && git push origin main --tags",
-    "build:push:artifacts": "bun scripts/build-and-upload-artifacts.js"
+    "build:push:artifacts": "bun scripts/build-and-upload-artifacts.js",
+    "test": "bun build:dev && bun build:cli && cd tests && npm install && bun build:dev && bun start"
   },
   "devDependencies": {
     "@types/archiver": "^6.0.3",

package/src/cli/index.ts

@@ -30,8 +30,12 @@ const MAX_CHUNK_SIZE = 1024 * 2;
 
 // this when run as an npm script this will be where the folder where package.json is.
 const projectRoot = process.cwd();
-const configName = "electrobun.config";
-const configPath = join(projectRoot, configName);
+
+// Find TypeScript ESM config file
+function findConfigFile(): string | null {
+  const configFile = join(projectRoot, 'electrobun.config.ts');
+  return existsSync(configFile) ? configFile : null;
+}
 
 // Note: cli args can be called via npm bun /path/to/electorbun/binary arg1 arg2
 const indexOfElectrobun = process.argv.findIndex((arg) =>
@@ -440,19 +444,21 @@ if (!command) {
   process.exit(1);
 }
 
-const config = getConfig();
+// Main execution function
+async function main() {
+  const config = await getConfig();
 
-const envArg =
-  process.argv.find((arg) => arg.startsWith("--env="))?.split("=")[1] || "";
+  const envArg =
+    process.argv.find((arg) => arg.startsWith("--env="))?.split("=")[1] || "";
 
-const targetsArg =
-  process.argv.find((arg) => arg.startsWith("--targets="))?.split("=")[1] || "";
+  const targetsArg =
+    process.argv.find((arg) => arg.startsWith("--targets="))?.split("=")[1] || "";
 
-const validEnvironments = ["dev", "canary", "stable"];
+  const validEnvironments = ["dev", "canary", "stable"];
 
-// todo (yoav): dev, canary, and stable;
-const buildEnvironment: "dev" | "canary" | "stable" =
-  validEnvironments.includes(envArg || "dev") ? (envArg || "dev") : "dev";
+  // todo (yoav): dev, canary, and stable;
+  const buildEnvironment: "dev" | "canary" | "stable" =
+    validEnvironments.includes(envArg || "dev") ? (envArg || "dev") : "dev";
 
 // Determine build targets
 type BuildTarget = { os: 'macos' | 'win' | 'linux', arch: 'arm64' | 'x64' };
@@ -1893,15 +1899,27 @@ exec "\$LAUNCHER_BINARY" "\$@"
 
 } 
 
-function getConfig() {
+async function getConfig() {
   let loadedConfig = {};
-  if (existsSync(configPath)) {
-    const configFileContents = readFileSync(configPath, "utf8");
-    // Note: we want this to hard fail if there's a syntax error
+  const foundConfigPath = findConfigFile();
+  
+  if (foundConfigPath) {
+    console.log(`Using config file: ${basename(foundConfigPath)}`);
+    
     try {
-      loadedConfig = JSON.parse(configFileContents);
+      // Use dynamic import for TypeScript ESM files
+      // Bun handles TypeScript natively, no transpilation needed
+      const configModule = await import(foundConfigPath);
+      loadedConfig = configModule.default || configModule;
+      
+      // Validate that we got a valid config object
+      if (!loadedConfig || typeof loadedConfig !== 'object') {
+        console.error("Config file must export a default object");
+        console.error("using default config instead");
+        loadedConfig = {};
+      }
     } catch (error) {
-      console.error("Failed to parse config file:", error);
+      console.error("Failed to load config file:", error);
       console.error("using default config instead");
     }
   }
@@ -2606,3 +2624,11 @@ function createAppBundle(bundleName: string, parentFolder: string, targetOS: 'ma
     throw new Error(`Unsupported OS: ${targetOS}`);
   }
 }
+
+} // End of main() function
+
+// Run the main function
+main().catch((error) => {
+  console.error('Fatal error:', error);
+  process.exit(1);
+});

package/templates/hello-world/electrobun.config.ts

@@ -0,0 +1,28 @@
+export default {
+    app: {
+        name: "hello-world",
+        identifier: "helloworld.electrobun.dev",
+        version: "0.0.1",
+    },
+    build: {
+        views: {
+            mainview: {
+                entrypoint: "src/mainview/index.ts",
+                external: [],
+            },
+        },
+        copy: {
+            "src/mainview/index.html": "views/mainview/index.html",
+            "src/mainview/index.css": "views/mainview/index.css",
+        },
+        mac: {
+            bundleCEF: false,
+        },
+        linux: {
+            bundleCEF: false,
+        },
+        win: {
+            bundleCEF: false,
+        },
+    },
+};

package/templates/hello-world/package.json

@@ -8,7 +8,7 @@
     "start": "bun run build && bun run dev"
   },
   "dependencies": {
-    "electrobun": "^0.0.19-beta.115"
+    "electrobun": "latest"
   },
   "devDependencies": {
     "@types/bun": "latest"