add checkout config to recorder (#36)

* add checkout config to recorder

* add test cases for checkout feature and extract assertSnapshot method

src/record/index.ts

@@ -18,16 +18,68 @@ function wrapEvent(e: event): eventWithTime {
 }
 
 function record(options: recordOptions = {}): listenerHandler | undefined {
-  const { emit } = options;
+  const { emit, checkoutEveryNms, checkoutEveryNth } = options;
   // runtime checks for user options
   if (!emit) {
     throw new Error('emit function is required');
   }
+
+  let lastFullSnapshotEvent: eventWithTime;
+  let incrementalSnapshotCount = 0;
+  const wrappedEmit = (e: eventWithTime, isCheckout?: boolean) => {
+    emit(e, isCheckout);
+    if (e.type === EventType.FullSnapshot) {
+      lastFullSnapshotEvent = e;
+      incrementalSnapshotCount = 0;
+    } else if (e.type === EventType.IncrementalSnapshot) {
+      incrementalSnapshotCount++;
+      const exceedCount =
+        checkoutEveryNth && incrementalSnapshotCount >= checkoutEveryNth;
+      const exceedTime =
+        checkoutEveryNms &&
+        e.timestamp - lastFullSnapshotEvent.timestamp > checkoutEveryNms;
+      if (exceedCount || exceedTime) {
+        takeFullSnapshot(true);
+      }
+    }
+  };
+
+  function takeFullSnapshot(isCheckout = false) {
+    wrappedEmit(
+      wrapEvent({
+        type: EventType.Meta,
+        data: {
+          href: window.location.href,
+          width: getWindowWidth(),
+          height: getWindowHeight(),
+        },
+      }),
+      isCheckout,
+    );
+    const [node, idNodeMap] = snapshot(document);
+    if (!node) {
+      return console.warn('Failed to snapshot the document');
+    }
+    mirror.map = idNodeMap;
+    wrappedEmit(
+      wrapEvent({
+        type: EventType.FullSnapshot,
+        data: {
+          node,
+          initialOffset: {
+            left: document.documentElement!.scrollLeft,
+            top: document.documentElement!.scrollTop,
+          },
+        },
+      }),
+    );
+  }
+
   try {
     const handlers: listenerHandler[] = [];
     handlers.push(
       on('DOMContentLoaded', () => {
-        emit(
+        wrappedEmit(
           wrapEvent({
             type: EventType.DomContentLoaded,
             data: {},
@@ -36,37 +88,12 @@ function record(options: recordOptions = {}): listenerHandler | undefined {
       }),
     );
     const init = () => {
-      emit(
-        wrapEvent({
-          type: EventType.Meta,
-          data: {
-            href: window.location.href,
-            width: getWindowWidth(),
-            height: getWindowHeight(),
-          },
-        }),
-      );
-      const [node, idNodeMap] = snapshot(document);
-      if (!node) {
-        return console.warn('Failed to snapshot the document');
-      }
-      mirror.map = idNodeMap;
-      emit(
-        wrapEvent({
-          type: EventType.FullSnapshot,
-          data: {
-            node,
-            initialOffset: {
-              left: document.documentElement!.scrollLeft,
-              top: document.documentElement!.scrollTop,
-            },
-          },
-        }),
-      );
+      takeFullSnapshot();
+
       handlers.push(
         initObservers({
           mutationCb: m =>
-            emit(
+            wrappedEmit(
               wrapEvent({
                 type: EventType.IncrementalSnapshot,
                 data: {
@@ -76,7 +103,7 @@ function record(options: recordOptions = {}): listenerHandler | undefined {
               }),
             ),
           mousemoveCb: positions =>
-            emit(
+            wrappedEmit(
               wrapEvent({
                 type: EventType.IncrementalSnapshot,
                 data: {
@@ -86,7 +113,7 @@ function record(options: recordOptions = {}): listenerHandler | undefined {
               }),
             ),
           mouseInteractionCb: d =>
-            emit(
+            wrappedEmit(
               wrapEvent({
                 type: EventType.IncrementalSnapshot,
                 data: {
@@ -96,7 +123,7 @@ function record(options: recordOptions = {}): listenerHandler | undefined {
               }),
             ),
           scrollCb: p =>
-            emit(
+            wrappedEmit(
               wrapEvent({
                 type: EventType.IncrementalSnapshot,
                 data: {
@@ -106,7 +133,7 @@ function record(options: recordOptions = {}): listenerHandler | undefined {
               }),
             ),
           viewportResizeCb: d =>
-            emit(
+            wrappedEmit(
               wrapEvent({
                 type: EventType.IncrementalSnapshot,
                 data: {
@@ -116,7 +143,7 @@ function record(options: recordOptions = {}): listenerHandler | undefined {
               }),
             ),
           inputCb: v =>
-            emit(
+            wrappedEmit(
               wrapEvent({
                 type: EventType.IncrementalSnapshot,
                 data: {
@@ -138,7 +165,7 @@ function record(options: recordOptions = {}): listenerHandler | undefined {
         on(
           'load',
           () => {
-            emit(
+            wrappedEmit(
               wrapEvent({
                 type: EventType.Load,
                 data: {},

src/types.ts

@@ -99,7 +99,9 @@ export type eventWithTime = event & {
 };
 
 export type recordOptions = {
-  emit?: (e: eventWithTime) => void;
+  emit?: (e: eventWithTime, isCheckout?: boolean) => void;
+  checkoutEveryNth?: number;
+  checkoutEveryNms?: number;
 };
 
 export type observerParam = {