@posthog/rrweb-record 0.0.26 → 0.0.28

package/dist/rrweb-record.umd.cjs

@@ -251,91 +251,6 @@ function isShadowRoot(n2) {
 function isNativeShadowDom(shadowRoot2) {
   return Object.prototype.toString.call(shadowRoot2) === "[object ShadowRoot]";
 }
-function fixBrowserCompatibilityIssuesInCSS(cssText) {
-  if (cssText.includes(" background-clip: text;") && !cssText.includes(" -webkit-background-clip: text;")) {
-    cssText = cssText.replace(
-      /\sbackground-clip:\s*text;/g,
-      " -webkit-background-clip: text; background-clip: text;"
-    );
-  }
-  return cssText;
-}
-function escapeImportStatement(rule2) {
-  const { cssText } = rule2;
-  if (cssText.split('"').length < 3) return cssText;
-  const statement = ["@import", `url(${JSON.stringify(rule2.href)})`];
-  if (rule2.layerName === "") {
-    statement.push(`layer`);
-  } else if (rule2.layerName) {
-    statement.push(`layer(${rule2.layerName})`);
-  }
-  if (rule2.supportsText) {
-    statement.push(`supports(${rule2.supportsText})`);
-  }
-  if (rule2.media.length) {
-    statement.push(rule2.media.mediaText);
-  }
-  return statement.join(" ") + ";";
-}
-function stringifyStylesheet(s2) {
-  try {
-    const rules2 = s2.rules || s2.cssRules;
-    if (!rules2) {
-      return null;
-    }
-    let sheetHref = s2.href;
-    if (!sheetHref && s2.ownerNode) {
-      sheetHref = s2.ownerNode.baseURI;
-    }
-    const stringifiedRules = Array.from(
-      rules2,
-      (rule2) => stringifyRule(rule2, sheetHref)
-    ).join("");
-    return fixBrowserCompatibilityIssuesInCSS(stringifiedRules);
-  } catch (error) {
-    return null;
-  }
-}
-function stringifyRule(rule2, sheetHref) {
-  var _a2;
-  if (isCSSImportRule(rule2)) {
-    let importStringified;
-    try {
-      importStringified = // for same-origin stylesheets,
-      // we can access the imported stylesheet rules directly
-      stringifyStylesheet(rule2.styleSheet) || // work around browser issues with the raw string `@import url(...)` statement
-      escapeImportStatement(rule2);
-    } catch (error) {
-      importStringified = rule2.cssText;
-    }
-    try {
-      if (importStringified && ((_a2 = rule2.styleSheet) == null ? void 0 : _a2.href)) {
-        return absolutifyURLs(importStringified, rule2.styleSheet.href);
-      }
-    } catch (e) {
-    }
-    return importStringified;
-  } else {
-    let ruleStringified = rule2.cssText;
-    if (isCSSStyleRule(rule2) && rule2.selectorText.includes(":")) {
-      ruleStringified = fixSafariColons(ruleStringified);
-    }
-    if (sheetHref) {
-      return absolutifyURLs(ruleStringified, sheetHref);
-    }
-    return ruleStringified;
-  }
-}
-function fixSafariColons(cssStringified) {
-  const regex = /(\[(?:[\w-]+)[^\\])(:(?:[\w-]+)\])/gm;
-  return cssStringified.replace(regex, "$1\\$2");
-}
-function isCSSImportRule(rule2) {
-  return "styleSheet" in rule2;
-}
-function isCSSStyleRule(rule2) {
-  return "selectorText" in rule2;
-}
 class Mirror {
   constructor() {
     __publicField$1(this, "idNodeMap", /* @__PURE__ */ new Map());
@@ -459,6 +374,91 @@ function extractFileExtension(path, baseURL) {
   const match = url.pathname.match(regex);
   return (_a2 = match == null ? void 0 : match[1]) != null ? _a2 : null;
 }
+function fixBrowserCompatibilityIssuesInCSS(cssText) {
+  if (cssText.includes(" background-clip: text;") && !cssText.includes(" -webkit-background-clip: text;")) {
+    cssText = cssText.replace(
+      /\sbackground-clip:\s*text;/g,
+      " -webkit-background-clip: text; background-clip: text;"
+    );
+  }
+  return cssText;
+}
+function escapeImportStatement(rule2) {
+  const { cssText } = rule2;
+  if (cssText.split('"').length < 3) return cssText;
+  const statement = ["@import", `url(${JSON.stringify(rule2.href)})`];
+  if (rule2.layerName === "") {
+    statement.push(`layer`);
+  } else if (rule2.layerName) {
+    statement.push(`layer(${rule2.layerName})`);
+  }
+  if (rule2.supportsText) {
+    statement.push(`supports(${rule2.supportsText})`);
+  }
+  if (rule2.media.length) {
+    statement.push(rule2.media.mediaText);
+  }
+  return statement.join(" ") + ";";
+}
+function stringifyStylesheet(s2) {
+  try {
+    const rules2 = s2.rules || s2.cssRules;
+    if (!rules2) {
+      return null;
+    }
+    let sheetHref = s2.href;
+    if (!sheetHref && s2.ownerNode) {
+      sheetHref = s2.ownerNode.baseURI;
+    }
+    const stringifiedRules = Array.from(
+      rules2,
+      (rule2) => stringifyRule(rule2, sheetHref)
+    ).join("");
+    return fixBrowserCompatibilityIssuesInCSS(stringifiedRules);
+  } catch (error) {
+    return null;
+  }
+}
+function stringifyRule(rule2, sheetHref) {
+  var _a2;
+  if (isCSSImportRule(rule2)) {
+    let importStringified;
+    try {
+      importStringified = // for same-origin stylesheets,
+      // we can access the imported stylesheet rules directly
+      stringifyStylesheet(rule2.styleSheet) || // work around browser issues with the raw string `@import url(...)` statement
+      escapeImportStatement(rule2);
+    } catch (error) {
+      importStringified = rule2.cssText;
+    }
+    try {
+      if (importStringified && ((_a2 = rule2.styleSheet) == null ? void 0 : _a2.href)) {
+        return absolutifyURLs(importStringified, rule2.styleSheet.href);
+      }
+    } catch (e) {
+    }
+    return importStringified;
+  } else {
+    let ruleStringified = rule2.cssText;
+    if (isCSSStyleRule(rule2) && rule2.selectorText.includes(":")) {
+      ruleStringified = fixSafariColons(ruleStringified);
+    }
+    if (sheetHref) {
+      return absolutifyURLs(ruleStringified, sheetHref);
+    }
+    return ruleStringified;
+  }
+}
+function fixSafariColons(cssStringified) {
+  const regex = /(\[(?:[\w-]+)[^\\])(:(?:[\w-]+)\])/gm;
+  return cssStringified.replace(regex, "$1\\$2");
+}
+function isCSSImportRule(rule2) {
+  return "styleSheet" in rule2;
+}
+function isCSSStyleRule(rule2) {
+  return "selectorText" in rule2;
+}
 function extractOrigin(url) {
   let origin = "";
   if (url.indexOf("//") > -1) {
@@ -11508,6 +11508,9 @@ class IframeManager {
   addLoadListener(cb) {
     this.loadListener = cb;
   }
+  removeLoadListener() {
+    this.loadListener = void 0;
+  }
   attachIframe(iframeEl, childSn) {
     var _a2;
     this.mutationCb({
@@ -11861,9 +11864,9 @@ const saveWebGLVar = (value, win, ctx) => {
   }
   return index2;
 };
-function serializeArg(value, win, ctx) {
+function serializeArg(value, win, ctx, dataURLOptions) {
   if (value instanceof Array) {
-    return value.map((arg) => serializeArg(arg, win, ctx));
+    return value.map((arg) => serializeArg(arg, win, ctx, dataURLOptions));
   } else if (value === null) {
     return value;
   } else if (value instanceof Float32Array || value instanceof Float64Array || value instanceof Int32Array || value instanceof Uint32Array || value instanceof Uint8Array || value instanceof Uint16Array || value instanceof Int16Array || value instanceof Int8Array || value instanceof Uint8ClampedArray) {
@@ -11889,7 +11892,7 @@ function serializeArg(value, win, ctx) {
     return {
       rr_type: name,
       args: [
-        serializeArg(value.buffer, win, ctx),
+        serializeArg(value.buffer, win, ctx, dataURLOptions),
         value.byteOffset,
         value.byteLength
       ]
@@ -11903,7 +11906,7 @@ function serializeArg(value, win, ctx) {
     };
   } else if (value instanceof HTMLCanvasElement) {
     const name = "HTMLImageElement";
-    const src = value.toDataURL();
+    const src = value.toDataURL(dataURLOptions.type, dataURLOptions.quality);
     return {
       rr_type: name,
       src
@@ -11912,7 +11915,11 @@ function serializeArg(value, win, ctx) {
     const name = value.constructor.name;
     return {
       rr_type: name,
-      args: [serializeArg(value.data, win, ctx), value.width, value.height]
+      args: [
+        serializeArg(value.data, win, ctx, dataURLOptions),
+        value.width,
+        value.height
+      ]
     };
   } else if (isInstanceOfWebGLObject(value, win) || typeof value === "object") {
     const name = value.constructor.name;
@@ -11924,8 +11931,8 @@ function serializeArg(value, win, ctx) {
   }
   return value;
 }
-const serializeArgs = (args, win, ctx) => {
-  return args.map((arg) => serializeArg(arg, win, ctx));
+const serializeArgs = (args, win, ctx, dataURLOptions) => {
+  return args.map((arg) => serializeArg(arg, win, ctx, dataURLOptions));
 };
 const isInstanceOfWebGLObject = (value, win) => {
   const webGLConstructorNames = [
@@ -11951,7 +11958,7 @@ const isInstanceOfWebGLObject = (value, win) => {
     )
   );
 };
-function initCanvas2DMutationObserver(cb, win, blockClass, blockSelector) {
+function initCanvas2DMutationObserver(cb, win, blockClass, blockSelector, dataURLOptions) {
   const handlers = [];
   const props2D = Object.getOwnPropertyNames(
     win.CanvasRenderingContext2D.prototype
@@ -11968,7 +11975,12 @@ function initCanvas2DMutationObserver(cb, win, blockClass, blockSelector) {
           return function(...args) {
             if (!isBlocked(this.canvas, blockClass, blockSelector, true)) {
               setTimeout(() => {
-                const recordArgs = serializeArgs(args, win, this);
+                const recordArgs = serializeArgs(
+                  args,
+                  win,
+                  this,
+                  dataURLOptions
+                );
                 cb(this.canvas, {
                   type: CanvasContext["2D"],
                   property: prop,
@@ -12042,7 +12054,7 @@ function initCanvasContextObserver(win, blockClass, blockSelector, setPreserveDr
     handlers.forEach((h) => h());
   };
 }
-function patchGLPrototype(prototype, type, cb, blockClass, blockSelector, win) {
+function patchGLPrototype(prototype, type, cb, blockClass, blockSelector, win, dataURLOptions) {
   const handlers = [];
   const props = Object.getOwnPropertyNames(prototype);
   for (const prop of props) {
@@ -12069,7 +12081,7 @@ function patchGLPrototype(prototype, type, cb, blockClass, blockSelector, win) {
             const result2 = original.apply(this, args);
             saveWebGLVar(result2, win, this);
             if ("tagName" in this.canvas && !isBlocked(this.canvas, blockClass, blockSelector, true)) {
-              const recordArgs = serializeArgs(args, win, this);
+              const recordArgs = serializeArgs(args, win, this, dataURLOptions);
               const mutation = {
                 type,
                 property: prop,
@@ -12098,7 +12110,7 @@ function patchGLPrototype(prototype, type, cb, blockClass, blockSelector, win) {
   }
   return handlers;
 }
-function initCanvasWebGLMutationObserver(cb, win, blockClass, blockSelector) {
+function initCanvasWebGLMutationObserver(cb, win, blockClass, blockSelector, dataURLOptions) {
   const handlers = [];
   handlers.push(
     ...patchGLPrototype(
@@ -12107,7 +12119,8 @@ function initCanvasWebGLMutationObserver(cb, win, blockClass, blockSelector) {
       cb,
       blockClass,
       blockSelector,
-      win
+      win,
+      dataURLOptions
     )
   );
   if (typeof win.WebGL2RenderingContext !== "undefined") {
@@ -12118,7 +12131,8 @@ function initCanvasWebGLMutationObserver(cb, win, blockClass, blockSelector) {
         cb,
         blockClass,
         blockSelector,
-        win
+        win,
+        dataURLOptions
       )
     );
   }
@@ -12180,7 +12194,12 @@ class CanvasManager {
     this.mutationCb = options.mutationCb;
     this.mirror = options.mirror;
     if (recordCanvas && sampling === "all")
-      this.initCanvasMutationObserver(win, blockClass, blockSelector);
+      this.initCanvasMutationObserver(
+        win,
+        blockClass,
+        blockSelector,
+        dataURLOptions
+      );
     if (recordCanvas && typeof sampling === "number")
       this.initCanvasFPSObserver(sampling, win, blockClass, blockSelector, {
         dataURLOptions
@@ -12309,7 +12328,7 @@ class CanvasManager {
       cancelAnimationFrame(rafId);
     };
   }
-  initCanvasMutationObserver(win, blockClass, blockSelector) {
+  initCanvasMutationObserver(win, blockClass, blockSelector, dataURLOptions) {
     this.startRAFTimestamping();
     this.startPendingCanvasMutationFlusher();
     const canvasContextReset = initCanvasContextObserver(
@@ -12322,13 +12341,15 @@ class CanvasManager {
       this.processMutation.bind(this),
       win,
       blockClass,
-      blockSelector
+      blockSelector,
+      dataURLOptions
     );
     const canvasWebGL1and2Reset = initCanvasWebGLMutationObserver(
       this.processMutation.bind(this),
       win,
       blockClass,
-      blockSelector
+      blockSelector,
+      dataURLOptions
     );
     this.resetObservers = () => {
       canvasContextReset();
@@ -12875,13 +12896,14 @@ function record(options = {}) {
         hooks
       );
     };
-    iframeManager.addLoadListener((iframeEl) => {
+    const loadListener = (iframeEl) => {
       try {
         handlers.push(observe(iframeEl.contentDocument));
       } catch (error) {
         console.warn(error);
       }
-    });
+    };
+    iframeManager.addLoadListener(loadListener);
     const init = () => {
       takeFullSnapshot$1();
       handlers.push(observe(document));
@@ -12916,6 +12938,7 @@ function record(options = {}) {
     return () => {
       handlers.forEach((h) => h());
       processedNodeManager.destroy();
+      iframeManager.removeLoadListener();
       iframeManager.destroy();
       recording = false;
       unregisterErrorHandler();