ref: refactor pushadd to class member method

.changeset/strange-papayas-pump.md

@@ -0,0 +1,5 @@
+---
+"rrweb": minor
+---
+
+Refactor pushAdd to a class member method

packages/rrweb/src/record/mutation.ts

@@ -134,6 +134,16 @@ class DoubleLinkedList {
 
 const moveKey = (id: number, parentId: number) => `${id}@${parentId}`;
 
+const getNextId = (n: Node, mirror: observerParam['mirror']): number | null => {
+  let ns: Node | null = n;
+  let nextId: number | null = IGNORED_NODE; // slimDOM: ignored
+  while (nextId === IGNORED_NODE) {
+    ns = ns && ns.nextSibling;
+    nextId = ns && mirror.getId(ns);
+  }
+  return nextId;
+};
+
 /**
  * controls behaviour of a MutationObserver
  */
@@ -260,6 +270,85 @@ export default class MutationBuffer {
     this.emit(); // clears buffer if not locked/frozen
   };
 
+  private pushAdd(
+    n: Node,
+    adds: addedNodeMutation[],
+    addList: DoubleLinkedList,
+    addedIds: Set<number>,
+  ) {
+    const parent = dom.parentNode(n);
+    if (!parent || !inDom(n)) {
+      return;
+    }
+    let cssCaptured = false;
+    if (n.nodeType === Node.TEXT_NODE) {
+      const parentTag = (parent as Element).tagName;
+      if (parentTag === 'TEXTAREA') {
+        // genTextAreaValueMutation already called via parent
+        return;
+      } else if (parentTag === 'STYLE' && this.addedSet.has(parent)) {
+        // css content will be recorded via parent's _cssText attribute when
+        // mutation adds entire <style> element
+        cssCaptured = true;
+      }
+    }
+
+    const parentId = isShadowRoot(parent)
+      ? this.mirror.getId(getShadowHost(n))
+      : this.mirror.getId(parent);
+
+    const nextId = getNextId(n);
+    if (parentId === -1 || nextId === -1) {
+      return addList.addNode(n);
+    }
+    const sn = serializeNodeWithId(n, {
+      doc: this.doc,
+      mirror: this.mirror,
+      blockClass: this.blockClass,
+      blockSelector: this.blockSelector,
+      maskTextClass: this.maskTextClass,
+      maskTextSelector: this.maskTextSelector,
+      skipChild: true,
+      newlyAddedElement: true,
+      inlineStylesheet: this.inlineStylesheet,
+      maskInputOptions: this.maskInputOptions,
+      maskTextFn: this.maskTextFn,
+      maskInputFn: this.maskInputFn,
+      slimDOMOptions: this.slimDOMOptions,
+      dataURLOptions: this.dataURLOptions,
+      recordCanvas: this.recordCanvas,
+      inlineImages: this.inlineImages,
+      onSerialize: (currentN) => {
+        if (isSerializedIframe(currentN, this.mirror)) {
+          this.iframeManager.addIframe(currentN as HTMLIFrameElement);
+        }
+        if (isSerializedStylesheet(currentN, this.mirror)) {
+          this.stylesheetManager.trackLinkElement(currentN as HTMLLinkElement);
+        }
+        if (hasShadowRoot(n)) {
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          this.shadowDomManager.addShadowRoot(dom.shadowRoot(n)!, this.doc);
+        }
+      },
+      onIframeLoad: (iframe, childSn) => {
+        this.iframeManager.attachIframe(iframe, childSn);
+        this.shadowDomManager.observeAttachShadow(iframe);
+      },
+      onStylesheetLoad: (link, childSn) => {
+        this.stylesheetManager.attachLinkElement(link, childSn);
+      },
+      cssCaptured,
+    });
+    if (sn) {
+      adds.push({
+        parentId,
+        nextId,
+        node: sn,
+      });
+      addedIds.add(sn.id);
+    }
+  }
+
   public emit = () => {
     if (this.frozen || this.locked) {
       return;
@@ -285,82 +374,6 @@ export default class MutationBuffer {
       }
       return nextId;
     };
-    const pushAdd = (n: Node) => {
-      const parent = dom.parentNode(n);
-      if (!parent || !inDom(n)) {
-        return;
-      }
-      let cssCaptured = false;
-      if (n.nodeType === Node.TEXT_NODE) {
-        const parentTag = (parent as Element).tagName;
-        if (parentTag === 'TEXTAREA') {
-          // genTextAreaValueMutation already called via parent
-          return;
-        } else if (parentTag === 'STYLE' && this.addedSet.has(parent)) {
-          // css content will be recorded via parent's _cssText attribute when
-          // mutation adds entire <style> element
-          cssCaptured = true;
-        }
-      }
-
-      const parentId = isShadowRoot(parent)
-        ? this.mirror.getId(getShadowHost(n))
-        : this.mirror.getId(parent);
-
-      const nextId = getNextId(n);
-      if (parentId === -1 || nextId === -1) {
-        return addList.addNode(n);
-      }
-      const sn = serializeNodeWithId(n, {
-        doc: this.doc,
-        mirror: this.mirror,
-        blockClass: this.blockClass,
-        blockSelector: this.blockSelector,
-        maskTextClass: this.maskTextClass,
-        maskTextSelector: this.maskTextSelector,
-        skipChild: true,
-        newlyAddedElement: true,
-        inlineStylesheet: this.inlineStylesheet,
-        maskInputOptions: this.maskInputOptions,
-        maskTextFn: this.maskTextFn,
-        maskInputFn: this.maskInputFn,
-        slimDOMOptions: this.slimDOMOptions,
-        dataURLOptions: this.dataURLOptions,
-        recordCanvas: this.recordCanvas,
-        inlineImages: this.inlineImages,
-        onSerialize: (currentN) => {
-          if (isSerializedIframe(currentN, this.mirror)) {
-            this.iframeManager.addIframe(currentN as HTMLIFrameElement);
-          }
-          if (isSerializedStylesheet(currentN, this.mirror)) {
-            this.stylesheetManager.trackLinkElement(
-              currentN as HTMLLinkElement,
-            );
-          }
-          if (hasShadowRoot(n)) {
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            this.shadowDomManager.addShadowRoot(dom.shadowRoot(n)!, this.doc);
-          }
-        },
-        onIframeLoad: (iframe, childSn) => {
-          this.iframeManager.attachIframe(iframe, childSn);
-          this.shadowDomManager.observeAttachShadow(iframe);
-        },
-        onStylesheetLoad: (link, childSn) => {
-          this.stylesheetManager.attachLinkElement(link, childSn);
-        },
-        cssCaptured,
-      });
-      if (sn) {
-        adds.push({
-          parentId,
-          nextId,
-          node: sn,
-        });
-        addedIds.add(sn.id);
-      }
-    };
-
     while (this.mapRemoves.length) {
       this.mirror.removeNodeFromMap(this.mapRemoves.shift()!);
     }
@@ -372,17 +385,17 @@ export default class MutationBuffer {
       ) {
         continue;
       }
-      pushAdd(n);
+      this.pushAdd(n, adds, addList, addedIds);
     }
 
     for (const n of this.addedSet) {
       if (
         !isAncestorInSet(this.droppedSet, n) &&
         !isParentRemoved(this.removes, n, this.mirror)
       ) {
-        pushAdd(n);
+        this.pushAdd(n, adds, addList, addedIds);
       } else if (isAncestorInSet(this.movedSet, n)) {
-        pushAdd(n);
+        this.pushAdd(n, adds, addList, addedIds);
       } else {
         this.droppedSet.add(n);
       }
@@ -407,10 +420,10 @@ export default class MutationBuffer {
           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) {
+            const parentId = this.mirror.getId(_node.value.parentNode);
+            if (parentId !== -1) {
               node = _node;
               break;
             }
@@ -444,7 +457,7 @@ export default class MutationBuffer {
       }
       candidate = node.previous;
       addList.removeNode(node.value);
-      pushAdd(node.value);
+      this.pushAdd(node.value, adds, addList, addedIds);
     }
 
     const payload = {