Merge remote-tracking branch 'upstream/master' into capture-preload-s…

…tylesheets

.changeset/breezy-mice-breathe.md

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

.changeset/few-rockets-travel.md

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

.changeset/lazy-squids-draw.md

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

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>

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)。

package.json

@@ -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/test/utils.ts

@@ -13,6 +13,7 @@ export async function compileTSCode(inputFilePath: string) {
       resolve() as unknown as rollup.Plugin,
       _typescript({
         tsconfigOverride: { compilerOptions: { module: 'ESNext' } },
+        clean: true,
       }) as unknown as rollup.Plugin,
     ],
   });

packages/rrweb/src/index.ts

@@ -1,5 +1,6 @@
 import record from './record';
 import { Replayer } from './replay';
+import canvasMutation from './replay/canvas';
 import { _mirror } from './utils';
 import * as utils from './utils';
 
@@ -21,6 +22,7 @@ export {
   addCustomEvent,
   freezePage,
   Replayer,
+  canvasMutation,
   _mirror as mirror,
   utils,
 };

packages/rrweb/src/plugins/console/record/stringify.ts

@@ -91,7 +91,7 @@ export function stringify(
   const keys: unknown[] = [];
   return JSON.stringify(
     obj,
-    function (key, value: string | object | null | undefined) {
+    function (key, value: string | bigint | object | null | undefined) {
       /**
        * forked from https://github.com/moll/json-stringify-safe/blob/master/stringify.js
        * to deCycle the object
@@ -120,6 +120,9 @@ export function stringify(
       if (shouldIgnore(value as object)) {
         return toString(value as object);
       }
+      if (typeof value === 'bigint') {
+        return value.toString() + 'n';
+      }
       if (value instanceof Event) {
         const eventResult: Record<string, unknown> = {};
         for (const eventKey in value) {
@@ -158,7 +161,7 @@ export function stringify(
       return true;
     }
 
-    // is function
+    // is function or bigint
     if (typeof _obj === 'function') {
       return true;
     }

packages/rrweb/test/plugins/console/record.test.ts

@@ -0,0 +1,11 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { stringify } from '../../../src/plugins/console/record/stringify';
+
+describe('console record plugin', () => {
+  it('can stringify bigint', () => {
+    expect(stringify(BigInt(1))).toEqual('"1n"');
+  });
+});

yarn.lock

@@ -3543,16 +3543,16 @@
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
   integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
 
-"@types/semver@^7.5.0":
-  version "7.5.6"
-  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.6.tgz#c65b2bfce1bec346582c07724e3f8c1017a20339"
-  integrity sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==
-
 "@types/semver@^7.3.12":
   version "7.5.5"
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.5.tgz#deed5ab7019756c9c90ea86139106b0346223f35"
   integrity sha512-+d+WYC1BxJ6yVOgUgzK8gWvp5qF8ssV5r4nsDcZWKRWcDQLQ619tvWAxJQYGgBrO1MnLJC7a5GtiYsAoQ47dJg==
 
+"@types/semver@^7.5.0":
+  version "7.5.6"
+  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.6.tgz#c65b2bfce1bec346582c07724e3f8c1017a20339"
+  integrity sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==
+
 "@types/stack-utils@^2.0.0":
   version "2.0.1"
   resolved "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz"
@@ -5564,15 +5564,10 @@ csso@^4.0.2:
   dependencies:
     css-tree "^1.1.2"
 
-cssom@^0.4.4, "cssom@https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz":
+cssom@^0.4.4, cssom@^0.5.0, "cssom@https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz":
   version "0.6.0"
   resolved "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz#ed298055b97cbddcdeb278f904857629dec5e0e1"
 
-cssom@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.5.0.tgz#d254fa92cd8b6fbd83811b9fbaed34663cc17c36"
-  integrity sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==
-
 cssom@~0.3.6:
   version "0.3.8"
   resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"