bunite-core 0.12.1 → 0.16.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, SurfaceEventBase } 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,69 @@ function definePolyfillClass(): CustomElementConstructor {
     static observedAttributes = ["src", "sandbox", "unsandboxed"];
 
     private _iframe: HTMLIFrameElement | null = null;
+    private _titleObserver: MutationObserver | null = null;
+    private _lastTitle: string = "";
+    private _epoch: number = 0;
+    private _isLoading: boolean = false;
+    private _currentUrl: string = "";
+    // Local history stack for goBack — cross-origin contentWindow.history is
+    // inaccessible, so we track navigations ourselves.
+    private _history: 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: SurfaceEventBase) {
+      if (event.type === "navigate") {
+        this._epoch++;
+        // Avoid pushing duplicate / same-as-top entries (reload doesn't grow history).
+        if (this._currentUrl && this._currentUrl !== event.url &&
+            this._history[this._history.length - 1] !== this._currentUrl) {
+          this._history.push(this._currentUrl);
+        }
+        this._currentUrl = event.url;
+      } else if (event.type === "load-start") {
+        this._isLoading = true;
+      } else if (event.type === "load-finish" || event.type === "load-fail") {
+        this._isLoading = false;
+      }
+      const stamped: SurfaceEvent = { ...event, epoch: this._epoch };
+      this.dispatchEvent(new CustomEvent<SurfaceEvent>("surface-event", { detail: stamped }));
+    }
+
+    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 +103,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 +120,8 @@ function definePolyfillClass(): CustomElementConstructor {
           this.dispatchBlocked(src);
         } else {
           iframe.src = src;
+          this._currentUrl = src;
+          this.emit({ type: "load-start", url: src });
         }
       }
 
@@ -66,7 +133,10 @@ 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 } }));
+        // navigate first so load-finish carries the bumped epoch.
+        this.emit({ type: "navigate", url });
+        this.emit({ type: "load-finish", url });
+        this.setupTitleObserver();
       });
 
       this._iframe = iframe;
@@ -74,6 +144,8 @@ function definePolyfillClass(): CustomElementConstructor {
     }
 
     disconnectedCallback() {
+      this._titleObserver?.disconnect();
+      this._titleObserver = null;
       this._iframe?.remove();
       this._iframe = null;
     }
@@ -86,6 +158,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);
@@ -97,19 +170,22 @@ function definePolyfillClass(): CustomElementConstructor {
     }
 
     goBack() {
-      try {
-        this._iframe?.contentWindow?.history.back();
-      } catch {}
+      // Same-origin path uses native history. Cross-origin throws → fall back
+      // to our tracked stack (push on every navigate; pop here).
+      try { this._iframe?.contentWindow?.history.back(); return; } catch {}
+      const prev = this._history.pop();
+      if (prev && this._iframe) this._iframe.src = prev;
     }
 
     reload() {
-      try {
-        this._iframe?.contentWindow?.location.reload();
-      } catch {
-        if (this._iframe) {
-          this._iframe.src = this._iframe.src;
-        }
-      }
+      try { this._iframe?.contentWindow?.location.reload(); return; } catch {}
+      // Cross-origin fallback: reassigning the same src is a no-op in WHATWG;
+      // cycle via about:blank to force a fresh navigation.
+      const iframe = this._iframe;
+      if (!iframe) return;
+      const url = this._currentUrl || iframe.src;
+      iframe.src = "about:blank";
+      requestAnimationFrame(() => { if (this._iframe) this._iframe.src = url; });
     }
 
     setHidden(hidden: boolean) {
@@ -118,20 +194,204 @@ 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 resolveAndClick(_selector: string, _opts?: unknown) {
+      return { ok: false as const, code: "not_supported" as const, message: "polyfill iframe: atomic resolveAndClick not supported" };
+    }
+
+    async getBoundingRect(selector: string, _opts?: unknown) {
+      if (!this.isReachable()) return { ok: false as const, code: "not_supported" as const, message: "iframe not reachable" };
+      try {
+        const el = this._iframe!.contentDocument!.querySelector(selector) as Element | null;
+        if (!el) return { ok: false as const, code: "not_found" as const, message: `selector ${selector} not found` };
+        const r = el.getBoundingClientRect();
+        const win = this._iframe!.contentWindow!;
+        const visible = r.width > 0 && r.height > 0 && r.bottom > 0 && r.right > 0
+                       && r.top < win.innerHeight && r.left < win.innerWidth;
+        return { ok: true as const, rect: { x: r.x, y: r.y, width: r.width, height: r.height }, visible };
+      } catch (e: any) {
+        const code = e?.name === "SecurityError" ? "cross_origin" as const : "runtime_error" as const;
+        return { ok: false as const, code, message: e?.message ?? String(e) };
+      }
+    }
+
+    async listFrames() {
+      return { ok: false as const, code: "not_supported" as const, message: "polyfill: not implemented" };
+    }
+
+    async accessibilitySnapshot(_opts?: unknown) {
+      return { ok: false as const, code: "not_supported" as const, message: "polyfill: not implemented" };
+    }
+
+    async setDownloadPolicy(_policy: unknown, _dir?: unknown) {
+      // No-op — iframe has no download lifecycle hook.
+    }
+
+    async waitForDownload(_opts?: unknown) {
+      return { ok: false as const, code: "not_supported" as const, message: "polyfill: not implemented" };
+    }
+
+    async acceptPopup(_opts?: unknown) {
+      return { ok: false as const, code: "not_found" as const, message: "polyfill: no popup orchestration" };
+    }
+
+    async dismissPopup(_id?: unknown) {
+      // No-op.
+    }
+
+    async extendAdoptionTimeout(_id?: unknown, _ms?: unknown) {
+      return { ok: false as const, code: "not_found" as const, message: "polyfill: no popup orchestration" };
+    }
+
+    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 getNavigationState() {
+      return { lastLoadEpoch: this._epoch, isLoading: this._isLoading, currentUrl: this._currentUrl };
+    }
+
+    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 +409,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.