@appsurify-testmap/rrweb-snapshot 2.0.0-alpha.23 → 2.0.0-alpha.24

package/dist/index.d.cts

@@ -72,6 +72,8 @@ export declare function isCSSStyleRule(rule: CSSRule): rule is CSSStyleRule;
 
 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 isNativeShadowDom(shadowRoot: ShadowRoot): boolean;

package/dist/index.d.ts

@@ -72,6 +72,8 @@ export declare function isCSSStyleRule(rule: CSSRule): rule is CSSStyleRule;
 
 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 isNativeShadowDom(shadowRoot: ShadowRoot): boolean;

package/dist/rrweb-snapshot.cjs

@@ -3,6 +3,46 @@ 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);
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var InteractiveEvent = /* @__PURE__ */ ((InteractiveEvent2) => {
+  InteractiveEvent2[InteractiveEvent2["Change"] = 0] = "Change";
+  InteractiveEvent2[InteractiveEvent2["Submit"] = 1] = "Submit";
+  InteractiveEvent2[InteractiveEvent2["DragStart"] = 2] = "DragStart";
+  InteractiveEvent2[InteractiveEvent2["Drop"] = 3] = "Drop";
+  InteractiveEvent2[InteractiveEvent2["PointerDown"] = 4] = "PointerDown";
+  InteractiveEvent2[InteractiveEvent2["PointerUp"] = 5] = "PointerUp";
+  InteractiveEvent2[InteractiveEvent2["Input"] = 6] = "Input";
+  InteractiveEvent2[InteractiveEvent2["KeyDown"] = 7] = "KeyDown";
+  InteractiveEvent2[InteractiveEvent2["KeyUp"] = 8] = "KeyUp";
+  InteractiveEvent2[InteractiveEvent2["KeyPress"] = 9] = "KeyPress";
+  InteractiveEvent2[InteractiveEvent2["MouseEnter"] = 10] = "MouseEnter";
+  InteractiveEvent2[InteractiveEvent2["MouseLeave"] = 11] = "MouseLeave";
+  InteractiveEvent2[InteractiveEvent2["MouseUp"] = 12] = "MouseUp";
+  InteractiveEvent2[InteractiveEvent2["MouseDown"] = 13] = "MouseDown";
+  InteractiveEvent2[InteractiveEvent2["Click"] = 14] = "Click";
+  InteractiveEvent2[InteractiveEvent2["ContextMenu"] = 15] = "ContextMenu";
+  InteractiveEvent2[InteractiveEvent2["DblClick"] = 16] = "DblClick";
+  InteractiveEvent2[InteractiveEvent2["Focus"] = 17] = "Focus";
+  InteractiveEvent2[InteractiveEvent2["Blur"] = 18] = "Blur";
+  InteractiveEvent2[InteractiveEvent2["TouchStart"] = 19] = "TouchStart";
+  InteractiveEvent2[InteractiveEvent2["TouchMove"] = 20] = "TouchMove";
+  InteractiveEvent2[InteractiveEvent2["TouchEnd"] = 21] = "TouchEnd";
+  InteractiveEvent2[InteractiveEvent2["TouchCancel"] = 22] = "TouchCancel";
+  return InteractiveEvent2;
+})(InteractiveEvent || {});
+var interactiveTag = /* @__PURE__ */ ((interactiveTag2) => {
+  interactiveTag2[interactiveTag2["Input"] = 0] = "Input";
+  interactiveTag2[interactiveTag2["Button"] = 1] = "Button";
+  interactiveTag2[interactiveTag2["A"] = 2] = "A";
+  interactiveTag2[interactiveTag2["Select"] = 3] = "Select";
+  interactiveTag2[interactiveTag2["Textarea"] = 4] = "Textarea";
+  interactiveTag2[interactiveTag2["Label"] = 5] = "Label";
+  interactiveTag2[interactiveTag2["Details"] = 6] = "Details";
+  interactiveTag2[interactiveTag2["Summary"] = 7] = "Summary";
+  interactiveTag2[interactiveTag2["Dialog"] = 8] = "Dialog";
+  interactiveTag2[interactiveTag2["Video"] = 9] = "Video";
+  interactiveTag2[interactiveTag2["Audio"] = 10] = "Audio";
+  return interactiveTag2;
+})(interactiveTag || {});
 var NodeType = /* @__PURE__ */ ((NodeType2) => {
   NodeType2[NodeType2["Document"] = 0] = "Document";
   NodeType2[NodeType2["DocumentType"] = 1] = "DocumentType";
@@ -154,99 +194,6 @@ const index = {
   querySelectorAll,
   mutationObserver: mutationObserverCtor
 };
-function getXPath(node2) {
-  if (node2.nodeType === Node.DOCUMENT_NODE) {
-    return "/";
-  }
-  if (node2.nodeType === Node.DOCUMENT_TYPE_NODE) {
-    return "/html/doctype";
-  }
-  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 || !(parentNode2 instanceof Element)) {
-      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}`;
-  }
-  if (node2.nodeType === Node.TEXT_NODE) {
-    const parent = node2.parentNode;
-    if (!parent) {
-      return "";
-    }
-    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 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}`;
-  }
-  if (node2.nodeType === Node.COMMENT_NODE) {
-    const parent = node2.parentNode;
-    if (!parent) {
-      return "";
-    }
-    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}`;
-  }
-  return "";
-}
-function isElement(n) {
-  return n.nodeType === n.ELEMENT_NODE;
-}
-function isTextVisible(n) {
-  var _a;
-  const parent = index.parentNode(n);
-  const parentElement2 = parent && parent;
-  if (!parentElement2) {
-    return false;
-  }
-  const isParentVisible = isElementVisible(parentElement2);
-  if (!isParentVisible) {
-    return false;
-  }
-  const textContent2 = (_a = n.textContent) == null ? void 0 : _a.trim();
-  return textContent2 !== "";
-}
-function isElementVisible(n) {
-  return isStyleVisible(n) && isRectVisible(n.getBoundingClientRect());
-}
-function isStyleVisible(n) {
-  const style = window.getComputedStyle(n);
-  return style.display !== "none" && style.visibility !== "hidden" && parseFloat(style.opacity) !== 0;
-}
-function isRectVisible(rect) {
-  return rect.width > 0 && rect.height > 0 && rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth);
-}
 function isShadowRoot(n) {
   const hostEl = (
     // anchor and textarea elements also have a `host` property
@@ -594,6 +541,140 @@ function splitCssText(cssText, style) {
 function markCssSplits(cssText, style) {
   return splitCssText(cssText, style).join("/* rr_split */");
 }
+function getXPath(node2) {
+  if (node2.nodeType === Node.DOCUMENT_NODE) {
+    return "/";
+  }
+  if (node2.nodeType === Node.DOCUMENT_TYPE_NODE) {
+    return "/html/doctype";
+  }
+  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 || !(parentNode2 instanceof Element)) {
+      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}`;
+  }
+  if (node2.nodeType === Node.TEXT_NODE) {
+    const parent = node2.parentNode;
+    if (!parent) {
+      return "";
+    }
+    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 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}`;
+  }
+  if (node2.nodeType === Node.COMMENT_NODE) {
+    const parent = node2.parentNode;
+    if (!parent) {
+      return "";
+    }
+    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}`;
+  }
+  return "";
+}
+function isElement(n) {
+  return n.nodeType === n.ELEMENT_NODE;
+}
+function isTextVisible(n) {
+  var _a;
+  const parent = index.parentNode(n);
+  const parentElement2 = parent && parent;
+  if (!parentElement2) {
+    return false;
+  }
+  const isParentVisible = isElementVisible(parentElement2);
+  if (!isParentVisible) {
+    return false;
+  }
+  const textContent2 = (_a = n.textContent) == null ? void 0 : _a.trim();
+  return textContent2 !== "";
+}
+function isElementVisible(n) {
+  return isStyleVisible(n) && isRectVisible(n.getBoundingClientRect());
+}
+function isStyleVisible(n) {
+  const style = window.getComputedStyle(n);
+  return style.display !== "none" && style.visibility !== "hidden" && parseFloat(style.opacity) !== 0;
+}
+function isRectVisible(rect) {
+  return rect.width > 0 && rect.height > 0 && rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth);
+}
+function getInteractiveEvents() {
+  return Object.keys(InteractiveEvent).filter((key) => isNaN(Number(key))).map((key) => key.toLowerCase().replace(/_/g, "-"));
+}
+function getInteractiveTags() {
+  return Object.keys(interactiveTag).filter((key) => isNaN(Number(key))).map((key) => key.toLowerCase().replace(/_/g, "-"));
+}
+function hasEventListeners(n) {
+  return getInteractiveEvents().some((eventType) => {
+    let hasListener = false;
+    const testListener = () => {
+      hasListener = true;
+    };
+    n.addEventListener(eventType, testListener);
+    n.dispatchEvent(new Event(eventType));
+    n.removeEventListener(eventType, testListener);
+    return hasListener;
+  });
+}
+function isElementInteractive(n) {
+  var _a;
+  const allowedTags = getInteractiveTags();
+  if (n.nodeType === Node.ELEMENT_NODE) {
+    const element = n;
+    const tagName = element.tagName.toLowerCase();
+    if (!allowedTags.includes(tagName)) {
+      return false;
+    }
+    const hasTabIndex = element.hasAttribute("tabindex") && element.getAttribute("tabindex") !== "-1";
+    const hasRoleInteractive = ["button", "link", "checkbox", "switch", "menuitem"].includes(
+      element.getAttribute("role") || ""
+    );
+    const result2 = hasEventListeners(element) || hasTabIndex || hasRoleInteractive || element instanceof HTMLAnchorElement && element.hasAttribute("href") || element instanceof HTMLButtonElement && !element.disabled;
+    return result2;
+  }
+  if (n.nodeType === Node.TEXT_NODE) {
+    const textNode = n;
+    const parentElement2 = textNode.parentElement;
+    return parentElement2 !== null && allowedTags.includes(parentElement2.tagName.toLowerCase()) && isElementVisible(parentElement2) && ((_a = textNode.textContent) == null ? void 0 : _a.trim().length) !== 0 && isElementInteractive(parentElement2);
+  }
+  return false;
+}
 let _id = 1;
 const tagNameRegex = new RegExp("[^a-z0-9-_:]");
 const IGNORED_NODE = -2;
@@ -949,11 +1030,13 @@ function serializeTextNode(n, options) {
     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
   };
 }
@@ -1139,6 +1222,7 @@ function serializeElementNode(n, options) {
   } catch (e) {
   }
   const isVisible = isElementVisible(n);
+  const isInteractive = isElementInteractive(n);
   return {
     type: NodeType.Element,
     tagName,
@@ -1149,6 +1233,7 @@ function serializeElementNode(n, options) {
     rootId,
     isCustom: isCustomElement,
     isVisible,
+    isInteractive,
     xPath
   };
 }
@@ -5499,6 +5584,7 @@ exports.is2DCanvasBlank = is2DCanvasBlank;
 exports.isCSSImportRule = isCSSImportRule;
 exports.isCSSStyleRule = isCSSStyleRule;
 exports.isElement = isElement;
+exports.isElementInteractive = isElementInteractive;
 exports.isElementVisible = isElementVisible;
 exports.isNativeShadowDom = isNativeShadowDom;
 exports.isNodeMetaEqual = isNodeMetaEqual;