@appsurify-testmap/rrweb-snapshot 2.1.0-alpha.7 → 2.1.1-alpha.2

package/dist/index.d.cts

@@ -21,6 +21,10 @@ export declare function buildNodeWithSN(n: serializedNodeWithId, options: {
     cache: BuildCache;
 }): Node | null;
 
+export declare function buildSelector(node: Node): string | null;
+
+export declare function buildXPath(node: Node): string;
+
 export declare function classMatchesRegex(node: Node | null, regex: RegExp, checkAncestors: boolean): boolean;
 
 export declare function cleanupSnapshot(): void;
@@ -52,8 +56,6 @@ export declare function genId(): number;
 
 export declare function getInputType(element: HTMLElement): Lowercase<string> | null;
 
-export declare function getXPath(node: Node): string;
-
 export declare interface ICanvas extends HTMLCanvasElement {
     __context: string;
 }
@@ -78,12 +80,10 @@ export declare function isElement(n: Node): n is Element;
 
 export declare function isElementInteractive(n: Node): boolean;
 
-export declare function isElementVisible(n: Element): boolean;
+export declare function isElementVisible(el: Element): boolean;
 
 export declare function isExcludeAttribute(name: string, exclude: string | RegExp): boolean;
 
-export declare function isIncludeAttribute(name: string, include: string | RegExp): boolean;
-
 export declare function isNativeShadowDom(shadowRoot: ShadowRoot): boolean;
 
 export declare function isNodeMetaEqual(a: serializedNode, b: serializedNode): boolean;
