@appsurify-testmap/rrweb 2.1.0-alpha.2 → 2.1.0-alpha.5

package/dist/rrweb.d.cts

@@ -8,11 +8,12 @@ import { DocumentDimension } from '@appsurify-testmap/rrweb-types';
 import { Emitter } from '@appsurify-testmap/rrweb-types';
 import { EventType } from '@appsurify-testmap/rrweb-types';
 import { eventWithTime } from '@appsurify-testmap/rrweb-types';
+import { excludeAttribute } from '@appsurify-testmap/rrweb-types';
 import { Handler } from '@appsurify-testmap/rrweb-types';
 import { hookResetter } from '@appsurify-testmap/rrweb-types';
 import { hooksParam } from '@appsurify-testmap/rrweb-types';
-import { ignoreAttribute } from '@appsurify-testmap/rrweb-types';
 import { IMirror } from '@appsurify-testmap/rrweb-types';
+import { includeAttribute } from '@appsurify-testmap/rrweb-types';
 import { IncrementalSource } from '@appsurify-testmap/rrweb-types';
 import { IWindow } from '@appsurify-testmap/rrweb-types';
 import { KeepIframeSrcFn } from '@appsurify-testmap/rrweb-types';
@@ -119,7 +120,7 @@ export declare let mirror: DeprecatedMirror;
 
 export { MouseInteractions }
 
-declare let nowTimestamp: () => number;
+declare function nowTimestamp(): number;
 
 declare function on(type: string, fn: EventListenerOrEventListenerObject, target?: Document | IWindow): listenerHandler;
 
