@pagepocket/lib 0.12.0 → 0.14.5

package/dist/core/pagepocket.d.ts

@@ -13,12 +13,27 @@ export type CaptureTarget = {
     baseUrl: string;
     url?: string;
 };
+import type { ProgressEvent } from "@pagepocket/contracts";
 import type { PagePocketOptions } from "../types.js";
 import type { CaptureResult as PagePocketCaptureResult, Plugin as V3Plugin, Unit as V3Unit } from "../units/contracts-bridge.js";
 import type { CaptureOptions } from "../units/types.js";
+export type CaptureEventMap = {
+    "unit:start": Extract<ProgressEvent, {
+        type: "unit:start";
+    }>;
+    "unit:end": Extract<ProgressEvent, {
+        type: "unit:end";
+    }>;
+    "unit:log": Extract<ProgressEvent, {
+        type: "unit:log";
+    }>;
+};
+type CaptureEventName = keyof CaptureEventMap;
+type CaptureEventListener<K extends CaptureEventName> = (event: CaptureEventMap[K]) => void;
 export declare class PagePocket {
     private target;
     private options;
+    private listeners;
     private constructor();
     static fromURL(url: string, options?: PagePocketOptions): PagePocket;
     static fromPuppeteerPage(page: unknown, options?: PagePocketOptions): PagePocket;
@@ -32,8 +47,10 @@ export declare class PagePocket {
         url?: string;
         serialize?: (doc: unknown) => string;
     } & PagePocketOptions): PagePocket;
+    on<K extends CaptureEventName>(event: K, listener: CaptureEventListener<K>): this;
     capture(options: {
         units: V3Unit[];
         plugins?: V3Plugin[];
     } & CaptureOptions): Promise<PagePocketCaptureResult>;
 }
+export {};

package/dist/core/pagepocket.js

