electrobun 0.0.19-beta.97 → 0.1.0

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();

package/templates/interactive-playground/src/bun/index.ts

@@ -0,0 +1,124 @@
+import Electrobun, { BrowserWindow, BrowserView } from "electrobun/bun";
+import { type PlaygroundRPC } from "./types/rpc";
+
+// Import demo modules
+import { windowManager } from "./demos/windows";
+import { menuManager } from "./demos/menus";
+import { fileManager } from "./demos/files";
+import { rpcTester } from "./demos/rpc";
+
+console.log("🚀 Electrobun Interactive Playground starting...");
+
+// Set up RPC communication
+const rpc = BrowserView.defineRPC<PlaygroundRPC>({
+  maxRequestTime: 10000,
+  handlers: {
+    requests: {
+      // Window Management
+      createWindow: windowManager.createWindow.bind(windowManager),
+      closeWindow: windowManager.closeWindow.bind(windowManager),
+      focusWindow: windowManager.focusWindow.bind(windowManager),
+      getWindowList: windowManager.getWindowList.bind(windowManager),
+
+      // RPC Testing
+      doMath: rpcTester.doMath.bind(rpcTester),
+      echoBigData: rpcTester.echoBigData.bind(rpcTester),
+
+      // Menu Operations
+      createTray: menuManager.createTray.bind(menuManager),
+      removeTray: menuManager.removeTray.bind(menuManager),
+      showContextMenu: menuManager.showContextMenu.bind(menuManager),
+
+      // File Operations
+      openFileDialog: fileManager.openFileDialog.bind(fileManager),
+      moveToTrash: fileManager.moveToTrash.bind(fileManager),
+      showInFinder: fileManager.showInFinder.bind(fileManager),
+
+      // WebView Operations (placeholder)
+      createWebView: async (url: string) => ({ id: 1 }),
+      executeJSInWebView: async (params: { id: number; script: string }) => null,
+
+
+    },
+    messages: {
+      "*": (messageName, payload) => {
+        console.log(`📨 Message received: ${messageName}`, payload);
+      },
+    },
+  },
+});
+
+// Create main playground window
+const mainWindow = new BrowserWindow({
+  title: "Electrobun Interactive Playground",
+  url: "views://mainview/index.html",
+  renderer: "cef",
+  frame: {
+    width: 1400,
+    height: 900,
+    x: 100,
+    y: 100,
+  },
+  titleBarStyle: "default",
+  rpc,
+});
+
+// Set up event forwarding from demo modules to the UI
+windowManager.onWindowCreated = (id, title) => {
+  rpc.send.windowCreated({ id, title });
+};
+
+windowManager.onWindowClosed = (id) => {
+  rpc.send.windowClosed({ id });
+};
+
+windowManager.onWindowFocused = (id) => {
+  rpc.send.windowFocused({ id });
+};
+
+menuManager.onTrayClicked = (id, action) => {
+  rpc.send.trayClicked({ id, action });
+  console.log(`🔔 Tray ${id} clicked: ${action}`);
+};
+
+menuManager.onMenuClicked = (action) => {
+  rpc.send.menuClicked({ action });
+  console.log(`🎛️ Menu clicked: ${action}`);
+};
+
+fileManager.onFileSelected = (paths) => {
+  rpc.send.fileSelected({ paths });
+  console.log(`📁 Files selected:`, paths);
+};
+
+fileManager.onSystemEvent = (event) => {
+  rpc.send.systemEvent(event);
+  console.log(`⚙️ System event:`, event);
+};
+
+rpcTester.onRpcTestResult = (data) => {
+  rpc.send.rpcTestResult(data);
+  console.log(`📡 RPC test result:`, data);
+};
+
+
+
+// Listen for global events
+Electrobun.events.on("application-menu-clicked", (e) => {
+  menuManager.onMenuClicked?.(e.data.action);
+});
+
+Electrobun.events.on("context-menu-clicked", (e) => {
+  menuManager.onMenuClicked?.(e.data.action);
+});
+
+// Send initial status
+mainWindow.webview.on("dom-ready", () => {
+  console.log("✅ Main window DOM ready");
+  rpc.send.logMessage({ 
+    level: 'info', 
+    message: 'Electrobun Interactive Playground loaded successfully!' 
+  });
+});
+
+console.log("🎮 Playground initialized successfully");

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

