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

@@ -3,13 +3,9 @@ import * as path from 'path';
import * as http from 'http';
import * as url from 'url';
import * as puppeteer from 'puppeteer';
import * as rollup from 'rollup';
import * as typescript from 'rollup-plugin-typescript2';
import * as assert from 'assert';
import { vi, assert, describe, it, beforeAll, afterAll, expect } from 'vitest';
import { waitForRAF, getServerURL } from './utils';
const _typescript = typescript as unknown as () => rollup.Plugin;
const htmlFolder = path.join(__dirname, 'html');
const htmls = fs.readdirSync(htmlFolder).map((filePath) => {
const raw = fs.readFileSync(path.resolve(htmlFolder, filePath), 'utf-8');
@@ -23,7 +19,7 @@ interface IMimeType {
[key: string]: string;
}
const startServer = () =>
const startServer = (defaultPort: number = 3030) =>
new Promise<http.Server>((resolve) => {
const mimeType: IMimeType = {
'.html': 'text/html',
@@ -49,40 +45,50 @@ const startServer = () =>
res.end();
}
});
s.listen(3030).on('listening', () => {
resolve(s);
});
s.listen(defaultPort)
.on('listening', () => {
resolve(s);
})
.on('error', (e) => {
s.listen().on('listening', () => {
resolve(s);
});
});
});
function sanitizeSnapshot(snapshot: string): string {
return snapshot.replace(/localhost:[0-9]+/g, 'localhost:3030');
}
function assertSnapshot(snapshot: string): void {
expect(sanitizeSnapshot(snapshot)).toMatchSnapshot();
}
interface ISuite {
server: http.Server;
serverURL: string;
browser: puppeteer.Browser;
code: string;
}
describe('integration tests', function (this: ISuite) {
jest.setTimeout(30_000);
vi.setConfig({ testTimeout: 30_000 });
let server: ISuite['server'];
let serverURL: ISuite['serverURL'];
let browser: ISuite['browser'];
let code: ISuite['code'];
beforeAll(async () => {
server = await startServer();
serverURL = getServerURL(server);
browser = await puppeteer.launch({
// headless: false,
});
const bundle = await rollup.rollup({
input: path.resolve(__dirname, '../src/index.ts'),
plugins: [_typescript()],
});
const {
output: [{ code: _code }],
} = await bundle.generate({
name: 'rrweb',
format: 'iife',
});
code = _code;
code = fs.readFileSync(
path.resolve(__dirname, '../dist/rrweb-snapshot.umd.cjs'),
'utf-8',
);
});
afterAll(async () => {
@@ -102,7 +108,7 @@ describe('integration tests', function (this: ISuite) {
if (html.filePath === 'iframe.html') {
// loading directly is needed to ensure we don't trigger compatMode='BackCompat'
// which happens before setContent can be called
await page.goto(`http://localhost:3030/html/${html.filePath}`, {
await page.goto(`${serverURL}/html/${html.filePath}`, {
waitUntil: 'load',
});
const outerCompatMode = await page.evaluate('document.compatMode');
@@ -123,7 +129,7 @@ describe('integration tests', function (this: ISuite) {
);
} else {
// loading indirectly is improtant for relative path testing
await page.goto(`http://localhost:3030/html`);
await page.goto(`${serverURL}/html`);
await page.setContent(html.src, {
waitUntil: 'load',
});
@@ -132,8 +138,8 @@ describe('integration tests', function (this: ISuite) {
const rebuildHtml = (
(await page.evaluate(`${code}
const x = new XMLSerializer();
const snap = rrweb.snapshot(document);
let out = x.serializeToString(rrweb.rebuild(snap, { doc: document }));
const snap = rrwebSnapshot.snapshot(document);
let out = x.serializeToString(rrwebSnapshot.rebuild(snap, { doc: document }));
if (document.querySelector('html').getAttribute('xmlns') !== 'http://www.w3.org/1999/xhtml') {
// this is just an artefact of serializeToString
out = out.replace(' xmlns=\"http://www.w3.org/1999/xhtml\"', '');
@@ -146,7 +152,8 @@ describe('integration tests', function (this: ISuite) {
/blob:http:\/\/localhost:\d+\/[0-9a-z\-]+/,
'blob:http://localhost:xxxx/...',
);
expect(rebuildHtml).toMatchSnapshot();
assertSnapshot(rebuildHtml);
});
}
@@ -155,7 +162,7 @@ describe('integration tests', function (this: ISuite) {
// console for debug
page.on('console', (msg) => console.log(msg.text()));
await page.goto('http://localhost:3030/html/compat-mode.html', {
await page.goto(`${serverURL}/html/compat-mode.html`, {
waitUntil: 'load',
});
const compatMode = await page.evaluate('document.compatMode');
@@ -173,14 +180,14 @@ describe('integration tests', function (this: ISuite) {
`pre-check: images will be rendered ~326px high in BackCompat mode, and ~588px in CSS1Compat mode; getting: ${renderedHeight}px`,
);
const rebuildRenderedHeight = await page.evaluate(`${code}
const snap = rrweb.snapshot(document);
const snap = rrwebSnapshot.snapshot(document);
const iframe = document.createElement('iframe');
iframe.setAttribute('width', document.body.clientWidth)
iframe.setAttribute('height', document.body.clientHeight)
iframe.style.transform = 'scale(0.3)'; // mini-me
document.body.appendChild(iframe);
// magic here! rebuild in a new iframe
const rebuildNode = rrweb.rebuild(snap, { doc: iframe.contentDocument })[0];
const rebuildNode = rrwebSnapshot.rebuild(snap, { doc: iframe.contentDocument })[0];
iframe.contentDocument.querySelector('center').clientHeight
`);
const rebuildCompatMode = await page.evaluate(
@@ -200,11 +207,12 @@ iframe.contentDocument.querySelector('center').clientHeight
it('correctly saves images offline', async () => {
const page: puppeteer.Page = await browser.newPage();
await page.goto('http://localhost:3030/html/picture.html', {
await page.goto(`${serverURL}/html/picture.html`, {
waitUntil: 'load',
});
await page.waitForSelector('img', { timeout: 1000 });
await page.evaluate(`${code}var snapshot = rrweb.snapshot(document, {
await page.evaluate(`${code}
var snapshot = rrwebSnapshot.snapshot(document, {
dataURLOptions: { type: "image/webp", quality: 0.8 },
inlineImages: true,
inlineStylesheet: false
@@ -247,7 +255,7 @@ iframe.contentDocument.querySelector('center').clientHeight
);
await page.waitForSelector('img', { timeout: 1000 });
await page.evaluate(`${code}var snapshot = rrweb.snapshot(document, {
await page.evaluate(`${code}var snapshot = rrwebSnapshot.snapshot(document, {
dataURLOptions: { type: "image/webp", quality: 0.8 },
inlineImages: true,
inlineStylesheet: false
@@ -271,11 +279,11 @@ iframe.contentDocument.querySelector('center').clientHeight
it('correctly saves blob:images offline', async () => {
const page: puppeteer.Page = await browser.newPage();
await page.goto('http://localhost:3030/html/picture-blob.html', {
await page.goto(`${serverURL}/html/picture-blob.html`, {
waitUntil: 'load',
});
await page.waitForSelector('img', { timeout: 1000 });
await page.evaluate(`${code}var snapshot = rrweb.snapshot(document, {
await page.evaluate(`${code}var snapshot = rrwebSnapshot.snapshot(document, {
dataURLOptions: { type: "image/webp", quality: 0.8 },
inlineImages: true,
inlineStylesheet: false
@@ -291,13 +299,13 @@ iframe.contentDocument.querySelector('center').clientHeight
it('correctly saves images in iframes offline', async () => {
const page: puppeteer.Page = await browser.newPage();
await page.goto('http://localhost:3030/html/picture-in-frame.html', {
await page.goto(`${serverURL}/html/picture-in-frame.html`, {
waitUntil: 'load',
});
await page.waitForSelector('iframe', { timeout: 1000 });
await waitForRAF(page); // wait for page to render
await page.evaluate(`${code}
rrweb.snapshot(document, {
rrwebSnapshot.snapshot(document, {
dataURLOptions: { type: "image/webp", quality: 0.8 },
inlineImages: true,
inlineStylesheet: false,
@@ -316,13 +324,13 @@ iframe.contentDocument.querySelector('center').clientHeight
it('correctly saves blob:images in iframes offline', async () => {
const page: puppeteer.Page = await browser.newPage();
await page.goto('http://localhost:3030/html/picture-blob-in-frame.html', {
await page.goto(`${serverURL}/html/picture-blob-in-frame.html`, {
waitUntil: 'load',
});
await page.waitForSelector('iframe', { timeout: 1000 });
await waitForRAF(page); // wait for page to render
await page.evaluate(`${code}
rrweb.snapshot(document, {
rrwebSnapshot.snapshot(document, {
dataURLOptions: { type: "image/webp", quality: 0.8 },
inlineImages: true,
inlineStylesheet: false,
@@ -345,7 +353,7 @@ iframe.contentDocument.querySelector('center').clientHeight
});
await waitForRAF(page); // wait for page to render
await page.evaluate(`${code}
window.snapshot = rrweb.snapshot(document, {
window.snapshot = rrwebSnapshot.snapshot(document, {
inlineStylesheet: true,
})`);
await waitForRAF(page);
@@ -365,10 +373,12 @@ iframe.contentDocument.querySelector('center').clientHeight
},
);
await page.waitForSelector('img', { timeout: 1000 });
await page.evaluate(`${code}var snapshot = rrweb.snapshot(document, {
dataURLOptions: { type: "image/webp", quality: 0.8 },
inlineImages: true,
inlineStylesheet: false
await page.evaluate(`${code}`);
await page.evaluate(`
var snapshot = rrwebSnapshot.snapshot(document, {
dataURLOptions: { type: "image/webp", quality: 0.8 },
inlineImages: true,
inlineStylesheet: false
})`);
await waitForRAF(page);
const fnName = (await page.evaluate(
@@ -379,28 +389,23 @@ iframe.contentDocument.querySelector('center').clientHeight
});
describe('iframe integration tests', function (this: ISuite) {
jest.setTimeout(30_000);
vi.setConfig({ testTimeout: 30_000 });
let server: ISuite['server'];
let serverURL: ISuite['serverURL'];
let browser: ISuite['browser'];
let code: ISuite['code'];
beforeAll(async () => {
server = await startServer();
serverURL = getServerURL(server);
browser = await puppeteer.launch({
// headless: false,
});
const bundle = await rollup.rollup({
input: path.resolve(__dirname, '../src/index.ts'),
plugins: [_typescript()],
});
const {
output: [{ code: _code }],
} = await bundle.generate({
name: 'rrweb',
format: 'iife',
});
code = _code;
code = fs.readFileSync(
path.resolve(__dirname, '../dist/rrweb-snapshot.umd.cjs'),
'utf-8',
);
});
afterAll(async () => {
@@ -412,43 +417,38 @@ describe('iframe integration tests', function (this: ISuite) {
const page: puppeteer.Page = await browser.newPage();
// console for debug
page.on('console', (msg) => console.log(msg.text()));
await page.goto(`http://localhost:3030/iframe-html/main.html`, {
await page.goto(`${serverURL}/iframe-html/main.html`, {
waitUntil: 'load',
});
const snapshotResult = JSON.stringify(
await page.evaluate(`${code};
rrweb.snapshot(document);
rrwebSnapshot.snapshot(document);
`),
null,
2,
);
expect(snapshotResult).toMatchSnapshot();
assertSnapshot(snapshotResult);
});
});
describe('shadow DOM integration tests', function (this: ISuite) {
jest.setTimeout(30_000);
vi.setConfig({ testTimeout: 30_000 });
let server: ISuite['server'];
let serverURL: ISuite['serverURL'];
let browser: ISuite['browser'];
let code: ISuite['code'];
beforeAll(async () => {
server = await startServer();
serverURL = getServerURL(server);
browser = await puppeteer.launch({
// headless: false,
});
const bundle = await rollup.rollup({
input: path.resolve(__dirname, '../src/index.ts'),
plugins: [_typescript()],
});
const {
output: [{ code: _code }],
} = await bundle.generate({
name: 'rrweb',
format: 'iife',
});
code = _code;
code = fs.readFileSync(
path.resolve(__dirname, '../dist/rrweb-snapshot.umd.cjs'),
'utf-8',
);
});
afterAll(async () => {
@@ -460,16 +460,16 @@ describe('shadow DOM integration tests', function (this: ISuite) {
const page: puppeteer.Page = await browser.newPage();
// console for debug
page.on('console', (msg) => console.log(msg.text()));
await page.goto(`http://localhost:3030/html/shadow-dom.html`, {
await page.goto(`${serverURL}/html/shadow-dom.html`, {
waitUntil: 'load',
});
const snapshotResult = JSON.stringify(
await page.evaluate(`${code};
rrweb.snapshot(document);
rrwebSnapshot.snapshot(document);
`),
null,
2,
);
expect(snapshotResult).toMatchSnapshot();
assertSnapshot(snapshotResult);
});
});