Chore: Move most types from rrweb to @rrweb/types package (#1031)

* Chore: Add move most types from rrweb to @rrweb/types package

* Split off type imports

* Split off type import to its own line

* Get vite to generate type definitions

* Apply formatting changes

* noEmit not allowed in tsconfig, moved it to build step

* Align version of @rrweb/types with main rrweb package

Based on @mark-fenng's comments https://github.com/rrweb-io/rrweb/pull/1031/files#r1002298176

* Move up keywords

packages/rrdom/package.json

@@ -43,6 +43,7 @@
     "rollup-plugin-typescript2": "^0.31.2",
     "rollup-plugin-web-worker-loader": "^1.6.1",
     "ts-jest": "^27.1.3",
+    "@rrweb/types": "^2.0.0-alpha.3",
     "typescript": "^4.7.3"
   },
   "dependencies": {

packages/rrdom/src/diff.ts

@@ -6,7 +6,7 @@ import type {
   scrollData,
   styleDeclarationData,
   styleSheetRuleData,
-} from 'rrweb/src/types';
+} from '@rrweb/types';
 import type {
   IRRCDATASection,
   IRRComment,

packages/rrdom/src/index.ts

@@ -14,7 +14,7 @@ import type {
   scrollData,
   styleSheetRuleData,
   styleDeclarationData,
-} from 'rrweb/src/types';
+} from '@rrweb/types';
 import {
   BaseRRNode as RRNode,
   BaseRRCDATASectionImpl,

packages/rrdom/test/diff.test.ts

@@ -12,12 +12,12 @@ import {
 import type { IRRNode } from '../src/document';
 import { Replayer } from 'rrweb';
 import type {
+  eventWithTime,
   canvasMutationData,
   styleDeclarationData,
   styleSheetRuleData,
-} from 'rrweb/src/types';
-import { EventType, IncrementalSource } from 'rrweb/src/types';
-import type { eventWithTime } from 'rrweb/typings/types';
+} from '@rrweb/types';
+import { EventType, IncrementalSource } from '@rrweb/types';
 
 const elementSn = {
   type: RRNodeType.Element,

packages/rrdom/tsconfig.json

@@ -18,6 +18,9 @@
   "references": [
     {
       "path": "../rrweb-snapshot"
+    },
+    {
+      "path": "../types"
     }
   ],
   "compileOnSave": true,

packages/rrweb-player/package.json

@@ -4,6 +4,7 @@
   "devDependencies": {
     "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-node-resolve": "^13.2.1",
+    "@rrweb/types": "^2.0.0-alpha.3",
     "@types/offscreencanvas": "^2019.6.4",
     "eslint-config-google": "^0.14.0",
     "eslint-plugin-svelte3": "^4.0.0",

packages/rrweb-player/src/Controller.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { EventType } from 'rrweb';
   import type { Replayer } from 'rrweb';
-  import type { playerMetaData } from 'rrweb/typings/types';
+  import type { playerMetaData } from '@rrweb/types';
   import type {
     PlayerMachineState,
     SpeedMachineState,

packages/rrweb-player/src/Player.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
   import { Replayer, unpack } from 'rrweb';
-  import type { eventWithTime } from 'rrweb/typings/types';
+  import type { eventWithTime } from '@rrweb/types';
   import {
     inlineCss,
     openFullscreen,

packages/rrweb-player/src/main.ts

@@ -1,4 +1,4 @@
-import type { eventWithTime } from 'rrweb/typings/types';
+import type { eventWithTime } from '@rrweb/types';
 import _Player from './Player.svelte';
 
 type PlayerProps = {

packages/rrweb-player/tsconfig.json

@@ -13,6 +13,9 @@
   "references": [
     {
       "path": "../rrweb"
+    },
+    {
+      "path": "../types"
     }
   ]
 }

packages/rrweb/package.json

@@ -80,6 +80,7 @@
     "typescript": "^4.7.3"
   },
   "dependencies": {
+    "@rrweb/types": "^2.0.0-alpha.3",
     "@types/css-font-loading-module": "0.0.7",
     "@xstate/fsm": "^1.4.0",
     "base64-arraybuffer": "^1.0.1",

packages/rrweb/src/index.ts

@@ -8,7 +8,7 @@ export {
   IncrementalSource,
   MouseInteractions,
   ReplayerEvents,
-} from './types';
+} from '@rrweb/types';
 
 const { addCustomEvent } = record;
 const { freezePage } = record;

packages/rrweb/src/packer/base.ts

@@ -1,4 +1,4 @@
-import type { eventWithTime } from '../types';
+import type { eventWithTime } from '@rrweb/types';
 
 export type PackFn = (event: eventWithTime) => string;
 export type UnpackFn = (raw: string) => eventWithTime;

packages/rrweb/src/packer/unpack.ts

@@ -1,6 +1,6 @@
 import { strFromU8, strToU8, unzlibSync } from 'fflate';
 import { UnpackFn, eventWithTimeAndPacker, MARK } from './base';
-import type { eventWithTime } from '../types';
+import type { eventWithTime } from '@rrweb/types';
 
 export const unpack: UnpackFn = (raw: string) => {
   if (typeof raw !== 'string') {

packages/rrweb/src/plugins/canvas-webrtc/record/index.ts

@@ -1,6 +1,6 @@
 import type { Mirror } from 'rrweb-snapshot';
 import SimplePeer from 'simple-peer-light';
-import type { RecordPlugin } from '../../../types';
+import type { RecordPlugin } from '@rrweb/types';
 import type { WebRTCDataChannel } from '../types';
 
 export const PLUGIN_NAME = 'rrweb/canvas-webrtc@1';

packages/rrweb/src/plugins/console/record/index.ts

@@ -1,4 +1,4 @@
-import type { listenerHandler, RecordPlugin, IWindow } from '../../../types';
+import type { listenerHandler, RecordPlugin, IWindow } from '@rrweb/types';
 import { patch } from '../../../utils';
 import { ErrorStackParser, StackFrame } from './error-stack-parser';
 import { stringify } from './stringify';

packages/rrweb/src/plugins/console/replay/index.ts

@@ -1,10 +1,7 @@
 import { LogLevel, LogData, PLUGIN_NAME } from '../record';
-import {
-  eventWithTime,
-  EventType,
-  IncrementalSource,
-  ReplayPlugin,
-} from '../../../types';
+import type { eventWithTime } from '@rrweb/types';
+import { EventType, IncrementalSource } from '@rrweb/types';
+import type { ReplayPlugin } from '../../../types';
 
 /**
  * define an interface to replay log records

packages/rrweb/src/plugins/sequential-id/record/index.ts

@@ -1,4 +1,4 @@
-import type { RecordPlugin } from '../../../types';
+import type { RecordPlugin } from '@rrweb/types';
 
 export type SequentialIdOptions = {
   key: string;

packages/rrweb/src/plugins/sequential-id/replay/index.ts

@@ -1,5 +1,6 @@
 import type { SequentialIdOptions } from '../record';
-import type { ReplayPlugin, eventWithTime } from '../../../types';
+import type { ReplayPlugin } from '../../../types';
+import type { eventWithTime } from '@rrweb/types';
 
 type Options = SequentialIdOptions & {
   warnOnMissingId: boolean;

packages/rrweb/src/record/iframe-manager.ts

@@ -1,5 +1,5 @@
 import type { Mirror, serializedNodeWithId } from 'rrweb-snapshot';
-import type { mutationCallBack } from '../types';
+import type { mutationCallBack } from '@rrweb/types';
 import type { StylesheetManager } from './stylesheet-manager';
 
 export class IframeManager {

packages/rrweb/src/record/index.ts

@@ -14,18 +14,18 @@ import {
   isSerializedIframe,
   isSerializedStylesheet,
 } from '../utils';
+import type { recordOptions } from '../types';
 import {
   EventType,
   event,
   eventWithTime,
-  recordOptions,
   IncrementalSource,
   listenerHandler,
   mutationCallbackParam,
   scrollCallback,
   canvasMutationParam,
   adoptedStyleSheetParam,
-} from '../types';
+} from '@rrweb/types';
 import { IframeManager } from './iframe-manager';
 import { ShadowDomManager } from './shadow-dom-manager';
 import { CanvasManager } from './observers/canvas/canvas-manager';

packages/rrweb/src/record/mutation.ts

@@ -8,6 +8,7 @@ import {
   Mirror,
   isNativeShadowDom,
 } from 'rrweb-snapshot';
+import type { observerParam, MutationBufferParam } from '../types';
 import type {
   mutationRecord,
   textCursor,
@@ -15,10 +16,8 @@ import type {
   removedNodeMutation,
   addedNodeMutation,
   styleAttributeValue,
-  observerParam,
-  MutationBufferParam,
   Optional,
-} from '../types';
+} from '@rrweb/types';
 import {
   isBlocked,
   isAncestorRemoved,

packages/rrweb/src/record/observer.ts

@@ -11,9 +11,9 @@ import {
   patch,
   StyleSheetMirror,
 } from '../utils';
+import type { observerParam, MutationBufferParam } from '../types';
 import {
   mutationCallBack,
-  observerParam,
   mousemoveCallBack,
   mousePosition,
   mouseInteractionCallBack,
@@ -35,10 +35,9 @@ import {
   fontParam,
   styleDeclarationCallback,
   IWindow,
-  MutationBufferParam,
   SelectionRange,
   selectionCallback,
-} from '../types';
+} from '@rrweb/types';
 import MutationBuffer from './mutation';
 
 type WindowWithStoredMutationObserver = IWindow & {

packages/rrweb/src/record/observers/canvas/2d.ts

@@ -5,7 +5,7 @@ import {
   canvasManagerMutationCallback,
   IWindow,
   listenerHandler,
-} from '../../../types';
+} from '@rrweb/types';
 import { hookSetter, isBlocked, patch } from '../../../utils';
 import { serializeArgs } from './serialize-args';
 

packages/rrweb/src/record/observers/canvas/canvas-manager.ts

@@ -8,9 +8,9 @@ import type {
   IWindow,
   listenerHandler,
   CanvasArg,
-} from '../../../types';
+} from '@rrweb/types';
 import { isBlocked } from '../../../utils';
-import { CanvasContext } from '../../../types';
+import { CanvasContext } from '@rrweb/types';
 import initCanvas2DMutationObserver from './2d';
 import initCanvasContextObserver from './canvas';
 import initCanvasWebGLMutationObserver from './webgl';

packages/rrweb/src/record/observers/canvas/canvas.ts

@@ -1,5 +1,5 @@
 import type { ICanvas } from 'rrweb-snapshot';
-import type { blockClass, IWindow, listenerHandler } from '../../../types';
+import type { blockClass, IWindow, listenerHandler } from '@rrweb/types';
 import { isBlocked, patch } from '../../../utils';
 
 export default function initCanvasContextObserver(

packages/rrweb/src/record/observers/canvas/serialize-args.ts

@@ -1,5 +1,5 @@
 import { encode } from 'base64-arraybuffer';
-import type { IWindow, CanvasArg } from '../../../types';
+import type { IWindow, CanvasArg } from '@rrweb/types';
 
 // TODO: unify with `replay/webgl.ts`
 type CanvasVarMap = Map<string, unknown[]>;

packages/rrweb/src/record/observers/canvas/webgl.ts

@@ -6,7 +6,7 @@ import {
   canvasMutationWithType,
   IWindow,
   listenerHandler,
-} from '../../../types';
+} from '@rrweb/types';
 import { hookSetter, isBlocked, patch } from '../../../utils';
 import { saveWebGLVar, serializeArgs } from './serialize-args';
 

packages/rrweb/src/record/shadow-dom-manager.ts

@@ -1,9 +1,9 @@
+import type { MutationBufferParam } from '../types';
 import type {
   mutationCallBack,
   scrollCallback,
-  MutationBufferParam,
   SamplingStrategy,
-} from '../types';
+} from '@rrweb/types';
 import {
   initMutationObserver,
   initScrollObserver,

packages/rrweb/src/record/stylesheet-manager.ts

@@ -5,7 +5,7 @@ import type {
   adoptedStyleSheetParam,
   attributeMutation,
   mutationCallBack,
-} from '../types';
+} from '@rrweb/types';
 import { StyleSheetMirror } from '../utils';
 
 export class StylesheetManager {

packages/rrweb/src/record/workers/image-bitmap-data-url-worker.ts

@@ -3,7 +3,7 @@ import type { DataURLOptions } from 'rrweb-snapshot';
 import type {
   ImageBitmapDataURLWorkerParams,
   ImageBitmapDataURLWorkerResponse,
-} from '../../types';
+} from '@rrweb/types';
 
 const lastBlobMap: Map<number, string> = new Map();
 const transparentBlobMap: Map<string, string> = new Map();

packages/rrweb/src/replay/canvas/2d.ts

@@ -1,5 +1,5 @@
 import type { Replayer } from '../';
-import type { canvasMutationCommand } from '../../types';
+import type { canvasMutationCommand } from '@rrweb/types';
 import { deserializeArg } from './deserialize-args';
 
 export default async function canvasMutation({

packages/rrweb/src/replay/canvas/deserialize-args.ts

@@ -1,6 +1,6 @@
 import { decode } from 'base64-arraybuffer';
 import type { Replayer } from '../';
-import type { CanvasArg, SerializedCanvasArg } from '../../types';
+import type { CanvasArg, SerializedCanvasArg } from '@rrweb/types';
 
 // TODO: add ability to wipe this list
 type GLVarMap = Map<string, any[]>;

packages/rrweb/src/replay/canvas/index.ts

@@ -4,7 +4,7 @@ import {
   canvasMutationCommand,
   canvasMutationData,
   canvasMutationParam,
-} from '../../types';
+} from '@rrweb/types';
 import webglMutation from './webgl';
 import canvas2DMutation from './2d';
 

packages/rrweb/src/replay/canvas/webgl.ts

@@ -1,5 +1,5 @@
 import type { Replayer } from '../';
-import { CanvasContext, canvasMutationCommand } from '../../types';
+import { CanvasContext, canvasMutationCommand } from '@rrweb/types';
 import { deserializeArg, variableListFor } from './deserialize-args';
 
 function getContext(

packages/rrweb/src/replay/index.ts

@@ -31,16 +31,15 @@ import * as mittProxy from 'mitt';
 import { polyfill as smoothscrollPolyfill } from './smoothscroll';
 import { Timer } from './timer';
 import { createPlayerService, createSpeedService } from './machine';
+import type { playerConfig, missingNodeMap } from '../types';
 import {
   EventType,
   IncrementalSource,
   fullSnapshotEvent,
   eventWithTime,
   MouseInteractions,
-  playerConfig,
   playerMetaData,
   viewportResizeDimension,
-  missingNodeMap,
   addedNodeMutation,
   incrementalSnapshotEvent,
   incrementalData,
@@ -63,7 +62,7 @@ import {
   styleSheetRuleData,
   styleDeclarationData,
   adoptedStyleSheetData,
-} from '../types';
+} from '@rrweb/types';
 import {
   polyfill,
   queueToResolveTrees,

packages/rrweb/src/replay/machine.ts

@@ -1,13 +1,12 @@
 import { createMachine, interpret, assign, StateMachine } from '@xstate/fsm';
+import type { playerConfig } from '../types';
 import {
-  playerConfig,
   eventWithTime,
-  actionWithDelay,
   ReplayerEvents,
   EventType,
   Emitter,
   IncrementalSource,
-} from '../types';
+} from '@rrweb/types';
 import { Timer, addDelay } from './timer';
 
 export type PlayerContext = {

packages/rrweb/src/replay/timer.ts

@@ -3,7 +3,7 @@ import {
   eventWithTime,
   EventType,
   IncrementalSource,
-} from '../types';
+} from '@rrweb/types';
 
 export class Timer {
   public timeOffset = 0;

packages/rrweb/src/types.ts

@@ -15,229 +15,30 @@ import type { Replayer } from './replay';
 import type { RRNode } from 'rrdom';
 import type { CanvasManager } from './record/observers/canvas/canvas-manager';
 import type { StylesheetManager } from './record/stylesheet-manager';
-
-export enum EventType {
-  DomContentLoaded,
-  Load,
-  FullSnapshot,
-  IncrementalSnapshot,
-  Meta,
-  Custom,
-  Plugin,
-}
-
-export type domContentLoadedEvent = {
-  type: EventType.DomContentLoaded;
-  data: unknown;
-};
-
-export type loadedEvent = {
-  type: EventType.Load;
-  data: unknown;
-};
-
-export type fullSnapshotEvent = {
-  type: EventType.FullSnapshot;
-  data: {
-    node: serializedNodeWithId;
-    initialOffset: {
-      top: number;
-      left: number;
-    };
-  };
-};
-
-export type incrementalSnapshotEvent = {
-  type: EventType.IncrementalSnapshot;
-  data: incrementalData;
-};
-
-export type metaEvent = {
-  type: EventType.Meta;
-  data: {
-    href: string;
-    width: number;
-    height: number;
-  };
-};
-
-export type customEvent<T = unknown> = {
-  type: EventType.Custom;
-  data: {
-    tag: string;
-    payload: T;
-  };
-};
-
-export type pluginEvent<T = unknown> = {
-  type: EventType.Plugin;
-  data: {
-    plugin: string;
-    payload: T;
-  };
-};
-
-export enum IncrementalSource {
-  Mutation,
-  MouseMove,
-  MouseInteraction,
-  Scroll,
-  ViewportResize,
-  Input,
-  TouchMove,
-  MediaInteraction,
-  StyleSheetRule,
-  CanvasMutation,
-  Font,
-  Log,
-  Drag,
-  StyleDeclaration,
-  Selection,
-  AdoptedStyleSheet,
-}
-
-export type mutationData = {
-  source: IncrementalSource.Mutation;
-} & mutationCallbackParam;
-
-export type mousemoveData = {
-  source:
-    | IncrementalSource.MouseMove
-    | IncrementalSource.TouchMove
-    | IncrementalSource.Drag;
-  positions: mousePosition[];
-};
-
-export type mouseInteractionData = {
-  source: IncrementalSource.MouseInteraction;
-} & mouseInteractionParam;
-
-export type scrollData = {
-  source: IncrementalSource.Scroll;
-} & scrollPosition;
-
-export type viewportResizeData = {
-  source: IncrementalSource.ViewportResize;
-} & viewportResizeDimension;
-
-export type inputData = {
-  source: IncrementalSource.Input;
-  id: number;
-} & inputValue;
-
-export type mediaInteractionData = {
-  source: IncrementalSource.MediaInteraction;
-} & mediaInteractionParam;
-
-export type styleSheetRuleData = {
-  source: IncrementalSource.StyleSheetRule;
-} & styleSheetRuleParam;
-
-export type styleDeclarationData = {
-  source: IncrementalSource.StyleDeclaration;
-} & styleDeclarationParam;
-
-export type canvasMutationData = {
-  source: IncrementalSource.CanvasMutation;
-} & canvasMutationParam;
-
-export type fontData = {
-  source: IncrementalSource.Font;
-} & fontParam;
-
-export type selectionData = {
-  source: IncrementalSource.Selection;
-} & selectionParam;
-
-export type adoptedStyleSheetData = {
-  source: IncrementalSource.AdoptedStyleSheet;
-} & adoptedStyleSheetParam;
-
-export type incrementalData =
-  | mutationData
-  | mousemoveData
-  | mouseInteractionData
-  | scrollData
-  | viewportResizeData
-  | inputData
-  | mediaInteractionData
-  | styleSheetRuleData
-  | canvasMutationData
-  | fontData
-  | selectionData
-  | styleDeclarationData
-  | adoptedStyleSheetData;
-
-export type event =
-  | domContentLoadedEvent
-  | loadedEvent
-  | fullSnapshotEvent
-  | incrementalSnapshotEvent
-  | metaEvent
-  | customEvent
-  | pluginEvent;
-
-export type eventWithTime = event & {
-  timestamp: number;
-  delay?: number;
-};
-
-export type canvasEventWithTime = eventWithTime & {
-  type: EventType.IncrementalSnapshot;
-  data: canvasMutationData;
-};
-
-export type blockClass = string | RegExp;
-
-export type maskTextClass = string | RegExp;
-
-export type SamplingStrategy = Partial<{
-  /**
-   * false means not to record mouse/touch move events
-   * number is the throttle threshold of recording mouse/touch move
-   */
-  mousemove: boolean | number;
-  /**
-   * number is the throttle threshold of mouse/touch move callback
-   */
-  mousemoveCallback: number;
-  /**
-   * false means not to record mouse interaction events
-   * can also specify record some kinds of mouse interactions
-   */
-  mouseInteraction: boolean | Record<string, boolean | undefined>;
-  /**
-   * number is the throttle threshold of recording scroll
-   */
-  scroll: number;
-  /**
-   * number is the throttle threshold of recording media interactions
-   */
-  media: number;
-  /**
-   * 'all' will record all the input events
-   * 'last' will only record the last input value while input a sequence of chars
-   */
-  input: 'all' | 'last';
-  /**
-   * 'all' will record every single canvas call
-   * number between 1 and 60, will record an image snapshots in a web-worker a (maximum) number of times per second.
-   *                          Number only supported where [`OffscreenCanvas`](http://mdn.io/offscreencanvas) is supported.
-   */
-  canvas: 'all' | number;
-}>;
-
-export type RecordPlugin<TOptions = unknown> = {
-  name: string;
-  observer?: (
-    cb: (...args: Array<unknown>) => void,
-    win: IWindow,
-    options: TOptions,
-  ) => listenerHandler;
-  eventProcessor?: <TExtend>(event: eventWithTime) => eventWithTime & TExtend;
-  getMirror?: (mirror: Mirror) => void;
-  options: TOptions;
-};
+import type {
+  addedNodeMutation,
+  blockClass,
+  canvasMutationCallback,
+  eventWithTime,
+  fontCallback,
+  hooksParam,
+  inputCallback,
+  IWindow,
+  KeepIframeSrcFn,
+  listenerHandler,
+  maskTextClass,
+  mediaInteractionCallback,
+  mouseInteractionCallBack,
+  mousemoveCallBack,
+  mutationCallBack,
+  RecordPlugin,
+  SamplingStrategy,
+  scrollCallback,
+  selectionCallback,
+  styleDeclarationCallback,
+  styleSheetRuleCallback,
+  viewportResizeCallback,
+} from '@rrweb/types';
 
 export type recordOptions<T> = {
   emit?: (e: T, isCheckout?: boolean) => void;
@@ -341,360 +142,6 @@ export type MutationBufferParam = Pick<
   | 'canvasManager'
 >;
 
-export type hooksParam = {
-  mutation?: mutationCallBack;
-  mousemove?: mousemoveCallBack;
-  mouseInteraction?: mouseInteractionCallBack;
-  scroll?: scrollCallback;
-  viewportResize?: viewportResizeCallback;
-  input?: inputCallback;
-  mediaInteaction?: mediaInteractionCallback;
-  styleSheetRule?: styleSheetRuleCallback;
-  styleDeclaration?: styleDeclarationCallback;
-  canvasMutation?: canvasMutationCallback;
-  font?: fontCallback;
-  selection?: selectionCallback;
-};
-
-// https://dom.spec.whatwg.org/#interface-mutationrecord
-export type mutationRecord = {
-  type: string;
-  target: Node;
-  oldValue: string | null;
-  addedNodes: NodeList;
-  removedNodes: NodeList;
-  attributeName: string | null;
-};
-
-export type textCursor = {
-  node: Node;
-  value: string | null;
-};
-export type textMutation = {
-  id: number;
-  value: string | null;
-};
-
-export type styleAttributeValue = {
-  [key: string]: styleValueWithPriority | string | false;
-};
-
-export type styleValueWithPriority = [string, string];
-
-export type attributeCursor = {
-  node: Node;
-  attributes: {
-    [key: string]: string | styleAttributeValue | null;
-  };
-};
-export type attributeMutation = {
-  id: number;
-  attributes: {
-    [key: string]: string | styleAttributeValue | null;
-  };
-};
-
-export type removedNodeMutation = {
-  parentId: number;
-  id: number;
-  isShadow?: boolean;
-};
-
-export type addedNodeMutation = {
-  parentId: number;
-  // Newly recorded mutations will not have previousId any more, just for compatibility
-  previousId?: number | null;
-  nextId: number | null;
-  node: serializedNodeWithId;
-};
-
-export type mutationCallbackParam = {
-  texts: textMutation[];
-  attributes: attributeMutation[];
-  removes: removedNodeMutation[];
-  adds: addedNodeMutation[];
-  isAttachIframe?: true;
-};
-
-export type mutationCallBack = (m: mutationCallbackParam) => void;
-
-export type mousemoveCallBack = (
-  p: mousePosition[],
-  source:
-    | IncrementalSource.MouseMove
-    | IncrementalSource.TouchMove
-    | IncrementalSource.Drag,
-) => void;
-
-export type mousePosition = {
-  x: number;
-  y: number;
-  id: number;
-  timeOffset: number;
-};
-
-export type mouseMovePos = {
-  x: number;
-  y: number;
-  id: number;
-  debugData: incrementalData;
-};
-
-export enum MouseInteractions {
-  MouseUp,
-  MouseDown,
-  Click,
-  ContextMenu,
-  DblClick,
-  Focus,
-  Blur,
-  TouchStart,
-  TouchMove_Departed, // we will start a separate observer for touch move event
-  TouchEnd,
-  TouchCancel,
-}
-
-export enum CanvasContext {
-  '2D',
-  WebGL,
-  WebGL2,
-}
-
-export type SerializedCanvasArg =
-  | {
-      rr_type: 'ArrayBuffer';
-      base64: string; // base64
-    }
-  | {
-      rr_type: 'Blob';
-      data: Array<CanvasArg>;
-      type?: string;
-    }
-  | {
-      rr_type: string;
-      src: string; // url of image
-    }
-  | {
-      rr_type: string;
-      args: Array<CanvasArg>;
-    }
-  | {
-      rr_type: string;
-      index: number;
-    };
-
-export type CanvasArg =
-  | SerializedCanvasArg
-  | string
-  | number
-  | boolean
-  | null
-  | CanvasArg[];
-
-type mouseInteractionParam = {
-  type: MouseInteractions;
-  id: number;
-  x: number;
-  y: number;
-};
-
-export type mouseInteractionCallBack = (d: mouseInteractionParam) => void;
-
-export type scrollPosition = {
-  id: number;
-  x: number;
-  y: number;
-};
-
-export type scrollCallback = (p: scrollPosition) => void;
-
-export type styleSheetAddRule = {
-  rule: string;
-  index?: number | number[];
-};
-
-export type styleSheetDeleteRule = {
-  index: number | number[];
-};
-
-export type styleSheetRuleParam = {
-  id?: number;
-  styleId?: number;
-  removes?: styleSheetDeleteRule[];
-  adds?: styleSheetAddRule[];
-  replace?: string;
-  replaceSync?: string;
-};
-
-export type styleSheetRuleCallback = (s: styleSheetRuleParam) => void;
-
-export type adoptedStyleSheetParam = {
-  // id indicates the node id of document or shadow DOMs' host element.
-  id: number;
-  // New CSSStyleSheets which have never appeared before.
-  styles?: {
-    styleId: number;
-    rules: styleSheetAddRule[];
-  }[];
-  // StyleSheet ids to be adopted.
-  styleIds: number[];
-};
-
-export type adoptedStyleSheetCallback = (a: adoptedStyleSheetParam) => void;
-
-export type styleDeclarationParam = {
-  id?: number;
-  styleId?: number;
-  index: number[];
-  set?: {
-    property: string;
-    value: string | null;
-    priority: string | undefined;
-  };
-  remove?: {
-    property: string;
-  };
-};
-
-export type styleDeclarationCallback = (s: styleDeclarationParam) => void;
-
-export type canvasMutationCommand = {
-  property: string;
-  args: Array<unknown>;
-  setter?: true;
-};
-
-export type canvasMutationParam =
-  | {
-      id: number;
-      type: CanvasContext;
-      commands: canvasMutationCommand[];
-    }
-  | ({
-      id: number;
-      type: CanvasContext;
-    } & canvasMutationCommand);
-
-export type canvasMutationWithType = {
-  type: CanvasContext;
-} & canvasMutationCommand;
-
-export type canvasMutationCallback = (p: canvasMutationParam) => void;
-
-export type canvasManagerMutationCallback = (
-  target: HTMLCanvasElement,
-  p: canvasMutationWithType,
-) => void;
-
-export type ImageBitmapDataURLWorkerParams = {
-  id: number;
-  bitmap: ImageBitmap;
-  width: number;
-  height: number;
-  dataURLOptions: DataURLOptions;
-};
-
-export type ImageBitmapDataURLWorkerResponse =
-  | {
-      id: number;
-    }
-  | {
-      id: number;
-      type: string;
-      base64: string;
-      width: number;
-      height: number;
-    };
-
-export type fontParam = {
-  family: string;
-  fontSource: string;
-  buffer: boolean;
-  descriptors?: FontFaceDescriptors;
-};
-
-export type fontCallback = (p: fontParam) => void;
-
-export type viewportResizeDimension = {
-  width: number;
-  height: number;
-};
-
-export type viewportResizeCallback = (d: viewportResizeDimension) => void;
-
-export type inputValue = {
-  text: string;
-  isChecked: boolean;
-
-  // `userTriggered` indicates if this event was triggered directly by user (userTriggered: true)
-  // or was triggered indirectly (userTriggered: false)
-  // Example of `userTriggered` in action:
-  // User clicks on radio element (userTriggered: true) which triggers the other radio element to change (userTriggered: false)
-  userTriggered?: boolean;
-};
-
-export type inputCallback = (v: inputValue & { id: number }) => void;
-
-export const enum MediaInteractions {
-  Play,
-  Pause,
-  Seeked,
-  VolumeChange,
-  RateChange,
-}
-
-export type mediaInteractionParam = {
-  type: MediaInteractions;
-  id: number;
-  currentTime?: number;
-  volume?: number;
-  muted?: boolean;
-  playbackRate?: number;
-};
-
-export type mediaInteractionCallback = (p: mediaInteractionParam) => void;
-
-export type DocumentDimension = {
-  x: number;
-  y: number;
-  // scale value relative to its parent iframe
-  relativeScale: number;
-  // scale value relative to the root iframe
-  absoluteScale: number;
-};
-
-export type SelectionRange = {
-  start: number;
-  startOffset: number;
-  end: number;
-  endOffset: number;
-};
-
-export type selectionParam = {
-  ranges: Array<SelectionRange>;
-};
-
-export type selectionCallback = (p: selectionParam) => void;
-
-export type DeprecatedMirror = {
-  map: {
-    [key: number]: INode;
-  };
-  getId: (n: Node) => number;
-  getNode: (id: number) => INode | null;
-  removeNodeFromMap: (n: Node) => void;
-  has: (id: number) => boolean;
-  reset: () => void;
-};
-
-export type throttleOptions = {
-  leading?: boolean;
-  trailing?: boolean;
-};
-
-export type listenerHandler = () => void;
-export type hookResetter = () => void;
-
 export type ReplayPlugin = {
   handler?: (
     event: eventWithTime,
@@ -734,12 +181,6 @@ export type playerConfig = {
   plugins?: ReplayPlugin[];
 };
 
-export type playerMetaData = {
-  startTime: number;
-  endTime: number;
-  totalTime: number;
-};
-
 export type missingNode = {
   node: Node | RRNode;
   mutation: addedNodeMutation;
@@ -748,51 +189,8 @@ export type missingNodeMap = {
   [id: number]: missingNode;
 };
 
-export type actionWithDelay = {
-  doAction: () => void;
-  delay: number;
-};
-
-export type Handler = (event?: unknown) => void;
-
-export type Emitter = {
-  on(type: string, handler: Handler): void;
-  emit(type: string, event?: unknown): void;
-  off(type: string, handler: Handler): void;
-};
-
-export type Arguments<T> = T extends (...payload: infer U) => unknown
-  ? U
-  : unknown;
-
-export enum ReplayerEvents {
-  Start = 'start',
-  Pause = 'pause',
-  Resume = 'resume',
-  Resize = 'resize',
-  Finish = 'finish',
-  FullsnapshotRebuilded = 'fullsnapshot-rebuilded',
-  LoadStylesheetStart = 'load-stylesheet-start',
-  LoadStylesheetEnd = 'load-stylesheet-end',
-  SkipStart = 'skip-start',
-  SkipEnd = 'skip-end',
-  MouseInteraction = 'mouse-interaction',
-  EventCast = 'event-cast',
-  CustomEvent = 'custom-event',
-  Flush = 'flush',
-  StateChange = 'state-change',
-  PlayBack = 'play-back',
-  Destroy = 'destroy',
-}
-
-export type KeepIframeSrcFn = (src: string) => boolean;
-
 declare global {
   interface Window {
     FontFace: typeof FontFace;
   }
 }
-
-export type IWindow = Window & typeof globalThis;
-
-export type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;

packages/rrweb/src/utils.ts

@@ -8,7 +8,7 @@ import type {
   IWindow,
   DeprecatedMirror,
   textMutation,
-} from './types';
+} from '@rrweb/types';
 import type { IMirror, Mirror } from 'rrweb-snapshot';
 import { isShadowRoot, IGNORED_NODE, classMatchesRegex } from 'rrweb-snapshot';
 import type { RRNode, RRIFrameElement } from 'rrdom';

packages/rrweb/test/e2e/webgl.test.ts

@@ -10,7 +10,8 @@ import {
   generateRecordSnippet,
   ISuite,
 } from '../utils';
-import type { recordOptions, eventWithTime } from '../../src/types';
+import type { recordOptions } from '../../src/types';
+import type { eventWithTime } from '@rrweb/types';
 import { toMatchImageSnapshot } from 'jest-image-snapshot';
 expect.extend({ toMatchImageSnapshot });
 

packages/rrweb/test/events/adopted-style-sheet-modification.ts

@@ -1,4 +1,5 @@
-import { EventType, eventWithTime, IncrementalSource } from '../../src/types';
+import { EventType, IncrementalSource } from '@rrweb/types';
+import type { eventWithTime } from '@rrweb/types';
 
 const now = Date.now();
 const events: eventWithTime[] = [

packages/rrweb/test/events/adopted-style-sheet.ts

@@ -1,4 +1,5 @@
-import { EventType, eventWithTime, IncrementalSource } from '../../src/types';
+import { EventType, IncrementalSource } from '@rrweb/types';
+import type { eventWithTime } from '@rrweb/types';
 
 const now = Date.now();
 

packages/rrweb/test/events/canvas-in-iframe.ts

@@ -1,4 +1,5 @@
-import { EventType, eventWithTime, IncrementalSource } from '../../src/types';
+import { EventType, IncrementalSource } from '@rrweb/types';
+import type { eventWithTime } from '@rrweb/types';
 
 const now = Date.now();
 

packages/rrweb/test/events/iframe.ts

@@ -1,4 +1,5 @@
-import { EventType, eventWithTime, IncrementalSource } from '../../src/types';
+import { EventType, IncrementalSource } from '@rrweb/types';
+import type { eventWithTime } from '@rrweb/types';
 
 const now = Date.now();
 

packages/rrweb/test/events/input.ts

@@ -1,4 +1,5 @@
-import { EventType, eventWithTime, IncrementalSource } from '../../src/types';
+import { EventType, IncrementalSource } from '@rrweb/types';
+import type { eventWithTime } from '@rrweb/types';
 
 const now = Date.now();
 const events: eventWithTime[] = [

packages/rrweb/test/events/ordering.ts

@@ -1,4 +1,5 @@
-import { EventType, eventWithTime, IncrementalSource } from '../../src/types';
+import { EventType, IncrementalSource } from '@rrweb/types';
+import type { eventWithTime } from '@rrweb/types';
 
 const now = Date.now();
 const events: eventWithTime[] = [

packages/rrweb/test/events/scroll.ts

@@ -1,4 +1,5 @@
-import { EventType, eventWithTime, IncrementalSource } from '../../src/types';
+import { EventType, IncrementalSource } from '@rrweb/types';
+import type { eventWithTime } from '@rrweb/types';
 
 const now = Date.now();
 const events: eventWithTime[] = [

packages/rrweb/test/events/selection.ts

@@ -1,4 +1,5 @@
-import { EventType, eventWithTime, IncrementalSource } from '../../src/types';
+import { EventType, IncrementalSource } from '@rrweb/types';
+import type { eventWithTime } from '@rrweb/types';
 
 const now = Date.now();
 

packages/rrweb/test/events/shadow-dom.ts

@@ -1,4 +1,5 @@
-import { EventType, eventWithTime, IncrementalSource } from '../../src/types';
+import { EventType, IncrementalSource } from '@rrweb/types';
+import type { eventWithTime } from '@rrweb/types';
 
 const now = Date.now();
 

packages/rrweb/test/events/style-sheet-rule-events.ts

@@ -1,4 +1,5 @@
-import { EventType, eventWithTime, IncrementalSource } from '../../src/types';
+import { EventType, IncrementalSource } from '@rrweb/types';
+import type { eventWithTime } from '@rrweb/types';
 
 const now = Date.now();
 const events: eventWithTime[] = [

packages/rrweb/test/events/style-sheet-text-mutation.ts

@@ -1,4 +1,5 @@
-import { EventType, eventWithTime, IncrementalSource } from '../../src/types';
+import { EventType, IncrementalSource } from '@rrweb/types';
+import type { eventWithTime } from '@rrweb/types';
 
 const now = Date.now();
 const events: eventWithTime[] = [

packages/rrweb/test/integration.test.ts

@@ -11,12 +11,8 @@ import {
   generateRecordSnippet,
   ISuite,
 } from './utils';
-import {
-  recordOptions,
-  eventWithTime,
-  EventType,
-  RecordPlugin,
-} from '../src/types';
+import type { recordOptions } from '../src/types';
+import { eventWithTime, EventType, RecordPlugin } from '@rrweb/types';
 import { visitSnapshot, NodeType } from 'rrweb-snapshot';
 
 describe('record integration tests', function (this: ISuite) {

packages/rrweb/test/machine.test.ts

@@ -1,6 +1,6 @@
 import { discardPriorSnapshots } from '../src/replay/machine';
 import { sampleEvents } from './utils';
-import { EventType } from '../src/types';
+import { EventType } from '@rrweb/types';
 
 const events = sampleEvents.filter(
   (e) => ![EventType.DomContentLoaded, EventType.Load].includes(e.type),

packages/rrweb/test/packer.test.ts

@@ -1,5 +1,5 @@
 import { pack, unpack } from '../src/packer';
-import { eventWithTime, EventType } from '../src/types';
+import { eventWithTime, EventType } from '@rrweb/types';
 import { MARK } from '../src/packer/base';
 
 const event: eventWithTime = {

packages/rrweb/test/record.test.ts

@@ -2,15 +2,15 @@ import * as fs from 'fs';
 import * as path from 'path';
 import type * as puppeteer from 'puppeteer';
 import 'construct-style-sheets-polyfill';
+import type { recordOptions } from '../src/types';
 import {
-  recordOptions,
   listenerHandler,
   eventWithTime,
   EventType,
   IncrementalSource,
   styleSheetRuleData,
   selectionData,
-} from '../src/types';
+} from '@rrweb/types';
 import { assertSnapshot, launchPuppeteer, waitForRAF } from './utils';
 
 interface ISuite {

packages/rrweb/test/record/webgl.test.ts

@@ -1,14 +1,14 @@
 import * as fs from 'fs';
 import * as path from 'path';
 import type * as puppeteer from 'puppeteer';
+import type { recordOptions } from '../../src/types';
 import {
-  recordOptions,
   listenerHandler,
   eventWithTime,
   EventType,
   IncrementalSource,
   CanvasContext,
-} from '../../src/types';
+} from '@rrweb/types';
 import {
   assertSnapshot,
   launchPuppeteer,

packages/rrweb/test/replay/preload-all-images.test.ts

@@ -11,7 +11,7 @@ import {
   IncrementalSource,
   EventType,
   eventWithTime,
-} from '../../src/types';
+} from '@rrweb/types';
 
 let replayer: Replayer;
 

packages/rrweb/test/replay/webgl-mutation.test.ts

@@ -6,7 +6,7 @@ import { polyfillWebGLGlobals } from '../utils';
 polyfillWebGLGlobals();
 
 import webglMutation from '../../src/replay/canvas/webgl';
-import { CanvasContext } from '../../src/types';
+import { CanvasContext } from '@rrweb/types';
 import { variableListFor } from '../../src/replay/canvas/deserialize-args';
 
 let canvas: HTMLCanvasElement;

packages/rrweb/test/utils.ts

@@ -7,8 +7,8 @@ import {
   Optional,
   mouseInteractionData,
   event,
-  recordOptions,
-} from '../src/types';
+} from '@rrweb/types';
+import type { recordOptions } from '../src/types';
 import * as puppeteer from 'puppeteer';
 import { format } from 'prettier';
 import * as path from 'path';

packages/rrweb/tsconfig.json

@@ -21,6 +21,9 @@
     },
     {
       "path": "../rrweb-snapshot"
+    },
+    {
+      "path": "../types"
     }
   ],
   "exclude": ["test", "scripts"],

packages/types/.gitignore

@@ -0,0 +1,4 @@
+dist
+es
+lib
+typings

packages/types/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@rrweb/types",
+  "version": "2.0.0-alpha.3",
+  "keywords": [
+    "rrweb",
+    "@rrweb/types"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -noEmit && vite build",
+    "check-types": "tsc -noEmit",
+    "prepublish": "npm run build",
+    "lint": "yarn eslint src/**/*.ts"
+  },
+  "homepage": "https://github.com/rrweb-io/rrweb/tree/main/packages/@rrweb/types#readme",
+  "bugs": {
+    "url": "https://github.com/rrweb-io/rrweb/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rrweb-io/rrweb.git"
+  },
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/types.umd.cjs",
+  "module": "./dist/types.js",
+  "typings": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/types.js",
+      "require": "./dist/types.umd.cjs"
+    }
+  },
+  "files": [
+    "build",
+    "dist"
+  ],
+  "devDependencies": {
+    "typescript": "^4.7.3",
+    "vite": "^3.2.0-beta.2",
+    "vite-plugin-dts": "^1.6.6"
+  },
+  "dependencies": {
+    "rrweb-snapshot": "^2.0.0-alpha.3"
+  },
+  "browserslist": [
+    "supports es6-class"
+  ]
+}

packages/types/src/index.ts

@@ -0,0 +1,638 @@
+import type {
+  serializedNodeWithId,
+  Mirror,
+  INode,
+  DataURLOptions,
+} from 'rrweb-snapshot';
+
+export enum EventType {
+  DomContentLoaded,
+  Load,
+  FullSnapshot,
+  IncrementalSnapshot,
+  Meta,
+  Custom,
+  Plugin,
+}
+
+export type domContentLoadedEvent = {
+  type: EventType.DomContentLoaded;
+  data: unknown;
+};
+
+export type loadedEvent = {
+  type: EventType.Load;
+  data: unknown;
+};
+
+export type fullSnapshotEvent = {
+  type: EventType.FullSnapshot;
+  data: {
+    node: serializedNodeWithId;
+    initialOffset: {
+      top: number;
+      left: number;
+    };
+  };
+};
+
+export type incrementalSnapshotEvent = {
+  type: EventType.IncrementalSnapshot;
+  data: incrementalData;
+};
+
+export type metaEvent = {
+  type: EventType.Meta;
+  data: {
+    href: string;
+    width: number;
+    height: number;
+  };
+};
+
+export type customEvent<T = unknown> = {
+  type: EventType.Custom;
+  data: {
+    tag: string;
+    payload: T;
+  };
+};
+
+export type pluginEvent<T = unknown> = {
+  type: EventType.Plugin;
+  data: {
+    plugin: string;
+    payload: T;
+  };
+};
+
+export enum IncrementalSource {
+  Mutation,
+  MouseMove,
+  MouseInteraction,
+  Scroll,
+  ViewportResize,
+  Input,
+  TouchMove,
+  MediaInteraction,
+  StyleSheetRule,
+  CanvasMutation,
+  Font,
+  Log,
+  Drag,
+  StyleDeclaration,
+  Selection,
+  AdoptedStyleSheet,
+}
+
+export type mutationData = {
+  source: IncrementalSource.Mutation;
+} & mutationCallbackParam;
+
+export type mousemoveData = {
+  source:
+    | IncrementalSource.MouseMove
+    | IncrementalSource.TouchMove
+    | IncrementalSource.Drag;
+  positions: mousePosition[];
+};
+
+export type mouseInteractionData = {
+  source: IncrementalSource.MouseInteraction;
+} & mouseInteractionParam;
+
+export type scrollData = {
+  source: IncrementalSource.Scroll;
+} & scrollPosition;
+
+export type viewportResizeData = {
+  source: IncrementalSource.ViewportResize;
+} & viewportResizeDimension;
+
+export type inputData = {
+  source: IncrementalSource.Input;
+  id: number;
+} & inputValue;
+
+export type mediaInteractionData = {
+  source: IncrementalSource.MediaInteraction;
+} & mediaInteractionParam;
+
+export type styleSheetRuleData = {
+  source: IncrementalSource.StyleSheetRule;
+} & styleSheetRuleParam;
+
+export type styleDeclarationData = {
+  source: IncrementalSource.StyleDeclaration;
+} & styleDeclarationParam;
+
+export type canvasMutationData = {
+  source: IncrementalSource.CanvasMutation;
+} & canvasMutationParam;
+
+export type fontData = {
+  source: IncrementalSource.Font;
+} & fontParam;
+
+export type selectionData = {
+  source: IncrementalSource.Selection;
+} & selectionParam;
+
+export type adoptedStyleSheetData = {
+  source: IncrementalSource.AdoptedStyleSheet;
+} & adoptedStyleSheetParam;
+
+export type incrementalData =
+  | mutationData
+  | mousemoveData
+  | mouseInteractionData
+  | scrollData
+  | viewportResizeData
+  | inputData
+  | mediaInteractionData
+  | styleSheetRuleData
+  | canvasMutationData
+  | fontData
+  | selectionData
+  | styleDeclarationData
+  | adoptedStyleSheetData;
+
+export type event =
+  | domContentLoadedEvent
+  | loadedEvent
+  | fullSnapshotEvent
+  | incrementalSnapshotEvent
+  | metaEvent
+  | customEvent
+  | pluginEvent;
+
+export type eventWithTime = event & {
+  timestamp: number;
+  delay?: number;
+};
+
+export type canvasEventWithTime = eventWithTime & {
+  type: EventType.IncrementalSnapshot;
+  data: canvasMutationData;
+};
+
+export type blockClass = string | RegExp;
+
+export type maskTextClass = string | RegExp;
+
+export type SamplingStrategy = Partial<{
+  /**
+   * false means not to record mouse/touch move events
+   * number is the throttle threshold of recording mouse/touch move
+   */
+  mousemove: boolean | number;
+  /**
+   * number is the throttle threshold of mouse/touch move callback
+   */
+  mousemoveCallback: number;
+  /**
+   * false means not to record mouse interaction events
+   * can also specify record some kinds of mouse interactions
+   */
+  mouseInteraction: boolean | Record<string, boolean | undefined>;
+  /**
+   * number is the throttle threshold of recording scroll
+   */
+  scroll: number;
+  /**
+   * number is the throttle threshold of recording media interactions
+   */
+  media: number;
+  /**
+   * 'all' will record all the input events
+   * 'last' will only record the last input value while input a sequence of chars
+   */
+  input: 'all' | 'last';
+  /**
+   * 'all' will record every single canvas call
+   * number between 1 and 60, will record an image snapshots in a web-worker a (maximum) number of times per second.
+   *                          Number only supported where [`OffscreenCanvas`](http://mdn.io/offscreencanvas) is supported.
+   */
+  canvas: 'all' | number;
+}>;
+
+export type RecordPlugin<TOptions = unknown> = {
+  name: string;
+  observer?: (
+    cb: (...args: Array<unknown>) => void,
+    win: IWindow,
+    options: TOptions,
+  ) => listenerHandler;
+  eventProcessor?: <TExtend>(event: eventWithTime) => eventWithTime & TExtend;
+  getMirror?: (mirror: Mirror) => void;
+  options: TOptions;
+};
+
+export type hooksParam = {
+  mutation?: mutationCallBack;
+  mousemove?: mousemoveCallBack;
+  mouseInteraction?: mouseInteractionCallBack;
+  scroll?: scrollCallback;
+  viewportResize?: viewportResizeCallback;
+  input?: inputCallback;
+  mediaInteaction?: mediaInteractionCallback;
+  styleSheetRule?: styleSheetRuleCallback;
+  styleDeclaration?: styleDeclarationCallback;
+  canvasMutation?: canvasMutationCallback;
+  font?: fontCallback;
+  selection?: selectionCallback;
+};
+
+// https://dom.spec.whatwg.org/#interface-mutationrecord
+export type mutationRecord = {
+  type: string;
+  target: Node;
+  oldValue: string | null;
+  addedNodes: NodeList;
+  removedNodes: NodeList;
+  attributeName: string | null;
+};
+
+export type textCursor = {
+  node: Node;
+  value: string | null;
+};
+export type textMutation = {
+  id: number;
+  value: string | null;
+};
+
+export type styleAttributeValue = {
+  [key: string]: styleValueWithPriority | string | false;
+};
+
+export type styleValueWithPriority = [string, string];
+
+export type attributeCursor = {
+  node: Node;
+  attributes: {
+    [key: string]: string | styleAttributeValue | null;
+  };
+};
+export type attributeMutation = {
+  id: number;
+  attributes: {
+    [key: string]: string | styleAttributeValue | null;
+  };
+};
+
+export type removedNodeMutation = {
+  parentId: number;
+  id: number;
+  isShadow?: boolean;
+};
+
+export type addedNodeMutation = {
+  parentId: number;
+  // Newly recorded mutations will not have previousId any more, just for compatibility
+  previousId?: number | null;
+  nextId: number | null;
+  node: serializedNodeWithId;
+};
+
+export type mutationCallbackParam = {
+  texts: textMutation[];
+  attributes: attributeMutation[];
+  removes: removedNodeMutation[];
+  adds: addedNodeMutation[];
+  isAttachIframe?: true;
+};
+
+export type mutationCallBack = (m: mutationCallbackParam) => void;
+
+export type mousemoveCallBack = (
+  p: mousePosition[],
+  source:
+    | IncrementalSource.MouseMove
+    | IncrementalSource.TouchMove
+    | IncrementalSource.Drag,
+) => void;
+
+export type mousePosition = {
+  x: number;
+  y: number;
+  id: number;
+  timeOffset: number;
+};
+
+export type mouseMovePos = {
+  x: number;
+  y: number;
+  id: number;
+  debugData: incrementalData;
+};
+
+export enum MouseInteractions {
+  MouseUp,
+  MouseDown,
+  Click,
+  ContextMenu,
+  DblClick,
+  Focus,
+  Blur,
+  TouchStart,
+  TouchMove_Departed, // we will start a separate observer for touch move event
+  TouchEnd,
+  TouchCancel,
+}
+
+export enum CanvasContext {
+  '2D',
+  WebGL,
+  WebGL2,
+}
+
+export type SerializedCanvasArg =
+  | {
+      rr_type: 'ArrayBuffer';
+      base64: string; // base64
+    }
+  | {
+      rr_type: 'Blob';
+      data: Array<CanvasArg>;
+      type?: string;
+    }
+  | {
+      rr_type: string;
+      src: string; // url of image
+    }
+  | {
+      rr_type: string;
+      args: Array<CanvasArg>;
+    }
+  | {
+      rr_type: string;
+      index: number;
+    };
+
+export type CanvasArg =
+  | SerializedCanvasArg
+  | string
+  | number
+  | boolean
+  | null
+  | CanvasArg[];
+
+type mouseInteractionParam = {
+  type: MouseInteractions;
+  id: number;
+  x: number;
+  y: number;
+};
+
+export type mouseInteractionCallBack = (d: mouseInteractionParam) => void;
+
+export type scrollPosition = {
+  id: number;
+  x: number;
+  y: number;
+};
+
+export type scrollCallback = (p: scrollPosition) => void;
+
+export type styleSheetAddRule = {
+  rule: string;
+  index?: number | number[];
+};
+
+export type styleSheetDeleteRule = {
+  index: number | number[];
+};
+
+export type styleSheetRuleParam = {
+  id?: number;
+  styleId?: number;
+  removes?: styleSheetDeleteRule[];
+  adds?: styleSheetAddRule[];
+  replace?: string;
+  replaceSync?: string;
+};
+
+export type styleSheetRuleCallback = (s: styleSheetRuleParam) => void;
+
+export type adoptedStyleSheetParam = {
+  // id indicates the node id of document or shadow DOMs' host element.
+  id: number;
+  // New CSSStyleSheets which have never appeared before.
+  styles?: {
+    styleId: number;
+    rules: styleSheetAddRule[];
+  }[];
+  // StyleSheet ids to be adopted.
+  styleIds: number[];
+};
+
+export type adoptedStyleSheetCallback = (a: adoptedStyleSheetParam) => void;
+
+export type styleDeclarationParam = {
+  id?: number;
+  styleId?: number;
+  index: number[];
+  set?: {
+    property: string;
+    value: string | null;
+    priority: string | undefined;
+  };
+  remove?: {
+    property: string;
+  };
+};
+
+export type styleDeclarationCallback = (s: styleDeclarationParam) => void;
+
+export type canvasMutationCommand = {
+  property: string;
+  args: Array<unknown>;
+  setter?: true;
+};
+
+export type canvasMutationParam =
+  | {
+      id: number;
+      type: CanvasContext;
+      commands: canvasMutationCommand[];
+    }
+  | ({
+      id: number;
+      type: CanvasContext;
+    } & canvasMutationCommand);
+
+export type canvasMutationWithType = {
+  type: CanvasContext;
+} & canvasMutationCommand;
+
+export type canvasMutationCallback = (p: canvasMutationParam) => void;
+
+export type canvasManagerMutationCallback = (
+  target: HTMLCanvasElement,
+  p: canvasMutationWithType,
+) => void;
+
+export type ImageBitmapDataURLWorkerParams = {
+  id: number;
+  bitmap: ImageBitmap;
+  width: number;
+  height: number;
+  dataURLOptions: DataURLOptions;
+};
+
+export type ImageBitmapDataURLWorkerResponse =
+  | {
+      id: number;
+    }
+  | {
+      id: number;
+      type: string;
+      base64: string;
+      width: number;
+      height: number;
+    };
+
+export type fontParam = {
+  family: string;
+  fontSource: string;
+  buffer: boolean;
+  descriptors?: FontFaceDescriptors;
+};
+
+export type fontCallback = (p: fontParam) => void;
+
+export type viewportResizeDimension = {
+  width: number;
+  height: number;
+};
+
+export type viewportResizeCallback = (d: viewportResizeDimension) => void;
+
+export type inputValue = {
+  text: string;
+  isChecked: boolean;
+
+  // `userTriggered` indicates if this event was triggered directly by user (userTriggered: true)
+  // or was triggered indirectly (userTriggered: false)
+  // Example of `userTriggered` in action:
+  // User clicks on radio element (userTriggered: true) which triggers the other radio element to change (userTriggered: false)
+  userTriggered?: boolean;
+};
+
+export type inputCallback = (v: inputValue & { id: number }) => void;
+
+export const enum MediaInteractions {
+  Play,
+  Pause,
+  Seeked,
+  VolumeChange,
+  RateChange,
+}
+
+export type mediaInteractionParam = {
+  type: MediaInteractions;
+  id: number;
+  currentTime?: number;
+  volume?: number;
+  muted?: boolean;
+  playbackRate?: number;
+};
+
+export type mediaInteractionCallback = (p: mediaInteractionParam) => void;
+
+export type DocumentDimension = {
+  x: number;
+  y: number;
+  // scale value relative to its parent iframe
+  relativeScale: number;
+  // scale value relative to the root iframe
+  absoluteScale: number;
+};
+
+export type SelectionRange = {
+  start: number;
+  startOffset: number;
+  end: number;
+  endOffset: number;
+};
+
+export type selectionParam = {
+  ranges: Array<SelectionRange>;
+};
+
+export type selectionCallback = (p: selectionParam) => void;
+
+export type DeprecatedMirror = {
+  map: {
+    [key: number]: INode;
+  };
+  getId: (n: Node) => number;
+  getNode: (id: number) => INode | null;
+  removeNodeFromMap: (n: Node) => void;
+  has: (id: number) => boolean;
+  reset: () => void;
+};
+
+export type throttleOptions = {
+  leading?: boolean;
+  trailing?: boolean;
+};
+
+export type listenerHandler = () => void;
+export type hookResetter = () => void;
+
+export type playerMetaData = {
+  startTime: number;
+  endTime: number;
+  totalTime: number;
+};
+
+export type actionWithDelay = {
+  doAction: () => void;
+  delay: number;
+};
+
+export type Handler = (event?: unknown) => void;
+
+export type Emitter = {
+  on(type: string, handler: Handler): void;
+  emit(type: string, event?: unknown): void;
+  off(type: string, handler: Handler): void;
+};
+
+export type Arguments<T> = T extends (...payload: infer U) => unknown
+  ? U
+  : unknown;
+
+export enum ReplayerEvents {
+  Start = 'start',
+  Pause = 'pause',
+  Resume = 'resume',
+  Resize = 'resize',
+  Finish = 'finish',
+  FullsnapshotRebuilded = 'fullsnapshot-rebuilded',
+  LoadStylesheetStart = 'load-stylesheet-start',
+  LoadStylesheetEnd = 'load-stylesheet-end',
+  SkipStart = 'skip-start',
+  SkipEnd = 'skip-end',
+  MouseInteraction = 'mouse-interaction',
+  EventCast = 'event-cast',
+  CustomEvent = 'custom-event',
+  Flush = 'flush',
+  StateChange = 'state-change',
+  PlayBack = 'play-back',
+  Destroy = 'destroy',
+}
+
+export type KeepIframeSrcFn = (src: string) => boolean;
+
+declare global {
+  interface Window {
+    FontFace: typeof FontFace;
+  }
+}
+
+export type IWindow = Window & typeof globalThis;
+
+export type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;

packages/types/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "target": "ES6",
+    "module": "commonjs",
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "removeComments": true,
+    "preserveConstEnums": true,
+    "sourceMap": true,
+    "rootDir": "src",
+    "outDir": "build",
+    "lib": ["es6", "dom"],
+    "skipLibCheck": true,
+    "declaration": true,
+    "importsNotUsedAsValues": "error"
+  },
+  "compileOnSave": true,
+  "exclude": ["test"],
+  "include": ["src"],
+  "references": [
+    {
+      "path": "../rrweb-snapshot"
+    }
+  ]
+}

packages/types/vite.config.js

@@ -0,0 +1,21 @@
+import path from 'path';
+import dts from 'vite-plugin-dts';
+/**
+ * @type {import('vite').UserConfig}
+ */
+export default {
+  build: {
+    // See https://vitejs.dev/guide/build.html#library-mode
+    lib: {
+      entry: path.resolve(__dirname, 'src/index.ts'),
+      name: 'rrwebTypes',
+    },
+
+    // Leaving this unminified so you can see what exactly gets included in
+    // the bundles
+    minify: false,
+
+    sourcemap: true,
+  },
+  plugins: [dts()],
+};