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.

src/index.ts

@@ -1,6 +1,11 @@
-import record from './record';
+import record, { addCustomEvent } from './record';
 import { Replayer } from './replay';
 import { mirror } from './utils';
 
-export { EventType,  IncrementalSource, MouseInteractions, ReplayerEvents } from './types'
-export { record, Replayer, mirror };
+export {
+  EventType,
+  IncrementalSource,
+  MouseInteractions,
+  ReplayerEvents,
+} from './types';
+export { record, addCustomEvent, Replayer, mirror };

src/record/index.ts

@@ -17,6 +17,23 @@ function wrapEvent(e: event): eventWithTime {
   };
 }
 
+let wrappedEmit!: (e: eventWithTime, isCheckout?: boolean) => void;
+
+export function addCustomEvent<T>(tag: string, payload: T) {
+  if (!wrappedEmit) {
+    throw new Error('please add custom event after start recording');
+  }
+  wrappedEmit(
+    wrapEvent({
+      type: EventType.Custom,
+      data: {
+        tag,
+        payload,
+      },
+    }),
+  );
+}
+
 function record(options: recordOptions = {}): listenerHandler | undefined {
   const {
     emit,
@@ -34,7 +51,7 @@ function record(options: recordOptions = {}): listenerHandler | undefined {
 
   let lastFullSnapshotEvent: eventWithTime;
   let incrementalSnapshotCount = 0;
-  const wrappedEmit = (e: eventWithTime, isCheckout?: boolean) => {
+  wrappedEmit = (e: eventWithTime, isCheckout?: boolean) => {
     emit(e, isCheckout);
     if (e.type === EventType.FullSnapshot) {
       lastFullSnapshotEvent = e;

src/types.ts

@@ -6,6 +6,7 @@ export enum EventType {
   FullSnapshot,
   IncrementalSnapshot,
   Meta,
+  Custom,
 }
 
 export type domContentLoadedEvent = {
@@ -43,6 +44,14 @@ export type metaEvent = {
   };
 };
 
+export type customEvent<T = unknown> = {
+  type: EventType.Custom;
+  data: {
+    tag: string;
+    payload: T;
+  };
+};
+
 export enum IncrementalSource {
   Mutation,
   MouseMove,
@@ -91,7 +100,8 @@ export type event =
   | loadedEvent
   | fullSnapshotEvent
   | incrementalSnapshotEvent
-  | metaEvent;
+  | metaEvent
+  | customEvent;
 
 export type eventWithTime = event & {
   timestamp: number;