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

View File

@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`iframe integration tests snapshot async iframes 1`] = `
exports[`iframe integration tests > snapshot async iframes 1`] = `
"{
\\"type\\": 0,
\\"childNodes\\": [
@@ -132,7 +132,7 @@ exports[`iframe integration tests snapshot async iframes 1`] = `
}"
`;
exports[`integration tests [html file]: about-mozilla.html 1`] = `
exports[`integration tests > [html file]: about-mozilla.html 1`] = `
"<!DOCTYPE html><html><head>
<title>The Book of Mozilla, 11:9</title>
<style type=\\"text/css\\">html { background: maroon; color: white; font-style: italic; }#moztext { margin-top: 15%; font-size: 1.1em; font-family: serif; text-align: center; line-height: 1.5; }#from { font-size: 1.95em; font-family: serif; text-align: right; }em { font-size: 1.3em; line-height: 0; }a { text-decoration: none; color: white; }</style>
@@ -149,7 +149,7 @@ exports[`integration tests [html file]: about-mozilla.html 1`] = `
</p></body></html>"
`;
exports[`integration tests [html file]: background-clip-text.html 1`] = `
exports[`integration tests > [html file]: background-clip-text.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"IE=edge\\" />
@@ -163,7 +163,7 @@ exports[`integration tests [html file]: background-clip-text.html 1`] = `
</body></html>"
`;
exports[`integration tests [html file]: basic.html 1`] = `
exports[`integration tests > [html file]: basic.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
@@ -173,7 +173,7 @@ exports[`integration tests [html file]: basic.html 1`] = `
<h1>Title</h1></body></html>"
`;
exports[`integration tests [html file]: block-element.html 1`] = `
exports[`integration tests > [html file]: block-element.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
@@ -188,7 +188,7 @@ exports[`integration tests [html file]: block-element.html 1`] = `
</body></html>"
`;
exports[`integration tests [html file]: compat-mode.html 1`] = `
exports[`integration tests > [html file]: compat-mode.html 1`] = `
"<!-- no doctype! --><html><head>
<title>Compat Mode; image resizing</title>
</head>
@@ -202,7 +202,7 @@ exports[`integration tests [html file]: compat-mode.html 1`] = `
</body></html>"
`;
exports[`integration tests [html file]: cors-style-sheet.html 1`] = `
exports[`integration tests > [html file]: cors-style-sheet.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
@@ -214,7 +214,7 @@ exports[`integration tests [html file]: cors-style-sheet.html 1`] = `
<body></body></html>"
`;
exports[`integration tests [html file]: dynamic-stylesheet.html 1`] = `
exports[`integration tests > [html file]: dynamic-stylesheet.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
@@ -228,7 +228,7 @@ exports[`integration tests [html file]: dynamic-stylesheet.html 1`] = `
</body></html>"
`;
exports[`integration tests [html file]: form-fields.html 1`] = `
exports[`integration tests > [html file]: form-fields.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
@@ -263,7 +263,7 @@ exports[`integration tests [html file]: form-fields.html 1`] = `
<noscript>SCRIPT_PLACEHOLDER</noscript></body></html>"
`;
exports[`integration tests [html file]: hover.html 1`] = `
exports[`integration tests > [html file]: hover.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
@@ -275,7 +275,7 @@ exports[`integration tests [html file]: hover.html 1`] = `
</body></html>"
`;
exports[`integration tests [html file]: iframe.html 1`] = `
exports[`integration tests > [html file]: iframe.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
@@ -287,17 +287,17 @@ exports[`integration tests [html file]: iframe.html 1`] = `
</body></html>"
`;
exports[`integration tests [html file]: iframe-inner.html 1`] = `
exports[`integration tests > [html file]: iframe-inner.html 1`] = `
"<html><head></head><body><button>inner iframe button</button>
</body></html>"
`;
exports[`integration tests [html file]: invalid-attribute.html 1`] = `
exports[`integration tests > [html file]: invalid-attribute.html 1`] = `
"<html foo=\\"bar\\"><head></head><body>
</body></html>"
`;
exports[`integration tests [html file]: invalid-doctype.html 1`] = `
exports[`integration tests > [html file]: invalid-doctype.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
@@ -306,7 +306,7 @@ exports[`integration tests [html file]: invalid-doctype.html 1`] = `
<body></body></html>"
`;
exports[`integration tests [html file]: invalid-tagname.html 1`] = `
exports[`integration tests > [html file]: invalid-tagname.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
@@ -320,7 +320,7 @@ exports[`integration tests [html file]: invalid-tagname.html 1`] = `
</body></html>"
`;
exports[`integration tests [html file]: mask-text.html 1`] = `
exports[`integration tests > [html file]: mask-text.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
@@ -335,7 +335,7 @@ exports[`integration tests [html file]: mask-text.html 1`] = `
</body></html>"
`;
exports[`integration tests [html file]: picture.html 1`] = `
exports[`integration tests > [html file]: picture.html 1`] = `
"<html xmlns=\\"http://www.w3.org/1999/xhtml\\"><head></head><body>
<picture>
<!-- these are 404 - not sure if that's intentional -->
@@ -346,32 +346,32 @@ exports[`integration tests [html file]: picture.html 1`] = `
</body></html>"
`;
exports[`integration tests [html file]: picture-blob.html 1`] = `
exports[`integration tests > [html file]: picture-blob.html 1`] = `
"<html xmlns=\\"http://www.w3.org/1999/xhtml\\"><head></head><body>
<img src=\\"blob:http://localhost:xxxx/...\\" alt=\\"This is a robot\\" />
<noscript>SCRIPT_PLACEHOLDER</noscript></body></html>"
`;
exports[`integration tests [html file]: picture-blob-in-frame.html 1`] = `
exports[`integration tests > [html file]: picture-blob-in-frame.html 1`] = `
"<html xmlns=\\"http://www.w3.org/1999/xhtml\\"><head></head><body>
<iframe></iframe>
</body></html>"
`;
exports[`integration tests [html file]: picture-in-frame.html 1`] = `
exports[`integration tests > [html file]: picture-in-frame.html 1`] = `
"<html xmlns=\\"http://www.w3.org/1999/xhtml\\"><head></head><body>
<iframe></iframe>
</body></html>"
`;
exports[`integration tests [html file]: picture-with-inline-onload.html 1`] = `
exports[`integration tests > [html file]: picture-with-inline-onload.html 1`] = `
"<html xmlns=\\"http://www.w3.org/1999/xhtml\\"><head></head><body>
<img src=\\"http://localhost:3030/images/robot.png\\" alt=\\"This is a robot\\" style=\\"opacity: 1;\\" _onload=\\"this.style.opacity=1\\" />
</body></html>"
`;
exports[`integration tests [html file]: preload.html 1`] = `
exports[`integration tests > [html file]: preload.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
@@ -383,7 +383,7 @@ exports[`integration tests [html file]: preload.html 1`] = `
<body></body></html>"
`;
exports[`integration tests [html file]: shadow-dom.html 1`] = `
exports[`integration tests > [html file]: shadow-dom.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
@@ -402,7 +402,7 @@ exports[`integration tests [html file]: shadow-dom.html 1`] = `
</body></html>"
`;
exports[`integration tests [html file]: svg.html 1`] = `
exports[`integration tests > [html file]: svg.html 1`] = `
"<!DOCTYPE html><html><head>
<title>IcoMoon - SVG Icons</title>
<meta charset=\\"utf-8\\" />
@@ -435,7 +435,7 @@ exports[`integration tests [html file]: svg.html 1`] = `
</body></html>"
`;
exports[`integration tests [html file]: video.html 1`] = `
exports[`integration tests > [html file]: video.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
@@ -450,7 +450,7 @@ exports[`integration tests [html file]: video.html 1`] = `
</body></html>"
`;
exports[`integration tests [html file]: with-relative-res.html 1`] = `
exports[`integration tests > [html file]: with-relative-res.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
@@ -470,7 +470,7 @@ exports[`integration tests [html file]: with-relative-res.html 1`] = `
<img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"http://localhost:3030/300,400/a.jpg 300w, http://localhost:3030/b.png\\" /></body></html>"
`;
exports[`integration tests [html file]: with-script.html 1`] = `
exports[`integration tests > [html file]: with-script.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
@@ -481,7 +481,7 @@ exports[`integration tests [html file]: with-script.html 1`] = `
<noscript>SCRIPT_PLACEHOLDER</noscript></body></html>"
`;
exports[`integration tests [html file]: with-style-sheet.html 1`] = `
exports[`integration tests > [html file]: with-style-sheet.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
@@ -492,7 +492,7 @@ exports[`integration tests [html file]: with-style-sheet.html 1`] = `
</body></html>"
`;
exports[`integration tests [html file]: with-style-sheet-with-import.html 1`] = `
exports[`integration tests > [html file]: with-style-sheet-with-import.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
@@ -503,7 +503,7 @@ exports[`integration tests [html file]: with-style-sheet-with-import.html 1`] =
</body></html>"
`;
exports[`shadow DOM integration tests snapshot shadow DOM 1`] = `
exports[`shadow DOM integration tests > snapshot shadow DOM 1`] = `
"{
\\"type\\": 0,
\\"childNodes\\": [