@pagepocket/lib 0.4.0

package/dist/hackers/replay-dom-rewrite.js

@@ -0,0 +1,295 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.replayDomRewriter = void 0;
+exports.replayDomRewriter = {
+    id: "replay-dom-rewriter",
+    stage: "replay",
+    build: () => `
+  // Placeholder data URLs for missing resources.
+  const transparentGif = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
+  const emptyScript = "data:text/javascript,/*pagepocket-missing*/";
+  const emptyStyle = "data:text/css,/*pagepocket-missing*/";
+
+  let readyResolved = false;
+  if (ready && typeof ready.then === "function") {
+    ready.then(() => {
+      readyResolved = true;
+    });
+  } else {
+    readyResolved = true;
+  }
+
+  const onReady = (callback) => {
+    if (readyResolved) {
+      callback();
+      return;
+    }
+    if (ready && typeof ready.then === "function") {
+      ready.then(callback);
+    } else {
+      callback();
+    }
+  };
+
+  // Rewrite srcset values to local files only (avoid data: URLs in srcset).
+  const rewriteSrcset = (value) => {
+    if (!value) return value;
+    return value.split(",").map((part) => {
+      const trimmed = part.trim();
+      if (!trimmed) return trimmed;
+      const pieces = trimmed.split(/\\s+/, 2);
+      const url = pieces[0];
+      const descriptor = pieces[1];
+      if (isLocalResource(url)) return trimmed;
+      const localPath = findLocalPath(url);
+      if (localPath) {
+        return descriptor ? localPath + " " + descriptor : localPath;
+      }
+      return trimmed;
+    }).join(", ");
+  };
+
+  // Rewrite element attributes to local files or data URLs.
+  const rewriteElement = (element) => {
+    if (!element || !element.getAttribute) return;
+    if (!readyResolved) {
+      onReady(() => rewriteElement(element));
+      return;
+    }
+    const tag = (element.tagName || "").toLowerCase();
+    if (tag === "img" || tag === "source" || tag === "video" || tag === "audio" || tag === "script" || tag === "iframe") {
+      const src = element.getAttribute("src");
+      if (src && !isLocalResource(src) && !src.startsWith("data:") && !src.startsWith("blob:")) {
+        const localPath = findLocalPath(src);
+        if (localPath) {
+          element.setAttribute("src", localPath);
+          return;
+        }
+        const record = findByUrl(src);
+        const fallback = tag === "script" ? emptyScript : transparentGif;
+        element.setAttribute("src", record ? toDataUrl(record) : fallback);
+      }
+    }
+
+    if (tag === "link") {
+      const href = element.getAttribute("href");
+      const rel = (element.getAttribute("rel") || "").toLowerCase();
+      if (href && !isLocalResource(href) && !href.startsWith("data:") && !href.startsWith("blob:")) {
+        const localPath = findLocalPath(href);
+        if (localPath) {
+          element.setAttribute("href", localPath);
+          return;
+        }
+        const record = findByUrl(href);
+        const fallback = rel === "stylesheet" ? emptyStyle : emptyStyle;
+        element.setAttribute("href", record ? toDataUrl(record, "text/css") : fallback);
+      }
+    }
+
+    const srcset = element.getAttribute("srcset");
+    if (srcset) {
+      element.setAttribute("srcset", rewriteSrcset(srcset));
+    }
+  };
+
+  // Intercept DOM attribute writes to keep resources local.
+  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));
+        return;
+      }
+      if (attr === "srcset") {
+        const rewritten = rewriteSrcset(String(value));
+        return originalSetAttribute.call(this, name, rewritten);
+      }
+
+      const tag = (this.tagName || "").toLowerCase();
+      const rel = (this.getAttribute && this.getAttribute("rel")) || "";
+      const relLower = rel.toLowerCase();
+
+      if (isLocalResource(String(value))) {
+        return originalSetAttribute.call(this, name, value);
+      }
+      const localPath = findLocalPath(String(value));
+      if (localPath) {
+        return originalSetAttribute.call(this, name, localPath);
+      }
+      const record = findByUrl(String(value));
+      if (record) {
+        const fallbackType = attr === "href" && relLower.includes("stylesheet") ? "text/css" : undefined;
+        const dataUrl = toDataUrl(record, fallbackType);
+        return originalSetAttribute.call(this, name, dataUrl);
+      }
+      if (attr === "src") {
+        const fallback = tag === "script" ? emptyScript : transparentGif;
+        return originalSetAttribute.call(this, name, fallback);
+      }
+      if (attr === "href") {
+        const fallback = relLower === "stylesheet" ? emptyStyle : emptyStyle;
+        return originalSetAttribute.call(this, name, fallback);
+      }
+    }
+    return originalSetAttribute.call(this, name, value);
+  };
+
+  // Patch property setters (e.g. img.src) so direct assignments are rewritten.
+  const patchProperty = (proto, prop, handler) => {
+    try {
+      const desc = Object.getOwnPropertyDescriptor(proto, prop);
+      if (!desc || !desc.set) return;
+      Object.defineProperty(proto, prop, {
+        configurable: true,
+        get: desc.get,
+        set: function(value) {
+          return handler.call(this, value, desc.set);
+        }
+      });
+    } catch {}
+  };
+
+  patchProperty(HTMLImageElement.prototype, "src", function(value, setter) {
+    const rawValue = String(value);
+    if (!readyResolved) {
+      onReady(() => {
+        if (isLocalResource(rawValue)) {
+          setter.call(this, rawValue);
+          return;
+        }
+        const localPath = findLocalPath(rawValue);
+        if (localPath) {
+          setter.call(this, localPath);
+          return;
+        }
+        const record = findByUrl(rawValue);
+        const next = record ? toDataUrl(record) : transparentGif;
+        setter.call(this, next);
+      });
+      return;
+    }
+    if (isLocalResource(rawValue)) {
+      setter.call(this, rawValue);
+      return;
+    }
+    const localPath = findLocalPath(rawValue);
+    if (localPath) {
+      setter.call(this, localPath);
+      return;
+    }
+    const record = findByUrl(rawValue);
+    const next = record ? toDataUrl(record) : transparentGif;
+    setter.call(this, next);
+  });
+
+  patchProperty(HTMLScriptElement.prototype, "src", function(value, setter) {
+    const rawValue = String(value);
+    if (!readyResolved) {
+      onReady(() => {
+        if (isLocalResource(rawValue)) {
+          setter.call(this, rawValue);
+          return;
+        }
+        const localPath = findLocalPath(rawValue);
+        if (localPath) {
+          setter.call(this, localPath);
+          return;
+        }
+        const record = findByUrl(rawValue);
+        const next = record ? toDataUrl(record) : emptyScript;
+        setter.call(this, next);
+      });
+      return;
+    }
+    if (isLocalResource(rawValue)) {
+      setter.call(this, rawValue);
+      return;
+    }
+    const localPath = findLocalPath(rawValue);
+    if (localPath) {
+      setter.call(this, localPath);
+      return;
+    }
+    const record = findByUrl(rawValue);
+    const next = record ? toDataUrl(record) : emptyScript;
+    setter.call(this, next);
+  });
+
+  patchProperty(HTMLLinkElement.prototype, "href", function(value, setter) {
+    const rawValue = String(value);
+    const rel = (this.getAttribute && this.getAttribute("rel")) || "";
+    const relLower = rel.toLowerCase();
+    if (!readyResolved) {
+      onReady(() => {
+        if (isLocalResource(rawValue)) {
+          setter.call(this, rawValue);
+          return;
+        }
+        const localPath = findLocalPath(rawValue);
+        if (localPath) {
+          setter.call(this, localPath);
+          return;
+        }
+        const record = findByUrl(rawValue);
+        const next = record ? toDataUrl(record, relLower.includes("stylesheet") ? "text/css" : undefined) : emptyStyle;
+        setter.call(this, next);
+      });
+      return;
+    }
+    if (isLocalResource(rawValue)) {
+      setter.call(this, rawValue);
+      return;
+    }
+    const localPath = findLocalPath(rawValue);
+    if (localPath) {
+      setter.call(this, localPath);
+      return;
+    }
+    const record = findByUrl(rawValue);
+    const next = record ? toDataUrl(record, relLower.includes("stylesheet") ? "text/css" : undefined) : emptyStyle;
+    setter.call(this, next);
+  });
+
+  patchProperty(HTMLImageElement.prototype, "srcset", function(value, setter) {
+    const rawValue = String(value);
+    if (!readyResolved) {
+      onReady(() => {
+        const next = rewriteSrcset(rawValue);
+        setter.call(this, next);
+      });
+      return;
+    }
+    const next = rewriteSrcset(rawValue);
+    setter.call(this, next);
+  });
+
+  // Observe DOM mutations and rewrite any new elements or attributes.
+  const observer = new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      if (mutation.type === "attributes" && mutation.target) {
+        rewriteElement(mutation.target);
+      }
+      if (mutation.type === "childList") {
+        mutation.addedNodes.forEach((node) => {
+          if (node && node.nodeType === 1) {
+            rewriteElement(node);
+            const descendants = node.querySelectorAll ? node.querySelectorAll("img,source,video,audio,script,link,iframe") : [];
+            descendants.forEach((el) => rewriteElement(el));
+          }
+        });
+      }
+    }
+  });
+
+  observer.observe(document.documentElement, {
+    attributes: true,
+    childList: true,
+    subtree: true,
+    attributeFilter: ["src", "href", "srcset"]
+  });
+
+  document.querySelectorAll("img,source,video,audio,script,link,iframe").forEach((el) => rewriteElement(el));
+`
+};

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