@@ -1,6 +1,7 @@
 import { runCapture } from "../units/index.js";
 export class PagePocket {
     constructor(target, options) {
+        this.listeners = new Map();
         this.target = target;
         this.options = options ?? {};
     }
@@ -32,6 +33,16 @@ export class PagePocket {
         const { baseUrl, url, serialize: _serialize, ...rest } = options;
         return new PagePocket({ kind: "html", htmlString, baseUrl, ...(url ? { url } : {}) }, rest);
     }
+    on(event, listener) {
+        const existing = this.listeners.get(event);
+        if (existing) {
+            existing.push(listener);
+        }
+        else {
+            this.listeners.set(event, [listener]);
+        }
+        return this;
+    }
     async capture(options) {
         const entry = this.target.kind === "url"
             ? { kind: "url", url: this.target.url }
@@ -45,12 +56,25 @@ export class PagePocket {
                         htmlString: this.target.htmlString,
                         ...(this.target.url ? { url: this.target.url } : {})
                     };
+        const hasListeners = this.listeners.size > 0;
+        const onProgress = hasListeners
+            ? (event) => {
+                const eventListeners = this.listeners.get(event.type);
+                if (!eventListeners) {
+                    return;
+                }
+                for (const listener of eventListeners) {
+                    listener(event);
+                }
+            }
+            : undefined;
         const result = await runCapture({
             entry,
             pocketOptions: this.options,
             options,
             units: options.units,
-            plugins: options.plugins
+            plugins: options.plugins,
+            onProgress
         });
         return result;
     }

package/dist/hackers/index.js

@@ -9,6 +9,7 @@ import { replayFetchResponder } from "./replay-fetch.js";
 import { replayHistoryPath } from "./replay-history-path.js";
 import { replaySvgImageRewriter } from "./replay-svg-image.js";
 import { replayWebSocketStub } from "./replay-websocket.js";
+import { replayWorkerStub } from "./replay-worker.js";
 import { replayXhrResponder } from "./replay-xhr.js";
 export const preloadHackers = [preloadFetchRecorder, preloadXhrRecorder];
 export const replayHackers = [
@@ -21,5 +22,6 @@ export const replayHackers = [
     replaySvgImageRewriter,
     replayBeaconStub,
     replayWebSocketStub,
-    replayEventSourceStub
+    replayEventSourceStub,
+    replayWorkerStub
 ];

package/dist/hackers/replay-dom-rewrite/script-part-1.d.ts

@@ -1 +1 @@
-export declare const replayDomRewriteScriptPart1 = "\n  const transparentGif = \"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==\";\n  const emptyScript = \"data:text/javascript,/*pagepocket-missing*/\";\n  const emptyStyle = \"data:text/css,/*pagepocket-missing*/\";\n\n  let readyResolved = false;\n  if (ready && typeof ready.then === \"function\") {\n    ready.then(() => {\n      readyResolved = true;\n    });\n  } else {\n    readyResolved = true;\n  }\n\n  const onReady = (callback) => {\n    if (readyResolved) {\n      callback();\n      return;\n    }\n    if (ready && typeof ready.then === \"function\") {\n      ready.then(callback);\n    } else {\n      callback();\n    }\n  };\n\n  const rewritten = new WeakMap();\n\n  const shouldRewriteAttr = (element, attr) => {\n    try {\n      const tag = String((element && element.tagName) || \"\").toLowerCase();\n      const name = String(attr || \"\").toLowerCase();\n\n      if (!tag || !name) {\n        return false;\n      }\n\n      if (tag === \"a\" && name === \"href\") {\n        return false;\n      }\n\n      if (name === \"src\") {\n        return (\n          tag === \"img\" ||\n          tag === \"source\" ||\n          tag === \"video\" ||\n          tag === \"audio\" ||\n          tag === \"script\" ||\n          tag === \"iframe\" ||\n          tag === \"object\" ||\n          tag === \"embed\" ||\n          tag === \"track\"\n        );\n      }\n\n      if (name === \"href\") {\n        if (tag !== \"link\") {\n          return false;\n        }\n\n        const rel = String((element.getAttribute && element.getAttribute(\"rel\")) || \"\").toLowerCase();\n        if (rel.includes(\"stylesheet\") || rel.includes(\"icon\")) {\n          return true;\n        }\n\n        if (rel.includes(\"preload\") || rel.includes(\"prefetch\") || rel.includes(\"modulepreload\")) {\n          return true;\n        }\n\n        return false;\n      }\n\n      if (name === \"srcset\") {\n        return tag === \"img\" || tag === \"source\";\n      }\n\n      return false;\n    } catch {\n      return false;\n    }\n  };\n\n  const rewriteSrcset = (value) => {\n    if (!value) return value;\n\n    try {\n      const trimmed = String(value || \"\").trim();\n      const hasFetchTransform = trimmed.includes(\"/image/fetch/\");\n      const hasEncodedUrlTail = trimmed.includes(\"https%3A%2F%2F\");\n      const hasCommaTokens =\n        trimmed.includes(\",w_\") ||\n        trimmed.includes(\", w_\") ||\n        trimmed.includes(\",h_\") ||\n        trimmed.includes(\", h_\") ||\n        trimmed.includes(\",c_\") ||\n        trimmed.includes(\", c_\");\n\n      if (hasFetchTransform && hasEncodedUrlTail && hasCommaTokens) {\n        return \"\";\n      }\n    } catch {}\n\n    return value\n      .split(\",\")\n      .map((part) => {\n        const trimmed = part.trim();\n        if (!trimmed) return trimmed;\n        const pieces = trimmed.split(/\\s+/, 2);\n        const url = pieces[0];\n        const descriptor = pieces[1];\n        if (isLocalResource(url)) return trimmed;\n        const localPath = findLocalPath(url);\n        if (localPath) {\n          return descriptor ? localPath + \" \" + descriptor : localPath;\n        }\n        return trimmed;\n      })\n      .join(\",\");\n  };\n\n  const rewriteElement = (element) => {\n    if (!element || !element.getAttribute) return;\n    if (!readyResolved) {\n      onReady(() => rewriteElement(element));\n      return;\n    }\n    const prev = rewritten.get(element);\n    const currentSrc = element.getAttribute(\"src\");\n    const currentHref = element.getAttribute(\"href\");\n    const currentSrcset = element.getAttribute(\"srcset\");\n    if (\n      prev &&\n      prev.src === currentSrc &&\n      prev.href === currentHref &&\n      prev.srcset === currentSrcset\n    ) {\n      return;\n    }\n    const tag = (element.tagName || \"\").toLowerCase();\n    if (\n      tag === \"img\" ||\n      tag === \"source\" ||\n      tag === \"video\" ||\n      tag === \"audio\" ||\n      tag === \"script\" ||\n      tag === \"iframe\" ||\n      tag === \"object\" ||\n      tag === \"embed\" ||\n      tag === \"track\"\n    ) {\n      const src = currentSrc;\n      if (src && !src.startsWith(\"data:\") && !src.startsWith(\"blob:\")) {\n        const next = rewriteResourceUrl(src, { kind: \"attr\", tag, attr: \"src\" });\n        if (next && next !== src) {\n          element.setAttribute(\"src\", next);\n          return;\n        }\n      }\n    }\n\n    if (tag === \"link\") {\n      const href = currentHref;\n      const rel = (element.getAttribute(\"rel\") || \"\").toLowerCase();\n      if (href && !href.startsWith(\"data:\") && !href.startsWith(\"blob:\")) {\n        if (\n          rel.includes(\"stylesheet\") ||\n          rel.includes(\"icon\") ||\n          rel.includes(\"preload\") ||\n          rel.includes(\"prefetch\") ||\n          rel.includes(\"modulepreload\")\n        ) {\n          const as = (element.getAttribute(\"as\") || \"\").toLowerCase();\n          const fallbackType =\n            rel.includes(\"stylesheet\") || (rel.includes(\"preload\") && as === \"style\")\n              ? \"text/css\"\n              : undefined;\n          const next = rewriteResourceUrl(href, {\n            kind: \"attr\",\n            tag,\n            attr: \"href\",\n            fallbackType\n          });\n          if (next && next !== href) {\n            element.setAttribute(\"href\", next);\n            return;\n          }\n        }\n      }\n    }\n\n    const srcset = currentSrcset;\n    if (srcset) {\n      element.setAttribute(\"srcset\", rewriteSrcset(srcset));\n    }\n\n    rewritten.set(element, {\n      src: element.getAttribute(\"src\"),\n      href: element.getAttribute(\"href\"),\n      srcset: element.getAttribute(\"srcset\")\n    });\n  };\n";
+export declare const replayDomRewriteScriptPart1 = "\n  const transparentGif = \"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==\";\n  const emptyScript = \"data:text/javascript,/*pagepocket-missing*/\";\n  const emptyStyle = \"data:text/css,/*pagepocket-missing*/\";\n\n  let readyResolved = false;\n  if (ready && typeof ready.then === \"function\") {\n    ready.then(() => {\n      readyResolved = true;\n    });\n  } else {\n    readyResolved = true;\n  }\n\n  const onReady = (callback) => {\n    if (readyResolved) {\n      callback();\n      return;\n    }\n    if (ready && typeof ready.then === \"function\") {\n      ready.then(callback);\n    } else {\n      callback();\n    }\n  };\n\n  const rewritten = new WeakMap();\n\n  const shouldRewriteAttr = (element, attr) => {\n    try {\n      const tag = String((element && element.tagName) || \"\").toLowerCase();\n      const name = String(attr || \"\").toLowerCase();\n\n      if (!tag || !name) {\n        return false;\n      }\n\n      if (tag === \"a\" && name === \"href\") {\n        return false;\n      }\n\n      if (name === \"src\") {\n        return (\n          tag === \"img\" ||\n          tag === \"source\" ||\n          tag === \"video\" ||\n          tag === \"audio\" ||\n          tag === \"script\" ||\n          tag === \"iframe\" ||\n          tag === \"object\" ||\n          tag === \"embed\" ||\n          tag === \"track\"\n        );\n      }\n\n      if (name === \"href\") {\n        return tag === \"link\";\n      }\n\n      if (name === \"srcset\") {\n        return tag === \"img\" || tag === \"source\";\n      }\n\n      return false;\n    } catch {\n      return false;\n    }\n  };\n\n  const rewriteSrcset = (value) => {\n    if (!value) return value;\n\n    try {\n      const trimmed = String(value || \"\").trim();\n      const hasFetchTransform = trimmed.includes(\"/image/fetch/\");\n      const hasEncodedUrlTail = trimmed.includes(\"https%3A%2F%2F\");\n      const hasCommaTokens =\n        trimmed.includes(\",w_\") ||\n        trimmed.includes(\", w_\") ||\n        trimmed.includes(\",h_\") ||\n        trimmed.includes(\", h_\") ||\n        trimmed.includes(\",c_\") ||\n        trimmed.includes(\", c_\");\n\n      if (hasFetchTransform && hasEncodedUrlTail && hasCommaTokens) {\n        return \"\";\n      }\n    } catch {}\n\n    return value\n      .split(\",\")\n      .map((part) => {\n        const trimmed = part.trim();\n        if (!trimmed) return trimmed;\n        const pieces = trimmed.split(/\\s+/, 2);\n        const url = pieces[0];\n        const descriptor = pieces[1];\n        if (isLocalResource(url)) return trimmed;\n        const localPath = findLocalPath(url);\n        if (localPath) {\n          return descriptor ? localPath + \" \" + descriptor : localPath;\n        }\n        return trimmed;\n      })\n      .join(\",\");\n  };\n\n  const applyRewriteToElement = (element) => {\n    if (!element || !element.getAttribute) return;\n    const currentSrc = element.getAttribute(\"src\");\n    const currentHref = element.getAttribute(\"href\");\n    const currentSrcset = element.getAttribute(\"srcset\");\n    const tag = (element.tagName || \"\").toLowerCase();\n\n    if (\n      tag === \"img\" ||\n      tag === \"source\" ||\n      tag === \"video\" ||\n      tag === \"audio\" ||\n      tag === \"script\" ||\n      tag === \"iframe\" ||\n      tag === \"object\" ||\n      tag === \"embed\" ||\n      tag === \"track\"\n    ) {\n      const src = currentSrc;\n      if (src && !src.startsWith(\"data:\") && !src.startsWith(\"blob:\")) {\n        const next = rewriteResourceUrl(src, { kind: \"attr\", tag, attr: \"src\" });\n        if (next && next !== src) {\n          element.setAttribute(\"src\", next);\n          return;\n        }\n      }\n    }\n\n    if (tag === \"link\") {\n      const href = currentHref;\n      if (href && !href.startsWith(\"data:\") && !href.startsWith(\"blob:\")) {\n        const rel = (element.getAttribute(\"rel\") || \"\").toLowerCase();\n        const as = (element.getAttribute(\"as\") || \"\").toLowerCase();\n        const fallbackType =\n          rel.includes(\"stylesheet\") || (rel.includes(\"preload\") && as === \"style\")\n            ? \"text/css\"\n            : undefined;\n        const next = rewriteResourceUrl(href, {\n          kind: \"attr\",\n          tag,\n          attr: \"href\",\n          fallbackType\n        });\n        if (next && next !== href) {\n          element.setAttribute(\"href\", next);\n          return;\n        }\n      }\n    }\n\n    const srcset = currentSrcset;\n    if (srcset) {\n      element.setAttribute(\"srcset\", rewriteSrcset(srcset));\n    }\n\n    rewritten.set(element, {\n      src: element.getAttribute(\"src\"),\n      href: element.getAttribute(\"href\"),\n      srcset: element.getAttribute(\"srcset\")\n    });\n  };\n\n  const rewriteElement = (element) => {\n    if (!element || !element.getAttribute) return;\n    if (!readyResolved) {\n      onReady(() => rewriteElement(element));\n      return;\n    }\n    const prev = rewritten.get(element);\n    const currentSrc = element.getAttribute(\"src\");\n    const currentHref = element.getAttribute(\"href\");\n    const currentSrcset = element.getAttribute(\"srcset\");\n    if (\n      prev &&\n      prev.src === currentSrc &&\n      prev.href === currentHref &&\n      prev.srcset === currentSrcset\n    ) {\n      return;\n    }\n\n    applyRewriteToElement(element);\n  };\n";

package/dist/hackers/replay-dom-rewrite/script-part-1.js

@@ -54,20 +54,7 @@ export const replayDomRewriteScriptPart1 = `
       }
 
       if (name === "href") {
-        if (tag !== "link") {
-          return false;
-        }
-
-        const rel = String((element.getAttribute && element.getAttribute("rel")) || "").toLowerCase();
-        if (rel.includes("stylesheet") || rel.includes("icon")) {
-          return true;
-        }
-
-        if (rel.includes("preload") || rel.includes("prefetch") || rel.includes("modulepreload")) {
-          return true;
-        }
-
-        return false;
+        return tag === "link";
       }
 
       if (name === "srcset") {
@@ -118,25 +105,13 @@ export const replayDomRewriteScriptPart1 = `
       .join(",");
   };
 
-  const rewriteElement = (element) => {
+  const applyRewriteToElement = (element) => {
     if (!element || !element.getAttribute) return;
-    if (!readyResolved) {
-      onReady(() => rewriteElement(element));
-      return;
-    }
-    const prev = rewritten.get(element);
     const currentSrc = element.getAttribute("src");
     const currentHref = element.getAttribute("href");
     const currentSrcset = element.getAttribute("srcset");
-    if (
-      prev &&
-      prev.src === currentSrc &&
-      prev.href === currentHref &&
-      prev.srcset === currentSrcset
-    ) {
-      return;
-    }
     const tag = (element.tagName || "").toLowerCase();
+
     if (
       tag === "img" ||
       tag === "source" ||
@@ -160,30 +135,22 @@ export const replayDomRewriteScriptPart1 = `
 
     if (tag === "link") {
       const href = currentHref;
-      const rel = (element.getAttribute("rel") || "").toLowerCase();
       if (href && !href.startsWith("data:") && !href.startsWith("blob:")) {
-        if (
-          rel.includes("stylesheet") ||
-          rel.includes("icon") ||
-          rel.includes("preload") ||
-          rel.includes("prefetch") ||
-          rel.includes("modulepreload")
-        ) {
-          const as = (element.getAttribute("as") || "").toLowerCase();
-          const fallbackType =
-            rel.includes("stylesheet") || (rel.includes("preload") && as === "style")
-              ? "text/css"
-              : undefined;
-          const next = rewriteResourceUrl(href, {
-            kind: "attr",
-            tag,
-            attr: "href",
-            fallbackType
-          });
-          if (next && next !== href) {
-            element.setAttribute("href", next);
-            return;
-          }
+        const rel = (element.getAttribute("rel") || "").toLowerCase();
+        const as = (element.getAttribute("as") || "").toLowerCase();
+        const fallbackType =
+          rel.includes("stylesheet") || (rel.includes("preload") && as === "style")
+            ? "text/css"
+            : undefined;
+        const next = rewriteResourceUrl(href, {
+          kind: "attr",
+          tag,
+          attr: "href",
+          fallbackType
+        });
+        if (next && next !== href) {
+          element.setAttribute("href", next);
+          return;
         }
       }
     }
@@ -199,4 +166,26 @@ export const replayDomRewriteScriptPart1 = `
       srcset: element.getAttribute("srcset")
     });
   };
+
+  const rewriteElement = (element) => {
+    if (!element || !element.getAttribute) return;
+    if (!readyResolved) {
+      onReady(() => rewriteElement(element));
+      return;
+    }
+    const prev = rewritten.get(element);
+    const currentSrc = element.getAttribute("src");
+    const currentHref = element.getAttribute("href");
+    const currentSrcset = element.getAttribute("srcset");
+    if (
+      prev &&
+      prev.src === currentSrc &&
+      prev.href === currentHref &&
+      prev.srcset === currentSrcset
+    ) {
+      return;
+    }
+
+    applyRewriteToElement(element);
+  };
 `;

package/dist/hackers/replay-dom-rewrite/script-part-2.d.ts

@@ -1 +1 @@
-export declare const replayDomRewriteScriptPart2 = "\n  const originalSetAttribute = Element.prototype.setAttribute;\n  Element.prototype.setAttribute = function(name, value) {\n    const attr = String(name).toLowerCase();\n    if (attr === \"src\" || attr === \"href\" || attr === \"srcset\") {\n      if (!readyResolved) {\n        const pendingValue = String(value);\n        onReady(() => originalSetAttribute.call(this, name, pendingValue));\n        return;\n      }\n      if (attr === \"srcset\") {\n        const rewritten = rewriteSrcset(String(value));\n        return originalSetAttribute.call(this, name, rewritten);\n      }\n\n      if (!shouldRewriteAttr(this, attr)) {\n        return originalSetAttribute.call(this, name, value);\n      }\n\n      const tag = (this.tagName || \"\").toLowerCase();\n      const rel = (this.getAttribute && this.getAttribute(\"rel\")) || \"\";\n      const relLower = rel.toLowerCase();\n      const as = String((this.getAttribute && this.getAttribute(\"as\")) || \"\").toLowerCase();\n      const fallbackType =\n        attr === \"href\" && (relLower.includes(\"stylesheet\") || (relLower.includes(\"preload\") && as === \"style\"))\n          ? \"text/css\"\n          : undefined;\n\n      const next = rewriteResourceUrl(String(value), {\n        kind: \"setAttribute\",\n        tag,\n        attr,\n        fallbackType\n      });\n\n      return originalSetAttribute.call(this, name, next);\n    }\n    return originalSetAttribute.call(this, name, value);\n  };\n\n  const patchProperty = (proto, prop, handler) => {\n    try {\n      const desc = Object.getOwnPropertyDescriptor(proto, prop);\n      if (!desc || !desc.set) return;\n      Object.defineProperty(proto, prop, {\n        configurable: true,\n        get: desc.get,\n        set: function(value) {\n          return handler.call(this, value, desc.set);\n        }\n      });\n    } catch {}\n  };\n\n  patchProperty(HTMLImageElement.prototype, \"src\", function(value, setter) {\n    const rawValue = String(value);\n    if (!readyResolved) {\n      onReady(() => {\n        const next = rewriteResourceUrl(rawValue, { kind: \"setter\", tag: \"img\", attr: \"src\" });\n        setter.call(this, next);\n      });\n      return;\n    }\n    const next = rewriteResourceUrl(rawValue, { kind: \"setter\", tag: \"img\", attr: \"src\" });\n    setter.call(this, next);\n  });\n\n  patchProperty(HTMLScriptElement.prototype, \"src\", function(value, setter) {\n    const rawValue = String(value);\n    if (!readyResolved) {\n      onReady(() => {\n        const next = rewriteResourceUrl(rawValue, { kind: \"setter\", tag: \"script\", attr: \"src\" });\n        setter.call(this, next);\n      });\n      return;\n    }\n    const next = rewriteResourceUrl(rawValue, { kind: \"setter\", tag: \"script\", attr: \"src\" });\n    setter.call(this, next);\n  });\n\n  patchProperty(HTMLLinkElement.prototype, \"href\", function(value, setter) {\n    const rawValue = String(value);\n    const rel = (this.getAttribute && this.getAttribute(\"rel\")) || \"\";\n    const relLower = rel.toLowerCase();\n    const as = String((this.getAttribute && this.getAttribute(\"as\")) || \"\").toLowerCase();\n    if (!readyResolved) {\n      onReady(() => {\n        if (\n          !relLower.includes(\"stylesheet\") &&\n          !relLower.includes(\"icon\") &&\n          !relLower.includes(\"preload\") &&\n          !relLower.includes(\"prefetch\") &&\n          !relLower.includes(\"modulepreload\")\n        ) {\n          setter.call(this, rawValue);\n          return;\n        }\n        const fallbackType =\n          relLower.includes(\"stylesheet\") || (relLower.includes(\"preload\") && as === \"style\")\n            ? \"text/css\"\n            : undefined;\n        const next = rewriteResourceUrl(rawValue, {\n          kind: \"setter\",\n          tag: \"link\",\n          attr: \"href\",\n          fallbackType\n        });\n        setter.call(this, next);\n      });\n      return;\n    }\n    if (\n      !relLower.includes(\"stylesheet\") &&\n      !relLower.includes(\"icon\") &&\n      !relLower.includes(\"preload\") &&\n      !relLower.includes(\"prefetch\") &&\n      !relLower.includes(\"modulepreload\")\n    ) {\n      setter.call(this, rawValue);\n      return;\n    }\n    const fallbackType =\n      relLower.includes(\"stylesheet\") || (relLower.includes(\"preload\") && as === \"style\")\n        ? \"text/css\"\n        : undefined;\n    const next = rewriteResourceUrl(rawValue, {\n      kind: \"setter\",\n      tag: \"link\",\n      attr: \"href\",\n      fallbackType\n    });\n    setter.call(this, next);\n  });\n\n  patchProperty(HTMLImageElement.prototype, \"srcset\", function(value, setter) {\n    const rawValue = String(value);\n    if (!readyResolved) {\n      onReady(() => {\n        const next = rewriteSrcset(rawValue);\n        setter.call(this, next);\n      });\n      return;\n    }\n    const next = rewriteSrcset(rawValue);\n    setter.call(this, next);\n  });\n\n  const observer = new MutationObserver((mutations) => {\n    for (const mutation of mutations) {\n      if (mutation.type === \"attributes\" && mutation.target) {\n        rewriteElement(mutation.target);\n      }\n      if (mutation.type === \"childList\") {\n        mutation.addedNodes.forEach((node) => {\n          if (node && node.nodeType === 1) {\n            rewriteElement(node);\n          }\n        });\n      }\n    }\n  });\n\n  observer.observe(document.documentElement, {\n    attributes: true,\n    childList: true,\n    subtree: true,\n    attributeFilter: [\"src\", \"href\", \"srcset\", \"rel\", \"as\"]\n  });\n\n  document\n    .querySelectorAll(\"img,source,video,audio,script,link,iframe\")\n    .forEach((el) => rewriteElement(el));\n";
+export declare const replayDomRewriteScriptPart2 = "\n  const rewriteAttrValue = (element, attr, rawValue) => {\n    if (attr === \"srcset\") {\n      return rewriteSrcset(rawValue);\n    }\n\n    if (!shouldRewriteAttr(element, attr)) {\n      return rawValue;\n    }\n\n    const tag = (element.tagName || \"\").toLowerCase();\n    const rel = (element.getAttribute && element.getAttribute(\"rel\")) || \"\";\n    const relLower = rel.toLowerCase();\n    const as = String((element.getAttribute && element.getAttribute(\"as\")) || \"\").toLowerCase();\n    const fallbackType =\n      attr === \"href\" && (relLower.includes(\"stylesheet\") || (relLower.includes(\"preload\") && as === \"style\"))\n        ? \"text/css\"\n        : undefined;\n\n    return rewriteResourceUrl(rawValue, {\n      kind: \"setAttribute\",\n      tag,\n      attr,\n      fallbackType\n    });\n  };\n\n  const originalSetAttribute = Element.prototype.setAttribute;\n  Element.prototype.setAttribute = function(name, value) {\n    const attr = String(name).toLowerCase();\n    if (attr === \"src\" || attr === \"href\" || attr === \"srcset\") {\n      if (!readyResolved) {\n        const pendingValue = String(value);\n        onReady(() => {\n          const next = rewriteAttrValue(this, attr, pendingValue);\n          originalSetAttribute.call(this, name, next);\n        });\n        return;\n      }\n\n      const next = rewriteAttrValue(this, attr, String(value));\n      return originalSetAttribute.call(this, name, next);\n    }\n    return originalSetAttribute.call(this, name, value);\n  };\n\n  const rewriteHtmlChunk = (chunk) => {\n    const html = String(chunk || \"\");\n    if (!html) {\n      return html;\n    }\n\n    try {\n      const template = document.createElement(\"template\");\n      template.innerHTML = html;\n\n      template.content\n        .querySelectorAll(\"img,source,video,audio,script,link,iframe,object,embed,track\")\n        .forEach((element) => {\n          applyRewriteToElement(element);\n        });\n\n      template.content.querySelectorAll(\"img[srcset],source[srcset]\").forEach((element) => {\n        applyRewriteToElement(element);\n      });\n\n      return template.innerHTML;\n    } catch {\n      return html;\n    }\n  };\n\n  const originalDocumentWrite = typeof document.write === \"function\" ? document.write.bind(document) : null;\n  const originalDocumentWriteln =\n    typeof document.writeln === \"function\" ? document.writeln.bind(document) : null;\n\n  if (originalDocumentWrite) {\n    document.write = function(...args) {\n      const rewrittenArgs = args.map((value) => rewriteHtmlChunk(value));\n      return originalDocumentWrite(...rewrittenArgs);\n    };\n  }\n\n  if (originalDocumentWriteln) {\n    document.writeln = function(...args) {\n      const rewrittenArgs = args.map((value) => rewriteHtmlChunk(value));\n      return originalDocumentWriteln(...rewrittenArgs);\n    };\n  }\n\n  const patchProperty = (proto, prop, handler) => {\n    try {\n      const desc = Object.getOwnPropertyDescriptor(proto, prop);\n      if (!desc || !desc.set) return;\n      Object.defineProperty(proto, prop, {\n        configurable: true,\n        get: desc.get,\n        set: function(value) {\n          return handler.call(this, value, desc.set);\n        }\n      });\n    } catch {}\n  };\n\n  patchProperty(HTMLImageElement.prototype, \"src\", function(value, setter) {\n    const rawValue = String(value);\n    if (!readyResolved) {\n      onReady(() => {\n        const next = rewriteResourceUrl(rawValue, { kind: \"setter\", tag: \"img\", attr: \"src\" });\n        setter.call(this, next);\n      });\n      return;\n    }\n    const next = rewriteResourceUrl(rawValue, { kind: \"setter\", tag: \"img\", attr: \"src\" });\n    setter.call(this, next);\n  });\n\n  patchProperty(HTMLScriptElement.prototype, \"src\", function(value, setter) {\n    const rawValue = String(value);\n    if (!readyResolved) {\n      onReady(() => {\n        const next = rewriteResourceUrl(rawValue, { kind: \"setter\", tag: \"script\", attr: \"src\" });\n        setter.call(this, next);\n      });\n      return;\n    }\n    const next = rewriteResourceUrl(rawValue, { kind: \"setter\", tag: \"script\", attr: \"src\" });\n    setter.call(this, next);\n  });\n\n  patchProperty(HTMLLinkElement.prototype, \"href\", function(value, setter) {\n    const rawValue = String(value);\n    const rel = (this.getAttribute && this.getAttribute(\"rel\")) || \"\";\n    const relLower = rel.toLowerCase();\n    const as = String((this.getAttribute && this.getAttribute(\"as\")) || \"\").toLowerCase();\n    if (!readyResolved) {\n      onReady(() => {\n        const fallbackType =\n          relLower.includes(\"stylesheet\") || (relLower.includes(\"preload\") && as === \"style\")\n            ? \"text/css\"\n            : undefined;\n        const next = rewriteResourceUrl(rawValue, {\n          kind: \"setter\",\n          tag: \"link\",\n          attr: \"href\",\n          fallbackType\n        });\n        setter.call(this, next);\n      });\n      return;\n    }\n    const fallbackType =\n      relLower.includes(\"stylesheet\") || (relLower.includes(\"preload\") && as === \"style\")\n        ? \"text/css\"\n        : undefined;\n    const next = rewriteResourceUrl(rawValue, {\n      kind: \"setter\",\n      tag: \"link\",\n      attr: \"href\",\n      fallbackType\n    });\n    setter.call(this, next);\n  });\n\n  patchProperty(HTMLImageElement.prototype, \"srcset\", function(value, setter) {\n    const rawValue = String(value);\n    if (!readyResolved) {\n      onReady(() => {\n        const next = rewriteSrcset(rawValue);\n        setter.call(this, next);\n      });\n      return;\n    }\n    const next = rewriteSrcset(rawValue);\n    setter.call(this, next);\n  });\n\n  const observer = new MutationObserver((mutations) => {\n    for (const mutation of mutations) {\n      if (mutation.type === \"attributes\" && mutation.target) {\n        rewriteElement(mutation.target);\n      }\n      if (mutation.type === \"childList\") {\n        mutation.addedNodes.forEach((node) => {\n          if (node && node.nodeType === 1) {\n            rewriteElement(node);\n          }\n        });\n      }\n    }\n  });\n\n  observer.observe(document.documentElement, {\n    attributes: true,\n    childList: true,\n    subtree: true,\n    attributeFilter: [\"src\", \"href\", \"srcset\", \"rel\", \"as\"]\n  });\n\n  document\n    .querySelectorAll(\"img,source,video,audio,script,link,iframe\")\n    .forEach((el) => rewriteElement(el));\n";

package/dist/hackers/replay-dom-rewrite/script-part-2.js

@@ -1,43 +1,93 @@
 export const replayDomRewriteScriptPart2 = `
+  const rewriteAttrValue = (element, attr, rawValue) => {
+    if (attr === "srcset") {
+      return rewriteSrcset(rawValue);
+    }
+
+    if (!shouldRewriteAttr(element, attr)) {
+      return rawValue;
+    }
+
+    const tag = (element.tagName || "").toLowerCase();
+    const rel = (element.getAttribute && element.getAttribute("rel")) || "";
+    const relLower = rel.toLowerCase();
+    const as = String((element.getAttribute && element.getAttribute("as")) || "").toLowerCase();
+    const fallbackType =
+      attr === "href" && (relLower.includes("stylesheet") || (relLower.includes("preload") && as === "style"))
+        ? "text/css"
+        : undefined;
+
+    return rewriteResourceUrl(rawValue, {
+      kind: "setAttribute",
+      tag,
+      attr,
+      fallbackType
+    });
+  };
+
   const originalSetAttribute = Element.prototype.setAttribute;
   Element.prototype.setAttribute = function(name, value) {
     const attr = String(name).toLowerCase();
     if (attr === "src" || attr === "href" || attr === "srcset") {
       if (!readyResolved) {
         const pendingValue = String(value);
-        onReady(() => originalSetAttribute.call(this, name, pendingValue));
+        onReady(() => {
+          const next = rewriteAttrValue(this, attr, pendingValue);
+          originalSetAttribute.call(this, name, next);
+        });
         return;
       }
-      if (attr === "srcset") {
-        const rewritten = rewriteSrcset(String(value));
-        return originalSetAttribute.call(this, name, rewritten);
-      }
 
-      if (!shouldRewriteAttr(this, attr)) {
-        return originalSetAttribute.call(this, name, value);
-      }
+      const next = rewriteAttrValue(this, attr, String(value));
+      return originalSetAttribute.call(this, name, next);
+    }
+    return originalSetAttribute.call(this, name, value);
+  };
+
+  const rewriteHtmlChunk = (chunk) => {
+    const html = String(chunk || "");
+    if (!html) {
+      return html;
+    }
+
+    try {
+      const template = document.createElement("template");
+      template.innerHTML = html;
+
+      template.content
+        .querySelectorAll("img,source,video,audio,script,link,iframe,object,embed,track")
+        .forEach((element) => {
+          applyRewriteToElement(element);
+        });
 
-      const tag = (this.tagName || "").toLowerCase();
-      const rel = (this.getAttribute && this.getAttribute("rel")) || "";
-      const relLower = rel.toLowerCase();
-      const as = String((this.getAttribute && this.getAttribute("as")) || "").toLowerCase();
-      const fallbackType =
-        attr === "href" && (relLower.includes("stylesheet") || (relLower.includes("preload") && as === "style"))
-          ? "text/css"
-          : undefined;
-
-      const next = rewriteResourceUrl(String(value), {
-        kind: "setAttribute",
-        tag,
-        attr,
-        fallbackType
+      template.content.querySelectorAll("img[srcset],source[srcset]").forEach((element) => {
+        applyRewriteToElement(element);
       });
 
-      return originalSetAttribute.call(this, name, next);
+      return template.innerHTML;
+    } catch {
+      return html;
     }
-    return originalSetAttribute.call(this, name, value);
   };
 
+  const originalDocumentWrite = typeof document.write === "function" ? document.write.bind(document) : null;
+  const originalDocumentWriteln =
+    typeof document.writeln === "function" ? document.writeln.bind(document) : null;
+
+  if (originalDocumentWrite) {
+    document.write = function(...args) {
+      const rewrittenArgs = args.map((value) => rewriteHtmlChunk(value));
+      return originalDocumentWrite(...rewrittenArgs);
+    };
+  }
+
+  if (originalDocumentWriteln) {
+    document.writeln = function(...args) {
+      const rewrittenArgs = args.map((value) => rewriteHtmlChunk(value));
+      return originalDocumentWriteln(...rewrittenArgs);
+    };
+  }
+
   const patchProperty = (proto, prop, handler) => {
     try {
       const desc = Object.getOwnPropertyDescriptor(proto, prop);
@@ -85,16 +135,6 @@ export const replayDomRewriteScriptPart2 = `
     const as = String((this.getAttribute && this.getAttribute("as")) || "").toLowerCase();
     if (!readyResolved) {
       onReady(() => {
-        if (
-          !relLower.includes("stylesheet") &&
-          !relLower.includes("icon") &&
-          !relLower.includes("preload") &&
-          !relLower.includes("prefetch") &&
-          !relLower.includes("modulepreload")
-        ) {
-          setter.call(this, rawValue);
-          return;
-        }
         const fallbackType =
           relLower.includes("stylesheet") || (relLower.includes("preload") && as === "style")
             ? "text/css"
@@ -109,16 +149,6 @@ export const replayDomRewriteScriptPart2 = `
       });
       return;
     }
-    if (
-      !relLower.includes("stylesheet") &&
-      !relLower.includes("icon") &&
-      !relLower.includes("preload") &&
-      !relLower.includes("prefetch") &&
-      !relLower.includes("modulepreload")
-    ) {
-      setter.call(this, rawValue);
-      return;
-    }
     const fallbackType =
       relLower.includes("stylesheet") || (relLower.includes("preload") && as === "style")
         ? "text/css"

package/dist/hackers/replay-fetch.js

@@ -11,6 +11,10 @@ export const replayFetchResponder = {
       await ready;
     }
     const url = typeof input === "string" ? input : input.url;
+    // Let blob: and data: URLs pass through to the original fetch.
+    if (url && (url.startsWith("blob:") || url.startsWith("data:"))) {
+      return originalFetch(input, init);
+    }
     const method = (init && init.method) || (typeof input === "string" ? "GET" : input.method || "GET");
     const body = init && init.body;
     try {

package/dist/hackers/replay-websocket.js

@@ -4,19 +4,61 @@ export const replayWebSocketStub = {
     build: () => `
   // Stub WebSocket to prevent live network connections.
   if (window.WebSocket) {
-    const OriginalWebSocket = window.WebSocket;
+    var OriginalWebSocket = window.WebSocket;
     window.WebSocket = function(url, protocols) {
-      const socket = {
-        url,
-        readyState: 1,
+      var listeners = {};
+      var socket = {
+        url: url,
+        protocol: typeof protocols === 'string' ? protocols : (Array.isArray(protocols) ? protocols[0] || '' : ''),
+        readyState: 0,
+        bufferedAmount: 0,
+        extensions: '',
+        binaryType: 'blob',
+        onopen: null,
+        onclose: null,
+        onerror: null,
+        onmessage: null,
+        CONNECTING: 0, OPEN: 1, CLOSING: 2, CLOSED: 3,
         send: function() {},
-        close: function() {},
-        addEventListener: function() {},
-        removeEventListener: function() {},
-        dispatchEvent: function() { return false; }
+        close: function() {
+          if (socket.readyState >= 2) return;
+          socket.readyState = 3;
+          var evt = new Event('close');
+          try { evt.code = 1000; evt.reason = ''; evt.wasClean = true; } catch(e) {}
+          if (typeof socket.onclose === 'function') socket.onclose(evt);
+          var fns = listeners['close'] || [];
+          for (var i = 0; i < fns.length; i++) { try { fns[i](evt); } catch(e) {} }
+        },
+        addEventListener: function(type, fn) {
+          if (!listeners[type]) listeners[type] = [];
+          listeners[type].push(fn);
+        },
+        removeEventListener: function(type, fn) {
+          if (!listeners[type]) return;
+          listeners[type] = listeners[type].filter(function(f) { return f !== fn; });
+        },
+        dispatchEvent: function(evt) {
+          var fns = listeners[evt.type] || [];
+          for (var i = 0; i < fns.length; i++) { try { fns[i](evt); } catch(e) {} }
+          return true;
+        }
       };
+
+      // Simulate async open — the SPA often waits for onopen before hydrating.
+      setTimeout(function() {
+        socket.readyState = 1;
+        var evt = new Event('open');
+        if (typeof socket.onopen === 'function') socket.onopen(evt);
+        var fns = listeners['open'] || [];
+        for (var i = 0; i < fns.length; i++) { try { fns[i](evt); } catch(e) {} }
+      }, 0);
+
       return socket;
     };
+    window.WebSocket.CONNECTING = 0;
+    window.WebSocket.OPEN = 1;
+    window.WebSocket.CLOSING = 2;
+    window.WebSocket.CLOSED = 3;
     window.WebSocket.__pagepocketOriginal = OriginalWebSocket;
   }
 `

package/dist/hackers/replay-worker.d.ts

@@ -0,0 +1,18 @@
+import type { ScriptHacker } from "./types.js";
+/**
+ * Intercept `new Worker(url|blob)` during replay so that worker-internal
+ * `fetch` / `XHR` requests are served from the saved api.json snapshot.
+ *
+ * Strategy: create a **real** Worker (preserving the full Worker global scope)
+ * but prepend the replay fetch/XHR patches and the api.json records to the
+ * worker script source.  This avoids the impossible task of perfectly
+ * emulating the Worker global on the main thread.
+ *
+ * The injected preamble inside the worker:
+ *   1. Defines a minimal `matchAPI` + `findRecord` using the serialised records.
+ *   2. Monkey-patches `self.fetch` and `self.XMLHttpRequest.prototype` so
+ *      network requests hit the saved records instead of the (offline) network.
+ *   3. Hands off to the original worker script, which now runs in a genuine
+ *      Worker thread with all native APIs intact.
+ */
+export declare const replayWorkerStub: ScriptHacker;