electrobun 0.0.19-beta.13 → 0.0.19-beta.131

package/templates/interactive-playground/src/mainview/demos/RPCDemo.ts

@@ -0,0 +1,229 @@
+export class RPCDemo {
+  private testResults: Array<{ operation: string; result: any; duration: number }> = [];
+
+  render() {
+    return `
+      <div class="demo-section">
+        <div class="demo-header">
+          <span class="demo-icon">📡</span>
+          <div>
+            <h2 class="demo-title">RPC Communication</h2>
+            <p class="demo-description">Test bidirectional communication between the webview and bun process</p>
+          </div>
+        </div>
+
+        <div class="demo-controls">
+          <h3>Math Operations</h3>
+          <div class="control-group">
+            <label class="control-label">A:</label>
+            <input type="number" id="math-a" class="control-input" value="10">
+            
+            <label class="control-label">B:</label>
+            <input type="number" id="math-b" class="control-input" value="5">
+            
+            <label class="control-label">Operation:</label>
+            <select id="math-operation" class="control-input" style="width: 120px;">
+              <option value="add">Add (+)</option>
+              <option value="subtract">Subtract (-)</option>
+              <option value="multiply">Multiply (×)</option>
+              <option value="divide">Divide (÷)</option>
+              <option value="power">Power (^)</option>
+            </select>
+            
+            <button class="btn btn-primary" id="do-math">Calculate</button>
+          </div>
+
+          <h3>Data Transfer Test</h3>
+          <div class="control-group">
+            <label class="control-label">Data Size:</label>
+            <select id="data-size" class="control-input" style="width: 150px;">
+              <option value="1024">1 KB</option>
+              <option value="10240">10 KB</option>
+              <option value="102400">100 KB</option>
+              <option value="1048576">1 MB</option>
+              <option value="2097152">2 MB</option>
+            </select>
+            
+            <button class="btn btn-primary" id="test-big-data">Test Echo</button>
+          </div>
+
+          <h3>Performance Test</h3>
+          <div class="control-group">
+            <label class="control-label">Message Size:</label>
+            <select id="perf-size" class="control-input" style="width: 120px;">
+              <option value="100">100 B</option>
+              <option value="1024">1 KB</option>
+              <option value="10240">10 KB</option>
+            </select>
+            
+            <label class="control-label">Count:</label>
+            <input type="number" id="perf-count" class="control-input" value="10" min="1" max="100">
+            
+            <button class="btn btn-primary" id="run-performance-test">Run Test</button>
+          </div>
+        </div>
+
+        <div class="demo-results">
+          <div class="results-header">Test Results:</div>
+          <div id="rpc-results" class="rpc-results">
+            <div class="no-results" style="text-align: center; color: #718096; padding: 2rem;">
+              No tests run yet. Use the controls above to start testing RPC communication.
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  initialize(rpc: any) {
+    const mathBtn = document.getElementById('do-math');
+    const bigDataBtn = document.getElementById('test-big-data');
+    const perfTestBtn = document.getElementById('run-performance-test');
+
+    mathBtn?.addEventListener('click', async () => {
+      const a = parseFloat((document.getElementById('math-a') as HTMLInputElement).value);
+      const b = parseFloat((document.getElementById('math-b') as HTMLInputElement).value);
+      const operation = (document.getElementById('math-operation') as HTMLSelectElement).value;
+
+      try {
+        const startTime = Date.now();
+        const result = await rpc.request.doMath({ a, b, operation });
+        const duration = Date.now() - startTime;
+        
+        this.addTestResult({
+          operation: `${a} ${operation} ${b}`,
+          result,
+          duration
+        });
+      } catch (error) {
+        this.addTestResult({
+          operation: `${a} ${operation} ${b}`,
+          result: `Error: ${error.message}`,
+          duration: 0
+        });
+      }
+    });
+
+    bigDataBtn?.addEventListener('click', async () => {
+      const size = parseInt((document.getElementById('data-size') as HTMLSelectElement).value);
+      const testData = 'x'.repeat(size);
+
+      try {
+        const startTime = Date.now();
+        const result = await rpc.request.echoBigData(testData);
+        const duration = Date.now() - startTime;
+        
+        this.addTestResult({
+          operation: `Echo ${this.formatBytes(size)}`,
+          result: `Received ${this.formatBytes(result.length)}`,
+          duration
+        });
+      } catch (error) {
+        this.addTestResult({
+          operation: `Echo ${this.formatBytes(size)}`,
+          result: `Error: ${error.message}`,
+          duration: 0
+        });
+      }
+    });
+
+    perfTestBtn?.addEventListener('click', async () => {
+      const size = parseInt((document.getElementById('perf-size') as HTMLSelectElement).value);
+      const count = parseInt((document.getElementById('perf-count') as HTMLInputElement).value);
+      
+      perfTestBtn.textContent = 'Running...';
+      perfTestBtn.setAttribute('disabled', 'true');
+
+      try {
+        const results = await this.runPerformanceTest(rpc, size, count);
+        this.addTestResult({
+          operation: `Performance: ${count} × ${this.formatBytes(size)}`,
+          result: `${results.messagesPerSecond.toFixed(1)} msg/sec, avg: ${results.averageTime.toFixed(1)}ms`,
+          duration: results.totalTime
+        });
+      } catch (error) {
+        this.addTestResult({
+          operation: `Performance: ${count} × ${this.formatBytes(size)}`,
+          result: `Error: ${error.message}`,
+          duration: 0
+        });
+      } finally {
+        perfTestBtn.textContent = 'Run Test';
+        perfTestBtn.removeAttribute('disabled');
+      }
+    });
+  }
+
+  private async runPerformanceTest(rpc: any, messageSize: number, messageCount: 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 rpc.request.echoBigData(testData);
+      results.push(Date.now() - messageStart);
+      
+      // Update progress
+      const progress = ((i + 1) / messageCount) * 100;
+      const perfTestBtn = document.getElementById('run-performance-test');
+      if (perfTestBtn) {
+        perfTestBtn.textContent = `Running... ${progress.toFixed(0)}%`;
+      }
+    }
+
+    const totalTime = Date.now() - startTime;
+    const averageTime = results.reduce((a, b) => a + b, 0) / results.length;
+    const messagesPerSecond = (messageCount / totalTime) * 1000;
+
+    return { totalTime, averageTime, messagesPerSecond };
+  }
+
+  private addTestResult(result: { operation: string; result: any; duration: number }) {
+    this.testResults.unshift(result);
+    
+    // Keep only last 20 results
+    if (this.testResults.length > 20) {
+      this.testResults = this.testResults.slice(0, 20);
+    }
+
+    this.renderResults();
+  }
+
+  private renderResults() {
+    const container = document.getElementById('rpc-results');
+    if (!container) return;
+
+    if (this.testResults.length === 0) {
+      container.innerHTML = `
+        <div class="no-results" style="text-align: center; color: #718096; padding: 2rem;">
+          No tests run yet. Use the controls above to start testing RPC communication.
+        </div>
+      `;
+      return;
+    }
+
+    container.innerHTML = this.testResults.map(result => `
+      <div class="result-entry" style="background: #f8fafc; border-left: 3px solid #4299e1; padding: 1rem; margin-bottom: 0.5rem; border-radius: 0 0.25rem 0.25rem 0;">
+        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
+          <strong>${result.operation}</strong>
+          <span style="color: #718096; font-size: 0.875rem;">${result.duration}ms</span>
+        </div>
+        <div style="color: #2d3748;">${result.result}</div>
+      </div>
+    `).join('');
+  }
+
+  private formatBytes(bytes: number): string {
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+  }
+
+  // Handle events from the backend
+  onRpcTestResult(data: { operation: string; result: any; duration: number }) {
+    this.addTestResult(data);
+  }
+}

package/templates/interactive-playground/src/mainview/demos/TrayDemo.ts

@@ -0,0 +1,132 @@
+export class TrayDemo {
+  private trays: Array<{ id: number; title: string }> = [];
+  private rpc: any;
+
+  render() {
+    return `
+      <div class="demo-section">
+        <div class="demo-header">
+          <span class="demo-icon">🔔</span>
+          <div>
+            <h2 class="demo-title">System Tray</h2>
+            <p class="demo-description">Create and manage system tray icons with menus</p>
+          </div>
+        </div>
+
+        <div class="demo-controls">
+          <h3>Create System Tray</h3>
+          <div class="control-group">
+            <label class="control-label">Title:</label>
+            <input type="text" id="tray-title" class="control-input" value="My Tray Item" style="width: 200px;">
+            
+            <button class="btn btn-primary" id="create-tray">Create Tray</button>
+            <button class="btn btn-danger" id="remove-all-trays">Remove All Trays</button>
+          </div>
+
+          <div style="margin-top: 1rem; padding: 1rem; background: #f7fafc; border-radius: 0.5rem;">
+            <p style="color: #4a5568; font-size: 0.875rem;">
+              <strong>Note:</strong> System tray icons appear in your system's menu bar or notification area. 
+              Click on the tray icon to see its menu. On macOS, look in the top-right menu bar.
+            </p>
+          </div>
+        </div>
+
+        <div class="demo-results">
+          <div class="results-header">Active Trays (<span id="tray-count">0</span>):</div>
+          <div id="tray-list" class="tray-list">
+            <div class="no-trays" style="text-align: center; color: #718096; padding: 2rem;">
+              No system tray items created yet.
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  initialize(rpc: any) {
+    this.rpc = rpc;
+    
+    const createTrayBtn = document.getElementById('create-tray');
+    const removeAllTraysBtn = document.getElementById('remove-all-trays');
+
+    createTrayBtn?.addEventListener('click', async () => {
+      const title = (document.getElementById('tray-title') as HTMLInputElement).value;
+      
+      try {
+        const result = await rpc.request.createTray({ title });
+        this.trays.push({ id: result.id, title });
+        this.updateTrayList();
+        console.log('Created tray:', result);
+      } catch (error) {
+        console.error('Error creating tray:', error);
+      }
+    });
+
+    removeAllTraysBtn?.addEventListener('click', async () => {
+      for (const tray of this.trays) {
+        try {
+          await rpc.request.removeTray(tray.id);
+          console.log('Removed tray:', tray.id);
+        } catch (error) {
+          console.error(`Error removing tray ${tray.id}:`, error);
+        }
+      }
+      this.trays = [];
+      this.updateTrayList();
+    });
+  }
+
+  private updateTrayList() {
+    const container = document.getElementById('tray-list');
+    const count = document.getElementById('tray-count');
+    
+    if (!container || !count) return;
+
+    count.textContent = this.trays.length.toString();
+
+    if (this.trays.length === 0) {
+      container.innerHTML = `
+        <div class="no-trays" style="text-align: center; color: #718096; padding: 2rem;">
+          No system tray items created yet.
+        </div>
+      `;
+      return;
+    }
+
+    container.innerHTML = this.trays.map(tray => `
+      <div class="tray-item" style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 0.5rem; padding: 1rem; margin-bottom: 0.5rem;">
+        <div style="display: flex; justify-content: space-between; align-items: center;">
+          <div>
+            <strong>Tray ${tray.id}</strong>
+            <div style="color: #718096; font-size: 0.875rem;">${tray.title}</div>
+            <div style="color: #4299e1; font-size: 0.75rem; margin-top: 0.25rem;">
+              Click tray icon in menu bar to see menu
+            </div>
+          </div>
+          <button class="btn btn-small btn-danger remove-tray" data-tray-id="${tray.id}">Remove</button>
+        </div>
+      </div>
+    `).join('');
+
+    // Add remove button listeners
+    const removeButtons = document.querySelectorAll('.remove-tray');
+    removeButtons.forEach(btn => {
+      btn.addEventListener('click', async (e) => {
+        const id = parseInt((e.target as HTMLElement).getAttribute('data-tray-id') || '0');
+        try {
+          await this.rpc.request.removeTray(id);
+          console.log('Removed tray:', id);
+          this.trays = this.trays.filter(t => t.id !== id);
+          this.updateTrayList();
+        } catch (error) {
+          console.error(`Error removing tray ${id}:`, error);
+        }
+      });
+    });
+  }
+
+  // Handle events from the backend
+  onTrayClicked(data: { id: number; action: string }) {
+    console.log('Tray clicked:', data);
+  }
+}