@appsurify-testmap/rrweb-record 2.0.0-alpha.22 → 2.0.0-alpha.24

package/dist/rrweb-record.cjs

@@ -7,6 +7,46 @@ var _a;
 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";
@@ -158,53 +198,6 @@ const index$1 = {
   querySelectorAll: querySelectorAll$1,
   mutationObserver: mutationObserverCtor$1
 };
-function getXPath(n2) {
-  if (n2.id) {
-    return `//*[@id="${n2.id}"]`;
-  }
-  if (n2 === document.body) {
-    return "/html/body";
-  }
-  if (!n2.tagName) {
-    return "";
-  }
-  const parentNode2 = index$1.parentNode(n2);
-  if (!parentNode2 || !(parentNode2 instanceof Element)) {
-    return "";
-  }
-  const siblings = Array.from(parentNode2.children).filter(
-    (node2) => node2.tagName && node2.tagName === n2.tagName
-  );
-  const index$1$1 = siblings.length > 1 ? `[${siblings.indexOf(n2) + 1}]` : "";
-  return getXPath(parentNode2) + "/" + n2.tagName.toLowerCase() + index$1$1;
-}
-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
@@ -540,6 +533,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;
@@ -895,11 +1022,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
   };
 }
@@ -1085,6 +1214,7 @@ function serializeElementNode(n2, options) {
   } catch (e2) {
   }
   const isVisible = isElementVisible(n2);
+  const isInteractive = isElementInteractive(n2);
   return {
     type: NodeType$3.Element,
     tagName,
@@ -1095,6 +1225,7 @@ function serializeElementNode(n2, options) {
     rootId,
     isCustom: isCustomElement,
     isVisible,
+    isInteractive,
     xPath
   };
 }
@@ -1899,7 +2030,7 @@ function cloneNode$1(obj, parent) {
   }
   return cloned;
 }
