diff --git a/.changeset/fix-rrweb-player-browser-runtime.md b/.changeset/fix-rrweb-player-browser-runtime.md new file mode 100644 index 0000000000..36e2943ac1 --- /dev/null +++ b/.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. diff --git a/packages/rrweb-player/package.json b/packages/rrweb-player/package.json index 2f97178987..0133c52645 100644 --- a/packages/rrweb-player/package.json +++ b/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", diff --git a/packages/rrweb-player/test/vite-config.test.ts b/packages/rrweb-player/test/vite-config.test.ts new file mode 100644 index 0000000000..1f5115ecbc --- /dev/null +++ b/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', + ); + }); +}); diff --git a/packages/rrweb-player/vite.config.ts b/packages/rrweb-player/vite.config.ts index db4f4cf9d3..3a8197d3f0 100644 --- a/packages/rrweb-player/vite.config.ts +++ b/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'], + }, + }, + ), +);