Remove INode (node.__sn) and use Mirror as source of truth (#868)

* Move ids to weakmap

* Fix typo

* Move from INode to storing serialized data in mirror

* Update packages/rrweb-snapshot/src/rebuild.ts

Co-authored-by: Yun Feng <yun.feng@anu.edu.au>

* Remove unnessisary `as Node` typecastings

Fixes: https://github.com/rrweb-io/rrweb/pull/868#discussion_r842240758

* Remove unnessisary `as unknown as ...`

* Remove unnessisary `as unknown as ...`

* Reset mirror when recording starts

Solves: https://github.com/rrweb-io/rrweb/pull/868#discussion_r842249599

* API has changed for snapshot, change test to reflect that

* Allow for es5 compatibility

* Remove unnessisary as unknown as ... and change test to reflect the API change

* Refactor mirror to remove `nodeIdMap`

Fixes: https://github.com/rrweb-io/rrweb/pull/868#discussion_r842732696

Co-authored-by: Yun Feng <yun.feng@anu.edu.au>

packages/rrweb-snapshot/src/snapshot.ts

@@ -3,8 +3,6 @@ import {
   serializedNodeWithId,
   NodeType,
   attributes,
-  INode,
-  idNodeMap,
   MaskInputOptions,
   SlimDOMOptions,
   DataURLOptions,
@@ -14,6 +12,7 @@ import {
   ICanvas,
 } from './types';
 import {
+  Mirror,
   is2DCanvasBlank,
   isElement,
   isShadowRoot,
@@ -377,6 +376,7 @@ function serializeNode(
   n: Node,
   options: {
     doc: Document;
+    mirror: Mirror;
     blockClass: string | RegExp;
     blockSelector: string | null;
     maskTextClass: string | RegExp;
@@ -393,6 +393,7 @@ function serializeNode(
 ): serializedNode | false {
   const {
     doc,
+    mirror,
     blockClass,
     blockSelector,
     maskTextClass,
@@ -408,8 +409,8 @@ function serializeNode(
   } = options;
   // Only record root id when document object is not the base document
   let rootId: number | undefined;
-  if (((doc as unknown) as INode).__sn) {
-    const docId = ((doc as unknown) as INode).__sn.id;
+  if (mirror.getMeta(doc)) {
+    const docId = mirror.getId(doc);
     rootId = docId === 1 ? undefined : docId;
   }
   switch (n.nodeType) {
@@ -786,10 +787,10 @@ function slimDOMExcluded(
 }
 
 export function serializeNodeWithId(
-  n: Node | INode,
+  n: Node,
   options: {
     doc: Document;
-    map: idNodeMap;
+    mirror: Mirror;
     blockClass: string | RegExp;
     blockSelector: string | null;
     maskTextClass: string | RegExp;
@@ -805,14 +806,17 @@ export function serializeNodeWithId(
     inlineImages?: boolean;
     recordCanvas?: boolean;
     preserveWhiteSpace?: boolean;
-    onSerialize?: (n: INode) => unknown;
-    onIframeLoad?: (iframeINode: INode, node: serializedNodeWithId) => unknown;
+    onSerialize?: (n: Node) => unknown;
+    onIframeLoad?: (
+      iframeNode: HTMLIFrameElement,
+      node: serializedNodeWithId,
+    ) => unknown;
     iframeLoadTimeout?: number;
   },
 ): serializedNodeWithId | null {
   const {
     doc,
-    map,
+    mirror,
     blockClass,
     blockSelector,
     maskTextClass,
@@ -834,6 +838,7 @@ export function serializeNodeWithId(
   let { preserveWhiteSpace = true } = options;
   const _serializedNode = serializeNode(n, {
     doc,
+    mirror,
     blockClass,
     blockSelector,
     maskTextClass,
@@ -853,10 +858,10 @@ export function serializeNodeWithId(
     return null;
   }
 
-  let id;
-  // Try to reuse the previous id
-  if ('__sn' in n) {
-    id = n.__sn.id;
+  let id: number | undefined;
+  if (mirror.hasNode(n)) {
+    // Reuse the previous id
+    id = mirror.getId(n);
   } else if (
     slimDOMExcluded(_serializedNode, slimDOMOptions) ||
     (!preserveWhiteSpace &&
@@ -868,14 +873,16 @@ export function serializeNodeWithId(
   } else {
     id = genId();
   }
-  const serializedNode = Object.assign(_serializedNode, { id });
-  (n as INode).__sn = serializedNode;
   if (id === IGNORED_NODE) {
     return null; // slimDOM
   }
-  map[id] = n as INode;
+
+  const serializedNode = Object.assign(_serializedNode, { id });
+
+  mirror.add(n, serializedNode);
+
   if (onSerialize) {
-    onSerialize(n as INode);
+    onSerialize(n);
   }
   let recordChild = !skipChild;
   if (serializedNode.type === NodeType.Element) {
@@ -891,15 +898,15 @@ export function serializeNodeWithId(
   ) {
     if (
       slimDOMOptions.headWhitespace &&
-      _serializedNode.type === NodeType.Element &&
-      _serializedNode.tagName === 'head'
+      serializedNode.type === NodeType.Element &&
+      serializedNode.tagName === 'head'
       // would impede performance: || getComputedStyle(n)['white-space'] === 'normal'
     ) {
       preserveWhiteSpace = false;
     }
     const bypassOptions = {
       doc,
-      map,
+      mirror,
       blockClass,
       blockSelector,
       maskTextClass,
@@ -952,7 +959,7 @@ export function serializeNodeWithId(
         if (iframeDoc && onIframeLoad) {
           const serializedIframeNode = serializeNodeWithId(iframeDoc, {
             doc: iframeDoc,
-            map,
+            mirror,
             blockClass,
             blockSelector,
             maskTextClass,
@@ -974,7 +981,7 @@ export function serializeNodeWithId(
           });
 
           if (serializedIframeNode) {
-            onIframeLoad(n as INode, serializedIframeNode);
+            onIframeLoad(n as HTMLIFrameElement, serializedIframeNode);
           }
         }
       },
@@ -988,6 +995,7 @@ export function serializeNodeWithId(
 function snapshot(
   n: Document,
   options?: {
+    mirror?: Mirror;
     blockClass?: string | RegExp;
     blockSelector?: string | null;
     maskTextClass?: string | RegExp;
@@ -1001,13 +1009,17 @@ function snapshot(
     inlineImages?: boolean;
     recordCanvas?: boolean;
     preserveWhiteSpace?: boolean;
-    onSerialize?: (n: INode) => unknown;
-    onIframeLoad?: (iframeINode: INode, node: serializedNodeWithId) => unknown;
+    onSerialize?: (n: Node) => unknown;
+    onIframeLoad?: (
+      iframeNode: HTMLIFrameElement,
+      node: serializedNodeWithId,
+    ) => unknown;
     iframeLoadTimeout?: number;
     keepIframeSrcFn?: KeepIframeSrcFn;
   },
-): [serializedNodeWithId | null, idNodeMap] {
+): serializedNodeWithId | null {
   const {
+    mirror = new Mirror(),
     blockClass = 'rr-block',
     blockSelector = null,
     maskTextClass = 'rr-mask',
@@ -1026,7 +1038,6 @@ function snapshot(
     iframeLoadTimeout,
     keepIframeSrcFn = () => false,
   } = options || {};
-  const idNodeMap: idNodeMap = {};
   const maskInputOptions: MaskInputOptions =
     maskAllInputs === true
       ? {
@@ -1070,31 +1081,28 @@ function snapshot(
       : slimDOM === false
       ? {}
       : slimDOM;
-  return [
-    serializeNodeWithId(n, {
-      doc: n,
-      map: idNodeMap,
-      blockClass,
-      blockSelector,
-      maskTextClass,
-      maskTextSelector,
-      skipChild: false,
-      inlineStylesheet,
-      maskInputOptions,
-      maskTextFn,
-      maskInputFn,
-      slimDOMOptions,
-      dataURLOptions,
-      inlineImages,
-      recordCanvas,
-      preserveWhiteSpace,
-      onSerialize,
-      onIframeLoad,
-      iframeLoadTimeout,
-      keepIframeSrcFn,
-    }),
-    idNodeMap,
-  ];
+  return serializeNodeWithId(n, {
+    doc: n,
+    mirror,
+    blockClass,
+    blockSelector,
+    maskTextClass,
+    maskTextSelector,
+    skipChild: false,
+    inlineStylesheet,
+    maskInputOptions,
+    maskTextFn,
+    maskInputFn,
+    slimDOMOptions,
+    dataURLOptions,
+    inlineImages,
+    recordCanvas,
+    preserveWhiteSpace,
+    onSerialize,
+    onIframeLoad,
+    iframeLoadTimeout,
+    keepIframeSrcFn,
+  });
 }
 
 export function visitSnapshot(