-let Node$4$1 = class Node2 {
+let Node$5$1 = class Node2 {
   constructor(defaults = {}) {
     this.raws = {};
     this[isClean$2$1] = false;
@@ -2191,10 +2322,10 @@ let Node$4$1 = class Node2 {
     return this;
   }
 };
-var node$1 = Node$4$1;
-Node$4$1.default = Node$4$1;
-let Node$3$1 = node$1;
-let Declaration$4$1 = class Declaration extends Node$3$1 {
+var node$1 = Node$5$1;
+Node$5$1.default = Node$5$1;
+let Node$4$1 = node$1;
+let Declaration$4$1 = class Declaration extends Node$4$1 {
   constructor(defaults) {
     if (defaults && typeof defaults.value !== "undefined" && typeof defaults.value !== "string") {
       defaults = { ...defaults, value: String(defaults.value) };
@@ -2850,8 +2981,8 @@ let MapGenerator$2$1 = class MapGenerator {
   }
 };
 var mapGenerator$1 = MapGenerator$2$1;
-let Node$2$1 = node$1;
-let Comment$4$1 = class Comment extends Node$2$1 {
+let Node$3$1 = node$1;
+let Comment$4$1 = class Comment extends Node$3$1 {
   constructor(defaults) {
     super(defaults);
     this.type = "comment";
@@ -2862,7 +2993,7 @@ Comment$4$1.default = Comment$4$1;
 let { isClean: isClean$1$1, my: my$1$1 } = symbols$1;
 let Declaration$3$1 = declaration$1;
 let Comment$3$1 = comment$1;
-let Node$1$1 = node$1;
+let Node$2$1 = node$1;
 let parse$4$1, Rule$4$1, AtRule$4$1, Root$6$1;
 function cleanSource$1(nodes) {
   return nodes.map((i2) => {
@@ -2879,7 +3010,7 @@ function markDirtyUp$1(node2) {
     }
   }
 }
-let Container$7$1 = class Container extends Node$1$1 {
+let Container$7$1 = class Container extends Node$2$1 {
   append(...children) {
     for (let child of children) {
       let nodes = this.normalize(child, this.last);
@@ -4906,7 +5037,7 @@ let parse$5 = parse_1$1;
 let list$3 = list_1$1;
 let Rule2$1 = rule$1;
 let Root2$1 = root$1;
-let Node2$1 = node$1;
+let Node$1$1 = node$1;
 function postcss$3(...plugins) {
   if (plugins.length === 1 && Array.isArray(plugins[0])) {
     plugins = plugins[0];
@@ -4966,7 +5097,7 @@ postcss$3.Result = Result2$1;
 postcss$3.Input = Input2$1;
 postcss$3.Rule = Rule2$1;
 postcss$3.Root = Root2$1;
-postcss$3.Node = Node2$1;
+postcss$3.Node = Node$1$1;
 LazyResult2$1.registerPostcss(postcss$3);
 var postcss_1$1 = postcss$3;
 postcss$3.default = postcss$3;
@@ -5451,7 +5582,7 @@ function cloneNode(obj, parent) {
   }
   return cloned;
 }
-let Node$4 = class Node3 {
+let Node$5 = class Node22 {
   constructor(defaults = {}) {
     this.raws = {};
     this[isClean$2] = false;
@@ -5743,10 +5874,10 @@ let Node$4 = class Node3 {
     return this;
   }
 };
-var node = Node$4;
-Node$4.default = Node$4;
-let Node$3 = node;
-let Declaration$4 = class Declaration2 extends Node$3 {
+var node = Node$5;
+Node$5.default = Node$5;
+let Node$4 = node;
+let Declaration$4 = class Declaration2 extends Node$4 {
   constructor(defaults) {
     if (defaults && typeof defaults.value !== "undefined" && typeof defaults.value !== "string") {
       defaults = { ...defaults, value: String(defaults.value) };
@@ -6402,8 +6533,8 @@ let MapGenerator$2 = class MapGenerator2 {
   }
 };
 var mapGenerator = MapGenerator$2;
-let Node$2 = node;
-let Comment$4 = class Comment2 extends Node$2 {
+let Node$3 = node;
+let Comment$4 = class Comment2 extends Node$3 {
   constructor(defaults) {
     super(defaults);
     this.type = "comment";
@@ -6414,7 +6545,7 @@ Comment$4.default = Comment$4;
 let { isClean: isClean$1, my: my$1 } = symbols;
 let Declaration$3 = declaration;
 let Comment$3 = comment;
-let Node$1 = node;
+let Node$2 = node;
 let parse$4, Rule$4, AtRule$4, Root$6;
 function cleanSource(nodes) {
   return nodes.map((i2) => {
@@ -6431,7 +6562,7 @@ function markDirtyUp(node2) {
     }
   }
 }
-let Container$7 = class Container2 extends Node$1 {
+let Container$7 = class Container2 extends Node$2 {
   append(...children) {
     for (let child of children) {
       let nodes = this.normalize(child, this.last);
@@ -8458,7 +8589,7 @@ let parse = parse_1;
 let list = list_1;
 let Rule22 = rule;
 let Root22 = root;
-let Node22 = node;
+let Node$1 = node;
 function postcss(...plugins) {
   if (plugins.length === 1 && Array.isArray(plugins[0])) {
     plugins = plugins[0];
@@ -8518,7 +8649,7 @@ postcss.Result = Result22;
 postcss.Input = Input22;
 postcss.Rule = Rule22;
 postcss.Root = Root22;
-postcss.Node = Node22;
+postcss.Node = Node$1;
 LazyResult22.registerPostcss(postcss);
 var postcss_1 = postcss;
 postcss.default = postcss;
@@ -9043,20 +9174,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) => {
@@ -9736,6 +9867,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,
@@ -10551,6 +10730,7 @@ function initCustomElementObserver({
 function mergeHooks(o2, hooks) {
   const {
     mutationCb,
+    visibilityChangeCb,
     mousemoveCb,
     mouseInteractionCb,
     scrollCb,
@@ -10570,6 +10750,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);
@@ -10644,6 +10830,7 @@ function mergeHooks(o2, hooks) {
   };
 }
 function initObservers(o2, hooks = {}) {
+  console.info("initObservers", o2);
   const currentWindow = o2.doc.defaultView;
   if (!currentWindow) {
     return () => {
@@ -10662,6 +10849,7 @@ function initObservers(o2, hooks = {}) {
   });
   const inputHandler = initInputObserver(o2);
   const mediaInteractionHandler = initMediaInteractionObserver(o2);
+  const visibleHandler = initVisibilityObserver(o2);
   let styleSheetObserver = () => {
   };
   let adoptedStyleSheetObserver = () => {
@@ -10691,6 +10879,7 @@ function initObservers(o2, hooks = {}) {
   return callbackWrapper(() => {
     mutationBuffers.forEach((b) => b.reset());
     mutationObserver == null ? void 0 : mutationObserver.disconnect();
+    visibleHandler();
     mousemoveHandler();
     mouseInteractionHandler();
     scrollHandler();
@@ -11757,6 +11946,7 @@ function record(options = {}) {
     emit,
     checkoutEveryNms,
     checkoutEveryNth,
+    checkoutEveryEvc,
     blockClass = "rr-block",
     blockSelector = null,
     ignoreClass = "rr-ignore",
@@ -12047,6 +12237,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) => {
@@ -12054,6 +12249,18 @@ function record(options = {}) {
       return callbackWrapper(initObservers)(
         {
           mutationCb: wrappedMutationEmit,
+          visibilityChangeCb: (v2) => {
+            debouncedFullSnapshot();
+            if (sampling.visibility) {
+              return wrappedEmit({
+                type: EventType.IncrementalSnapshot,
+                data: {
+                  source: IncrementalSource.VisibilityChange,
+                  ...v2
+                }
+              });
+            }
+          },
           mousemoveCb: (positions, source) => wrappedEmit({
             type: EventType.IncrementalSnapshot,
             data: {