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>

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,

packages/rrweb-snapshot/src/types.ts

@@ -1,126 +1,9 @@
-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 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>
->;
+import type { serializedNodeWithId } from '@rrweb/types';
 
 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;