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.mdAnd 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.mdAnd 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
@@ -38,3 +38,177 @@ There are several things will be done during rebuild:
|
||||
#### buildNodeWithSN
|
||||
|
||||
`buildNodeWithSN` will build DOM from serialized node and store serialized information in the `mirror.getMeta(node)`.
|
||||
|
||||
## 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>
|
||||
|
||||
@@ -1,6 +0,0 @@
|
||||
/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
|
||||
export default {
|
||||
preset: 'ts-jest',
|
||||
testEnvironment: 'node',
|
||||
testMatch: ['**/**.test.ts'],
|
||||
};
|
||||
5
packages/rrweb-snapshot/jsr.json
Normal file
5
packages/rrweb-snapshot/jsr.json
Normal file
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"name": "@rrweb/snapshot",
|
||||
"version": "2.0.0-alpha.14",
|
||||
"exports": "./src/index.ts"
|
||||
}
|
||||
@@ -4,16 +4,15 @@
|
||||
"description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
|
||||
"scripts": {
|
||||
"prepare": "npm run prepack",
|
||||
"prepack": "npm run bundle && npm run typings",
|
||||
"prepack": "npm run build",
|
||||
"retest": "jest",
|
||||
"test": "yarn bundle && yarn retest",
|
||||
"test:watch": "jest --watch",
|
||||
"test:update": "jest --updateSnapshot",
|
||||
"bundle": "rollup --config",
|
||||
"bundle:es-only": "cross-env ES_ONLY=true rollup --config",
|
||||
"dev": "yarn bundle:es-only --watch",
|
||||
"typings": "tsc -d --declarationDir typings",
|
||||
"prepublish": "yarn typings && yarn bundle",
|
||||
"test": "vitest run",
|
||||
"test:watch": "vitest watch",
|
||||
"test:update": "vitest run --update",
|
||||
"dev": "vite build --watch",
|
||||
"build": "yarn check-types && vite build",
|
||||
"check-types": "tsc --noEmit",
|
||||
"prepublish": "npm run build",
|
||||
"lint": "yarn eslint src"
|
||||
},
|
||||
"type": "module",
|
||||
@@ -26,15 +25,25 @@
|
||||
"snapshot",
|
||||
"DOM"
|
||||
],
|
||||
"main": "lib/rrweb-snapshot.cjs",
|
||||
"module": "es/rrweb-snapshot.js",
|
||||
"unpkg": "dist/rrweb-snapshot.js",
|
||||
"typings": "typings/index.d.ts",
|
||||
"main": "./dist/rrweb-snapshot.umd.cjs",
|
||||
"module": "./dist/rrweb-snapshot.js",
|
||||
"unpkg": "./dist/rrweb-snapshot.umd.cjs",
|
||||
"typings": "dist/index.d.ts",
|
||||
"exports": {
|
||||
".": {
|
||||
"import": {
|
||||
"types": "./dist/index.d.ts",
|
||||
"default": "./dist/rrweb-snapshot.js"
|
||||
},
|
||||
"require": {
|
||||
"types": "./dist/index.d.cts",
|
||||
"default": "./dist/rrweb-snapshot.umd.cjs"
|
||||
}
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
"lib",
|
||||
"es",
|
||||
"typings"
|
||||
"package.json"
|
||||
],
|
||||
"author": "yanzhen@smartx.com",
|
||||
"license": "MIT",
|
||||
@@ -43,21 +52,16 @@
|
||||
},
|
||||
"homepage": "https://github.com/rrweb-io/rrweb/tree/master/packages/rrweb-snapshot#readme",
|
||||
"devDependencies": {
|
||||
"@types/chai": "^4.1.4",
|
||||
"@types/jest": "^27.0.2",
|
||||
"@types/jsdom": "^20.0.0",
|
||||
"@types/node": "^18.15.11",
|
||||
"@types/puppeteer": "^1.12.4",
|
||||
"@types/puppeteer": "^5.4.4",
|
||||
"cross-env": "^5.2.0",
|
||||
"jest": "^27.2.4",
|
||||
"jest-snapshot": "^23.6.0",
|
||||
"jsdom": "^16.4.0",
|
||||
"puppeteer": "^17.1.3",
|
||||
"rollup": "^2.45.2",
|
||||
"rollup-plugin-terser": "^7.0.2",
|
||||
"rollup-plugin-typescript2": "^0.31.2",
|
||||
"ts-jest": "^27.0.5",
|
||||
"ts-node": "^7.0.1",
|
||||
"tslib": "^1.9.3"
|
||||
"tslib": "^1.9.3",
|
||||
"typescript": "^4.7.3",
|
||||
"vite": "^5.2.8",
|
||||
"vite-plugin-dts": "^3.8.1",
|
||||
"vitest": "^1.4.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,76 +0,0 @@
|
||||
import typescript from 'rollup-plugin-typescript2';
|
||||
import { terser } from 'rollup-plugin-terser';
|
||||
import pkg from './package.json';
|
||||
|
||||
function toMinPath(path) {
|
||||
return path.replace(/\.js$/, '.min.js');
|
||||
}
|
||||
|
||||
let configs = [
|
||||
// ES module - for building rrweb
|
||||
{
|
||||
input: './src/index.ts',
|
||||
plugins: [typescript()],
|
||||
output: [
|
||||
{
|
||||
format: 'esm',
|
||||
file: pkg.module,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
let extra_configs = [
|
||||
// browser
|
||||
{
|
||||
input: './src/index.ts',
|
||||
plugins: [typescript()],
|
||||
output: [
|
||||
{
|
||||
name: 'rrwebSnapshot',
|
||||
format: 'iife',
|
||||
file: pkg.unpkg,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
input: './src/index.ts',
|
||||
plugins: [typescript(), terser()],
|
||||
output: [
|
||||
{
|
||||
name: 'rrwebSnapshot',
|
||||
format: 'iife',
|
||||
file: toMinPath(pkg.unpkg),
|
||||
sourcemap: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
// CommonJS
|
||||
{
|
||||
input: './src/index.ts',
|
||||
plugins: [typescript()],
|
||||
output: [
|
||||
{
|
||||
format: 'cjs',
|
||||
file: pkg.main,
|
||||
},
|
||||
],
|
||||
},
|
||||
// ES module (packed)
|
||||
{
|
||||
input: './src/index.ts',
|
||||
plugins: [typescript(), terser()],
|
||||
output: [
|
||||
{
|
||||
format: 'esm',
|
||||
file: toMinPath(pkg.module),
|
||||
sourcemap: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
if (!process.env.ES_ONLY) {
|
||||
configs.push(...extra_configs);
|
||||
}
|
||||
|
||||
export default configs;
|
||||
@@ -259,6 +259,7 @@ export function parse(css: string, options: ParserOptions = {}): Stylesheet {
|
||||
*/
|
||||
|
||||
class Position {
|
||||
public static content: string;
|
||||
public content!: string;
|
||||
public start!: Loc;
|
||||
public end!: Loc;
|
||||
@@ -268,6 +269,7 @@ export function parse(css: string, options: ParserOptions = {}): Stylesheet {
|
||||
this.start = start;
|
||||
this.end = { line: lineno, column };
|
||||
this.source = options.source;
|
||||
this.content = Position.content;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -275,7 +277,7 @@ export function parse(css: string, options: ParserOptions = {}): Stylesheet {
|
||||
* Non-enumerable source string
|
||||
*/
|
||||
|
||||
Position.prototype.content = css;
|
||||
Position.content = css;
|
||||
|
||||
const errorsList: ParserError[] = [];
|
||||
|
||||
|
||||
@@ -529,6 +529,7 @@ function visit(mirror: Mirror, onVisit: (node: Node) => void) {
|
||||
|
||||
for (const id of mirror.getIds()) {
|
||||
if (mirror.has(id)) {
|
||||
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||
walk(mirror.getNode(id)!);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -265,6 +265,7 @@ export function transformAttribute(
|
||||
export function ignoreAttribute(
|
||||
tagName: string,
|
||||
name: string,
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
_value: unknown,
|
||||
): boolean {
|
||||
return (tagName === 'video' || tagName === 'audio') && name === 'autoplay';
|
||||
@@ -403,11 +404,6 @@ function onceIframeLoaded(
|
||||
iframeEl.addEventListener('load', listener);
|
||||
}
|
||||
|
||||
function isStylesheetLoaded(link: HTMLLinkElement) {
|
||||
if (!link.getAttribute('href')) return true; // nothing to load
|
||||
return link.sheet !== null;
|
||||
}
|
||||
|
||||
function onceStylesheetLoaded(
|
||||
link: HTMLLinkElement,
|
||||
listener: () => unknown,
|
||||
|
||||
@@ -26,7 +26,7 @@ export function isShadowRoot(n: Node): n is ShadowRoot {
|
||||
* To fix the issue https://github.com/rrweb-io/rrweb/issues/933.
|
||||
* Some websites use polyfilled shadow dom and this function is used to detect this situation.
|
||||
*/
|
||||
export function isNativeShadowDom(shadowRoot: ShadowRoot) {
|
||||
export function isNativeShadowDom(shadowRoot: ShadowRoot): boolean {
|
||||
return Object.prototype.toString.call(shadowRoot) === '[object ShadowRoot]';
|
||||
}
|
||||
|
||||
|
||||
@@ -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\\": [
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { parse, Rule, Media } from '../src/css';
|
||||
import { fixSafariColons, escapeImportStatement } from './../src/utils';
|
||||
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
/**
|
||||
* @jest-environment jsdom
|
||||
* @vitest-environment jsdom
|
||||
*/
|
||||
import * as fs from 'fs';
|
||||
import * as path from 'path';
|
||||
import { describe, it, beforeEach, expect } from 'vitest';
|
||||
import {
|
||||
adaptCssForReplay,
|
||||
buildNodeWithSN,
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
/**
|
||||
* @jest-environment jsdom
|
||||
* @vitest-environment jsdom
|
||||
*/
|
||||
import { JSDOM } from 'jsdom';
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import {
|
||||
absoluteToStylesheet,
|
||||
serializeNodeWithId,
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
/**
|
||||
* @jest-environment jsdom
|
||||
* @vitest-environment jsdom
|
||||
*/
|
||||
import { describe, it, test, expect } from 'vitest';
|
||||
import { NodeType, serializedNode } from '../src/types';
|
||||
import { extractFileExtension, isNodeMetaEqual } from '../src/utils';
|
||||
import { serializedNodeWithId } from 'rrweb-snapshot';
|
||||
import type { serializedNodeWithId } from 'rrweb-snapshot';
|
||||
|
||||
describe('utils', () => {
|
||||
describe('isNodeMetaEqual()', () => {
|
||||
|
||||
@@ -1,18 +1,10 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"module": "ESNext",
|
||||
"target": "ES6",
|
||||
"moduleResolution": "Node",
|
||||
"noImplicitAny": true,
|
||||
"strictNullChecks": true,
|
||||
"removeComments": true,
|
||||
"preserveConstEnums": true,
|
||||
"rootDir": "src",
|
||||
"outDir": "build",
|
||||
"lib": ["es6", "dom"]
|
||||
},
|
||||
"exclude": ["test"],
|
||||
"extends": "../../tsconfig.base.json",
|
||||
"include": ["src"],
|
||||
"exclude": ["vite.config.ts", "vitest.config.ts", "test"],
|
||||
"compilerOptions": {
|
||||
"rootDir": "src",
|
||||
"tsBuildInfoFile": "./tsconfig.tsbuildinfo"
|
||||
},
|
||||
"references": []
|
||||
}
|
||||
|
||||
4
packages/rrweb-snapshot/vite.config.js
Normal file
4
packages/rrweb-snapshot/vite.config.js
Normal file
@@ -0,0 +1,4 @@
|
||||
import path from 'path';
|
||||
import config from '../../vite.config.default';
|
||||
|
||||
export default config(path.resolve(__dirname, 'src/index.ts'), 'rrwebSnapshot');
|
||||
12
packages/rrweb-snapshot/vitest.config.ts
Normal file
12
packages/rrweb-snapshot/vitest.config.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
/// <reference types="vitest" />
|
||||
import { defineProject, mergeConfig } from 'vitest/config';
|
||||
import configShared from '../../vitest.config.ts';
|
||||
|
||||
export default mergeConfig(
|
||||
configShared,
|
||||
defineProject({
|
||||
test: {
|
||||
// ... custom test config here
|
||||
},
|
||||
}),
|
||||
);
|
||||
Reference in New Issue
Block a user