Start unserialized nodes at -2

This way we don't accidentally think of them as mirror misses
rrweb-io · Yuyz0112 · Aug 6, 2022 · May 31, 2022 · Jun 1, 2022 · Jun 1, 2022
commit 3cabbf74ea3b029c56c8ff6af6662eed4a08c669
diff --git a/packages/rrdom/src/index.ts b/packages/rrdom/src/index.ts
@@ -36,7 +36,7 @@ export class RRDocument extends BaseRRDocumentImpl(RRNode) {
   // In the rrweb replayer, there are some unserialized nodes like the element that stores the injected style rules.
   // These unserialized nodes may interfere the execution of the diff algorithm.
   // The id of serialized node is larger than 0. So this value less than 0 is used as id for these unserialized nodes.
-  private _unserializedId = -1;
+  private _unserializedId = -2;
 
   /**
    * Every time the id is used, it will minus 1 automatically to avoid collisions.

diff --git a/packages/rrweb/test/__snapshots__/replayer.test.ts.snap b/packages/rrweb/test/__snapshots__/replayer.test.ts.snap
@@ -81,13 +81,80 @@ file-cid-3
 `;
 
 exports[`replayer can fast forward past StyleSheetRule deletion on virtual elements 1`] = `
-"file-frame-0
+"file-frame-4
 <html>
   <head>
     <meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\" />
   </head>
-  <body></body>
+  <body>
+    <div class=\\"replayer-wrapper\\">
+      <div class=\\"replayer-mouse\\"></div>
+      <canvas
+        class=\\"replayer-mouse-tail\\"
+        width=\\"1000\\"
+        height=\\"800\\"
+        style=\\"display: inherit\\"
+      ></canvas
+      ><iframe
+        sandbox=\\"allow-same-origin\\"
+        scrolling=\\"no\\"
+        width=\\"1000\\"
+        height=\\"800\\"
+        style=\\"display: inherit; pointer-events: none\\"
+      ></iframe>
+    </div>
+  </body>
+</html>
+
+
+file-frame-5
+<!DOCTYPE html>
+<html lang=\\"en\\" class=\\"rrweb-paused\\">
+  <head>
+    <meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\" />
+    <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-0\\" />
+    <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-1\\" />
+    <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-2\\" />
+    <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-3\\" />
+  </head>
+  <body>
+    <a class=\\"css-added-at-1000-deleted-at-2500\\">string</a>
+  </body>
 </html>
+
+
+file-cid-0
+@charset \\"utf-8\\";
+
+.rr-block { background: currentcolor; }
+
+noscript { display: none !important; }
+
+html.rrweb-paused *, html.rrweb-paused ::before, html.rrweb-paused ::after { animation-play-state: paused !important; }
+
+
+file-cid-1
+@charset \\"utf-8\\";
+
+.css-added-at-400 { padding: 1.3125rem; flex: 0 0 auto; width: 100%; }
+
+
+file-cid-2
+@charset \\"utf-8\\";
+
+.css-added-at-200-overwritten-at-3000 { opacity: 1; transform: translateX(0px); }
+
+.css-added-at-500-overwritten-at-3000 { border: 1px solid blue; }
+
+
+file-cid-3
+@charset \\"utf-8\\";
+
+.css-added-at-200 { position: fixed; top: 0px; right: 0px; left: 4rem; z-index: 15; flex-shrink: 0; height: 0.25rem; overflow: hidden; background-color: rgb(17, 171, 209); }
+
+.css-added-at-200.alt { height: 0.25rem; background-color: rgb(190, 232, 242); opacity: 0; transition: opacity 0.5s ease 0s; }
+
+.css-added-at-200.alt2 { padding-left: 4rem; }
 "
 `;
 

diff --git a/packages/rrweb/test/replayer.test.ts b/packages/rrweb/test/replayer.test.ts
@@ -158,11 +158,7 @@ describe('replayer', function () {
       ).length,
     );
 
-    await assertDomSnapshot(
-      page,
-      __filename,
-      'style-sheet-rule-events-play-at-1500',
-    );
+    await assertDomSnapshot(page);
   });
 
   it('should apply fast forwarded StyleSheetRules that where added', async () => {
@@ -194,21 +190,20 @@ describe('replayer', function () {
       ).length,
     );
 
-    await assertDomSnapshot(
-      page,
-      __filename,
-      'style-sheet-remove-events-play-at-2500',
-    );
+    await assertDomSnapshot(page);
   });
 
   it('can fast forward past StyleSheetRule deletion on virtual elements', async () => {
     await page.evaluate(`events = ${JSON.stringify(styleSheetRuleEvents)}`);
 
-    await assertDomSnapshot(
-      page,
-      __filename,
-      'style-sheet-rule-events-play-at-2500',
-    );
+    const actionLength = await page.evaluate(`
+      const { Replayer } = rrweb;
+      const replayer = new Replayer(events);
+      replayer.pause(2600);
+      replayer['timer']['actions'].length;
+    `);
+
+    await assertDomSnapshot(page);
   });
 
   it('should delete fast forwarded StyleSheetRules that where removed', async () => {
@@ -634,7 +629,7 @@ describe('replayer', function () {
     `);
     await page.waitForTimeout(50);
 
-    await assertDomSnapshot(page, __filename, 'ordering-events');
+    await assertDomSnapshot(page);
   });
 
   it('replays same timestamp events in correct order (with addAction)', async () => {
@@ -648,6 +643,6 @@ describe('replayer', function () {
     `);
     await page.waitForTimeout(50);
 
-    await assertDomSnapshot(page, __filename, 'ordering-events');
+    await assertDomSnapshot(page);
   });
 });
diff --git a/packages/rrweb/test/utils.ts b/packages/rrweb/test/utils.ts
@@ -257,11 +257,7 @@ export function replaceLast(str: string, find: string, replace: string) {
   return str.substring(0, index) + replace + str.substring(index + find.length);
 }
 
-export async function assertDomSnapshot(
-  page: puppeteer.Page,
-  filename: string,
-  name: string,
-) {
+export async function assertDomSnapshot(page: puppeteer.Page) {
   const cdp = await page.target().createCDPSession();
   const { data } = await cdp.send('Page.captureSnapshot', {
     format: 'mhtml',