Packer (#172)

* introduce pako and add general packer interface

* add tests for packer

* use function API instead of class API for better tree shaking support

* refcatoring the rollup bundle config

typings/index.d.ts

@@ -2,5 +2,6 @@ import record from './record';
 import { Replayer } from './replay';
 import { mirror } from './utils';
 export { EventType, IncrementalSource, MouseInteractions, ReplayerEvents, } from './types';
+export { pack, unpack } from './packer';
 declare const addCustomEvent: <T>(tag: string, payload: T) => void;
 export { record, addCustomEvent, Replayer, mirror };

typings/packer/base.d.ts

@@ -0,0 +1,7 @@
+import { eventWithTime } from '../types';
+export declare type PackFn = (event: eventWithTime) => string;
+export declare type UnpackFn = (raw: string) => eventWithTime;
+export declare type eventWithTimeAndPacker = eventWithTime & {
+    v: string;
+};
+export declare const MARK = "v1";

typings/packer/index.d.ts

@@ -0,0 +1,2 @@
+export { pack } from './pack';
+export { unpack } from './unpack';

typings/packer/pack.d.ts

@@ -0,0 +1,2 @@
+import { PackFn } from './base';
+export declare const pack: PackFn;

typings/packer/unpack.d.ts

@@ -0,0 +1,2 @@
+import { UnpackFn } from './base';
+export declare const unpack: UnpackFn;

typings/record/index.d.ts

@@ -1,5 +1,5 @@
-import { recordOptions, listenerHandler } from '../types';
-declare function record(options?: recordOptions): listenerHandler | undefined;
+import { eventWithTime, recordOptions, listenerHandler } from '../types';
+declare function record<T = eventWithTime>(options?: recordOptions<T>): listenerHandler | undefined;
 declare namespace record {
     var addCustomEvent: <T>(tag: string, payload: T) => void;
 }

typings/replay/index.d.ts

@@ -2,41 +2,44 @@ import Timer from './timer';
 import { eventWithTime, playerConfig, playerMetaData, Handler } from '../types';
 import './styles/style.css';
 export declare class Replayer {
-    wrapper: HTMLDivElement;
-    iframe: HTMLIFrameElement;
-    timer: Timer;
-    private events;
-    private config;
-    private mouse;
-    private emitter;
-    private baselineTime;
-    private lastPlayedEvent;
-    private nextUserInteractionEvent;
-    private noramlSpeed;
-    private missingNodeRetryMap;
-    private playing;
-    constructor(events: eventWithTime[], config?: Partial<playerConfig>);
-    on(event: string, handler: Handler): void;
-    setConfig(config: Partial<playerConfig>): void;
-    getMetaData(): playerMetaData;
-    getCurrentTime(): number;
-    getTimeOffset(): number;
-    play(timeOffset?: number): void;
-    pause(): void;
-    resume(timeOffset?: number): void;
-    addEvent(event: eventWithTime): void;
-    private setupDom;
-    private handleResize;
-    private getDelay;
-    private getCastFn;
-    private rebuildFullSnapshot;
-    private waitForStylesheetLoad;
-    private applyIncremental;
-    private resolveMissingNode;
-    private moveAndHover;
-    private hoverElements;
-    private isUserInteraction;
-    private restoreSpeed;
-    private warnNodeNotFound;
-    private debugNodeNotFound;
+  wrapper: HTMLDivElement;
+  iframe: HTMLIFrameElement;
+  timer: Timer;
+  private events;
+  private config;
+  private mouse;
+  private emitter;
+  private baselineTime;
+  private lastPlayedEvent;
+  private nextUserInteractionEvent;
+  private noramlSpeed;
+  private missingNodeRetryMap;
+  private playing;
+  constructor(
+    events: Array<eventWithTime | string>,
+    config?: Partial<playerConfig>,
+  );
+  on(event: string, handler: Handler): void;
+  setConfig(config: Partial<playerConfig>): void;
+  getMetaData(): playerMetaData;
+  getCurrentTime(): number;
+  getTimeOffset(): number;
+  play(timeOffset?: number): void;
+  pause(): void;
+  resume(timeOffset?: number): void;
+  addEvent(rawEvent: eventWithTime | string): void;
+  private setupDom;
+  private handleResize;
+  private getDelay;
+  private getCastFn;
+  private rebuildFullSnapshot;
+  private waitForStylesheetLoad;
+  private applyIncremental;
+  private resolveMissingNode;
+  private moveAndHover;
+  private hoverElements;
+  private isUserInteraction;
+  private restoreSpeed;
+  private warnNodeNotFound;
+  private debugNodeNotFound;
 }

typings/types.d.ts

@@ -1,4 +1,5 @@
 import { serializedNodeWithId, idNodeMap, INode } from 'rrweb-snapshot';
+import { PackFn, UnpackFn } from './packer/base';
 export declare enum EventType {
     DomContentLoaded = 0,
     Load = 1,
@@ -89,8 +90,8 @@ export declare type eventWithTime = event & {
     delay?: number;
 };
 export declare type blockClass = string | RegExp;
-export declare type recordOptions = {
-    emit?: (e: eventWithTime, isCheckout?: boolean) => void;
+export declare type recordOptions<T> = {
+    emit?: (e: T, isCheckout?: boolean) => void;
     checkoutEveryNth?: number;
     checkoutEveryNms?: number;
     blockClass?: blockClass;
@@ -99,6 +100,7 @@ export declare type recordOptions = {
     inlineStylesheet?: boolean;
     hooks?: hooksParam;
     mousemoveWait?: number;
+    packFn?: PackFn;
 };
 export declare type observerParam = {
     mutationCb: mutationCallBack;
@@ -252,6 +254,7 @@ export declare type playerConfig = {
     liveMode: boolean;
     insertStyleRules: string[];
     triggerFocus: boolean;
+    unpackFn?: UnpackFn;
 };
 export declare type playerMetaData = {
     totalTime: number;