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

package/dist/rrweb.umd.cjs

@@ -51,6 +51,46 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 var __defProp$1 = Object.defineProperty;
 var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField$1 = (obj, key, value) => __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
+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$3 = /* @__PURE__ */ ((NodeType2) => {
   NodeType2[NodeType2["Document"] = 0] = "Document";
   NodeType2[NodeType2["DocumentType"] = 1] = "DocumentType";
@@ -202,99 +242,6 @@ const index$1 = {
   querySelectorAll: querySelectorAll$1,
   mutationObserver: mutationObserverCtor$1
 };
-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(n2) {
-  return n2.nodeType === n2.ELEMENT_NODE;
-}
-function isTextVisible(n2) {
-  var _a2;
-  const parent = index$1.parentNode(n2);
-  const parentElement2 = parent && parent;
-  if (!parentElement2) {
-    return false;
-  }
-  const isParentVisible = isElementVisible(parentElement2);
-  if (!isParentVisible) {
-    return false;
-  }
-  const textContent2 = (_a2 = n2.textContent) == null ? void 0 : _a2.trim();
-  return textContent2 !== "";
-}
-function isElementVisible(n2) {
-  return isStyleVisible(n2) && isRectVisible(n2.getBoundingClientRect());
-}
-function isStyleVisible(n2) {
-  const style = window.getComputedStyle(n2);
-  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(n2) {
   const hostEl = (
     // anchor and textarea elements also have a `host` property
@@ -643,6 +590,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(n2) {
+  return n2.nodeType === n2.ELEMENT_NODE;
+}
+function isTextVisible(n2) {
+  var _a2;
+  const parent = index$1.parentNode(n2);
+  const parentElement2 = parent && parent;
+  if (!parentElement2) {
+    return false;
+  }
+  const isParentVisible = isElementVisible(parentElement2);
+  if (!isParentVisible) {
+    return false;
+  }
+  const textContent2 = (_a2 = n2.textContent) == null ? void 0 : _a2.trim();
+  return textContent2 !== "";
+}
+function isElementVisible(n2) {
+  return isStyleVisible(n2) && isRectVisible(n2.getBoundingClientRect());
+}
+function isStyleVisible(n2) {
+  const style = window.getComputedStyle(n2);
+  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(n2) {
+  return getInteractiveEvents().some((eventType) => {
+    let hasListener = false;
+    const testListener = () => {
+      hasListener = true;
+    };
+    n2.addEventListener(eventType, testListener);
+    n2.dispatchEvent(new Event(eventType));
+    n2.removeEventListener(eventType, testListener);
+    return hasListener;
+  });
+}
+function isElementInteractive(n2) {
+  var _a2;
+  const allowedTags = getInteractiveTags();
+  if (n2.nodeType === Node.ELEMENT_NODE) {
+    const element = n2;
+    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 (n2.nodeType === Node.TEXT_NODE) {
+    const textNode = n2;
+    const parentElement2 = textNode.parentElement;
+    return parentElement2 !== null && allowedTags.includes(parentElement2.tagName.toLowerCase()) && isElementVisible(parentElement2) && ((_a2 = textNode.textContent) == null ? void 0 : _a2.trim().length) !== 0 && isElementInteractive(parentElement2);
+  }
+  return false;
+}
 let _id = 1;
 const tagNameRegex = new RegExp("[^a-z0-9-_:]");
 const IGNORED_NODE = -2;
@@ -998,11 +1079,13 @@ function serializeTextNode(n2, options) {
     textContent2 = maskTextFn ? maskTextFn(textContent2, index$1.parentElement(n2)) : textContent2.replace(/[\S]/g, "*");
   }
   const isVisible = isTextVisible(n2);
+  const isInteractive = isElementInteractive(n2);
   return {
     type: NodeType$3.Text,
     textContent: textContent2 || "",
     rootId,
     isVisible,
+    isInteractive,
     xPath
   };
 }
@@ -1188,6 +1271,7 @@ function serializeElementNode(n2, options) {
   } catch (e2) {
   }
   const isVisible = isElementVisible(n2);
+  const isInteractive = isElementInteractive(n2);
   return {
     type: NodeType$3.Element,
     tagName,
@@ -1198,6 +1282,7 @@ function serializeElementNode(n2, options) {
     rootId,
     isCustom: isCustomElement,
     isVisible,
+    isInteractive,
     xPath
   };
 }
@@ -10980,20 +11065,20 @@ var IncrementalSource = /* @__PURE__ */ ((IncrementalSource2) => {
   IncrementalSource2[IncrementalSource2["Selection"] = 14] = "Selection";
   IncrementalSource2[IncrementalSource2["AdoptedStyleSheet"] = 15] = "AdoptedStyleSheet";
   IncrementalSource2[IncrementalSource2["CustomElement"] = 16] = "CustomElement";
+  IncrementalSource2[IncrementalSource2["VisibilityChange"] = 17] = "VisibilityChange";
   return IncrementalSource2;
 })(IncrementalSource || {});
 var MouseInteractions = /* @__PURE__ */ ((MouseInteractions2) => {
   MouseInteractions2[MouseInteractions2["MouseUp"] = 0] = "MouseUp";
   MouseInteractions2[MouseInteractions2["MouseDown"] = 1] = "MouseDown";
   MouseInteractions2[MouseInteractions2["Click"] = 2] = "Click";
-  MouseInteractions2[MouseInteractions2["ContextMenu"] = 3] = "ContextMenu";
-  MouseInteractions2[MouseInteractions2["DblClick"] = 4] = "DblClick";
-  MouseInteractions2[MouseInteractions2["Focus"] = 5] = "Focus";
-  MouseInteractions2[MouseInteractions2["Blur"] = 6] = "Blur";
-  MouseInteractions2[MouseInteractions2["TouchStart"] = 7] = "TouchStart";
-  MouseInteractions2[MouseInteractions2["TouchMove_Departed"] = 8] = "TouchMove_Departed";
-  MouseInteractions2[MouseInteractions2["TouchEnd"] = 9] = "TouchEnd";
-  MouseInteractions2[MouseInteractions2["TouchCancel"] = 10] = "TouchCancel";
+  MouseInteractions2[MouseInteractions2["DblClick"] = 3] = "DblClick";
+  MouseInteractions2[MouseInteractions2["Focus"] = 4] = "Focus";
+  MouseInteractions2[MouseInteractions2["Blur"] = 5] = "Blur";
+  MouseInteractions2[MouseInteractions2["TouchStart"] = 6] = "TouchStart";
+  MouseInteractions2[MouseInteractions2["TouchMove_Departed"] = 7] = "TouchMove_Departed";
+  MouseInteractions2[MouseInteractions2["TouchEnd"] = 8] = "TouchEnd";
+  MouseInteractions2[MouseInteractions2["TouchCancel"] = 9] = "TouchCancel";
   return MouseInteractions2;
 })(MouseInteractions || {});
 var PointerTypes = /* @__PURE__ */ ((PointerTypes2) => {
@@ -11693,6 +11778,54 @@ function initMutationObserver(options, rootEl) {
   });
   return observer;
 }
+function initVisibilityObserver({
+  visibilityChangeCb,
+  doc,
+  mirror: mirror2
+}) {
+  if (!visibilityChangeCb) {
+    return () => {
+    };
+  }
+  const observedElements = /* @__PURE__ */ new WeakMap();
+  const observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        const target = entry.target;
+        const id = mirror2.getId(target);
+        const isVisible = entry.isIntersecting || entry.intersectionRatio > 0;
+        if (id !== -1) {
+          if (observedElements.has(target)) {
+            visibilityChangeCb({
+              id,
+              isVisible,
+              visibilityRatio: entry.intersectionRatio,
+              boundingRect: entry.boundingClientRect
+            });
+          } else {
+            observedElements.set(target, true);
+          }
+        }
+      });
+    },
+    { root: null, threshold: [0.1, 0.9] }
+  );
+  doc.querySelectorAll("*").forEach((el) => observer.observe(el));
+  const mutationObserver = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      mutation.addedNodes.forEach((node2) => {
+        if (node2 instanceof Element) {
+          observer.observe(node2);
+        }
+      });
+    });
+  });
+  mutationObserver.observe(doc, { childList: true, subtree: true });
+  return () => {
+    observer.disconnect();
+    mutationObserver.disconnect();
+  };
+}
 function initMoveObserver({
   mousemoveCb,
   sampling,
@@ -12506,6 +12639,7 @@ function initCustomElementObserver({
 function mergeHooks(o2, hooks) {
   const {
     mutationCb,
+    visibilityChangeCb,
     mousemoveCb,
     mouseInteractionCb,
     scrollCb,
@@ -12525,6 +12659,12 @@ function mergeHooks(o2, hooks) {
     }
     mutationCb(...p);
   };
+  o2.visibilityChangeCb = (...p) => {
+    if (hooks.visibilityChange) {
+      hooks.visibilityChange(...p);
+    }
+    visibilityChangeCb(...p);
+  };
   o2.mousemoveCb = (...p) => {
     if (hooks.mousemove) {
       hooks.mousemove(...p);
@@ -12599,6 +12739,7 @@ function mergeHooks(o2, hooks) {
   };
 }
 function initObservers(o2, hooks = {}) {
+  console.info("initObservers", o2);
   const currentWindow = o2.doc.defaultView;
   if (!currentWindow) {
     return () => {
@@ -12617,6 +12758,7 @@ function initObservers(o2, hooks = {}) {
   });
   const inputHandler = initInputObserver(o2);
   const mediaInteractionHandler = initMediaInteractionObserver(o2);
+  const visibleHandler = initVisibilityObserver(o2);
   let styleSheetObserver = () => {
   };
   let adoptedStyleSheetObserver = () => {
@@ -12646,6 +12788,7 @@ function initObservers(o2, hooks = {}) {
   return callbackWrapper(() => {
     mutationBuffers.forEach((b) => b.reset());
     mutationObserver == null ? void 0 : mutationObserver.disconnect();
+    visibleHandler();
     mousemoveHandler();
     mouseInteractionHandler();
     scrollHandler();
@@ -13730,6 +13873,7 @@ function record(options = {}) {
     emit,
     checkoutEveryNms,
     checkoutEveryNth,
+    checkoutEveryEvc,
     blockClass = "rr-block",
     blockSelector = null,
     ignoreClass = "rr-ignore",
@@ -14016,6 +14160,11 @@ function record(options = {}) {
         mirror.getId(document)
       );
   };
+  const debouncedFullSnapshot = throttle(() => {
+    if (checkoutEveryEvc) {
+      takeFullSnapshot$1(true);
+    }
+  }, 100, { leading: false, trailing: true });
   try {
     const handlers = [];
     const observe = (doc) => {
@@ -14023,6 +14172,17 @@ function record(options = {}) {
       return callbackWrapper(initObservers)(
         {
           mutationCb: wrappedMutationEmit,
+          visibilityChangeCb: (v2) => {
+            debouncedFullSnapshot();
+            if (sampling.visibility) {
+              return wrappedEmit({
+                type: EventType.IncrementalSnapshot,
+                data: __spreadValues({
+                  source: IncrementalSource.VisibilityChange
+                }, v2)
+              });
+            }
+          },
           mousemoveCb: (positions, source) => wrappedEmit({
             type: EventType.IncrementalSnapshot,
             data: {