@@ -0,0 +1,2 @@
+import type { ScriptHacker } from "./types";
+export declare const replayEventSourceStub: ScriptHacker;

package/dist/hackers/replay-eventsource.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.replayEventSourceStub = void 0;
+exports.replayEventSourceStub = {
+    id: "replay-eventsource-stub",
+    stage: "replay",
+    build: () => `
+  // Stub EventSource to prevent live network connections.
+  if (window.EventSource) {
+    const OriginalEventSource = window.EventSource;
+    window.EventSource = function(url) {
+      const source = {
+        url,
+        readyState: 1,
+        close: function() {},
+        addEventListener: function() {},
+        removeEventListener: function() {},
+        dispatchEvent: function() { return false; }
+      };
+      return source;
+    };
+    window.EventSource.__pagepocketOriginal = OriginalEventSource;
+  }
+`
+};

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

@@ -0,0 +1,2 @@
+import type { ScriptHacker } from "./types";
+export declare const replayFetchResponder: ScriptHacker;

package/dist/hackers/replay-fetch.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.replayFetchResponder = void 0;
+exports.replayFetchResponder = {
+    id: "replay-fetch-responder",
+    stage: "replay",
+    build: () => `
+  // Patch fetch to serve from recorded network data.
+   const originalFetch = (typeof __pagepocketOriginalFetch === "function")
+    ? __pagepocketOriginalFetch
+    : window.fetch.bind(window);
+   window.fetch = async (input, init = {}) => {
+    if (ready && typeof ready.then === "function") {
+      await ready;
+    }
+    const url = typeof input === "string" ? input : input.url;
+    const method = (init && init.method) || (typeof input === "string" ? "GET" : input.method || "GET");
+    const body = init && init.body;
+    try {
+      const record = findRecord(method, url, body);
+      if (record) {
+        return responseFromRecord(record);
+      }
+    } catch (err) {
+      console.warn("pagepocket fetch replay fallback", { url, method, err });
+    }
+    return new Response("", { status: 404, statusText: "Not Found" });
+  };
+  window.fetch.__pagepocketOriginal = originalFetch;
+  ensureReplayPatches && ensureReplayPatches();
+
+`
+};

