fix(rrweb-player): resolve Svelte browser runtime

.changeset/fix-rrweb-player-browser-runtime.md

@@ -0,0 +1,5 @@
+---
+"rrweb-player": patch
+---
+
+Fix the rrweb-player production build so Svelte lifecycle APIs resolve to the browser runtime and the generated dist creates the Replayer/controller correctly.

packages/rrweb-player/package.json

@@ -16,7 +16,8 @@
     "svelte-preprocess": "^5.0.3",
     "svelte2tsx": "^0.7.30",
     "tslib": "^2.0.0",
-    "vite": "^6.0.1"
+    "vite": "^6.0.1",
+    "vitest": "^1.4.0"
   },
   "dependencies": {
     "@tsconfig/svelte": "^1.0.0",
@@ -26,6 +27,7 @@
   "scripts": {
     "dev": "vite build --watch",
     "build": "vite build",
+    "test": "vitest run",
     "prepublishOnly": "yarn build",
     "start": "vite",
     "check-types": "svelte-check --tsconfig ./tsconfig.json",

packages/rrweb-player/test/vite-config.test.ts

@@ -0,0 +1,30 @@
+import path from 'node:path';
+import { describe, expect, it } from 'vitest';
+import { loadConfigFromFile, resolveConfig } from 'vite';
+
+describe('rrweb-player Vite config', () => {
+  it('resolves Svelte lifecycle APIs to the browser runtime', async () => {
+    const configPath = path.resolve(__dirname, '../vite.config.ts');
+    const loaded = await loadConfigFromFile(
+      { command: 'build', mode: 'production' },
+      configPath,
+    );
+
+    expect(loaded).toBeTruthy();
+
+    const resolvedConfig = await resolveConfig(
+      loaded!.config,
+      'build',
+      'production',
+    );
+    const resolve = resolvedConfig.createResolver({ asSrc: false });
+    const svelteRuntime = await resolve(
+      'svelte',
+      path.resolve(__dirname, '../src/Player.svelte'),
+    );
+
+    expect(svelteRuntime?.replaceAll(path.sep, '/')).toContain(
+      '/svelte/src/runtime/index.js',
+    );
+  });
+});

packages/rrweb-player/vite.config.ts

@@ -1,6 +1,6 @@
 import path from 'path';
 import glob from 'fast-glob';
-import { Plugin } from 'vite';
+import { defineConfig, mergeConfig, Plugin } from 'vite';
 import config from '../../vite.config.default';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
 import sveltePreprocess from 'svelte-preprocess';
@@ -30,6 +30,7 @@ async function generateDts(inputPath: string) {
 function viteSvelteDts(): Plugin {
   return {
     name: 'vite-plugin-svelte-dts',
+    apply: 'build',
     async buildStart(options) {
       console.log('Generating .d.ts files for Svelte components...');
 
@@ -60,11 +61,21 @@ function viteSvelteDts(): Plugin {
   };
 }
 
-export default config(path.resolve(__dirname, 'src/main.ts'), 'rrwebPlayer', {
-  plugins: [
-    viteSvelteDts(),
-    svelte({
-      preprocess: [sveltePreprocess({ typescript: true })],
-    }),
-  ],
+const sveltePlugins = svelte({
+  preprocess: [sveltePreprocess({ typescript: true })],
+}) as Plugin[];
+
+const baseConfig = config(path.resolve(__dirname, 'src/main.ts'), 'rrwebPlayer', {
+  plugins: [viteSvelteDts(), ...sveltePlugins],
 });
+
+export default defineConfig((env) =>
+  mergeConfig(
+    typeof baseConfig === 'function' ? baseConfig(env) : baseConfig,
+    {
+      resolve: {
+        conditions: ['browser'],
+      },
+    },
+  ),
+);