@appsurify-testmap/rrweb-record 2.1.1-alpha.7 → 2.1.2-alpha.1

package/dist/rrweb-record.cjs

@@ -10470,6 +10470,8 @@ function initViewportResizeObserver({ viewportResizeCb }, { win }) {
 }
 const INPUT_TAGS = ["INPUT", "TEXTAREA", "SELECT"];
 const lastInputValueMap = /* @__PURE__ */ new WeakMap();
+const FINALIZING_KEYS = ["Enter", "Tab", "Escape", "ArrowDown", "ArrowUp", "Delete"];
+const lastKeyInputValueMap = /* @__PURE__ */ new WeakMap();
 function initInputObserver({
   inputCb,
   doc,
@@ -10542,6 +10544,22 @@ function initInputObserver({
     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) {
+      console.debug(
+        `[${nowTimestamp()}] [rrweb:record/observer] ⛔ phantom input ignored`,
+        {
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-call
+          node: index.describeNode(el),
+          tag: el.tagName,
+          nodeType: el.nodeType,
+          attribute: el.attributes,
+          value: el.value,
+          isLikelyPhantom,
+          isRenderDrivenTextInput,
+          isValueFromDefault,
+          isPhantomCheckbox,
+          isPhantomRadio
+        }
+      );
       return;
     }
     if (!lastInputValue || lastInputValue.text !== v2.text || lastInputValue.isChecked !== v2.isChecked) {
@@ -10557,6 +10575,61 @@ function initInputObserver({
   const handlers = events.map(
     (eventName) => on(eventName, callbackWrapper(eventHandler), doc)
   );
+  const keyboardHandler = (event) => {
+    const target = getEventTarget(event);
+    if (!target || !target.tagName) return;
+    if (sampling.input === "all") {
+      eventHandler(event);
+      return;
+    }
+    const tag = target.tagName;
+    const key = event.key;
+    const isFinalizingKey = FINALIZING_KEYS.includes(key);
+    const isTextarea = tag === "TEXTAREA";
+    const isFocused = doc.activeElement === target;
+    const valueNow = target.value;
+    const valueBefore = lastKeyInputValueMap.get(target);
+    lastKeyInputValueMap.set(target, valueNow);
+    if (!isFocused) {
+      eventHandler(event);
+      return;
+    }
+    if (isFinalizingKey) {
+      if (!isTextarea) {
+        eventHandler(event);
+        return;
+      }
+      let lastValue = valueBefore ?? "";
+      let unchangedCount = 0;
+      const REQUIRED_STABLE_FRAMES = 2;
+      const checkFinal = () => {
+        const currentValue = target.value;
+        const stillFocused = doc.activeElement === target;
+        const changed = currentValue !== lastValue;
+        if (!stillFocused) {
+          eventHandler(event);
+          return;
+        }
+        if (!changed) {
+          unchangedCount++;
+          if (unchangedCount >= REQUIRED_STABLE_FRAMES) {
+            eventHandler(event);
+            return;
+          }
+        } else {
+          unchangedCount = 0;
+          lastValue = currentValue;
+        }
+        requestAnimationFrame(checkFinal);
+      };
+      requestAnimationFrame(checkFinal);
+      return;
+    }
+  };
+  handlers.push(
+    on("keydown", callbackWrapper(keyboardHandler), doc)
+    // on('keypress', callbackWrapper(keyboardHandler), doc),
+  );
   const currentWindow = doc.defaultView;
   if (!currentWindow) {
     return () => {
@@ -12510,13 +12583,14 @@ class VisibilityManager {
     if (this.rafId) cancelAnimationFrame(this.rafId);
   }
 }
+const version$1 = "2.1.2-alpha.1";
 let wrappedEmit;
 let takeFullSnapshot$1;
 let canvasManager;
 let visibilityManager;
 let recording = false;
 const customEventQueue = [];
-let flushCustomEventQueue;
+let flushCustomEventQueue$1;
 function waitForDOMStabilization(win) {
   const maxWaitMs = 5e3;
   return new Promise((resolve2) => {
@@ -12886,7 +12960,7 @@ function record(options = {}) {
         mirror.getId(document)
       );
   };
-  flushCustomEventQueue = () => {
+  flushCustomEventQueue$1 = () => {
     for (const e2 of customEventQueue) {
       wrappedEmit(e2);
     }
@@ -13029,37 +13103,34 @@ function record(options = {}) {
     });
     const init = () => {
       if (flushCustomEvent === "before") {
-        flushCustomEventQueue();
+        flushCustomEventQueue$1();
       }
       takeFullSnapshot$1();
       handlers.push(observe(document));
       recording = true;
       if (flushCustomEvent === "after") {
-        flushCustomEventQueue();
+        flushCustomEventQueue$1();
       }
     };
     const runInit = async () => {
       if (flushCustomEvent === "before") {
-        flushCustomEventQueue();
+        flushCustomEventQueue$1();
       }
       if (recordAfter === "DOMContentStabilized") {
-        console.log(`[rrweb] 🟢 Waiting for DOM stabilization...`);
+        console.debug(`[${nowTimestamp()}] [rrweb:record] 🟢 Waiting for DOM stabilization...`);
         await waitForDOMStabilization(window);
-        console.log(`[rrweb] ✅ DOM stabilized, starting recording`);
+        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();
+        flushCustomEventQueue$1();
       }
     };
     if (document.readyState === "interactive" || document.readyState === "complete") {
-      if (recordAfter === "DOMContentStabilized") {
-        void runInit();
-      } else {
-        init();
-      }
+      init();
     } else {
       handlers.push(
         on("DOMContentLoaded", () => {
@@ -13067,9 +13138,7 @@ function record(options = {}) {
             type: EventType.DomContentLoaded,
             data: {}
           });
-          if (recordAfter === "DOMContentLoaded" || recordAfter === "DOMContentStabilized") {
-            void runInit();
-          }
+          if (recordAfter === "DOMContentLoaded") init();
         })
       );
       handlers.push(
@@ -13080,14 +13149,14 @@ function record(options = {}) {
               type: EventType.Load,
               data: {}
             });
-            if (recordAfter === "load") void runInit();
+            if (recordAfter === "load") init();
           },
           window
         )
       );
     }
     return () => {
-      flushCustomEventQueue();
+      flushCustomEventQueue$1();
       handlers.forEach((h) => h());
       processedNodeManager.destroy();
       recording = false;
@@ -13097,10 +13166,11 @@ function record(options = {}) {
     console.warn(error);
   }
 }
+record.getVersion = () => version$1;
 record.isRecording = () => recording;
 record.flushCustomEventQueue = () => {
   console.warn(`[rrweb] CustomEvent flushing: ${customEventQueue.length} events`);
-  flushCustomEventQueue();
+  flushCustomEventQueue$1();
 };
 record.addCustomEvent = (tag, payload) => {
   const customEvent = {