Rrweb sync alpha 12

.changeset/breezy-mice-breathe.md

@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+safely capture BigInt values with the console log plugin"

.changeset/cold-hounds-teach.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/few-rockets-travel.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/fluffy-planes-retire.md

@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+Feat: Add support for replaying :defined pseudo-class of custom elements

.changeset/friendly-numbers-leave.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/gold-apples-joke.md

@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+ref: Avoid unnecessary cloning of objects or arrays

.changeset/hip-worms-relax.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/lazy-squids-draw.md

@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+export the canvasMutation function

.changeset/lemon-lamps-switch.md

@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+export eventWithTime for consumption by typescript code

.changeset/mighty-bulldogs-begin.md

@@ -0,0 +1,5 @@
+---
+'@rrweb/web-extension': patch
+---
+
+Update `vite.config.ts` to account for all potential entry types.

.changeset/moody-dots-refuse.md

@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+use WeakMap for faster attributeCursor lookup while processing attribute mutations

.changeset/rare-adults-sneeze.md

@@ -0,0 +1,6 @@
+---
+'rrweb-snapshot': patch
+'rrweb': patch
+---
+
+Don't double-record the values of <textarea>s when they already have some content prefilled #1301

.changeset/silver-windows-float.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/smart-ears-refuse.md

@@ -0,0 +1,7 @@
+---
+'rrweb-snapshot': patch
+---
+
+Feat: Add 'isCustom' flag to serialized elements.
+
+This flag is used to indicate whether the element is a custom element or not. This is useful for replaying the :defined pseudo-class of custom elements.

.changeset/smooth-papayas-boil.md

@@ -0,0 +1,6 @@
+---
+'rrweb-snapshot': patch
+'rrweb': patch
+---
+
+Capture stylesheets designated as `rel="preload"`

.changeset/spotty-bees-destroy.md

@@ -0,0 +1,5 @@
+---
+'rrdom': patch
+---
+
+fix: scrolling may not be applied when fast-forwarding

.changeset/thin-vans-applaud.md

@@ -0,0 +1,6 @@
+---
+'rrweb-snapshot': patch
+'rrweb': patch
+---
+
+Snapshot performance when masking text: Avoid the repeated calls to `closest` when recursing through the DOM

.changeset/tidy-swans-repair.md

@@ -0,0 +1,5 @@
+---
+'@rrweb/web-extension': patch
+---
+
+🎈 perf(web-extension): conditional check in Player component

.changeset/tiny-candles-whisper.md

@@ -0,0 +1,5 @@
+---
+'@rrweb/web-extension': patch
+---
+
+🐞 fix(web-extension): typo

.changeset/twenty-goats-kneel.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/witty-kids-talk.md

@@ -0,0 +1,5 @@
+---
+'@rrweb/web-extension': patch
+---
+
+🐞 fix(web-extension): beforeunload logic

.eslintrc.js

@@ -21,5 +21,6 @@ module.exports = {
   plugins: ['@typescript-eslint', 'eslint-plugin-tsdoc', 'jest', 'compat'],
   rules: {
     'tsdoc/syntax': 'warn',
+    '@typescript-eslint/prefer-as-const': 'warn',
   },
 };

.github/workflows/style-check.yml

