chore: Migrate build to vite (#234)

Pulls in the following upstream commits:

* rrweb-io#1033
* rrweb-io#1500
* rrweb-io#1501

Consists mostly build/meta changes, but there are some type changes and
code changes (mostly removed unused code) as well .

.changeset/eighty-teachers-smash.md

@@ -0,0 +1,8 @@
+---
+"@rrweb/rrweb-plugin-canvas-webrtc-replay": patch
+"@rrweb/rrweb-plugin-sequential-id-replay": patch
+"@rrweb/rrweb-plugin-console-replay": patch
+"rrweb": patch
+---
+
+Export `ReplayPlugin` from rrweb directly. Previously we had to do `import type { ReplayPlugin } from 'rrweb/dist/types';` now we can do `import type { ReplayPlugin } from 'rrweb';`

.changeset/eleven-toys-vanish.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/serious-eggs-greet.md

@@ -0,0 +1,2 @@
+---
+---

.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/dist
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

.eslintrc.js

@@ -1,3 +1,4 @@
+// TODO: add .eslintignore. More info: https://bobbyhadz.com/blog/typescript-parseroptions-project-has-been-set-for
 module.exports = {
   env: {
     browser: true,
@@ -16,7 +17,7 @@ module.exports = {
     ecmaVersion: 'latest',
     sourceType: 'module',
     tsconfigRootDir: __dirname,
-    project: ['./tsconfig.eslint.json', './packages/*/tsconfig.json'],
+    project: ['./tsconfig.eslint.json', './packages/**/tsconfig.json'],
   },
   plugins: ['@typescript-eslint', 'eslint-plugin-tsdoc', 'jest', 'compat'],
   rules: {

.github/workflows/ci-cd.yml

@@ -33,13 +33,14 @@ jobs:
         run: NODE_OPTIONS='--max-old-space-size=4096' yarn build:all
 
       - name: Check types
-        run: yarn turbo run check-types
+        run: yarn check-types
 
       - name: Run tests
+        # run: PUPPETEER_EXECUTABLE_PATH=${{ steps.setup-chrome.outputs.chrome-path }} PUPPETEER_HEADLESS=true xvfb-run --server-args="-screen 0 1920x1080x24" yarn test
         run: PUPPETEER_HEADLESS=true xvfb-run --server-args="-screen 0 1920x1080x24" yarn test
 
       - name: Upload diff images to GitHub
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         if: failure()
         with:
           name: image-diff
@@ -70,11 +71,11 @@ jobs:
 
       - name: Build Tarballs
         env:
-          NODE_OPTIONS: "--max_old_space_size=4096"
+          NODE_OPTIONS: '--max_old_space_size=4096'
         run: yarn build:tarball
 
       - name: Upload Artifacts
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: ${{ github.sha }}
           path: |

.github/workflows/style-check.yml

@@ -8,7 +8,7 @@ jobs:
     name: ESLint Check and Report Upload
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           repository: ${{ github.event.pull_request.head.repo.full_name }}
           ref: ${{ github.head_ref }}
@@ -28,7 +28,7 @@ jobs:
         # Continue to the next step even if this fails
         continue-on-error: true
       - name: Upload ESLint Report
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: eslint_report.json
           path: eslint_report.json
@@ -93,3 +93,4 @@ jobs:
         with:
           commit_message: Apply formatting changes
           branch: ${{ github.head_ref }}
+          file_pattern: ':!packages/rrweb-player/.svelte-kit/ambient.d.ts'

.gitignore

@@ -13,18 +13,29 @@ temp
 
 .DS_Store
 
+# output of `yarn build`
 build
 dist
 
+# turbo cache
 .turbo
 
+# needed to store puppeteer binaries
+.cache/*
+!.gitkeep
+
 # emacs working files end in a tilde
 *~
 
 # `.yarn/install-state.gz` is an optimization file that you shouldn't ever have to commit. 
 # It simply stores the exact state of your project so that the next commands can boot without having to resolve your workspaces all over again.
 .yarn/install-state.gz
 
+# TBD if we need these still, probably for 3.8
 typings
 typings-ts3.8
 dist-ts3.8
+
+# for vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

.prettierignore

@@ -105,3 +105,8 @@
 .changeset/witty-kids-talk.md
 .changeset/yellow-mails-cheat.md
 .changeset/young-timers-grow.md
+
+# files generated by svelte-kit
+packages/rrweb-player/.svelte-kit/generated/*
+packages/rrweb-player/.svelte-kit/ambient.d.ts
+packages/rrweb-player/.svelte-kit/non-ambient.d.ts

.puppeteerrc.cjs

@@ -0,0 +1,10 @@
+const { join } = require('path');
+
+/**
+ * @type {import("puppeteer").Configuration}
+ */
+module.exports = {
+  // Changes the cache location for Puppeteer.
+  cacheDirectory: join(__dirname, '.cache', 'puppeteer'),
+  browserRevision: '115.0.5763.0',
+};

.vscode/rrweb-monorepo.code-workspace

@@ -24,18 +24,76 @@
       "name": "rrweb-snapshot (package)",
       "path": "../packages/rrweb-snapshot"
     },
+    {
+      "name": "@rrweb/all",
+      "path": "../packages/all"
+    },
+    {
+      "name": "@rrweb/record",
+      "path": "../packages/record"
+    },
+    {
+      "name": "@rrweb/replay",
+      "path": "../packages/replay"
+    },
+    {
+      "name": "@rrweb/types",
+      "path": "../packages/types"
+    },
+    {
+      "name": "@rrweb/packer",
+      "path": "../packages/packer"
+    },
     {
       "name": "web-extension (package)",
       "path": "../packages/web-extension"
     },
     { "name": "rrvideo (package)", "path": "../packages/rrvideo" },
-    { "name": "@rrweb/types", "path": "../packages/types" }
+    {
+      "name": "@rrweb/rrweb-plugin-console-record",
+      "path": "../packages/plugins/rrweb-plugin-console-record"
+    },
+    {
+      "name": "@rrweb/rrweb-plugin-console-replay",
+      "path": "../packages/plugins/rrweb-plugin-console-replay"
+    },
+    {
+      "name": "@rrweb/rrweb-plugin-sequential-id-record",
+      "path": "../packages/plugins/rrweb-plugin-sequential-id-record"
+    },
+    {
+      "name": "@rrweb/rrweb-plugin-sequential-id-replay",
+      "path": "../packages/plugins/rrweb-plugin-sequential-id-replay"
+    },
+    {
+      "name": "@rrweb/rrweb-plugin-canvas-webrtc-record",
+      "path": "../packages/plugins/rrweb-plugin-canvas-webrtc-record"
+    },
+    {
+      "name": "@rrweb/rrweb-plugin-canvas-webrtc-replay",
+      "path": "../packages/plugins/rrweb-plugin-canvas-webrtc-replay"
+    }
   ],
   "settings": {
+    "vitest.workspaceConfig": "../vitest.workspace.ts",
+    "vitest.commandLine": "yarn vitest",
     "jest.disabledWorkspaceFolders": [
       " rrweb monorepo",
+      "rrweb (package)",
       "rrweb-player (package)",
-      "@rrweb/types"
+      "rrweb-snapshot (package)",
+      "rrdom (package)",
+      "rrdom-nodejs (package)",
+      "@rrweb/all",
+      "@rrweb/record",
+      "@rrweb/replay",
+      "@rrweb/types",
+      "@rrweb/packer",
+      "@rrweb/rrweb-plugin-console-record",
+      "@rrweb/rrweb-plugin-console-replay",
+      "@rrweb/rrweb-plugin-sequential-id",
+      "@rrweb/rrweb-plugin-canvas-webrtc-record",
+      "@rrweb/rrweb-plugin-canvas-webrtc-replay"
     ]
   }
 }

CONTRIBUTING.md

@@ -27,8 +27,10 @@ clear and has sufficient instructions to be able to reproduce the issue.
 ## Run locally
 
 - Install dependencies: `yarn`
-- Run recorder on a website: `yarn repl`
-- Run a cobrowsing/mirroring session locally: `yarn live-stream`
+- Build all packages: (in `/`) `yarn build:all` or `yarn dev`
+- Run recorder on a website: (in `/packages/rrweb`) `yarn repl`
+- Run a cobrowsing/mirroring session locally: (in `/packages/rrweb`) `yarn live-stream`
+- Build individual packages: `yarn build` or `yarn dev`
 - Test: `yarn test` or `yarn test:watch`
 - Lint: `yarn lint`
 - Rewrite files with prettier: `yarn format` or `yarn format:head`

README.md

@@ -14,6 +14,8 @@ From this monorepo, Sentry maintains and publishes the following NPM packages:
 - `@sentry-internal/rrdom` (corresponds to the [original `rrdom` package](https://www.npmjs.com/package/rrdom))
 - `@sentry-internal/rrweb-player` (corresponds to the [original `rrweb-player` package](https://www.npmjs.com/package/rrweb-player))
 - `@sentry-internal/rrweb-snapshot` (corresponds to the [original `rrweb-snapshot` package](https://www.npmjs.com/package/rrweb-snapshot))
+- `@sentry-internal/rrweb-types` (corresponds to the [original `@rrweb/types` package](https://www.npmjs.com/package/@rrweb/types))
+- `@sentry-internal/rrweb-worker` (new package)
 
 ## Major changes from upstream branch
 
@@ -42,8 +44,8 @@ Apart from some small fixes/changes in this fork, these are the main relevant ch
 
 [![Join the chat at slack](https://img.shields.io/badge/[email protected]?logo=slack)](https://join.slack.com/t/rrweb/shared_invite/zt-siwoc6hx-uWay3s2wyG8t5GpZVb8rWg)
 [![Twitter Follow](https://img.shields.io/badge/twitter-@rrweb__io-teal.svg?logo=twitter)](https://twitter.com/rrweb_io)
-![total gzip size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.js?compression=gzip&label=total%20gzip%20size)
-![recorder gzip size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/rrweb@latest/dist/record/rrweb-record.min.js?compression=gzip&label=recorder%20gzip%20size)
+![total gzip size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.cjs?compression=gzip&label=total%20gzip%20size)
+![recorder gzip size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/rrweb@latest/dist/record/rrweb-record.min.cjs?compression=gzip&label=recorder%20gzip%20size)
 [![](https://data.jsdelivr.com/v1/package/npm/rrweb/badge)](https://www.jsdelivr.com/package/npm/rrweb)
 
 [中文文档](./README.zh_CN.md)
@@ -70,9 +72,7 @@ rrweb is mainly composed of 3 parts:
 
 ## Roadmap
 
-- rrdom: an ad-hoc DOM for rrweb session data [#419](https://github.com/rrweb-io/rrweb/issues/419)
 - storage engine: do deduplication on a large number of rrweb sessions
-- more end-to-end tests
 - compact mutation data in common patterns
 - provide plugins via the new plugin API, including:
   - XHR plugin
@@ -197,7 +197,7 @@ In addition to adding integration tests and unit tests, rrweb also provides a RE
       </a>
     </td>
     <td align="center">
-      <a href="https://github.com/Juice10">
+      <a href="https://github.com/juice10">
         <img
           src="https://avatars.githubusercontent.com/u/4106?s=100"
           width="100px;"
@@ -230,15 +230,15 @@ In addition to adding integration tests and unit tests, rrweb also provides a RE
       </a>
     </td>
     <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 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://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 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">