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
2024-06-07 11:07:36 +02:00
parent 609b7fac79
commit 7261c43f60
266 changed files with 11616 additions and 9614 deletions
--- a/packages/rrweb-player/src/Controller.svelte
+++ b/packages/rrweb-player/src/Controller.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-  import { EventType } from 'rrweb';
-  import type { Replayer } from 'rrweb';
+  import { EventType } from '@rrweb/types';
  import type { playerMetaData } from '@rrweb/types';
  import type {
+    Replayer,
    PlayerMachineState,
    SpeedMachineState,
-  } from 'rrweb/typings/replay/machine';
+  } from '@rrweb/replay';
  import {
    onMount,
    onDestroy,
@@ -37,11 +37,10 @@
  }
  let speedState: 'normal' | 'skipping';
  let progress: HTMLElement;
-  let step: HTMLElement;
  let finished: boolean;

  let pauseAt: number | false = false;
-  let onPauseHook: () => unknown | undefined = undefined;
+  let onPauseHook: (() => unknown) | null = null;
  let loop: {
    start: number;
    end: number;
@@ -234,7 +233,7 @@
    }
    currentTime = timeOffset;
    pauseAt = endTimeOffset;
-    onPauseHook = afterHook;
+    onPauseHook = afterHook || null;
    replayer.play(timeOffset);
  };

@@ -254,6 +253,17 @@
    goto(timeOffset);
  };

