fix rrdom bug

If a rrnode appends the same child twice, the child nodes will become an infinite loop
rrweb-io · Feb 20, 2023 · 63b53c6 · 63b53c6
1 parent af57732
commit 63b53c6
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 1 deletion.
diff --git a/packages/rrdom/src/diff.ts b/packages/rrdom/src/diff.ts
@@ -491,7 +491,7 @@ function diffChildren(
   } else if (newStartIndex > newEndIndex) {
     for (; oldStartIndex <= oldEndIndex; oldStartIndex++) {
       const node = oldChildren[oldStartIndex];
-      if (!node || !parentNode.contains(node)) continue;
+      if (!node || node.parentNode !== parentNode) continue;
       try {
         parentNode.removeChild(node);
         replayer.mirror.removeNodeFromMap(node);

diff --git a/packages/rrdom/src/document.ts b/packages/rrdom/src/document.ts
@@ -713,6 +713,8 @@ export type CSSStyleDeclaration = Record<string, string> & {
 };
 
 function appendChild(parent: IRRNode, newChild: IRRNode) {
+  if (newChild.parentNode) newChild.parentNode.removeChild(newChild);
+
   if (parent.lastChild) {
     parent.lastChild.nextSibling = newChild;
     newChild.previousSibling = parent.lastChild;
@@ -740,6 +742,9 @@ function insertBefore(
       "Failed to execute 'insertBefore' on 'RRNode': The RRNode before which the new node is to be inserted is not a child of this RRNode.",
     );
 
+  if (newChild === refChild) return newChild;
+  if (newChild.parentNode) newChild.parentNode.removeChild(newChild);
+
   newChild.previousSibling = refChild.previousSibling;
   refChild.previousSibling = newChild;
   newChild.nextSibling = refChild;

diff --git a/packages/rrdom/test/document.test.ts b/packages/rrdom/test/document.test.ts
@@ -766,6 +766,22 @@ describe('Basic RRDocument implementation', () => {
       expect(node.contains(child2)).toBeTruthy();
     });
 
+    it('can append a child with parent node', () => {
+      const node = document.createElement('div');
+      const child = document.createElement('span');
+      expect(node.appendChild(child)).toBe(child);
+      expect(node.childNodes).toEqual([child]);
+      expect(node.appendChild(child)).toBe(child);
+      expect(node.childNodes).toEqual([child]);
+      expect(child.parentNode).toBe(node);
+
+      const node1 = document.createElement('div');
+      expect(node1.appendChild(child)).toBe(child);
+      expect(node1.childNodes).toEqual([child]);
+      expect(child.parentNode).toBe(node1);
+      expect(node.childNodes).toEqual([]);
+    });
+
     it('can insert new child before an existing child', () => {
       const node = document.createElement('div');
       const child1 = document.createElement('h1');
@@ -820,6 +836,25 @@ describe('Basic RRDocument implementation', () => {
       expect(node.contains(child1)).toBeTruthy();
     });
 
+    it('can insert a child with parent node', () => {
+      const node = document.createElement('div');
+      const child1 = document.createElement('h1');
+      expect(node.insertBefore(child1, null)).toBe(child1);
+      expect(node.childNodes).toEqual([child1]);
+      expect(node.insertBefore(child1, child1)).toBe(child1);
+      expect(node.childNodes).toEqual([child1]);
+      expect(child1.parentNode).toEqual(node);
+
+      const node2 = document.createElement('div');
+      const child2 = document.createElement('h2');
+      expect(node2.insertBefore(child2, null)).toBe(child2);
+      expect(node2.childNodes).toEqual([child2]);
+      expect(node2.insertBefore(child1, child2)).toBe(child1);
+      expect(node2.childNodes).toEqual([child1, child2]);
+      expect(child1.parentNode).toEqual(node2);
+      expect(node.childNodes).toEqual([]);
+    });
+
     it('can remove an existing child', () => {
       const node = document.createElement('div');
       const child1 = document.createElement('h1');