@posthog/rrweb-snapshot 0.0.28 → 0.0.30

package/dist/rrweb-snapshot.js

@@ -201,6 +201,91 @@ function isShadowRoot(n) {
 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(s) {
+  try {
+    const rules = s.rules || s.cssRules;
+    if (!rules) {
+      return null;
+    }
+    let sheetHref = s.href;
+    if (!sheetHref && s.ownerNode) {
+      sheetHref = s.ownerNode.baseURI;
+    }
+    const stringifiedRules = Array.from(
+      rules,
+      (rule2) => stringifyRule(rule2, sheetHref)
+    ).join("");
+    return fixBrowserCompatibilityIssuesInCSS(stringifiedRules);
+  } catch (error) {
+    return null;
+  }
+}
+function stringifyRule(rule2, sheetHref) {
+  var _a;
+  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 && ((_a = rule2.styleSheet) == null ? void 0 : _a.href)) {
+        return absolutifyURLs(importStringified, rule2.styleSheet.href);
+      }
+    } catch {
+    }
+    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(this, "idNodeMap", /* @__PURE__ */ new Map());
@@ -335,91 +420,6 @@ function extractFileExtension(path, baseURL) {
   const match = url.pathname.match(regex);
   return (match == null ? void 0 : match[1]) ?? 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(s) {
-  try {
-    const rules = s.rules || s.cssRules;
-    if (!rules) {
-      return null;
-    }
-    let sheetHref = s.href;
-    if (!sheetHref && s.ownerNode) {
-      sheetHref = s.ownerNode.baseURI;
-    }
-    const stringifiedRules = Array.from(
-      rules,
-      (rule2) => stringifyRule(rule2, sheetHref)
-    ).join("");
-    return fixBrowserCompatibilityIssuesInCSS(stringifiedRules);
-  } catch (error) {
-    return null;
-  }
-}
-function stringifyRule(rule2, sheetHref) {
-  var _a;
-  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 && ((_a = rule2.styleSheet) == null ? void 0 : _a.href)) {
-        return absolutifyURLs(importStringified, rule2.styleSheet.href);
-      }
-    } catch {
-    }
-    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) {
@@ -468,6 +468,36 @@ function absolutifyURLs(cssText, href) {
     }
   );
 }
+const STRIPED_PLACEHOLDER_SVG = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzPgogICAgPHBhdHRlcm4gaWQ9InN0cmlwZXMiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+CiAgICAgIDxyZWN0IHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iYmxhY2siLz4KICAgICAgPHBhdGggZD0iTTggMEgxNkwwIDE2VjhMOCAwWiIgZmlsbD0iIzJEMkQyRCIvPgogICAgICA8cGF0aCBkPSJNMTYgOFYxNkg4TDE2IDhaIiBmaWxsPSIjMkQyRDJEIi8+CiAgICA8L3BhdHRlcm4+CiAgPC9kZWZzPgogIDxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjc3RyaXBlcykiLz4KPC9zdmc+Cg==";
+const MAX_IMAGE_DIMENSION_FOR_RECOMPRESSION = 4096;
+function recompressBase64Image(img, dataURL, type, quality) {
+  if (!img.complete || img.naturalWidth === 0) {
+    return dataURL;
+  }
+  if (img.naturalWidth > MAX_IMAGE_DIMENSION_FOR_RECOMPRESSION || img.naturalHeight > MAX_IMAGE_DIMENSION_FOR_RECOMPRESSION) {
+    return dataURL;
+  }
+  try {
+    const canvas = document.createElement("canvas");
+    canvas.width = img.naturalWidth;
+    canvas.height = img.naturalHeight;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      return dataURL;
+    }
+    ctx.drawImage(img, 0, 0);
+    const recompressed = canvas.toDataURL(type || "image/webp", quality ?? 0.4);
+    return recompressed;
+  } catch (err) {
+    return dataURL;
+  }
+}
+function checkDataURLSize(dataURL, maxLength) {
+  if (!maxLength || dataURL.length <= maxLength) {
+    return dataURL;
+  }
+  return STRIPED_PLACEHOLDER_SVG;
+}
 let _id = 1;
 const tagNameRegex = new RegExp("[^a-z0-9-_:]");
 const IGNORED_NODE = -2;
@@ -566,12 +596,32 @@ function getHref(doc, customHref) {
   a.setAttribute("href", customHref);
   return a.href;
 }
