chore: abstract types to shared package (#1593)

* chore: update types

* small typing change

* fix typing issue

* typed node

* add extra lint skip

* add changeset

---------

Co-authored-by: Eoghan Murray <eoghan@getthere.ie>
Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>

.changeset/soft-worms-tan.md

@@ -0,0 +1,11 @@
+---
+"@rrweb/all": patch
+"rrdom-nodejs": patch
+"rrdom": patch
+"rrweb-snapshot": major
+"rrweb": patch
+"@rrweb/rrweb-plugin-canvas-webrtc-record": patch
+---
+
+`NodeType` enum was moved from rrweb-snapshot to @rrweb/types
+The following types where moved from rrweb-snapshot to @rrweb/types: `documentNode`, `documentTypeNode`, `legacyAttributes`, `textNode`, `cdataNode`, `commentNode`, `elementNode`, `serializedNode`, `serializedNodeWithId`, `serializedElementNodeWithId`, `serializedTextNodeWithId`, `IMirror`, `INode`, `mediaAttributes`, `attributes` and `DataURLOptions`

packages/all/test/utils.ts

@@ -1,6 +1,6 @@
-import { NodeType } from 'rrweb-snapshot';
 import { expect } from 'vitest';
 import {
+  NodeType,
   EventType,
   IncrementalSource,
   eventWithTime,

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

@@ -1,6 +1,9 @@
-import type { Mirror } from 'rrweb-snapshot';
 import SimplePeer from 'simple-peer-light';
-import type { RecordPlugin, ICrossOriginIframeMirror } from '@rrweb/types';
+import type {
+  RecordPlugin,
+  ICrossOriginIframeMirror,
+  IMirror,
+} from '@rrweb/types';
 import type { WebRTCDataChannel } from './types';
 
 export const PLUGIN_NAME = 'rrweb/canvas-webrtc@1';
@@ -25,7 +28,7 @@ export type CrossOriginIframeMessageEventContent = {
 
 export class RRWebPluginCanvasWebRTCRecord {
   private peer: SimplePeer.Instance | null = null;
-  private mirror: Mirror | undefined;
+  private mirror: IMirror<Node> | undefined;
   private crossOriginIframeMirror: ICrossOriginIframeMirror | undefined;
   private streamMap: Map<number, MediaStream> = new Map();
   private incomingStreams = new Set<MediaStream>();

packages/rrdom-nodejs/package.json

@@ -56,6 +56,6 @@
     "cssstyle": "^2.3.0",
     "nwsapi": "2.2.0",
     "rrdom": "^2.0.0-alpha.17",
-    "rrweb-snapshot": "^2.0.0-alpha.17"
+    "@rrweb/types": "^2.0.0-alpha.17"
   }
 }

packages/rrdom-nodejs/src/document-nodejs.ts

@@ -1,5 +1,4 @@
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+import { NodeType as RRNodeType } from '@rrweb/types';
-import { NodeType as RRNodeType } from 'rrweb-snapshot';
 import type { NWSAPI } from 'nwsapi';
 import type { CSSStyleDeclaration as CSSStyleDeclarationType } from 'cssstyle';
 import {
@@ -345,7 +344,7 @@ export class RRStyleElement extends RRElement {
       for (const child of this.childNodes)
         if (child.RRNodeType === RRNodeType.Text)
           result += (child as RRText).textContent;
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-assignment
       this._sheet = cssom.parse(result);
     }
     return this._sheet;

packages/rrdom-nodejs/test/document-nodejs.test.ts

@@ -4,7 +4,7 @@
 import { describe, it, expect, beforeAll } from 'vitest';
 import * as fs from 'fs';
 import * as path from 'path';
-import { NodeType as RRNodeType } from 'rrweb-snapshot';
+import { NodeType as RRNodeType } from '@rrweb/types';
 import {
   RRCanvasElement,
   RRCDATASection,

packages/rrdom-nodejs/tsconfig.json

@@ -10,7 +10,7 @@
       "path": "../rrdom"
     },
     {
-      "path": "../rrweb-snapshot"
+      "path": "../types"
     }
   ]
 }

packages/rrdom/src/diff.ts

@@ -1,11 +1,9 @@
-import {
+import { type Mirror as NodeMirror } from 'rrweb-snapshot';
-  NodeType as RRNodeType,
+import { NodeType as RRNodeType } from '@rrweb/types';
-  Mirror as NodeMirror,
-  type elementNode,
-} from 'rrweb-snapshot';
 import type {
   canvasMutationData,
   canvasEventWithTime,
+  elementNode,
   inputData,
   scrollData,
   styleDeclarationData,

packages/rrdom/src/document.ts

@@ -1,4 +1,4 @@
-import { NodeType as RRNodeType } from 'rrweb-snapshot';
+import { NodeType as RRNodeType } from '@rrweb/types';
 import { parseCSSText, camelize, toCSSText } from './style';
 export interface IRRNode {
   parentElement: IRRNode | null;

packages/rrdom/src/index.ts

@@ -1,13 +1,9 @@
-import {
+import { createMirror as createNodeMirror } from 'rrweb-snapshot';
-  NodeType as RRNodeType,
+import type { Mirror as NodeMirror } from 'rrweb-snapshot';
-  createMirror as createNodeMirror,
+import { NodeType as RRNodeType } from '@rrweb/types';
-} from 'rrweb-snapshot';
 import type {
-  Mirror as NodeMirror,
   IMirror,
   serializedNodeWithId,
-} from 'rrweb-snapshot';
-import type {
   canvasMutationData,
   canvasEventWithTime,
   inputData,

packages/rrdom/test/diff.test.ts

@@ -5,12 +5,7 @@ import * as fs from 'fs';
 import * as path from 'path';
 import * as puppeteer from 'puppeteer';
 import { vi, MockInstance } from 'vitest';
-import {
+import { createMirror, Mirror as NodeMirror } from 'rrweb-snapshot';
-  NodeType as RRNodeType,
-  createMirror,
-  Mirror as NodeMirror,
-  serializedNodeWithId,
-} from 'rrweb-snapshot';
 import {
   buildFromDom,
   getDefaultSN,
@@ -27,8 +22,16 @@ import {
   sameNodeType,
 } from '../src/diff';
 import type { IRRElement, IRRNode } from '../src/document';
-import type { canvasMutationData, styleSheetRuleData } from '@rrweb/types';
+import type {
-import { EventType, IncrementalSource } from '@rrweb/types';
+  serializedNodeWithId,
+  canvasMutationData,
+  styleSheetRuleData,
+} from '@rrweb/types';
+import {
+  NodeType as RRNodeType,
+  EventType,
+  IncrementalSource,
+} from '@rrweb/types';
 
 const elementSn = {
   type: RRNodeType.Element,

packages/rrdom/test/diff/dialog.test.ts

@@ -3,11 +3,11 @@
  */
 import { vi, MockInstance } from 'vitest';
 import {
-  NodeType as RRNodeType,
   createMirror,
   Mirror as NodeMirror,
   serializedNodeWithId,
 } from 'rrweb-snapshot';
+import { NodeType as RRNodeType } from '@rrweb/types';
 import { RRDocument } from '../../src';
 import { diff, ReplayerHandler } from '../../src/diff';
 

packages/rrdom/test/document.test.ts

@@ -1,7 +1,7 @@
 /**
  * @jest-environment jsdom
  */
-import { NodeType as RRNodeType } from 'rrweb-snapshot';
+import { NodeType as RRNodeType } from '@rrweb/types';
 import {
   BaseRRDocument,
   BaseRRDocumentType,

packages/rrdom/test/virtual-dom.test.ts

@@ -6,18 +6,17 @@ import * as path from 'path';
 import * as puppeteer from 'puppeteer';
 import { vi } from 'vitest';
 import { JSDOM } from 'jsdom';
+import { buildNodeWithSN, Mirror } from 'rrweb-snapshot';
 import {
-  buildNodeWithSN,
   cdataNode,
   commentNode,
   documentNode,
   documentTypeNode,
   elementNode,
-  Mirror,
   NodeType,
   NodeType as RRNodeType,
   textNode,
-} from 'rrweb-snapshot';
+} from '@rrweb/types';
 import {
   buildFromDom,
   buildFromNode,

packages/rrweb-snapshot/package.json

@@ -54,6 +54,7 @@
   },
   "homepage": "https://github.com/rrweb-io/rrweb/tree/master/packages/rrweb-snapshot#readme",
   "devDependencies": {
+    "@rrweb/types": "^2.0.0-alpha.17",
     "@rrweb/utils": "^2.0.0-alpha.17",
     "@types/jsdom": "^20.0.0",
     "@types/node": "^18.15.11",

packages/rrweb-snapshot/src/rebuild.ts

@@ -2,13 +2,11 @@ import { mediaSelectorPlugin, pseudoClassPlugin } from './css';
 import {
   type serializedNodeWithId,
   type serializedElementNodeWithId,
-  type serializedTextNodeWithId,
   NodeType,
-  type tagMap,
   type elementNode,
-  type BuildCache,
   type legacyAttributes,
-} from './types';
+} from '@rrweb/types';
+import { type tagMap, type BuildCache } from './types';
 import { isElement, Mirror, isNodeMetaEqual } from './utils';
 import postcss from 'postcss';
 
@@ -90,7 +88,7 @@ export function applyCssSplits(
   hackCss: boolean,
   cache: BuildCache,
 ): void {
-  const childTextNodes: serializedTextNodeWithId[] = [];
+  const childTextNodes = [];
   for (const scn of n.childNodes) {
     if (scn.type === NodeType.Text) {
       childTextNodes.push(scn);

packages/rrweb-snapshot/src/snapshot.ts

@@ -1,20 +1,22 @@
-import {
+import type {
-  type serializedNode,
+  MaskInputOptions,
-  type serializedNodeWithId,
+  SlimDOMOptions,
-  NodeType,
+  MaskTextFn,
-  type attributes,
+  MaskInputFn,
-  type MaskInputOptions,
+  KeepIframeSrcFn,
-  type SlimDOMOptions,
+  ICanvas,
-  type DataURLOptions,
+  DialogAttributes,
-  type DialogAttributes,
-  type MaskTextFn,
-  type MaskInputFn,
-  type KeepIframeSrcFn,
-  type ICanvas,
-  type elementNode,
-  type serializedElementNodeWithId,
-  type mediaAttributes,
 } from './types';
+import { NodeType } from '@rrweb/types';
+import type {
+  serializedNode,
+  serializedNodeWithId,
+  serializedElementNodeWithId,
+  elementNode,
+  attributes,
+  mediaAttributes,
+  DataURLOptions,
+} from '@rrweb/types';
 import {
   Mirror,
   is2DCanvasBlank,

packages/rrweb-snapshot/src/types.ts

@@ -1,126 +1,9 @@
-export enum NodeType {
+import type { serializedNodeWithId } from '@rrweb/types';
-  Document,
-  DocumentType,
-  Element,
-  Text,
-  CDATA,
-  Comment,
-}
-
-export type documentNode = {
-  type: NodeType.Document;
-  childNodes: serializedNodeWithId[];
-  compatMode?: string;
-};
-
-export type documentTypeNode = {
-  type: NodeType.DocumentType;
-  name: string;
-  publicId: string;
-  systemId: string;
-};
-
-type cssTextKeyAttr = {
-  _cssText?: string;
-};
-
-export type attributes = cssTextKeyAttr & {
-  [key: string]:
-    | string
-    | number // properties e.g. rr_scrollLeft or rr_mediaCurrentTime
-    | true // e.g. checked  on <input type="radio">
-    | null; // an indication that an attribute was removed (during a mutation)
-};
-
-export type legacyAttributes = {
-  /**
-   * @deprecated old bug in rrweb was causing these to always be set
-   * @see https://github.com/rrweb-io/rrweb/pull/651
-   */
-  selected: false;
-};
-
-export type elementNode = {
-  type: NodeType.Element;
-  tagName: string;
-  attributes: attributes;
-  childNodes: serializedNodeWithId[];
-  isSVG?: true;
-  needBlock?: boolean;
-  // This is a custom element or not.
-  isCustom?: true;
-};
-
-export type textNode = {
-  type: NodeType.Text;
-  textContent: string;
-  /**
-   * @deprecated styles are now always snapshotted against parent <style> element
-   * style mutations can still happen via an added textNode, but they don't need this attribute for correct replay
-   */
-  isStyle?: true;
-};
-
-export type cdataNode = {
-  type: NodeType.CDATA;
-  textContent: '';
-};
-
-export type commentNode = {
-  type: NodeType.Comment;
-  textContent: string;
-};
-
-export type serializedNode = (
-  | documentNode
-  | documentTypeNode
-  | elementNode
-  | textNode
-  | cdataNode
-  | commentNode
-) & {
-  rootId?: number;
-  isShadowHost?: boolean;
-  isShadow?: boolean;
-};
-
-export type serializedNodeWithId = serializedNode & { id: number };
-
-export type serializedElementNodeWithId = Extract<
-  serializedNodeWithId,
-  Record<'type', NodeType.Element>
->;
-
-export type serializedTextNodeWithId = Extract<
-  serializedNodeWithId,
-  Record<'type', NodeType.Text>
->;
 
 export type tagMap = {
   [key: string]: string;
 };
 
-export type mediaAttributes = {
-  rr_mediaState: 'played' | 'paused';
-  rr_mediaCurrentTime: number;
-  /**
-   * for backwards compatibility this is optional but should always be set
-   */
-  rr_mediaPlaybackRate?: number;
-  /**
-   * for backwards compatibility this is optional but should always be set
-   */
-  rr_mediaMuted?: boolean;
-  /**
-   * for backwards compatibility this is optional but should always be set
-   */
-  rr_mediaLoop?: boolean;
-  /**
-   * for backwards compatibility this is optional but should always be set
-   */
-  rr_mediaVolume?: number;
-};
-
 export type DialogAttributes = {
   open: string;
   /**
@@ -138,37 +21,10 @@ export type DialogAttributes = {
   // rr_open_mode_index?: number;
 };
 
-// @deprecated
-export interface INode extends Node {
-  __sn: serializedNodeWithId;
-}
-
 export interface ICanvas extends HTMLCanvasElement {
   __context: string;
 }
 
-export interface IMirror<TNode> {
-  getId(n: TNode | undefined | null): number;
-
-  getNode(id: number): TNode | null;
-
-  getIds(): number[];
-
-  getMeta(n: TNode): serializedNodeWithId | null;
-
-  removeNodeFromMap(n: TNode): void;
-
-  has(id: number): boolean;
-
-  hasNode(node: TNode): boolean;
-
-  add(n: TNode, meta: serializedNodeWithId): void;
-
-  replace(id: number, n: TNode): void;
-
-  reset(): void;
-}
-
 export type idNodeMap = Map<number, Node>;
 
 export type nodeMetaMap = WeakMap<Node, serializedNodeWithId>;
@@ -210,11 +66,6 @@ export type SlimDOMOptions = Partial<{
   headTitleMutations: boolean;
 }>;
 
-export type DataURLOptions = Partial<{
-  type: string;
-  quality: number;
-}>;
-
 export type MaskTextFn = (text: string, element: HTMLElement | null) => string;
 export type MaskInputFn = (text: string, element: HTMLElement) => string;
 

packages/rrweb-snapshot/src/utils.ts

@@ -3,6 +3,10 @@ import type {
   MaskInputFn,
   MaskInputOptions,
   nodeMetaMap,
+} from './types';
+
+import { NodeType } from '@rrweb/types';
+import type {
   IMirror,
   serializedNodeWithId,
   serializedNode,
@@ -10,9 +14,8 @@ import type {
   documentTypeNode,
   textNode,
   elementNode,
-} from './types';
+} from '@rrweb/types';
 import dom from '@rrweb/utils';
-import { NodeType } from './types';
 
 export function isElement(n: Node): n is Element {
   return n.nodeType === n.ELEMENT_NODE;

packages/rrweb-snapshot/test/css.test.ts

@@ -7,12 +7,12 @@ import postcss, { type AcceptedPlugin } from 'postcss';
 import { JSDOM } from 'jsdom';
 import { splitCssText, stringifyStylesheet } from './../src/utils';
 import { applyCssSplits } from './../src/rebuild';
-import {
+import type {
-  NodeType,
+  serializedElementNodeWithId,
-  type serializedElementNodeWithId,
+  BuildCache,
-  type BuildCache,
+  textNode,
-  type textNode,
 } from '../src/types';
+import { NodeType } from '@rrweb/types';
 import { Window } from 'happy-dom';
 
 describe('css parser', () => {

packages/rrweb-snapshot/test/rebuild.test.ts

@@ -9,7 +9,7 @@ import {
   buildNodeWithSN,
   createCache,
 } from '../src/rebuild';
-import { NodeType } from '../src/types';
+import { NodeType } from '@rrweb/types';
 import { createMirror, Mirror, normalizeCssString } from '../src/utils';
 
 const expect = _expect as unknown as {

packages/rrweb-snapshot/test/utils.test.ts

@@ -2,14 +2,14 @@
  * @vitest-environment jsdom
  */
 import { describe, it, test, expect } from 'vitest';
-import { NodeType, serializedNode } from '../src/types';
 import {
   escapeImportStatement,
   extractFileExtension,
   fixSafariColons,
   isNodeMetaEqual,
 } from '../src/utils';
-import type { serializedNodeWithId } from 'rrweb-snapshot';
+import { NodeType } from '@rrweb/types';
+import type { serializedNode, serializedNodeWithId } from '@rrweb/types';
 
 describe('utils', () => {
   describe('isNodeMetaEqual()', () => {

packages/rrweb-snapshot/tsconfig.json

@@ -7,6 +7,9 @@
     "tsBuildInfoFile": "./tsconfig.tsbuildinfo"
   },
   "references": [
+    {
+      "path": "../types"
+    },
     {
       "path": "../utils"
     }

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

@@ -1,11 +1,12 @@
-import type { Mirror, serializedNodeWithId } from 'rrweb-snapshot';
+import type { Mirror } from 'rrweb-snapshot';
-import { genId, NodeType } from 'rrweb-snapshot';
+import { genId } from 'rrweb-snapshot';
 import type { CrossOriginIframeMessageEvent } from '../types';
 import CrossOriginIframeMirror from './cross-origin-iframe-mirror';
-import { EventType, IncrementalSource } from '@rrweb/types';
+import { EventType, NodeType, IncrementalSource } from '@rrweb/types';
 import type {
   eventWithTime,
   eventWithoutTime,
+  serializedNodeWithId,
   mutationCallBack,
 } from '@rrweb/types';
 import type { StylesheetManager } from './stylesheet-manager';

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

@@ -1,4 +1,4 @@
-import type { ICanvas, Mirror, DataURLOptions } from 'rrweb-snapshot';
+import type { ICanvas, Mirror } from 'rrweb-snapshot';
 import type {
   blockClass,
   canvasManagerMutationCallback,
@@ -8,6 +8,7 @@ import type {
   IWindow,
   listenerHandler,
   CanvasArg,
+  DataURLOptions,
 } from '@rrweb/types';
 import { isBlocked } from '../../../utils';
 import { CanvasContext } from '@rrweb/types';

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

@@ -1,6 +1,7 @@
-import type { elementNode, serializedNodeWithId } from 'rrweb-snapshot';
 import { stringifyRule } from 'rrweb-snapshot';
 import type {
+  elementNode,
+  serializedNodeWithId,
   adoptedStyleSheetCallback,
   adoptedStyleSheetParam,
   attributeMutation,

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

@@ -1,6 +1,6 @@
 import { encode } from 'base64-arraybuffer';
-import type { DataURLOptions } from 'rrweb-snapshot';
 import type {
+  DataURLOptions,
   ImageBitmapDataURLWorkerParams,
   ImageBitmapDataURLWorkerResponse,
 } from '@rrweb/types';

packages/rrweb/src/replay/index.ts

@@ -2,13 +2,10 @@ import {
   rebuild,
   adaptCssForReplay,
   buildNodeWithSN,
-  NodeType,
   type BuildCache,
   createCache,
   Mirror,
   createMirror,
-  type attributes,
-  type serializedElementNodeWithId,
   toLowerCase,
 } from 'rrweb-snapshot';
 import {
@@ -40,12 +37,14 @@ import {
 } from './machine';
 import type { playerConfig, missingNodeMap } from '../types';
 import {
+  NodeType,
   EventType,
   IncrementalSource,
   MouseInteractions,
   ReplayerEvents,
 } from '@rrweb/types';
 import type {
+  attributes,
   fullSnapshotEvent,
   eventWithTime,
   playerMetaData,
@@ -70,6 +69,7 @@ import type {
   styleSheetRuleData,
   styleDeclarationData,
   adoptedStyleSheetData,
+  serializedElementNodeWithId,
 } from '@rrweb/types';
 import {
   polyfill,

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

@@ -1,8 +1,9 @@
-import { type Emitter, MediaInteractions, ReplayerEvents } from '@rrweb/types';
+import type { Emitter } from '@rrweb/types';
+import { MediaInteractions, ReplayerEvents } from '@rrweb/types';
 import type { RRMediaElement } from 'rrdom';
 import type { createPlayerService, createSpeedService } from '../machine';
-import type { Mirror, mediaAttributes } from 'rrweb-snapshot';
+import type { Mirror } from 'rrweb-snapshot';
-import type { mediaInteractionData } from '@rrweb/types';
+import type { mediaInteractionData, mediaAttributes } from '@rrweb/types';
 
 type MediaState = {
   isPlaying: boolean;

packages/rrweb/src/types.ts

@@ -4,7 +4,6 @@ import type {
   SlimDOMOptions,
   MaskInputFn,
   MaskTextFn,
-  DataURLOptions,
 } from 'rrweb-snapshot';
 import type { IframeManager } from './record/iframe-manager';
 import type { ShadowDomManager } from './record/shadow-dom-manager';
@@ -13,6 +12,7 @@ import type { RRNode } from 'rrdom';
 import type { CanvasManager } from './record/observers/canvas/canvas-manager';
 import type { StylesheetManager } from './record/stylesheet-manager';
 import type {
+  DataURLOptions,
   addedNodeMutation,
   blockClass,
   canvasMutationCallback,

packages/rrweb/src/utils.ts

@@ -8,8 +8,9 @@ import type {
   IWindow,
   DeprecatedMirror,
   textMutation,
+  IMirror,
 } from '@rrweb/types';
-import type { IMirror, Mirror, SlimDOMOptions } from 'rrweb-snapshot';
+import type { Mirror, SlimDOMOptions } from 'rrweb-snapshot';
 import { isShadowRoot, IGNORED_NODE, classMatchesRegex } from 'rrweb-snapshot';
 import { RRNode, RRIFrameElement, BaseRRNode } from 'rrdom';
 import dom from '@rrweb/utils';

packages/rrweb/test/integration.test.ts

@@ -14,8 +14,8 @@ import {
   ISuite,
 } from './utils';
 import type { recordOptions } from '../src/types';
-import { eventWithTime, EventType, RecordPlugin } from '@rrweb/types';
+import { eventWithTime, NodeType, EventType } from '@rrweb/types';
-import { visitSnapshot, NodeType } from 'rrweb-snapshot';
+import { visitSnapshot } from 'rrweb-snapshot';
 
 describe('record integration tests', function (this: ISuite) {
   vi.setConfig({ testTimeout: 10_000 });

packages/rrweb/test/utils.ts

@@ -1,5 +1,5 @@
-import { NodeType } from 'rrweb-snapshot';
 import {
+  NodeType,
   EventType,
   IncrementalSource,
   eventWithTime,

packages/types/package.json

@@ -49,9 +49,6 @@
     "vite": "^5.3.1",
     "vite-plugin-dts": "^3.9.1"
   },
-  "dependencies": {
-    "rrweb-snapshot": "^2.0.0-alpha.17"
-  },
   "browserslist": [
     "supports es6-class"
   ]

packages/types/src/index.ts

@@ -1,10 +1,3 @@
-import type {
-  serializedNodeWithId,
-  Mirror,
-  INode,
-  DataURLOptions,
-} from 'rrweb-snapshot';
-
 export enum EventType {
   DomContentLoaded,
   Load,
@@ -254,7 +247,7 @@ export type RecordPlugin<TOptions = unknown> = {
   ) => listenerHandler;
   eventProcessor?: <TExtend>(event: eventWithTime) => eventWithTime & TExtend;
   getMirror?: (mirrors: {
-    nodeMirror: Mirror;
+    nodeMirror: IMirror<Node>;
     crossOriginIframeMirror: ICrossOriginIframeMirror;
     crossOriginIframeStyleMirror: ICrossOriginIframeMirror;
   }) => void;
@@ -615,6 +608,13 @@ export type customElementParam = {
 
 export type customElementCallback = (c: customElementParam) => void;
 
+/**
+ *  @deprecated
+ */
+interface INode extends Node {
+  __sn: serializedNodeWithId;
+}
+
 export type DeprecatedMirror = {
   map: {
     [key: number]: INode;
@@ -705,6 +705,147 @@ export type TakeTypedKeyValues<Obj extends object, Type> = Pick<
   TakeTypeHelper<Obj, Type>[keyof TakeTypeHelper<Obj, Type>]
 >;
 
+export enum NodeType {
+  Document,
+  DocumentType,
+  Element,
+  Text,
+  CDATA,
+  Comment,
+}
+
+export type documentNode = {
+  type: NodeType.Document;
+  childNodes: serializedNodeWithId[];
+  compatMode?: string;
+};
+
+export type documentTypeNode = {
+  type: NodeType.DocumentType;
+  name: string;
+  publicId: string;
+  systemId: string;
+};
+
+type cssTextKeyAttr = {
+  _cssText?: string;
+};
+
+export type attributes = cssTextKeyAttr & {
+  [key: string]:
+    | string
+    | number // properties e.g. rr_scrollLeft or rr_mediaCurrentTime
+    | true // e.g. checked  on <input type="radio">
+    | null; // an indication that an attribute was removed (during a mutation)
+};
+
+export type legacyAttributes = {
+  /**
+   * @deprecated old bug in rrweb was causing these to always be set
+   * @see https://github.com/rrweb-io/rrweb/pull/651
+   */
+  selected: false;
+};
+
+export type mediaAttributes = {
+  rr_mediaState: 'played' | 'paused';
+  rr_mediaCurrentTime: number;
+  /**
+   * for backwards compatibility this is optional but should always be set
+   */
+  rr_mediaPlaybackRate?: number;
+  /**
+   * for backwards compatibility this is optional but should always be set
+   */
+  rr_mediaMuted?: boolean;
+  /**
+   * for backwards compatibility this is optional but should always be set
+   */
+  rr_mediaLoop?: boolean;
+  /**
+   * for backwards compatibility this is optional but should always be set
+   */
+  rr_mediaVolume?: number;
+};
+
+export type elementNode = {
+  type: NodeType.Element;
+  tagName: string;
+  attributes: attributes;
+  childNodes: serializedNodeWithId[];
+  isSVG?: true;
+  needBlock?: boolean;
+  // This is a custom element or not.
+  isCustom?: true;
+};
+
+export type textNode = {
+  type: NodeType.Text;
+  textContent: string;
+  /**
+   * @deprecated styles are now always snapshotted against parent <style> element
+   * style mutations can still happen via an added textNode, but they don't need this attribute for correct replay
+   */
+  isStyle?: true;
+};
+
+export type cdataNode = {
+  type: NodeType.CDATA;
+  textContent: '';
+};
+
+export type commentNode = {
+  type: NodeType.Comment;
+  textContent: string;
+};
+
+export type serializedNode = (
+  | documentNode
+  | documentTypeNode
+  | elementNode
+  | textNode
+  | cdataNode
+  | commentNode
+) & {
+  rootId?: number;
+  isShadowHost?: boolean;
+  isShadow?: boolean;
+};
+
+export type serializedNodeWithId = serializedNode & { id: number };
+
+export type serializedElementNodeWithId = Extract<
+  serializedNodeWithId,
+  Record<'type', NodeType.Element>
+>;
+
+export interface IMirror<TNode> {
+  getId(n: TNode | undefined | null): number;
+
+  getNode(id: number): TNode | null;
+
+  getIds(): number[];
+
+  getMeta(n: TNode): serializedNodeWithId | null;
+
+  removeNodeFromMap(n: TNode): void;
+
+  has(id: number): boolean;
+
+  hasNode(node: TNode): boolean;
+
+  add(n: TNode, meta: serializedNodeWithId): void;
+
+  replace(id: number, n: TNode): void;
+
+  reset(): void;
+}
+
+export type DataURLOptions = Partial<{
+  type: string;
+  quality: number;
+}>;
+
 // Types for @rrweb/packer
 export type PackFn = (event: eventWithTime) => string;
 export type UnpackFn = (raw: string) => eventWithTime;

packages/types/tsconfig.json

@@ -6,9 +6,5 @@
     "rootDir": "src",
     "tsBuildInfoFile": "./tsconfig.tsbuildinfo"
   },
-  "references": [
+  "references": []
-    {
-      "path": "../rrweb-snapshot"
-    }
-  ]
 }