@@ -166,7 +166,6 @@ export declare function serializeNodeWithId(n: Node, options: {
     maskTextClass: string | RegExp;
     maskTextSelector: string | null;
     excludeAttribute: string | RegExp;
-    includeAttribute: string | RegExp;
     skipChild: boolean;
     inlineStylesheet: boolean;
     newlyAddedElement?: boolean;
@@ -209,7 +208,6 @@ export declare function snapshot(n: Document, options?: {
     maskTextClass?: string | RegExp;
     maskTextSelector?: string | null;
     excludeAttribute?: string | RegExp;
-    includeAttribute?: string | RegExp;
     inlineStylesheet?: boolean;
     maskAllInputs?: boolean | MaskInputOptions;
     maskTextFn?: MaskTextFn;

package/dist/index.d.ts

@@ -21,6 +21,10 @@ export declare function buildNodeWithSN(n: serializedNodeWithId, options: {
     cache: BuildCache;
 }): Node | null;
 
+export declare function buildSelector(node: Node): string | null;
+
+export declare function buildXPath(node: Node): string;
+
 export declare function classMatchesRegex(node: Node | null, regex: RegExp, checkAncestors: boolean): boolean;
 
 export declare function cleanupSnapshot(): void;
@@ -52,8 +56,6 @@ export declare function genId(): number;
 
 export declare function getInputType(element: HTMLElement): Lowercase<string> | null;
 
-export declare function getXPath(node: Node): string;
-
 export declare interface ICanvas extends HTMLCanvasElement {
     __context: string;
 }
@@ -78,12 +80,10 @@ export declare function isElement(n: Node): n is Element;
 
 export declare function isElementInteractive(n: Node): boolean;
 
-export declare function isElementVisible(n: Element): boolean;
+export declare function isElementVisible(el: Element): boolean;
 
 export declare function isExcludeAttribute(name: string, exclude: string | RegExp): boolean;
 
-export declare function isIncludeAttribute(name: string, include: string | RegExp): boolean;
-
 export declare function isNativeShadowDom(shadowRoot: ShadowRoot): boolean;
 
 export declare function isNodeMetaEqual(a: serializedNode, b: serializedNode): boolean;
@@ -166,7 +166,6 @@ export declare function serializeNodeWithId(n: Node, options: {
     maskTextClass: string | RegExp;
     maskTextSelector: string | null;
     excludeAttribute: string | RegExp;
-    includeAttribute: string | RegExp;
     skipChild: boolean;
     inlineStylesheet: boolean;
     newlyAddedElement?: boolean;
@@ -209,7 +208,6 @@ export declare function snapshot(n: Document, options?: {
     maskTextClass?: string | RegExp;
     maskTextSelector?: string | null;
     excludeAttribute?: string | RegExp;
-    includeAttribute?: string | RegExp;
     inlineStylesheet?: boolean;
     maskAllInputs?: boolean | MaskInputOptions;
     maskTextFn?: MaskTextFn;

package/dist/rrweb-snapshot.cjs

@@ -166,6 +166,41 @@ function patch(source, name, replacement) {
     };
   }
 }
+function describeNode(el) {
+  const tag = el.tagName.toLowerCase();
+  const id = el.id ? `#${el.id}` : "";
+  const classes = el.classList.length ? "." + Array.from(el.classList).join(".") : "";
+  return `${tag}${id}${classes}`;
+}
+function getElementVisibility(el) {
+  var _a, _b;
+  const win = ((_a = el.ownerDocument) == null ? void 0 : _a.defaultView) ?? window;
+  const rect = el.getBoundingClientRect();
+  const viewportWidth = win.innerWidth || win.document.documentElement.clientWidth || 0;
+  const viewportHeight = win.innerHeight || win.document.documentElement.clientHeight || 0;
+  const isRectVisible = rect.width > 0 && rect.height > 0 && rect.bottom > 0 && rect.right > 0 && rect.top < viewportHeight && rect.left < viewportWidth;
+  const style = (_b = win.getComputedStyle) == null ? void 0 : _b.call(win, el);
+  const isStyleVisible = !!style && style.display !== "none" && style.visibility !== "hidden" && (parseFloat(style.opacity) || 0) > 0;
+  const isVisible = isStyleVisible && isRectVisible;
+  let ratio = 0;
+  if (isVisible) {
+    const xOverlap = Math.max(
+      0,
+      Math.min(rect.right, viewportWidth) - Math.max(rect.left, 0)
+    );
+    const yOverlap = Math.max(
+      0,
+      Math.min(rect.bottom, viewportHeight) - Math.max(rect.top, 0)
+    );
+    const intersectionArea = xOverlap * yOverlap;
+    const elementArea = rect.width * rect.height;
+    ratio = elementArea > 0 ? intersectionArea / elementArea : 0;
+  }
+  return {
+    isVisible,
+    ratio
+  };
+}
 const index = {
   childNodes,
   parentNode,
@@ -179,7 +214,9 @@ const index = {
   querySelector,
   querySelectorAll,
   mutationObserver: mutationObserverCtor,
-  patch
+  patch,
+  describeNode,
+  getElementVisibility
 };
 function isElement(n) {
   return n.nodeType === n.ELEMENT_NODE;
@@ -565,71 +602,95 @@ function splitCssText(cssText, style, _testNoPxNorm = false) {
 function markCssSplits(cssText, style) {
   return splitCssText(cssText, style).join("/* rr_split */");
 }
-function getXPath(node2) {
-  if (node2.nodeType === Node.DOCUMENT_NODE) {
-    return "/";
+function isSelectorUnique(selector, target) {
+  try {
+    const matches = document.querySelectorAll(selector);
+    return matches.length === 1 && matches[0] === target;
+  } catch {
+    return false;
   }
-  if (node2.nodeType === Node.DOCUMENT_TYPE_NODE) {
-    return "/html/doctype";
+}
+function buildSelector(node2) {
+  if (!(node2 instanceof Element)) return null;
+  if (node2.id) {
+    return `#${CSS.escape(node2.id)}`;
   }
-  if (node2.nodeType === Node.ELEMENT_NODE) {
-    const element = node2;
-    if (element.id) {
-      return `//*[@id="${element.id}"]`;
-    }
-    if (element.tagName && element.tagName.toLowerCase() === "html") {
-      return "/html";
-    }
-    if (element === document.head) {
-      return "/html/head";
-    }
-    if (element === document.body) {
-      return "/html/body";
-    }
-    const parentNode2 = element.parentNode;
-    if (!parentNode2) {
-      return "";
-    }
-    const siblings = Array.from(parentNode2.children).filter(
-      (sibling) => sibling.tagName === element.tagName
-    );
-    const index2 = siblings.length > 1 ? `[${siblings.indexOf(element) + 1}]` : "";
-    return `${getXPath(parentNode2)}/${element.tagName.toLowerCase()}${index2}`;
+  const parts = [];
+  const tag = node2.tagName.toLowerCase();
+  if (node2.classList.length) {
+    parts.push(...Array.from(node2.classList).map((cls) => `.${CSS.escape(cls)}`));
   }
-  if (node2.nodeType === Node.TEXT_NODE) {
-    const parent = node2.parentNode;
-    if (!parent) {
-      return "";
+  Array.from(node2.attributes).forEach((attr) => {
+    if (attr.name.startsWith("data-")) {
+      parts.push(`[${attr.name}="${CSS.escape(attr.value)}"]`);
     }
-    const textSiblings = Array.from(parent.childNodes).filter(
-      (sibling) => sibling.nodeType === Node.TEXT_NODE
-    );
-    const index2 = textSiblings.length > 1 ? `[${textSiblings.indexOf(node2) + 1}]` : "";
-    return `${getXPath(parent)}/text()${index2}`;
-  }
-  if (node2.nodeType === Node.CDATA_SECTION_NODE) {
-    const parent = node2.parentNode;
-    if (!parent) {
-      return "";
+  });
+  const shortSelector = `${tag}${parts.join("")}`;
+  if (isSelectorUnique(shortSelector, node2)) {
+    return shortSelector;
+  }
+  const pathParts = [];
+  let current = node2;
+  while (current && current.nodeType === Node.ELEMENT_NODE) {
+    const parent = current.parentElement;
+    const tagName = current.tagName.toLowerCase();
+    let nth = "";
+    if (parent) {
+      const siblings = Array.from(parent.children).filter(
+        (el) => el.tagName.toLowerCase() === tagName
+      );
+      if (siblings.length > 1) {
+        nth = `:nth-of-type(${siblings.indexOf(current) + 1})`;
+      }
     }
-    const cdataSiblings = Array.from(parent.childNodes).filter(
-      (sibling) => sibling.nodeType === Node.CDATA_SECTION_NODE
-    );
-    const index2 = cdataSiblings.length > 1 ? `[${cdataSiblings.indexOf(node2) + 1}]` : "";
-    return `${getXPath(parent)}/text()${index2}`;
+    pathParts.unshift(`${tagName}${nth}`);
+    current = parent;
   }
-  if (node2.nodeType === Node.COMMENT_NODE) {
-    const parent = node2.parentNode;
-    if (!parent) {
-      return "";
+  return pathParts.join(" > ") || null;
+}
+function buildXPath(node2) {
+  switch (node2.nodeType) {
+    case Node.DOCUMENT_NODE:
+      return "/";
+    case Node.DOCUMENT_TYPE_NODE:
+      return "/html/doctype";
+    case Node.ELEMENT_NODE: {
+      const element = node2;
+      if (element.id) {
+        return `//*[@id="${CSS.escape(element.id)}"]`;
+      }
+      if (element.tagName.toLowerCase() === "html") return "/html";
+      if (element === document.head) return "/html/head";
+      if (element === document.body) return "/html/body";
+      const parent = element.parentNode;
+      if (!parent) return "";
+      const tag = element.tagName.toLowerCase();
+      const siblings = Array.from(parent.children).filter(
+        (el) => el.tagName.toLowerCase() === tag
+      );
+      const index2 = siblings.length > 1 ? `[${siblings.indexOf(element) + 1}]` : "";
+      return `${buildXPath(parent)}/${tag}${index2}`;
+    }
+    case Node.TEXT_NODE:
+    case Node.CDATA_SECTION_NODE:
+    case Node.COMMENT_NODE: {
+      const parent = node2.parentNode;
+      if (!parent) return "";
+      const typeMap = {
+        [Node.TEXT_NODE]: "text()",
+        [Node.CDATA_SECTION_NODE]: "text()",
+        // CDATA ≡ text() в XPath
+        [Node.COMMENT_NODE]: "comment()"
+      };
+      const sameTypeSiblings = Array.from(parent.childNodes).filter(
+        (sibling) => sibling.nodeType === node2.nodeType
+      );
+      const index2 = sameTypeSiblings.length > 1 ? `[${sameTypeSiblings.indexOf(node2)}]` : "";
+      return `${buildXPath(parent)}/${typeMap[node2.nodeType]}${index2}`;
     }
-    const commentSiblings = Array.from(parent.childNodes).filter(
-      (sibling) => sibling.nodeType === Node.COMMENT_NODE
-    );
-    const index2 = commentSiblings.length > 1 ? `[${commentSiblings.indexOf(node2) + 1}]` : "";
-    return `${getXPath(parent)}/comment()${index2}`;
+    default:
+      return "";
   }
-  return "";
 }
 function isTextVisible(n) {
   var _a;
@@ -645,20 +706,9 @@ function isTextVisible(n) {
   const textContent2 = (_a = n.textContent) == null ? void 0 : _a.trim();
   return textContent2 !== "";
 }
-function isElementVisible(n) {
-  var _a;
-  const win = ((_a = n.ownerDocument) == null ? void 0 : _a.defaultView) ?? null;
-  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);
-  return result2;
-}
-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;
-  return rect.width > 0 && rect.height > 0 && rect.top >= 0 && rect.left >= 0 && rect.bottom <= height && rect.right <= width;
+function isElementVisible(el) {
+  const visibility = index.getElementVisibility(el);
+  return visibility.isVisible;
 }
 const interactiveEvents = [
   "change",
@@ -891,9 +941,6 @@ function transformAttribute(doc, tagName, name, value) {
 function ignoreAttribute(tagName, name, _value) {
   return (tagName === "video" || tagName === "audio") && name === "autoplay";
 }
-function isIncludeAttribute(name, include) {
-  return typeof include === "string" ? name.includes(include) : include.test(name);
-}
 function isExcludeAttribute(name, exclude) {
   return typeof exclude === "string" ? name.includes(exclude) : exclude.test(name);
 }
@@ -1027,7 +1074,6 @@ function serializeNode(n, options) {
     blockClass,
     blockSelector,
     excludeAttribute,
-    includeAttribute,
     needsMask,
     inlineStylesheet,
     maskInputOptions = {},
@@ -1041,22 +1087,19 @@ function serializeNode(n, options) {
     cssCaptured = false
   } = options;
   const rootId = getRootId(doc, mirror);
-  const xPath = getXPath(n);
   switch (n.nodeType) {
     case n.DOCUMENT_NODE:
       if (n.compatMode !== "CSS1Compat") {
         return {
           type: NodeType.Document,
           childNodes: [],
-          xPath,
           compatMode: n.compatMode
           // probably "BackCompat"
         };
       } else {
         return {
           type: NodeType.Document,
-          childNodes: [],
-          xPath
+          childNodes: []
         };
       }
     case n.DOCUMENT_TYPE_NODE:
@@ -1065,8 +1108,7 @@ function serializeNode(n, options) {
         name: n.name,
         publicId: n.publicId,
         systemId: n.systemId,
-        rootId,
-        xPath
+        rootId
       };
     case n.ELEMENT_NODE:
       return serializeElementNode(n, {
@@ -1074,7 +1116,6 @@ function serializeNode(n, options) {
         blockClass,
         blockSelector,
         excludeAttribute,
-        includeAttribute,
         inlineStylesheet,
         maskInputOptions,
         maskInputFn,
@@ -1083,8 +1124,7 @@ function serializeNode(n, options) {
         recordCanvas,
         keepIframeSrcFn,
         newlyAddedElement,
-        rootId,
-        xPath
+        rootId
       });
     case n.TEXT_NODE:
       return serializeTextNode(n, {
@@ -1092,22 +1132,19 @@ function serializeNode(n, options) {
         needsMask,
         maskTextFn,
         rootId,
-        cssCaptured,
-        xPath
+        cssCaptured
       });
     case n.CDATA_SECTION_NODE:
       return {
         type: NodeType.CDATA,
         textContent: "",
-        rootId,
-        xPath
+        rootId
       };
     case n.COMMENT_NODE:
       return {
         type: NodeType.Comment,
         textContent: index.textContent(n) || "",
-        rootId,
-        xPath
+        rootId
       };
     default:
       return false;
@@ -1119,7 +1156,7 @@ function getRootId(doc, mirror) {
   return docId === 1 ? void 0 : docId;
 }
 function serializeTextNode(n, options) {
-  const { needsMask, maskTextFn, rootId, cssCaptured, xPath } = options;
+  const { needsMask, maskTextFn, rootId, cssCaptured } = options;
   const parent = index.parentNode(n);
   const parentTagName = parent && parent.tagName;
   let textContent2 = "";
@@ -1136,15 +1173,10 @@ function serializeTextNode(n, options) {
   if (!isStyle && !isScript && textContent2 && needsMask) {
     textContent2 = maskTextFn ? maskTextFn(textContent2, index.parentElement(n)) : textContent2.replace(/[\S]/g, "*");
   }
-  const isVisible = isTextVisible(n);
-  const isInteractive = isElementInteractive(n);
   return {
     type: NodeType.Text,
     textContent: textContent2 || "",
-    rootId,
-    isVisible,
-    isInteractive,
-    xPath
+    rootId
   };
 }
 function serializeElementNode(n, options) {
@@ -1153,7 +1185,6 @@ function serializeElementNode(n, options) {
     blockClass,
     blockSelector,
     excludeAttribute,
-    includeAttribute,
     inlineStylesheet,
     maskInputOptions = {},
     maskInputFn,
@@ -1162,8 +1193,7 @@ function serializeElementNode(n, options) {
     recordCanvas,
     keepIframeSrcFn,
     newlyAddedElement = false,
-    rootId,
-    xPath
+    rootId
   } = options;
   const needBlock = _isBlockedElement(n, blockClass, blockSelector);
   const tagName = getValidTagName(n);
@@ -1171,7 +1201,7 @@ function serializeElementNode(n, options) {
   const len = n.attributes.length;
   for (let i = 0; i < len; i++) {
     const attr = n.attributes[i];
-    if (isExcludeAttribute(attr.name, excludeAttribute) && !isIncludeAttribute(attr.name, includeAttribute)) {
+    if (isExcludeAttribute(attr.name, excludeAttribute)) {
       continue;
     }
     if (!ignoreAttribute(tagName, attr.name, attr.value)) {
@@ -1333,8 +1363,6 @@ function serializeElementNode(n, options) {
     if (customElements.get(tagName)) isCustomElement = true;
   } catch (e) {
   }
-  const isVisible = isElementVisible(n);
-  const isInteractive = isElementInteractive(n);
   return {
     type: NodeType.Element,
     tagName,
@@ -1343,10 +1371,7 @@ function serializeElementNode(n, options) {
     isSVG: isSVGElement(n) || void 0,
     needBlock,
     rootId,
-    isCustom: isCustomElement,
-    isVisible,
-    isInteractive,
-    xPath
+    isCustom: isCustomElement
   };
 }
 function lowerIfExists(maybeAttr) {
@@ -1397,7 +1422,6 @@ function serializeNodeWithId(n, options) {
     maskTextClass,
     maskTextSelector,
     excludeAttribute,
-    includeAttribute,
     skipChild = false,
     inlineStylesheet = true,
     maskInputOptions = {},
@@ -1433,7 +1457,6 @@ function serializeNodeWithId(n, options) {
     blockClass,
     blockSelector,
     excludeAttribute,
-    includeAttribute,
     needsMask,
     inlineStylesheet,
     maskInputOptions,
@@ -1459,6 +1482,22 @@ function serializeNodeWithId(n, options) {
     id = genId();
   }
   const serializedNode = Object.assign(_serializedNode, { id });
+  if (isElement(n) || n.nodeType === Node.TEXT_NODE) {
+    serializedNode.xpath = buildXPath(n);
+    if (isElement(n)) {
+      const selector = buildSelector(n);
+      if (selector) {
+        serializedNode.selector = selector;
+      }
+    }
+    if (n.nodeType === Node.TEXT_NODE) {
+      serializedNode.isVisible = isTextVisible(n);
+    }
+    if (n.nodeType === Node.ELEMENT_NODE) {
+      serializedNode.isVisible = isElementVisible(n);
+      serializedNode.isInteractive = isElementInteractive(n);
+    }
+  }
   mirror.add(n, serializedNode);
   if (id === IGNORED_NODE) {
     return null;
@@ -1487,7 +1526,6 @@ function serializeNodeWithId(n, options) {
       maskTextClass,
       maskTextSelector,
       excludeAttribute,
-      includeAttribute,
       skipChild,
       inlineStylesheet,
       maskInputOptions,
@@ -1548,7 +1586,6 @@ function serializeNodeWithId(n, options) {
             maskTextClass,
             maskTextSelector,
             excludeAttribute,
-            includeAttribute,
             skipChild: false,
             inlineStylesheet,
             maskInputOptions,
@@ -1591,7 +1628,6 @@ function serializeNodeWithId(n, options) {
             maskTextClass,
             maskTextSelector,
             excludeAttribute,
-            includeAttribute,
             skipChild: false,
             inlineStylesheet,
             maskInputOptions,
@@ -1629,8 +1665,7 @@ function snapshot(n, options) {
     blockSelector = null,
     maskTextClass = "rr-mask",
     maskTextSelector = null,
-    excludeAttribute = /^$a/,
-    includeAttribute = /.+/i,
+    excludeAttribute = /.^/,
     inlineStylesheet = true,
     inlineImages = false,
     recordCanvas = false,
@@ -1691,7 +1726,6 @@ function snapshot(n, options) {
     maskTextClass,
     maskTextSelector,
     excludeAttribute,
-    includeAttribute,
     skipChild: false,
     inlineStylesheet,
     maskInputOptions,
@@ -5728,6 +5762,8 @@ exports.Mirror = Mirror;
 exports.absolutifyURLs = absolutifyURLs;
 exports.adaptCssForReplay = adaptCssForReplay;
 exports.buildNodeWithSN = buildNodeWithSN;
+exports.buildSelector = buildSelector;
+exports.buildXPath = buildXPath;
 exports.classMatchesRegex = classMatchesRegex;
 exports.cleanupSnapshot = cleanupSnapshot;
 exports.createCache = createCache;
@@ -5737,7 +5773,6 @@ exports.extractFileExtension = extractFileExtension;
 exports.fixSafariColons = fixSafariColons;
 exports.genId = genId;
 exports.getInputType = getInputType;
-exports.getXPath = getXPath;
 exports.ignoreAttribute = ignoreAttribute;
 exports.interactiveEvents = interactiveEvents;
 exports.interactiveTags = interactiveTags;
@@ -5748,7 +5783,6 @@ exports.isElement = isElement;
 exports.isElementInteractive = isElementInteractive;
 exports.isElementVisible = isElementVisible;
 exports.isExcludeAttribute = isExcludeAttribute;
-exports.isIncludeAttribute = isIncludeAttribute;
 exports.isNativeShadowDom = isNativeShadowDom;
 exports.isNodeMetaEqual = isNodeMetaEqual;
 exports.isShadowRoot = isShadowRoot;