@posthog/rrweb-snapshot 0.0.10 → 0.0.11

package/dist/rrweb-snapshot.js

@@ -1,7 +1,7 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-var NodeType = /* @__PURE__ */ ((NodeType2) => {
+var NodeType$1 = /* @__PURE__ */ ((NodeType2) => {
   NodeType2[NodeType2["Document"] = 0] = "Document";
   NodeType2[NodeType2["DocumentType"] = 1] = "DocumentType";
   NodeType2[NodeType2["Element"] = 2] = "Element";
@@ -9,7 +9,7 @@ var NodeType = /* @__PURE__ */ ((NodeType2) => {
   NodeType2[NodeType2["CDATA"] = 4] = "CDATA";
   NodeType2[NodeType2["Comment"] = 5] = "Comment";
   return NodeType2;
-})(NodeType || {});
+})(NodeType$1 || {});
 const testableAccessors = {
   Node: ["childNodes", "parentNode", "parentElement", "textContent"],
   ShadowRoot: ["host", "styleSheets"],
@@ -233,13 +233,9 @@ function stringifyStylesheet(s) {
     if (!rules) {
       return null;
     }
-    let sheetHref = s.href;
-    if (!sheetHref && s.ownerNode && s.ownerNode.ownerDocument) {
-      sheetHref = s.ownerNode.ownerDocument.location.href;
-    }
     const stringifiedRules = Array.from(
       rules,
-      (rule2) => stringifyRule(rule2, sheetHref)
+      (rule2) => stringifyRule(rule2, s.href)
     ).join("");
     return fixBrowserCompatibilityIssuesInCSS(stringifiedRules);
   } catch (error) {
@@ -388,13 +384,13 @@ function is2DCanvasBlank(canvas) {
 }
 function isNodeMetaEqual(a, b) {
   if (!a || !b || a.type !== b.type) return false;
-  if (a.type === NodeType.Document)
+  if (a.type === NodeType$1.Document)
     return a.compatMode === b.compatMode;
-  else if (a.type === NodeType.DocumentType)
+  else if (a.type === NodeType$1.DocumentType)
     return a.name === b.name && a.publicId === b.publicId && a.systemId === b.systemId;
-  else if (a.type === NodeType.Comment || a.type === NodeType.Text || a.type === NodeType.CDATA)
+  else if (a.type === NodeType$1.Comment || a.type === NodeType$1.Text || a.type === NodeType$1.CDATA)
     return a.textContent === b.textContent;
-  else if (a.type === NodeType.Element)
+  else if (a.type === NodeType$1.Element)
     return a.tagName === b.tagName && JSON.stringify(a.attributes) === JSON.stringify(b.attributes) && a.isSVG === b.isSVG && a.needBlock === b.needBlock;
   return false;
 }
@@ -464,90 +460,6 @@ function absolutifyURLs(cssText, href) {
     }
   );
 }
-const normalizationCache = /* @__PURE__ */ new Map();
-const splitCache = /* @__PURE__ */ new Map();
-function normalizeCssString(cssText) {
-  if (!normalizationCache.has(cssText)) {
-    const normalized = cssText.replace(/(\/\*[^*]*\*\/)|[\s;]/g, "");
-    normalizationCache.set(cssText, normalized);
-  }
-  return normalizationCache.get(cssText);
-}
-function splitCssText(cssText, style) {
-  const og = cssText;
-  if (splitCache.has(cssText)) {
-    return splitCache.get(cssText);
-  }
-  const childNodes2 = Array.from(style.childNodes);
-  const splits = [];
-  let iterLimit = 0;
-  if (childNodes2.length > 1 && cssText && typeof cssText === "string") {
-    let cssTextNorm = normalizeCssString(cssText);
-    const normFactor = cssTextNorm.length / cssText.length;
-    for (let i = 1; i < childNodes2.length; i++) {
-      if (childNodes2[i].textContent && typeof childNodes2[i].textContent === "string") {
-        const textContentNorm = normalizeCssString(childNodes2[i].textContent);
-        let j = 3;
-        for (; j < textContentNorm.length; j++) {
-          if (
-            // keep consuming css identifiers (to get a decent chunk more quickly)
-            textContentNorm[j].match(/[a-zA-Z0-9]/) || // substring needs to be unique to this section
-            textContentNorm.indexOf(textContentNorm.substring(0, j), 1) !== -1
-          ) {
-            continue;
-          }
-          break;
-        }
-        for (; j < textContentNorm.length; j++) {
-          const bit = textContentNorm.substring(0, j);
-          const bits = cssTextNorm.split(bit);
-          let splitNorm = -1;
-          if (bits.length === 2) {
-            splitNorm = cssTextNorm.indexOf(bit);
-          } else if (bits.length > 2 && bits[0] === "" && childNodes2[i - 1].textContent !== "") {
-            splitNorm = cssTextNorm.indexOf(bit, 1);
-          }
-          if (splitNorm !== -1) {
-            let k = Math.floor(splitNorm / normFactor);
-            for (; k > 0 && k < cssText.length; ) {
-              iterLimit += 1;
-              if (iterLimit > 50 * childNodes2.length) {
-                splits.push(cssText);
-                return splits;
-              }
-              const normPart = normalizeCssString(cssText.substring(0, k));
-              if (normPart.length === splitNorm) {
-                splits.push(cssText.substring(0, k));
-                cssText = cssText.substring(k);
-                cssTextNorm = cssTextNorm.substring(splitNorm);
-                break;
-              } else if (normPart.length < splitNorm) {
-                k += Math.max(
-                  1,
-                  Math.floor((splitNorm - normPart.length) / normFactor)
-                );
-              } else {
-                k -= Math.max(
-                  1,
-                  Math.floor((normPart.length - splitNorm) * normFactor)
-                );
-              }
-            }
-            break;
-          }
-        }
-      }
-    }
-  }
-  splits.push(cssText);
-  if (og) {
-    splitCache.set(og, splits);
-  }
-  return splits;
-}
-function markCssSplits(cssText, style) {
-  return splitCssText(cssText, style).join("/* rr_split */");
-}
 let _id = 1;
 const tagNameRegex = new RegExp("[^a-z0-9-_:]");
 const IGNORED_NODE = -2;
@@ -806,28 +718,27 @@ function serializeNode(n, options) {
     inlineImages,
     recordCanvas,
     keepIframeSrcFn,
-    newlyAddedElement = false,
-    cssCaptured = false
+    newlyAddedElement = false
   } = options;
   const rootId = getRootId(doc, mirror);
   switch (n.nodeType) {
     case n.DOCUMENT_NODE:
       if (n.compatMode !== "CSS1Compat") {
         return {
-          type: NodeType.Document,
+          type: NodeType$1.Document,
           childNodes: [],
           compatMode: n.compatMode
           // probably "BackCompat"
         };
       } else {
         return {
-          type: NodeType.Document,
+          type: NodeType$1.Document,
           childNodes: []
         };
       }
     case n.DOCUMENT_TYPE_NODE:
       return {
-        type: NodeType.DocumentType,
+        type: NodeType$1.DocumentType,
         name: n.name,
         publicId: n.publicId,
         systemId: n.systemId,
@@ -853,18 +764,17 @@ function serializeNode(n, options) {
         doc,
         needsMask,
         maskTextFn,
-        rootId,
-        cssCaptured
+        rootId
       });
     case n.CDATA_SECTION_NODE:
       return {
-        type: NodeType.CDATA,
+        type: NodeType$1.CDATA,
         textContent: "",
         rootId
       };
     case n.COMMENT_NODE:
       return {
-        type: NodeType.Comment,
+        type: NodeType$1.Comment,
         textContent: index.textContent(n) || "",
         rootId
       };
@@ -878,26 +788,37 @@ function getRootId(doc, mirror) {
   return docId === 1 ? void 0 : docId;
 }
 function serializeTextNode(n, options) {
-  const { needsMask, maskTextFn, rootId, cssCaptured } = options;
+  var _a;
+  const { needsMask, maskTextFn, rootId } = options;
   const parent = index.parentNode(n);
   const parentTagName = parent && parent.tagName;
-  let textContent2 = "";
+  let text = index.textContent(n);
   const isStyle = parentTagName === "STYLE" ? true : void 0;
   const isScript = parentTagName === "SCRIPT" ? true : void 0;
-  if (isScript) {
-    textContent2 = "SCRIPT_PLACEHOLDER";
-  } else if (!cssCaptured) {
-    textContent2 = index.textContent(n);
-    if (isStyle && textContent2) {
-      textContent2 = absolutifyURLs(textContent2, getHref(options.doc));
+  if (isStyle && text) {
+    try {
+      if (n.nextSibling || n.previousSibling) {
+      } else if ((_a = parent.sheet) == null ? void 0 : _a.cssRules) {
+        text = stringifyStylesheet(parent.sheet);
+      }
+    } catch (err) {
+      console.warn(
+        `Cannot get CSS styles from text's parentNode. Error: ${err}`,
+        n
+      );
     }
+    text = absolutifyURLs(text, getHref(options.doc));
+  }
+  if (isScript) {
+    text = "SCRIPT_PLACEHOLDER";
   }
-  if (!isStyle && !isScript && textContent2 && needsMask) {
-    textContent2 = maskTextFn ? maskTextFn(textContent2, index.parentElement(n)) : textContent2.replace(/[\S]/g, "*");
+  if (!isStyle && !isScript && text && needsMask) {
+    text = maskTextFn ? maskTextFn(text, index.parentElement(n)) : text.replace(/[\S]/g, "*");
   }
   return {
-    type: NodeType.Text,
-    textContent: textContent2 || "",
+    type: NodeType$1.Text,
+    textContent: text || "",
+    isStyle,
     rootId
   };
 }
@@ -958,14 +879,12 @@ function serializeElementNode(n, options) {
       }
     }
   }
-  if (tagName === "style" && n.sheet) {
-    let cssText = stringifyStylesheet(
+  if (tagName === "style" && n.sheet && // TODO: Currently we only try to get dynamic stylesheet when it is an empty style element
+  !(n.innerText || index.textContent(n) || "").trim().length) {
+    const cssText = stringifyStylesheet(
       n.sheet
     );
     if (cssText) {
-      if (n.childNodes.length > 1) {
-        cssText = markCssSplits(cssText, n);
-      }
       attributes._cssText = cssText;
     }
   }
@@ -1100,7 +1019,7 @@ function serializeElementNode(n, options) {
   } catch (e) {
   }
   return {
-    type: NodeType.Element,
+    type: NodeType$1.Element,
     tagName,
     attributes,
     childNodes: [],
@@ -1118,9 +1037,9 @@ function lowerIfExists(maybeAttr) {
   }
 }
 function slimDOMExcluded(sn, slimDOMOptions) {
-  if (slimDOMOptions.comment && sn.type === NodeType.Comment) {
+  if (slimDOMOptions.comment && sn.type === NodeType$1.Comment) {
     return true;
-  } else if (sn.type === NodeType.Element) {
+  } else if (sn.type === NodeType$1.Element) {
     if (slimDOMOptions.script && // script tag
     (sn.tagName === "script" || // (module)preload link
     sn.tagName === "link" && (sn.attributes.rel === "preload" && sn.attributes.as === "script" || sn.attributes.rel === "modulepreload") || // prefetch link
@@ -1172,8 +1091,7 @@ function serializeNodeWithId(n, options) {
     onStylesheetLoad,
     stylesheetLoadTimeout = 5e3,
     keepIframeSrcFn = () => false,
-    newlyAddedElement = false,
-    cssCaptured = false
+    newlyAddedElement = false
   } = options;
   let { needsMask } = options;
   let { preserveWhiteSpace = true } = options;
@@ -1200,8 +1118,7 @@ function serializeNodeWithId(n, options) {
     inlineImages,
     recordCanvas,
     keepIframeSrcFn,
-    newlyAddedElement,
-    cssCaptured
+    newlyAddedElement
   });
   if (!_serializedNode) {
     console.warn(n, "not serialized");
@@ -1210,7 +1127,7 @@ function serializeNodeWithId(n, options) {
   let id;
   if (mirror.hasNode(n)) {
     id = mirror.getId(n);
-  } else if (slimDOMExcluded(_serializedNode, slimDOMOptions) || !preserveWhiteSpace && _serializedNode.type === NodeType.Text && !_serializedNode.textContent.replace(/^\s+|\s+$/gm, "").length) {
+  } else if (slimDOMExcluded(_serializedNode, slimDOMOptions) || !preserveWhiteSpace && _serializedNode.type === NodeType$1.Text && !_serializedNode.isStyle && !_serializedNode.textContent.replace(/^\s+|\s+$/gm, "").length) {
     id = IGNORED_NODE;
   } else {
     id = genId();
@@ -1224,15 +1141,15 @@ function serializeNodeWithId(n, options) {
     onSerialize(n);
   }
   let recordChild = !skipChild;
-  if (serializedNode.type === NodeType.Element) {
+  if (serializedNode.type === NodeType$1.Element) {
     recordChild = recordChild && !serializedNode.needBlock;
     delete serializedNode.needBlock;
     const shadowRootEl = index.shadowRoot(n);
     if (shadowRootEl && isNativeShadowDom(shadowRootEl))
       serializedNode.isShadowHost = true;
   }
-  if ((serializedNode.type === NodeType.Document || serializedNode.type === NodeType.Element) && recordChild) {
-    if (slimDOMOptions.headWhitespace && serializedNode.type === NodeType.Element && serializedNode.tagName === "head") {
+  if ((serializedNode.type === NodeType$1.Document || serializedNode.type === NodeType$1.Element) && recordChild) {
+    if (slimDOMOptions.headWhitespace && serializedNode.type === NodeType$1.Element && serializedNode.tagName === "head") {
       preserveWhiteSpace = false;
     }
     const bypassOptions = {
@@ -1258,14 +1175,10 @@ function serializeNodeWithId(n, options) {
       iframeLoadTimeout,
       onStylesheetLoad,
       stylesheetLoadTimeout,
-      keepIframeSrcFn,
-      cssCaptured: false
+      keepIframeSrcFn
     };
-    if (serializedNode.type === NodeType.Element && serializedNode.tagName === "textarea" && serializedNode.attributes.value !== void 0) ;
+    if (serializedNode.type === NodeType$1.Element && serializedNode.tagName === "textarea" && serializedNode.attributes.value !== void 0) ;
     else {
-      if (serializedNode.type === NodeType.Element && serializedNode.attributes._cssText !== void 0 && typeof serializedNode.attributes._cssText === "string") {
-        bypassOptions.cssCaptured = true;
-      }
       for (const childN of Array.from(index.childNodes(n))) {
         const serializedChildNode = serializeNodeWithId(childN, bypassOptions);
         if (serializedChildNode) {
@@ -1288,7 +1201,7 @@ function serializeNodeWithId(n, options) {
   if (parent && isShadowRoot(parent) && isNativeShadowDom(parent)) {
     serializedNode.isShadow = true;
   }
-  if (serializedNode.type === NodeType.Element && serializedNode.tagName === "iframe") {
+  if (serializedNode.type === NodeType$1.Element && serializedNode.tagName === "iframe") {
     onceIframeLoaded(
       n,
       () => {
@@ -1330,7 +1243,7 @@ function serializeNodeWithId(n, options) {
       iframeLoadTimeout
     );
   }
-  if (serializedNode.type === NodeType.Element && serializedNode.tagName === "link" && typeof serializedNode.attributes.rel === "string" && (serializedNode.attributes.rel === "stylesheet" || serializedNode.attributes.rel === "preload" && typeof serializedNode.attributes.href === "string" && extractFileExtension(serializedNode.attributes.href) === "css")) {
+  if (serializedNode.type === NodeType$1.Element && serializedNode.tagName === "link" && typeof serializedNode.attributes.rel === "string" && (serializedNode.attributes.rel === "stylesheet" || serializedNode.attributes.rel === "preload" && typeof serializedNode.attributes.href === "string" && extractFileExtension(serializedNode.attributes.href) === "css")) {
     onceStylesheetLoaded(
       n,
       () => {
@@ -1461,7 +1374,7 @@ function snapshot(n, options) {
 function visitSnapshot(node2, onVisit) {
   function walk(current) {
     onVisit(current);
-    if (current.type === NodeType.Document || current.type === NodeType.Element) {
+    if (current.type === NodeType$1.Document || current.type === NodeType$1.Element) {
       current.childNodes.forEach(walk);
     }
   }
@@ -5391,6 +5304,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;
@@ -5486,49 +5408,19 @@ function createCache() {
     stylesWithHoverClass
   };
 }
-function applyCssSplits(n, cssText, hackCss, cache) {
-  const childTextNodes = [];
-  for (const scn of n.childNodes) {
-    if (scn.type === NodeType.Text) {
-      childTextNodes.push(scn);
-    }
-  }
-  const cssTextSplits = cssText.split("/* rr_split */");
-  while (cssTextSplits.length > 1 && cssTextSplits.length > childTextNodes.length) {
-    cssTextSplits.splice(-2, 2, cssTextSplits.slice(-2).join(""));
-  }
-  for (let i = 0; i < childTextNodes.length; i++) {
-    const childTextNode = childTextNodes[i];
-    const cssTextSection = cssTextSplits[i];
-    if (childTextNode && cssTextSection) {
-      childTextNode.textContent = hackCss ? adaptCssForReplay(cssTextSection, cache) : cssTextSection;
-    }
-  }
-}
-function buildStyleNode(n, styleEl, cssText, options) {
-  const { doc, hackCss, cache } = options;
-  if (n.childNodes.length) {
-    applyCssSplits(n, cssText, hackCss, cache);
-  } else {
-    if (hackCss) {
-      cssText = adaptCssForReplay(cssText, cache);
-    }
-    styleEl.appendChild(doc.createTextNode(cssText));
-  }
-}
 function buildNode(n, options) {
   var _a;
   const { doc, hackCss, cache } = options;
   switch (n.type) {
-    case NodeType.Document:
+    case NodeType$1.Document:
       return doc.implementation.createDocument(null, "", null);
-    case NodeType.DocumentType:
+    case NodeType$1.DocumentType:
       return doc.implementation.createDocumentType(
         n.name || "html",
         n.publicId,
         n.systemId
       );
-    case NodeType.Element: {
+    case NodeType$1.Element: {
       const tagName = getTagName(n);
       let node2;
       if (n.isSVG) {
@@ -5564,11 +5456,12 @@ function buildNode(n, options) {
           specialAttributes[name] = value;
           continue;
         }
-        if (typeof value !== "string") ;
-        else if (tagName === "style" && name === "_cssText") {
-          buildStyleNode(n, node2, value, options);
-          continue;
-        } else if (tagName === "textarea" && name === "value") {
+        const isTextarea = tagName === "textarea" && name === "value";
+        const isRemoteOrDynamicCss = tagName === "style" && name === "_cssText";
+        if (isRemoteOrDynamicCss && hackCss && typeof value === "string") {
+          value = adaptCssForReplay(value, cache);
+        }
+        if ((isTextarea || isRemoteOrDynamicCss) && typeof value === "string") {
           node2.appendChild(doc.createTextNode(value));
           n.childNodes = [];
           continue;
@@ -5662,14 +5555,13 @@ function buildNode(n, options) {
       }
       return node2;
     }
-    case NodeType.Text:
-      if (n.isStyle && hackCss) {
-        return doc.createTextNode(adaptCssForReplay(n.textContent, cache));
-      }
-      return doc.createTextNode(n.textContent);
-    case NodeType.CDATA:
+    case NodeType$1.Text:
+      return doc.createTextNode(
+        n.isStyle && hackCss ? adaptCssForReplay(n.textContent, cache) : n.textContent
+      );
+    case NodeType$1.CDATA:
       return doc.createCDATASection(n.textContent);
-    case NodeType.Comment:
+    case NodeType$1.Comment:
       return doc.createComment(n.textContent);
     default:
       return null;
@@ -5696,11 +5588,11 @@ function buildNodeWithSN(n, options) {
   if (n.rootId && mirror.getNode(n.rootId) !== doc) {
     mirror.replace(n.rootId, doc);
   }
-  if (n.type === NodeType.Document) {
+  if (n.type === NodeType$1.Document) {
     doc.close();
     doc.open();
-    if (n.compatMode === "BackCompat" && n.childNodes && n.childNodes[0].type !== NodeType.DocumentType) {
-      if (n.childNodes[0].type === NodeType.Element && "xmlns" in n.childNodes[0].attributes && n.childNodes[0].attributes.xmlns === "http://www.w3.org/1999/xhtml") {
+    if (n.compatMode === "BackCompat" && n.childNodes && n.childNodes[0].type !== NodeType$1.DocumentType) {
+      if (n.childNodes[0].type === NodeType$1.Element && "xmlns" in n.childNodes[0].attributes && n.childNodes[0].attributes.xmlns === "http://www.w3.org/1999/xhtml") {
         doc.write(
           '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">'
         );
@@ -5713,7 +5605,7 @@ function buildNodeWithSN(n, options) {
     node2 = doc;
   }
   mirror.add(node2, n);
-  if ((n.type === NodeType.Document || n.type === NodeType.Element) && !skipChild) {
+  if ((n.type === NodeType$1.Document || n.type === NodeType$1.Element) && !skipChild) {
     for (const childN of n.childNodes) {
       const childNode = buildNodeWithSN(childN, {
         doc,
@@ -5729,7 +5621,7 @@ function buildNodeWithSN(n, options) {
       }
       if (childN.isShadow && isElement(node2) && node2.shadowRoot) {
         node2.shadowRoot.appendChild(childNode);
-      } else if (n.type === NodeType.Document && childN.type == NodeType.Element) {
+      } else if (n.type === NodeType$1.Document && childN.type == NodeType$1.Element) {
         const htmlElement = childNode;
         let body = null;
         htmlElement.childNodes.forEach((child) => {
@@ -5764,7 +5656,7 @@ function visit(mirror, onVisit) {
 }
 function handleScroll(node2, mirror) {
   const n = mirror.getMeta(node2);
-  if ((n == null ? void 0 : n.type) !== NodeType.Element) {
+  if ((n == null ? void 0 : n.type) !== NodeType$1.Element) {
     return;
   }
   const el = node2;
@@ -5809,6 +5701,7 @@ function rebuild(n, options) {
 export {
   IGNORED_NODE,
   Mirror,
+  NodeType,
   absolutifyURLs,
   adaptCssForReplay,
   buildNodeWithSN,
@@ -5829,14 +5722,11 @@ export {
   isNativeShadowDom,
   isNodeMetaEqual,
   isShadowRoot,
-  markCssSplits,
   maskInputValue,
   needMaskingText,
-  normalizeCssString,
   rebuild,
   serializeNodeWithId,
   snapshot,
-  splitCssText,
   stringifyRule,
   stringifyStylesheet,
   toLowerCase,