electrobun 0.5.0-beta.0 → 0.7.0-beta.0

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

@@ -1,238 +0,0 @@
-import Electrobun, { Electroview } from "electrobun/view";
-import { type PlaygroundRPC } from "../bun/types/rpc";
-
-// Import components
-import { Sidebar } from "./components/Sidebar";
-import { EventLog } from "./components/EventLog";
-import { Toast } from "./components/Toast";
-
-// Import demos
-import { WindowDemo } from "./demos/WindowDemo";
-import { RPCDemo } from "./demos/RPCDemo";
-import { MenuDemo } from "./demos/MenuDemo";
-import { TrayDemo } from "./demos/TrayDemo";
-import { FileDemo } from "./demos/FileDemo";
-import { WebViewDemo } from "./demos/WebViewDemo";
-
-class InteractivePlayground {
-  private electrobun: any;
-  private sidebar: Sidebar;
-  private eventLog: EventLog;
-  private demos: Map<string, any> = new Map();
-
-  constructor() {
-    console.log("🎮 Initializing Interactive Playground...");
-
-    // Set up RPC
-    const rpc = Electroview.defineRPC<PlaygroundRPC>({
-      maxRequestTime: 10000,
-      handlers: {
-        requests: {},
-        messages: {
-          // Window events
-          windowCreated: (data) => {
-            this.eventLog.addEntry('info', `Window created: ${data.title}`, data);
-            this.demos.get('windows')?.onWindowCreated(data);
-            Toast.success(`Window created: ${data.title}`);
-          },
-          
-          windowClosed: (data) => {
-            this.eventLog.addEntry('info', `Window closed: ${data.id}`, data);
-            this.demos.get('windows')?.onWindowClosed(data);
-            Toast.info(`Window ${data.id} closed`);
-          },
-          
-          windowFocused: (data) => {
-            this.eventLog.addEntry('info', `Window focused: ${data.id}`, data);
-            this.demos.get('windows')?.onWindowFocused(data);
-          },
-
-          // Tray events
-          trayClicked: (data) => {
-            this.eventLog.addEntry('info', `Tray clicked: ${data.action}`, data);
-            this.demos.get('tray')?.onTrayClicked?.(data);
-            Toast.info(`Tray action: ${data.action}`);
-          },
-
-          // Menu events
-          menuClicked: (data) => {
-            this.eventLog.addEntry('info', `Menu clicked: ${data.action}`, data);
-            this.demos.get('menus')?.onMenuClicked?.(data);
-            Toast.info(`Menu action: ${data.action}`);
-          },
-
-          // File events
-          fileSelected: (data) => {
-            this.eventLog.addEntry('info', `Files selected: ${data.paths.length} files`, data);
-            this.demos.get('files')?.onFileSelected(data);
-            Toast.success(`Selected ${data.paths.length} file(s)`);
-          },
-
-          // RPC test results
-          rpcTestResult: (data) => {
-            this.eventLog.addEntry('info', `RPC test completed: ${data.operation}`, data);
-            this.demos.get('rpc')?.onRpcTestResult(data);
-          },
-
-          // System events
-          systemEvent: (data) => {
-            this.eventLog.addEntry('info', `System event: ${data.type}`, data);
-            Toast.info(`System: ${data.type}`);
-          },
-
-
-          // Log messages
-          logMessage: (data) => {
-            this.eventLog.addEntry(data.level, data.message);
-            if (data.level === 'error') {
-              Toast.error(data.message);
-            } else if (data.level === 'warn') {
-              Toast.warning(data.message);
-            } else {
-              Toast.info(data.message);
-            }
-          },
-        },
-      },
-    });
-
-    // Create Electroview instance
-    this.electrobun = new Electrobun.Electroview({ rpc });
-
-    // Initialize components
-    this.sidebar = new Sidebar();
-    this.eventLog = new EventLog();
-
-    // Initialize demos
-    this.initializeDemos();
-
-    // Set up event listeners
-    this.setupEventListeners();
-
-    // Load initial demo
-    this.loadDemo('windows');
-
-    console.log("✅ Interactive Playground initialized");
-  }
-
-  private initializeDemos() {
-    this.demos.set('windows', new WindowDemo());
-    this.demos.set('rpc', new RPCDemo());
-    this.demos.set('menus', new MenuDemo());
-    this.demos.set('tray', new TrayDemo());
-    this.demos.set('files', new FileDemo());
-    this.demos.set('webviews', new WebViewDemo());
-    // Add more demos as they're implemented
-  }
-
-  private setupEventListeners() {
-    this.sidebar.onDemoChangeCallback((demo) => {
-      this.loadDemo(demo);
-    });
-
-    // Global error handling
-    window.addEventListener('error', (event) => {
-      this.eventLog.addEntry('error', event.message, {
-        filename: event.filename,
-        lineno: event.lineno,
-        colno: event.colno
-      });
-      Toast.error(`JavaScript Error: ${event.message}`);
-    });
-
-    // Unhandled promise rejections
-    window.addEventListener('unhandledrejection', (event) => {
-      this.eventLog.addEntry('error', `Unhandled Promise Rejection: ${event.reason}`, event.reason);
-      Toast.error('Unhandled Promise Rejection');
-    });
-  }
-
-  private loadDemo(demoName: string) {
-    const content = document.getElementById('demo-content');
-    if (!content) return;
-
-    // CRITICAL: Cleanup any existing webviews before switching demos
-    // This prevents crashes when CEF tries to clean up stale webview references
-    this.cleanupWebviews();
-
-    const demo = this.demos.get(demoName);
-    if (!demo) {
-      content.innerHTML = this.renderPlaceholderDemo(demoName);
-      return;
-    }
-
-    // Render demo content
-    content.innerHTML = demo.render();
-
-    // Initialize demo with RPC
-    if (demo.initialize) {
-      demo.initialize(this.electrobun.rpc);
-    }
-
-    this.eventLog.addEntry('info', `Loaded demo: ${demoName}`);
-  }
-
-  private cleanupWebviews() {
-    // Find all webview elements and properly remove them
-    const webviews = document.querySelectorAll('electrobun-webview');
-    
-    webviews.forEach((webview: any) => {
-      try {
-        // Call the native remove method if it exists
-        if (typeof webview.remove === 'function') {
-          webview.remove();
-        }
-      } catch (error) {
-        console.warn('Error during webview cleanup:', error);
-      }
-    });
-
-    // Additional safety: clear any webview-related event listeners
-    // This helps prevent memory leaks and stale references
-    webviews.forEach((webview: any) => {
-      try {
-        if (typeof webview.removeAllEventListeners === 'function') {
-          webview.removeAllEventListeners();
-        }
-      } catch (error) {
-        // Silently ignore if method doesn't exist
-      }
-    });
-  }
-
-  private renderPlaceholderDemo(demoName: string): string {
-    const demoInfo: Record<string, { icon: string; title: string; description: string }> = {
-      menus: { icon: '🎛️', title: 'Menu Systems', description: 'Application and context menus' },
-      tray: { icon: '🔔', title: 'System Tray', description: 'Tray icon management' },
-      files: { icon: '🗂️', title: 'File Operations', description: 'File dialogs and system integration' },
-      webviews: { icon: '🌐', title: 'WebView Features', description: 'Advanced webview capabilities' }
-    };
-
-    const info = demoInfo[demoName] || { icon: '🔧', title: 'Coming Soon', description: 'This demo is under development' };
-
-    return `
-      <div class="demo-section">
-        <div class="demo-header">
-          <span class="demo-icon">${info.icon}</span>
-          <div>
-            <h2 class="demo-title">${info.title}</h2>
-            <p class="demo-description">${info.description}</p>
-          </div>
-        </div>
-        
-        <div class="demo-controls">
-          <div style="text-align: center; padding: 3rem; color: #718096;">
-            <h3>Coming Soon!</h3>
-            <p>This demo is currently under development.</p>
-            <p>Check back soon for interactive examples of ${info.title.toLowerCase()}.</p>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-}
-
-// Initialize the playground when DOM is ready
-document.addEventListener('DOMContentLoaded', () => {
-  new InteractivePlayground();
-});

package/templates/multitab-browser/README.md

@@ -1,34 +0,0 @@
-# Multitab Browser
-
-A demonstration of building a multi-tab browser using Electrobun framework.
-
-## Features
-
-- Multiple browser tabs with independent webviews
-- Navigation controls (back, forward, refresh, home)
-- URL bar with navigation
-- Tab management (new, close, switch)
-- Bookmark functionality
-- History tracking
-
-## Running the Demo
-
-```bash
-# Install dependencies
-bun install
-
-# Run in development mode
-bun run dev
-
-# Build for production
-bun run build
-```
-
-## Architecture
-
-This template demonstrates:
-- Using BrowserView for embedded web content
-- RPC communication between main process and renderer
-- Tab state management
-- Keyboard shortcuts
-- URL handling and navigation

package/templates/multitab-browser/electrobun.config.ts

@@ -1,32 +0,0 @@
-export default {
-    app: {
-        name: "multitab-browser",
-        identifier: "multitab-browser.electrobun.dev",
-        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",
-        },
-        mac: {
-            bundleCEF: true,
-        },
-        linux: {
-            bundleCEF: true,
-        },
-        win: {
-            bundleCEF: true,
-        },
-    },
-};

package/templates/multitab-browser/package-lock.json

@@ -1,20 +0,0 @@
-{
-  "name": "multitab-browser",
-  "version": "0.0.1",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "name": "multitab-browser",
-      "version": "0.0.1",
-      "dependencies": {
-        "electrobun": "file:../"
-      }
-    },
-    "..": {},
-    "node_modules/electrobun": {
-      "resolved": "..",
-      "link": true
-    }
-  }
-}

package/templates/multitab-browser/package.json

@@ -1,12 +0,0 @@
-{
-  "name": "multitab-browser",
-  "version": "0.0.1",
-  "description": "A multi-tab browser demo for Electrobun",
-  "type": "module",
-  "scripts": {
-    "start": "electrobun build && electrobun dev"    
-  },
-  "dependencies": {
-    "electrobun": "latest"
-  }
-}

package/templates/multitab-browser/src/bun/index.ts

@@ -1,144 +0,0 @@
-import Electrobun, { BrowserWindow, BrowserView } from "electrobun/bun";
-
-console.log("🌐 Multitab Browser starting...");
-
-// Simplified tab management - demo without real webviews
-const tabs = new Map();
-let nextTabId = 1;
-let mainRPC: any = null; // Will be set after window creation
-
-// Set up RPC using the correct API pattern from interactive-playground
-const rpc = BrowserView.defineRPC({
-  maxRequestTime: 10000,
-  handlers: {
-    requests: {
-      createTab: async ({ url }: { url?: string }) => {
-        const id = `tab-${nextTabId++}`;
-        
-        const tab = {
-          id,
-          title: "New Tab",
-          url: url || "https://electrobun.dev",
-          canGoBack: false,
-          canGoForward: false,
-          isLoading: false,
-        };
-        
-        tabs.set(id, tab);
-        
-        // Simulate getting the title after a delay
-        setTimeout(() => {
-          if (mainRPC) {
-            tab.title = new URL(tab.url).hostname || "New Tab";
-            mainRPC.send("tabUpdated", tab);
-          }
-        }, 500);
-        
-        return tab;
-      },
-      
-      closeTab: async ({ id }: { id: string }) => {
-        tabs.delete(id);
-        return;
-      },
-      
-      activateTab: async ({ tabId }: { tabId: string }) => {
-        // Just return the tab info - the iframe switching happens in the frontend
-        return tabs.get(tabId);
-      },
-      
-      navigateTo: async ({ tabId, url }: { tabId: string; url: string }) => {
-        const tab = tabs.get(tabId);
-        
-        if (tab) {
-          // Process URL - add https if needed, or search
-          let processedUrl = url;
-          if (!url.startsWith("http://") && !url.startsWith("https://")) {
-            if (url.includes(".") && !url.includes(" ")) {
-              processedUrl = `https://${url}`;
-            } else {
-              processedUrl = `https://www.google.com/search?q=${encodeURIComponent(url)}`;
-            }
-          }
-          
-          tab.url = processedUrl;
-          tab.isLoading = false;
-          
-          // Simulate title update
-          setTimeout(() => {
-            if (mainRPC && tab) {
-              try {
-                tab.title = new URL(processedUrl).hostname || "New Tab";
-              } catch {
-                tab.title = processedUrl;
-              }
-              mainRPC.send("tabUpdated", tab);
-            }
-          }, 500);
-        }
-        
-        return tab;
-      },
-      
-      goBack: async ({ tabId }: { tabId: string }) => {
-        // In a real implementation, we'd track history
-        console.log("Go back for tab:", tabId);
-        return tabs.get(tabId);
-      },
-      
-      goForward: async ({ tabId }: { tabId: string }) => {
-        // In a real implementation, we'd track history
-        console.log("Go forward for tab:", tabId);
-        return tabs.get(tabId);
-      },
-      
-      reload: async ({ tabId }: { tabId: string }) => {
-        const tab = tabs.get(tabId);
-        if (tab) {
-          tab.isLoading = true;
-          if (mainRPC) {
-            mainRPC.send("tabUpdated", tab);
-          }
-          
-          setTimeout(() => {
-            tab.isLoading = false;
-            if (mainRPC) {
-              mainRPC.send("tabUpdated", tab);
-            }
-          }, 1000);
-        }
-        return tab;
-      },
-    },
-    messages: {
-      "*": (messageName: string, payload: any) => {
-        console.log(`📨 Browser message: ${messageName}`, payload);
-      },
-    },
-  },
-});
-
-// Create main browser window with RPC
-const mainWindow = new BrowserWindow({
-  title: "Multitab Browser",
-  url: "views://mainview/index.html",
-  frame: {
-    width: 1400,
-    height: 900,
-    x: 100,
-    y: 100,
-  },
-  rpc,
-});
-
-// Store reference to mainWindow RPC for sending messages
-mainRPC = mainWindow.webview.rpc;
-
-// Listen for window close event and exit the app
-// For this browser app, we want to exit when the main window is closed
-mainWindow.on("close", () => {
-  console.log("🚪 Main window closed - exiting app");
-  process.exit(0);
-});
-
-console.log("✅ Multitab Browser initialized");

