adapt changes of #865 to virtual-dom and improve the test case for mo…

…re coverage
rrweb-io · Mar 27, 2022 · 6096651 · 6096651
1 parent 991f557
commit 6096651
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 46 deletions.
diff --git a/packages/rrdom/src/diff.ts b/packages/rrdom/src/diff.ts
@@ -89,6 +89,36 @@ export function diff(
   newTree: IRRNode,
   replayer: ReplayerHandler,
 ) {
+  const oldChildren = oldTree.childNodes;
+  const newChildren = newTree.childNodes;
+  if (oldChildren.length > 0 || newChildren.length > 0) {
+    diffChildren(
+      (Array.from(oldChildren) as unknown) as INode[],
+      newChildren,
+      oldTree,
+      replayer,
+    );
+  }
+  // IFrame element doesn't have child nodes.
+  if (
+    newTree.RRNodeType === RRNodeType.Element &&
+    (newTree as IRRElement).tagName === 'IFRAME'
+  ) {
+    const oldContentDocument = (((oldTree as Node) as HTMLIFrameElement)
+      .contentDocument as unknown) as INode;
+    const newIFrameElement = newTree as RRIFrameElement;
+    // If the iframe is cross-origin, the contentDocument will be null.
+    if (oldContentDocument) {
+      if (newIFrameElement.contentDocument.__sn) {
+        oldContentDocument.__sn = newIFrameElement.contentDocument.__sn;
+        replayer.mirror.map[
+          newIFrameElement.contentDocument.__sn.id
+        ] = oldContentDocument;
+      }
+      diff(oldContentDocument, newIFrameElement.contentDocument, replayer);
+    }
+  }
+
   let inputDataToApply = null,
     scrollDataToApply = null;
   switch (newTree.RRNodeType) {
@@ -162,35 +192,6 @@ export function diff(
       break;
     default:
   }
-  const oldChildren = oldTree.childNodes;
-  const newChildren = newTree.childNodes;
-  if (oldChildren.length > 0 || newChildren.length > 0) {
-    diffChildren(
-      (Array.from(oldChildren) as unknown) as INode[],
-      newChildren,
-      oldTree,
-      replayer,
-    );
-  }
-  // IFrame element doesn't have child nodes.
-  if (
-    newTree.RRNodeType === RRNodeType.Element &&
-    (newTree as IRRElement).tagName === 'IFRAME'
-  ) {
-    const oldContentDocument = (((oldTree as Node) as HTMLIFrameElement)
-      .contentDocument as unknown) as INode;
-    const newIFrameElement = newTree as RRIFrameElement;
-    // If the iframe is cross-origin, the contentDocument will be null.
-    if (oldContentDocument) {
-      if (newIFrameElement.contentDocument.__sn) {
-        oldContentDocument.__sn = newIFrameElement.contentDocument.__sn;
-        replayer.mirror.map[
-          newIFrameElement.contentDocument.__sn.id
-        ] = oldContentDocument;
-      }
-      diff(oldContentDocument, newIFrameElement.contentDocument, replayer);
-    }
-  }
 
   scrollDataToApply && replayer.applyScroll(scrollDataToApply, true);
   /**

diff --git a/packages/rrweb/src/replay/index.ts b/packages/rrweb/src/replay/index.ts
@@ -1567,6 +1567,15 @@ export class Replayer {
         return this.warnNodeNotFound(d, mutation.id);
       }
       target.textContent = mutation.value;
+
+      /**
+       * https://github.com/rrweb-io/rrweb/pull/865
+       * Remove any virtual style rules for stylesheets whose contents are replaced.
+       */
+      if (this.usingVirtualDom) {
+        const parent = target.parentNode as RRStyleElement;
+        if (parent?.rules?.length > 0) parent.rules = [];
+      }
     });
     d.attributes.forEach((mutation) => {
       let target = mirror.getNode(mutation.id);

diff --git a/packages/rrweb/test/events/style-sheet-rule-events.ts b/packages/rrweb/test/events/style-sheet-rule-events.ts
@@ -105,22 +105,6 @@ const events: eventWithTime[] = [
     type: EventType.FullSnapshot,
     timestamp: now + 100,
   },
-  // mutation that adds style rule to existing stylesheet
-  {
-    data: {
-      id: 101,
-      adds: [
-        {
-          rule:
-            '.css-added-at-400-overwritten-at-3000 {border: 1px solid blue;}',
-          index: 1,
-        },
-      ],
-      source: IncrementalSource.StyleSheetRule,
-    },
-    type: EventType.IncrementalSnapshot,
-    timestamp: now + 400,
-  },
   // mutation that adds stylesheet
   {
     data: {
@@ -154,6 +138,22 @@ const events: eventWithTime[] = [
       attributes: [],
     },
     type: EventType.IncrementalSnapshot,
+    timestamp: now + 400,
+  },
+  // mutation that adds style rule to existing stylesheet
+  {
+    data: {
+      id: 101,
+      adds: [
+        {
+          rule:
+            '.css-added-at-400-overwritten-at-3000 {border: 1px solid blue;}',
+          index: 1,
+        },
+      ],
+      source: IncrementalSource.StyleSheetRule,
+    },
+    type: EventType.IncrementalSnapshot,
     timestamp: now + 500,
   },
   // adds StyleSheetRule

diff --git a/packages/rrweb/test/replayer.test.ts b/packages/rrweb/test/replayer.test.ts
@@ -251,7 +251,10 @@ describe('replayer', function () {
       const rules = [...replayer.iframe.contentDocument.styleSheets].map(
         (sheet) => [...sheet.rules],
       ).flat();
-      rules.some((x) => x.selectorText === '.css-added-at-3100');
+      rules.some((x) => x.selectorText === '.css-added-at-3100') &&
+        !rules.some(
+          (x) => x.selectorText === '.css-added-at-400-overwritten-at-3000',
+        );
     `);
 
     expect(result).toEqual(true);