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
2024-06-07 11:07:36 +02:00
committed by GitHub
parent 609b7fac79
commit 7261c43f60
266 changed files with 11616 additions and 9614 deletions

View File

@@ -1,3 +1,3 @@
{
"recommendations": ["orta.vscode-jest"]
"recommendations": ["vitest.explorer"]
}

View File

@@ -1,15 +1,17 @@
{
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"name": "vscode-jest-tests",
"request": "launch",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"disableOptimisticBPs": true,
"cwd": "${workspaceFolder}",
"runtimeExecutable": "yarn",
"args": ["test", "--runInBand", "--watchAll=false"]
"name": "Debug Current Test File",
"autoAttachChildProcesses": true,
"skipFiles": ["<node_internals>/**", "**/node_modules/**"],
"program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
"args": ["run", "${relativeFile}"],
"smartStep": true,
"console": "integratedTerminal"
}
]
}

View File

@@ -1,3 +0,0 @@
{
"jest.jestCommandLine": "yarn test"
}

View File

@@ -0,0 +1,179 @@
# rrdom-nodejs
`rrdom-nodejs` is a Node.js implementation of the [`rrdom`](../rrdom/) library. It allows you to replay and inspect recorded user interactions with `rrweb` in a Node.js environment.
See the [guide](../../guide.md) for more info on rrweb.
## Sponsors
[Become a sponsor](https://opencollective.com/rrweb#sponsor) and get your logo on our README on Github with a link to your site.
### Gold Sponsors 🥇
<div dir="auto">
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/0/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/0/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/1/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/1/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/2/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/2/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/3/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/3/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/4/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/4/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/5/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/5/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/6/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/6/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
</div>
### Silver Sponsors 🥈
<div dir="auto">
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/0/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/0/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/1/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/1/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/2/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/2/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/3/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/3/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/4/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/4/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/5/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/5/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/6/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/6/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
</div>
### Bronze Sponsors 🥉
<div dir="auto">
<a href="https://opencollective.com/rrweb/tiers/sponsors/0/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/0/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
<a href="https://opencollective.com/rrweb/tiers/sponsors/1/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/1/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
<a href="https://opencollective.com/rrweb/tiers/sponsors/2/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/2/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
<a href="https://opencollective.com/rrweb/tiers/sponsors/3/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/3/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
<a href="https://opencollective.com/rrweb/tiers/sponsors/4/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/4/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
<a href="https://opencollective.com/rrweb/tiers/sponsors/5/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/5/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
<a href="https://opencollective.com/rrweb/tiers/sponsors/6/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/6/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
<a href="https://opencollective.com/rrweb/tiers/sponsors/7/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/7/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
<a href="https://opencollective.com/rrweb/tiers/sponsors/8/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/8/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
</div>
### Backers
<a href="https://opencollective.com/rrweb#sponsor" rel="nofollow"><img src="https://opencollective.com/rrweb/tiers/backers.svg?avatarHeight=36"></a>
## Core Team Members
<table>
<tr>
<td align="center">
<a href="https://github.com/Yuyz0112">
<img
src="https://avatars.githubusercontent.com/u/13651389?s=100"
width="100px;"
alt=""
/>
<br /><sub><b>Yuyz0112</b></sub>
<br /><br />
</a>
</td>
<td align="center">
<a href="https://github.com/YunFeng0817">
<img
src="https://avatars.githubusercontent.com/u/27533910?s=100"
width="100px;"
alt=""
/>
<br /><sub><b>Yun Feng</b></sub>
<br /><br />
</a>
</td>
<td align="center">
<a href="https://github.com/eoghanmurray">
<img
src="https://avatars.githubusercontent.com/u/156780?s=100"
width="100px;"
alt=""
/>
<br /><sub><b>eoghanmurray</b></sub>
<br /><br />
</a>
</td>
<td align="center">
<a href="https://github.com/Juice10">
<img
src="https://avatars.githubusercontent.com/u/4106?s=100"
width="100px;"
alt=""
/>
<br /><sub><b>Juice10</b></sub>
<br /><sub>open for rrweb consulting</sub>
</a>
</td>
</tr>
</table>
## Who's using rrweb?
<table>
<tr>
<td align="center">
<a href="http://www.smartx.com/" target="_blank">
<img width="195px" src="https://www.rrweb.io/logos/smartx.png">
</a>
</td>
<td align="center">
<a href="https://posthog.com?utm_source=rrweb&utm_medium=sponsorship&utm_campaign=open-source-sponsorship" target="_blank">
<img width="195px" src="https://www.rrweb.io/logos/posthog.png">
</a>
</td>
<td align="center">
<a href="https://statcounter.com/session-replay/" target="_blank">
<img width="195px" src="https://statcounter.com/images/logo-statcounter-arc-blue.svg">
</a>
</td>
<td align="center">
<a href="https://recordonce.com/" target="_blank">
<img width="195px" alt="Smart screen recording for SaaS" src="https://uploads-ssl.webflow.com/5f3d133183156245630d4446/5f3d1940abe8db8612c23521_Record-Once-logo-554x80px.svg">
</a>
</td>
</tr>
<tr>
<td align="center">
<a href="https://cux.io" target="_blank">
<img style="padding: 8px" alt="The first ever UX automation tool" width="195px" src="https://cux.io/cux-logo.svg">
</a>
</td>
<td align="center">
<a href="https://remsupp.com" target="_blank">
<img style="padding: 8px" alt="Remote Access & Co-Browsing" width="195px" src="https://remsupp.com/images/logo.png">
</a>
</td>
<td align="center">
<a href="https://highlight.io" target="_blank">
<img style="padding: 8px" alt="The open source, fullstack Monitoring Platform." width="195px" src="https://github.com/highlight/highlight/raw/main/highlight.io/public/images/logo.png">
</a>
</td>
<td align="center">
<a href="https://analyzee.io" target="_blank">
<img style="padding: 8px" alt="Comprehensive data analytics platform that empowers businesses to gain valuable insights and make data-driven decisions." width="195px" src="https://cdn.analyzee.io/assets/analyzee-logo.png">
</a>
</td>
</tr>
<tr>
<td align="center">
<a href="https://requestly.io" target="_blank">
<img style="padding: 8px" alt="Intercept, Modify, Record & Replay HTTP Requests." width="195px" src="https://github.com/requestly/requestly/assets/16779465/652552db-c867-44cb-9bb5-94a2026e04ca">
</a>
</td>
<td align="center">
<a href="https://gleap.io" target="_blank">
<img style="padding: 8px" alt="In-app bug reporting & customer feedback platform." width="195px" src="https://assets-global.website-files.com/6506f3f29c68b1724807619d/6506f56010237164c6306591_GleapLogo.svg">
</a>
</td>
<td align="center">
<a href="https://uxwizz.com" target="_blank">
<img style="padding: 8px" alt="Self-hosted website analytics with heatmaps and session recordings." width="195px" src="https://github.com/UXWizz/public-files/raw/main/assets/logo.png">
</a>
</td>
<td align="center">
<a href="https://www.howdygo.com" target="_blank">
<img style="padding: 8px" alt="Interactive product demos for small marketing teams" width="195px" src="https://assets-global.website-files.com/650afb446f1dd5bd410f00cc/650b2cec6188ff54dd9b01e1_Logo.svg">
</a>
</td>
</tr>
</table>

View File

@@ -1,5 +0,0 @@
/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
module.exports = {
preset: 'ts-jest',
testEnvironment: 'node',
};

View File

@@ -2,12 +2,12 @@
"name": "rrdom-nodejs",
"version": "2.0.0-alpha.14",
"scripts": {
"dev": "rollup -c -w",
"bundle": "rollup --config",
"bundle:es-only": "cross-env ES_ONLY=true rollup --config",
"dev": "vite build --watch",
"build": "tsc -noEmit && vite build",
"check-types": "tsc -noEmit",
"test": "jest",
"prepublish": "npm run bundle",
"test": "vitest run",
"test:watch": "vitest watch",
"prepublish": "npm run build",
"lint": "yarn eslint src/**/*.ts"
},
"keywords": [
@@ -15,34 +15,41 @@
"rrdom-nodejs"
],
"license": "MIT",
"main": "lib/rrdom-nodejs.cjs",
"module": "es/rrdom-nodejs.js",
"typings": "es",
"type": "module",
"main": "./dist/rrdom-nodejs.umd.cjs",
"module": "./dist/rrdom-nodejs.js",
"unpkg": "./dist/rrdom-nodejs.umd.cjs",
"typings": "dist/index.d.ts",
"exports": {
".": {
"import": {
"types": "./dist/index.d.ts",
"default": "./dist/rrdom-nodejs.js"
},
"require": {
"types": "./dist/index.d.cts",
"default": "./dist/rrdom-nodejs.umd.cjs"
}
}
},
"files": [
"dist",
"lib",
"es",
"typings"
"package.json"
],
"devDependencies": {
"@rollup/plugin-commonjs": "^20.0.0",
"@rollup/plugin-node-resolve": "^13.0.4",
"@types/cssom": "^0.4.1",
"@types/cssstyle": "^2.2.1",
"@types/jest": "^27.4.1",
"@types/nwsapi": "^2.2.2",
"@types/puppeteer": "^5.4.4",
"@typescript-eslint/eslint-plugin": "^5.23.0",
"@typescript-eslint/parser": "^5.23.0",
"compare-versions": "^4.1.3",
"eslint": "^8.15.0",
"jest": "^27.5.1",
"puppeteer": "^9.1.1",
"rollup": "^2.56.3",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-typescript2": "^0.31.2",
"rollup-plugin-web-worker-loader": "^1.6.1",
"ts-jest": "^27.1.3"
"vite": "^5.2.8",
"vite-plugin-dts": "^3.8.1",
"vitest": "^1.4.0",
"typescript": "^4.7.3"
},
"dependencies": {
"cssom": "^0.5.0",

View File

@@ -1,84 +0,0 @@
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { terser } from 'rollup-plugin-terser';
import typescript from 'rollup-plugin-typescript2';
import webWorkerLoader from 'rollup-plugin-web-worker-loader';
import pkg from './package.json';
function toMinPath(path) {
return path.replace(/\.js$/, '.min.js');
}
const basePlugins = [
resolve({ browser: true }),
commonjs(),
// supports bundling `web-worker:..filename` from rrweb
webWorkerLoader(),
typescript({
tsconfigOverride: { compilerOptions: { module: 'ESNext' } },
}),
];
const baseConfigs = [
{
input: './src/index.ts',
name: pkg.name,
path: pkg.name,
},
{
input: './src/document-nodejs.ts',
name: 'RRDocument',
path: 'document-nodejs',
},
];
let configs = [];
let extraConfigs = [];
for (let config of baseConfigs) {
configs.push(
// ES module
{
input: config.input,
plugins: basePlugins,
output: [
{
format: 'esm',
file: pkg.module.replace(pkg.name, config.path),
},
],
},
);
extraConfigs.push(
// CommonJS
{
input: config.input,
plugins: basePlugins,
output: [
{
format: 'cjs',
file: pkg.main.replace(pkg.name, config.path),
},
],
},
// ES module (packed)
{
input: config.input,
plugins: basePlugins.concat(terser()),
output: [
{
format: 'esm',
file: toMinPath(pkg.module).replace(pkg.name, config.path),
sourcemap: true,
},
],
},
);
}
if (!process.env.ES_ONLY) {
configs.push(...extraConfigs);
}
export default configs;

View File

@@ -3,14 +3,14 @@ import { NodeType as RRNodeType } from 'rrweb-snapshot';
import type { NWSAPI } from 'nwsapi';
import type { CSSStyleDeclaration as CSSStyleDeclarationType } from 'cssstyle';
import {
BaseRRCDATASectionImpl,
BaseRRCommentImpl,
BaseRRDocumentImpl,
BaseRRDocumentTypeImpl,
BaseRRElementImpl,
BaseRRMediaElementImpl,
BaseRRCDATASection,
BaseRRComment,
BaseRRDocument,
BaseRRDocumentType,
BaseRRElement,
BaseRRMediaElement,
BaseRRNode,
BaseRRTextImpl,
BaseRRText,
ClassList,
IRRDocument,
CSSStyleDeclaration,
@@ -22,8 +22,6 @@ const cssom = require('cssom');
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-var-requires
const cssstyle = require('cssstyle');
export class RRNode extends BaseRRNode {}
export class RRWindow {
scrollLeft = 0;
scrollTop = 0;
@@ -34,13 +32,10 @@ export class RRWindow {
}
}
export class RRDocument
extends BaseRRDocumentImpl(RRNode)
implements IRRDocument
{
readonly nodeName: '#document' = '#document';
private _nwsapi: NWSAPI;
get nwsapi() {
export class RRDocument extends BaseRRDocument implements IRRDocument {
readonly nodeName = '#document' as const;
private _nwsapi: NWSAPI | undefined;
get nwsapi(): NWSAPI {
if (!this._nwsapi) {
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
this._nwsapi = nwsapi({
@@ -49,7 +44,7 @@ export class RRDocument
message?: string,
name?: string,
) => DOMException,
});
}) as NWSAPI;
this._nwsapi.configure({
LOGERRORS: false,
IDS_DUPES: true,
@@ -89,16 +84,16 @@ export class RRDocument
return this.documentElement;
}
appendChild(childNode: RRNode) {
appendChild(childNode: BaseRRNode) {
return super.appendChild(childNode);
}
insertBefore(newChild: RRNode, refChild: RRNode | null) {
insertBefore(newChild: BaseRRNode, refChild: BaseRRNode | null) {
return super.insertBefore(newChild, refChild);
}
querySelectorAll(selectors: string): RRNode[] {
return this.nwsapi.select(selectors) as unknown as RRNode[];
querySelectorAll(selectors: string): BaseRRNode[] {
return this.nwsapi.select(selectors) as unknown as BaseRRNode[];
}
getElementsByTagName(tagName: string): RRElement[] {
@@ -199,9 +194,9 @@ export class RRDocument
}
}
export class RRDocumentType extends BaseRRDocumentTypeImpl(RRNode) {}
export class RRDocumentType extends BaseRRDocumentType {}
export class RRElement extends BaseRRElementImpl(RRNode) {
export class RRElement extends BaseRRElement {
private _style: CSSStyleDeclarationType;
constructor(tagName: string) {
super(tagName);
@@ -228,12 +223,12 @@ export class RRElement extends BaseRRElementImpl(RRNode) {
return super.attachShadow(_init) as RRElement;
}
appendChild(newChild: RRNode): RRNode {
return super.appendChild(newChild) as RRNode;
appendChild(newChild: BaseRRNode): BaseRRNode {
return super.appendChild(newChild) as BaseRRNode;
}
insertBefore(newChild: RRNode, refChild: RRNode | null): RRNode {
return super.insertBefore(newChild, refChild) as RRNode;
insertBefore(newChild: BaseRRNode, refChild: BaseRRNode | null): BaseRRNode {
return super.insertBefore(newChild, refChild) as BaseRRNode;
}
getAttribute(name: string) {
@@ -266,7 +261,7 @@ export class RRElement extends BaseRRElementImpl(RRNode) {
return null;
}
querySelectorAll(selectors: string): RRNode[] {
querySelectorAll(selectors: string): BaseRRNode[] {
const result: RRElement[] = [];
if (this.ownerDocument !== null) {
(this.ownerDocument as RRDocument).nwsapi.select(
@@ -276,7 +271,7 @@ export class RRElement extends BaseRRElementImpl(RRNode) {
if ((element as unknown as RRElement) !== this)
result.push(element as unknown as RRElement);
},
) as unknown as RRNode[];
) as unknown as BaseRRNode[];
}
return result;
}
@@ -324,13 +319,13 @@ export class RRElement extends BaseRRElementImpl(RRNode) {
}
export class RRImageElement extends RRElement {
src: string;
width: number;
height: number;
onload: ((this: GlobalEventHandlers, ev: Event) => unknown) | null;
src = '';
width = 0;
height = 0;
onload: ((this: GlobalEventHandlers, ev: Event) => unknown) | null = null;
}
export class RRMediaElement extends BaseRRMediaElementImpl(RRElement) {}
export class RRMediaElement extends BaseRRMediaElement {}
export class RRCanvasElement extends RRElement {
/**
@@ -373,16 +368,16 @@ export class RRIFrameElement extends RRElement {
}
}
export class RRText extends BaseRRTextImpl(RRNode) {
readonly nodeName: '#text' = '#text';
export class RRText extends BaseRRText {
readonly nodeName = '#text' as const;
}
export class RRComment extends BaseRRCommentImpl(RRNode) {
readonly nodeName: '#comment' = '#comment';
export class RRComment extends BaseRRComment {
readonly nodeName = '#comment' as const;
}
export class RRCDATASection extends BaseRRCDATASectionImpl(RRNode) {
readonly nodeName: '#cdata-section' = '#cdata-section';
export class RRCDATASection extends BaseRRCDATASection {
readonly nodeName = '#cdata-section' as const;
}
interface RRElementTagNameMap {

View File

@@ -1,4 +1,5 @@
import { RRDocument, RRNode } from './document-nodejs';
import { BaseRRNode } from 'rrdom';
import { RRDocument } from './document-nodejs';
/**
* Polyfill the performance for nodejs.
@@ -70,11 +71,11 @@ export function polyfillEvent() {
}
/**
* Polyfill Node type with RRNode for nodejs.
* Polyfill Node type with BaseRRNode for nodejs.
*/
export function polyfillNode() {
if (typeof Node !== 'undefined') return;
(global.Node as unknown) = RRNode;
(global.Node as unknown) = BaseRRNode;
}
/**
@@ -85,8 +86,8 @@ export function polyfillDocument() {
const rrdom = new RRDocument();
(() => {
rrdom.appendChild(rrdom.createElement('html'));
rrdom.documentElement!.appendChild(rrdom.createElement('head'));
rrdom.documentElement!.appendChild(rrdom.createElement('body'));
rrdom.documentElement?.appendChild(rrdom.createElement('head'));
rrdom.documentElement?.appendChild(rrdom.createElement('body'));
})();
global.document = rrdom as unknown as Document;
}

View File

@@ -1,6 +1,7 @@
/**
* @jest-environment jsdom
* @vitest-environment jsdom
*/
import { describe, it, expect, beforeAll } from 'vitest';
import * as fs from 'fs';
import * as path from 'path';
import { NodeType as RRNodeType } from 'rrweb-snapshot';
@@ -81,12 +82,12 @@ describe('RRDocument for nodejs environment', () => {
expect(() =>
rrdom.insertBefore(rrdom.createDocumentType('', '', ''), null),
).toThrowErrorMatchingInlineSnapshot(
`"RRDomException: Failed to execute 'insertBefore' on 'RRNode': Only one RRDoctype on RRDocument allowed."`,
`[Error: RRDomException: Failed to execute 'insertBefore' on 'RRNode': Only one RRDoctype on RRDocument allowed.]`,
);
expect(() =>
rrdom.insertBefore(rrdom.createElement('div'), null),
).toThrowErrorMatchingInlineSnapshot(
`"RRDomException: Failed to execute 'insertBefore' on 'RRNode': Only one RRElement on RRDocument allowed."`,
`[Error: RRDomException: Failed to execute 'insertBefore' on 'RRNode': Only one RRElement on RRDocument allowed.]`,
);
const node = new RRDocument();
const doctype = rrdom.createDocumentType('', '', '');
@@ -464,7 +465,7 @@ describe('RRDocument for nodejs environment', () => {
expect(() =>
node.insertBefore(node, child1),
).toThrowErrorMatchingInlineSnapshot(
`"Failed to execute 'insertBefore' on 'RRNode': The RRNode before which the new node is to be inserted is not a child of this RRNode."`,
`[Error: Failed to execute 'insertBefore' on 'RRNode': The RRNode before which the new node is to be inserted is not a child of this RRNode.]`,
);
expect(node.insertBefore(child1, null)).toBe(child1);
expect(node.childNodes[0]).toBe(child1);

View File

@@ -1,5 +1,6 @@
import { describe, it, expect, vi } from 'vitest';
import { compare } from 'compare-versions';
import { RRDocument, RRNode } from '../src/document-nodejs';
import { RRDocument } from '../src/document-nodejs';
import {
polyfillPerformance,
polyfillRAF,
@@ -8,6 +9,7 @@ import {
polyfillDocument,
} from '../src/polyfill';
import { performance as nativePerformance } from 'perf_hooks';
import { BaseRRNode } from 'rrdom';
describe('polyfill for nodejs', () => {
it('should polyfill performance api', () => {
@@ -26,7 +28,7 @@ describe('polyfill for nodejs', () => {
polyfillPerformance();
expect(global.performance).toBe(originalPerformance);
}
const fakePerformance = jest.fn() as unknown as Performance;
const fakePerformance = vi.fn() as unknown as Performance;
global.performance = fakePerformance;
polyfillPerformance();
expect(global.performance).toEqual(fakePerformance);
@@ -41,7 +43,7 @@ describe('polyfill for nodejs', () => {
expect(requestAnimationFrame).toBeDefined();
expect(cancelAnimationFrame).toBeDefined();
jest.useFakeTimers();
vi.useFakeTimers();
const AnimationTime = 1_000; // target animation time(unit: ms)
const startTime = Date.now();
let frameCount = 0;
@@ -57,7 +59,7 @@ describe('polyfill for nodejs', () => {
};
requestAnimationFrame(rafCallback1);
// Fast-forward until all timers have been executed
jest.runAllTimers();
vi.runAllTimers();
let rafHandle;
const rafCallback2 = () => {
@@ -67,16 +69,16 @@ describe('polyfill for nodejs', () => {
// If this function doesn't work, recursive function will never end.
cancelAnimationFrame(rafHandle);
jest.runAllTimers();
jest.useRealTimers();
vi.runAllTimers();
vi.useRealTimers();
});
it('should not polyfill requestAnimationFrame if it already exists', () => {
const fakeRequestAnimationFrame =
jest.fn() as unknown as typeof global.requestAnimationFrame;
vi.fn() as unknown as typeof global.requestAnimationFrame;
global.requestAnimationFrame = fakeRequestAnimationFrame;
const fakeCancelAnimationFrame =
jest.fn() as unknown as typeof global.cancelAnimationFrame;
vi.fn() as unknown as typeof global.cancelAnimationFrame;
global.cancelAnimationFrame = fakeCancelAnimationFrame;
polyfillRAF();
expect(global.requestAnimationFrame).toBe(fakeRequestAnimationFrame);
@@ -93,7 +95,7 @@ describe('polyfill for nodejs', () => {
});
it('should not polyfill Event type if it already exists', () => {
const fakeEvent = jest.fn() as unknown as typeof global.Event;
const fakeEvent = vi.fn() as unknown as typeof global.Event;
global.Event = fakeEvent;
polyfillEvent();
expect(global.Event).toBe(fakeEvent);
@@ -104,11 +106,11 @@ describe('polyfill for nodejs', () => {
polyfillNode();
expect(global.Node).toBeDefined();
expect(Node).toBeDefined();
expect(Node).toEqual(RRNode);
expect(Node).toEqual(BaseRRNode);
});
it('should not polyfill Node type if it already exists', () => {
const fakeNode = jest.fn() as unknown as typeof global.Node;
const fakeNode = vi.fn() as unknown as typeof global.Node;
global.Node = fakeNode;
polyfillNode();
expect(global.Node).toBe(fakeNode);
@@ -123,7 +125,7 @@ describe('polyfill for nodejs', () => {
});
it('should not polyfill document object if it already exists', () => {
const fakeDocument = jest.fn() as unknown as typeof global.document;
const fakeDocument = vi.fn() as unknown as typeof global.document;
global.document = fakeDocument;
polyfillDocument();
expect(global.document).toBe(fakeDocument);

View File

@@ -1,28 +1,10 @@
{
"extends": "../../tsconfig.base.json",
"include": ["src"],
"compilerOptions": {
"composite": true,
"target": "ES6",
"module": "commonjs",
"noImplicitAny": true,
"strictNullChecks": true,
"removeComments": true,
"preserveConstEnums": true,
"sourceMap": true,
"rootDir": "src",
"outDir": "build",
"lib": ["es6", "dom"],
"skipLibCheck": true,
"declaration": true,
"importsNotUsedAsValues": "error"
"tsBuildInfoFile": "./tsconfig.tsbuildinfo"
},
"compileOnSave": true,
"exclude": ["test"],
"include": [
"src",
"test.d.ts",
"../rrweb/src/record/workers/workers.d.ts",
"../rrweb/src/record/constructable-stylesheets.d.ts"
],
"references": [
{
"path": "../rrdom"

View File

@@ -0,0 +1,4 @@
import path from 'path';
import config from '../../vite.config.default';
export default config(path.resolve(__dirname, 'src/index.ts'), 'rrdomNodejs');

View File

@@ -0,0 +1,5 @@
/// <reference types="vitest" />
import { defineProject, mergeConfig } from 'vitest/config';
import configShared from '../../vitest.config';
export default mergeConfig(configShared, defineProject({}));