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

package/templates/interactive-playground/README.md

@@ -0,0 +1,26 @@
+# Electrobun Interactive Playground
+
+An interactive playground for exploring all Electrobun features through a clean, organized interface.
+
+## Features
+
+- 🪟 **Window Management** - Create and manage multiple windows
+- 📡 **RPC Communication** - Test bidirectional messaging
+- 🎛️ **Menu Systems** - Application and context menus
+- 🔔 **System Tray** - Tray icon management
+- 🗂️ **File Operations** - File dialogs and system integration
+- 🌐 **WebView Features** - Advanced webview capabilities
+- ⚙️ **System Utilities** - Platform info and notifications
+- 🔄 **Auto-Updates** - Update system demonstration
+
+## Getting Started
+
+```bash
+npm install
+npm run build:dev
+npm start
+```
+
+## Development
+
+This template demonstrates best practices for building Electrobun applications with modern UI patterns and comprehensive feature coverage.

package/templates/interactive-playground/electrobun.config.ts

@@ -0,0 +1,36 @@
+export default {
+    app: {
+        name: "Electrobun Interactive Playground",
+        identifier: "dev.electrobun.interactive-playground",
+        version: "0.0.1",
+    },
+    build: {
+        bun: {
+            entrypoint: "src/bun/index.ts",
+            external: [],
+        },
+        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",
+            "assets/tray-icon.png": "views/assets/tray-icon.png",
+        },
+        mac: {
+            codesign: true,
+            notarize: false,
+            bundleCEF: true,
+            entitlements: {},
+        },
+        linux: {
+            bundleCEF: true,
+        },
+        win: {
+            bundleCEF: true,
+        },
+    },
+};

package/templates/interactive-playground/package-lock.json

@@ -0,0 +1,36 @@
+{
+  "name": "electrobun-interactive-playground",
+  "version": "0.0.1",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "electrobun-interactive-playground",
+      "version": "0.0.1",
+      "dependencies": {
+        "electrobun": "file:../../"
+      }
+    },
+    "../..": {
+      "version": "0.0.19-beta.118",
+      "license": "MIT",
+      "dependencies": {
+        "@oneidentity/zstd-js": "^1.0.3",
+        "archiver": "^7.0.1",
+        "rpc-anywhere": "1.5.0",
+        "tar": "^6.2.1"
+      },
+      "bin": {
+        "electrobun": "bin/electrobun.cjs"
+      },
+      "devDependencies": {
+        "@types/archiver": "^6.0.3",
+        "@types/bun": "1.1.9"
+      }
+    },
+    "node_modules/electrobun": {
+      "resolved": "../..",
+      "link": true
+    }
+  }
+}

package/templates/interactive-playground/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "electrobun-interactive-playground",
+  "version": "0.0.1",
+  "description": "Interactive playground for exploring Electrobun features",
+  "type": "module",
+  "scripts": {
+    "build:dev": "electrobun build",
+    "build:canary": "electrobun build --canary",
+    "start": "electrobun dev",
+    "start:canary": "electrobun dev --canary"
+  },
+  "dependencies": {
+    "electrobun": "latest"
+  }
+}

package/templates/interactive-playground/src/bun/demos/files.ts

@@ -0,0 +1,70 @@
+import { Utils } from "electrobun/bun";
+import { join } from "path";
+import { homedir } from "os";
+
+class FileManager {
+  async openFileDialog(options: {
+    multiple?: boolean;
+    fileTypes?: string[];
+    startingFolder?: string;
+  }) {
+    try {
+      const result = await Utils.openFileDialog({
+        startingFolder: options.startingFolder || join(homedir(), "Desktop"),
+        allowedFileTypes: options.fileTypes?.join(",") || "*",
+        canChooseFiles: true,
+        canChooseDirectory: false,
+        allowsMultipleSelection: options.multiple || false,
+      });
+
+      // Filter out empty strings
+      const filteredResult = result.filter(path => path.trim() !== "");
+      this.onFileSelected?.(filteredResult);
+      
+      return filteredResult;
+    } catch (error) {
+      console.error("File dialog error:", error);
+      return [];
+    }
+  }
+
+  async moveToTrash(path: string) {
+    try {
+      await Utils.moveToTrash(path);
+      this.onSystemEvent?.({ 
+        type: 'file-trashed', 
+        details: { path, success: true } 
+      });
+    } catch (error) {
+      console.error("Move to trash error:", error);
+      this.onSystemEvent?.({ 
+        type: 'file-trashed', 
+        details: { path, success: false, error: error.message } 
+      });
+      throw error;
+    }
+  }
+
+  async showInFinder(path: string) {
+    try {
+      await Utils.showItemInFolder(path);
+      this.onSystemEvent?.({ 
+        type: 'show-in-finder', 
+        details: { path, success: true } 
+      });
+    } catch (error) {
+      console.error("Show in finder error:", error);
+      this.onSystemEvent?.({ 
+        type: 'show-in-finder', 
+        details: { path, success: false, error: error.message } 
+      });
+      throw error;
+    }
+  }
+
+  // Event callbacks
+  onFileSelected?: (paths: string[]) => void;
+  onSystemEvent?: (event: { type: string; details: any }) => void;
+}
+
+export const fileManager = new FileManager();

