Chore: Migrate build to vite (#1033)

* Chore: Add move most types from rrweb to @rrweb/types package * Split off type imports * Split off type import to its own line * Get vite to generate type definitions * Apply formatting changes * noEmit not allowed in tsconfig, moved it to build step * Migrate rrdom-nodejs build to vite * Apply formatting changes * Migrate rrweb-snapshot to vite * Unify configs * Chore: Migrate rrdom to vite Turns out what we where doing by overwriting `public textContent: string | undefined` as a getter in a subclass is something that isn't allowed in typescript. Because we where using `// @ts-ignore` to hide this error our bundler chose to allow the overwrite. Vite choses to disallow the overwrite making all subclasses' `textContent` undefined. To mitigate this we're using an abstract class, which does allow sub classes to decide if they wan't to use getters or not. * Chore: Migrate rrweb to vite WIP * build:browser was removed (for now) * BREAKING: moved rrweb-plugin-console to its own npm module This removes console from rrweb-all.js * Support cjs files in startServer * Move canvas-webrtc plugin to its own package * Chore: move sequential-id plugin to its own package * Chore: Configure rrweb's vite bundling * `Id` had lowercase `d` before, making it lowercase again * Test: Move console tests to their own package * remove unused utils from rrdom * pull in latest version of master something when wrong earlier when resolving merge conflicts, this should be correct * Fix type casting issue in diff.ts * Fix typo * Fix duplicate entries in package.json and tsconfig.json * Apply formatting changes * Update dependencies in package.json files * Update dependencies to use Vite 5.2.8 in package.json files * Get tests passing for rrdom `apply virtual style rules to node` tests need to be moved to rrweb to avoid circular dependencies * Fix image loading issue in integration tests * Move pack/unpack to its own @rrweb/packer module * Get tests to work in rrdom-nodejs * Port tests in rrweb-snapshot to vitest and fix them * Fix tests for rrweb-plugin-console-record * Add @rrweb/all package * Fix publint and attw errors for rrdom and @rrweb/types * Use shared vitest.config.ts in rrweb-snapshot package * Fix publint and attw issues for rrweb-snapshot * Export `ReplayPlugin` type directly from rrweb * Fix publint and attw issues for packages * Fix publint & attw issue. I was bumping into this issue: 3729bc2a3c/docs/problems/NoResolution.md And had to choose one of these three methods described here: https://github.com/andrewbranch/example-subpath-exports-ts-compat?tab=readme-ov-file#typescript-friendly-strategies-for-packagejson-subpath-exports-compatibility And I ended up going for the method described here: 1ffe3425b0/examples/node_modules/package-json-redirects (package-json-redirects) The redirect method seemed the least invasive and most effective. * Fix publint & attw issue. I was bumping into this issue: 3729bc2a3c/docs/problems/NoResolution.md And had to choose one of these three methods described here: https://github.com/andrewbranch/example-subpath-exports-ts-compat?tab=readme-ov-file#typescript-friendly-strategies-for-packagejson-subpath-exports-compatibility And I ended up going for the method described here: 1ffe3425b0/examples/node_modules/package-json-redirects (package-json-redirects) The redirect method seemed the least invasive and most effective. * move some rrdom tests that require rrweb to rrweb package * Use pre-jest 29 syntax for snapshotting * get rrweb passing publint and attw * const enum does not work with isolated modules flag * Fix script tag type in webgl.test.ts.snap and update rrweb.umd.cjs path in webgl.test.ts * Fix paths * Move tests for console record plugin and fix bundle path * Fix tests for rrweb * pack integration tests were moved to @rrweb/all * Update rrweb bundle path in test files * Fix flaky scroll emit from test * Migrate rrweb's tests over to vitest and make them pass * Make sure benchmarks & updating tests work * Remove jest from rrweb * Fix paths * always use rrweb's own cssom * Update tsconfig.json for rrweb-plugin-sequential-id-record Fixes this error: Error: @rrweb/rrweb-plugin-sequential-id-record:prepublish: tsconfig.json(9,5): error TS6377: Cannot write file '/home/runner/work/rrweb/rrweb/tsconfig.tsbuildinfo' because it will overwrite '.tsbuildinfo' file generated by referenced project '/home/runner/work/rrweb/rrweb/packages/rrweb' * Add tsbuildinfo config to extended tsconfig files * Move rrdom over to vitest * Apply formatting changes * Update rrweb imports to use the new package structure * extend rrweb-snapshot's tsconfig from monorepo base config * extend @rrweb/types's tsconfig from monorepo base config * extend rrdom's tsconfig from monorepo base config * extend rrdom-nodejs's tsconfig from monorepo base config * extend web-extension's tsconfig from monorepo base config * unify tsconfigs * Continue when tests fail * Add stricter type checking * Add check-types global command * remove jest * Remove unused code * Add check-types command to build script * Fix linting issues * Add setup Chrome action for CI/CD workflow * Update puppeteer version in package.json for rrweb * Update Chrome setup in CI/CD workflow * Update Chrome setup in CI/CD workflow * Add Chrome setup and test cache location * Update CI/CD workflow to test chrome cache location * Add chrome installation step to CI/CD workflow * Update Puppeteer configuration for headless testing * Update dependencies and workflow configuration * Use same version of chrome on CI as is run locally * Use version of chrome that seems to work with rrdom tests * Try using puppeteerrc to define chrome version * Add .cache directory to .gitignore * Move global flag to vitest config * Update puppeteer version to 20.9.0 * Update console log messages in rrweb-plugin-console-record for new puppeteer version * Remove redundant Chrome setup from CI/CD workflow * Add minification and umd for all built files * Update import paths for rrweb dist files * Add @rrweb/replay and @rrweb/record * Add script to lint packages * Apply formatting changes * exclude styles export from typescript package type checking * WIP Move rrweb-player over to vite * Apply formatting changes * chore: Update rrweb plugin import paths * Remove rollup from rrweb-player * Fix typing issues * Fix typing issues * chore: Update rrweb-player to use vite for build process * Apply formatting changes * chore: Export Player class in rrweb-player/src/main.ts Makes attw happy * Apply formatting changes * Gets wiped by yarn workspaces-to-typescript-project-references * Add .eslintignore and .eslintrc.cjs files for rrweb-player package * Apply formatting changes * Update dependencies in rrweb-player/package.json * Apply formatting changes * chore: Update eslint configuration for rrweb-player package * Apply formatting changes * chore: Remove unused files from rrweb-player package * Apply formatting changes * chore: Update rrweb-player import path to use rrweb-player.cjs * chore: Update addEventListener signature in rrweb-player * Apply formatting changes * Add .eslintignore and update .gitignore files for to root * Apply formatting changes * Update documentation * Update @rrweb/types package description * Apply formatting changes * Update build and run commands in CONTRIBUTING.md * Apply formatting changes * Update package versions to 2.0.0-alpha.13 * Apply formatting changes * Apply formatting changes * Fix import statement in media/index.ts * Apply formatting changes * chore: Update .gitignore to exclude build and dist directories * Apply formatting changes * Apply formatting changes * Migrate setTimeout to vitest * Apply formatting changes * Apply formatting changes * Fix isNativeShadowDom function signature in utils.ts * try out jsr * Apply formatting changes * Update package versions to 2.0.0-alpha.14 * Apply formatting changes * Fix name of rrwebSnapshot object * Apply formatting changes * Remove unused lock files * Apply formatting changes * Update rrweb bundle path to use umd.cjs format * Apply formatting changes * Trigger tests to run again * Rename snapshots for vitest * Apply formatting changes * Ping CI * Apply formatting changes * Ping CI * Apply formatting changes * Ignore files generated by svelte-kit for prettier * Correct Player object
2026-04-01 12:00:00 +08:00
parent 4055c69e26
commit 5a85ddf013
266 changed files with 11616 additions and 9614 deletions
--- a/packages/all/test/cross-origin-iframe-packer.test.ts
+++ b/packages/all/test/cross-origin-iframe-packer.test.ts
@@ -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);
+      });
+    });
+  });
+});