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 <[email protected]>
Co-authored-by: Justin Halsall <[email protected]>

Author: 3 people

.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-snapshot';
+import { NodeType as RRNodeType } from '@rrweb/types';
 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 {
-  NodeType as RRNodeType,
-  Mirror as NodeMirror,
-  type elementNode,
-} from 'rrweb-snapshot';
+import { type Mirror as NodeMirror } from 'rrweb-snapshot';
+import { NodeType as RRNodeType } from '@rrweb/types';
 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 {
-  NodeType as RRNodeType,
-  createMirror as createNodeMirror,
-} from 'rrweb-snapshot';
+import { createMirror as createNodeMirror } from 'rrweb-snapshot';
+import type { Mirror as NodeMirror } from 'rrweb-snapshot';
+import { NodeType as RRNodeType } from '@rrweb/types';
 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 {
-  NodeType as RRNodeType,
-  createMirror,
-  Mirror as NodeMirror,
-  serializedNodeWithId,
-} from 'rrweb-snapshot';
+import { createMirror, Mirror as NodeMirror } 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 { EventType, IncrementalSource } from '@rrweb/types';
+import type {
+  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 {
-  type serializedNode,
-  type serializedNodeWithId,
-  NodeType,
-  type attributes,
-  type MaskInputOptions,
-  type SlimDOMOptions,
-  type DataURLOptions,
-  type DialogAttributes,
-  type MaskTextFn,
-  type MaskInputFn,
-  type KeepIframeSrcFn,
-  type ICanvas,
-  type elementNode,
-  type serializedElementNodeWithId,
-  type mediaAttributes,
+import type {
+  MaskInputOptions,
+  SlimDOMOptions,
+  MaskTextFn,
+  MaskInputFn,
+  KeepIframeSrcFn,
+  ICanvas,
+  DialogAttributes,
 } from './types';
+import { NodeType } from '@rrweb/types';
+import type {
+  serializedNode,
+  serializedNodeWithId,
+  serializedElementNodeWithId,
+  elementNode,
+  attributes,
+  mediaAttributes,
+  DataURLOptions,
+} from '@rrweb/types';
 import {
   Mirror,
   is2DCanvasBlank,