Do away with the second pass as we can handle shadow DOM in the first…

… pass

packages/rrweb/src/record/mutation.ts

@@ -18,7 +18,6 @@ import type {
   attributeCursor,
   removedNodeMutation,
   addedNodeMutation,
-  Optional,
 } from '@rrweb/types';
 import {
   isBlocked,
@@ -34,104 +33,6 @@ import {
 } from '../utils';
 import dom from '@rrweb/utils';
 
-type DoubleLinkedListNode = {
-  previous: DoubleLinkedListNode | null;
-  next: DoubleLinkedListNode | null;
-  value: NodeInLinkedList;
-};
-type NodeInLinkedList = Node & {
-  __ln: DoubleLinkedListNode;
-};
-
-function isNodeInLinkedList(n: Node | NodeInLinkedList): n is NodeInLinkedList {
-  return '__ln' in n;
-}
-
-class DoubleLinkedList {
-  public length = 0;
-  public head: DoubleLinkedListNode | null = null;
-  public tail: DoubleLinkedListNode | null = null;
-
-  public get(position: number) {
-    if (position >= this.length) {
-      throw new Error('Position outside of list range');
-    }
-
-    let current = this.head;
-    for (let index = 0; index < position; index++) {
-      current = current?.next || null;
-    }
-    return current;
-  }
-
-  public addNode(n: Node) {
-    const node: DoubleLinkedListNode = {
-      value: n as NodeInLinkedList,
-      previous: null,
-      next: null,
-    };
-    (n as NodeInLinkedList).__ln = node;
-    if (n.previousSibling && isNodeInLinkedList(n.previousSibling)) {
-      const current = n.previousSibling.__ln.next;
-      node.next = current;
-      node.previous = n.previousSibling.__ln;
-      n.previousSibling.__ln.next = node;
-      if (current) {
-        current.previous = node;
-      }
-    } else if (
-      n.nextSibling &&
-      isNodeInLinkedList(n.nextSibling) &&
-      n.nextSibling.__ln.previous
-    ) {
-      const current = n.nextSibling.__ln.previous;
-      node.previous = current;
-      node.next = n.nextSibling.__ln;
-      n.nextSibling.__ln.previous = node;
-      if (current) {
-        current.next = node;
-      }
-    } else {
-      if (this.head) {
-        this.head.previous = node;
-      }
-      node.next = this.head;
-      this.head = node;
-    }
-    if (node.next === null) {
-      this.tail = node;
-    }
-    this.length++;
-  }
-
-  public removeNode(n: NodeInLinkedList) {
-    const current = n.__ln;
-    if (!this.head) {
-      return;
-    }
-
-    if (!current.previous) {
-      this.head = current.next;
-      if (this.head) {
-        this.head.previous = null;
-      } else {
-        this.tail = null;
-      }
-    } else {
-      current.previous.next = current.next;
-      if (current.next) {
-        current.next.previous = current.previous;
-      } else {
-        this.tail = current.previous;
-      }
-    }
-    if (n.__ln) {
-      delete (n as Optional<NodeInLinkedList, '__ln'>).__ln;
-    }
-    this.length--;
-  }
-}
-
 const moveKey = (id: number, parentId: number) => `${id}@${parentId}`;
 
 /**
@@ -272,11 +173,6 @@ export default class MutationBuffer {
     const adds: addedNodeMutation[] = [];
     const addedIds = new Set<number>();
 
-    /**
-     * Sometimes child node may be pushed before its newly added
-     * parent, so we init a queue to store these nodes.
-     */
-    const addList = new DoubleLinkedList();
     const getNextId = (n: Node): number | null => {
       let ns: Node | null = n;
       let nextId: number | null = IGNORED_NODE; // slimDOM: ignored
@@ -288,14 +184,22 @@ export default class MutationBuffer {
     };
     const pushAdd = (n: Node) => {
       const parent = dom.parentNode(n);
-      if (!parent || !inDom(n)) {
+      if (!parent) {
         return;
       }
 
-      const parentId = isShadowRoot(parent)
+      let parentId = isShadowRoot(parent)
         ? this.mirror.getId(getShadowHost(n))
         : this.mirror.getId(parent);
 
+      // If the node is the direct child of a shadow root, we treat the shadow host as its parent node.
+      if (parentId === -1 && parent.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+        const shadowHost = dom.host(parent as ShadowRoot);
+        parentId = this.mirror.getId(shadowHost);
+      } else if (!inDom(n)) {
+        return;
+      }
+
       let cssCaptured = false;
       if (n.nodeType === Node.TEXT_NODE) {
         const parentTag = (parent as Element).tagName;
@@ -311,7 +215,7 @@ export default class MutationBuffer {
 
       const nextId = getNextId(n);
       if (parentId === -1 || nextId === -1) {
-        return addList.addNode(n);
+        return;
       }
       const sn = serializeNodeWithId(n, {
         doc: this.doc,
@@ -374,7 +278,7 @@ export default class MutationBuffer {
       ) {
         continue;
       }
-      pushAdd(n);
+      this.addedSet.add(n);
     }
 
     let n = null;
@@ -406,65 +310,6 @@ export default class MutationBuffer {
       }
     }
 
-    let candidate: DoubleLinkedListNode | null = null;
-    while (addList.length) {
-      let node: DoubleLinkedListNode | null = null;
-      if (candidate) {
-        const parentId = this.mirror.getId(dom.parentNode(candidate.value));
-        const nextId = getNextId(candidate.value);
-        if (parentId !== -1 && nextId !== -1) {
-          node = candidate;
-        }
-      }
-      if (!node) {
-        let tailNode = addList.tail;
-        while (tailNode) {
-          const _node = tailNode;
-          tailNode = tailNode.previous;
-          // ensure _node is defined before attempting to find value
-          if (_node) {
-            const parentId = this.mirror.getId(dom.parentNode(_node.value));
-            const nextId = getNextId(_node.value);
-
-            if (nextId === -1) continue;
-            // nextId !== -1 && parentId !== -1
-            else if (parentId !== -1) {
-              node = _node;
-              break;
-            }
-            // nextId !== -1 && parentId === -1 This branch can happen if the node is the child of shadow root
-            else {
-              const unhandledNode = _node.value;
-              const parent = dom.parentNode(unhandledNode);
-              // If the node is the direct child of a shadow root, we treat the shadow host as its parent node.
-              if (parent && parent.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
-                const shadowHost = dom.host(parent as ShadowRoot);
-                const parentId = this.mirror.getId(shadowHost);
-                if (parentId !== -1) {
-                  node = _node;
-                  break;
-                }
-              }
-            }
-          }
-        }
-      }
-      if (!node) {
-        /**
-         * If all nodes in queue could not find a serialized parent,
-         * it may be a bug or corner case. We need to escape the
-         * dead while loop at once.
-         */
-        while (addList.head) {
-          addList.removeNode(addList.head.value);
-        }
-        break;
-      }
-      candidate = node.previous;
-      addList.removeNode(node.value);
-      pushAdd(node.value);
-    }
-
     const payload = {
       texts: this.texts
         .map((text) => {