clintplay-react-native 0.2.0 → 0.2.1

package/dist/index.mjs

@@ -147,6 +147,8 @@ var Transport = class {
     return h;
   }
 };
+var SNAPSHOT_AFTER_INTERACTION_MS = 400;
+var UNCHANGED_RESEND_MS = 3e4;
 function mapAppState(state2) {
   if (state2 === "active") return "active";
   if (state2 === "background") return "background";
@@ -159,16 +161,25 @@ function createRecorder(deps) {
   const cleanups = [];
   let started = false;
   let wireframeTimer = null;
-  function takeWireframeSnapshot() {
+  let interactionTimer = null;
+  let lastNodesKey = null;
+  let lastSentAt = 0;
+  function takeWireframeSnapshot(force = false) {
     if (!deps.captureViewHierarchy) return;
     try {
       const raw = deps.captureViewHierarchy();
       if (!raw || typeof raw !== "string") return;
       const payload = JSON.parse(raw);
       if (payload && Array.isArray(payload.nodes)) {
+        if (force && payload.nodes.length === 0) return;
+        const key = JSON.stringify(payload.nodes);
+        const now = deps.now();
+        if (!force && key === lastNodesKey && now - lastSentAt < UNCHANGED_RESEND_MS) return;
+        lastNodesKey = key;
+        lastSentAt = now;
         deps.onEvent({
           type: "wireframe",
-          ts: deps.now(),
+          ts: now,
           version: typeof payload.version === "number" ? payload.version : 1,
           nodes: payload.nodes
         });
@@ -176,6 +187,20 @@ function createRecorder(deps) {
     } catch {
     }
   }
+  function scheduleWireframeSnapshot() {
+    if (!deps.captureWireframe || !deps.captureViewHierarchy) return;
+    if (interactionTimer) clearTimeout(interactionTimer);
+    interactionTimer = setTimeout(() => {
+      interactionTimer = null;
+      takeWireframeSnapshot();
+    }, SNAPSHOT_AFTER_INTERACTION_MS);
+  }
+  function cancelScheduledSnapshot() {
+    if (interactionTimer) {
+      clearTimeout(interactionTimer);
+      interactionTimer = null;
+    }
+  }
   function startWireframeTimer() {
     if (!deps.captureWireframe || !deps.captureViewHierarchy) return;
     if (wireframeTimer) return;
@@ -193,7 +218,11 @@ function createRecorder(deps) {
     }
   }
   return {
-    takeWireframeSnapshot,
+    takeWireframeSnapshot: () => takeWireframeSnapshot(),
+    scheduleWireframeSnapshot,
+    resetWireframeBaseline() {
+      lastNodesKey = null;
+    },
     start() {
       if (started) return;
       started = true;
@@ -217,7 +246,9 @@ function createRecorder(deps) {
           if (mapped === "active") {
             startWireframeTimer();
           } else {
+            if (wireframeTimer) takeWireframeSnapshot(true);
             stopWireframeTimer();
+            cancelScheduledSnapshot();
           }
         }
       });
@@ -275,6 +306,7 @@ function createRecorder(deps) {
       if (!started) return;
       started = false;
       stopWireframeTimer();
+      cancelScheduledSnapshot();
       for (const fn of cleanups.splice(0)) {
         try {
           fn();
@@ -879,7 +911,7 @@ function captureViewHierarchy() {
 }
 
 // package.json
-var version = "0.2.0";
+var version = "0.2.1";
 var CLINTPLAY_MASK_ID = "clintplay-mask";
 var ClintplayMaskView = React5.forwardRef(function ClintplayMaskView2({ children, testID, ...rest }, ref) {
   return /* @__PURE__ */ jsx(
@@ -1279,10 +1311,18 @@ function init(rawConfig) {
     buffer,
     session,
     transport,
-    recorder: { start: () => {
-    }, stop: () => {
-    }, takeWireframeSnapshot: () => {
-    } },
+    recorder: {
+      start: () => {
+      },
+      stop: () => {
+      },
+      takeWireframeSnapshot: () => {
+      },
+      scheduleWireframeSnapshot: () => {
+      },
+      resetWireframeBaseline: () => {
+      }
+    },
     networkInterceptor: null,
     consoleInterceptor: null,
     offlineQueue: rawConfig.asyncStorage ? new OfflineQueue({
@@ -1327,17 +1367,16 @@ function init(rawConfig) {
       captureConsoleLog: rawConfig.captureConsoleLog
     });
   }
-  buffer.push({
-    type: "meta",
-    ts: Date.now(),
-    sessionId: session.current().sessionId,
-    sdkVersion: SDK_VERSION,
-    device: deviceInfo()
-  });
+  pushSessionMeta(local);
   recorder.start();
   local.networkInterceptor?.start();
   local.consoleInterceptor?.start();
-  _setSink(onEvent);
+  _setSink((event) => {
+    onEvent(event);
+    if (event.type === "navigation" || event.type === "touch" && event.kind === "end") {
+      recorder.scheduleWireframeSnapshot();
+    }
+  });
   if (local.offlineQueue) {
     const q = local.offlineQueue;
     void q.hydrate().then(() => q.drain()).catch(
@@ -1348,13 +1387,7 @@ function init(rawConfig) {
     if (local.session.isStale()) {
       await flushOnce(local);
       if (local.session.rotateIfStale()) {
-        local.buffer.push({
-          type: "meta",
-          ts: Date.now(),
-          sessionId: local.session.current().sessionId,
-          sdkVersion: SDK_VERSION,
-          device: deviceInfo()
-        });
+        pushSessionMeta(local);
       }
     }
     void flushOnce(local);
@@ -1373,13 +1406,7 @@ function identify(userId, traits) {
   }
   const rotated = state.session.setUser(normalizedUserId);
   if (rotated) {
-    state.buffer.push({
-      type: "meta",
-      ts: Date.now(),
-      sessionId: state.session.current().sessionId,
-      sdkVersion: SDK_VERSION,
-      device: deviceInfo()
-    });
+    pushSessionMeta(state);
   }
   state.buffer.push({
     type: "identify",
@@ -1397,13 +1424,17 @@ function reset(options) {
   if (options?.clearOfflineQueue && state.offlineQueue) {
     void state.offlineQueue.clear();
   }
-  state.buffer.push({
+  pushSessionMeta(state);
+}
+function pushSessionMeta(s) {
+  s.buffer.push({
     type: "meta",
     ts: Date.now(),
-    sessionId: state.session.current().sessionId,
+    sessionId: s.session.current().sessionId,
     sdkVersion: SDK_VERSION,
     device: deviceInfo()
   });
+  s.recorder.resetWireframeBaseline();
 }
 function trackScreen(path, from) {
   if (!state?.active) return;
@@ -1414,9 +1445,7 @@ function trackScreen(path, from) {
     ...from ? { from } : {}
   });
   state.session.touch();
-  if (state.config.captureWireframe) {
-    state.recorder.takeWireframeSnapshot();
-  }
+  state.recorder.scheduleWireframeSnapshot();
 }
 function reportError(err) {
   if (!state?.active) return;