electrobun 0.1.8 → 0.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/api/bun/core/BrowserView.ts +25 -5
  2. package/dist/api/bun/events/webviewEvents.ts +9 -1
  3. package/dist/api/bun/proc/native.ts +66 -14
  4. package/package.json +1 -1
  5. package/src/cli/index.ts +17 -17
  6. package/templates/interactive-playground/package-lock.json +1085 -9
  7. package/templates/interactive-playground/src/mainview/demos/WebViewDemo.ts +55 -1
  8. package/test-new-window-events.ts +26 -0
  9. package/test-new-window.html +75 -0
package/templates/interactive-playground/src/mainview/demos/WebViewDemo.ts CHANGED
@@ -160,6 +160,18 @@ export class WebViewDemo {
160
160
  </electrobun-webview>
161
161
  </div>
162
162
  </div>
163
+
164
+ <!-- CMD+Click Test WebView -->
165
+ <div style="margin-top: 1rem;">
166
+ <div style="font-weight: 500; padding: 0.5rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 0.5rem;">CMD+Click New Window Test</div>
167
+ <div style="margin-top: 0.5rem; border: 1px solid #e2e8f0; border-radius: 0.25rem; overflow: hidden;">
168
+ <electrobun-webview
169
+ id="cmd-click-test"
170
+ style="width: 100%; height: 200px;"
171
+ html="<html><head><style>body{font-family:system-ui;padding:20px;background:#f9f9f9;}a{display:block;margin:10px 0;padding:10px;background:white;border:1px solid #ddd;text-decoration:none;border-radius:5px;transition:background 0.2s;}a:hover{background:#e6f3ff;}</style></head><body><h3>Test CMD+Click to Open New Windows</h3><p>Hold <strong>CMD</strong> (macOS) and click these links to test new window events:</p><a href='https://electrobun.dev' target='_self'>Regular Link (same window)</a><a href='https://github.com/blackboardsh/electrobun' target='_blank'>Target _blank Link</a><a href='https://bun.sh'>CMD+Click Me!</a><a href='javascript:window.open(\"https://anthropic.com\", \"_blank\")'>JavaScript window.open()</a><p style='color:#666;font-size:14px;'>Watch the events log above to see how different link types are handled.</p></body></html>">
172
+ </electrobun-webview>
173
+ </div>
174
+ </div>
163
175
  </div>
164
176
  </div>
165
177
  `;
@@ -340,8 +352,10 @@ export class WebViewDemo {
340
352
 
341
353
  private setupWebViewEvents() {
342
354
  const webview = document.getElementById('main-webview') as any;
355
+ const cmdClickTestWebview = document.getElementById('cmd-click-test') as any;
343
356
  const urlBar = document.getElementById('url-bar') as HTMLInputElement;
344
357
 
358
+ // Setup events for main webview
345
359
  if (webview && typeof webview.on === 'function') {
346
360
  // Use the on() method as shown in the old playground
347
361
  webview.on('did-navigate', (e: any) => {
@@ -365,7 +379,21 @@ export class WebViewDemo {
365
379
  });
366
380
 
367
381
  webview.on('new-window-open', (e: any) => {
368
- this.addWebViewEvent(`new-window: ${e.detail?.url || 'unknown'}`);
382
+ const detail = e.detail;
383
+
384
+ // Handle both legacy string format and new JSON format
385
+ if (typeof detail === 'string') {
386
+ this.addWebViewEvent(`new-window: ${detail}`);
387
+ } else if (detail && typeof detail === 'object') {
388
+ const { url, isCmdClick, modifierFlags, userGesture } = detail;
389
+ const eventDesc = isCmdClick ? 'cmd+click' : 'popup';
390
+ this.addWebViewEvent(`new-window (${eventDesc}): ${url || 'unknown'}`);
391
+
392
+ // Log additional details for debugging
393
+ console.log('New window event details:', { url, isCmdClick, modifierFlags, userGesture });
394
+ } else {
395
+ this.addWebViewEvent(`new-window: ${JSON.stringify(detail)}`);
396
+ }
369
397
  });
370
398
 
371
399
  // Also try addEventListener for compatibility
@@ -379,6 +407,32 @@ export class WebViewDemo {
379
407
  });
380
408
  }
381
409
  }
410
+
411
+ // Setup events for cmd+click test webview
412
+ if (cmdClickTestWebview && typeof cmdClickTestWebview.on === 'function') {
413
+ cmdClickTestWebview.on('new-window-open', (e: any) => {
414
+ const detail = e.detail;
415
+
416
+ // Handle both legacy string format and new JSON format
417
+ if (typeof detail === 'string') {
418
+ this.addWebViewEvent(`[TEST] new-window: ${detail}`);
419
+ } else if (detail && typeof detail === 'object') {
420
+ const { url, isCmdClick, modifierFlags, userGesture } = detail;
421
+ const eventDesc = isCmdClick ? 'cmd+click' : 'popup';
422
+ this.addWebViewEvent(`[TEST] new-window (${eventDesc}): ${url || 'unknown'}`);
423
+
424
+ // Log additional details for debugging
425
+ console.log('CMD+Click test webview event:', { url, isCmdClick, modifierFlags, userGesture });
426
+ } else {
427
+ this.addWebViewEvent(`[TEST] new-window: ${JSON.stringify(detail)}`);
428
+ }
429
+ });
430
+
431
+ cmdClickTestWebview.on('did-navigate', (e: any) => {
432
+ const url = e.detail?.url || 'unknown';
433
+ this.addWebViewEvent(`[TEST] did-navigate: ${url}`);
434
+ });
435
+ }
382
436
  }
383
437
 
384
438
  private addWebViewEvent(event: string) {
package/test-new-window-events.ts ADDED
@@ -0,0 +1,26 @@
1
+ import { BrowserWindow } from "./src/bun/core/BrowserWindow";
2
+
3
+ const win = new BrowserWindow({
4
+ title: "New Window Event Test",
5
+ frame: {
6
+ width: 800,
7
+ height: 600,
8
+ x: 100,
9
+ y: 100
10
+ },
11
+ url: null,
12
+ html: null,
13
+ renderer: 'native', // Test with native WebKit first
14
+ });
15
+
16
+ // Listen for new-window-open events
17
+ win.webview.on("new-window-open", (event) => {
18
+ console.log("🚀 NEW-WINDOW-OPEN EVENT:", event.detail);
19
+ });
20
+
21
+ // Load our test HTML
22
+ const testHTML = await Bun.file("./test-new-window.html").text();
23
+ win.webview.loadHTML(testHTML);
24
+
25
+ console.log("Test window created. Try clicking links with and without CMD key.");
26
+ console.log("Watch for 'NEW-WINDOW-OPEN EVENT' in the console.");
package/test-new-window.html ADDED
@@ -0,0 +1,75 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>New Window Event Test</title>
5
+ <style>
6
+ body {
7
+ font-family: system-ui;
8
+ padding: 20px;
9
+ max-width: 600px;
10
+ margin: 0 auto;
11
+ }
12
+ a, button {
13
+ display: block;
14
+ margin: 15px 0;
15
+ padding: 10px;
16
+ background: #f0f0f0;
17
+ text-decoration: none;
18
+ color: #333;
19
+ border: 1px solid #ddd;
20
+ cursor: pointer;
21
+ }
22
+ a:hover, button:hover {
23
+ background: #e0e0e0;
24
+ }
25
+ h2 {
26
+ color: #444;
27
+ border-bottom: 2px solid #ddd;
28
+ padding-bottom: 10px;
29
+ }
30
+ .note {
31
+ background: #fffbdd;
32
+ padding: 10px;
33
+ border-left: 4px solid #ffc107;
34
+ margin: 20px 0;
35
+ }
36
+ </style>
37
+ </head>
38
+ <body>
39
+ <h1>Test New Window Events</h1>
40
+
41
+ <div class="note">
42
+ <strong>Instructions:</strong> Open the console and watch for "new-window-open" events.
43
+ Try each link/button below with and without holding CMD key.
44
+ </div>
45
+
46
+ <h2>Links that SHOULD fire new-window-open:</h2>
47
+ <a href="https://example.com" target="_blank">1. Link with target="_blank"</a>
48
+ <a href="https://example.com" target="newwindow">2. Link with target="newwindow"</a>
49
+ <button onclick="window.open('https://example.com', '_blank')">3. JavaScript window.open()</button>
50
+
51
+ <h2>Links that should NOT fire (without CMD):</h2>
52
+ <a href="https://example.com">4. Regular link (no target)</a>
53
+ <a href="https://example.com" target="_self">5. Link with target="_self"</a>
54
+
55
+ <h2>CMD+Click Test:</h2>
56
+ <p>Hold CMD and click this to see if it fires the event:</p>
57
+ <a href="https://example.com">6. CMD+Click me (regular link)</a>
58
+
59
+ <script>
60
+ // Log all clicks for debugging
61
+ document.addEventListener('click', (e) => {
62
+ if (e.target.tagName === 'A') {
63
+ console.log('Link clicked:', {
64
+ href: e.target.href,
65
+ target: e.target.target,
66
+ cmdKey: e.metaKey,
67
+ ctrlKey: e.ctrlKey,
68
+ shiftKey: e.shiftKey,
69
+ altKey: e.altKey
70
+ });
71
+ }
72
+ });
73
+ </script>
74
+ </body>
75
+ </html>