package/dist/hackers/replay-svg-image.d.ts

@@ -0,0 +1,2 @@
+import type { ScriptHacker } from "./types";
+export declare const replaySvgImageRewriter: ScriptHacker;

package/dist/hackers/replay-svg-image.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.replaySvgImageRewriter = void 0;
+exports.replaySvgImageRewriter = {
+    id: "replay-svg-image-rewriter",
+    stage: "replay",
+    build: () => `
+  (function(){
+    const xlinkNs = "http://www.w3.org/1999/xlink";
+    const transparentGif = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
+
+    let readyResolved = false;
+    if (ready && typeof ready.then === "function") {
+      ready.then(() => {
+        readyResolved = true;
+      });
+    } else {
+      readyResolved = true;
+    }
+
+    const onReady = (callback) => {
+      if (readyResolved) {
+        callback();
+        return;
+      }
+      if (ready && typeof ready.then === "function") {
+        ready.then(callback);
+      } else {
+        callback();
+      }
+    };
+
+    const resolveHref = (value) => {
+      if (!value) return null;
+      if (isLocalResource(value)) return value;
+      const localPath = findLocalPath(value);
+      if (localPath) return localPath;
+      const record = findByUrl(value);
+      if (record) return toDataUrl(record);
+      return transparentGif;
+    };
+
+    const rewriteImage = (el) => {
+      if (!el || !el.getAttribute) return;
+      const href = el.getAttribute("href") || (el.getAttributeNS && el.getAttributeNS(xlinkNs, "href"));
+      if (!href) return;
+      if (href.startsWith("data:") || href.startsWith("blob:") || isLocalResource(href)) return;
+      if (!readyResolved) {
+        try { el.setAttributeNS(xlinkNs, "href", transparentGif); } catch {}
+        try { el.setAttribute("href", transparentGif); } catch {}
+        onReady(() => rewriteImage(el));
+        return;
+      }
+      const next = resolveHref(href);
+      if (!next) return;
+      try { el.setAttributeNS(xlinkNs, "href", next); } catch {}
+      try { el.setAttribute("href", next); } catch {}
+    };
+
+    const observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === "attributes" && mutation.target && mutation.target.tagName && mutation.target.tagName.toLowerCase() === "image") {
+          rewriteImage(mutation.target);
+        }
+        if (mutation.type === "childList") {
+          mutation.addedNodes.forEach((node) => {
+            if (node && node.nodeType === 1) {
+              if ((node.tagName || "").toLowerCase() === "image") {
+                rewriteImage(node);
+              }
+              const descendants = node.querySelectorAll ? node.querySelectorAll("image") : [];
+              descendants.forEach((img) => rewriteImage(img));
+            }
+          });
+        }
+      }
+    });
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      childList: true,
+      subtree: true,
+      attributeFilter: ["href", "xlink:href"]
+    });
+
+    document.querySelectorAll("image").forEach((el) => rewriteImage(el));
+  })();
+  `
+};

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