package/templates/interactive-playground/src/bun/demos/menus.ts

@@ -0,0 +1,139 @@
+import { ApplicationMenu, ContextMenu, Tray } from "electrobun/bun";
+
+class MenuManager {
+  private trays = new Map<number, Tray>();
+  private nextTrayId = 1;
+
+  constructor() {
+    this.setupApplicationMenu();
+  }
+
+  private setupApplicationMenu() {
+    ApplicationMenu.setApplicationMenu([
+      {
+        submenu: [
+          { label: "About", role: "about" },
+          { type: "separator" },
+          { label: "Quit", role: "quit", accelerator: "q" }
+        ],
+      },
+      {
+        label: "Edit",
+        submenu: [
+          { role: "undo" },
+          { role: "redo" },
+          { type: "separator" },
+          {
+            label: "Custom Demo Action",
+            action: "demo-action",
+            tooltip: "This is a demo menu item",
+          },
+          { type: "separator" },
+          { role: "cut" },
+          { role: "copy" },
+          { role: "paste" },
+          { role: "selectAll" },
+        ],
+      },
+      {
+        label: "View",
+        submenu: [
+          { role: "reload" },
+          { role: "forceReload" },
+          { role: "toggleDevTools" },
+          { type: "separator" },
+          { role: "resetZoom" },
+          { role: "zoomIn" },
+          { role: "zoomOut" },
+          { type: "separator" },
+          { role: "togglefullscreen" }
+        ],
+      },
+      {
+        label: "Window",
+        submenu: [
+          { role: "minimize" },
+          { role: "close" }
+        ],
+      }
+    ]);
+  }
+
+  async createTray(options: { title: string; image?: string }) {
+    const id = this.nextTrayId++;
+    
+    const tray = new Tray({
+      title: options.title,
+      image: options.image || "views://assets/tray-icon.png",
+      template: true,
+      width: 32,
+      height: 32,
+    });
+
+    // Set up tray menu
+    tray.setMenu([
+      {
+        type: "normal",
+        label: "Show Playground",
+        action: "show-playground",
+      },
+      {
+        type: "separator",
+      },
+      {
+        type: "normal",
+        label: "Demo Action",
+        action: "demo-tray-action",
+        tooltip: "This is a demo tray action",
+      },
+      {
+        type: "normal",
+        label: "Quit",
+        action: "quit-app",
+      },
+    ]);
+
+    tray.on("tray-clicked", (e) => {
+      this.onTrayClicked?.(id, e.data.action);
+    });
+
+    this.trays.set(id, tray);
+    return { id };
+  }
+
+  async removeTray(id: number) {
+    const tray = this.trays.get(id);
+    if (tray) {
+      tray.remove();
+      this.trays.delete(id);
+    }
+  }
+
+  async showContextMenu(params: { x: number; y: number }) {
+    ContextMenu.showContextMenu([
+      { role: "undo" },
+      { role: "redo" },
+      { type: "separator" },
+      {
+        label: "Demo Context Action",
+        action: "demo-context-action",
+        tooltip: "This is a demo context menu item",
+      },
+      {
+        label: "Disabled Action",
+        action: "disabled-action",
+        enabled: false,
+      },
+      { type: "separator" },
+      { role: "cut" },
+      { role: "copy" },
+      { role: "paste" },
+    ]);
+  }
+
+  // Event callbacks
+  onTrayClicked?: (id: number, action: string) => void;
+  onMenuClicked?: (action: string) => void;
+}
+
+export const menuManager = new MenuManager();

package/templates/interactive-playground/src/bun/demos/rpc.ts

