From b9f5784de8edb95ce37fa72056f0dc95f9198555 Mon Sep 17 00:00:00 2001 From: Eoghan Murray Date: Wed, 28 May 2025 15:28:25 +0100 Subject: [PATCH 1/7] Don't allow video autoplay to automatically unfreeze page. If it's a 'real' playback, there should be a mount or a keyboard event which will serve to unfreeze the page. Also add other non-user events to the list (we really should have an `isUserEvent` function) --- packages/rrweb/src/record/index.ts | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/rrweb/src/record/index.ts b/packages/rrweb/src/record/index.ts index 1308c378a6..70704e32c6 100644 --- a/packages/rrweb/src/record/index.ts +++ b/packages/rrweb/src/record/index.ts @@ -209,7 +209,15 @@ function record( e.type !== EventType.FullSnapshot && !( e.type === EventType.IncrementalSnapshot && - e.data.source === IncrementalSource.Mutation + [IncrementalSource.Mutation, + IncrementalSource.MediaInteraction, // often automatic e.g. background video loop + IncrementalSource.StyleSheetRule, + IncrementalSource.CanvasMutation, + IncrementalSource.Font, + IncrementalSource.Log, + IncrementalSource.StyleDeclaration, + IncrementalSource.AdoptedStyleSheet, + ].includes(e.data.source) ) ) { // we've got a user initiated event so first we need to apply From 68efa5bdda3efa41b0f9fa672867337f37345e0f Mon Sep 17 00:00:00 2001 From: eoghanmurray Date: Wed, 28 May 2025 14:36:41 +0000 Subject: [PATCH 2/7] Apply formatting changes --- packages/rrweb/src/record/index.ts | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/packages/rrweb/src/record/index.ts b/packages/rrweb/src/record/index.ts index 70704e32c6..e4f0f8a777 100644 --- a/packages/rrweb/src/record/index.ts +++ b/packages/rrweb/src/record/index.ts @@ -209,15 +209,16 @@ function record( e.type !== EventType.FullSnapshot && !( e.type === EventType.IncrementalSnapshot && - [IncrementalSource.Mutation, - IncrementalSource.MediaInteraction, // often automatic e.g. background video loop - IncrementalSource.StyleSheetRule, - IncrementalSource.CanvasMutation, - IncrementalSource.Font, - IncrementalSource.Log, - IncrementalSource.StyleDeclaration, - IncrementalSource.AdoptedStyleSheet, - ].includes(e.data.source) + [ + IncrementalSource.Mutation, + IncrementalSource.MediaInteraction, // often automatic e.g. background video loop + IncrementalSource.StyleSheetRule, + IncrementalSource.CanvasMutation, + IncrementalSource.Font, + IncrementalSource.Log, + IncrementalSource.StyleDeclaration, + IncrementalSource.AdoptedStyleSheet, + ].includes(e.data.source) ) ) { // we've got a user initiated event so first we need to apply From 396875d994da658a0f2024a7c1bef4aed9f71353 Mon Sep 17 00:00:00 2001 From: Eoghan Murray Date: Thu, 12 Jun 2025 15:02:45 +0100 Subject: [PATCH 3/7] Create a new `umd` folder alongside `dist` for output of UMD files with a plain `.js` instead of `.cjs` extension, as the latter won't be served with the correct mime type by jsdelivr - #1687 (just rename `.cjs` to `.js`) was rejected due to the the 'dual package hazard' [1], and produces a warning when run through publint.dev (which was the original motivation for changing to \.cjs) - jsdelivr won't be serving `.cjs` with the correct mime type: https://github.com/jsdelivr/jsdelivr/issues/18584 [1] https://nodejs.org/en/learn/modules/publishing-a-package#the-dual-package-hazard --- guide.md | 6 +++--- guide.zh_CN.md | 6 +++--- packages/rrweb-player/README.md | 2 +- vite.config.default.ts | 13 +++++++++---- 4 files changed, 16 insertions(+), 11 deletions(-) diff --git a/guide.md b/guide.md index 764e359fb4..b713f76933 100644 --- a/guide.md +++ b/guide.md @@ -15,13 +15,13 @@ You are recommended to install rrweb via jsdelivr's CDN service: rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/style.css" /> - + ``` Also, you can link to a specific version number that you can update manually: ```html - + ``` #### Only include the recorder code @@ -30,7 +30,7 @@ rrweb's code includes both the record and the replay parts. Most of the time you This also can be done by using the `@rrweb/record` package and the CDN service: ```html - + ``` #### Other packages diff --git a/guide.zh_CN.md b/guide.zh_CN.md index 4078cb2b6a..4b83eef469 100644 --- a/guide.zh_CN.md +++ b/guide.zh_CN.md @@ -13,13 +13,13 @@ rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/style.css" /> - + ``` 也可以在 URL 中指定具体的版本号,例如: ```html - + ``` #### 仅引入录制部分 @@ -27,7 +27,7 @@ rrweb 代码分为录制和回放两部分,大多数时候用户在被录制的应用中只需要引入录制部分代码。同样可以通过使用 @rrweb/record 包和 CDN 服务来实现: ```html - + ``` #### 其他包 diff --git a/packages/rrweb-player/README.md b/packages/rrweb-player/README.md index 866adc7c67..855b559763 100644 --- a/packages/rrweb-player/README.md +++ b/packages/rrweb-player/README.md @@ -19,7 +19,7 @@ rrweb-player can also be included with ` + ``` Or installed by using NPM: diff --git a/vite.config.default.ts b/vite.config.default.ts index 46af9327a6..12764cfb9c 100644 --- a/vite.config.default.ts +++ b/vite.config.default.ts @@ -1,9 +1,9 @@ /// import dts from 'vite-plugin-dts'; -import { copyFileSync } from 'node:fs'; +import { copyFileSync, mkdirSync } from 'node:fs'; import { defineConfig, LibraryOptions, LibraryFormats, Plugin } from 'vite'; import { build, Format } from 'esbuild'; -import { resolve } from 'path'; +import { resolve, dirname } from 'path'; import { umdWrapper } from 'esbuild-plugin-umd-wrapper'; import * as fs from 'node:fs'; import { visualizer } from 'rollup-plugin-visualizer'; @@ -51,22 +51,27 @@ function minifyAndUMDPlugin({ outDir, }); } else { + mkdirSync(dirname(outputFilePath).replace('/dist', '/umd')); + const outUmd = `${outputFilePath}.umd.cjs`; await buildFile({ name, input: inputFilePath, - output: `${outputFilePath}.umd.cjs`, + output: outUmd, minify: false, isCss: false, outDir, }); + copyFileSync(outUmd, `${outputFilePath.replace('/dist/', '/umd/')}.js`); + const outUmdMin = `${outputFilePath}.umd.min.cjs`; await buildFile({ name, input: inputFilePath, - output: `${outputFilePath}.umd.min.cjs`, + output: outUmdMin, minify: true, isCss: false, outDir, }); + copyFileSync(outUmdMin, `${outputFilePath.replace('/dist/', '/umd/')}.min.js`); } } } From a3715c7f283a3f4d74b3aca374304da9c2317e1c Mon Sep 17 00:00:00 2001 From: Eoghan Murray Date: Thu, 12 Jun 2025 15:12:27 +0100 Subject: [PATCH 4/7] Update to point to alpha.19 as presumably that's when the umd folder will be available after the changes in this PR --- guide.md | 2 +- guide.zh_CN.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/guide.md b/guide.md index b713f76933..8ab8c17a7a 100644 --- a/guide.md +++ b/guide.md @@ -21,7 +21,7 @@ You are recommended to install rrweb via jsdelivr's CDN service: Also, you can link to a specific version number that you can update manually: ```html - + ``` #### Only include the recorder code diff --git a/guide.zh_CN.md b/guide.zh_CN.md index 4b83eef469..2bbeb4c9a5 100644 --- a/guide.zh_CN.md +++ b/guide.zh_CN.md @@ -19,7 +19,7 @@ 也可以在 URL 中指定具体的版本号,例如: ```html - + ``` #### 仅引入录制部分 From 6ca41fe2f7fef3b53ac72612caf45eab471a8183 Mon Sep 17 00:00:00 2001 From: eoghanmurray Date: Thu, 12 Jun 2025 14:18:49 +0000 Subject: [PATCH 5/7] Apply formatting changes --- vite.config.default.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/vite.config.default.ts b/vite.config.default.ts index 12764cfb9c..77d3d7d1cb 100644 --- a/vite.config.default.ts +++ b/vite.config.default.ts @@ -61,7 +61,10 @@ function minifyAndUMDPlugin({ isCss: false, outDir, }); - copyFileSync(outUmd, `${outputFilePath.replace('/dist/', '/umd/')}.js`); + copyFileSync( + outUmd, + `${outputFilePath.replace('/dist/', '/umd/')}.js`, + ); const outUmdMin = `${outputFilePath}.umd.min.cjs`; await buildFile({ name, @@ -71,7 +74,10 @@ function minifyAndUMDPlugin({ isCss: false, outDir, }); - copyFileSync(outUmdMin, `${outputFilePath.replace('/dist/', '/umd/')}.min.js`); + copyFileSync( + outUmdMin, + `${outputFilePath.replace('/dist/', '/umd/')}.min.js`, + ); } } } From b7e3c4ce850850d9ba2638fd210f76be8eeeb231 Mon Sep 17 00:00:00 2001 From: Eoghan Murray Date: Thu, 12 Jun 2025 15:36:45 +0100 Subject: [PATCH 6/7] Don't try to create the same directory twice (was failing on packages/packer/umd) --- vite.config.default.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/vite.config.default.ts b/vite.config.default.ts index 77d3d7d1cb..b6a4867d9d 100644 --- a/vite.config.default.ts +++ b/vite.config.default.ts @@ -1,6 +1,6 @@ /// import dts from 'vite-plugin-dts'; -import { copyFileSync, mkdirSync } from 'node:fs'; +import { copyFileSync, mkdirSync, existsSync } from 'node:fs'; import { defineConfig, LibraryOptions, LibraryFormats, Plugin } from 'vite'; import { build, Format } from 'esbuild'; import { resolve, dirname } from 'path'; @@ -51,7 +51,10 @@ function minifyAndUMDPlugin({ outDir, }); } else { - mkdirSync(dirname(outputFilePath).replace('/dist', '/umd')); + const umdDir = dirname(outputFilePath).replace('/dist', '/umd'); + if (!existsSync(umdDir)) { + mkdirSync(umdDir); + } const outUmd = `${outputFilePath}.umd.cjs`; await buildFile({ name, From 11d7b393cf7a51b336ab6d843fd7c1c3e9773ede Mon Sep 17 00:00:00 2001 From: Eoghan Murray Date: Thu, 12 Jun 2025 15:45:41 +0100 Subject: [PATCH 7/7] Create thirty-shirts-grow.md --- .changeset/thirty-shirts-grow.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 .changeset/thirty-shirts-grow.md diff --git a/.changeset/thirty-shirts-grow.md b/.changeset/thirty-shirts-grow.md new file mode 100644 index 0000000000..9281088ee4 --- /dev/null +++ b/.changeset/thirty-shirts-grow.md @@ -0,0 +1,16 @@ +--- +"all": patch +"packer": patch +"plugins": patch +"record": patch +"replay": patch +"rrdom": patch +"rrdom-nodejs": patch +"rrweb": patch +"rrweb-player": patch +"rrweb-snapshot": patch +"types": patch +"utils": patch +--- + +Provide a /umd/ output folder alongside the /dist/ one so that we can serve UMD (Universal Module Definition) files with a .js extension, without upsetting expectations set by package.json that all .js files in /dist/ are modules