-function transformAttribute(doc, tagName, name, value) {
+function transformAttribute(doc, tagName, name, value, element, dataURLOptions) {
   if (!value) {
     return value;
   }
   if (name === "src" || name === "href" && !(tagName === "use" && value[0] === "#")) {
-    return absoluteToDoc(doc, value);
+    const transformedValue = absoluteToDoc(doc, value);
+    if (tagName === "img" && transformedValue.startsWith("data:") && element) {
+      const img = element;
+      let processedDataURL = transformedValue;
+      if ((dataURLOptions == null ? void 0 : dataURLOptions.type) || (dataURLOptions == null ? void 0 : dataURLOptions.quality) !== void 0) {
+        processedDataURL = recompressBase64Image(
+          img,
+          transformedValue,
+          dataURLOptions.type,
+          dataURLOptions.quality
+        );
+      }
+      if (dataURLOptions == null ? void 0 : dataURLOptions.maxBase64ImageLength) {
+        processedDataURL = checkDataURLSize(
+          processedDataURL,
+          dataURLOptions.maxBase64ImageLength
+        );
+      }
+      return processedDataURL;
+    }
+    return transformedValue;
   } else if (name === "xlink:href" && value[0] !== "#") {
     return absoluteToDoc(doc, value);
   } else if (name === "background" && (tagName === "table" || tagName === "td" || tagName === "th")) {
@@ -862,7 +912,9 @@ function serializeElementNode(n, options) {
         doc,
         tagName,
         toLowerCase(attr.name),
-        attr.value
+        attr.value,
+        n,
+        dataURLOptions
       );
     }
   }
@@ -1391,15 +1443,6 @@ function visitSnapshot(node2, onVisit) {
 function cleanupSnapshot() {
   _id = 1;
 }
-var NodeType = /* @__PURE__ */ ((NodeType2) => {
-  NodeType2[NodeType2["Document"] = 0] = "Document";
-  NodeType2[NodeType2["DocumentType"] = 1] = "DocumentType";
-  NodeType2[NodeType2["Element"] = 2] = "Element";
-  NodeType2[NodeType2["Text"] = 3] = "Text";
-  NodeType2[NodeType2["CDATA"] = 4] = "CDATA";
-  NodeType2[NodeType2["Comment"] = 5] = "Comment";
-  return NodeType2;
-})(NodeType || {});
 const MEDIA_SELECTOR = /(max|min)-device-(width|height)/;
 const MEDIA_SELECTOR_GLOBAL = new RegExp(MEDIA_SELECTOR.source, "g");
 const mediaSelectorPlugin = {
@@ -5321,6 +5364,15 @@ function requireSafeParse() {
 }
 var safeParseExports = requireSafeParse();
 const safeParser = /* @__PURE__ */ getDefaultExportFromCjs(safeParseExports);
+var NodeType = /* @__PURE__ */ ((NodeType2) => {
+  NodeType2[NodeType2["Document"] = 0] = "Document";
+  NodeType2[NodeType2["DocumentType"] = 1] = "DocumentType";
+  NodeType2[NodeType2["Element"] = 2] = "Element";
+  NodeType2[NodeType2["Text"] = 3] = "Text";
+  NodeType2[NodeType2["CDATA"] = 4] = "CDATA";
+  NodeType2[NodeType2["Comment"] = 5] = "Comment";
+  return NodeType2;
+})(NodeType || {});
 var postcssExports = requirePostcss();
 const postcss = /* @__PURE__ */ getDefaultExportFromCjs(postcssExports);
 postcss.stringify;
@@ -5347,22 +5399,6 @@ postcss.Input;
 postcss.Rule;
 postcss.Root;
 postcss.Node;
-function adaptCssForReplay(cssText, cache) {
-  const cachedStyle = cache == null ? void 0 : cache.stylesWithHoverClass.get(cssText);
-  if (cachedStyle) return cachedStyle;
-  let result2 = cssText;
-  try {
-    const ast = postcss([
-      mediaSelectorPlugin,
-      pseudoClassPlugin
-    ]).process(cssText, { parser: safeParser });
-    result2 = ast.css;
-  } catch (error) {
-    console.warn("Failed to adapt css for replay", error);
-  }
-  cache == null ? void 0 : cache.stylesWithHoverClass.set(cssText, result2);
-  return result2;
-}
 const tagMap = {
   script: "noscript",
   // camel case svg element tag names
@@ -5410,6 +5446,22 @@ function getTagName(n) {
   }
   return tagName;
 }
+function adaptCssForReplay(cssText, cache) {
+  const cachedStyle = cache == null ? void 0 : cache.stylesWithHoverClass.get(cssText);
+  if (cachedStyle) return cachedStyle;
+  let result2 = cssText;
+  try {
+    const ast = postcss([
+      mediaSelectorPlugin,
+      pseudoClassPlugin
+    ]).process(cssText, { parser: safeParser });
+    result2 = ast.css;
+  } catch (error) {
+    console.warn("Failed to adapt css for replay", error);
+  }
+  cache == null ? void 0 : cache.stylesWithHoverClass.set(cssText, result2);
+  return result2;
+}
 function createCache() {
   const stylesWithHoverClass = /* @__PURE__ */ new Map();
   return {
@@ -5734,6 +5786,7 @@ export {
   absolutifyURLs,
   adaptCssForReplay,
   buildNodeWithSN,
+  checkDataURLSize,
   classMatchesRegex,
   cleanupSnapshot,
   createCache,
@@ -5754,6 +5807,7 @@ export {
   maskInputValue,
   needMaskingText,
   rebuild,
+  recompressBase64Image,
   serializeNodeWithId,
   snapshot,
   stringifyRule,