@@ -0,0 +1,2 @@
+import type { ScriptHacker } from "./types";
+export declare const replayWebSocketStub: ScriptHacker;

package/dist/hackers/replay-websocket.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.replayWebSocketStub = void 0;
+exports.replayWebSocketStub = {
+    id: "replay-websocket-stub",
+    stage: "replay",
+    build: () => `
+  // Stub WebSocket to prevent live network connections.
+  if (window.WebSocket) {
+    const OriginalWebSocket = window.WebSocket;
+    window.WebSocket = function(url, protocols) {
+      const socket = {
+        url,
+        readyState: 1,
+        send: function() {},
+        close: function() {},
+        addEventListener: function() {},
+        removeEventListener: function() {},
+        dispatchEvent: function() { return false; }
+      };
+      return socket;
+    };
+    window.WebSocket.__pagepocketOriginal = OriginalWebSocket;
+  }
+`
+};

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

@@ -0,0 +1,2 @@
+import type { ScriptHacker } from "./types";
+export declare const replayXhrResponder: ScriptHacker;

package/dist/hackers/replay-xhr.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.replayXhrResponder = void 0;
+exports.replayXhrResponder = {
+    id: "replay-xhr-responder",
+    stage: "replay",
+    build: () => `
+  // Patch XHR so app code sees consistent responses offline.
+  const originalOpen = XMLHttpRequest.prototype.open;
+  const originalSend = XMLHttpRequest.prototype.send;
+  const waitForReady = () => {
+    if (ready && typeof ready.then === "function") {
+      return ready;
+    }
+    return Promise.resolve();
+  };
+  XMLHttpRequest.prototype.open = function(method, url, ...rest) {
+    this.__pagepocketMethod = method;
+    this.__pagepocketUrl = url;
+    return originalOpen.call(this, method, url, ...rest);
+  };
+  XMLHttpRequest.prototype.send = function(body) {
+    const method = this.__pagepocketMethod || "GET";
+    const url = this.__pagepocketUrl || "";
+    const xhr = this;
+    waitForReady().then(() => {
+      let record = null;
+      try {
+        record = findRecord(method, url, body);
+      } catch (err) {
+        console.warn("pagepocket xhr replay fallback", { url, method, err });
+      }
+      if (record) {
+        const responseText = record.responseBody || "";
+        const status = record.status || 200;
+        const statusText = record.statusText || "OK";
+
+        setTimeout(() => {
+          defineProp(xhr, "readyState", 4);
+          defineProp(xhr, "status", status);
+          defineProp(xhr, "statusText", statusText);
+          if (xhr.responseType === "arraybuffer" && record.responseBodyBase64) {
+            const bytes = decodeBase64(record.responseBodyBase64);
+            defineProp(xhr, "response", bytes.buffer);
+            defineProp(xhr, "responseText", "");
+          } else if (xhr.responseType === "blob" && record.responseBodyBase64) {
+            const bytes = decodeBase64(record.responseBodyBase64);
+            defineProp(xhr, "response", new Blob([bytes]));
+            defineProp(xhr, "responseText", "");
+          } else {
+            defineProp(xhr, "response", responseText);
+            defineProp(xhr, "responseText", responseText);
+          }
+          if (typeof xhr.onreadystatechange === "function") xhr.onreadystatechange();
+          if (typeof xhr.onload === "function") xhr.onload(new Event("load"));
+          if (typeof xhr.onloadend === "function") xhr.onloadend(new Event("loadend"));
+          if (xhr.dispatchEvent) {
+            xhr.dispatchEvent(new Event("readystatechange"));
+            xhr.dispatchEvent(new Event("load"));
+            xhr.dispatchEvent(new Event("loadend"));
+          }
+        }, 0);
+        return;
+      }
+
+      const status = 404;
+      const statusText = "Not Found";
+
+      setTimeout(() => {
+        defineProp(xhr, "readyState", 4);
+        defineProp(xhr, "status", status);
+        defineProp(xhr, "statusText", statusText);
+        defineProp(xhr, "response", "");
+        defineProp(xhr, "responseText", "");
+        if (typeof xhr.onreadystatechange === "function") xhr.onreadystatechange();
+        if (typeof xhr.onload === "function") xhr.onload(new Event("load"));
+        if (typeof xhr.onloadend === "function") xhr.onloadend(new Event("loadend"));
+        if (xhr.dispatchEvent) {
+          xhr.dispatchEvent(new Event("readystatechange"));
+          xhr.dispatchEvent(new Event("load"));
+          xhr.dispatchEvent(new Event("loadend"));
+        }
+      }, 0);
+    });
+    return;
+  };
+  XMLHttpRequest.prototype.open.__pagepocketOriginal = originalOpen;
+  XMLHttpRequest.prototype.send.__pagepocketOriginal = originalSend;
+  ensureReplayPatches && ensureReplayPatches();
+`
+};

