Disable onAddHoverClass and duplicate full snapshot (#36)

* Don't rebuild full snapshot * Add config for hover class * Revert "Update rrweb (#35)" This reverts commit 5dc4ca2. * Bump version
highlight · Apr 7, 2021 · adbb770 · adbb770
1 parent 5dc4ca2
commit adbb770
Show file tree

Hide file tree

Showing 48 changed files with 2,119 additions and 4,612 deletions.
diff --git a/.gitignore b/.gitignore
@@ -9,5 +9,3 @@ es
 lib
 
 temp
-
-*.log
diff --git a/.npmignore b/.npmignore
@@ -1,7 +1 @@
-.vscode
-.idea
-node_modules
-package-lock.json
-yarn.lock
-temp
-*.log
+!**/node_modules
diff --git a/README.md b/README.md
@@ -7,8 +7,6 @@
 
 # rrweb
 
-**[We are hiring!(in mainland China)](https://mp.weixin.qq.com/s/VhFwemIzaXec-hI3zyltfg)**
-
 **[The new adventure of the rrweb community](http://www.myriptide.com/rrweb-community/)**
 
 [![Build Status](https://travis-ci.org/rrweb-io/rrweb.svg?branch=master)](https://travis-ci.org/rrweb-io/rrweb)

diff --git a/README.zh_CN.md b/README.zh_CN.md
@@ -7,8 +7,6 @@
 
 # rrweb
 
-**[招聘：和我们一起，做难的事情!](https://mp.weixin.qq.com/s/VhFwemIzaXec-hI3zyltfg)**
-
 **[rrweb 社区新的征程](http://www.myriptide.com/rrweb-community-cn/)**
 
 [![Build Status](https://travis-ci.org/rrweb-io/rrweb.svg?branch=master)](https://travis-ci.org/rrweb-io/rrweb)

diff --git a/docs/observer.md b/docs/observer.md
@@ -53,7 +53,7 @@ In the first case, two mutation records will be generated, namely adding node n1
 
 Due to the second case, when processing new nodes we must traverse all its descendants to ensure that all new nodes are recorded, however this strategy will cause n2 to be (incorrectly) recorded during the first record. Then, when processing the second record, adding a the node for a second time will result in a DOM structure that is inconsistent with the original page during replay.
 
-Therefore, when dealing with multiple mutation records in a callback, we need to "lazily" process the newly-added nodes, that is, first collect all raw, unprocessed nodes when we go through each mutation record, and then after we've been through all the mutation records we determine the order in which the nodes were added to the DOM. When these new nodes are added, we perform deduplication to ensure that each node is only recorded once and we check no nodes were missed.
+Therefore, when dealing with multiple mutation records in a callback, we need to "lazily" process the newly-added nodes, that is, first collect all raw, unprocessed nodes when we go through each mutation record, and then after we've been through all the mutation records we determine the the order nodes were added to the DOM. When new these nodes are added we perform deduplication to ensure that each node is only recorded once and we check no nodes were missed.
 
 We already introduced in the [serialization design document](./serialization.md) that we need to maintain a mapping of `id -> Node`, so when new nodes appear, we need to serialize the new nodes and add them to the map. But since we want to perform deduplication, and thus only serialize after all the mutation records have been processed, some problems may arise, as demonstrated in the following example:
 

diff --git a/docs/recipes/customize-replayer.md b/docs/recipes/customize-replayer.md
@@ -53,17 +53,17 @@ And there are some ways to listen rrweb-player's state:
 ```js
 // get current timing
 rrwebPlayer.addEventListener('ui-update-current-time', (event) => {
-  console.log(event.payload);
+  console.log(event.detail.payload);
 });
 
 // get current state
 rrwebPlayer.addEventListener('ui-update-player-state', (event) => {
-  console.log(event.payload);
+  console.log(event.detail.payload);
 });
 
 // get current progress
 rrwebPlayer.addEventListener('ui-update-progress', (event) => {
-  console.log(event.payload);
+  console.log(event.detail.payload);
 });
 ```
 

diff --git a/docs/recipes/customize-replayer.zh_CN.md b/docs/recipes/customize-replayer.zh_CN.md
@@ -53,17 +53,17 @@ rrwebPlayer.goto(3000);
 ```js
 // 当前播放时间
 rrwebPlayer.addEventListener('ui-update-current-time', (event) => {
-  console.log(event.payload);
+  console.log(event.detail.payload);
 });
 
 // 当前播放状态
 rrwebPlayer.addEventListener('ui-update-player-state', (event) => {
-  console.log(event.payload);
+  console.log(event.detail.payload);
 });
 
 // 当前播放进度
 rrwebPlayer.addEventListener('ui-update-progress', (event) => {
-  console.log(event.payload);
+  console.log(event.detail.payload);
 });
 ```
 

diff --git a/guide.md b/guide.md
@@ -1,6 +1,6 @@
 # Guide
 
-[中文指南](./guide.zh_CN.md)
+[中文指南](./guide.md)
 
 > You may also want to read the [recipes](./docs/recipes/index.md) to find some use real-world use case, or read the [design docs](./docs) to know more technical details of rrweb.
 
@@ -142,11 +142,8 @@ The parameter of `rrweb.record` accepts the following options.
 | checkoutEveryNms | -           | take a full snapshot after every N ms<br />refer to the [checkout](#checkout) chapter                                                                            |
 | blockClass       | 'rr-block'  | Use a string or RegExp to configure which elements should be blocked, refer to the [privacy](#privacy) chapter                                                   |
 | ignoreClass      | 'rr-ignore' | Use a string or RegExp to configure which elements should be ignored, refer to the [privacy](#privacy) chapter                                                   |
-| blockSelector    | null        | Use a string or RegExp to configure which selector should be blocked, refer to the [privacy](#privacy) chapter                                                                                          |
 | maskAllInputs    | false       | mask all input content as \*                                                                                                                                     |
 | maskInputOptions | {}          | mask some kinds of input \*<br />refer to the [list](https://github.com/rrweb-io/rrweb-snapshot/blob/6728d12b3cddd96951c86d948578f99ada5749ff/src/types.ts#L72) |
-| maskInputFn      | -           | customize mask input content recording logic                                                                                                                                |
-| slimDOMOptions   | {}          | remove unnecessary parts of the DOM <br />refer to the [list](https://github.com/rrweb-io/rrweb-snapshot/blob/6728d12b3cddd96951c86d948578f99ada5749ff/src/types.ts#L91)            |
 | inlineStylesheet | true        | whether to inline the stylesheet in the events                                                                                                                   |
 | hooks            | {}          | hooks for events<br />refer to the [list](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L207)                     |
 | packFn           | -           | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md)                                                                                   |
@@ -290,7 +287,7 @@ The replayer accepts options as its constructor's second parameter, and it has t
 | showDebug           | false         | whether to print debug messages during replay                                                                                                                                                                                  |
 | blockClass          | 'rr-block'    | element with the class name will display as a blocked area                                                                                                                                                                     |
 | liveMode            | false         | whether to enable live mode                                                                                                                                                                                                    |
-| insertStyleRules     | []            | accepts multiple CSS rule string, which will be injected into the replay iframe                                                                                                                                                |
+| inertStyleRules     | []            | 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.**                                                                                                                                |
 | 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) |
@@ -378,9 +375,9 @@ And there are three rrweb-replayer event will be emitted in the same way:
 
 | Event                  | Description                      | Value                   |
 | ---------------------- | -------------------------------- | ----------------------- |
-| ui-update-current-time | current time has changed         | { payload } |
-| ui-update-player-state | current player state has changed | { payload } |
-| ui-update-progress     | current progress has changed     | { payload } |
+| ui-update-current-time | current time has changed         | { detail: { payload } } |
+| ui-update-player-state | current player state has changed | { detail: { payload } } |
+| ui-update-progress     | current progress has changed     | { detail: { payload } } |
 
 ## REPL tool
 

diff --git a/guide.zh_CN.md b/guide.zh_CN.md
@@ -137,19 +137,16 @@ setInterval(save, 10 * 1000);
 | checkoutEveryNth | -           | 每 N 次事件重新制作一次全量快照<br />详见[“重新制作快照”](#重新制作快照)章节                                                                                       |
 | checkoutEveryNms | -           | 每 N 毫秒重新制作一次全量快照<br />详见[“重新制作快照”](#重新制作快照)章节                                                                                         |
 | blockClass       | 'rr-block'  | 字符串或正则表达式，可用于自定义屏蔽元素的类名，详见[“隐私”](#隐私)章节                                                                                            |
-| blockSelector    | null        | 字符串或正则表达式，可用于自定义屏蔽元素的选择器，详见[“隐私”](#隐私)章节                                                                                          |
 | ignoreClass      | 'rr-ignore' | 字符串或正则表达式，可用于自定义忽略元素的类名，详见[“隐私”](#隐私)章节                                                                                            |
 | maskAllInputs    | false       | 将所有输入内容记录为 \*                                                                                                                                            |
 | maskInputOptions | {}          | 选择将特定类型的输入框内容记录为 \*<br />类型详见[列表](https://github.com/rrweb-io/rrweb-snapshot/blob/6728d12b3cddd96951c86d948578f99ada5749ff/src/types.ts#L72) |
-| maskInputFn      | -           | 自定义特定类型的输入框内容记录逻辑                                                                                                                                 |
-| slimDOMOptions   | {}          | 去除 DOM 中不必要的部分 <br />类型详见[列表](https://github.com/rrweb-io/rrweb-snapshot/blob/6728d12b3cddd96951c86d948578f99ada5749ff/src/types.ts#L91)            |
 | inlineStylesheet | true        | 是否将样式表内联                                                                                                                                                   |
 | hooks            | {}          | 各类事件的回调<br />类型详见[列表](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L207)                              |
 | packFn           | -           | 数据压缩函数，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md)                                                                                         |
 | sampling         | -           | 数据抽样策略，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md)                                                                                         |
 | recordCanvas     | false       | 是否记录 canvas 内容                                                                                                                                               |
 | collectFonts     | false       | 是否记录页面中的字体文件                                                                                                                                           |
-| recordLog        | false       | 是否记录 console 输出，详见[console 录制和播放](./docs/recipes/console.zh_CN.md)                                                                                   |
+| recordLog        | false       | 是否记录console 输出，详见[console录制和播放](./docs/recipes/console.zh_CN.md)                                                                                     |
 
 #### 隐私
 
@@ -286,12 +283,12 @@ replayer.pause(5000);
 | showDebug           | false         | 是否在回放过程中打印 debug 信息                                                                                                                                                                      |
 | blockClass          | 'rr-block'    | 需要在回放时展示为隐藏区域的元素类名                                                                                                                                                                 |
 | liveMode            | false         | 是否开启直播模式                                                                                                                                                                                     |
-| insertStyleRules     | []            | 可以传入多个 CSS rule string，用于自定义回放时 iframe 内的样式                                                                                                                                       |
+| inertStyleRules     | []            | 可以传入多个 CSS rule string，用于自定义回放时 iframe 内的样式                                                                                                                                       |
 | triggerFocus        | true          | 回放时是否回放 focus 交互                                                                                                                                                                            |
 | UNSAFE_replayCanvas | false         | 回放时是否回放 canvas 内容，**开启后将会关闭沙盒策略，导致一定风险**                                                                                                                                 |
 | 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)                                                                                                               |
+| logConfig           | -             | console logger数据播放设置，详见[console录制和播放](./docs/recipes/console.zh_CN.md)                                                                                                                 |
 
 #### 使用 rrweb-player
 
@@ -376,9 +373,9 @@ replayer.on(EVENT_NAME, (payload) => {
 
 | 事件类型               | 描述           | 值                      |
 | ---------------------- | -------------- | ----------------------- |
-| ui-update-current-time | 当前回放时间点 | { payload } |
-| ui-update-player-state | 当前回放状态   | { payload } |
-| ui-update-progress     | 当前回放百分比 | { payload } |
+| ui-update-current-time | 当前回放时间点 | { detail: { payload } } |
+| ui-update-player-state | 当前回放状态   | { detail: { payload } } |
+| ui-update-progress     | 当前回放百分比 | { detail: { payload } } |
 
 ## REPL 工具
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@highlight-run/rrweb",
-  "version": "0.10.5",
+  "version": "0.10.6",
   "description": "record and replay the web",
   "scripts": {
     "test": "npm run bundle:browser && cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.test.ts",
@@ -44,13 +44,11 @@
     "jest-snapshot": "^23.6.0",
     "mini-css-extract-plugin": "^1.3.8",
     "mocha": "^5.2.0",
-    "prettier": "2.2.1",
     "puppeteer": "^1.11.0",
     "rollup": "^2.3.3",
     "rollup-plugin-commonjs": "^9.2.0",
     "rollup-plugin-node-resolve": "^3.4.0",
     "rollup-plugin-postcss": "^3.1.1",
-    "rollup-plugin-rename-node-modules": "^1.1.0",
     "rollup-plugin-terser": "^5.3.0",
     "rollup-plugin-typescript": "^1.0.0",
     "style-loader": "^2.0.0",

diff --git a/rollup.config.js b/rollup.config.js
@@ -2,7 +2,6 @@ import typescript from 'rollup-plugin-typescript';
 import resolve from 'rollup-plugin-node-resolve';
 import { terser } from 'rollup-plugin-terser';
 import postcss from 'rollup-plugin-postcss';
-import renameNodeModules from 'rollup-plugin-rename-node-modules';
 import pkg from './package.json';
 
 function toRecordPath(path) {
@@ -138,7 +137,6 @@ for (const c of baseConfigs) {
       {
         format: 'esm',
         dir: 'es/rrweb',
-        plugins: [renameNodeModules('ext')],
       },
     ],
   });

diff --git a/scripts/repl.ts b/scripts/repl.ts
@@ -81,11 +81,7 @@ function getCode(): string {
         width: 1600,
         height: 900,
       },
-      args: [
-        '--start-maximized',
-        '--ignore-certificate-errors',
-        '--no-sandbox',
-      ],
+      args: ['--start-maximized', '--ignore-certificate-errors'],
     });
     const page = await browser.newPage();
     await page.goto(url, {
@@ -132,7 +128,7 @@ function getCode(): string {
         width: 1600,
         height: 900,
       },
-      args: ['--start-maximized', '--no-sandbox'],
+      args: ['--start-maximized'],
     });
     const page = await browser.newPage();
     await page.goto('about:blank');

diff --git a/src/index.ts b/src/index.ts
@@ -8,6 +8,7 @@ export {
   IncrementalSource,
   MouseInteractions,
   ReplayerEvents,
+  HighlightConfiguration,
 } from './types';
 
 const { addCustomEvent } = record;

diff --git a/src/record/iframe-manager.ts b/src/record/iframe-manager.ts