Improve development tooling (#1516)

- Running `yarn build` in a `packages/*/` directory will trigger build of all dependencies too, and cache them if possible.
- Fix for `yarn dev` breaking for `rrweb` package whenever changing files in `rrweb` package
- Update typescript, turbo, vite and vite-plugin-dts
- Require `workspaces-to-typescript-project-references` from `prepublish`

packages/rrweb/package.json

@@ -16,9 +16,9 @@
     "repl": "yarn build && node scripts/repl.js",
     "live-stream": "yarn build && node scripts/stream.js",
     "dev": "vite build --watch",
-    "build": "tsc -noEmit && vite build",
+    "build": "yarn turbo run prepublish",
     "check-types": "tsc -noEmit",
-    "prepublish": "npm run build",
+    "prepublish": "tsc -noEmit && vite build",
     "lint": "yarn eslint src",
     "benchmark": "vitest run --maxConcurrency 1 --no-file-parallelism test/benchmark"
   },
@@ -74,9 +74,9 @@
     "simple-peer-light": "^9.10.0",
     "ts-node": "^10.9.1",
     "tslib": "^2.3.1",
-    "typescript": "^4.7.3",
-    "vite": "^5.2.8",
-    "vite-plugin-dts": "^3.8.1"
+    "typescript": "^5.4.5",
+    "vite": "^5.3.1",
+    "vite-plugin-dts": "^3.9.1"
   },
   "dependencies": {
     "@rrweb/types": "^2.0.0-alpha.15",

packages/rrweb/src/index.ts

@@ -17,6 +17,9 @@ export {
   type eventWithTime,
 } from '@rrweb/types';
 
+// exports style.css from replay
+import './replay/styles/style.css';
+
 export type { recordOptions, ReplayPlugin } from './types';
 
 const { addCustomEvent } = record;
@@ -27,9 +30,9 @@ export {
   addCustomEvent,
   freezePage,
   Replayer,
-  playerConfig,
-  PlayerMachineState,
-  SpeedMachineState,
+  type playerConfig,
+  type PlayerMachineState,
+  type SpeedMachineState,
   canvasMutation,
   _mirror as mirror,
   utils,

packages/rrweb/src/record/index.ts

@@ -1,7 +1,7 @@
 import {
   snapshot,
-  MaskInputOptions,
-  SlimDOMOptions,
+  type MaskInputOptions,
+  type SlimDOMOptions,
   createMirror,
 } from 'rrweb-snapshot';
 import { initObservers, mutationBuffers } from './observer';
@@ -19,14 +19,14 @@ import {
 import type { recordOptions } from '../types';
 import {
   EventType,
-  eventWithoutTime,
-  eventWithTime,
+  type eventWithoutTime,
+  type eventWithTime,
   IncrementalSource,
-  listenerHandler,
-  mutationCallbackParam,
-  scrollCallback,
-  canvasMutationParam,
-  adoptedStyleSheetParam,
+  type listenerHandler,
+  type mutationCallbackParam,
+  type scrollCallback,
+  type canvasMutationParam,
+  type adoptedStyleSheetParam,
 } from '@rrweb/types';
 import type { CrossOriginIframeMessageEventContent } from '../types';
 import { IframeManager } from './iframe-manager';

packages/rrweb/src/record/observer.ts

@@ -1,5 +1,5 @@
 import {
-  MaskInputOptions,
+  type MaskInputOptions,
   maskInputValue,
   Mirror,
   getInputType,
@@ -21,12 +21,16 @@ import {
 } from '../utils';
 import type { observerParam, MutationBufferParam } from '../types';
 import {
+  IncrementalSource,
+  MouseInteractions,
+  PointerTypes,
+  MediaInteractions,
+} from '@rrweb/types';
+import type {
   mutationCallBack,
   mousemoveCallBack,
   mousePosition,
   mouseInteractionCallBack,
-  MouseInteractions,
-  PointerTypes,
   listenerHandler,
   scrollCallback,
   styleSheetRuleCallback,
@@ -34,11 +38,9 @@ import {
   inputValue,
   inputCallback,
   hookResetter,
-  IncrementalSource,
   hooksParam,
   Arguments,
   mediaInteractionCallback,
-  MediaInteractions,
   canvasMutationCallback,
   fontCallback,
   fontParam,

packages/rrweb/src/record/observers/canvas/2d.ts

@@ -1,9 +1,9 @@
 import {
-  blockClass,
+  type blockClass,
   CanvasContext,
-  canvasManagerMutationCallback,
-  IWindow,
-  listenerHandler,
+  type canvasManagerMutationCallback,
+  type IWindow,
+  type listenerHandler,
 } from '@rrweb/types';
 import { hookSetter, isBlocked, patch } from '../../../utils';
 import { serializeArgs } from './serialize-args';

packages/rrweb/src/record/observers/canvas/canvas-manager.ts

@@ -262,7 +262,6 @@ export class CanvasManager {
       win,
       blockClass,
       blockSelector,
-      this.mirror,
     );
 
     this.resetObservers = () => {

packages/rrweb/src/record/observers/canvas/webgl.ts

@@ -1,11 +1,10 @@
-import type { Mirror } from 'rrweb-snapshot';
 import {
-  blockClass,
+  type blockClass,
   CanvasContext,
-  canvasManagerMutationCallback,
-  canvasMutationWithType,
-  IWindow,
-  listenerHandler,
+  type canvasManagerMutationCallback,
+  type canvasMutationWithType,
+  type IWindow,
+  type listenerHandler,
 } from '@rrweb/types';
 import { hookSetter, isBlocked, patch } from '../../../utils';
 import { saveWebGLVar, serializeArgs } from './serialize-args';
@@ -16,7 +15,6 @@ function patchGLPrototype(
   cb: canvasManagerMutationCallback,
   blockClass: blockClass,
   blockSelector: string | null,
-  _mirror: Mirror,
   win: IWindow,
 ): listenerHandler[] {
   const handlers: listenerHandler[] = [];
@@ -93,7 +91,6 @@ export default function initCanvasWebGLMutationObserver(
   win: IWindow,
   blockClass: blockClass,
   blockSelector: string | null,
-  mirror: Mirror,
 ): listenerHandler {
   const handlers: listenerHandler[] = [];
 
@@ -104,7 +101,6 @@ export default function initCanvasWebGLMutationObserver(
       cb,
       blockClass,
       blockSelector,
-      mirror,
       win,
     ),
   );
@@ -117,7 +113,6 @@ export default function initCanvasWebGLMutationObserver(
         cb,
         blockClass,
         blockSelector,
-        mirror,
         win,
       ),
     );

packages/rrweb/src/replay/canvas/index.ts

@@ -1,9 +1,9 @@
 import type { Replayer } from '..';
 import {
   CanvasContext,
-  canvasMutationCommand,
-  canvasMutationData,
-  canvasMutationParam,
+  type canvasMutationCommand,
+  type canvasMutationData,
+  type canvasMutationParam,
 } from '@rrweb/types';
 import webglMutation from './webgl';
 import canvas2DMutation from './2d';

packages/rrweb/src/replay/canvas/webgl.ts

@@ -1,5 +1,5 @@
 import type { Replayer } from '../';
-import { CanvasContext, canvasMutationCommand } from '@rrweb/types';
+import { CanvasContext, type canvasMutationCommand } from '@rrweb/types';
 import { deserializeArg, variableListFor } from './deserialize-args';
 
 function getContext(

packages/rrweb/src/replay/index.ts

@@ -2,12 +2,12 @@ import {
   rebuild,
   buildNodeWithSN,
   NodeType,
-  BuildCache,
+  type BuildCache,
   createCache,
   Mirror,
   createMirror,
-  attributes,
-  serializedElementNodeWithId,
+  type attributes,
+  type serializedElementNodeWithId,
   toLowerCase,
 } from 'rrweb-snapshot';
 import {
@@ -41,15 +41,17 @@ import type { playerConfig, missingNodeMap } from '../types';
 import {
   EventType,
   IncrementalSource,
+  MouseInteractions,
+  ReplayerEvents,
+} from '@rrweb/types';
+import type {
   fullSnapshotEvent,
   eventWithTime,
-  MouseInteractions,
   playerMetaData,
   viewportResizeDimension,
   addedNodeMutation,
   incrementalSnapshotEvent,
   incrementalData,
-  ReplayerEvents,
   Handler,
   Emitter,
   metaEvent,
@@ -72,7 +74,7 @@ import {
   polyfill,
   queueToResolveTrees,
   iterateResolveTree,
-  AppendedIframe,
+  type AppendedIframe,
   getBaseDimension,
   hasShadowRoot,
   isSerializedIframe,
@@ -2228,4 +2230,4 @@ export class Replayer {
   }
 }
 
-export { PlayerMachineState, SpeedMachineState, playerConfig };
+export { type PlayerMachineState, type SpeedMachineState, type playerConfig };

packages/rrweb/src/replay/machine.ts

@@ -1,10 +1,15 @@
-import { createMachine, interpret, assign, StateMachine } from '@xstate/fsm';
+import {
+  createMachine,
+  interpret,
+  assign,
+  type StateMachine,
+} from '@xstate/fsm';
 import type { playerConfig } from '../types';
 import {
-  eventWithTime,
+  type eventWithTime,
   ReplayerEvents,
   EventType,
-  Emitter,
+  type Emitter,
   IncrementalSource,
 } from '@rrweb/types';
 import { Timer, addDelay } from './timer';

packages/rrweb/src/replay/media/index.ts

@@ -1,4 +1,4 @@
-import { Emitter, MediaInteractions, ReplayerEvents } from '@rrweb/types';
+import { type Emitter, MediaInteractions, ReplayerEvents } from '@rrweb/types';
 import type { RRMediaElement } from 'rrdom';
 import type { createPlayerService, createSpeedService } from '../machine';
 import type { Mirror, mediaAttributes } from 'rrweb-snapshot';

packages/rrweb/src/replay/timer.ts

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