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
4
packages/all/.gitignore
vendored
Normal file
4
packages/all/.gitignore
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
.turbo
|
||||
dist
|
||||
node_modules
|
||||
yarn-error.log
|
||||
200
packages/all/README.md
Normal file
200
packages/all/README.md
Normal file
@@ -0,0 +1,200 @@
|
||||
# @rrweb/all
|
||||
|
||||
Convenience package that includes a bundle of rrweb packages.
|
||||
|
||||
Includes the following packages:
|
||||
|
||||
- [rrweb](../rrweb)
|
||||
- [@rrweb/record](../record)
|
||||
- [@rrweb/replay](../replay)
|
||||
- [@rrweb/packer](../packer)
|
||||
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
npm install @rrweb/all
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
import { record, replay, pack, unpack } from '@rrweb/all';
|
||||
|
||||
// use record, replay, pack, unpack as you would with the individual packages.
|
||||
```
|
||||
|
||||
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>
|
||||
66
packages/all/package.json
Normal file
66
packages/all/package.json
Normal file
@@ -0,0 +1,66 @@
|
||||
{
|
||||
"name": "@rrweb/all",
|
||||
"version": "2.0.0-alpha.14",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"keywords": [
|
||||
"rrweb",
|
||||
"@rrweb/all"
|
||||
],
|
||||
"scripts": {
|
||||
"dev": "vite build --watch",
|
||||
"build": "tsc -noEmit && vite build",
|
||||
"test": "vitest run",
|
||||
"test:watch": "vitest watch",
|
||||
"check-types": "tsc -noEmit",
|
||||
"prepublish": "npm run build",
|
||||
"lint": "yarn eslint src/**/*.ts"
|
||||
},
|
||||
"homepage": "https://github.com/rrweb-io/rrweb/tree/main/packages/@rrweb/all#readme",
|
||||
"bugs": {
|
||||
"url": "https://github.com/rrweb-io/rrweb/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/rrweb-io/rrweb.git"
|
||||
},
|
||||
"license": "MIT",
|
||||
"type": "module",
|
||||
"main": "./dist/all.cjs",
|
||||
"module": "./dist/all.js",
|
||||
"unpkg": "./dist/all.umd.cjs",
|
||||
"typings": "dist/index.d.ts",
|
||||
"exports": {
|
||||
".": {
|
||||
"import": {
|
||||
"types": "./dist/index.d.ts",
|
||||
"default": "./dist/all.js"
|
||||
},
|
||||
"require": {
|
||||
"types": "./dist/index.d.cts",
|
||||
"default": "./dist/all.cjs"
|
||||
}
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"build",
|
||||
"dist",
|
||||
"package.json"
|
||||
],
|
||||
"devDependencies": {
|
||||
"puppeteer": "^20.9.0",
|
||||
"vite": "^5.2.8",
|
||||
"vite-plugin-dts": "^3.8.1",
|
||||
"vitest": "^1.4.0",
|
||||
"typescript": "^4.7.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"@rrweb/types": "^2.0.0-alpha.14",
|
||||
"@rrweb/packer": "^2.0.0-alpha.14",
|
||||
"rrweb": "^2.0.0-alpha.14"
|
||||
},
|
||||
"browserslist": [
|
||||
"supports es6-class"
|
||||
]
|
||||
}
|
||||
4
packages/all/src/index.ts
Normal file
4
packages/all/src/index.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export * from 'rrweb';
|
||||
export * from '@rrweb/packer';
|
||||
// export * from '@rrweb/rrweb-plugin-console-record';
|
||||
// export * from '@rrweb/rrweb-plugin-console-replay';
|
||||
@@ -0,0 +1,170 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`cross origin iframes & packer > blank.html > should support packFn option in record() > 1`] = `
|
||||
"[
|
||||
{
|
||||
\\"type\\": 4,
|
||||
\\"data\\": {
|
||||
\\"href\\": \\"about:blank\\",
|
||||
\\"width\\": 1920,
|
||||
\\"height\\": 1080
|
||||
},
|
||||
\\"v\\": \\"v1\\"
|
||||
},
|
||||
{
|
||||
\\"type\\": 2,
|
||||
\\"data\\": {
|
||||
\\"node\\": {
|
||||
\\"type\\": 0,
|
||||
\\"childNodes\\": [
|
||||
{
|
||||
\\"type\\": 1,
|
||||
\\"name\\": \\"html\\",
|
||||
\\"publicId\\": \\"\\",
|
||||
\\"systemId\\": \\"\\",
|
||||
\\"id\\": 2
|
||||
},
|
||||
{
|
||||
\\"type\\": 2,
|
||||
\\"tagName\\": \\"html\\",
|
||||
\\"attributes\\": {},
|
||||
\\"childNodes\\": [
|
||||
{
|
||||
\\"type\\": 2,
|
||||
\\"tagName\\": \\"head\\",
|
||||
\\"attributes\\": {},
|
||||
\\"childNodes\\": [
|
||||
{
|
||||
\\"type\\": 2,
|
||||
\\"tagName\\": \\"script\\",
|
||||
\\"attributes\\": {
|
||||
\\"type\\": \\"text/javascript\\"
|
||||
},
|
||||
\\"childNodes\\": [
|
||||
{
|
||||
\\"type\\": 3,
|
||||
\\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
|
||||
\\"id\\": 6
|
||||
}
|
||||
],
|
||||
\\"id\\": 5
|
||||
}
|
||||
],
|
||||
\\"id\\": 4
|
||||
},
|
||||
{
|
||||
\\"type\\": 2,
|
||||
\\"tagName\\": \\"body\\",
|
||||
\\"attributes\\": {},
|
||||
\\"childNodes\\": [
|
||||
{
|
||||
\\"type\\": 3,
|
||||
\\"textContent\\": \\"\\\\n \\",
|
||||
\\"id\\": 8
|
||||
},
|
||||
{
|
||||
\\"type\\": 2,
|
||||
\\"tagName\\": \\"iframe\\",
|
||||
\\"attributes\\": {
|
||||
\\"rr_src\\": \\"http://localhost:3030/html/blank.html\\"
|
||||
},
|
||||
\\"childNodes\\": [],
|
||||
\\"id\\": 9
|
||||
},
|
||||
{
|
||||
\\"type\\": 3,
|
||||
\\"textContent\\": \\"\\\\n \\\\n \\\\n \\",
|
||||
\\"id\\": 10
|
||||
}
|
||||
],
|
||||
\\"id\\": 7
|
||||
}
|
||||
],
|
||||
\\"id\\": 3
|
||||
}
|
||||
],
|
||||
\\"id\\": 1
|
||||
},
|
||||
\\"initialOffset\\": {
|
||||
\\"left\\": 0,
|
||||
\\"top\\": 0
|
||||
}
|
||||
},
|
||||
\\"v\\": \\"v1\\"
|
||||
},
|
||||
{
|
||||
\\"type\\": 3,
|
||||
\\"data\\": {
|
||||
\\"source\\": 0,
|
||||
\\"adds\\": [
|
||||
{
|
||||
\\"parentId\\": 9,
|
||||
\\"nextId\\": null,
|
||||
\\"node\\": {
|
||||
\\"type\\": 0,
|
||||
\\"childNodes\\": [
|
||||
{
|
||||
\\"type\\": 2,
|
||||
\\"tagName\\": \\"html\\",
|
||||
\\"attributes\\": {},
|
||||
\\"childNodes\\": [
|
||||
{
|
||||
\\"type\\": 2,
|
||||
\\"tagName\\": \\"head\\",
|
||||
\\"attributes\\": {},
|
||||
\\"childNodes\\": [
|
||||
{
|
||||
\\"type\\": 2,
|
||||
\\"tagName\\": \\"script\\",
|
||||
\\"attributes\\": {
|
||||
\\"type\\": \\"text/javascript\\"
|
||||
},
|
||||
\\"childNodes\\": [
|
||||
{
|
||||
\\"type\\": 3,
|
||||
\\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
|
||||
\\"rootId\\": 11,
|
||||
\\"id\\": 15
|
||||
}
|
||||
],
|
||||
\\"rootId\\": 11,
|
||||
\\"id\\": 14
|
||||
}
|
||||
],
|
||||
\\"rootId\\": 11,
|
||||
\\"id\\": 13
|
||||
},
|
||||
{
|
||||
\\"type\\": 2,
|
||||
\\"tagName\\": \\"body\\",
|
||||
\\"attributes\\": {},
|
||||
\\"childNodes\\": [
|
||||
{
|
||||
\\"type\\": 3,
|
||||
\\"textContent\\": \\"\\\\n\\\\n\\",
|
||||
\\"rootId\\": 11,
|
||||
\\"id\\": 17
|
||||
}
|
||||
],
|
||||
\\"rootId\\": 11,
|
||||
\\"id\\": 16
|
||||
}
|
||||
],
|
||||
\\"rootId\\": 11,
|
||||
\\"id\\": 12
|
||||
}
|
||||
],
|
||||
\\"compatMode\\": \\"BackCompat\\",
|
||||
\\"id\\": 11
|
||||
}
|
||||
}
|
||||
],
|
||||
\\"removes\\": [],
|
||||
\\"texts\\": [],
|
||||
\\"attributes\\": [],
|
||||
\\"isAttachIframe\\": true
|
||||
},
|
||||
\\"v\\": \\"v1\\"
|
||||
}
|
||||
]"
|
||||
`;
|
||||
156
packages/all/test/cross-origin-iframe-packer.test.ts
Normal file
156
packages/all/test/cross-origin-iframe-packer.test.ts
Normal file
@@ -0,0 +1,156 @@
|
||||
import {
|
||||
describe,
|
||||
it,
|
||||
vi,
|
||||
beforeAll,
|
||||
beforeEach,
|
||||
afterEach,
|
||||
afterAll,
|
||||
} from 'vitest';
|
||||
import type {
|
||||
eventWithTime,
|
||||
listenerHandler,
|
||||
mutationData,
|
||||
} from '@rrweb/types';
|
||||
import { unpack } from '@rrweb/packer';
|
||||
import * as fs from 'fs';
|
||||
import * as path from 'path';
|
||||
import type * as puppeteer from 'puppeteer';
|
||||
import type { recordOptions } from 'rrweb';
|
||||
import type {} from '@rrweb/types';
|
||||
import { EventType } from '@rrweb/types';
|
||||
import {
|
||||
assertSnapshot,
|
||||
getServerURL,
|
||||
launchPuppeteer,
|
||||
startServer,
|
||||
waitForRAF,
|
||||
} from './utils';
|
||||
import type * as http from 'http';
|
||||
|
||||
interface ISuite {
|
||||
code: string;
|
||||
browser: puppeteer.Browser;
|
||||
page: puppeteer.Page;
|
||||
events: eventWithTime[];
|
||||
server: http.Server;
|
||||
serverURL: string;
|
||||
}
|
||||
|
||||
interface IWindow extends Window {
|
||||
rrweb: {
|
||||
record: (
|
||||
options: recordOptions<eventWithTime>,
|
||||
) => listenerHandler | undefined;
|
||||
addCustomEvent<T>(tag: string, payload: T): void;
|
||||
pack: (e: eventWithTime) => string;
|
||||
};
|
||||
emit: (e: eventWithTime) => undefined;
|
||||
snapshots: eventWithTime[];
|
||||
}
|
||||
type ExtraOptions = {
|
||||
usePackFn?: boolean;
|
||||
};
|
||||
|
||||
async function injectRecordScript(
|
||||
frame: puppeteer.Frame,
|
||||
options?: ExtraOptions,
|
||||
) {
|
||||
await frame.addScriptTag({
|
||||
path: path.resolve(__dirname, '../dist/all.umd.cjs'),
|
||||
});
|
||||
options = options || {};
|
||||
await frame.evaluate((options) => {
|
||||
(window as unknown as IWindow).snapshots = [];
|
||||
const { record, pack } = (window as unknown as IWindow).rrweb;
|
||||
const config: recordOptions<eventWithTime> = {
|
||||
recordCrossOriginIframes: true,
|
||||
recordCanvas: true,
|
||||
emit(event) {
|
||||
(window as unknown as IWindow).snapshots.push(event);
|
||||
(window as unknown as IWindow).emit(event);
|
||||
},
|
||||
};
|
||||
if (options.usePackFn) {
|
||||
config.packFn = pack;
|
||||
}
|
||||
record(config);
|
||||
}, options);
|
||||
|
||||
for (const child of frame.childFrames()) {
|
||||
await injectRecordScript(child, options);
|
||||
}
|
||||
}
|
||||
|
||||
const setup = function (
|
||||
this: ISuite,
|
||||
content: string,
|
||||
options?: ExtraOptions,
|
||||
): ISuite {
|
||||
const ctx = {} as ISuite;
|
||||
|
||||
beforeAll(async () => {
|
||||
ctx.browser = await launchPuppeteer();
|
||||
ctx.server = await startServer();
|
||||
ctx.serverURL = getServerURL(ctx.server);
|
||||
});
|
||||
|
||||
beforeEach(async () => {
|
||||
ctx.page = await ctx.browser.newPage();
|
||||
await ctx.page.goto('about:blank');
|
||||
await ctx.page.setContent(
|
||||
content.replace(/\{SERVER_URL\}/g, ctx.serverURL),
|
||||
);
|
||||
ctx.events = [];
|
||||
await ctx.page.exposeFunction('emit', (e: eventWithTime) => {
|
||||
if (e.type === EventType.DomContentLoaded || e.type === EventType.Load) {
|
||||
return;
|
||||
}
|
||||
ctx.events.push(e);
|
||||
});
|
||||
|
||||
ctx.page.on('console', (msg) => console.log('PAGE LOG:', msg.text()));
|
||||
await injectRecordScript(ctx.page.mainFrame(), options);
|
||||
});
|
||||
|
||||
afterEach(async () => {
|
||||
await ctx.page.close();
|
||||
});
|
||||
|
||||
afterAll(async () => {
|
||||
await ctx.browser.close();
|
||||
ctx.server.close();
|
||||
});
|
||||
|
||||
return ctx;
|
||||
};
|
||||
|
||||
describe('cross origin iframes & packer', function (this: ISuite) {
|
||||
vi.setConfig({ testTimeout: 100_000 });
|
||||
|
||||
describe('blank.html', function (this: ISuite) {
|
||||
const content = `
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<iframe src="{SERVER_URL}/html/blank.html"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
const ctx = setup.call(this, content, { usePackFn: true });
|
||||
|
||||
describe('should support packFn option in record()', () => {
|
||||
it('', async () => {
|
||||
const frame = ctx.page.mainFrame().childFrames()[0];
|
||||
await waitForRAF(frame);
|
||||
const packedSnapshots = (await ctx.page.evaluate(
|
||||
'window.snapshots',
|
||||
)) as string[];
|
||||
const unpackedSnapshots = packedSnapshots.map((packed) =>
|
||||
unpack(packed),
|
||||
) as eventWithTime[];
|
||||
assertSnapshot(unpackedSnapshots);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
3
packages/all/test/html/blank.html
Normal file
3
packages/all/test/html/blank.html
Normal file
@@ -0,0 +1,3 @@
|
||||
<html>
|
||||
<body></body>
|
||||
</html>
|
||||
278
packages/all/test/utils.ts
Normal file
278
packages/all/test/utils.ts
Normal file
@@ -0,0 +1,278 @@
|
||||
import { NodeType } from 'rrweb-snapshot';
|
||||
import { expect } from 'vitest';
|
||||
import {
|
||||
EventType,
|
||||
IncrementalSource,
|
||||
eventWithTime,
|
||||
Optional,
|
||||
mouseInteractionData,
|
||||
event,
|
||||
pluginEvent,
|
||||
} from '@rrweb/types';
|
||||
import * as puppeteer from 'puppeteer';
|
||||
import * as path from 'path';
|
||||
import * as http from 'http';
|
||||
import * as url from 'url';
|
||||
import * as fs from 'fs';
|
||||
|
||||
export async function launchPuppeteer(
|
||||
options?: Parameters<(typeof puppeteer)['launch']>[0],
|
||||
) {
|
||||
return await puppeteer.launch({
|
||||
headless: process.env.PUPPETEER_HEADLESS ? 'new' : false,
|
||||
defaultViewport: {
|
||||
width: 1920,
|
||||
height: 1080,
|
||||
},
|
||||
args: ['--no-sandbox'],
|
||||
...options,
|
||||
});
|
||||
}
|
||||
|
||||
interface IMimeType {
|
||||
[key: string]: string;
|
||||
}
|
||||
export const startServer = (defaultPort = 3030) =>
|
||||
new Promise<http.Server>((resolve) => {
|
||||
const mimeType: IMimeType = {
|
||||
'.html': 'text/html',
|
||||
'.js': 'text/javascript',
|
||||
'.css': 'text/css',
|
||||
};
|
||||
const s = http.createServer((req, res) => {
|
||||
const parsedUrl = url.parse(req.url!);
|
||||
const sanitizePath = path
|
||||
.normalize(parsedUrl.pathname!)
|
||||
.replace(/^(\.\.[\/\\])+/, '');
|
||||
|
||||
let pathname = path.join(__dirname, sanitizePath);
|
||||
if (/^\/rrweb.*\.c?js.*/.test(sanitizePath)) {
|
||||
pathname = path.join(__dirname, `../dist`, sanitizePath);
|
||||
}
|
||||
|
||||
try {
|
||||
const data = fs.readFileSync(pathname);
|
||||
const ext = path.parse(pathname).ext;
|
||||
res.setHeader('Content-type', mimeType[ext] || 'text/plain');
|
||||
res.setHeader('Access-Control-Allow-Origin', '*');
|
||||
res.setHeader('Access-Control-Allow-Methods', 'GET');
|
||||
res.setHeader('Access-Control-Allow-Headers', 'Content-type');
|
||||
setTimeout(() => {
|
||||
res.end(data);
|
||||
// mock delay
|
||||
}, 100);
|
||||
} catch (error) {
|
||||
res.end();
|
||||
}
|
||||
});
|
||||
s.listen(defaultPort)
|
||||
.on('listening', () => {
|
||||
resolve(s);
|
||||
})
|
||||
.on('error', (e) => {
|
||||
s.listen().on('listening', () => {
|
||||
resolve(s);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
export function getServerURL(server: http.Server): string {
|
||||
const address = server.address();
|
||||
if (address && typeof address !== 'string') {
|
||||
return `http://localhost:${address.port}`;
|
||||
} else {
|
||||
return `${address}`;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Puppeteer may cast random mouse move which make our tests flaky.
|
||||
* So we only do snapshot test with filtered events.
|
||||
* Also remove timestamp from event.
|
||||
* @param snapshots incrementalSnapshotEvent[]
|
||||
*/
|
||||
function stringifySnapshots(snapshots: eventWithTime[]): string {
|
||||
return JSON.stringify(
|
||||
snapshots
|
||||
.filter((s) => {
|
||||
if (
|
||||
s.type === EventType.IncrementalSnapshot &&
|
||||
(s.data.source === IncrementalSource.MouseMove ||
|
||||
s.data.source === IncrementalSource.ViewportResize)
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
})
|
||||
.map((s) => {
|
||||
if (s.type === EventType.Meta) {
|
||||
s.data.href = 'about:blank';
|
||||
}
|
||||
// FIXME: travis coordinates seems different with my laptop
|
||||
const coordinatesReg =
|
||||
/(bottom|top|left|right|width|height): \d+(\.\d+)?px/g;
|
||||
if (
|
||||
s.type === EventType.IncrementalSnapshot &&
|
||||
s.data.source === IncrementalSource.MouseInteraction
|
||||
) {
|
||||
delete (s.data as Optional<mouseInteractionData, 'x'>).x;
|
||||
delete (s.data as Optional<mouseInteractionData, 'y'>).y;
|
||||
}
|
||||
if (
|
||||
s.type === EventType.IncrementalSnapshot &&
|
||||
s.data.source === IncrementalSource.Mutation
|
||||
) {
|
||||
s.data.attributes.forEach((a) => {
|
||||
if ('style' in a.attributes && a.attributes.style) {
|
||||
if (typeof a.attributes.style === 'object') {
|
||||
for (const [k, v] of Object.entries(a.attributes.style)) {
|
||||
if (Array.isArray(v)) {
|
||||
if (coordinatesReg.test(k + ': ' + v[0])) {
|
||||
// TODO: could round the number here instead depending on what's coming out of various test envs
|
||||
a.attributes.style[k] = ['Npx', v[1]];
|
||||
}
|
||||
} else if (typeof v === 'string') {
|
||||
if (coordinatesReg.test(k + ': ' + v)) {
|
||||
a.attributes.style[k] = 'Npx';
|
||||
}
|
||||
}
|
||||
coordinatesReg.lastIndex = 0; // wow, a real wart in ECMAScript
|
||||
}
|
||||
} else if (coordinatesReg.test(a.attributes.style)) {
|
||||
a.attributes.style = a.attributes.style.replace(
|
||||
coordinatesReg,
|
||||
'$1: Npx',
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// strip blob:urls as they are different every time
|
||||
stripBlobURLsFromAttributes(a);
|
||||
});
|
||||
s.data.adds.forEach((add) => {
|
||||
if (add.node.type === NodeType.Element) {
|
||||
if (
|
||||
'style' in add.node.attributes &&
|
||||
typeof add.node.attributes.style === 'string' &&
|
||||
coordinatesReg.test(add.node.attributes.style)
|
||||
) {
|
||||
add.node.attributes.style = add.node.attributes.style.replace(
|
||||
coordinatesReg,
|
||||
'$1: Npx',
|
||||
);
|
||||
}
|
||||
coordinatesReg.lastIndex = 0; // wow, a real wart in ECMAScript
|
||||
|
||||
// strip blob:urls as they are different every time
|
||||
stripBlobURLsFromAttributes(add.node);
|
||||
|
||||
// strip rr_dataURL as they are not consistent
|
||||
if (
|
||||
'rr_dataURL' in add.node.attributes &&
|
||||
add.node.attributes.rr_dataURL &&
|
||||
typeof add.node.attributes.rr_dataURL === 'string'
|
||||
) {
|
||||
add.node.attributes.rr_dataURL =
|
||||
add.node.attributes.rr_dataURL.replace(/,.+$/, ',...');
|
||||
}
|
||||
}
|
||||
});
|
||||
} else if (
|
||||
s.type === EventType.IncrementalSnapshot &&
|
||||
s.data.source === IncrementalSource.MediaInteraction
|
||||
) {
|
||||
// round the currentTime to 1 decimal place
|
||||
if (s.data.currentTime) {
|
||||
s.data.currentTime = Math.round(s.data.currentTime * 10) / 10;
|
||||
}
|
||||
} else if (
|
||||
s.type === EventType.Plugin &&
|
||||
s.data.plugin === 'rrweb/console@1'
|
||||
) {
|
||||
const pluginPayload = (
|
||||
s as pluginEvent<{
|
||||
trace: string[];
|
||||
payload: string[];
|
||||
}>
|
||||
).data.payload;
|
||||
|
||||
if (pluginPayload?.trace.length) {
|
||||
pluginPayload.trace = pluginPayload.trace.map((trace) => {
|
||||
return trace.replace(
|
||||
/^pptr:evaluate;.*?:(\d+:\d+)/,
|
||||
'__puppeteer_evaluation_script__:$1',
|
||||
);
|
||||
});
|
||||
}
|
||||
if (pluginPayload?.payload.length) {
|
||||
pluginPayload.payload = pluginPayload.payload.map((payload) => {
|
||||
return payload.replace(
|
||||
/pptr:evaluate;.*?:(\d+:\d+)/g,
|
||||
'__puppeteer_evaluation_script__:$1',
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
delete (s as Optional<eventWithTime, 'timestamp'>).timestamp;
|
||||
return s as event;
|
||||
}),
|
||||
null,
|
||||
2,
|
||||
).replace(
|
||||
// servers might get run on a random port,
|
||||
// so we need to normalize the port number
|
||||
/http:\/\/localhost:\d+/g,
|
||||
'http://localhost:3030',
|
||||
);
|
||||
}
|
||||
|
||||
function stripBlobURLsFromAttributes(node: {
|
||||
attributes: {
|
||||
src?: string;
|
||||
};
|
||||
}) {
|
||||
if (
|
||||
'src' in node.attributes &&
|
||||
node.attributes.src &&
|
||||
typeof node.attributes.src === 'string' &&
|
||||
node.attributes.src.startsWith('blob:')
|
||||
) {
|
||||
node.attributes.src = node.attributes.src
|
||||
.replace(/[\w-]+$/, '...')
|
||||
.replace(/:[0-9]+\//, ':xxxx/');
|
||||
}
|
||||
}
|
||||
|
||||
export async function assertSnapshot(
|
||||
snapshotsOrPage: eventWithTime[] | puppeteer.Page,
|
||||
) {
|
||||
let snapshots: eventWithTime[];
|
||||
if (!Array.isArray(snapshotsOrPage)) {
|
||||
// make sure page has finished executing js
|
||||
await waitForRAF(snapshotsOrPage);
|
||||
await snapshotsOrPage.waitForFunction(
|
||||
'window.snapshots && window.snapshots.length > 0',
|
||||
);
|
||||
|
||||
snapshots = (await snapshotsOrPage.evaluate(
|
||||
'window.snapshots',
|
||||
)) as eventWithTime[];
|
||||
} else {
|
||||
snapshots = snapshotsOrPage;
|
||||
}
|
||||
|
||||
expect(snapshots).toBeDefined();
|
||||
expect(stringifySnapshots(snapshots)).toMatchSnapshot();
|
||||
}
|
||||
|
||||
export async function waitForRAF(
|
||||
pageOrFrame: puppeteer.Page | puppeteer.Frame,
|
||||
) {
|
||||
return await pageOrFrame.evaluate(() => {
|
||||
return new Promise((resolve) => {
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(resolve);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
19
packages/all/tsconfig.json
Normal file
19
packages/all/tsconfig.json
Normal file
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"extends": "../../tsconfig.base.json",
|
||||
"include": ["src"],
|
||||
"compilerOptions": {
|
||||
"rootDir": "src",
|
||||
"tsBuildInfoFile": "./tsconfig.tsbuildinfo"
|
||||
},
|
||||
"references": [
|
||||
{
|
||||
"path": "../types"
|
||||
},
|
||||
{
|
||||
"path": "../packer"
|
||||
},
|
||||
{
|
||||
"path": "../rrweb"
|
||||
}
|
||||
]
|
||||
}
|
||||
4
packages/all/vite.config.ts
Normal file
4
packages/all/vite.config.ts
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'), 'rrweb');
|
||||
5
packages/all/vitest.config.ts
Normal file
5
packages/all/vitest.config.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
/// <reference types="vitest" />
|
||||
import { defineProject, mergeConfig } from 'vitest/config';
|
||||
import configShared from '../../vitest.config';
|
||||
|
||||
export default mergeConfig(configShared, defineProject({}));
|
||||
Reference in New Issue
Block a user