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

package/dist/rrweb-snapshot.umd.cjs

@@ -210,6 +210,42 @@ 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 _a2;
+  var _a, _b;
+  const win = (_a2 = (_a = el.ownerDocument) == null ? void 0 : _a.defaultView) != null ? _a2 : 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,
@@ -223,7 +259,9 @@ const index = {
   querySelector,
   querySelectorAll,
   mutationObserver: mutationObserverCtor,
-  patch
+  patch,
+  describeNode,
+  getElementVisibility
 };
 function isElement(n) {
   return n.nodeType === n.ELEMENT_NODE;
@@ -610,71 +648,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 (e) {
+    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;
@@ -690,22 +752,9 @@ function isTextVisible(n) {
   const textContent2 = (_a = n.textContent) == null ? void 0 : _a.trim();
   return textContent2 !== "";
 }
-function isElementVisible(n) {
-  var _a2;
-  var _a;
-  const win = (_a2 = (_a = n.ownerDocument) == null ? void 0 : _a.defaultView) != null ? _a2 : 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 _a2, _b2, _c2, _d2;
-  var _a, _b, _c, _d;
-  const height = (_b2 = (_a2 = win == null ? void 0 : win.innerHeight) != null ? _a2 : (_b = (_a = win == null ? void 0 : win.document) == null ? void 0 : _a.documentElement) == null ? void 0 : _b.clientHeight) != null ? _b2 : 0;
-  const width = (_d2 = (_c2 = win == null ? void 0 : win.innerWidth) != null ? _c2 : (_d = (_c = win == null ? void 0 : win.document) == null ? void 0 : _c.documentElement) == null ? void 0 : _d.clientWidth) != null ? _d2 : 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",
@@ -938,9 +987,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);
 }
@@ -1074,7 +1120,6 @@ function serializeNode(n, options) {
     blockClass,
     blockSelector,
     excludeAttribute,
-    includeAttribute,
     needsMask,
     inlineStylesheet,
     maskInputOptions = {},
@@ -1088,22 +1133,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:
@@ -1112,8 +1154,7 @@ function serializeNode(n, options) {
         name: n.name,
         publicId: n.publicId,
         systemId: n.systemId,
-        rootId,
-        xPath
+        rootId
       };
     case n.ELEMENT_NODE:
       return serializeElementNode(n, {
@@ -1121,7 +1162,6 @@ function serializeNode(n, options) {
         blockClass,
         blockSelector,
         excludeAttribute,
-        includeAttribute,
         inlineStylesheet,
         maskInputOptions,
         maskInputFn,
@@ -1130,8 +1170,7 @@ function serializeNode(n, options) {
         recordCanvas,
         keepIframeSrcFn,
         newlyAddedElement,
-        rootId,
-        xPath
+        rootId
       });
     case n.TEXT_NODE:
       return serializeTextNode(n, {
@@ -1139,22 +1178,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;
@@ -1166,7 +1202,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 = "";
@@ -1183,15 +1219,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) {
@@ -1200,7 +1231,6 @@ function serializeElementNode(n, options) {
     blockClass,
     blockSelector,
     excludeAttribute,
-    includeAttribute,
     inlineStylesheet,
     maskInputOptions = {},
     maskInputFn,
@@ -1209,8 +1239,7 @@ function serializeElementNode(n, options) {
     recordCanvas,
     keepIframeSrcFn,
     newlyAddedElement = false,
-    rootId,
-    xPath
+    rootId
   } = options;
   const needBlock = _isBlockedElement(n, blockClass, blockSelector);
   const tagName = getValidTagName(n);
@@ -1218,7 +1247,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)) {
@@ -1380,8 +1409,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,
@@ -1390,10 +1417,7 @@ function serializeElementNode(n, options) {
     isSVG: isSVGElement(n) || void 0,
     needBlock,
     rootId,
-    isCustom: isCustomElement,
-    isVisible,
-    isInteractive,
-    xPath
+    isCustom: isCustomElement
   };
 }
 function lowerIfExists(maybeAttr) {
@@ -1444,7 +1468,6 @@ function serializeNodeWithId(n, options) {
     maskTextClass,
     maskTextSelector,
     excludeAttribute,
-    includeAttribute,
     skipChild = false,
     inlineStylesheet = true,
     maskInputOptions = {},
@@ -1480,7 +1503,6 @@ function serializeNodeWithId(n, options) {
     blockClass,
     blockSelector,
     excludeAttribute,
-    includeAttribute,
     needsMask,
     inlineStylesheet,
     maskInputOptions,
@@ -1506,6 +1528,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;
@@ -1534,7 +1572,6 @@ function serializeNodeWithId(n, options) {
       maskTextClass,
       maskTextSelector,
       excludeAttribute,
-      includeAttribute,
       skipChild,
       inlineStylesheet,
       maskInputOptions,
@@ -1595,7 +1632,6 @@ function serializeNodeWithId(n, options) {
             maskTextClass,
             maskTextSelector,
             excludeAttribute,
-            includeAttribute,
             skipChild: false,
             inlineStylesheet,
             maskInputOptions,
@@ -1638,7 +1674,6 @@ function serializeNodeWithId(n, options) {
             maskTextClass,
             maskTextSelector,
             excludeAttribute,
-            includeAttribute,
             skipChild: false,
             inlineStylesheet,
             maskInputOptions,
@@ -1676,8 +1711,7 @@ function snapshot(n, options) {
     blockSelector = null,
     maskTextClass = "rr-mask",
     maskTextSelector = null,
-    excludeAttribute = /^$a/,
-    includeAttribute = /.+/i,
+    excludeAttribute = /.^/,
     inlineStylesheet = true,
     inlineImages = false,
     recordCanvas = false,
@@ -1738,7 +1772,6 @@ function snapshot(n, options) {
     maskTextClass,
     maskTextSelector,
     excludeAttribute,
-    includeAttribute,
     skipChild: false,
     inlineStylesheet,
     maskInputOptions,
@@ -5779,6 +5812,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;
@@ -5788,7 +5823,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;
@@ -5799,7 +5833,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;