@@ -15,7 +15,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: lts/*
           cache: 'yarn'
       - name: Install Dependencies
         run: yarn install --frozen-lockfile
@@ -62,7 +62,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: lts/*
           cache: 'yarn'
       - name: Install Dependencies
         run: yarn install --frozen-lockfile
@@ -82,7 +82,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: lts/*
           cache: 'yarn'
       - name: Install Dependencies
         run: yarn install --frozen-lockfile

README.md

@@ -27,6 +27,8 @@ rrweb refers to 'record and replay the web', which is a tool for recording and r
 
 [**🍳 Recipes 🍳**](./docs/recipes/index.md)
 
+[**📺 Presentation:** Hacking the browser to digital twin your users 📺](https://youtu.be/cWxpp9HwLYw)
+
 ## Project Structure
 
 rrweb is mainly composed of 3 parts:
@@ -138,6 +140,7 @@ In addition to adding integration tests and unit tests, rrweb also provides a RE
           alt=""
         />
         <br /><sub><b>Yuyz0112</b></sub>
+        <br /><br />
       </a>
     </td>
     <td align="center">
@@ -148,6 +151,7 @@ In addition to adding integration tests and unit tests, rrweb also provides a RE
           alt=""
         />
         <br /><sub><b>Yun Feng</b></sub>
+        <br /><br />
       </a>
     </td>
     <td align="center">
@@ -158,6 +162,7 @@ In addition to adding integration tests and unit tests, rrweb also provides a RE
           alt=""
         />
         <br /><sub><b>eoghanmurray</b></sub>
+        <br /><br />
       </a>
     </td>
     <td align="center">
@@ -168,6 +173,7 @@ In addition to adding integration tests and unit tests, rrweb also provides a RE
           alt=""
         />
         <br /><sub><b>Juice10</b></sub>
+        <br /><sub>open for rrweb consulting</sub>
       </a>
     </td>
   </tr>
@@ -226,5 +232,20 @@ In addition to adding integration tests and unit tests, rrweb also provides a RE
         <img style="padding: 8px" alt="Intercept, Modify, Record & Replay HTTP Requests." width="195px" src="https://github.com/requestly/requestly/assets/16779465/652552db-c867-44cb-9bb5-94a2026e04ca">
       </a>
     </td>
+    <td align="center">
+      <a href="https://gleap.io" target="_blank">
+        <img style="padding: 8px" alt="In-app bug reporting & customer feedback platform." width="195px" src="https://assets-global.website-files.com/6506f3f29c68b1724807619d/6506f56010237164c6306591_GleapLogo.svg">
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://uxwizz.com" target="_blank">
+        <img style="padding: 8px" alt="Self-hosted website analytics with heatmaps and session recordings." width="195px" src="https://github.com/UXWizz/public-files/raw/main/assets/logo.png">
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://www.howdygo.com" target="_blank">
+        <img style="padding: 8px" alt="Interactive product demos for small marketing teams" width="195px" src="https://assets-global.website-files.com/650afb446f1dd5bd410f00cc/650b2cec6188ff54dd9b01e1_Logo.svg">
+      </a>
+    </td>
   </tr>
 </table>

README.zh_CN.md

@@ -166,5 +166,10 @@ rrweb 主要由 3 部分组成：
         <img style="padding: 8px" alt="Intercept, Modify, Record & Replay HTTP Requests." width="195px" src="https://github.com/requestly/requestly/assets/16779465/652552db-c867-44cb-9bb5-94a2026e04ca">
       </a>
     </td>
+    <td align="center">
+      <a href="https://uxwizz.com" target="_blank">
+        <img style="padding: 8px" alt="Self-hosted website analytics with heatmaps and session recordings." width="195px" src="https://github.com/UXWizz/public-files/raw/main/assets/logo.png">
+      </a>
+    </td>
   </tr>
 </table>

docs/recipes/export-to-video.md

@@ -4,4 +4,4 @@ The event data recorded by rrweb is a performant, easy to compress, text-based f
 
 But if you really need to convert it into a video format, there are some tools that can do this work.
 
-Use [rrvideo](https://github.com/rrweb-io/rrvideo).
+Use [rrvideo](https://github.com/rrweb-io/rrweb/blob/master/packages/rrvideo/README.md).

docs/recipes/export-to-video.zh_CN.md

@@ -2,4 +2,4 @@
 
 rrweb 录制的数据是一种高效、易于压缩的文本格式，可以用于像素级的回放。但如果有进一步将录制数据转换为视频的需求，同样可以通过一些工具实现。
 
-使用 [rrvideo](https://github.com/rrweb-io/rrvideo)。
+使用 [rrvideo](https://github.com/rrweb-io/rrweb/blob/master/packages/rrvideo/README.zh_CN.md)。

guide.zh_CN.md

@@ -159,7 +159,7 @@ setInterval(save, 10 * 1000);
 | collectFonts             | false              | 是否记录页面中的字体文件                                                                                                                                                              |
 | userTriggeredOnInput     | false              | [什么是 `userTriggered`](https://github.com/rrweb-io/rrweb/pull/495)                                                                                                                  |
 | plugins                  | []                 | 加载插件以获得额外的录制功能. [什么是插件？](./docs/recipes/plugin.zh_CN.md)                                                                                                          |
-| errorHandler             | -                  | 一个可以定制化处理错误的毁掉函数，它的参数是错误对象。如果 rrweb recorder 内部的某些内容抛出错误，则会调用该回调。                                                                    |
+| errorHandler             | -                  | 一个可以定制化处理错误的回调函数，它的参数是错误对象。如果 rrweb recorder 内部的某些内容抛出错误，则会调用该回调。                                                                    |
 
 #### 隐私
 

package.json

@@ -18,17 +18,17 @@
     "packages/*"
   ],
   "devDependencies": {
-    "@changesets/changelog-github": "^0.4.8",
-    "@changesets/cli": "^2.26.0",
+    "@changesets/changelog-github": "^0.5.0",
+    "@changesets/cli": "^2.27.1",
     "@monorepo-utils/workspaces-to-typescript-project-references": "^2.8.2",
-    "@typescript-eslint/eslint-plugin": "^5.25.0",
-    "@typescript-eslint/parser": "^5.25.0",
-    "browserslist": "^4.21.4",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
+    "browserslist": "^4.22.1",
     "concurrently": "^7.1.0",
-    "eslint": "^8.19.0",
-    "eslint-plugin-compat": "^4.0.2",
-    "eslint-plugin-jest": "^27.1.3",
-    "eslint-plugin-tsdoc": "^0.2.16",
+    "eslint": "^8.53.0",
+    "eslint-plugin-compat": "^4.2.0",
+    "eslint-plugin-jest": "^27.6.0",
+    "eslint-plugin-tsdoc": "^0.2.17",
     "markdownlint": "^0.25.1",
     "markdownlint-cli": "^0.31.1",
     "prettier": "2.8.4",
@@ -37,7 +37,7 @@
   },
   "scripts": {
     "build:all": "NODE_OPTIONS='--max-old-space-size=4096' yarn run concurrently --success=all -r -m=1 'yarn workspaces-to-typescript-project-references' 'yarn turbo run prepublish'",
-    "test": "yarn run concurrently --success=all -r -m=1 'yarn workspaces-to-typescript-project-references --check' 'yarn turbo run test'",
+    "test": "yarn run concurrently --success=all -r -m=1 'yarn workspaces-to-typescript-project-references --check' 'yarn turbo run test --concurrency=1'",
     "test:watch": "yarn turbo run test:watch",
     "test:update": "yarn turbo run test:update",
     "format": "yarn prettier --write '**/*.{ts,md}'",

