electrobun 0.0.19-beta.97 → 0.1.0

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

@@ -0,0 +1,144 @@
+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

@@ -0,0 +1,200 @@
+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());
+  }
+}

package/templates/multitab-browser/src/bun/types/rpc.ts

@@ -0,0 +1,78 @@
+import type { RPCSchema } from "electrobun/bun";
+
+export type Tab = {
+  id: string;
+  title: string;
+  url: string;
+  canGoBack: boolean;
+  canGoForward: boolean;
+  isLoading: boolean;
+  favicon?: string;
+};
+
+export type Bookmark = {
+  id: string;
+  title: string;
+  url: string;
+  createdAt: number;
+};
+
+export type BrowserRPC = {
+  bun: RPCSchema<{
+    requests: {
+      createTab: {
+        params: { url?: string };
+        response: Tab;
+      };
+      closeTab: {
+        params: { id: string };
+        response: void;
+      };
+      navigateTo: {
+        params: { tabId: string; url: string };
+        response: void;
+      };
+      goBack: {
+        params: { tabId: string };
+        response: void;
+      };
+      goForward: {
+        params: { tabId: string };
+        response: void;
+      };
+      reload: {
+        params: { tabId: string };
+        response: void;
+      };
+      getTabInfo: {
+        params: { tabId: string };
+        response: Tab;
+      };
+      getAllTabs: {
+        params: {};
+        response: Tab[];
+      };
+      addBookmark: {
+        params: { title: string; url: string };
+        response: Bookmark;
+      };
+      getBookmarks: {
+        params: {};
+        response: Bookmark[];
+      };
+      removeBookmark: {
+        params: { id: string };
+        response: void;
+      };
+    };
+    messages: {
+      tabUpdated: Tab;
+      tabClosed: { id: string };
+      loadingStateChanged: { tabId: string; isLoading: boolean };
+    };
+  }>;
+  webview: RPCSchema<{
+    requests: {};
+    messages: {};
+  }>;
+};