package/dist/hackers/types.d.ts

@@ -0,0 +1,10 @@
+export type HackerStage = "preload" | "replay";
+export type HackerContext = {
+    stage: HackerStage;
+};
+export type ScriptHacker = {
+    id: string;
+    stage: "preload" | "replay";
+    build: (context: HackerContext) => string;
+};
+export type HackerModule = ScriptHacker;

package/dist/hackers/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { PagePocket } from "./pagepocket";
+export type { PagePocketOptions } from "./pagepocket";
+export type { FetchRecord, NetworkRecord, LighterceptorNetworkRecord, SnapshotData } from "./types";
+export { buildReplayScript } from "./replay-script";
+export { buildPreloadScript } from "./preload";
+export { findFaviconDataUrl, mapLighterceptorRecords, toDataUrlFromRecord } from "./network-records";

package/dist/index.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toDataUrlFromRecord = exports.mapLighterceptorRecords = exports.findFaviconDataUrl = exports.buildPreloadScript = exports.buildReplayScript = exports.PagePocket = void 0;
+var pagepocket_1 = require("./pagepocket");
+Object.defineProperty(exports, "PagePocket", { enumerable: true, get: function () { return pagepocket_1.PagePocket; } });
+var replay_script_1 = require("./replay-script");
+Object.defineProperty(exports, "buildReplayScript", { enumerable: true, get: function () { return replay_script_1.buildReplayScript; } });
+var preload_1 = require("./preload");
+Object.defineProperty(exports, "buildPreloadScript", { enumerable: true, get: function () { return preload_1.buildPreloadScript; } });
+var network_records_1 = require("./network-records");
+Object.defineProperty(exports, "findFaviconDataUrl", { enumerable: true, get: function () { return network_records_1.findFaviconDataUrl; } });
+Object.defineProperty(exports, "mapLighterceptorRecords", { enumerable: true, get: function () { return network_records_1.mapLighterceptorRecords; } });
+Object.defineProperty(exports, "toDataUrlFromRecord", { enumerable: true, get: function () { return network_records_1.toDataUrlFromRecord; } });

package/dist/network-records.d.ts

@@ -0,0 +1,4 @@
+import type { LighterceptorNetworkRecord, NetworkRecord } from "./types";
+export declare const toDataUrlFromRecord: (record: NetworkRecord) => string | null;
+export declare const findFaviconDataUrl: (records: NetworkRecord[]) => string | null;
+export declare const mapLighterceptorRecords: (records: LighterceptorNetworkRecord[] | undefined) => NetworkRecord[];