+  const handleProgressKeydown = (event: KeyboardEvent) => { 
+    if (speedState === 'skipping') {
+      return;
+    }
+    if (event.key === 'ArrowLeft') {
+      goto(currentTime - 5);
+    } else if (event.key === 'ArrowRight') {
+      goto(currentTime + 5);
+    }
+  };
+
  export const setSpeed = (newSpeed: number) => {
    let needFreeze = playerState === 'playing';
    speed = newSpeed;
@@ -281,8 +291,8 @@
    speedState = replayer.speedService.state.value;
    replayer.on(
      'state-change',
-      (states: { player?: PlayerMachineState; speed?: SpeedMachineState }) => {
-        const { player, speed } = states;
+      (states) => {
+        const { player, speed } = states as { player?: PlayerMachineState; speed?: SpeedMachineState };
        if (player?.value && playerState !== player.value) {
          playerState = player.value;
          switch (playerState) {
@@ -428,10 +438,10 @@
        class:disabled={speedState === 'skipping'}
        bind:this={progress}
        on:click={handleProgressClick}
+        on:keydown={handleProgressKeydown}
      >
        <div
          class="rr-progress__step"
-          bind:this={step}
          style="width: {percentage}"
        />
        {#each inactivePeriods as period}
@@ -537,7 +547,6 @@
            48s-21.6 48-48 48l-224 0c-26.4 0-48-21.6-48-48l0-224c0-26.4 21.6-48
            48-48 26.4 0 48 21.6 48 48L164 792l253.6-253.6c18.4-18.4 48.8-18.4
            68 0 18.4 18.4 18.4 48.8 0 68L231.2 860z"
-            p-id="1286"
          />
        </svg>
      </button>
--- a/packages/rrweb-player/src/Player.svelte
+++ b/packages/rrweb-player/src/Player.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
  import { onMount, onDestroy } from 'svelte';
-  import { Replayer, unpack } from 'rrweb';
+  import { Replayer } from '@rrweb/replay';
+  import { unpack } from '@rrweb/packer/unpack';
  import type { eventWithTime } from '@rrweb/types';
  import {
    inlineCss,
@@ -11,19 +12,20 @@
    typeOf,
  } from './utils';
  import Controller from './Controller.svelte';
-
-  export let width = 1024;
-  export let height = 576;
-  export let maxScale = 1;
-  export let events: eventWithTime[] = [];
-  export let skipInactive = true;
-  export let autoPlay = true;
-  export let speedOption: number[] = [1, 2, 4, 8];
-  export let speed = 1;
-  export let showController = true;
-  export let tags: Record<string, string> = {};
+  import type { RRwebPlayerOptions, RRwebPlayerExpose } from './types';
+    
+  export let width: NonNullable<RRwebPlayerOptions['props']['width']>  = 1024;
+  export let height: NonNullable<RRwebPlayerOptions['props']['height']> = 576;
+  export let maxScale: NonNullable<RRwebPlayerOptions['props']['maxScale']> = 1;
+  export let events: RRwebPlayerOptions['props']['events'];
+  export let skipInactive: NonNullable<RRwebPlayerOptions['props']['skipInactive']> = true;
+  export let autoPlay: NonNullable<RRwebPlayerOptions['props']['autoPlay']> = true;
+  export let speedOption: NonNullable<RRwebPlayerOptions['props']['speedOption']> = [1, 2, 4, 8];
+  export let speed: NonNullable<RRwebPlayerOptions['props']['speed']> = 1;
+  export let showController: NonNullable<RRwebPlayerOptions['props']['showController']> = true;
+  export let tags: NonNullable<RRwebPlayerOptions['props']['tags']> = {};
  // color of inactive periods indicator
-  export let inactiveColor = '#D4D4D4';
+  export let inactiveColor: NonNullable<RRwebPlayerOptions['props']['inactiveColor']> = '#D4D4D4';

  let replayer: Replayer;

@@ -64,20 +66,20 @@
      `scale(${Math.min(...scale)})` + 'translate(-50%, -50%)';
  };

-  export const triggerResize = () => {
+  export const triggerResize: RRwebPlayerExpose['triggerResize'] = () => {
    updateScale(replayer.wrapper, {
      width: replayer.iframe.offsetWidth,
      height: replayer.iframe.offsetHeight,
    });
  };

-  export const toggleFullscreen = () => {
+  export const toggleFullscreen: RRwebPlayerExpose['toggleFullscreen'] = () => {
    if (player) {
      isFullscreen() ? exitFullscreen() : openFullscreen(player);
    }
  };

-  export const addEventListener = (
+  export const addEventListener: RRwebPlayerExpose['addEventListener'] = (
    event: string,
    handler: (detail: unknown) => unknown,
  ) => {
@@ -92,33 +94,33 @@
    }
  };

-  export const addEvent = (event: eventWithTime) => {
+  export const addEvent: RRwebPlayerExpose['addEvent'] = (event: eventWithTime) => {
    replayer.addEvent(event);
    controller.triggerUpdateMeta();
  };
-  export const getMetaData = () => replayer.getMetaData();
-  export const getReplayer = () => replayer;
+  export const getMetaData: RRwebPlayerExpose['getMetaData'] = () => replayer.getMetaData();
+  export const getReplayer: RRwebPlayerExpose['getReplayer'] = () => replayer;

  // by pass controller methods as public API
-  export const toggle = () => {
+  export const toggle: RRwebPlayerExpose['toggle'] = () => {
    controller.toggle();
  };
-  export const setSpeed = (speed: number) => {
+  export const setSpeed: RRwebPlayerExpose['setSpeed'] = (speed: number) => {
    controller.setSpeed(speed);
  };
-  export const toggleSkipInactive = () => {
+  export const toggleSkipInactive: RRwebPlayerExpose['toggleSkipInactive'] = () => {
    controller.toggleSkipInactive();
  };
-  export const play = () => {
+  export const play: RRwebPlayerExpose['play'] = () => {
    controller.play();
  };
-  export const pause = () => {
+  export const pause: RRwebPlayerExpose['pause'] = () => {
    controller.pause();
  };
-  export const goto = (timeOffset: number, play?: boolean) => {
+  export const goto: RRwebPlayerExpose['goto'] = (timeOffset: number, play?: boolean) => {
    controller.goto(timeOffset, play);
  };
-  export const playRange = (
+  export const playRange: RRwebPlayerExpose['playRange'] = (
    timeOffset: number,
    endTimeOffset: number,
    startLooping = false,
@@ -193,7 +195,7 @@
 </script>

 <style global>
-  @import 'rrweb/dist/rrweb.min.css';
+  @import '@rrweb/replay/dist/style.css';

  .rr-player {
    position: relative;
--- a/packages/rrweb-player/src/main.ts
+++ b/packages/rrweb-player/src/main.ts
@@ -1,17 +1,12 @@
-import type { eventWithTime } from '@rrweb/types';
 import _Player from './Player.svelte';
-
-type PlayerProps = {
-  events: eventWithTime[];
-};
-
-class Player extends _Player {
-  constructor(options: {
-    target: Element;
-    props: PlayerProps;
-    // for compatibility
-    data?: PlayerProps;
-  }) {
+import type { RRwebPlayerOptions } from './types';
+export class Player extends _Player {
+  constructor(
+    options: {
+      // for compatibility
+      data?: RRwebPlayerOptions['props'];
+    } & RRwebPlayerOptions,
+  ) {
    super({
      target: options.target,
      props: options.data || options.props,
--- a/packages/rrweb-player/src/types.ts
+++ b/packages/rrweb-player/src/types.ts
@@ -0,0 +1,86 @@
+import type { eventWithTime } from '@rrweb/types';
+import type { Replayer, playerConfig } from '@rrweb/replay';
+import type { Mirror } from 'rrweb-snapshot';
+
+export type RRwebPlayerOptions = {
+  target: HTMLElement;
+  props: {
+    /**
+     * The events to replay.
+     * @default `[]`
+     */
+    events: eventWithTime[];
+    /**
+     * The width of the replayer
+     * @defaultValue `1024`
+     */
+    width?: number;
+    /**
+     * The height of the replayer
+     * @defaultValue `576`
+     */
+    height?: number;
+    /**
+     * The maximum scale of the replayer (1 = 100%). Set to 0 for unlimited
+     * @defaultValue `1`
+     */
+    maxScale?: number;
+    /**
+     * Whether to autoplay
+     * @defaultValue `true`
+     */
+    autoPlay?: boolean;
+    /**
+     * The default speed to play at
+     * @defaultValue `1`
+     */
+    speed?: number;
+    /**
+     * Speed options in UI
+     * @defaultValue `[1, 2, 4, 8]`
+     */
+    speedOption?: number[];
+    /**
+     * Whether to show the controller UI
+     * @defaultValue `true`
+     */
+    showController?: boolean;
+    /**
+     * Customize the custom events style with a key-value map
+     * @defaultValue `{}`
+     */
+    tags?: Record<string, string>;
+    /**
+     * Customize the color of inactive periods indicator in the progress bar with a valid CSS color string.
+     * @defaultValue `#D4D4D4`
+     */
+    inactiveColor?: string;
+  } & Partial<playerConfig>;
+};
+
+export type RRwebPlayerExpose = {
+  addEventListener: (
+    event: string,
+    handler: (params: unknown) => unknown,
+  ) => void;
+  addEvent: (event: eventWithTime) => void;
+  getMetaData: Replayer['getMetaData'];
+  getReplayer: () => Replayer;
+  getMirror: () => Mirror;
+  // getSilly: () => void;
+  toggle: () => void;
+  setSpeed: (speed: number) => void;
+  toggleSkipInactive: () => void;
+  toggleFullscreen: () => void;
+  triggerResize: () => void;
+  $set: (options: { width: number; height: number }) => void;
+  play: () => void;
+  pause: () => void;
+  goto: (timeOffset: number, play?: boolean) => void;
+  playRange: (
+    timeOffset: number,
+    endTimeOffset: number,
+    startLooping?: boolean,
+    afterHook?: undefined | (() => void),
+  ) => void;
+};
--- a/packages/rrweb-player/src/utils.ts
+++ b/packages/rrweb-player/src/utils.ts
@@ -15,7 +15,7 @@ declare global {
  }
 }

-import { EventType, IncrementalSource } from 'rrweb';
+import { EventType, IncrementalSource } from '@rrweb/types';
 import type { eventWithTime } from '@rrweb/types';

 export function inlineCss(cssObj: Record<string, string>): string {
@@ -68,6 +68,7 @@ export function openFullscreen(el: HTMLElement): Promise<void> {
    /* IE/Edge */
    return el.msRequestFullscreen();
  }
+  return Promise.resolve();
 }

 export function exitFullscreen(): Promise<void> {
@@ -83,16 +84,19 @@ export function exitFullscreen(): Promise<void> {
    /* IE/Edge */
    return document.msExitFullscreen();
  }
+  return Promise.resolve();
 }

 export function isFullscreen(): boolean {
  let fullscreen = false;
-  [
-    'fullscreen',
-    'webkitIsFullScreen',
-    'mozFullScreen',
-    'msFullscreenElement',
-  ].forEach((fullScreenAccessor) => {
+  (
+    [
+      'fullscreen',
+      'webkitIsFullScreen',
+      'mozFullScreen',
+      'msFullscreenElement',
+    ] as const
+  ).forEach((fullScreenAccessor) => {
    if (fullScreenAccessor in document) {
      fullscreen = fullscreen || Boolean(document[fullScreenAccessor]);
    }
@@ -140,9 +144,9 @@ export function typeOf(
    '[object Undefined]': 'undefined',
    '[object Null]': 'null',
    '[object Object]': 'object',
-  };
+  } as const;
  // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access
-  return map[toString.call(obj)];
+  return map[toString.call(obj) as keyof typeof map];
 }

 /**