impl #81 custom event

This is the record side impl of custom event, according to the
issue, we may also add first-class support for the custom event
tag like display color labels in the replayer-ui.

test/__snapshots__/record.test.ts.snap

@@ -245,3 +245,89 @@ exports[`async-checkout 1`] = `
   }
 ]"
 `;
+
+exports[`custom-event 1`] = `
+"[
+  {
+    \\"type\\": 4,
+    \\"data\\": {
+      \\"href\\": \\"about:blank\\",
+      \\"width\\": 800,
+      \\"height\\": 600
+    }
+  },
+  {
+    \\"type\\": 2,
+    \\"data\\": {
+      \\"node\\": {
+        \\"type\\": 0,
+        \\"childNodes\\": [
+          {
+            \\"type\\": 2,
+            \\"tagName\\": \\"html\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"head\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [],
+                \\"id\\": 3
+              },
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"body\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n          \\",
+                    \\"id\\": 5
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"input\\",
+                    \\"attributes\\": {
+                      \\"type\\": \\"text\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 6
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n        \\\\n      \\\\n    \\",
+                    \\"id\\": 7
+                  }
+                ],
+                \\"id\\": 4
+              }
+            ],
+            \\"id\\": 2
+          }
+        ],
+        \\"id\\": 1
+      },
+      \\"initialOffset\\": {
+        \\"left\\": 0,
+        \\"top\\": 0
+      }
+    }
+  },
+  {
+    \\"type\\": 5,
+    \\"data\\": {
+      \\"tag\\": \\"tag1\\",
+      \\"payload\\": 1
+    }
+  },
+  {
+    \\"type\\": 5,
+    \\"data\\": {
+      \\"tag\\": \\"tag2\\",
+      \\"payload\\": {
+        \\"a\\": \\"b\\"
+      }
+    }
+  }
+]"
+`;

test/record.test.ts

@@ -23,6 +23,7 @@ interface ISuite extends Suite {
 interface IWindow extends Window {
   rrweb: {
     record: (options: recordOptions) => listenerHandler | undefined;
+    addCustomEvent<T>(tag: string, payload: T): void;
   };
   emit: (e: eventWithTime) => undefined;
 }
@@ -180,4 +181,19 @@ describe('record', function(this: ISuite) {
     await this.page.waitFor(50);
     assertSnapshot(this.events, __filename, 'async-checkout');
   });
+
+  it('can add custom event', async () => {
+    await this.page.evaluate(() => {
+      const { record, addCustomEvent } = (window as IWindow).rrweb;
+      record({
+        emit: (window as IWindow).emit,
+      });
+      addCustomEvent<number>('tag1', 1);
+      addCustomEvent<{ a: string }>('tag2', {
+        a: 'b',
+      });
+    });
+    await this.page.waitFor(50);
+    assertSnapshot(this.events, __filename, 'custom-event');
+  });
 });