bunite-core 0.12.0 → 0.14.0

package/src/webview/polyfill.ts

@@ -1,5 +1,7 @@
 // Iframe fallback for web (no-op if native already registered). HTMLElement deref'd lazily so module is import-safe in Node/Bun.
 
+import type { SurfaceEvent } from "../rpc/framework";
+
 // Default sandbox omits allow-same-origin / allow-top-navigation / allow-modals /
 // allow-popups-to-escape-sandbox — popup escape stays opt-in so a sandboxed page
 // can't launch unsandboxed auxiliary contexts by default.
@@ -27,6 +29,49 @@ function definePolyfillClass(): CustomElementConstructor {
     static observedAttributes = ["src", "sandbox", "unsandboxed"];
 
     private _iframe: HTMLIFrameElement | null = null;
+    private _titleObserver: MutationObserver | null = null;
+    private _lastTitle: string = "";
+
+    private isReachable(): boolean {
+      if (!this._iframe) return false;
+      try {
+        return this._iframe.contentDocument != null;
+      } catch { return false; }
+    }
+
+    private modifierBag(mods?: string[]): {
+      shiftKey: boolean; ctrlKey: boolean; altKey: boolean; metaKey: boolean;
+    } {
+      return {
+        shiftKey: !!mods?.includes("shift"),
+        ctrlKey:  !!mods?.includes("ctrl"),
+        altKey:   !!mods?.includes("alt"),
+        metaKey:  !!mods?.includes("meta"),
+      };
+    }
+
+    private emit(event: SurfaceEvent) {
+      this.dispatchEvent(new CustomEvent<SurfaceEvent>("surface-event", { detail: event }));
+    }
+
+    private setupTitleObserver() {
+      this._titleObserver?.disconnect();
+      this._titleObserver = null;
+      if (!this.isReachable()) return;
+      const doc = this._iframe!.contentDocument!;
+      this._lastTitle = doc.title;
+      const fire = () => {
+        const t = doc.title;
+        if (t && t !== this._lastTitle) {
+          this._lastTitle = t;
+          this.emit({ type: "title-change", title: t });
+        }
+      };
+      const observer = new MutationObserver(fire);
+      const headEl = doc.head ?? doc.documentElement;
+      if (headEl) observer.observe(headEl, { childList: true, subtree: true, characterData: true });
+      this._titleObserver = observer;
+    }
 
     private applySandbox(iframe: HTMLIFrameElement) {
       if (this.hasAttribute("unsandboxed")) {
@@ -38,7 +83,7 @@ function definePolyfillClass(): CustomElementConstructor {
     }
 
     private dispatchBlocked(url: string) {
-      this.dispatchEvent(new CustomEvent("did-fail-load", { detail: { url, reason: "blocked-scheme" } }));
+      this.emit({ type: "load-fail", url, reason: "blocked-scheme" });
     }
 
     connectedCallback() {
@@ -55,6 +100,7 @@ function definePolyfillClass(): CustomElementConstructor {
           this.dispatchBlocked(src);
         } else {
           iframe.src = src;
+          this.emit({ type: "load-start", url: src });
         }
       }
 
@@ -66,7 +112,9 @@ function definePolyfillClass(): CustomElementConstructor {
         // Suppress the spurious about:blank load that fires after a blocked
         // navigation (or before any explicit navigate).
         if (isBlockedSrc(url)) return;
-        this.dispatchEvent(new CustomEvent("did-navigate", { detail: { url } }));
+        this.emit({ type: "load-finish", url });
+        this.emit({ type: "navigate", url });
+        this.setupTitleObserver();
       });
 
       this._iframe = iframe;
@@ -74,6 +122,8 @@ function definePolyfillClass(): CustomElementConstructor {
     }
 
     disconnectedCallback() {
+      this._titleObserver?.disconnect();
+      this._titleObserver = null;
       this._iframe?.remove();
       this._iframe = null;
     }
@@ -86,6 +136,7 @@ function definePolyfillClass(): CustomElementConstructor {
           return;
         }
         this._iframe.src = newValue ?? "";
+        if (newValue) this.emit({ type: "load-start", url: newValue });
       } else if (name === "sandbox" || name === "unsandboxed") {
         // Sandbox token changes take effect on the next navigation per HTML spec.
         this.applySandbox(this._iframe);
@@ -118,20 +169,152 @@ function definePolyfillClass(): CustomElementConstructor {
       }
     }
 
-    // Automation surface — web iframe polyfill is intentionally limited.
-    // Sandbox omits `allow-same-origin`, so `contentWindow.eval` would fail even
-    // for same-origin URLs. Reporting `evaluate: false` matches reality; callers
-    // can opt-in with `<bunite-webview unsandboxed>` and extend this method.
-    async evaluate(_script: string) {
-      return { ok: false as const, code: "not_supported" as const, message: "iframe polyfill does not support evaluate" };
+    // Automation surface — works when the iframe is same-origin reachable
+    // (i.e. `<bunite-webview unsandboxed>` + same-origin src). Default sandbox
+    // strips `allow-same-origin`, so reachability is opt-in. `isTrusted` on
+    // synthesised DOM events is always false → `nativeInputTrusted` stays false.
+    async evaluate(script: string) {
+      if (!this.isReachable()) {
+        return { ok: false as const, code: "cross_origin" as const, message: "iframe content not same-origin" };
+      }
+      try {
+        const win = this._iframe!.contentWindow as Window & { eval(s: string): unknown };
+        return { ok: true as const, value: win.eval(script) };
+      } catch (e: unknown) {
+        const err = e as { name?: string; message?: string };
+        if (err?.name === "SecurityError") {
+          return { ok: false as const, code: "cross_origin" as const, message: err.message ?? "SecurityError" };
+        }
+        return { ok: false as const, code: "runtime_error" as const, message: err?.message ?? String(e) };
+      }
     }
 
     async capabilities() {
+      const reachable = this.isReachable();
       return {
-        evaluate: false, crossOriginEval: false, titleChanged: false,
-        nativeInputTrusted: false, click: false, type: false, press: false,
-        scroll: false, screenshot: false,
+        evaluate: reachable, crossOriginEval: false, surfaceEvents: true,
+        nativeInputTrusted: false,
+        click: reachable, type: reachable, press: reachable, scroll: reachable,
+        mouse: reachable, dialogs: false, console: false,
+        screenshot: false,
+      };
+    }
+
+    async sendClick(args: {
+      x: number; y: number; button?: string; clickCount?: number; modifiers?: string[];
+    }) {
+      if (!this.isReachable()) return;
+      const doc = this._iframe!.contentDocument!;
+      const target = doc.elementFromPoint(args.x, args.y) ?? doc.body;
+      if (!target) return;
+      const init: MouseEventInit = {
+        bubbles: true, cancelable: true, view: this._iframe!.contentWindow,
+        clientX: args.x, clientY: args.y,
+        button: args.button === "right" ? 2 : args.button === "middle" ? 1 : 0,
+        detail: args.clickCount ?? 1,
+        ...this.modifierBag(args.modifiers),
+      };
+      target.dispatchEvent(new MouseEvent("mousedown", init));
+      target.dispatchEvent(new MouseEvent("mouseup", init));
+      target.dispatchEvent(new MouseEvent("click", init));
+    }
+
+    async sendType(text: string) {
+      if (!this.isReachable()) return;
+      const doc = this._iframe!.contentDocument!;
+      const target = doc.activeElement as (HTMLInputElement | HTMLTextAreaElement | null);
+      if (!target || !("setRangeText" in target)) return;
+      // setRangeText preserves selection + caret; the `data` field on an
+      // InputEvent + bubbling lets React-style controllers detect the change.
+      const start = target.selectionStart ?? target.value.length;
+      const end = target.selectionEnd ?? target.value.length;
+      target.setRangeText(text, start, end, "end");
+      target.dispatchEvent(new InputEvent("input", { bubbles: true, data: text, inputType: "insertText" }));
+    }
+
+    async sendPress(key: string, modifiers?: string[], action?: "down" | "up" | "both") {
+      if (!this.isReachable()) return;
+      const doc = this._iframe!.contentDocument!;
+      const target = (doc.activeElement ?? doc.body) as Element | null;
+      if (!target) return;
+      const init: KeyboardEventInit = {
+        bubbles: true, cancelable: true, key, ...this.modifierBag(modifiers),
+      };
+      const a = action ?? "both";
+      if (a !== "up") target.dispatchEvent(new KeyboardEvent("keydown", init));
+      if (a === "both") target.dispatchEvent(new KeyboardEvent("keypress", init));
+      if (a !== "down") target.dispatchEvent(new KeyboardEvent("keyup", init));
+    }
+
+    async sendScroll(args: { dx: number; dy: number; x?: number; y?: number; modifiers?: string[] }) {
+      if (!this.isReachable()) return;
+      this._iframe!.contentWindow!.scrollBy(args.dx, args.dy);
+    }
+
+    async sendMouse(args: {
+      action: "move" | "down" | "up";
+      x: number; y: number;
+      button?: string;
+      modifiers?: string[];
+    }) {
+      if (!this.isReachable()) return;
+      const doc = this._iframe!.contentDocument!;
+      const target = doc.elementFromPoint(args.x, args.y) ?? doc.body;
+      if (!target) return;
+      const type = args.action === "move" ? "mousemove" : args.action === "down" ? "mousedown" : "mouseup";
+      const init: MouseEventInit = {
+        bubbles: true, cancelable: true, view: this._iframe!.contentWindow,
+        clientX: args.x, clientY: args.y,
+        button: args.button === "right" ? 2 : args.button === "middle" ? 1 : 0,
+        ...this.modifierBag(args.modifiers),
       };
+      target.dispatchEvent(new MouseEvent(type, init));
+    }
+
+    async respondToDialog(_requestId: number, _accept: boolean, _text?: string) {
+      // iframe sandbox forbids cross-frame dialog interception; nothing to do.
+    }
+
+    async setDialogTimeout(_ms: number | null) { /* no-op */ }
+
+    async waitForSelector(selector: string, timeoutMs = 5000) {
+      if (!this.isReachable()) {
+        return { ok: false as const, code: "runtime_error" as const, message: "iframe content not same-origin" };
+      }
+      const doc = this._iframe!.contentDocument!;
+      const deadline = Date.now() + timeoutMs;
+      while (Date.now() < deadline) {
+        if (doc.querySelector(selector)) return { ok: true as const };
+        await new Promise((r) => setTimeout(r, 50));
+      }
+      return { ok: false as const, code: "timeout" as const, message: `selector ${JSON.stringify(selector)} not found within ${timeoutMs}ms` };
+    }
+
+    async waitForFunction(expression: string, opts?: { timeoutMs?: number; pollIntervalMs?: number }) {
+      if (!this.isReachable()) {
+        return { ok: false as const, code: "runtime_error" as const, message: "iframe content not same-origin" };
+      }
+      const win = this._iframe!.contentWindow as Window & { eval(s: string): unknown };
+      const deadline = Date.now() + (opts?.timeoutMs ?? 5000);
+      const interval = opts?.pollIntervalMs ?? 50;
+      while (Date.now() < deadline) {
+        try {
+          if (win.eval(expression)) return { ok: true as const };
+        } catch (e) {
+          return { ok: false as const, code: "runtime_error" as const, message: (e as Error).message };
+        }
+        await new Promise((r) => setTimeout(r, interval));
+      }
+      return { ok: false as const, code: "timeout" as const, message: `function did not satisfy within ${opts?.timeoutMs ?? 5000}ms` };
+    }
+
+    async getConsoleBuffer(_opts?: { clear?: boolean }) {
+      // iframe polyfill doesn't inject a preload — no console capture available.
+      return [] as { level: string; args: string[]; ts: number }[];
+    }
+
+    async screenshot(_args?: { format?: "png" | "jpeg"; quality?: number }) {
+      return { ok: false as const, code: "not_supported" as const, message: "iframe polyfill does not support screenshot" };
     }
   }
 
@@ -149,7 +332,8 @@ function definePolyfillClass(): CustomElementConstructor {
  * - `referrerpolicy="no-referrer"`.
  * - `javascript:` / `data:` / `vbscript:` / `file:` / `about:` schemes blocked
  *   (with WHATWG URL-style normalization to defeat embedded-control bypass);
- *   navigation attempt dispatches `did-fail-load` with `detail.reason === "blocked-scheme"`.
+ *   navigation attempt dispatches `surface-event` with `detail.type === "load-fail"`
+ *   and `detail.reason === "blocked-scheme"`.
  *
  * Opt-out attributes on `<bunite-webview>` (observed — mutations re-apply):
  * - `sandbox="..."` — override the default sandbox token string verbatim.