@appsurify-testmap/rrweb-record 3.1.1-alpha.3 → 3.3.0-alpha.1

package/dist/rrweb-record.cjs

@@ -13471,6 +13471,30 @@ class MutationBuffer {
     this.shadowDomManager.reset();
     this.canvasManager.reset();
   }
+  /**
+   * Clear all accumulated mutation data without emitting.
+   * Used after freeze+debounce checkout — FullSnapshot already captured the state.
+   */
+  resetBuffers() {
+    this.addedSet = /* @__PURE__ */ new Set();
+    this.movedSet = /* @__PURE__ */ new Set();
+    this.droppedSet = /* @__PURE__ */ new Set();
+    this.removesSubTreeCache = /* @__PURE__ */ new Set();
+    this.mapRemoves = [];
+    this.movedMap = {};
+    this.attributes = [];
+    this.texts = [];
+    this.attributeMap = /* @__PURE__ */ new WeakMap();
+    this.removes = [];
+  }
+  /**
+   * Clear frozen flag without triggering emit.
+   * Used after freeze+debounce checkout — buffers already cleared by resetBuffers().
+   */
+  unsetFrozen() {
+    this.frozen = false;
+    this.canvasManager.unfreeze();
+  }
 }
 function deepDelete(addsSet, n2) {
   addsSet.delete(n2);
@@ -13836,6 +13860,30 @@ function initNavigationObserver({
   handlers.push(restoreReplaceState);
   handlers.push(on("popstate", () => emitNavigation("popstate"), win));
   handlers.push(on("hashchange", () => emitNavigation("hashchange"), win));
+  const useNavigationAPI = typeof sampling.navigation === "object" ? sampling.navigation.useNavigationAPI ?? true : true;
+  if (useNavigationAPI && "navigation" in win) {
+    try {
+      const nav = win.navigation;
+      const handler = (event) => {
+        var _a2;
+        const navEvent = event;
+        if (navEvent.navigationType === "push" || navEvent.navigationType === "replace") {
+          const destUrl = (_a2 = navEvent.destination) == null ? void 0 : _a2.url;
+          if (destUrl && destUrl !== lastHref) {
+            navigationCb({
+              href: destUrl,
+              oldHref: lastHref,
+              navigationType: "navigate"
+            });
+            lastHref = destUrl;
+          }
+        }
+      };
+      nav.addEventListener("navigate", handler);
+      handlers.push(() => nav.removeEventListener("navigate", handler));
+    } catch {
+    }
+  }
   return callbackWrapper(() => {
     handlers.forEach((h) => h());
   });
@@ -15861,10 +15909,13 @@ class VisibilityManager {
   }
   flushBuffer() {
     var _a2;
+    if (this.frozen || this.locked) return;
     if (this.buffer.size === 0) return;
-    (_a2 = this.notifyActivity) == null ? void 0 : _a2.call(this, this.buffer.size);
-    this.mutationCb({ mutations: Array.from(this.buffer.values()) });
+    const mutations = Array.from(this.buffer.values());
+    const count = mutations.length;
     this.buffer.clear();
+    this.mutationCb({ mutations });
+    (_a2 = this.notifyActivity) == null ? void 0 : _a2.call(this, count);
   }
   observe(el) {
     if (this.disabled) return;
@@ -15878,6 +15929,10 @@ class VisibilityManager {
   }
   freeze() {
     this.frozen = true;
+    if (this.debounceTimer) {
+      clearTimeout(this.debounceTimer);
+      this.debounceTimer = null;
+    }
   }
   unfreeze() {
     this.frozen = false;
@@ -15885,9 +15940,33 @@ class VisibilityManager {
   }
   lock() {
     this.locked = true;
+    if (this.debounceTimer) {
+      clearTimeout(this.debounceTimer);
+      this.debounceTimer = null;
+    }
   }
   unlock() {
     this.locked = false;
+    this.buffer.clear();
+    if (this.debounceTimer) {
+      clearTimeout(this.debounceTimer);
+      this.debounceTimer = null;
+    }
+    if (!this.disabled && this.elements.size > 0) {
+      this.previousState = computeVisibility(this.elements, /* @__PURE__ */ new Map(), {
+        root: this.root,
+        threshold: this.threshold,
+        sensitivity: this.sensitivity,
+        rootMargin: this.rootMargin
+      });
+    }
+  }
+  /**
+   * Clear frozen flag without triggering flush.
+   * Used after freeze+debounce checkout — buffer already cleared by unlock().
+   */
+  unsetFrozen() {
+    this.frozen = false;
   }
   reset() {
     this.elements.clear();
@@ -15903,6 +15982,164 @@ class VisibilityManager {
     }
   }
 }
+const DEFAULT_SETTLE_TIMEOUT = 150;
+const DEFAULT_MAX_WAIT = 5e3;
+const DEFAULT_DEBOUNCE = 100;
+class NavigationManager {
+  constructor(options) {
+    __publicField(this, "frozen", false);
+    __publicField(this, "locked", false);
+    __publicField(this, "disabled", false);
+    __publicField(this, "settleTimeout");
+    __publicField(this, "maxWait");
+    __publicField(this, "debounceMs");
+    __publicField(this, "settlingObserver", null);
+    __publicField(this, "debounceTimer", null);
+    __publicField(this, "settleCheckTimer", null);
+    __publicField(this, "maxWaitTimer", null);
+    __publicField(this, "lastMutationTime", 0);
+    __publicField(this, "pendingNavigation", null);
+    __publicField(this, "doc");
+    __publicField(this, "onSnapshot");
+    const { doc, config, onSnapshot } = options;
+    this.doc = doc;
+    this.onSnapshot = callbackWrapper(onSnapshot);
+    this.settleTimeout = config.settleTimeout ?? DEFAULT_SETTLE_TIMEOUT;
+    this.maxWait = config.maxWait ?? DEFAULT_MAX_WAIT;
+    this.debounceMs = config.debounce ?? DEFAULT_DEBOUNCE;
+  }
+  handleNavigation(data) {
+    if (this.disabled) return;
+    if (this.locked) return;
+    this.cancelTimers();
+    this.disconnectSettlingObserver();
+    this.pendingNavigation = data;
+    if (this.frozen) {
+      return;
+    }
+    this.startDebounce();
+  }
+  cancelPending() {
+    this.cancelTimers();
+    this.disconnectSettlingObserver();
+    this.pendingNavigation = null;
+  }
+  freeze() {
+    this.frozen = true;
+    this.cancelTimers();
+    this.disconnectSettlingObserver();
+  }
+  unfreeze() {
+    this.frozen = false;
+    if (this.pendingNavigation && !this.locked && !this.disabled) {
+      this.startDebounce();
+    }
+  }
+  lock() {
+    this.locked = true;
+    this.cancelTimers();
+    this.disconnectSettlingObserver();
+  }
+  unlock() {
+    this.locked = false;
+    this.pendingNavigation = null;
+  }
+  unsetFrozen() {
+    this.frozen = false;
+  }
+  reset() {
+    this.cancelTimers();
+    this.disconnectSettlingObserver();
+    this.pendingNavigation = null;
+    this.frozen = false;
+    this.locked = false;
+  }
+  destroy() {
+    this.reset();
+    this.disabled = true;
+  }
+  startDebounce() {
+    this.debounceTimer = setTimeout(() => {
+      this.debounceTimer = null;
+      this.startDOMSettling();
+    }, this.debounceMs);
+  }
+  startDOMSettling() {
+    if (this.frozen || this.locked || this.disabled) return;
+    this.lastMutationTime = performance.now();
+    const ObserverCtor = mutationObserverCtor();
+    this.settlingObserver = new ObserverCtor(() => {
+      this.lastMutationTime = performance.now();
+      if (this.settleCheckTimer !== null) {
+        clearTimeout(this.settleCheckTimer);
+      }
+      this.settleCheckTimer = setTimeout(
+        () => this.checkSettled(),
+        this.settleTimeout
+      );
+    });
+    this.settlingObserver.observe(this.doc, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      characterData: true
+    });
+    this.settleCheckTimer = setTimeout(
+      () => this.checkSettled(),
+      this.settleTimeout
+    );
+    this.maxWaitTimer = setTimeout(() => {
+      this.maxWaitTimer = null;
+      this.completeSettling();
+    }, this.maxWait);
+  }
+  checkSettled() {
+    this.settleCheckTimer = null;
+    const elapsed = performance.now() - this.lastMutationTime;
+    if (elapsed >= this.settleTimeout) {
+      this.completeSettling();
+    } else {
+      this.settleCheckTimer = setTimeout(
+        () => this.checkSettled(),
+        this.settleTimeout - elapsed
+      );
+    }
+  }
+  completeSettling() {
+    if (this.frozen || this.locked || this.disabled) return;
+    if (!this.pendingNavigation) return;
+    this.cancelTimers();
+    this.disconnectSettlingObserver();
+    this.pendingNavigation = null;
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        if (!this.frozen && !this.locked && !this.disabled) {
+          this.onSnapshot(true);
+        }
+      });
+    });
+  }
+  cancelTimers() {
+    if (this.debounceTimer !== null) {
+      clearTimeout(this.debounceTimer);
+      this.debounceTimer = null;
+    }
+    if (this.settleCheckTimer !== null) {
+      clearTimeout(this.settleCheckTimer);
+      this.settleCheckTimer = null;
+    }
+    if (this.maxWaitTimer !== null) {
+      clearTimeout(this.maxWaitTimer);
+      this.maxWaitTimer = null;
+    }
+  }
+  disconnectSettlingObserver() {
+    if (this.settlingObserver) {
+      this.settlingObserver.disconnect();
+      this.settlingObserver = null;
+    }
+  }
+}
 class StylesheetManager {
   constructor(options) {
     __publicField(this, "trackedLinkElements", /* @__PURE__ */ new WeakSet());
@@ -15986,43 +16223,13 @@ class ProcessedNodeManager {
   destroy() {
   }
 }
-const version$1 = "3.1.1-alpha.3";
+const version$1 = "3.3.0-alpha.1";
 let wrappedEmit;
 let takeFullSnapshot$1;
 let canvasManager;
 let recording = false;
 const customEventQueue = [];
 let flushCustomEventQueue$1;
-function waitForDOMStabilization(win) {
-  const maxWaitMs = 5e3;
-  return new Promise((resolve2) => {
-    const captureAfterPaint = () => {
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          resolve2();
-        });
-      });
-    };
-    const safeResolve = /* @__PURE__ */ (() => {
-      let called = false;
-      return () => {
-        if (!called) {
-          called = true;
-          captureAfterPaint();
-        }
-      };
-    })();
-    if (["interactive", "complete"].includes(win.document.readyState)) {
-      safeResolve();
-    } else {
-      win.addEventListener("DOMContentLoaded", safeResolve, { once: true });
-      win.addEventListener("load", safeResolve, { once: true });
-      setTimeout(() => {
-        safeResolve();
-      }, maxWaitMs);
-    }
-  });
-}
 try {
   if (Array.from([1], (x2) => x2 * 2)[0] !== 2) {
     const cleanFrame = document.createElement("iframe");
@@ -16040,6 +16247,7 @@ function record(options = {}) {
     checkoutEveryNms,
     checkoutEveryNth,
     checkoutEveryNvm,
+    checkoutDebounce,
     blockClass = "rr-block",
     blockSelector = null,
     ignoreClass = "rr-ignore",
@@ -16134,6 +16342,10 @@ function record(options = {}) {
   let lastFullSnapshotEvent;
   let incrementalSnapshotCount = 0;
   let visibilityMutationCount = 0;
+  let checkoutId = 0;
+  let checkoutPending = false;
+  let checkoutDebounceTimer = null;
+  let checkoutFreezeTimestamp = null;
   const eventProcessor = (e2) => {
     for (const plugin3 of plugins || []) {
       if (plugin3.eventProcessor) {
@@ -16146,13 +16358,32 @@ function record(options = {}) {
     }
     return e2;
   };
+  const executeCheckout = () => {
+    checkoutDebounceTimer = null;
+    checkoutPending = false;
+    checkoutFreezeTimestamp = null;
+    navigationManager == null ? void 0 : navigationManager.cancelPending();
+    takeFullSnapshot$1(true);
+    mutationBuffers.forEach((buf) => {
+      buf.resetBuffers();
+      buf.unsetFrozen();
+    });
+    if (visibilityManager) {
+      visibilityManager.unsetFrozen();
+    }
+    if (navigationManager) {
+      navigationManager.unsetFrozen();
+    }
+  };
   wrappedEmit = (r2, isCheckout) => {
     var _a2;
     const e2 = r2;
     e2.timestamp = nowTimestamp();
-    if (((_a2 = mutationBuffers[0]) == null ? void 0 : _a2.isFrozen()) && e2.type !== EventType.FullSnapshot && !(e2.type === EventType.IncrementalSnapshot && e2.data.source === IncrementalSource.Mutation)) {
+    e2.checkoutId = checkoutId;
+    if (((_a2 = mutationBuffers[0]) == null ? void 0 : _a2.isFrozen()) && !checkoutPending && e2.type !== EventType.FullSnapshot && !(e2.type === EventType.IncrementalSnapshot && e2.data.source === IncrementalSource.Mutation)) {
       mutationBuffers.forEach((buf) => buf.unfreeze());
       visibilityManager == null ? void 0 : visibilityManager.unfreeze();
+      navigationManager == null ? void 0 : navigationManager.unfreeze();
     }
     if (inEmittingFrame) {
       emit == null ? void 0 : emit(eventProcessor(e2), isCheckout);
@@ -16177,7 +16408,29 @@ function record(options = {}) {
         const exceedCount = checkoutEveryNth && incrementalSnapshotCount >= checkoutEveryNth;
         const exceedTime = checkoutEveryNms && e2.timestamp - lastFullSnapshotEvent.timestamp > checkoutEveryNms;
         if (exceedCount || exceedTime) {
-          takeFullSnapshot$1(true);
+          if (checkoutDebounce) {
+            if (!checkoutPending) {
+              checkoutPending = true;
+              checkoutFreezeTimestamp = nowTimestamp();
+              mutationBuffers.forEach((buf) => buf.freeze());
+              visibilityManager == null ? void 0 : visibilityManager.freeze();
+            }
+            if (checkoutDebounceTimer) {
+              clearTimeout(checkoutDebounceTimer);
+            }
+            const frozenDuration = nowTimestamp() - checkoutFreezeTimestamp;
+            const maxFreeze = checkoutDebounce * 3;
+            if (frozenDuration >= maxFreeze) {
+              executeCheckout();
+            } else {
+              checkoutDebounceTimer = setTimeout(
+                () => executeCheckout(),
+                checkoutDebounce
+              );
+            }
+          } else {
+            takeFullSnapshot$1(true);
+          }
         }
       }
     }
@@ -16292,8 +16545,30 @@ function record(options = {}) {
       notifyActivity: checkoutEveryNvm != null ? (count) => {
         visibilityMutationCount += count;
         if (visibilityMutationCount >= checkoutEveryNvm) {
-          takeFullSnapshot$1(true);
           visibilityMutationCount = 0;
+          if (checkoutDebounce) {
+            if (!checkoutPending) {
+              checkoutPending = true;
+              checkoutFreezeTimestamp = nowTimestamp();
+              mutationBuffers.forEach((buf) => buf.freeze());
+              visibilityManager == null ? void 0 : visibilityManager.freeze();
+            }
+            if (checkoutDebounceTimer) {
+              clearTimeout(checkoutDebounceTimer);
+            }
+            const frozenDuration = nowTimestamp() - checkoutFreezeTimestamp;
+            const maxFreeze = checkoutDebounce * 3;
+            if (frozenDuration >= maxFreeze) {
+              executeCheckout();
+            } else {
+              checkoutDebounceTimer = setTimeout(
+                () => executeCheckout(),
+                checkoutDebounce
+              );
+            }
+          } else {
+            takeFullSnapshot$1(true);
+          }
         }
       } : void 0
     });
@@ -16302,6 +16577,7 @@ function record(options = {}) {
     if (!recordDOM) {
       return;
     }
+    checkoutId++;
     wrappedEmit(
       {
         type: EventType.Meta,
@@ -16317,6 +16593,7 @@ function record(options = {}) {
     shadowDomManager.init();
     mutationBuffers.forEach((buf) => buf.lock());
     visibilityManager == null ? void 0 : visibilityManager.lock();
+    navigationManager == null ? void 0 : navigationManager.lock();
     const node2 = snapshot(document, {
       mirror,
       blockClass,
@@ -16368,6 +16645,7 @@ function record(options = {}) {
     );
     mutationBuffers.forEach((buf) => buf.unlock());
     visibilityManager == null ? void 0 : visibilityManager.unlock();
+    navigationManager == null ? void 0 : navigationManager.unlock();
     if (document.adoptedStyleSheets && document.adoptedStyleSheets.length > 0)
       stylesheetManager.adoptStyleSheets(
         document.adoptedStyleSheets,
@@ -16380,6 +16658,31 @@ function record(options = {}) {
     }
     customEventQueue.length = 0;
   };
+  let navigationManager;
+  const navigationSampling = sampling.navigation;
+  if (navigationSampling !== false) {
+    const navConfig = typeof navigationSampling === "object" ? navigationSampling : {};
+    navigationManager = new NavigationManager({
+      doc: document,
+      config: navConfig,
+      onSnapshot: (isCheckout) => {
+        if (checkoutPending) {
+          if (checkoutDebounceTimer) {
+            clearTimeout(checkoutDebounceTimer);
+            checkoutDebounceTimer = null;
+          }
+          checkoutPending = false;
+          checkoutFreezeTimestamp = null;
+          mutationBuffers.forEach((buf) => {
+            buf.resetBuffers();
+            buf.unsetFrozen();
+          });
+          visibilityManager == null ? void 0 : visibilityManager.unsetFrozen();
+        }
+        takeFullSnapshot$1(isCheckout);
+      }
+    });
+  }
   try {
     const handlers = [];
     const observe = (doc) => {
@@ -16410,14 +16713,11 @@ function record(options = {}) {
             }
           }),
           navigationCb: (navData) => {
-            console.debug(
-              `[${nowTimestamp()}] [rrweb:record/navigation] 🧭 Navigation detected:`,
-              navData.navigationType,
-              navData.oldHref,
-              "→",
-              navData.href
-            );
-            takeFullSnapshot$1(true);
+            if (navigationManager) {
+              navigationManager.handleNavigation(navData);
+            } else {
+              takeFullSnapshot$1(true);
+            }
           },
           inputCb: (v2) => wrappedEmit({
             type: EventType.IncrementalSnapshot,
@@ -16536,23 +16836,6 @@ function record(options = {}) {
         flushCustomEventQueue$1();
       }
     };
-    const runInit = async () => {
-      if (flushCustomEvent === "before") {
-        flushCustomEventQueue$1();
-      }
-      if (recordAfter === "DOMContentStabilized") {
-        console.debug(`[${nowTimestamp()}] [rrweb:record] 🟢 Waiting for DOM stabilization...`);
-        await waitForDOMStabilization(window);
-        console.debug(`[${nowTimestamp()}] [rrweb:record] ✅ DOM stabilized, starting recording`);
-      }
-      console.debug(`[${nowTimestamp()}] [rrweb:record] ✅ Init dom and takeFullSnapshot `);
-      takeFullSnapshot$1();
-      handlers.push(observe(document));
-      recording = true;
-      if (flushCustomEvent === "after") {
-        flushCustomEventQueue$1();
-      }
-    };
     if (document.readyState === "interactive" || document.readyState === "complete") {
       init();
     } else {
@@ -16580,8 +16863,13 @@ function record(options = {}) {
       );
     }
     return () => {
+      if (checkoutDebounceTimer) {
+        clearTimeout(checkoutDebounceTimer);
+        checkoutDebounceTimer = null;
+      }
       flushCustomEventQueue$1();
       handlers.forEach((h) => h());
+      navigationManager == null ? void 0 : navigationManager.destroy();
       processedNodeManager.destroy();
       recording = false;
       unregisterErrorHandler();