move browser-only rrdom features to the new rrdom package (#913)

.vscode/rrweb-monorepo.code-workspace

@@ -8,6 +8,10 @@
       "name": "rrdom (package)",
       "path": "../packages/rrdom"
     },
+    {
+      "name": "rrdom-nodejs (package)",
+      "path": "../packages/rrdom-nodejs"
+    },
     {
       "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/rrdom-nodejs"
   ],
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^5.25.0",

packages/rrdom-nodejs/.gitignore

@@ -0,0 +1,4 @@
+dist
+es
+lib
+typings

packages/rrdom-nodejs/jest.config.js

@@ -0,0 +1,5 @@
+/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+};

packages/rrdom-nodejs/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "rrdom-nodejs",
+  "version": "0.1.2",
+  "scripts": {
+    "dev": "rollup -c -w",
+    "bundle": "rollup --config",
+    "bundle:es-only": "cross-env ES_ONLY=true rollup --config",
+    "check-types": "tsc -noEmit",
+    "test": "jest",
+    "prepublish": "npm run bundle",
+    "lint": "yarn eslint src/**/*.ts"
+  },
+  "keywords": [
+    "rrweb",
+    "rrdom-nodejs"
+  ],
+  "license": "MIT",
+  "main": "lib/rrdom-nodejs.js",
+  "module": "es/rrdom-nodejs.js",
+  "typings": "es",
+  "files": [
+    "dist",
+    "lib",
+    "es",
+    "typings"
+  ],
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^20.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.4",
+    "@types/cssom": "^0.4.1",
+    "@types/cssstyle": "^2.2.1",
+    "@types/jest": "^27.4.1",
+    "@types/nwsapi": "^2.2.2",
+    "@types/puppeteer": "^5.4.4",
+    "@typescript-eslint/eslint-plugin": "^5.23.0",
+    "@typescript-eslint/parser": "^5.23.0",
+    "compare-versions": "^4.1.3",
+    "eslint": "^8.15.0",
+    "jest": "^27.5.1",
+    "puppeteer": "^9.1.1",
+    "rollup": "^2.56.3",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.31.2",
+    "rollup-plugin-web-worker-loader": "^1.6.1",
+    "ts-jest": "^27.1.3",
+    "typescript": "^4.6.2"
+  },
+  "dependencies": {
+    "cssom": "^0.5.0",
+    "cssstyle": "^2.3.0",
+    "nwsapi": "^2.2.0",
+    "rrweb-snapshot": "^1.1.14",
+    "rrdom": "^0.1.2"
+  }
+}

packages/rrdom-nodejs/rollup.config.js

@@ -0,0 +1,84 @@
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import { terser } from 'rollup-plugin-terser';
+import typescript from 'rollup-plugin-typescript2';
+import webWorkerLoader from 'rollup-plugin-web-worker-loader';
+import pkg from './package.json';
+
+function toMinPath(path) {
+  return path.replace(/\.js$/, '.min.js');
+}
+
+const basePlugins = [
+  resolve({ browser: true }),
+  commonjs(),
+
+  // supports bundling `web-worker:..filename` from rrweb
+  webWorkerLoader(),
+
+  typescript({
+    tsconfigOverride: { compilerOptions: { module: 'ESNext' } },
+  }),
+];
+
+const baseConfigs = [
+  {
+    input: './src/index.ts',
+    name: pkg.name,
+    path: pkg.name,
+  },
+  {
+    input: './src/document-nodejs.ts',
+    name: 'RRDocument',
+    path: 'document-nodejs',
+  },
+];
+
+let configs = [];
+let extraConfigs = [];
+for (let config of baseConfigs) {
+  configs.push(
+    // ES module
+    {
+      input: config.input,
+      plugins: basePlugins,
+      output: [
+        {
+          format: 'esm',
+          file: pkg.module.replace(pkg.name, config.path),
+        },
+      ],
+    },
+  );
+  extraConfigs.push(
+    // CommonJS
+    {
+      input: config.input,
+      plugins: basePlugins,
+      output: [
+        {
+          format: 'cjs',
+          file: pkg.main.replace(pkg.name, config.path),
+        },
+      ],
+    },
+    // ES module (packed)
+    {
+      input: config.input,
+      plugins: basePlugins.concat(terser()),
+      output: [
+        {
+          format: 'esm',
+          file: toMinPath(pkg.module).replace(pkg.name, config.path),
+          sourcemap: true,
+        },
+      ],
+    },
+  );
+}
+
+if (!process.env.ES_ONLY) {
+  configs.push(...extraConfigs);
+}
+
+export default configs;

