move browser-only rrdom features to the new vdom package

Author: Yuyz0112

.vscode/rrweb-monorepo.code-workspace

@@ -8,6 +8,10 @@
       "name": "rrdom (package)",
       "path": "../packages/rrdom"
     },
+    {
+      "name": "vdom (package)",
+      "path": "../packages/vdom"
+    },
     {
       "name": "rrweb (package)",
       "path": "../packages/rrweb"

package.json

@@ -18,7 +18,8 @@
     "packages/rrweb",
     "packages/rrweb-snapshot",
     "packages/rrweb-player",
-    "packages/rrdom"
+    "packages/rrdom",
+    "packages/vdom"
   ],
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^5.25.0",

packages/rrdom/package.json

@@ -43,13 +43,14 @@
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.31.2",
     "rollup-plugin-web-worker-loader": "^1.6.1",
-    "rrweb-snapshot": "^1.1.14",
     "ts-jest": "^27.1.3",
     "typescript": "^4.6.2"
   },
   "dependencies": {
     "cssom": "^0.5.0",
     "cssstyle": "^2.3.0",
-    "nwsapi": "^2.2.0"
+    "nwsapi": "^2.2.0",
+    "rrweb-snapshot": "^1.1.14",
+    "vdom": "^0.1.2"
   }
 }

packages/rrdom/rollup.config.js

@@ -32,11 +32,6 @@ const baseConfigs = [
     name: 'RRDocument',
     path: 'document-nodejs',
   },
-  {
-    input: './src/virtual-dom.ts',
-    name: 'RRDocument',
-    path: 'virtual-dom',
-  },
 ];
 
 let configs = [];

packages/rrdom/src/document-nodejs.ts

@@ -13,7 +13,7 @@ import {
   ClassList,
   IRRDocument,
   CSSStyleDeclaration,
-} from './document';
+} from 'vdom';
 const nwsapi = require('nwsapi');
 const cssom = require('cssom');
 const cssstyle = require('cssstyle');
@@ -53,22 +53,27 @@ export class RRDocument
     return this._nwsapi;
   }
 
+  // @ts-ignore
   get documentElement(): RRElement | null {
     return super.documentElement as RRElement | null;
   }
 
+  // @ts-ignore
   get body(): RRElement | null {
     return super.body as RRElement | null;
   }
 
+  // @ts-ignore
   get head() {
     return super.head as RRElement | null;
   }
 
+  // @ts-ignore
   get implementation(): RRDocument {
     return this;
   }
 
+  // @ts-ignore
   get firstElementChild(): RRElement | null {
     return this.documentElement;
   }
@@ -198,6 +203,7 @@ export class RRElement extends BaseRRElementImpl(RRNode) {
     });
   }
 
+  // @ts-ignore
   get style() {
     return (this._style as unknown) as CSSStyleDeclaration;
   }

packages/rrdom/test/document-nodejs.test.ts

@@ -16,7 +16,7 @@ import {
   RRStyleElement,
   RRText,
 } from '../src/document-nodejs';