@@ -0,0 +1,109 @@
+import { type RPCSchema } from "electrobun";
+
+export type PlaygroundRPC = {
+  bun: RPCSchema<{
+    requests: {
+      // Window Management
+      createWindow: {
+        params: {
+          width: number;
+          height: number;
+          x: number;
+          y: number;
+          frameless?: boolean;
+          transparent?: boolean;
+          alwaysOnTop?: boolean;
+        };
+        response: { id: number };
+      };
+      closeWindow: {
+        params: number; // window id
+        response: void;
+      };
+      focusWindow: {
+        params: number; // window id
+        response: void;
+      };
+      getWindowList: {
+        params: void;
+        response: Array<{ id: number; title: string }>;
+      };
+      
+      // RPC Testing
+      doMath: {
+        params: { a: number; b: number; operation: string };
+        response: number;
+      };
+      echoBigData: {
+        params: string;
+        response: string;
+      };
+      
+      // Menu Operations
+      createTray: {
+        params: { title: string; image?: string };
+        response: { id: number };
+      };
+      removeTray: {
+        params: number; // tray id
+        response: void;
+      };
+      showContextMenu: {
+        params: { x: number; y: number };
+        response: void;
+      };
+      
+      // File Operations
+      openFileDialog: {
+        params: {
+          multiple?: boolean;
+          fileTypes?: string[];
+          startingFolder?: string;
+        };
+        response: string[];
+      };
+      moveToTrash: {
+        params: string; // file path
+        response: void;
+      };
+      showInFinder: {
+        params: string; // file path
+        response: void;
+      };
+      
+      // WebView Operations
+      createWebView: {
+        params: string; // url
+        response: { id: number };
+      };
+      executeJSInWebView: {
+        params: { id: number; script: string };
+        response: any;
+      };
+      
+      
+    };
+    messages: {};
+  }>;
+  
+  webview: RPCSchema<{
+    requests: {};
+    messages: {
+      // Messages from bun to webview
+      windowCreated: { id: number; title: string };
+      windowClosed: { id: number };
+      windowFocused: { id: number };
+      
+      trayClicked: { id: number; action: string };
+      menuClicked: { action: string };
+      
+      fileSelected: { paths: string[] };
+      
+      rpcTestResult: { operation: string; result: any; duration: number };
+      
+      systemEvent: { type: string; details: any };
+      
+      logMessage: { level: 'info' | 'warn' | 'error'; message: string };
+    };
+  }>;
+};

package/templates/interactive-playground/src/mainview/components/EventLog.ts

@@ -0,0 +1,107 @@
+interface LogEntry {
+  timestamp: Date;
+  level: 'info' | 'warn' | 'error';
+  message: string;
+  data?: any;
+}
+
+export class EventLog {
+  private entries: LogEntry[] = [];
+  private isOpen: boolean = false;
+  private filters: Set<string> = new Set(['info', 'warn', 'error']);
+
+  constructor() {
+    this.initializeEventListeners();
+  }
+
+  private initializeEventListeners() {
+    const toggle = document.getElementById('event-log-toggle');
+    const clearBtn = document.getElementById('clear-log');
+    const filterCheckboxes = document.querySelectorAll('.event-log-filters input[type="checkbox"]');
+
+    toggle?.addEventListener('click', () => {
+      this.toggle();
+    });
+
+    clearBtn?.addEventListener('click', () => {
+      this.clear();
+    });
+
+    filterCheckboxes.forEach(checkbox => {
+      checkbox.addEventListener('change', (e) => {
+        const target = e.target as HTMLInputElement;
+        const level = target.getAttribute('data-level');
+        if (level) {
+          if (target.checked) {
+            this.filters.add(level);
+          } else {
+            this.filters.delete(level);
+          }
+          this.render();
+        }
+      });
+    });
+  }
+
+  toggle() {
+    this.isOpen = !this.isOpen;
+    const eventLog = document.getElementById('event-log');
+    eventLog?.classList.toggle('open', this.isOpen);
+  }
+
+  addEntry(level: 'info' | 'warn' | 'error', message: string, data?: any) {
+    const entry: LogEntry = {
+      timestamp: new Date(),
+      level,
+      message,
+      data
+    };
+
+    this.entries.unshift(entry); // Add to beginning
+
+    // Keep only last 100 entries
+    if (this.entries.length > 100) {
+      this.entries = this.entries.slice(0, 100);
+    }
+
+    this.render();
+  }
+
+  clear() {
+    this.entries = [];
+    this.render();
+  }
+
+  private render() {
+    const container = document.getElementById('event-log-list');
+    if (!container) return;
+
+    const filteredEntries = this.entries.filter(entry => this.filters.has(entry.level));
+
+    container.innerHTML = filteredEntries.map(entry => `
+      <div class="event-entry ${entry.level}">
+        <div class="event-time">${this.formatTime(entry.timestamp)}</div>
+        <div class="event-message">${this.escapeHtml(entry.message)}</div>
+        ${entry.data ? `<pre class="event-data">${this.escapeHtml(JSON.stringify(entry.data, null, 2))}</pre>` : ''}
+      </div>
+    `).join('');
+
+    // Auto-scroll to top for new entries
+    container.scrollTop = 0;
+  }
+
+  private formatTime(date: Date): string {
+    return date.toLocaleTimeString('en-US', { 
+      hour12: false,
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit'
+    });
+  }
+
+  private escapeHtml(text: string): string {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+}