packages/rrdom/src/document-nodejs.ts → packages/rrdom-nodejs/src/document-nodejs.ts

@@ -13,7 +13,7 @@ import {
   ClassList,
   IRRDocument,
   CSSStyleDeclaration,
-} from './document';
+} from 'rrdom';
 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-nodejs/src/index.ts

@@ -0,0 +1,13 @@
+import {
+  polyfillPerformance,
+  polyfillRAF,
+  polyfillEvent,
+  polyfillNode,
+  polyfillDocument,
+} from './polyfill';
+polyfillPerformance();
+polyfillRAF();
+polyfillEvent();
+polyfillNode();
+polyfillDocument();
+export * from './document-nodejs';

packages/rrdom/test/document-nodejs.test.ts → packages/rrdom-nodejs/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 'rrdom';
 
 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, `../../rrdom/test/html/${fileName}`);
   return fs.readFileSync(filePath, 'utf8');
 }

packages/rrdom-nodejs/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES6",
+    "module": "commonjs",
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "removeComments": true,
+    "preserveConstEnums": true,
+    "sourceMap": true,
+    "rootDir": "src",
+    "outDir": "build",
+    "lib": ["es6", "dom"],
+    "skipLibCheck": true,
+    "declaration": true,
+    "importsNotUsedAsValues": "error"
+  },
+  "compileOnSave": true,
+  "exclude": ["test"],
+  "include": ["src", "test.d.ts", "../rrweb/src/record/workers/workers.d.ts"]
+}

packages/rrdom/package.json

@@ -1,19 +1,7 @@
 {
   "name": "rrdom",
   "version": "0.1.2",
-  "scripts": {
-    "dev": "rollup -c -w",
-    "bundle": "rollup --config",
-    "bundle:es-only": "cross-env ES_ONLY=true rollup --config",
-    "check-types": "tsc -noEmit",
-    "test": "jest",
-    "prepublish": "npm run bundle",
-    "lint": "yarn eslint src/**/*.ts"
-  },
-  "keywords": [
-    "rrweb",
-    "rrdom"
-  ],
+  "homepage": "https://github.com/rrweb-io/rrweb/tree/main/packages/rrdom#readme",
   "license": "MIT",
   "main": "lib/rrdom.js",
   "module": "es/rrdom.js",
@@ -25,31 +13,39 @@
     "es",
     "typings"
   ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rrweb-io/rrweb.git"
+  },
+  "scripts": {
+    "dev": "rollup -c -w",
+    "bundle": "rollup --config",
+    "bundle:es-only": "cross-env ES_ONLY=true rollup --config",
+    "check-types": "tsc -noEmit",
+    "test": "jest",
+    "prepublish": "npm run bundle",
+    "lint": "yarn eslint src/**/*.ts"
+  },
+  "bugs": {
+    "url": "https://github.com/rrweb-io/rrweb/issues"
+  },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^20.0.0",
-    "@rollup/plugin-node-resolve": "^13.0.4",
-    "@types/cssom": "^0.4.1",
-    "@types/cssstyle": "^2.2.1",
     "@types/jest": "^27.4.1",
-    "@types/nwsapi": "^2.2.2",
-    "@types/puppeteer": "^5.4.4",
     "@typescript-eslint/eslint-plugin": "^5.23.0",
     "@typescript-eslint/parser": "^5.23.0",
-    "compare-versions": "^4.1.3",
+    "@types/puppeteer": "^5.4.4",
     "eslint": "^8.15.0",
     "jest": "^27.5.1",
     "puppeteer": "^9.1.1",
     "rollup": "^2.56.3",
     "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"
+    "rrweb-snapshot": "^1.1.14"
   }
 }

packages/rrdom/rollup.config.js

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