packages/rrdom/src/diff.ts

@@ -118,7 +118,7 @@ export function diff(
 
   diffChildren(oldTree, newTree, replayer, rrnodeMirror);
 
-  diffAfterUpdatingChildren(oldTree, newTree, replayer, rrnodeMirror);
+  diffAfterUpdatingChildren(oldTree, newTree, replayer);
 }
 
 /**
@@ -194,6 +194,15 @@ function diffBeforeUpdatingChildren(
           rrnodeMirror,
         );
       }
+      /**
+       * Attributes and styles of the old element need to be updated before updating its children because of an edge case:
+       * `applyScroll` may fail in `diffAfterUpdatingChildren` when the height of a node when `applyScroll` is called may be incorrect if
+       * 1. its parent node contains styles that affects the targeted node's height
+       * 2. the CSS selector is targeting an attribute of the parent node
+       * by running `diffProps` on the parent node before `diffChildren` is called,
+       * we can ensure that the correct attributes (and therefore styles) have applied to parent nodes
+       */
+      diffProps(oldElement, newRRElement, rrnodeMirror);
       break;
     }
   }
@@ -207,7 +216,6 @@ function diffAfterUpdatingChildren(
   oldTree: Node,
   newTree: IRRNode,
   replayer: ReplayerHandler,
-  rrnodeMirror: Mirror,
 ) {
   switch (newTree.RRNodeType) {
     case RRNodeType.Document: {
@@ -218,7 +226,6 @@ function diffAfterUpdatingChildren(
     case RRNodeType.Element: {
       const oldElement = oldTree as HTMLElement;
       const newRRElement = newTree as RRElement;
-      diffProps(oldElement, newRRElement, rrnodeMirror);
       newRRElement.scrollData &&
         replayer.applyScroll(newRRElement.scrollData, true);
       /**

packages/rrweb-snapshot/package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "prepare": "npm run prepack",
     "prepack": "npm run bundle && npm run typings",
-    "test": "jest",
+    "retest": "jest",
+    "test": "yarn bundle && yarn retest",
     "test:watch": "jest --watch",
     "test:update": "jest --updateSnapshot",
     "bundle": "rollup --config",

packages/rrweb-snapshot/src/rebuild.ts

@@ -5,7 +5,6 @@ import {
   tagMap,
   elementNode,
   BuildCache,
-  attributes,
   legacyAttributes,
 } from './types';
 import { isElement, Mirror, isNodeMetaEqual } from './utils';
@@ -170,6 +169,18 @@ function buildNode(
       if (n.isSVG) {
         node = doc.createElementNS('http://www.w3.org/2000/svg', tagName);
       } else {
+        if (
+          // If the tag name is a custom element name
+          n.isCustom &&
+          // If the browser supports custom elements
+          doc.defaultView?.customElements &&
+          // If the custom element hasn't been defined yet
+          !doc.defaultView.customElements.get(n.tagName)
+        )
+          doc.defaultView.customElements.define(
+            n.tagName,
+            class extends doc.defaultView.HTMLElement {},
+          );
         node = doc.createElement(tagName);
       }
       /**
@@ -216,14 +227,9 @@ function buildNode(
           value = adaptCssForReplay(value, cache);
         }
         if ((isTextarea || isRemoteOrDynamicCss) && typeof value === 'string') {
-          const child = doc.createTextNode(value);
+          node.appendChild(doc.createTextNode(value));
           // https://github.com/rrweb-io/rrweb/issues/112
-          for (const c of Array.from(node.childNodes)) {
-            if (c.nodeType === node.TEXT_NODE) {
-              node.removeChild(c);
-            }
-          }
-          node.appendChild(child);
+          n.childNodes = []; // value overrides childNodes
           continue;
         }