Skip to content
This repository was archived by the owner on May 16, 2025. It is now read-only.

Commit db725cf

Browse files
kanishq1AlfieJoneseoghanmurrayJonasBaJuice10
authored
migrate rrweb to a new version (#3)
* Removing global document references (rrweb-io#1482) fix for options `recordCanvas: true`: * replace document.createElement with doc.createElement in rrweb-snapshot code * Eoghan: add a regression test to prevent future accidental use of `document` instead of `doc`. This test can be excised if a new feature can only be run in the browser and not in the jsdom environment * No neg lookbehind (rrweb-io#1493) * Older versions of Safari 16 don't support lookbehind assertions - https://caniuse.com/js-regexp-lookbehind * Refactor to show the similarity between these two regexes * Apply formatting changes * Create no-neg-lookbehind.md --------- Co-authored-by: eoghanmurray <[email protected]> * Refactor to preclude the need for a continuous raf loop (rrweb-io#1328) * Refactor to preclude the need for a continuous raf loop * Apply formatting changes * Create shadow-dom-unbusify.md --------- Co-authored-by: eoghanmurray <[email protected]> * perf(mutation): refactor parent removed detection to iterative procedure (rrweb-io#1489) * perf(mutation): add deep tree benchmark * perf(mutation): use iterative procedure * perf(mutation): run formatter * perf(mutation): add changeset * Chore: Migrate build to vite (rrweb-io#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: https://github.com/arethetypeswrong/arethetypeswrong.github.io/blob/3729bc2a3ca2ef7dda5c22fef81f89e1abe5dacf/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: https://github.com/andrewbranch/example-subpath-exports-ts-compat/tree/1ffe3425b0a7ad8ecdf3c373f76f431ee341366b/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: https://github.com/arethetypeswrong/arethetypeswrong.github.io/blob/3729bc2a3ca2ef7dda5c22fef81f89e1abe5dacf/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: https://github.com/andrewbranch/example-subpath-exports-ts-compat/tree/1ffe3425b0a7ad8ecdf3c373f76f431ee341366b/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 * Apply formatting changes --------- Co-authored-by: Alfie Jones <[email protected]> Co-authored-by: Eoghan Murray <[email protected]> Co-authored-by: eoghanmurray <[email protected]> Co-authored-by: Jonas <[email protected]> Co-authored-by: Justin Halsall <[email protected]> Co-authored-by: kanishq1 <[email protected]>
1 parent d7cf8dd commit db725cf

File tree

273 files changed

+11559
-9471
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

273 files changed

+11559
-9471
lines changed

‎.cache/.gitkeep

Whitespace-only changes.

‎.changeset/eighty-teachers-smash.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
"@rrweb/rrweb-plugin-canvas-webrtc-replay": patch
3+
"@rrweb/rrweb-plugin-sequential-id-replay": patch
4+
"@rrweb/rrweb-plugin-console-replay": patch
5+
"rrweb": patch
6+
---
7+
8+
Export `ReplayPlugin` from rrweb directly. Previously we had to do `import type { ReplayPlugin } from 'rrweb/dist/types';` now we can do `import type { ReplayPlugin } from 'rrweb';`

‎.changeset/kind-kids-design.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"rrweb": patch
3+
---
4+
5+
Optimize performance of isParentRemoved by converting it to an iterative procedure

‎.changeset/no-neg-lookbehind.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"rrweb-snapshot": patch
3+
"rrweb": patch
4+
---
5+
6+
Replay: Replace negative lookbehind in regexes from css parser as it causes issues with Safari 16

‎.changeset/proud-clocks-hope.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"rrweb-snapshot": patch
3+
---
4+
5+
(when `recordCanvas: true`): ensure we use doc.createElement instead of document.createElement to allow use in non-browser e.g. jsdom environments

‎.changeset/shadow-dom-unbusify.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"rrweb": patch
3+
---
4+
5+
Refactor to preclude the need for a continuous raf loop running in the background which is related to shadowDom

‎.changeset/silent-plants-perform.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
'rrweb': patch
2+
"rrweb": patch
33
---
44

55
Return early for child same origin frames

‎.eslintignore

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.DS_Store
2+
node_modules
3+
/build
4+
/dist
5+
/package
6+
.env
7+
.env.*
8+
!.env.example
9+
10+
# Ignore files for PNPM, NPM and YARN
11+
pnpm-lock.yaml
12+
package-lock.json
13+
yarn.lock

‎.eslintrc.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// TODO: add .eslintignore. More info: https://bobbyhadz.com/blog/typescript-parseroptions-project-has-been-set-for
12
module.exports = {
23
env: {
34
browser: true,
@@ -16,7 +17,7 @@ module.exports = {
1617
ecmaVersion: 'latest',
1718
sourceType: 'module',
1819
tsconfigRootDir: __dirname,
19-
project: ['./tsconfig.eslint.json', './packages/*/tsconfig.json'],
20+
project: ['./tsconfig.eslint.json', './packages/**/tsconfig.json'],
2021
},
2122
plugins: ['@typescript-eslint', 'eslint-plugin-tsdoc', 'jest', 'compat'],
2223
rules: {

‎.github/workflows/ci-cd.yml

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,17 +19,18 @@ jobs:
1919
uses: actions/setup-node@v3
2020
with:
2121
node-version: lts/*
22-
22+
2323
- name: Install Dependencies
2424
run: yarn install --frozen-lockfile
2525

2626
- name: Build Project
2727
run: NODE_OPTIONS='--max-old-space-size=4096' yarn build:all
2828

2929
- name: Check types
30-
run: yarn turbo run check-types
30+
run: yarn check-types
3131

3232
- name: Run tests
33+
# run: PUPPETEER_EXECUTABLE_PATH=${{ steps.setup-chrome.outputs.chrome-path }} PUPPETEER_HEADLESS=true xvfb-run --server-args="-screen 0 1920x1080x24" yarn test
3334
run: PUPPETEER_HEADLESS=true xvfb-run --server-args="-screen 0 1920x1080x24" yarn test
3435

3536
- name: Upload diff images to GitHub

‎.gitignore

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,25 @@ temp
1313

1414
.DS_Store
1515

16+
# output of `yarn build`
1617
build
1718
dist
1819

20+
# turbo cache
1921
.turbo
2022

23+
# needed to store puppeteer binaries
24+
.cache/*
25+
!.gitkeep
26+
2127
# emacs working files end in a tilde
2228
*~
2329

2430
# `.yarn/install-state.gz` is an optimization file that you shouldn't ever have to commit.
2531
# It simply stores the exact state of your project so that the next commands can boot without having to resolve your workspaces all over again.
26-
.yarn/install-state.gz
32+
.yarn/install-state.gz
33+
34+
35+
# for vite
36+
vite.config.js.timestamp-*
37+
vite.config.ts.timestamp-*

‎.puppeteerrc.cjs

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
const { join } = require('path');
2+
3+
/**
4+
* @type {import("puppeteer").Configuration}
5+
*/
6+
module.exports = {
7+
// Changes the cache location for Puppeteer.
8+
cacheDirectory: join(__dirname, '.cache', 'puppeteer'),
9+
browserRevision: '115.0.5763.0',
10+
};

‎.vscode/rrweb-monorepo.code-workspace

Lines changed: 60 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,18 +24,76 @@
2424
"name": "rrweb-snapshot (package)",
2525
"path": "../packages/rrweb-snapshot"
2626
},
27+
{
28+
"name": "@rrweb/all",
29+
"path": "../packages/all"
30+
},
31+
{
32+
"name": "@rrweb/record",
33+
"path": "../packages/record"
34+
},
35+
{
36+
"name": "@rrweb/replay",
37+
"path": "../packages/replay"
38+
},
39+
{
40+
"name": "@rrweb/types",
41+
"path": "../packages/types"
42+
},
43+
{
44+
"name": "@rrweb/packer",
45+
"path": "../packages/packer"
46+
},
2747
{
2848
"name": "web-extension (package)",
2949
"path": "../packages/web-extension"
3050
},
3151
{ "name": "rrvideo (package)", "path": "../packages/rrvideo" },
32-
{ "name": "@rrweb/types", "path": "../packages/types" }
52+
{
53+
"name": "@rrweb/rrweb-plugin-console-record",
54+
"path": "../packages/plugins/rrweb-plugin-console-record"
55+
},
56+
{
57+
"name": "@rrweb/rrweb-plugin-console-replay",
58+
"path": "../packages/plugins/rrweb-plugin-console-replay"
59+
},
60+
{
61+
"name": "@rrweb/rrweb-plugin-sequential-id-record",
62+
"path": "../packages/plugins/rrweb-plugin-sequential-id-record"
63+
},
64+
{
65+
"name": "@rrweb/rrweb-plugin-sequential-id-replay",
66+
"path": "../packages/plugins/rrweb-plugin-sequential-id-replay"
67+
},
68+
{
69+
"name": "@rrweb/rrweb-plugin-canvas-webrtc-record",
70+
"path": "../packages/plugins/rrweb-plugin-canvas-webrtc-record"
71+
},
72+
{
73+
"name": "@rrweb/rrweb-plugin-canvas-webrtc-replay",
74+
"path": "../packages/plugins/rrweb-plugin-canvas-webrtc-replay"
75+
}
3376
],
3477
"settings": {
78+
"vitest.workspaceConfig": "../vitest.workspace.ts",
79+
"vitest.commandLine": "yarn vitest",
3580
"jest.disabledWorkspaceFolders": [
3681
" rrweb monorepo",
82+
"rrweb (package)",
3783
"rrweb-player (package)",
38-
"@rrweb/types"
84+
"rrweb-snapshot (package)",
85+
"rrdom (package)",
86+
"rrdom-nodejs (package)",
87+
"@rrweb/all",
88+
"@rrweb/record",
89+
"@rrweb/replay",
90+
"@rrweb/types",
91+
"@rrweb/packer",
92+
"@rrweb/rrweb-plugin-console-record",
93+
"@rrweb/rrweb-plugin-console-replay",
94+
"@rrweb/rrweb-plugin-sequential-id",
95+
"@rrweb/rrweb-plugin-canvas-webrtc-record",
96+
"@rrweb/rrweb-plugin-canvas-webrtc-replay"
3997
]
4098
}
4199
}

‎CONTRIBUTING.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,10 @@ clear and has sufficient instructions to be able to reproduce the issue.
2727
## Run locally
2828

2929
- Install dependencies: `yarn`
30-
- Run recorder on a website: `yarn repl`
31-
- Run a cobrowsing/mirroring session locally: `yarn live-stream`
30+
- Build all packages: (in `/`) `yarn build:all` or `yarn dev`
31+
- Run recorder on a website: (in `/packages/rrweb`) `yarn repl`
32+
- Run a cobrowsing/mirroring session locally: (in `/packages/rrweb`) `yarn live-stream`
33+
- Build individual packages: `yarn build` or `yarn dev`
3234
- Test: `yarn test` or `yarn test:watch`
3335
- Lint: `yarn lint`
3436
- Rewrite files with prettier: `yarn format` or `yarn format:head`

‎README.md

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111

1212
[![Join the chat at slack](https://img.shields.io/badge/[email protected]?logo=slack)](https://join.slack.com/t/rrweb/shared_invite/zt-siwoc6hx-uWay3s2wyG8t5GpZVb8rWg)
1313
[![Twitter Follow](https://img.shields.io/badge/twitter-@rrweb__io-teal.svg?logo=twitter)](https://twitter.com/rrweb_io)
14-
![total gzip size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.js?compression=gzip&label=total%20gzip%20size)
15-
![recorder gzip size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/rrweb@latest/dist/record/rrweb-record.min.js?compression=gzip&label=recorder%20gzip%20size)
14+
![total gzip size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.cjs?compression=gzip&label=total%20gzip%20size)
15+
![recorder gzip size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/rrweb@latest/dist/record/rrweb-record.min.cjs?compression=gzip&label=recorder%20gzip%20size)
1616
[![](https://data.jsdelivr.com/v1/package/npm/rrweb/badge)](https://www.jsdelivr.com/package/npm/rrweb)
1717

1818
[中文文档](./README.zh_CN.md)
@@ -39,9 +39,7 @@ rrweb is mainly composed of 3 parts:
3939

4040
## Roadmap
4141

42-
- rrdom: an ad-hoc DOM for rrweb session data [#419](https://github.com/rrweb-io/rrweb/issues/419)
4342
- storage engine: do deduplication on a large number of rrweb sessions
44-
- more end-to-end tests
4543
- compact mutation data in common patterns
4644
- provide plugins via the new plugin API, including:
4745
- XHR plugin
@@ -166,7 +164,7 @@ In addition to adding integration tests and unit tests, rrweb also provides a RE
166164
</a>
167165
</td>
168166
<td align="center">
169-
<a href="https://github.com/Juice10">
167+
<a href="https://github.com/juice10">
170168
<img
171169
src="https://avatars.githubusercontent.com/u/4106?s=100"
172170
width="100px;"
@@ -199,15 +197,15 @@ In addition to adding integration tests and unit tests, rrweb also provides a RE
199197
</a>
200198
</td>
201199
<td align="center">
202-
<a href="https://cux.io" target="_blank">
203-
<img style="padding: 8px" alt="The first ever UX automation tool" width="195px" src="https://cux.io/cux-logo.svg">
200+
<a href="https://recordonce.com/" target="_blank">
201+
<img width="195px" alt="Smart screen recording for SaaS" src="https://uploads-ssl.webflow.com/5f3d133183156245630d4446/5f3d1940abe8db8612c23521_Record-Once-logo-554x80px.svg">
204202
</a>
205203
</td>
206204
</tr>
207205
<tr>
208206
<td align="center">
209-
<a href="https://recordonce.com/" target="_blank">
210-
<img width="195px" alt="Smart screen recording for SaaS" src="https://uploads-ssl.webflow.com/5f3d133183156245630d4446/5f3d1940abe8db8612c23521_Record-Once-logo-554x80px.svg">
207+
<a href="https://cux.io" target="_blank">
208+
<img style="padding: 8px" alt="The first ever UX automation tool" width="195px" src="https://cux.io/cux-logo.svg">
211209
</a>
212210
</td>
213211
<td align="center">

0 commit comments

Comments
 (0)