-import { buildFromDom } from '../src/virtual-dom';
+import { buildFromDom } from 'vdom';
 
 describe('RRDocument for nodejs environment', () => {
   describe('RRDocument API', () => {
@@ -542,6 +542,6 @@ describe('RRDocument for nodejs environment', () => {
 });
 
 function getHtml(fileName: string) {
-  const filePath = path.resolve(__dirname, `./html/${fileName}`);
+  const filePath = path.resolve(__dirname, `../../vdom/test/html/${fileName}`);
   return fs.readFileSync(filePath, 'utf8');
 }

packages/rrweb/jest.config.js

@@ -5,6 +5,5 @@ module.exports = {
   testMatch: ['**/**.test.ts'],
   moduleNameMapper: {
     '\\.css$': 'identity-obj-proxy',
-    'rrdom/es/(.*)': 'rrdom/lib/$1',
   },
 };

packages/rrweb/package.json

@@ -79,7 +79,7 @@
     "base64-arraybuffer": "^1.0.1",
     "fflate": "^0.4.4",
     "mitt": "^1.1.3",
-    "rrdom": "^0.1.2",
+    "vdom": "^0.1.2",
     "rrweb-snapshot": "^1.1.14"
   }
 }

packages/rrweb/src/replay/index.ts

@@ -15,9 +15,9 @@ import {
   buildFromDom,
   diff,
   getDefaultSN,
-} from 'rrdom/es/virtual-dom';
+} from 'vdom';
 import type {
-  RRNode,
+  BaseRRNode as RRNode,
   RRElement,
   RRStyleElement,
   RRIFrameElement,
@@ -26,7 +26,7 @@ import type {
   ReplayerHandler,
   Mirror as RRDOMMirror,
   VirtualStyleRules,
-} from 'rrdom/es/virtual-dom';
+} from 'vdom';
 import * as mittProxy from 'mitt';
 import { polyfill as smoothscrollPolyfill } from './smoothscroll';
 import { Timer } from './timer';
@@ -731,7 +731,7 @@ export class Replayer {
       );
     }
     if (this.usingVirtualDom) {
-      const styleEl = this.virtualDom.createElement('style') ;
+      const styleEl = this.virtualDom.createElement('style');
       this.virtualDom.mirror.add(
         styleEl,
         getDefaultSN(styleEl, this.virtualDom.unserializedId),
@@ -752,10 +752,7 @@ export class Replayer {
         head as HTMLHeadElement,
       );
       for (let idx = 0; idx < injectStylesRules.length; idx++) {
-        (styleEl.sheet! ).insertRule(
-          injectStylesRules[idx],
-          idx,
-        );
+        styleEl.sheet!.insertRule(injectStylesRules[idx], idx);
       }
     }
   }
@@ -1210,7 +1207,7 @@ export class Replayer {
           if (!target) {
             return this.debugNodeNotFound(d, d.id);
           }
-          const styleSheet = ((target ) as HTMLStyleElement).sheet!;
+          const styleSheet = (target as HTMLStyleElement).sheet!;
           d.adds?.forEach(({ rule, index: nestedIndex }) => {
             try {
               if (Array.isArray(nestedIndex)) {
@@ -1692,7 +1689,7 @@ export class Replayer {
               }
             }
           } else if (attributeName === 'style') {
-            const styleValues = value ;
+            const styleValues = value;
             const targetEl = target as HTMLElement | RRElement;
             for (const s in styleValues) {
               if (styleValues[s] === false) {
@@ -1772,7 +1769,7 @@ export class Replayer {
     const previousInMap = previousId && map[previousId];
     const nextInMap = nextId && map[nextId];
     if (previousInMap) {
-      const { node, mutation } = previousInMap ;
+      const { node, mutation } = previousInMap;
       parent.insertBefore(node as Node & RRNode, target as Node & RRNode);
       delete map[mutation.node.id];
       delete this.legacy_missingNodeRetryMap[mutation.node.id];
@@ -1781,7 +1778,7 @@ export class Replayer {
       }
     }
     if (nextInMap) {
-      const { node, mutation } = nextInMap ;
+      const { node, mutation } = nextInMap;
       parent.insertBefore(
         node as Node & RRNode,
         target.nextSibling as Node & RRNode,

packages/rrweb/src/types.ts

@@ -11,7 +11,7 @@ import type { PackFn, UnpackFn } from './packer/base';
 import type { IframeManager } from './record/iframe-manager';
 import type { ShadowDomManager } from './record/shadow-dom-manager';
 import type { Replayer } from './replay';
-import type { RRNode } from 'rrdom/es/virtual-dom';
+import type { BaseRRNode } from 'vdom';
 import type { CanvasManager } from './record/observers/canvas/canvas-manager';
 
 export enum EventType {
@@ -670,7 +670,7 @@ export type playerMetaData = {
 };
 
 export type missingNode = {
-  node: Node | RRNode;
+  node: Node | BaseRRNode;
   mutation: addedNodeMutation;
 };
 export type missingNodeMap = {