@@ -0,0 +1,83 @@
+class RPCTester {
+  async doMath(data: { a: number; b: number; operation: string }): Promise<number> {
+    const startTime = Date.now();
+    let result: number;
+
+    switch (data.operation) {
+      case 'add':
+        result = data.a + data.b;
+        break;
+      case 'subtract':
+        result = data.a - data.b;
+        break;
+      case 'multiply':
+        result = data.a * data.b;
+        break;
+      case 'divide':
+        if (data.b === 0) throw new Error("Division by zero");
+        result = data.a / data.b;
+        break;
+      case 'power':
+        result = Math.pow(data.a, data.b);
+        break;
+      default:
+        throw new Error(`Unknown operation: ${data.operation}`);
+    }
+
+    const duration = Date.now() - startTime;
+    
+    // Don't send notification here - let the frontend handle timing and display
+    // to avoid duplicate entries
+    
+    return result;
+  }
+
+  async echoBigData(data: string): Promise<string> {
+    const startTime = Date.now();
+    
+    // Simulate some processing time
+    await new Promise(resolve => setTimeout(resolve, 100));
+    
+    const response = `Echo: ${data.slice(0, 100)}... (${data.length} chars)`;
+    const duration = Date.now() - startTime;
+    
+    // Don't send notification here - let the frontend handle timing and display
+    // to avoid duplicate entries
+
+    return response;
+  }
+
+  async performanceTest(messageSize: number, messageCount: number): Promise<{
+    totalTime: number;
+    averageTime: number;
+    messagesPerSecond: number;
+  }> {
+    const testData = "x".repeat(messageSize);
+    const results: number[] = [];
+
+    const startTime = Date.now();
+
+    for (let i = 0; i < messageCount; i++) {
+      const messageStart = Date.now();
+      await this.echoBigData(testData);
+      results.push(Date.now() - messageStart);
+    }
+
+    const totalTime = Date.now() - startTime;
+    const averageTime = results.reduce((a, b) => a + b, 0) / results.length;
+    const messagesPerSecond = (messageCount / totalTime) * 1000;
+
+    // Don't send notification here - let the frontend handle timing and display
+
+    return {
+      totalTime,
+      averageTime,
+      messagesPerSecond
+    };
+  }
+
+  // Event callbacks
+  onRpcTestResult?: (data: { operation: string; result: any; duration: number }) => void;
+}
+
+export const rpcTester = new RPCTester();

package/templates/interactive-playground/src/bun/demos/system.ts

@@ -0,0 +1,72 @@
+import Electrobun from "electrobun/bun";
+import { platform, arch, release } from "os";
+
+class SystemManager {
+  async getPlatformInfo() {
+    return {
+      platform: platform(),
+      arch: arch(),
+      version: release(),
+      electrobunVersion: "0.0.19-beta.118", // This should come from the actual API
+    };
+  }
+
+  async showNotification(options: {
+    title: string;
+    body: string;
+    icon?: string;
+  }) {
+    // Note: Notification API needs to be implemented in Electrobun
+    // For now, we'll simulate it
+    console.log("Notification:", options);
+    
+    this.onSystemEvent?.({
+      type: 'notification-shown',
+      details: {
+        title: options.title,
+        body: options.body,
+        timestamp: new Date().toISOString()
+      }
+    });
+
+    // In a real implementation, this would use the native notification system
+    return Promise.resolve();
+  }
+
+  async getClipboardText(): Promise<string> {
+    // Note: Clipboard API needs to be implemented in Electrobun
+    // This is a placeholder
+    return "Clipboard API not yet implemented";
+  }
+
+  async setClipboardText(text: string): Promise<void> {
+    // Note: Clipboard API needs to be implemented in Electrobun
+    console.log("Setting clipboard text:", text);
+    
+    this.onSystemEvent?.({
+      type: 'clipboard-set',
+      details: { text, timestamp: new Date().toISOString() }
+    });
+  }
+
+  async getScreenInfo() {
+    // Note: Screen API needs to be implemented in Electrobun
+    // This is a placeholder
+    return {
+      displays: [
+        {
+          id: 1,
+          width: 1920,
+          height: 1080,
+          scaleFactor: 1,
+          primary: true
+        }
+      ]
+    };
+  }
+
+  // Event callbacks
+  onSystemEvent?: (event: { type: string; details: any }) => void;
+}
+
+export const systemManager = new SystemManager();

package/templates/interactive-playground/src/bun/demos/updates.ts

