xuguopeng/rrweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Chore: Migrate build to vite (#1033)

Browse Source 
* 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
This commit is contained in:
Justin Halsall
2026-04-01 12:00:00 +08:00
committed by GitHub
parent 4055c69e26
commit 5a85ddf013
266 changed files with 11616 additions and 9614 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/recipes/canvas.md
View File

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

4
docs/recipes/canvas.zh_CN.md
View File

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

15
docs/recipes/console.md
View File

@@ -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'],
}),
],

17
docs/recipes/console.zh_CN.md
View File

@@ -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'],
}),
],

8
docs/recipes/customize-replayer.md
View File

@@ -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: {

8
docs/recipes/customize-replayer.zh_CN.md
View File

@@ -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: {

8
docs/recipes/optimize-storage.md
View File

@@ -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,
});

8
docs/recipes/optimize-storage.zh_CN.md
View File

@@ -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,
});

7
docs/recipes/plugin.md
View File

@@ -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

7
docs/recipes/plugin.zh_CN.md
View File

@@ -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>` 的插件。
## 接口

2
docs/sandbox.md
View File

@@ -20,7 +20,7 @@ When you click the a element link, the default event is to jump to the URL corre
Usually we will capture all an elements click events through the event handler proxy and disable the default event via `event.preventDefault()`. But when we put the replay page in the sandbox, all the event handlers will not be executed, and we will not be able to implement the event delegation.
When replaying interactive events, note that replaying the JS `click` event is not nessecary because click events do not have any impact when JS is disabled. However, in order to optimize the replay effect, we can add special animation effects to visualize elements being clicked with the mouse, to clearly show the viewer that a click has occurred.
When replaying interactive events, note that replaying the JS `click` event is not necessary because click events do not have any impact when JS is disabled. However, in order to optimize the replay effect, we can add special animation effects to visualize elements being clicked with the mouse, to clearly show the viewer that a click has occurred.
## iframe style settings