Chore: Migrate build to vite (#1033)

* Chore: Add move most types from rrweb to @rrweb/types package * Split off type imports * Split off type import to its own line * Get vite to generate type definitions * Apply formatting changes * noEmit not allowed in tsconfig, moved it to build step * Migrate rrdom-nodejs build to vite * Apply formatting changes * Migrate rrweb-snapshot to vite * Unify configs * Chore: Migrate rrdom to vite Turns out what we where doing by overwriting `public textContent: string | undefined` as a getter in a subclass is something that isn't allowed in typescript. Because we where using `// @ts-ignore` to hide this error our bundler chose to allow the overwrite. Vite choses to disallow the overwrite making all subclasses' `textContent` undefined. To mitigate this we're using an abstract class, which does allow sub classes to decide if they wan't to use getters or not. * Chore: Migrate rrweb to vite WIP * build:browser was removed (for now) * BREAKING: moved rrweb-plugin-console to its own npm module This removes console from rrweb-all.js * Support cjs files in startServer * Move canvas-webrtc plugin to its own package * Chore: move sequential-id plugin to its own package * Chore: Configure rrweb's vite bundling * `Id` had lowercase `d` before, making it lowercase again * Test: Move console tests to their own package * remove unused utils from rrdom * pull in latest version of master something when wrong earlier when resolving merge conflicts, this should be correct * Fix type casting issue in diff.ts * Fix typo * Fix duplicate entries in package.json and tsconfig.json * Apply formatting changes * Update dependencies in package.json files * Update dependencies to use Vite 5.2.8 in package.json files * Get tests passing for rrdom `apply virtual style rules to node` tests need to be moved to rrweb to avoid circular dependencies * Fix image loading issue in integration tests * Move pack/unpack to its own @rrweb/packer module * Get tests to work in rrdom-nodejs * Port tests in rrweb-snapshot to vitest and fix them * Fix tests for rrweb-plugin-console-record * Add @rrweb/all package * Fix publint and attw errors for rrdom and @rrweb/types * Use shared vitest.config.ts in rrweb-snapshot package * Fix publint and attw issues for rrweb-snapshot * Export `ReplayPlugin` type directly from rrweb * Fix publint and attw issues for packages * Fix publint & attw issue. I was bumping into this issue: 3729bc2a3c/docs/problems/NoResolution.md And had to choose one of these three methods described here: https://github.com/andrewbranch/example-subpath-exports-ts-compat?tab=readme-ov-file#typescript-friendly-strategies-for-packagejson-subpath-exports-compatibility And I ended up going for the method described here: 1ffe3425b0/examples/node_modules/package-json-redirects (package-json-redirects) The redirect method seemed the least invasive and most effective. * Fix publint & attw issue. I was bumping into this issue: 3729bc2a3c/docs/problems/NoResolution.md And had to choose one of these three methods described here: https://github.com/andrewbranch/example-subpath-exports-ts-compat?tab=readme-ov-file#typescript-friendly-strategies-for-packagejson-subpath-exports-compatibility And I ended up going for the method described here: 1ffe3425b0/examples/node_modules/package-json-redirects (package-json-redirects) The redirect method seemed the least invasive and most effective. * move some rrdom tests that require rrweb to rrweb package * Use pre-jest 29 syntax for snapshotting * get rrweb passing publint and attw * const enum does not work with isolated modules flag * Fix script tag type in webgl.test.ts.snap and update rrweb.umd.cjs path in webgl.test.ts * Fix paths * Move tests for console record plugin and fix bundle path * Fix tests for rrweb * pack integration tests were moved to @rrweb/all * Update rrweb bundle path in test files * Fix flaky scroll emit from test * Migrate rrweb's tests over to vitest and make them pass * Make sure benchmarks & updating tests work * Remove jest from rrweb * Fix paths * always use rrweb's own cssom * Update tsconfig.json for rrweb-plugin-sequential-id-record Fixes this error: Error: @rrweb/rrweb-plugin-sequential-id-record:prepublish: tsconfig.json(9,5): error TS6377: Cannot write file '/home/runner/work/rrweb/rrweb/tsconfig.tsbuildinfo' because it will overwrite '.tsbuildinfo' file generated by referenced project '/home/runner/work/rrweb/rrweb/packages/rrweb' * Add tsbuildinfo config to extended tsconfig files * Move rrdom over to vitest * Apply formatting changes * Update rrweb imports to use the new package structure * extend rrweb-snapshot's tsconfig from monorepo base config * extend @rrweb/types's tsconfig from monorepo base config * extend rrdom's tsconfig from monorepo base config * extend rrdom-nodejs's tsconfig from monorepo base config * extend web-extension's tsconfig from monorepo base config * unify tsconfigs * Continue when tests fail * Add stricter type checking * Add check-types global command * remove jest * Remove unused code * Add check-types command to build script * Fix linting issues * Add setup Chrome action for CI/CD workflow * Update puppeteer version in package.json for rrweb * Update Chrome setup in CI/CD workflow * Update Chrome setup in CI/CD workflow * Add Chrome setup and test cache location * Update CI/CD workflow to test chrome cache location * Add chrome installation step to CI/CD workflow * Update Puppeteer configuration for headless testing * Update dependencies and workflow configuration * Use same version of chrome on CI as is run locally * Use version of chrome that seems to work with rrdom tests * Try using puppeteerrc to define chrome version * Add .cache directory to .gitignore * Move global flag to vitest config * Update puppeteer version to 20.9.0 * Update console log messages in rrweb-plugin-console-record for new puppeteer version * Remove redundant Chrome setup from CI/CD workflow * Add minification and umd for all built files * Update import paths for rrweb dist files * Add @rrweb/replay and @rrweb/record * Add script to lint packages * Apply formatting changes * exclude styles export from typescript package type checking * WIP Move rrweb-player over to vite * Apply formatting changes * chore: Update rrweb plugin import paths * Remove rollup from rrweb-player * Fix typing issues * Fix typing issues * chore: Update rrweb-player to use vite for build process * Apply formatting changes * chore: Export Player class in rrweb-player/src/main.ts Makes attw happy * Apply formatting changes * Gets wiped by yarn workspaces-to-typescript-project-references * Add .eslintignore and .eslintrc.cjs files for rrweb-player package * Apply formatting changes * Update dependencies in rrweb-player/package.json * Apply formatting changes * chore: Update eslint configuration for rrweb-player package * Apply formatting changes * chore: Remove unused files from rrweb-player package * Apply formatting changes * chore: Update rrweb-player import path to use rrweb-player.cjs * chore: Update addEventListener signature in rrweb-player * Apply formatting changes * Add .eslintignore and update .gitignore files for to root * Apply formatting changes * Update documentation * Update @rrweb/types package description * Apply formatting changes * Update build and run commands in CONTRIBUTING.md * Apply formatting changes * Update package versions to 2.0.0-alpha.13 * Apply formatting changes * Apply formatting changes * Fix import statement in media/index.ts * Apply formatting changes * chore: Update .gitignore to exclude build and dist directories * Apply formatting changes * Apply formatting changes * Migrate setTimeout to vitest * Apply formatting changes * Apply formatting changes * Fix isNativeShadowDom function signature in utils.ts * try out jsr * Apply formatting changes * Update package versions to 2.0.0-alpha.14 * Apply formatting changes * Fix name of rrwebSnapshot object * Apply formatting changes * Remove unused lock files * Apply formatting changes * Update rrweb bundle path to use umd.cjs format * Apply formatting changes * Trigger tests to run again * Rename snapshots for vitest * Apply formatting changes * Ping CI * Apply formatting changes * Ping CI * Apply formatting changes * Ignore files generated by svelte-kit for prettier * Correct Player object
2026-04-01 12:00:00 +08:00
parent 4055c69e26
commit 5a85ddf013
266 changed files with 11616 additions and 9614 deletions
--- a/docs/recipes/canvas.md
+++ b/docs/recipes/canvas.md
@@ -40,5 +40,5 @@ replayer.play();

 **Enable replaying Canvas will remove the sandbox, which may cause a potential security issue.**

-Alternatively you can stream canvas elements via webrtc with the canvas-webrtc plugin.
-For more information see [canvas-webrtc documentation](../../packages/rrweb/src/plugins/canvas-webrtc/Readme.md)
+Alternatively you can stream canvas elements via webrtc with the [rrweb-plugin-canvas-webrtc-record](../../packages/plugins/rrweb-plugin-canvas-webrtc-record/) & [rrweb-plugin-canvas-webrtc-replay](../../packages/plugins/rrweb-plugin-canvas-webrtc-replay) plugins.
+For more information see [canvas-webrtc documentation](../../packages/plugins/rrweb-plugin-canvas-webrtc-record/Readme.md)
--- a/docs/recipes/canvas.zh_CN.md
+++ b/docs/recipes/canvas.zh_CN.md
@@ -40,5 +40,5 @@ replayer.play();

 **回放 Canvas 将会关闭沙盒策略，导致一定风险**。

-另外，您可以使用 canvas-webrtc 插件通过 WEBRTC 流式传输 Canvas 元素。
-有关更多信息，请参考[canvas-webrtc 文档](../../packages/rrweb/src/plugins/canvas-webrtc/Readme.md)
+另外，您可以使用 [rrweb-plugin-canvas-webrtc-record](../../packages/plugins/rrweb-plugin-canvas-webrtc-record/) 和 [rrweb-plugin-canvas-webrtc-replay](../../packages/plugins/rrweb-plugin-canvas-webrtc-replay) 插件通过 WebRTC 流式传输 Canvas 元素。
+有关更多信息，请参考 [canvas-webrtc 文档](../../packages/plugins/rrweb-plugin-canvas-webrtc-record/Readme.md)。
--- a/docs/recipes/console.md
+++ b/docs/recipes/console.md
@@ -8,6 +8,9 @@ This feature aims to provide developers with more information about the bug scen
 You can enable the logger using default option like this:

 ```js
+import rrweb from 'rrweb';
+import { getRecordConsolePlugin } from '@rrweb/rrweb-plugin-console-record';
+
 rrweb.record({
  emit: function emit(event) {
    // you should use console.log in this way to avoid errors.
@@ -17,7 +20,7 @@ rrweb.record({
    defaultLog(event);
  },
  // to use default record option
-  plugins: [rrweb.getRecordConsolePlugin()],
+  plugins: [getRecordConsolePlugin()],
 });
 ```

@@ -27,6 +30,9 @@ You should call console.log.\_\_rrweb_original\_\_() instead.
 You can also customize the behavior of logger like this:

 ```js
+import rrweb from 'rrweb';
+import { getRecordConsolePlugin } from '@rrweb/rrweb-plugin-console-record';
+
 rrweb.record({
  emit: function emit(event) {
    // you should use console.log in this way to avoid errors.
@@ -37,7 +43,7 @@ rrweb.record({
  },
  // customized options
  plugins: [
-    rrweb.getRecordConsolePlugin({
+    getRecordConsolePlugin({
      level: ['info', 'log', 'warn', 'error'],
      lengthThreshold: 10000,
      stringifyOptions: {
@@ -64,9 +70,12 @@ All options are described below:
 If recorded events include data of console log type, we will automatically play them.

 ```js
+import rrweb from 'rrweb';
+import { getReplayConsolePlugin } from '@rrweb/rrweb-plugin-console-replay';
+
 const replayer = new rrweb.Replayer(events, {
  plugins: [
-    rrweb.getReplayConsolePlugin({
+    getReplayConsolePlugin({
      level: ['info', 'log', 'warn', 'error'],
    }),
  ],
--- a/docs/recipes/console.zh_CN.md
+++ b/docs/recipes/console.zh_CN.md
@@ -7,7 +7,10 @@
 可以通过如下代码使用默认的配置选项

 ```js
-rrweb.record({
+import rrweb from 'rrweb';
+import { getRecordConsolePlugin } from '@rrweb/rrweb-plugin-console-record';
+
+rweb.record({
  emit: function emit(event) {
    // 如果要使用console来输出信息，请使用如下的写法
    const defaultLog = console.log['__rrweb_original__']
@@ -16,7 +19,7 @@ rrweb.record({
    defaultLog(event);
  },
  // 使用默认的配置选项
-  plugins: [rrweb.getRecordConsolePlugin()],
+  plugins: [getRecordConsolePlugin()],
 });
 ```

@@ -26,6 +29,9 @@ rrweb.record({
 你也可以定制录制 console 的选项

 ```js
+import rrweb from 'rrweb';
+import { getRecordConsolePlugin } from '@rrweb/rrweb-plugin-console-record';
+
 rrweb.record({
  emit: function emit(event) {
    // 如果要使用console来输出信息，请使用如下的写法
@@ -36,7 +42,7 @@ rrweb.record({
  },
  // 定制的选项
  plugins: [
-    rrweb.getRecordConsolePlugin({
+    getRecordConsolePlugin({
      level: ['info', 'log', 'warn', 'error'],
      lengthThreshold: 10000,
      stringifyOptions: {
@@ -63,9 +69,12 @@ rrweb.record({
 如果 replayer 传入的 events 中包含了 console 类型的数据，我们将自动播放这些数据。

 ```js
+import rrweb from 'rrweb';
+import { getReplayConsolePlugin } from '@rrweb/rrweb-plugin-console-replay';
+
 const replayer = new rrweb.Replayer(events, {
  plugins: [
-    rrweb.getReplayConsolePlugin({
+    getReplayConsolePlugin({
      level: ['info', 'log', 'warn', 'error'],
    }),
  ],
--- a/docs/recipes/customize-replayer.md
+++ b/docs/recipes/customize-replayer.md
@@ -1,11 +1,11 @@
 # Customize the Replayer

-When rrweb's Replayer and the rrweb-player UI do not fit your need, you can customize your replayer UI.
+When rrweb's Replayer and the [rrweb-player](../../packages/rrweb-player/) UI do not fit your need, you can customize your replayer UI.

 There are several ways to do this:

-1. Use rrweb-player, and customize its CSS.
-2. Use rrweb-player, and set `showController: false` to hide the controller UI. With this config, you can implement your controller UI.
+1. Use [rrweb-player](../../packages/rrweb-player/), and customize its CSS.
+2. Use [rrweb-player](../../packages/rrweb-player/), and set `showController: false` to hide the controller UI. With this config, you can implement your controller UI.
 3. Use the `insertStyleRules` options to inject some CSS into the replay iframe.
 4. Develop a new replayer UI with rrweb's Replayer.

@@ -14,6 +14,8 @@ There are several ways to do this:
 When using rrweb-player, you can hide its controller UI:

 ```js
+import rrwebPlayer from 'rrweb-player';
+
 new rrwebPlayer({
  target: document.body,
  props: {
--- a/docs/recipes/customize-replayer.zh_CN.md
+++ b/docs/recipes/customize-replayer.zh_CN.md
@@ -1,11 +1,11 @@
 # 自定义回放 UI

-当 rrweb Replayer 和 rrweb-player 的 UI 不能满足需求时，可以通过自定义回放 UI 制作属于你自己的回放器。
+当 rrweb Replayer 和 [rrweb-player](../../packages/rrweb-player/) 的 UI 不能满足需求时，可以通过自定义回放 UI 制作属于你自己的回放器。

 你可以通过以下几种方式从不同角度自定义回放 UI：

-1. 使用 rrweb-player 时，通过覆盖 CSS 样式表定制 UI。
-2. 使用 rrweb-player 时，通过 `showController: false` 隐藏控制器 UI，重新实现控制器 UI。
+1. 使用 [rrweb-player](../../packages/rrweb-player/) 时，通过覆盖 CSS 样式表定制 UI。
+2. 使用 [rrweb-player](../../packages/rrweb-player/) 时，通过 `showController: false` 隐藏控制器 UI，重新实现控制器 UI。
 3. 通过 `insertStyleRules` 在回放页面（iframe）内定制 CSS 样式。
 4. 基于 rrweb Replayer 开发自己的回放器 UI。

@@ -14,6 +14,8 @@
 使用 rrweb-player 时，可以隐藏其控制器 UI：

 ```js
+import rrwebPlayer from 'rrweb-player';
+
 new rrwebPlayer({
  target: document.body,
  props: {
--- a/docs/recipes/optimize-storage.md
+++ b/docs/recipes/optimize-storage.md
@@ -69,20 +69,24 @@ rrweb.record({

 ### Use packFn to compress every event

-rrweb provides an fflate-based simple compress function rrweb.pack.
+rrweb provides an fflate-based simple compress function in [@rrweb/packer](../../packages/packer/).

 You can use it by passing it as the `packFn` in the recording.

 ```js
+import { pack } from '@rrweb/packer';
+
 rrweb.record({
  emit(event) {},
  packFn: rrweb.pack,
 });
 ```

-And you need to pass rrweb.unpack as the `unpackFn` in replaying.
+And you need to pass packer.unpack as the `unpackFn` in replaying.

 ```js
+import { unpack } from '@rrweb/packer';
+
 const replayer = new rrweb.Replayer(events, {
  unpackFn: rrweb.unpack,
 });
--- a/docs/recipes/optimize-storage.zh_CN.md
+++ b/docs/recipes/optimize-storage.zh_CN.md
@@ -69,18 +69,22 @@ rrweb.record({

 ### 基于 packFn 的单数据压缩

-rrweb 内包含了基于 fflate 的简单压缩 rrweb.pack，在录制时可以作为 `packFn` 传入。
+rrweb 提供了一个基于 fflate 的简单压缩函数，在 [@rrweb/packer](../../packages/packer/) 中可以作为 `packFn` 传入使用。

 ```js
+import { pack } from '@rrweb/packer';
+
 rrweb.record({
  emit(event) {},
  packFn: rrweb.pack,
 });
 ```

-回放时通用需要传入 rrweb.unpack 作为 `unpackFn` 传入。
+回放时通用需要传入 packer.unpack 作为 `unpackFn` 传入。

 ```js
+import { unpack } from '@rrweb/packer';
+
 const replayer = new rrweb.Replayer(events, {
  unpackFn: rrweb.unpack,
 });
--- a/docs/recipes/plugin.md
+++ b/docs/recipes/plugin.md
@@ -4,7 +4,12 @@ The plugin API is designed to extend the function of rrweb without bump the size

 # Available plugins

- [console](./console.md)
+- [@rrweb/rrweb-plugin-console-record](packages/plugins/rrweb-plugin-console-record): A plugin for recording console logs.
+- [@rrweb/rrweb-plugin-console-replay](packages/plugins/rrweb-plugin-console-replay): A plugin for replaying console logs.
+- [@rrweb/rrweb-plugin-sequential-id-record](packages/plugins/rrweb-plugin-sequential-id-record): A plugin for recording sequential IDs.
+- [@rrweb/rrweb-plugin-sequential-id-replay](packages/plugins/rrweb-plugin-sequential-id-replay): A plugin for replaying sequential IDs.
+- [@rrweb/rrweb-plugin-canvas-webrtc-record](packages/plugins/rrweb-plugin-canvas-webrtc-record): A plugin for stream `<canvas>` via WebRTC.
+- [@rrweb/rrweb-plugin-canvas-webrtc-replay](packages/plugins/rrweb-plugin-canvas-webrtc-replay): A plugin for playing streamed `<canvas>` via WebRTC.

 ## Interface

--- a/docs/recipes/plugin.zh_CN.md
+++ b/docs/recipes/plugin.zh_CN.md
@@ -4,7 +4,12 @@

 # 可用插件

- [console](./console.zh_CN.md)
+- [@rrweb/rrweb-plugin-console-record](packages/plugins/rrweb-plugin-console-record)：一个用于记录控制台日志的插件。
+- [@rrweb/rrweb-plugin-console-replay](packages/plugins/rrweb-plugin-console-replay)：一个用于回放控制台日志的插件。
+- [@rrweb/rrweb-plugin-sequential-id-record](packages/plugins/rrweb-plugin-sequential-id-record)：一个用于记录顺序 ID 的插件。
+- [@rrweb/rrweb-plugin-sequential-id-replay](packages/plugins/rrweb-plugin-sequential-id-replay)：一个用于回放顺序 ID 的插件。
+- [@rrweb/rrweb-plugin-canvas-webrtc-record](packages/plugins/rrweb-plugin-canvas-webrtc-record)：一个用于通过 WebRTC 流式传输 `<canvas>` 的插件。
+- [@rrweb/rrweb-plugin-canvas-webrtc-replay](packages/plugins/rrweb-plugin-canvas-webrtc-replay)：一个用于通过 WebRTC 播放流式 `<canvas>` 的插件。

 ## 接口