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/rebuild.ts

@@ -4,11 +4,9 @@ import {
   NodeType,
   tagMap,
   elementNode,
-  idNodeMap,
-  INode,
   BuildCache,
 } from './types';
-import { isElement } from './utils';
+import { isElement, Mirror } from './utils';
 
 const tagMap: tagMap = {
   script: 'noscript',
@@ -215,7 +213,10 @@ function buildNode(
               n.attributes.rr_dataURL
             ) {
               // backup original img srcset
-              node.setAttribute('rrweb-original-srcset', n.attributes.srcset as string);
+              node.setAttribute(
+                'rrweb-original-srcset',
+                n.attributes.srcset as string,
+              );
             } else {
               node.setAttribute(name, value);
             }
@@ -307,16 +308,16 @@ export function buildNodeWithSN(
   n: serializedNodeWithId,
   options: {
     doc: Document;
-    map: idNodeMap;
+    mirror: Mirror;
     skipChild?: boolean;
     hackCss: boolean;
-    afterAppend?: (n: INode) => unknown;
+    afterAppend?: (n: Node) => unknown;
     cache: BuildCache;
   },
-): INode | null {
+): Node | null {
   const {
     doc,
-    map,
+    mirror,
     skipChild = false,
     hackCss = true,
     afterAppend,
@@ -328,7 +329,7 @@ export function buildNodeWithSN(
   }
   if (n.rootId) {
     console.assert(
-      ((map[n.rootId] as unknown) as Document) === doc,
+      (mirror.getNode(n.rootId) as Document) === doc,
       'Target document should has the same root id.',
     );
   }
@@ -362,8 +363,7 @@ export function buildNodeWithSN(
     node = doc;
   }
 
-  (node as INode).__sn = n;
-  map[n.id] = node as INode;
+  mirror.add(node, n);
 
   if (
     (n.type === NodeType.Document || n.type === NodeType.Element) &&
@@ -372,7 +372,7 @@ export function buildNodeWithSN(
     for (const childN of n.childNodes) {
       const childNode = buildNodeWithSN(childN, {
         doc,
-        map,
+        mirror,
         skipChild: false,
         hackCss,
         afterAppend,
@@ -394,27 +394,27 @@ export function buildNodeWithSN(
     }
   }
 
-  return node as INode;
+  return node;
 }
 
-function visit(idNodeMap: idNodeMap, onVisit: (node: INode) => void) {
-  function walk(node: INode) {
+function visit(mirror: Mirror, onVisit: (node: Node) => void) {
+  function walk(node: Node) {
     onVisit(node);
   }
 
-  for (const key in idNodeMap) {
-    if (idNodeMap[key]) {
-      walk(idNodeMap[key]);
+  for (const id of mirror.getIds()) {
+    if (mirror.has(id)) {
+      walk(mirror.getNode(id)!);
     }
   }
 }
 
-function handleScroll(node: INode) {
-  const n = node.__sn;
-  if (n.type !== NodeType.Element) {
+function handleScroll(node: Node, mirror: Mirror) {
+  const n = mirror.getMeta(node);
+  if (n?.type !== NodeType.Element) {
     return;
   }
-  const el = (node as Node) as HTMLElement;
+  const el = node as HTMLElement;
   for (const name in n.attributes) {
     if (!(n.attributes.hasOwnProperty(name) && name.startsWith('rr_'))) {
       continue;
@@ -433,29 +433,36 @@ function rebuild(
   n: serializedNodeWithId,
   options: {
     doc: Document;
-    onVisit?: (node: INode) => unknown;
+    onVisit?: (node: Node) => unknown;
     hackCss?: boolean;
-    afterAppend?: (n: INode) => unknown;
+    afterAppend?: (n: Node) => unknown;
     cache: BuildCache;
+    mirror: Mirror;
   },
-): [Node | null, idNodeMap] {
-  const { doc, onVisit, hackCss = true, afterAppend, cache } = options;
-  const idNodeMap: idNodeMap = {};
+): Node | null {
+  const {
+    doc,
+    onVisit,
+    hackCss = true,
+    afterAppend,
+    cache,
+    mirror = new Mirror(),
+  } = options;
   const node = buildNodeWithSN(n, {
     doc,
-    map: idNodeMap,
+    mirror,
     skipChild: false,
     hackCss,
     afterAppend,
     cache,
   });
-  visit(idNodeMap, (visitedNode) => {
+  visit(mirror, (visitedNode) => {
     if (onVisit) {
       onVisit(visitedNode);
     }
-    handleScroll(visitedNode);
+    handleScroll(visitedNode, mirror);
   });
-  return [node, idNodeMap];
+  return node;
 }
 
 export default rebuild;