fast-forward implementation v2: virtual dom optimization

.travis.yml

@@ -5,7 +5,7 @@ os: linux
 dist: focal
 
 node_js:
-  - 12
+  - lts/*
 
 install:
   - yarn

.vscode/rrweb-monorepo.code-workspace

@@ -24,8 +24,7 @@
   "settings": {
     "jest.disabledWorkspaceFolders": [
       " rrweb monorepo",
-      "rrweb-player (package)",
-      "rrdom (package)"
+      "rrweb-player (package)"
     ]
   }
 }

guide.md

@@ -299,10 +299,12 @@ The replayer accepts options as its constructor's second parameter, and it has t
 | insertStyleRules    | []            | accepts multiple CSS rule string, which will be injected into the replay iframe                                                                                                                                                |
 | triggerFocus        | true          | whether to trigger focus during replay                                                                                                                                                                                         |
 | UNSAFE_replayCanvas | false         | whether to replay the canvas element. **Enable this will remove the sandbox, which is unsafe.**                                                                                                                                |
+| pauseAnimation      | true          | whether to pause CSS animation when the replayer is paused                                                                                                                                                                     |
 | mouseTail           | true          | whether to show mouse tail during replay. Set to false to disable mouse tail. A complete config can be found in this [type](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L407) |
 | unpackFn            | -             | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md)                                                                                                                                                 |
 | logConfig           | -             | configuration of console output playback, refer to the [console recipe](./docs/recipes/console.md)                                                                                                                             |
 | plugins             | []            | load plugins to provide extended replay functions. [What is plugins?](./docs/recipes/plugin.md)                                                                                                                                |
+| useVirtualDom       | true          | whether to use Virtual Dom optimization in the process of skipping to a new point of time                                                                                                                                      |
 
 #### Use rrweb-player
 

guide.zh_CN.md

@@ -295,10 +295,11 @@ replayer.pause(5000);
 | insertStyleRules    | []            | 可以传入多个 CSS rule string，用于自定义回放时 iframe 内的样式                                                                                                                                       |
 | triggerFocus        | true          | 回放时是否回放 focus 交互                                                                                                                                                                            |
 | UNSAFE_replayCanvas | false         | 回放时是否回放 canvas 内容，**开启后将会关闭沙盒策略，导致一定风险**                                                                                                                                 |
+| pauseAnimation      | true          | 当播放器停止播放时，是否将 CSS 动画也停止播放                                                                                                                                                        |
 | mouseTail           | true          | 是否在回放时增加鼠标轨迹。传入 false 可关闭，传入对象可以定制轨迹持续时间、样式等，配置详见[类型](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L407) |
 | unpackFn            | -             | 数据解压缩函数，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md)                                                                                                                         |
-| logConfig           | -             | console logger 数据播放设置，详见[console 录制和播放](./docs/recipes/console.zh_CN.md)                                                                                                               |
 | plugins             | []            | 加载插件以获得额外的回放功能. [什么是插件？](./docs/recipes/plugin.zh_CN.md)                                                                                                                         |
+| useVirtualDom       | true          | 在播放器跳转到一个新的时间点的过程中，是否使用 Virtual Dom 优化                                                                                                                                      |
 
 #### 使用 rrweb-player
 

package.json

@@ -30,5 +30,8 @@
     "test:watch": "yarn lerna run test:watch --parallel",
     "dev": "yarn lerna run dev --parallel",
     "repl": "cd packages/rrweb && npm run repl"
+  },
+  "resolutions": {
+    "**/jsdom/cssom": "^0.5.0"
   }
 }

packages/rrdom/package.json

@@ -5,6 +5,7 @@
     "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"
   },
@@ -27,18 +28,24 @@
     "@rollup/plugin-commonjs": "^20.0.0",
     "@rollup/plugin-node-resolve": "^13.0.4",
     "@types/cssom": "^0.4.1",
-    "@types/jest": "^27.0.1",
+    "@types/cssstyle": "^2.2.1",
+    "@types/jest": "^27.4.1",
     "@types/nwsapi": "^2.2.2",
-    "jest": "^27.1.1",
+    "@types/puppeteer": "^5.4.4",
+    "compare-versions": "^4.1.3",
+    "jest": "^27.5.1",
+    "puppeteer": "^9.1.1",
     "rollup": "^2.56.3",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.30.0",
+    "rollup-plugin-typescript2": "^0.31.2",
+    "rollup-plugin-web-worker-loader": "^1.6.1",
     "rrweb-snapshot": "^1.1.14",
-    "ts-jest": "^27.0.5",
-    "typescript": "^3.9.5"
+    "ts-jest": "^27.1.3",
+    "typescript": "^4.6.2"
   },
   "dependencies": {
     "cssom": "^0.5.0",
+    "cssstyle": "^2.3.0",
     "nwsapi": "^2.2.0"
   }
 }

packages/rrdom/rollup.config.js

@@ -2,6 +2,7 @@ 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) {
@@ -11,6 +12,10 @@ function toMinPath(path) {
 const basePlugins = [
   resolve({ browser: true }),
   commonjs(),
+
+  // supports bundling `web-worker:..filename` from rrweb
+  webWorkerLoader(),
+
   typescript({
     tsconfigOverride: { compilerOptions: { module: 'ESNext' } },
   }),
@@ -27,6 +32,11 @@ const baseConfigs = [
     name: 'RRDocument',
     path: 'document-nodejs',
   },
+  {
+    input: './src/virtual-dom.ts',
+    name: 'RRDocument',
+    path: 'virtual-dom',
+  },
 ];
 
 let configs = [];