@@ -0,0 +1,105 @@
+import Electrobun from "electrobun/bun";
+
+class UpdateManager {
+  async checkForUpdates() {
+    try {
+      const updateInfo = await Electrobun.Updater.checkForUpdate();
+      
+      this.onUpdateStatus?.({
+        status: 'checked',
+        progress: 100
+      });
+
+      return {
+        updateAvailable: updateInfo.updateAvailable,
+        currentVersion: Electrobun.Updater.getLocalVersion?.() || "0.0.19-beta.118",
+        latestVersion: updateInfo.latestVersion,
+      };
+    } catch (error) {
+      console.error("Update check error:", error);
+      
+      this.onUpdateStatus?.({
+        status: 'error',
+        progress: 0
+      });
+
+      return {
+        updateAvailable: false,
+        currentVersion: "0.0.19-beta.118",
+        error: error.message
+      };
+    }
+  }
+
+  async downloadUpdate() {
+    try {
+      this.onUpdateStatus?.({
+        status: 'downloading',
+        progress: 0
+      });
+
+      // Simulate download progress
+      for (let i = 0; i <= 100; i += 10) {
+        await new Promise(resolve => setTimeout(resolve, 200));
+        this.onUpdateStatus?.({
+          status: 'downloading',
+          progress: i
+        });
+      }
+
+      await Electrobun.Updater.downloadUpdate();
+      
+      this.onUpdateStatus?.({
+        status: 'downloaded',
+        progress: 100
+      });
+
+      return { success: true };
+    } catch (error) {
+      console.error("Update download error:", error);
+      
+      this.onUpdateStatus?.({
+        status: 'error',
+        progress: 0
+      });
+
+      return { success: false, error: error.message };
+    }
+  }
+
+  async applyUpdate() {
+    try {
+      this.onUpdateStatus?.({
+        status: 'applying',
+        progress: 50
+      });
+
+      await Electrobun.Updater.applyUpdate();
+      
+      this.onUpdateStatus?.({
+        status: 'applied',
+        progress: 100
+      });
+
+      return { success: true };
+    } catch (error) {
+      console.error("Update apply error:", error);
+      
+      this.onUpdateStatus?.({
+        status: 'error',
+        progress: 0
+      });
+
+      return { success: false, error: error.message };
+    }
+  }
+
+  getUpdateInfo() {
+    return Electrobun.Updater.updateInfo?.() || null;
+  }
+
+  // Event callbacks
+  onUpdateStatus?: (data: { status: string; progress?: number }) => void;
+}
+
+export const updateManager = new UpdateManager();

package/templates/interactive-playground/src/bun/demos/windows.ts

@@ -0,0 +1,90 @@
+import { BrowserWindow } from "electrobun/bun";
+
+class WindowManager {
+  private windows = new Map<number, BrowserWindow>();
+  private nextId = 1;
+
+  async createWindow(options: {
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+    frameless?: boolean;
+    transparent?: boolean;
+    alwaysOnTop?: boolean;
+  }) {
+    const id = this.nextId++;
+    
+    const window = new BrowserWindow({
+      title: `Demo Window ${id}`,
+      url: "views://mainview/index.html",
+      renderer: "cef",
+      frame: {
+        width: options.width,
+        height: options.height,
+        x: options.x,
+        y: options.y,
+      },
+      titleBarStyle: options.frameless ? "hiddenInset" : "default",
+      // For completely frameless, we need to set styleMask
+      styleMask: options.frameless ? {
+        Borderless: true,
+        Titled: false,
+        Closable: true,
+        Miniaturizable: true,
+        Resizable: true,
+      } : undefined,
+    });
+
+    this.windows.set(id, window);
+
+    // Listen for window events
+    window.on("close", () => {
+      this.windows.delete(id);
+      this.onWindowClosed?.(id);
+    });
+
+    window.on("resize", (event) => {
+      this.onWindowEvent?.({ type: 'resize', id, data: event.data });
+    });
+
+    window.on("move", (event) => {
+      this.onWindowEvent?.({ type: 'move', id, data: event.data });
+    });
+
+    this.onWindowCreated?.(id, `Demo Window ${id}`);
+    
+    return { id };
+  }
+
+  async closeWindow(id: number) {
+    const window = this.windows.get(id);
+    if (window) {
+      window.close();
+      this.windows.delete(id);
+    }
+  }
+
+  async focusWindow(id: number) {
+    const window = this.windows.get(id);
+    if (window) {
+      window.focus();
+      this.onWindowFocused?.(id);
+    }
+  }
+
+  async getWindowList() {
+    return Array.from(this.windows.entries()).map(([id, window]) => ({
+      id,
+      title: window.getTitle() || `Window ${id}`,
+    }));
+  }
+
+  // Event callbacks
+  onWindowCreated?: (id: number, title: string) => void;
+  onWindowClosed?: (id: number) => void;
+  onWindowFocused?: (id: number) => void;
+  onWindowEvent?: (event: { type: string; id: number; data: any }) => void;
+}
+
+export const windowManager = new WindowManager();