@@ -223,14 +224,14 @@ export declare type recordOptions<T> = {
     emit?: (e: T, isCheckout?: boolean) => void;
     checkoutEveryNth?: number;
     checkoutEveryNms?: number;
-    checkoutEveryEvc?: boolean;
     blockClass?: blockClass;
     blockSelector?: string;
     ignoreClass?: string;
     ignoreSelector?: string;
     maskTextClass?: maskTextClass;
     maskTextSelector?: string;
-    ignoreAttribute?: ignoreAttribute;
+    excludeAttribute?: excludeAttribute;
+    includeAttribute?: includeAttribute;
     maskAllInputs?: boolean;
     maskInputOptions?: MaskInputOptions;
     maskInputFn?: MaskInputFn;
@@ -431,6 +432,7 @@ declare namespace utils {
         on,
         throttle,
         hookSetter,
+        nowTimestamp,
         getWindowScroll,
         getWindowHeight,
         getWindowWidth,
@@ -455,7 +457,6 @@ declare namespace utils {
         shadowHostInDom,
         inDom,
         mirror as _mirror,
-        nowTimestamp,
         AppendedIframe,
         StyleSheetMirror
     }

package/dist/rrweb.d.ts

@@ -8,11 +8,12 @@ import { DocumentDimension } from '@appsurify-testmap/rrweb-types';
 import { Emitter } from '@appsurify-testmap/rrweb-types';
 import { EventType } from '@appsurify-testmap/rrweb-types';
 import { eventWithTime } from '@appsurify-testmap/rrweb-types';
+import { excludeAttribute } from '@appsurify-testmap/rrweb-types';
 import { Handler } from '@appsurify-testmap/rrweb-types';
 import { hookResetter } from '@appsurify-testmap/rrweb-types';
 import { hooksParam } from '@appsurify-testmap/rrweb-types';
-import { ignoreAttribute } from '@appsurify-testmap/rrweb-types';
 import { IMirror } from '@appsurify-testmap/rrweb-types';
+import { includeAttribute } from '@appsurify-testmap/rrweb-types';
 import { IncrementalSource } from '@appsurify-testmap/rrweb-types';
 import { IWindow } from '@appsurify-testmap/rrweb-types';
 import { KeepIframeSrcFn } from '@appsurify-testmap/rrweb-types';
@@ -119,7 +120,7 @@ export declare let mirror: DeprecatedMirror;
 
 export { MouseInteractions }
 
-declare let nowTimestamp: () => number;
+declare function nowTimestamp(): number;
 
 declare function on(type: string, fn: EventListenerOrEventListenerObject, target?: Document | IWindow): listenerHandler;
 
@@ -223,14 +224,14 @@ export declare type recordOptions<T> = {
     emit?: (e: T, isCheckout?: boolean) => void;
     checkoutEveryNth?: number;
     checkoutEveryNms?: number;
-    checkoutEveryEvc?: boolean;
     blockClass?: blockClass;
     blockSelector?: string;
     ignoreClass?: string;
     ignoreSelector?: string;
     maskTextClass?: maskTextClass;
     maskTextSelector?: string;
-    ignoreAttribute?: ignoreAttribute;
+    excludeAttribute?: excludeAttribute;
+    includeAttribute?: includeAttribute;
     maskAllInputs?: boolean;
     maskInputOptions?: MaskInputOptions;
     maskInputFn?: MaskInputFn;
@@ -431,6 +432,7 @@ declare namespace utils {
         on,
         throttle,
         hookSetter,
+        nowTimestamp,
         getWindowScroll,
         getWindowHeight,
         getWindowWidth,
@@ -455,7 +457,6 @@ declare namespace utils {
         shadowHostInDom,
         inDom,
         mirror as _mirror,
-        nowTimestamp,
         AppendedIframe,
         StyleSheetMirror
     }

package/dist/rrweb.js

@@ -890,28 +890,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 isExcludeAttribute(name, exclude) {
+  return typeof exclude === "string" ? name.includes(exclude) : exclude.test(name);
 }
 function _isBlockedElement(element, blockClass, blockSelector) {
   try {
@@ -1042,7 +1028,8 @@ function serializeNode(n2, options) {
     mirror: mirror2,
     blockClass,
     blockSelector,
-    ignoreAttribute,
+    excludeAttribute,
+    includeAttribute,
     needsMask,
     inlineStylesheet,
     maskInputOptions = {},
@@ -1088,7 +1075,8 @@ function serializeNode(n2, options) {
         doc,
         blockClass,
         blockSelector,
-        ignoreAttribute,
+        excludeAttribute,
+        includeAttribute,
         inlineStylesheet,
         maskInputOptions,
         maskInputFn,
@@ -1166,7 +1154,8 @@ function serializeElementNode(n2, options) {
     doc,
     blockClass,
     blockSelector,
-    ignoreAttribute,
+    excludeAttribute,
+    includeAttribute,
     inlineStylesheet,
     maskInputOptions = {},
     maskInputFn,
@@ -1180,7 +1169,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;
@@ -1394,7 +1398,8 @@ function serializeNodeWithId(n2, options) {
     blockSelector,
     maskTextClass,
     maskTextSelector,
-    ignoreAttribute,
+    excludeAttribute,
+    includeAttribute,
     skipChild = false,
     inlineStylesheet = true,
     maskInputOptions = {},
@@ -1429,7 +1434,8 @@ function serializeNodeWithId(n2, options) {
     mirror: mirror2,
     blockClass,
     blockSelector,
-    ignoreAttribute,
+    excludeAttribute,
+    includeAttribute,
     needsMask,
     inlineStylesheet,
     maskInputOptions,
@@ -1482,7 +1488,8 @@ function serializeNodeWithId(n2, options) {
       needsMask,
       maskTextClass,
       maskTextSelector,
-      ignoreAttribute,
+      excludeAttribute,
+      includeAttribute,
       skipChild,
       inlineStylesheet,
       maskInputOptions,
@@ -1542,7 +1549,8 @@ function serializeNodeWithId(n2, options) {
             needsMask,
             maskTextClass,
             maskTextSelector,
-            ignoreAttribute,
+            excludeAttribute,
+            includeAttribute,
             skipChild: false,
             inlineStylesheet,
             maskInputOptions,
@@ -1584,7 +1592,8 @@ function serializeNodeWithId(n2, options) {
             needsMask,
             maskTextClass,
             maskTextSelector,
-            ignoreAttribute,
+            excludeAttribute,
+            includeAttribute,
             skipChild: false,
             inlineStylesheet,
             maskInputOptions,
@@ -1622,7 +1631,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,
@@ -1682,7 +1692,8 @@ function snapshot(n2, options) {
     blockSelector,
     maskTextClass,
     maskTextSelector,
-    ignoreAttribute,
+    excludeAttribute,
+    includeAttribute,
     skipChild: false,
     inlineStylesheet,
     maskInputOptions,
@@ -10917,9 +10928,8 @@ function hookSetter(target, key, d, isRevoked, win = window) {
   );
   return () => hookSetter(target, key, original || {}, true);
 }
-let nowTimestamp = Date.now;
-if (!/* @__PURE__ */ /[1-9][0-9]{12}/.test(Date.now().toString())) {
-  nowTimestamp = () => (/* @__PURE__ */ new Date()).getTime();
+function nowTimestamp() {
+  return Math.round(performance.timeOrigin + performance.now());
 }
 function getWindowScroll(win = window) {
   var _a2, _b, _c, _d;
@@ -11200,9 +11210,7 @@ const utils = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
   isSerializedStylesheet,
   iterateResolveTree,
   legacy_isTouchEvent,
-  get nowTimestamp() {
-    return nowTimestamp;
-  },
+  nowTimestamp,
   on,
   polyfill: polyfill$1,
   queueToResolveTrees,
@@ -11238,7 +11246,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) => {
@@ -11421,7 +11428,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");
@@ -11485,7 +11493,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,
@@ -11687,6 +11696,14 @@ class MutationBuffer {
           const target = m.target;
           let attributeName = m.attributeName;
           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") {
             const type = getInputType(target);
             value = maskInputValue({
@@ -11722,13 +11739,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)) {
+          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 {
@@ -11844,7 +11869,8 @@ class MutationBuffer {
       "blockSelector",
       "maskTextClass",
       "maskTextSelector",
-      "ignoreAttribute",
+      "excludeAttribute",
+      "includeAttribute",
       "inlineStylesheet",
       "maskInputOptions",
       "maskTextFn",
@@ -11983,60 +12009,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,
@@ -12316,6 +12288,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);
@@ -12853,7 +12839,6 @@ function initCustomElementObserver({
 function mergeHooks(o2, hooks) {
   const {
     mutationCb,
-    visibilityChangeCb,
     mousemoveCb,
     mouseInteractionCb,
     scrollCb,
@@ -12873,12 +12858,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);
@@ -12971,7 +12950,6 @@ function initObservers(o2, hooks = {}) {
   });
   const inputHandler = initInputObserver(o2);
   const mediaInteractionHandler = initMediaInteractionObserver(o2);
-  const visibleHandler = initVisibilityObserver(o2);
   let styleSheetObserver = () => {
   };
   let adoptedStyleSheetObserver = () => {
@@ -13001,7 +12979,6 @@ function initObservers(o2, hooks = {}) {
   return callbackWrapper(() => {
     mutationBuffers.forEach((b) => b.reset());
     mutationObserver == null ? void 0 : mutationObserver.disconnect();
-    visibleHandler();
     mousemoveHandler();
     mouseInteractionHandler();
     scrollHandler();
@@ -14088,12 +14065,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,
@@ -14142,6 +14119,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,
@@ -14218,8 +14197,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);
       }
     }
@@ -14292,7 +14270,8 @@ function record(options = {}) {
       blockSelector,
       maskTextClass,
       maskTextSelector,
-      ignoreAttribute,
+      excludeAttribute,
+      includeAttribute,
       inlineStylesheet,
       maskInputOptions,
       dataURLOptions,
@@ -14334,7 +14313,8 @@ function record(options = {}) {
       blockSelector,
       maskTextClass,
       maskTextSelector,
-      ignoreAttribute,
+      excludeAttribute,
+      includeAttribute,
       inlineStylesheet,
       maskAllInputs: maskInputOptions,
       maskTextFn,
@@ -14390,15 +14370,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: {
@@ -14480,7 +14451,8 @@ function record(options = {}) {
           ignoreSelector,
           maskTextClass,
           maskTextSelector,
-          ignoreAttribute,
+          excludeAttribute,
+          includeAttribute,
           maskInputOptions,
           inlineStylesheet,
           sampling,