Chore: Migrate build to vite

[Juice10]

• [x] Move plugins to /packages/plugins/PLUGIN_NAME
• [x] Move testing of plugins to their own packages
• [x] Move packer to its own package
• [x] Get tests working again in all packages
• [x] Add umd bundling to rrweb: depends on https://github.com/vitejs/vite/pull/10609 (or use workaround by running multiple vite builds, one for each entry) https://github.com/vitejs/vite/discussions/1736#discussioncomment-4997467
• [x] Unify all tsconfig.json files by extending them from /tsconfig.base.json
  • [x] Fix any typescript code that fails due to unification
• [x] Update all .md files to reflect new file names and plugin locations
• [x] port bundling of rrweb-player to vite
• [x] fix errors from https://publint.dev/[email protected]
• [x] setup yarn dev to build with --watch
• [x] move apply virtual style rules to node tests to rrweb from rrdom
• [x] consider adding an @rrweb/all convenience package that bundles: record/replay/pack/unpack/plugins-console-record/plugins-console-replay
• [x] make sure repl and stream work
• [x] make sure benchmarks run
• [x] fix CI

Tests passing:

• [x] rrdom/
• [x] rrdom-nodejs/ ~failing: needs to be updated to jest 29 like rrdom~
• [x] rrvideo/ ~failing: needs to be updated to jest 29 like rrdom~
• [x] rrweb/ ~failing~
• [x] ~rrweb-player/~ no tests
• [x] rrweb-snapshot/ ~2 failed tests "rrweb is not defined"~
• [x] @rrweb/packer
• [x] ~@rrweb/types~ no tests
• [x] ~web-extension/~ no tests
• [x] ~plugins/rrweb-plugin-canvas-webrtc-record/~ no tests
• [x] ~plugins/rrweb-plugin-canvas-webrtc-replay/~ no tests
• [x] plugins/rrweb-plugin-console-record/ failing locally some times; vite adds a console.debug message when included
• [x] ~plugins/rrweb-plugin-console-replay/~ no tests
• [x] ~plugins/rrweb-plugin-sequential-id-record/~ no tests
• [x] ~plugins/rrweb-plugin-sequential-id-replay/~ no tests

Build passing:

• [x] rrdom/
• [x] rrdom-nodejs/
• [x] rrvideo/ (not with vite yet)
• [x] rrweb/
• [x] rrweb-player/ ~failing: rrweb does not export packer, packers should be moved to own package~
• [x] rrweb-snapshot/
• [x] @rrweb/packer
• [x] @rrweb/types
• [x] web-extension/
• [x] plugins/rrweb-plugin-canvas-webrtc-record/
• [x] plugins/rrweb-plugin-canvas-webrtc-replay/
• [x] plugins/rrweb-plugin-console-record/
• [x] plugins/rrweb-plugin-console-replay/
• [x] plugins/rrweb-plugin-sequential-id-record/
• [x] plugins/rrweb-plugin-sequential-id-replay/

publint passing (yarn build && yarn test; npx publint; attw --pack .):

• [x] rrdom/
• [x] rrdom-nodejs/
• [x] rrvideo/ (not with vite yet)
• [x] rrweb/ ~still needs umd version to make it work~
• [x] rrweb-player/ ~not using vite yet, all type imports are broken~
• [x] rrweb-snapshot/
• [x] @rrweb/packer
• [x] @rrweb/types
• [x] @rrweb/all
• [x] ~web-extension/~ (not an exposed package)
• [x] plugins/rrweb-plugin-canvas-webrtc-record/
• [x] plugins/rrweb-plugin-canvas-webrtc-replay/
• [x] plugins/rrweb-plugin-console-record/
• [x] plugins/rrweb-plugin-console-replay/
• [x] plugins/rrweb-plugin-sequential-id-record/
• [x] plugins/rrweb-plugin-sequential-id-replay/

[Yuyz0112]

going to look into this!

BTW, have you ever considered tsup?

[Juice10]

@Yuyz0112

going to look into this!

BTW, have you ever considered tsup?

To be honest I hadn't before reading your comment. Vite has so much momentum behind it and such broad support (libraries, svelte, vue, react, css, assets etc.), way less config heavy than the incumbents. And I felt really happy with it after ripping out webpack and raw rollup from a number of projects and replacing them with Vite. That made me think it was a good fit for us. I have taken some time to get familiar with tsup and try it out. And I really love the low config nature of tsup as well, I think it may even be doing an even better job at it than Vite. tsup uses esbuild + (a little) rollup under the hood which is super similar to Vite, although according to Vite's documentation esbuild is lacking in some features (eg. CSS support) and that's why they use rollup more for the production builds.

But for some reason while using tsup on rrweb I end up bumping into errors while bundling. Bundling the normal files is fine but generating the typescript dts files it seems to have issues with.

One thing I really like about Vite is that it comes with vitest, a super fast, drop in replacement for jest. Because it uses Vite under the hood, that's one less configuration step that needs to happen, which will make it easier for us to create packages (for example one per plugin) without all the configuration overhead. Jest seems to have massive issues with esm modules since it was built in a pre-esm world, and I think we'll start bumping into that more and more. Vitest would be an easy solution for that.

[Yuyz0112]

@Juice10 Thanks for the detailed explanation!

I mentioned tsup because in some other projects we found vite is good enough for packaging an app, but it still needs more config works to package a library. So we use vite to dev and build apps and tsup to build libraries. So basically it's a supplement instead of a replacement.

If rrweb is happy with vite, then a tsup may not be needed.

Great work!

[Juice10]

We need to make sure this PR also addresses the following issues: https://publint.dev/[email protected]

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 2fc98c9b46b549f1579636f20ee844a82423b78c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 11 packages

Name	Type
@rrweb/rrweb-plugin-canvas-webrtc-replay	Patch
@rrweb/rrweb-plugin-sequential-id-replay	Patch
@rrweb/rrweb-plugin-console-replay	Patch
rrweb	Patch
rrweb-snapshot	Patch
rrdom	Patch
rrdom-nodejs	Patch
rrweb-player	Patch
@rrweb/types	Patch
@rrweb/web-extension	Patch
rrvideo	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[Juice10]

Awesome work @Juice10 This is a huge boost to development experience 🚀. I finished reviewing this huge pull request. I feel like this is ready to merge. The only issue I can find is that some unit tests are failing. Are you having any trouble dealing with them?

Thanks for the review @YunFeng0817, I really appreciate it, I know this PR is huge! Failing tests are my fault for pulling master but not updating the path in the new tests. They are fixed now

[daibhin]

Congrats on getting this over the line!! Another big step towards v2 👏 🥳