@appsurify-testmap/rrweb-record 2.1.0-alpha.3 → 2.1.0-alpha.6

package/dist/rrweb-record.cjs

@@ -880,32 +880,14 @@ function transformAttribute(doc, tagName, name, value) {
   }
   return value;
 }
-function isIgnoreAttribute(tagName, name, _value) {
+function ignoreAttribute(tagName, name, _value) {
   return (tagName === "video" || tagName === "audio") && name === "autoplay";
 }
-function cleanAttributes(doc, element, ignoreAttribute) {
-  const tagName = getValidTagName$1(element);
-  const attributes = {};
-  const len = element.attributes.length;
-  for (let i2 = 0; i2 < len; i2++) {
-    const attr = element.attributes[i2];
-    const name = attr.name;
-    const value = attr.value;
-    const shouldIgnoreByName = typeof ignoreAttribute === "string" ? name === ignoreAttribute : ignoreAttribute.test(name);
-    if (!shouldIgnoreByName && !isIgnoreAttribute(tagName, name)) {
-      attributes[name] = transformAttribute(
-        doc,
-        tagName,
-        toLowerCase(name),
-        value
-      );
-    }
-  }
-  return attributes;
+function isIncludeAttribute(name, include) {
+  return typeof include === "string" ? name.includes(include) : include.test(name);
 }
-function shouldIgnoreAttribute(ignore, name) {
-  if (!ignore) return false;
-  return typeof ignore === "string" ? name === ignore : ignore.test(name);
+function isExcludeAttribute(name, exclude) {
+  return typeof exclude === "string" ? name.includes(exclude) : exclude.test(name);
 }
 function _isBlockedElement(element, blockClass, blockSelector) {
   try {
@@ -1036,7 +1018,8 @@ function serializeNode(n2, options) {
     mirror: mirror2,
     blockClass,
     blockSelector,
-    ignoreAttribute,
+    excludeAttribute,
+    includeAttribute,
     needsMask,
     inlineStylesheet,
     maskInputOptions = {},
@@ -1082,7 +1065,8 @@ function serializeNode(n2, options) {
         doc,
         blockClass,
         blockSelector,
-        ignoreAttribute,
+        excludeAttribute,
+        includeAttribute,
         inlineStylesheet,
         maskInputOptions,
         maskInputFn,
@@ -1160,7 +1144,8 @@ function serializeElementNode(n2, options) {
     doc,
     blockClass,
     blockSelector,
-    ignoreAttribute,
+    excludeAttribute,
+    includeAttribute,
     inlineStylesheet,
     maskInputOptions = {},
     maskInputFn,
@@ -1174,7 +1159,22 @@ function serializeElementNode(n2, options) {
   } = options;
   const needBlock = _isBlockedElement(n2, blockClass, blockSelector);
   const tagName = getValidTagName$1(n2);
-  let attributes = cleanAttributes(doc, n2, ignoreAttribute);
+  let attributes = {};
+  const len = n2.attributes.length;
+  for (let i2 = 0; i2 < len; i2++) {
+    const attr = n2.attributes[i2];
+    if (isExcludeAttribute(attr.name, excludeAttribute) && !isIncludeAttribute(attr.name, includeAttribute)) {
+      continue;
+    }
+    if (!ignoreAttribute(tagName, attr.name, attr.value)) {
+      attributes[attr.name] = transformAttribute(
+        doc,
+        tagName,
+        toLowerCase(attr.name),
+        attr.value
+      );
+    }
+  }
   if (tagName === "link" && inlineStylesheet) {
     const stylesheet = Array.from(doc.styleSheets).find((s2) => {
       return s2.href === n2.href;
@@ -1388,7 +1388,8 @@ function serializeNodeWithId(n2, options) {
     blockSelector,
     maskTextClass,
     maskTextSelector,
-    ignoreAttribute,
+    excludeAttribute,
+    includeAttribute,
     skipChild = false,
     inlineStylesheet = true,
     maskInputOptions = {},
@@ -1423,7 +1424,8 @@ function serializeNodeWithId(n2, options) {
     mirror: mirror2,
     blockClass,
     blockSelector,
-    ignoreAttribute,
+    excludeAttribute,
+    includeAttribute,
     needsMask,
     inlineStylesheet,
     maskInputOptions,
@@ -1476,7 +1478,8 @@ function serializeNodeWithId(n2, options) {
       needsMask,
       maskTextClass,
       maskTextSelector,
-      ignoreAttribute,
+      excludeAttribute,
+      includeAttribute,
       skipChild,
       inlineStylesheet,
       maskInputOptions,
@@ -1536,7 +1539,8 @@ function serializeNodeWithId(n2, options) {
             needsMask,
             maskTextClass,
             maskTextSelector,
-            ignoreAttribute,
+            excludeAttribute,
+            includeAttribute,
             skipChild: false,
             inlineStylesheet,
             maskInputOptions,
@@ -1578,7 +1582,8 @@ function serializeNodeWithId(n2, options) {
             needsMask,
             maskTextClass,
             maskTextSelector,
-            ignoreAttribute,
+            excludeAttribute,
+            includeAttribute,
             skipChild: false,
             inlineStylesheet,
             maskInputOptions,
@@ -1616,7 +1621,8 @@ function snapshot(n2, options) {
     blockSelector = null,
     maskTextClass = "rr-mask",
     maskTextSelector = null,
-    ignoreAttribute = "rr-ignore",
+    excludeAttribute = /^$a/,
+    includeAttribute = /.+/i,
     inlineStylesheet = true,
     inlineImages = false,
     recordCanvas = false,
@@ -1676,7 +1682,8 @@ function snapshot(n2, options) {
     blockSelector,
     maskTextClass,
     maskTextSelector,
-    ignoreAttribute,
+    excludeAttribute,
+    includeAttribute,
     skipChild: false,
     inlineStylesheet,
     maskInputOptions,
@@ -9184,7 +9191,7 @@ function hookSetter(target, key, d, isRevoked, win = window) {
   return () => hookSetter(target, key, original || {}, true);
 }
 function nowTimestamp() {
-  return performance.timeOrigin + performance.now();
+  return Math.round(performance.timeOrigin + performance.now());
 }
 function getWindowScroll(win = window) {
   var _a2, _b, _c, _d;
@@ -9374,7 +9381,6 @@ 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) => {
@@ -9520,7 +9526,8 @@ class MutationBuffer {
     __publicField(this, "blockSelector");
     __publicField(this, "maskTextClass");
     __publicField(this, "maskTextSelector");
-    __publicField(this, "ignoreAttribute");
+    __publicField(this, "excludeAttribute");
+    __publicField(this, "includeAttribute");
     __publicField(this, "inlineStylesheet");
     __publicField(this, "maskInputOptions");
     __publicField(this, "maskTextFn");
@@ -9584,7 +9591,8 @@ class MutationBuffer {
           blockSelector: this.blockSelector,
           maskTextClass: this.maskTextClass,
           maskTextSelector: this.maskTextSelector,
-          ignoreAttribute: this.ignoreAttribute || "",
+          excludeAttribute: this.excludeAttribute,
+          includeAttribute: this.includeAttribute,
           skipChild: true,
           newlyAddedElement: true,
           inlineStylesheet: this.inlineStylesheet,
@@ -9704,21 +9712,6 @@ class MutationBuffer {
           };
         }).filter((text) => !addedIds.has(text.id)).filter((text) => this.mirror.has(text.id)),
         attributes: this.attributes.map((attribute) => {
-          const element = attribute.node;
-          const filtered = {};
-          for (const [name, value] of Object.entries(attribute.attributes)) {
-            const isIgnored2 = shouldIgnoreAttribute(this.ignoreAttribute, name);
-            const existedBefore = element.hasAttribute(name);
-            const keep = value !== null && !isIgnored2 || value === null && (!isIgnored2 || attribute.attributes[name] !== null || existedBefore);
-            if (keep) {
-              filtered[name] = value;
-            }
-          }
-          return {
-            ...attribute,
-            attributes: filtered
-          };
-        }).filter((attribute) => Object.keys(attribute.attributes).length > 0).map((attribute) => {
           const { attributes } = attribute;
           if (typeof attributes.style === "string") {
             const diffAsStr = JSON.stringify(attribute.styleDiff);
@@ -9800,8 +9793,13 @@ class MutationBuffer {
         case "attributes": {
           const target = m.target;
           let attributeName = m.attributeName;
-          let value = target.getAttribute(attributeName);
-          if (value === null && m.oldValue === null) {
+          let value = m.target.getAttribute(attributeName);
+          const propValue = target[attributeName];
+          const isPhantomAttributeMutation = value === null && !target.hasAttribute(attributeName) && m.oldValue !== null && (propValue === "" || propValue === null || typeof propValue === "undefined");
+          if (isPhantomAttributeMutation && !isIncludeAttribute(attributeName, this.includeAttribute)) {
+            return;
+          }
+          if (isExcludeAttribute(attributeName, this.excludeAttribute)) {
             return;
           }
           if (attributeName === "value") {
@@ -9839,14 +9837,21 @@ class MutationBuffer {
           if (attributeName === "type" && target.tagName === "INPUT" && (m.oldValue || "").toLowerCase() === "password") {
             target.setAttribute("data-rr-is-password", "true");
           }
-          if (!isIgnoreAttribute(target.tagName, attributeName) && // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-          !shouldIgnoreAttribute(this.ignoreAttribute, attributeName)) {
+          if (!ignoreAttribute(target.tagName, attributeName)) {
             item.attributes[attributeName] = transformAttribute(
               this.doc,
               toLowerCase(target.tagName),
               toLowerCase(attributeName),
               value
             );
+            if (value === item.attributes[attributeName] && !isIncludeAttribute(attributeName, this.includeAttribute)) {
+              delete item.attributes[attributeName];
+              if (Object.keys(item.attributes).length === 0) {
+                this.attributes = this.attributes.filter((a2) => a2 !== item);
+                this.attributeMap.delete(m.target);
+              }
+              return;
+            }
             if (attributeName === "style") {
               if (!this.unattachedDoc) {
                 try {
@@ -9959,7 +9964,8 @@ class MutationBuffer {
       "blockSelector",
       "maskTextClass",
       "maskTextSelector",
-      "ignoreAttribute",
+      "excludeAttribute",
+      "includeAttribute",
       "inlineStylesheet",
       "maskInputOptions",
       "maskTextFn",
@@ -10098,60 +10104,6 @@ function initMutationObserver(options, rootEl) {
   });
   return observer;
 }
-function initVisibilityObserver({
-  visibilityChangeCb,
-  doc,
-  mirror: mirror2,
-  sampling
-}) {
-  if (!visibilityChangeCb) {
-    return () => {
-    };
-  }
-  const observedElements = /* @__PURE__ */ new WeakMap();
-  const debounceThreshold = typeof sampling.visibility === "number" ? sampling.visibility : 50;
-  const throttledCb = throttle(
-    callbackWrapper((entry) => {
-      const target = entry.target;
-      const id = mirror2.getId(target);
-      const isVisible = entry.isIntersecting || entry.intersectionRatio > 0;
-      if (id !== -1) {
-        visibilityChangeCb({
-          id,
-          isVisible,
-          visibilityRatio: entry.intersectionRatio
-        });
-      }
-    }),
-    debounceThreshold,
-    { leading: sampling.visibility !== false, trailing: true }
-  );
-  const observer = new IntersectionObserver((entries) => {
-    entries.forEach((entry) => {
-      const target = entry.target;
-      if (observedElements.has(target)) {
-        throttledCb(entry);
-      } 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,
@@ -10431,6 +10383,20 @@ function initInputObserver({
   }
   function cbWithDedup(target, v2) {
     const lastInputValue = lastInputValueMap.get(target);
+    const el = target;
+    const hasPlaceholder = el.hasAttribute("placeholder");
+    const isEmpty = el.value === "";
+    const isDefaultEmpty = typeof el.defaultValue === "string" ? el.defaultValue === "" : true;
+    const isNonUser = !v2.userTriggered;
+    const isRepeatEmpty = !lastInputValue || lastInputValue.text === "";
+    const isLikelyPhantom = hasPlaceholder && isEmpty && isDefaultEmpty && isRepeatEmpty && isNonUser && !v2.isChecked && el.type !== "hidden" && INPUT_TAGS.includes(el.tagName);
+    const isRenderDrivenTextInput = el.tagName === "INPUT" && el.type === "text" && !v2.userTriggered && v2.text === el.defaultValue && !lastInputValue && el.hasAttribute("placeholder");
+    const isValueFromDefault = !v2.userTriggered && el.value === el.defaultValue && !lastInputValue && el.hasAttribute("placeholder") && !v2.isChecked && el.type !== "hidden" && INPUT_TAGS.includes(el.tagName);
+    const isPhantomCheckbox = el.type === "checkbox" && !v2.userTriggered && !v2.isChecked && !lastInputValue;
+    const isPhantomRadio = el.type === "radio" && !v2.userTriggered && !v2.isChecked && !lastInputValue;
+    if (isLikelyPhantom || isRenderDrivenTextInput || isValueFromDefault || isPhantomCheckbox || isPhantomRadio) {
+      return;
+    }
     if (!lastInputValue || lastInputValue.text !== v2.text || lastInputValue.isChecked !== v2.isChecked) {
       lastInputValueMap.set(target, v2);
       const id = mirror2.getId(target);
@@ -10968,7 +10934,6 @@ function initCustomElementObserver({
 function mergeHooks(o2, hooks) {
   const {
     mutationCb,
-    visibilityChangeCb,
     mousemoveCb,
     mouseInteractionCb,
     scrollCb,
@@ -10988,12 +10953,6 @@ 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);
@@ -11086,7 +11045,6 @@ function initObservers(o2, hooks = {}) {
   });
   const inputHandler = initInputObserver(o2);
   const mediaInteractionHandler = initMediaInteractionObserver(o2);
-  const visibleHandler = initVisibilityObserver(o2);
   let styleSheetObserver = () => {
   };
   let adoptedStyleSheetObserver = () => {
@@ -11116,7 +11074,6 @@ function initObservers(o2, hooks = {}) {
   return callbackWrapper(() => {
     mutationBuffers.forEach((b) => b.reset());
     mutationObserver == null ? void 0 : mutationObserver.disconnect();
-    visibleHandler();
     mousemoveHandler();
     mouseInteractionHandler();
     scrollHandler();
@@ -12167,6 +12124,7 @@ let wrappedEmit;
 let takeFullSnapshot$1;
 let canvasManager;
 let recording = false;
+const preRecordingCustomEvents = [];
 try {
   if (Array.from([1], (x2) => x2 * 2)[0] !== 2) {
     const cleanFrame = document.createElement("iframe");
@@ -12183,12 +12141,12 @@ function record(options = {}) {
     emit,
     checkoutEveryNms,
     checkoutEveryNth,
-    checkoutEveryEvc,
     blockClass = "rr-block",
     blockSelector = null,
     ignoreClass = "rr-ignore",
     ignoreSelector = null,
-    ignoreAttribute = "rr-ignore",
+    excludeAttribute: _excludeAttribute,
+    includeAttribute: _includeAttribute,
     maskTextClass = "rr-mask",
     maskTextSelector = null,
     inlineStylesheet = true,
@@ -12206,6 +12164,7 @@ function record(options = {}) {
     recordCanvas = false,
     recordCrossOriginIframes = false,
     recordAfter = options.recordAfter === "DOMContentLoaded" ? options.recordAfter : "load",
+    flushCustomQueue = options.flushCustomQueue !== void 0 ? options.flushCustomQueue : "after",
     userTriggeredOnInput = false,
     collectFonts = false,
     inlineImages = false,
@@ -12237,6 +12196,8 @@ function record(options = {}) {
     sampling.mousemove = mousemoveWait;
   }
   mirror.reset();
+  const excludeAttribute = _excludeAttribute === void 0 ? /^$a/ : _excludeAttribute;
+  const includeAttribute = _includeAttribute === void 0 ? /.+/i : _includeAttribute;
   const maskInputOptions = maskAllInputs === true ? {
     color: true,
     date: true,
@@ -12313,8 +12274,7 @@ function record(options = {}) {
       incrementalSnapshotCount++;
       const exceedCount = checkoutEveryNth && incrementalSnapshotCount >= checkoutEveryNth;
       const exceedTime = checkoutEveryNms && e2.timestamp - lastFullSnapshotEvent.timestamp > checkoutEveryNms;
-      const isVisibilityChanged = checkoutEveryEvc && e2.type === EventType.IncrementalSnapshot && e2.data.source === IncrementalSource.VisibilityChange;
-      if (exceedCount || exceedTime || isVisibilityChanged) {
+      if (exceedCount || exceedTime) {
         takeFullSnapshot$1(true);
       }
     }
@@ -12387,7 +12347,8 @@ function record(options = {}) {
       blockSelector,
       maskTextClass,
       maskTextSelector,
-      ignoreAttribute,
+      excludeAttribute,
+      includeAttribute,
       inlineStylesheet,
       maskInputOptions,
       dataURLOptions,
@@ -12429,7 +12390,8 @@ function record(options = {}) {
       blockSelector,
       maskTextClass,
       maskTextSelector,
-      ignoreAttribute,
+      excludeAttribute,
+      includeAttribute,
       inlineStylesheet,
       maskAllInputs: maskInputOptions,
       maskTextFn,
@@ -12485,15 +12447,6 @@ function record(options = {}) {
       return callbackWrapper(initObservers)(
         {
           mutationCb: wrappedMutationEmit,
-          visibilityChangeCb: (v2) => {
-            wrappedEmit({
-              type: EventType.IncrementalSnapshot,
-              data: {
-                source: IncrementalSource.VisibilityChange,
-                ...v2
-              }
-            });
-          },
           mousemoveCb: (positions, source) => wrappedEmit({
             type: EventType.IncrementalSnapshot,
             data: {
@@ -12575,7 +12528,8 @@ function record(options = {}) {
           ignoreSelector,
           maskTextClass,
           maskTextSelector,
-          ignoreAttribute,
+          excludeAttribute,
+          includeAttribute,
           maskInputOptions,
           inlineStylesheet,
           sampling,
@@ -12621,9 +12575,15 @@ function record(options = {}) {
       }
     });
     const init = () => {
+      if (flushCustomQueue === "before") {
+        flushPreRecordingEvents();
+      }
       takeFullSnapshot$1();
       handlers.push(observe(document));
       recording = true;
+      if (flushCustomQueue === "after") {
+        flushPreRecordingEvents();
+      }
     };
     if (document.readyState === "interactive" || document.readyState === "complete") {
       init();
@@ -12652,6 +12612,7 @@ function record(options = {}) {
       );
     }
     return () => {
+      flushPreRecordingEvents();
       handlers.forEach((h) => h());
       processedNodeManager.destroy();
       recording = false;
@@ -12661,17 +12622,26 @@ function record(options = {}) {
     console.warn(error);
   }
 }
-record.addCustomEvent = (tag, payload) => {
-  if (!recording) {
-    throw new Error("please add custom event after start recording");
+function flushPreRecordingEvents() {
+  for (const e2 of preRecordingCustomEvents) {
+    wrappedEmit(e2);
   }
-  wrappedEmit({
+  preRecordingCustomEvents.length = 0;
+}
+record.addCustomEvent = (tag, payload) => {
+  const customEvent = {
     type: EventType.Custom,
     data: {
       tag,
       payload
     }
-  });
+  };
+  if (!recording) {
+    console.warn(`[rrweb] CustomEvent buffered before recording start: ${tag}`);
+    preRecordingCustomEvents.push(customEvent);
+    return;
+  }
+  wrappedEmit(customEvent);
 };
 record.freezePage = () => {
   mutationBuffers.forEach((buf) => buf.freeze());