From fc102a90cc85fba0530061dbde652ffca3e100bc Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 26 Nov 2024 11:25:46 +0100 Subject: [PATCH 1/3] Frameworks: Add Vite 6 support --- code/builders/builder-vite/package.json | 2 +- .../experimental-nextjs-vite/package.json | 2 +- code/frameworks/react-native-web-vite/package.json | 2 +- code/frameworks/react-vite/package.json | 2 +- code/frameworks/svelte-vite/package.json | 2 +- code/frameworks/sveltekit/package.json | 2 +- code/frameworks/vue3-vite/package.json | 2 +- code/yarn.lock | 14 +++++++------- 8 files changed, 14 insertions(+), 14 deletions(-) diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index b69d9f3ecfb1..15b210dcf24e 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -61,7 +61,7 @@ }, "peerDependencies": { "storybook": "workspace:^", - "vite": "^4.0.0 || ^5.0.0" + "vite": "^4.0.0 || ^5.0.0 || ^6.0.0" }, "publishConfig": { "access": "public" diff --git a/code/frameworks/experimental-nextjs-vite/package.json b/code/frameworks/experimental-nextjs-vite/package.json index 17b6bda9bfd3..12f77a09cdf4 100644 --- a/code/frameworks/experimental-nextjs-vite/package.json +++ b/code/frameworks/experimental-nextjs-vite/package.json @@ -112,7 +112,7 @@ "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", "storybook": "workspace:^", - "vite": "^5.0.0" + "vite": "^5.0.0 || ^6.0.0" }, "peerDependenciesMeta": { "typescript": { diff --git a/code/frameworks/react-native-web-vite/package.json b/code/frameworks/react-native-web-vite/package.json index 01c75647ee4b..a55da9586272 100644 --- a/code/frameworks/react-native-web-vite/package.json +++ b/code/frameworks/react-native-web-vite/package.json @@ -69,7 +69,7 @@ "react-native": ">=0.74.5", "react-native-web": "^0.19.12", "storybook": "workspace:^", - "vite": "^5.0.0" + "vite": "^5.0.0 || ^6.0.0" }, "engines": { "node": ">=18.0.0" diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index 5aff664d1d31..a484c182b8b2 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -66,7 +66,7 @@ "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", "storybook": "workspace:^", - "vite": "^4.0.0 || ^5.0.0" + "vite": "^4.0.0 || ^5.0.0 || ^6.0.0" }, "engines": { "node": ">=18.0.0" diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index 35b31e47e780..6b0fbd677c0f 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -67,7 +67,7 @@ "@sveltejs/vite-plugin-svelte": "^2.0.0 || ^3.0.0 || ^4.0.0", "storybook": "workspace:^", "svelte": "^4.0.0 || ^5.0.0", - "vite": "^4.0.0 || ^5.0.0" + "vite": "^4.0.0 || ^5.0.0 || ^6.0.0" }, "engines": { "node": ">=18.0.0" diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index 81e1390582d2..4b82517808e6 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -71,7 +71,7 @@ "peerDependencies": { "storybook": "workspace:^", "svelte": "^4.0.0 || ^5.0.0", - "vite": "^4.0.0 || ^5.0.0" + "vite": "^4.0.0 || ^5.0.0 || ^6.0.0" }, "engines": { "node": ">=18.0.0" diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index 8f676ca4d931..d1deeb36b59b 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -68,7 +68,7 @@ }, "peerDependencies": { "storybook": "workspace:^", - "vite": "^4.0.0 || ^5.0.0" + "vite": "^4.0.0 || ^5.0.0 || ^6.0.0" }, "engines": { "node": ">=18.0.0" diff --git a/code/yarn.lock b/code/yarn.lock index 107c541a4cdb..12d9bf6dcc86 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6172,7 +6172,7 @@ __metadata: vite: "npm:^4.0.4" peerDependencies: storybook: "workspace:^" - vite: ^4.0.0 || ^5.0.0 + vite: ^4.0.0 || ^5.0.0 || ^6.0.0 languageName: unknown linkType: soft @@ -6658,7 +6658,7 @@ __metadata: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta storybook: "workspace:^" - vite: ^5.0.0 + vite: ^5.0.0 || ^6.0.0 dependenciesMeta: sharp: optional: true @@ -7112,7 +7112,7 @@ __metadata: react-native: ">=0.74.5" react-native-web: ^0.19.12 storybook: "workspace:^" - vite: ^5.0.0 + vite: ^5.0.0 || ^6.0.0 languageName: unknown linkType: soft @@ -7136,7 +7136,7 @@ __metadata: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta storybook: "workspace:^" - vite: ^4.0.0 || ^5.0.0 + vite: ^4.0.0 || ^5.0.0 || ^6.0.0 languageName: unknown linkType: soft @@ -7433,7 +7433,7 @@ __metadata: "@sveltejs/vite-plugin-svelte": ^2.0.0 || ^3.0.0 || ^4.0.0 storybook: "workspace:^" svelte: ^4.0.0 || ^5.0.0 - vite: ^4.0.0 || ^5.0.0 + vite: ^4.0.0 || ^5.0.0 || ^6.0.0 languageName: unknown linkType: soft @@ -7492,7 +7492,7 @@ __metadata: peerDependencies: storybook: "workspace:^" svelte: ^4.0.0 || ^5.0.0 - vite: ^4.0.0 || ^5.0.0 + vite: ^4.0.0 || ^5.0.0 || ^6.0.0 languageName: unknown linkType: soft @@ -7587,7 +7587,7 @@ __metadata: vue-docgen-api: "npm:^4.75.1" peerDependencies: storybook: "workspace:^" - vite: ^4.0.0 || ^5.0.0 + vite: ^4.0.0 || ^5.0.0 || ^6.0.0 languageName: unknown linkType: soft From bf59285b729bbb9e943420b7ba371182dc9de65b Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 26 Nov 2024 11:30:48 +0100 Subject: [PATCH 2/3] add new resolved configs --- code/builders/builder-vite/src/vite-config.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/code/builders/builder-vite/src/vite-config.ts b/code/builders/builder-vite/src/vite-config.ts index 2ab46f81de8c..506683b52330 100644 --- a/code/builders/builder-vite/src/vite-config.ts +++ b/code/builders/builder-vite/src/vite-config.ts @@ -47,7 +47,7 @@ export async function commonConfig( _type: PluginConfigType ): Promise { const configEnv = _type === 'development' ? configEnvServe : configEnvBuild; - const { loadConfigFromFile, mergeConfig } = await import('vite'); + const { loadConfigFromFile, mergeConfig, ...restViteConfig } = await import('vite'); const { viteConfigPath } = await getBuilderOptions(options); @@ -67,7 +67,13 @@ export async function commonConfig( base: './', plugins: await pluginConfig(options), resolve: { - conditions: ['storybook', 'stories', 'test'], + conditions: [ + 'storybook', + 'stories', + 'test', + // @ts-expect-error this property only exists in Vite 6 + ...(restViteConfig.defaultClientConditions || []), + ], preserveSymlinks: isPreservingSymlinks(), alias: { assert: require.resolve('browser-assert'), From 27a47e866f9942bb75e2dea4204c3ce4672bb3e1 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 26 Nov 2024 13:57:27 +0100 Subject: [PATCH 3/3] add client conditions from Vite 6 --- code/addons/test/src/vitest-plugin/index.ts | 11 ++++++++++- code/builders/builder-vite/src/vite-config.test.ts | 1 + code/builders/builder-vite/src/vite-config.ts | 12 ++++-------- 3 files changed, 15 insertions(+), 9 deletions(-) diff --git a/code/addons/test/src/vitest-plugin/index.ts b/code/addons/test/src/vitest-plugin/index.ts index 08f2a3b07cb4..b93eed96ddcf 100644 --- a/code/addons/test/src/vitest-plugin/index.ts +++ b/code/addons/test/src/vitest-plugin/index.ts @@ -108,9 +108,18 @@ export const storybookTest = (options?: UserOptions): Plugin => { config.test.browser.screenshotFailures ??= false; } + // copying straight from https://github.com/vitejs/vite/blob/main/packages/vite/src/node/constants.ts#L60 + // to avoid having to maintain Vite as a dependency just for this + const viteDefaultClientConditions = ['module', 'browser', 'development|production']; + config.resolve ??= {}; config.resolve.conditions ??= []; - config.resolve.conditions.push('storybook', 'stories', 'test'); + config.resolve.conditions.push( + 'storybook', + 'stories', + 'test', + ...viteDefaultClientConditions + ); config.test.setupFiles ??= []; if (typeof config.test.setupFiles === 'string') { diff --git a/code/builders/builder-vite/src/vite-config.test.ts b/code/builders/builder-vite/src/vite-config.test.ts index d88da0305397..973746cfbbe6 100644 --- a/code/builders/builder-vite/src/vite-config.test.ts +++ b/code/builders/builder-vite/src/vite-config.test.ts @@ -10,6 +10,7 @@ import { commonConfig } from './vite-config'; vi.mock('vite', async (importOriginal) => ({ ...(await importOriginal()), loadConfigFromFile: vi.fn(async () => ({})), + defaultClientConditions: undefined, })); const loadConfigFromFileMock = vi.mocked(loadConfigFromFile); diff --git a/code/builders/builder-vite/src/vite-config.ts b/code/builders/builder-vite/src/vite-config.ts index 506683b52330..8983dfc137b3 100644 --- a/code/builders/builder-vite/src/vite-config.ts +++ b/code/builders/builder-vite/src/vite-config.ts @@ -47,7 +47,9 @@ export async function commonConfig( _type: PluginConfigType ): Promise { const configEnv = _type === 'development' ? configEnvServe : configEnvBuild; - const { loadConfigFromFile, mergeConfig, ...restViteConfig } = await import('vite'); + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore this property only exists in Vite 6 + const { loadConfigFromFile, mergeConfig, defaultClientConditions = [] } = await import('vite'); const { viteConfigPath } = await getBuilderOptions(options); @@ -67,13 +69,7 @@ export async function commonConfig( base: './', plugins: await pluginConfig(options), resolve: { - conditions: [ - 'storybook', - 'stories', - 'test', - // @ts-expect-error this property only exists in Vite 6 - ...(restViteConfig.defaultClientConditions || []), - ], + conditions: ['storybook', 'stories', 'test', ...defaultClientConditions], preserveSymlinks: isPreservingSymlinks(), alias: { assert: require.resolve('browser-assert'),