package/templates/multitab-browser/src/bun/tabManager.ts

@@ -1,200 +0,0 @@
-import { BrowserView } from "electrobun/bun";
-import { type Tab, type Bookmark } from "./types/rpc";
-
-export class TabManager {
-  private tabs: Map<string, Tab> = new Map();
-  private webviews: Map<string, BrowserView> = new Map();
-  private bookmarks: Map<string, Bookmark> = new Map();
-  private nextTabId = 1;
-  
-  public onTabUpdate?: (tab: Tab) => void;
-  public onLoadingStateChange?: (tabId: string, isLoading: boolean) => void;
-
-  constructor() {
-    // Load bookmarks from storage if available
-    this.loadBookmarks();
-  }
-
-  async createTab(url: string): Promise<Tab> {
-    const id = `tab-${this.nextTabId++}`;
-    
-    // Create a BrowserView for this tab
-    const webview = new BrowserView({
-      url,
-      frame: {
-        x: 0,
-        y: 100, // Leave space for tab bar and navigation
-        width: 1400,
-        height: 800,
-      },
-    });
-
-    // Set up webview event handlers
-    webview.on("page-title-updated", (event) => {
-      const tab = this.tabs.get(id);
-      if (tab) {
-        tab.title = event.data.title || "New Tab";
-        this.onTabUpdate?.(tab);
-      }
-    });
-
-    webview.on("did-start-loading", () => {
-      const tab = this.tabs.get(id);
-      if (tab) {
-        tab.isLoading = true;
-        this.onLoadingStateChange?.(id, true);
-      }
-    });
-
-    webview.on("did-stop-loading", () => {
-      const tab = this.tabs.get(id);
-      if (tab) {
-        tab.isLoading = false;
-        this.onLoadingStateChange?.(id, false);
-      }
-    });
-
-    webview.on("did-navigate", (event) => {
-      const tab = this.tabs.get(id);
-      if (tab && event.data.url) {
-        tab.url = event.data.url;
-        // Update navigation state
-        this.updateNavigationState(id);
-        this.onTabUpdate?.(tab);
-      }
-    });
-
-    const tab: Tab = {
-      id,
-      title: "New Tab",
-      url,
-      canGoBack: false,
-      canGoForward: false,
-      isLoading: true,
-    };
-
-    this.tabs.set(id, tab);
-    this.webviews.set(id, webview);
-    
-    return tab;
-  }
-
-  async closeTab(id: string): Promise<void> {
-    const webview = this.webviews.get(id);
-    if (webview) {
-      webview.destroy();
-      this.webviews.delete(id);
-    }
-    this.tabs.delete(id);
-  }
-
-  async navigateTo(tabId: string, url: string): Promise<void> {
-    const webview = this.webviews.get(tabId);
-    if (webview) {
-      // Ensure URL has protocol
-      if (!url.startsWith("http://") && !url.startsWith("https://")) {
-        // Check if it looks like a domain
-        if (url.includes(".") && !url.includes(" ")) {
-          url = `https://${url}`;
-        } else {
-          // Treat as search query
-          url = `https://www.google.com/search?q=${encodeURIComponent(url)}`;
-        }
-      }
-      
-      await webview.loadURL(url);
-      const tab = this.tabs.get(tabId);
-      if (tab) {
-        tab.url = url;
-        tab.isLoading = true;
-        this.onTabUpdate?.(tab);
-      }
-    }
-  }
-
-  async goBack(tabId: string): Promise<void> {
-    const webview = this.webviews.get(tabId);
-    if (webview) {
-      await webview.goBack();
-      this.updateNavigationState(tabId);
-    }
-  }
-
-  async goForward(tabId: string): Promise<void> {
-    const webview = this.webviews.get(tabId);
-    if (webview) {
-      await webview.goForward();
-      this.updateNavigationState(tabId);
-    }
-  }
-
-  async reload(tabId: string): Promise<void> {
-    const webview = this.webviews.get(tabId);
-    if (webview) {
-      await webview.reload();
-      const tab = this.tabs.get(tabId);
-      if (tab) {
-        tab.isLoading = true;
-        this.onTabUpdate?.(tab);
-      }
-    }
-  }
-
-  async getTabInfo(tabId: string): Promise<Tab | undefined> {
-    return this.tabs.get(tabId);
-  }
-
-  getAllTabs(): Tab[] {
-    return Array.from(this.tabs.values());
-  }
-
-  private async updateNavigationState(tabId: string): Promise<void> {
-    const webview = this.webviews.get(tabId);
-    const tab = this.tabs.get(tabId);
-    
-    if (webview && tab) {
-      // Note: These methods might not be available in current Electrobun API
-      // This is a placeholder for navigation state management
-      tab.canGoBack = false; // Would need webview.canGoBack()
-      tab.canGoForward = false; // Would need webview.canGoForward()
-    }
-  }
-
-  // Bookmark management
-  addBookmark(title: string, url: string): Bookmark {
-    const id = `bookmark-${Date.now()}`;
-    const bookmark: Bookmark = {
-      id,
-      title,
-      url,
-      createdAt: Date.now(),
-    };
-    
-    this.bookmarks.set(id, bookmark);
-    this.saveBookmarks();
-    return bookmark;
-  }
-
-  getBookmarks(): Bookmark[] {
-    return Array.from(this.bookmarks.values()).sort((a, b) => b.createdAt - a.createdAt);
-  }
-
-  removeBookmark(id: string): void {
-    this.bookmarks.delete(id);
-    this.saveBookmarks();
-  }
-
-  private loadBookmarks(): void {
-    // In a real app, load from persistent storage
-    // For demo, we'll start with some default bookmarks
-    this.addBookmark("Google", "https://www.google.com");
-    this.addBookmark("GitHub", "https://github.com");
-    this.addBookmark("Electrobun", "https://electrobun.dev");
-  }
-
-  private saveBookmarks(): void {
-    // In a real app, save to persistent storage
-    // For demo, we'll just log
-    console.log("Bookmarks saved:", this.getBookmarks());
-  }
-}