@appsurify-testmap/rrweb-snapshot 2.0.0-alpha.41 → 2.1.0-alpha.2

package/dist/index.d.cts

@@ -62,8 +62,6 @@ export declare type idNodeMap = Map<number, Node>;
 
 export declare const IGNORED_NODE = -2;
 
-export declare function inspectInlineEventHandlers(doc: Document): void;
-
 export declare const interactiveEvents: string[];
 
 export declare const interactiveTags: string[];
@@ -145,7 +143,7 @@ export declare function needMaskingText(node: Node, maskTextClass: string | RegE
 
 export declare type nodeMetaMap = WeakMap<Node, serializedNodeWithId>;
 
-export declare function normalizeCssString(cssText: string): string;
+export declare function normalizeCssString(cssText: string, _testNoPxNorm?: boolean): string;
 
 export declare function rebuild(n: serializedNodeWithId, options: {
     doc: Document;
@@ -156,8 +154,6 @@ export declare function rebuild(n: serializedNodeWithId, options: {
     mirror: Mirror;
 }): Node | null;
 
-export declare function scheduleInlineEventInspection(doc: Document): void;
-
 export declare function serializeNodeWithId(n: Node, options: {
     doc: Document;
     mirror: Mirror;
@@ -225,7 +221,7 @@ export declare function snapshot(n: Document, options?: {
     keepIframeSrcFn?: KeepIframeSrcFn;
 }): serializedNodeWithId | null;
 
-export declare function splitCssText(cssText: string, style: HTMLStyleElement): string[];
+export declare function splitCssText(cssText: string, style: HTMLStyleElement, _testNoPxNorm?: boolean): string[];
 
 export declare function stringifyRule(rule: CSSRule, sheetHref: string | null): string;
 

package/dist/index.d.ts

@@ -62,8 +62,6 @@ export declare type idNodeMap = Map<number, Node>;
 
 export declare const IGNORED_NODE = -2;
 
-export declare function inspectInlineEventHandlers(doc: Document): void;
-
 export declare const interactiveEvents: string[];
 
 export declare const interactiveTags: string[];
@@ -145,7 +143,7 @@ export declare function needMaskingText(node: Node, maskTextClass: string | RegE
 
 export declare type nodeMetaMap = WeakMap<Node, serializedNodeWithId>;
 
-export declare function normalizeCssString(cssText: string): string;
+export declare function normalizeCssString(cssText: string, _testNoPxNorm?: boolean): string;
 
 export declare function rebuild(n: serializedNodeWithId, options: {
     doc: Document;
@@ -156,8 +154,6 @@ export declare function rebuild(n: serializedNodeWithId, options: {
     mirror: Mirror;
 }): Node | null;
 
-export declare function scheduleInlineEventInspection(doc: Document): void;
-
 export declare function serializeNodeWithId(n: Node, options: {
     doc: Document;
     mirror: Mirror;
@@ -225,7 +221,7 @@ export declare function snapshot(n: Document, options?: {
     keepIframeSrcFn?: KeepIframeSrcFn;
 }): serializedNodeWithId | null;
 
-export declare function splitCssText(cssText: string, style: HTMLStyleElement): string[];
+export declare function splitCssText(cssText: string, style: HTMLStyleElement, _testNoPxNorm?: boolean): string[];
 
 export declare function stringifyRule(rule: CSSRule, sheetHref: string | null): string;
 

package/dist/rrweb-snapshot.cjs

@@ -140,6 +140,32 @@ function querySelectorAll(n, selectors) {
 function mutationObserverCtor() {
   return getUntaintedPrototype("MutationObserver").constructor;
 }
+function patch(source, name, replacement) {
+  try {
+    if (!(name in source)) {
+      return () => {
+      };
+    }
+    const original = source[name];
+    const wrapped = replacement(original);
+    if (typeof wrapped === "function") {
+      wrapped.prototype = wrapped.prototype || {};
+      Object.defineProperties(wrapped, {
+        __rrweb_original__: {
+          enumerable: false,
+          value: original
+        }
+      });
+    }
+    source[name] = wrapped;
+    return () => {
+      source[name] = original;
+    };
+  } catch {
+    return () => {
+    };
+  }
+}
 const index = {
   childNodes,
   parentNode,
@@ -152,8 +178,12 @@ const index = {
   shadowRoot,
   querySelector,
   querySelectorAll,
-  mutationObserver: mutationObserverCtor
+  mutationObserver: mutationObserverCtor,
+  patch
 };
+function isElement(n) {
+  return n.nodeType === n.ELEMENT_NODE;
+}
 function isShadowRoot(n) {
   const hostEl = (
     // anchor and textarea elements also have a `host` property
@@ -430,19 +460,27 @@ function absolutifyURLs(cssText, href) {
     }
   );
 }
-function normalizeCssString(cssText) {
-  return cssText.replace(/(\/\*[^*]*\*\/)|[\s;]/g, "");
+function normalizeCssString(cssText, _testNoPxNorm = false) {
+  if (_testNoPxNorm) {
+    return cssText.replace(/(\/\*[^*]*\*\/)|[\s;]/g, "");
+  } else {
+    return cssText.replace(/(\/\*[^*]*\*\/)|[\s;]/g, "").replace(/0px/g, "0");
+  }
 }
-function splitCssText(cssText, style) {
+function splitCssText(cssText, style, _testNoPxNorm = false) {
   const childNodes2 = Array.from(style.childNodes);
   const splits = [];
-  let iterLimit = 0;
+  let iterCount = 0;
   if (childNodes2.length > 1 && cssText && typeof cssText === "string") {
-    let cssTextNorm = normalizeCssString(cssText);
+    let cssTextNorm = normalizeCssString(cssText, _testNoPxNorm);
     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);
+        const textContentNorm = normalizeCssString(
+          childNodes2[i].textContent,
+          _testNoPxNorm
+        );
+        const jLimit = 100;
         let j = 3;
         for (; j < textContentNorm.length; j++) {
           if (
@@ -455,23 +493,49 @@ function splitCssText(cssText, style) {
           break;
         }
         for (; j < textContentNorm.length; j++) {
-          const bit = textContentNorm.substring(0, j);
-          const bits = cssTextNorm.split(bit);
+          let startSubstring = textContentNorm.substring(0, j);
+          let cssNormSplits = cssTextNorm.split(startSubstring);
           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 (cssNormSplits.length === 2) {
+            splitNorm = cssNormSplits[0].length;
+          } else if (cssNormSplits.length > 2 && cssNormSplits[0] === "" && childNodes2[i - 1].textContent !== "") {
+            splitNorm = cssTextNorm.indexOf(startSubstring, 1);
+          } else if (cssNormSplits.length === 1) {
+            startSubstring = startSubstring.substring(
+              0,
+              startSubstring.length - 1
+            );
+            cssNormSplits = cssTextNorm.split(startSubstring);
+            if (cssNormSplits.length <= 1) {
+              splits.push(cssText);
+              return splits;
+            }
+            j = jLimit + 1;
+          } else if (j === textContentNorm.length - 1) {
+            splitNorm = cssTextNorm.indexOf(startSubstring);
+          }
+          if (cssNormSplits.length >= 2 && j > jLimit) {
+            const prevTextContent = childNodes2[i - 1].textContent;
+            if (prevTextContent && typeof prevTextContent === "string") {
+              const prevMinLength = normalizeCssString(prevTextContent).length;
+              splitNorm = cssTextNorm.indexOf(startSubstring, prevMinLength);
+            }
+            if (splitNorm === -1) {
+              splitNorm = cssNormSplits[0].length;
+            }
           }
           if (splitNorm !== -1) {
             let k = Math.floor(splitNorm / normFactor);
             for (; k > 0 && k < cssText.length; ) {
-              iterLimit += 1;
-              if (iterLimit > 50 * childNodes2.length) {
+              iterCount += 1;
+              if (iterCount > 50 * childNodes2.length) {
                 splits.push(cssText);
                 return splits;
               }
-              const normPart = normalizeCssString(cssText.substring(0, k));
+              const normPart = normalizeCssString(
+                cssText.substring(0, k),
+                _testNoPxNorm
+              );
               if (normPart.length === splitNorm) {
                 splits.push(cssText.substring(0, k));
                 cssText = cssText.substring(k);
@@ -567,9 +631,6 @@ function getXPath(node2) {
   }
   return "";
 }
-function isElement(n) {
-  return n.nodeType === n.ELEMENT_NODE;
-}
 function isTextVisible(n) {
   var _a;
   const parent = index.parentNode(n);
@@ -590,10 +651,10 @@ function isElementVisible(n) {
   const style = win ? win.getComputedStyle(n) : null;
   const isStyleVisible = style != null && style.display !== "none" && style.visibility !== "hidden" && parseFloat(style.opacity) !== 0;
   const rect = n.getBoundingClientRect();
-  const result2 = isStyleVisible && isRectVisible(rect, win);
+  const result2 = isStyleVisible && isRectVisible(rect);
   return result2;
 }
-function isRectVisible(rect, win) {
+function isRectVisible(rect, win = window) {
   var _a, _b, _c, _d;
   const height = (win == null ? void 0 : win.innerHeight) ?? ((_b = (_a = win == null ? void 0 : win.document) == null ? void 0 : _a.documentElement) == null ? void 0 : _b.clientHeight) ?? 0;
   const width = (win == null ? void 0 : win.innerWidth) ?? ((_d = (_c = win == null ? void 0 : win.document) == null ? void 0 : _c.documentElement) == null ? void 0 : _d.clientWidth) ?? 0;
@@ -662,28 +723,20 @@ const inlineEventAttributes = [
   "ontouchcancel"
 ];
 const interactiveElementsRegistry = /* @__PURE__ */ new WeakSet();
-if (typeof Element !== "undefined" && typeof EventTarget !== "undefined") {
-  const originalAddEventListener = EventTarget.prototype.addEventListener;
-  EventTarget.prototype.addEventListener = function(type, listener, options) {
-    originalAddEventListener.call(this, type, listener, options);
-    if (this instanceof Element) {
-      const eventType = type.toLowerCase();
-      if (interactiveEvents.includes(eventType)) {
-        interactiveElementsRegistry.add(this);
-      }
+const originalAddEventListener = EventTarget.prototype.addEventListener;
+EventTarget.prototype.addEventListener = function(type, listener, options) {
+  originalAddEventListener.call(this, type, listener, options);
+  if (this instanceof Element) {
+    const eventType = type.toLowerCase();
+    if (interactiveEvents.includes(eventType)) {
+      interactiveElementsRegistry.add(this);
     }
-  };
-}
-if (typeof Element !== "undefined" && typeof EventTarget !== "undefined") {
-  const originalRemoveEventListener = EventTarget.prototype.removeEventListener;
-  EventTarget.prototype.removeEventListener = function(type, listener, options) {
-    originalRemoveEventListener.call(this, type, listener, options);
-    if (this instanceof Element) {
-      const eventType = type.toLowerCase();
-      if (interactiveEvents.includes(eventType)) ;
-    }
-  };
-}
+  }
+};
+const originalRemoveEventListener = EventTarget.prototype.removeEventListener;
+EventTarget.prototype.removeEventListener = function(type, listener, options) {
+  originalRemoveEventListener.call(this, type, listener, options);
+};
 function hasEventListeners(n) {
   return n instanceof Element && interactiveElementsRegistry.has(n);
 }
@@ -703,9 +756,8 @@ function isElementInteractive(n) {
   }
   return false;
 }
-function inspectInlineEventHandlers(doc) {
-  if (!doc || typeof doc.querySelectorAll !== "function") return;
-  const allElements = doc.querySelectorAll("*");
+function inspectInlineEventHandlers() {
+  const allElements = document.querySelectorAll("*");
   allElements.forEach((el) => {
     inlineEventAttributes.forEach((attr) => {
       if (el.hasAttribute(attr)) {
@@ -714,22 +766,10 @@ function inspectInlineEventHandlers(doc) {
     });
   });
 }
-function scheduleInlineEventInspection(doc) {
-  if (!doc || typeof doc.addEventListener !== "function" || typeof doc.querySelectorAll !== "function") {
-    return;
-  }
-  try {
-    if (doc.readyState === "complete" || doc.readyState === "interactive") {
-      inspectInlineEventHandlers(doc);
-    } else {
-      doc.addEventListener("DOMContentLoaded", () => inspectInlineEventHandlers(doc), {
-        once: true,
-        capture: false
-      });
-    }
-  } catch (e) {
-    console.warn("[inlineEventInspection] Failed to inspect document:", e);
-  }
+if (document.readyState === "complete" || document.readyState === "interactive") {
+  inspectInlineEventHandlers();
+} else {
+  document.addEventListener("DOMContentLoaded", inspectInlineEventHandlers);
 }
 let _id = 1;
 const tagNameRegex = new RegExp("[^a-z0-9-_:]");
@@ -1023,6 +1063,7 @@ function serializeNode(n, options) {
           childNodes: [],
           xPath,
           compatMode: n.compatMode
+          // probably "BackCompat"
         };
       } else {
         return {
@@ -1317,7 +1358,7 @@ function slimDOMExcluded(sn, slimDOMOptions) {
   } else if (sn.type === NodeType.Element) {
     if (slimDOMOptions.script && // script tag
     (sn.tagName === "script" || // (module)preload link
-    sn.tagName === "link" && (sn.attributes.rel === "preload" || sn.attributes.rel === "modulepreload") && sn.attributes.as === "script" || // prefetch link
+    sn.tagName === "link" && (sn.attributes.rel === "preload" && sn.attributes.as === "script" || sn.attributes.rel === "modulepreload") || // prefetch link
     sn.tagName === "link" && sn.attributes.rel === "prefetch" && typeof sn.attributes.href === "string" && extractFileExtension(sn.attributes.href) === "js")) {
       return true;
     } else if (slimDOMOptions.headFavicon && (sn.tagName === "link" && sn.attributes.rel === "shortcut icon" || sn.tagName === "meta" && (lowerIfExists(sn.attributes.name).match(
@@ -1579,7 +1620,7 @@ function snapshot(n, options) {
     blockSelector = null,
     maskTextClass = "rr-mask",
     maskTextSelector = null,
-    ignoreAttribute = "rr-ignore-attr",
+    ignoreAttribute = "rr-ignore",
     inlineStylesheet = true,
     inlineImages = false,
     recordCanvas = false,
@@ -1596,7 +1637,6 @@ function snapshot(n, options) {
     stylesheetLoadTimeout,
     keepIframeSrcFn = () => false
   } = options || {};
-  scheduleInlineEventInspection(n);
   const maskInputOptions = maskAllInputs === true ? {
     color: true,
     date: true,
@@ -5305,11 +5345,16 @@ function getTagName(n) {
 function adaptCssForReplay(cssText, cache) {
   const cachedStyle = cache == null ? void 0 : cache.stylesWithHoverClass.get(cssText);
   if (cachedStyle) return cachedStyle;
-  const ast = postcss$1([
-    mediaSelectorPlugin,
-    pseudoClassPlugin
-  ]).process(cssText);
-  const result2 = ast.css;
+  let result2 = cssText;
+  try {
+    const ast = postcss$1([
+      mediaSelectorPlugin,
+      pseudoClassPlugin
+    ]).process(cssText);
+    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;
 }
@@ -5330,11 +5375,39 @@ function applyCssSplits(n, cssText, hackCss, cache) {
   while (cssTextSplits.length > 1 && cssTextSplits.length > childTextNodes.length) {
     cssTextSplits.splice(-2, 2, cssTextSplits.slice(-2).join(""));
   }
+  let adaptedCss = "";
+  if (hackCss) {
+    adaptedCss = adaptCssForReplay(cssTextSplits.join(""), cache);
+  }
+  let startIndex = 0;
   for (let i = 0; i < childTextNodes.length; i++) {
+    if (i === cssTextSplits.length) {
+      break;
+    }
     const childTextNode = childTextNodes[i];
-    const cssTextSection = cssTextSplits[i];
-    if (childTextNode && cssTextSection) {
-      childTextNode.textContent = hackCss ? adaptCssForReplay(cssTextSection, cache) : cssTextSection;
+    if (!hackCss) {
+      childTextNode.textContent = cssTextSplits[i];
+    } else if (i < cssTextSplits.length - 1) {
+      let endIndex = startIndex;
+      let endSearch = cssTextSplits[i + 1].length;
+      endSearch = Math.min(endSearch, 30);
+      let found = false;
+      for (; endSearch > 2; endSearch--) {
+        const searchBit = cssTextSplits[i + 1].substring(0, endSearch);
+        const searchIndex = adaptedCss.substring(startIndex).indexOf(searchBit);
+        found = searchIndex !== -1;
+        if (found) {
+          endIndex += searchIndex;
+          break;
+        }
+      }
+      if (!found) {
+        endIndex += cssTextSplits[i].length;
+      }
+      childTextNode.textContent = adaptedCss.substring(startIndex, endIndex);
+      startIndex = endIndex;
+    } else {
+      childTextNode.textContent = adaptedCss.substring(startIndex);
     }
   }
 }
@@ -5418,8 +5491,8 @@ function buildNode(n, options) {
           } else if (tagName === "meta" && n.attributes["http-equiv"] === "Content-Security-Policy" && name === "content") {
             node2.setAttribute("csp-content", value.toString());
             continue;
-          } else if (tagName === "link" && (n.attributes.rel === "preload" || n.attributes.rel === "modulepreload") && n.attributes.as === "script") {
-          } else if (tagName === "link" && n.attributes.rel === "prefetch" && typeof n.attributes.href === "string" && n.attributes.href.endsWith(".js")) {
+          } else if (tagName === "link" && (n.attributes.rel === "preload" && n.attributes.as === "script" || n.attributes.rel === "modulepreload")) {
+          } else if (tagName === "link" && n.attributes.rel === "prefetch" && typeof n.attributes.href === "string" && extractFileExtension(n.attributes.href) === "js") {
           } else if (tagName === "img" && n.attributes.srcset && n.attributes.rr_dataURL) {
             node2.setAttribute(
               "rrweb-original-srcset",
@@ -5654,7 +5727,6 @@ exports.fixSafariColons = fixSafariColons;
 exports.genId = genId;
 exports.getInputType = getInputType;
 exports.getXPath = getXPath;
-exports.inspectInlineEventHandlers = inspectInlineEventHandlers;
 exports.interactiveEvents = interactiveEvents;
 exports.interactiveTags = interactiveTags;
 exports.is2DCanvasBlank = is2DCanvasBlank;
@@ -5673,7 +5745,6 @@ exports.maskInputValue = maskInputValue;
 exports.needMaskingText = needMaskingText;
 exports.normalizeCssString = normalizeCssString;
 exports.rebuild = rebuild;
-exports.scheduleInlineEventInspection = scheduleInlineEventInspection;
 exports.serializeNodeWithId = serializeNodeWithId;
 exports.snapshot = snapshot;
 exports.splitCssText = splitCssText;