From 24c23bfed47f7cfda9766df6c25b5d485599954b Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 26 Nov 2024 14:23:33 +0100 Subject: [PATCH] Merge pull request #29710 from storybookjs/yann/support-vite-6 Frameworks: Add Vite 6 support (cherry picked from commit 8e5be14c49a2b42ee473b79cfd6b78858ca2e172) --- code/addons/test/src/vitest-plugin/index.ts | 11 ++++++++++- code/builders/builder-vite/package.json | 2 +- code/builders/builder-vite/src/vite-config.test.ts | 1 + code/builders/builder-vite/src/vite-config.ts | 6 ++++-- .../frameworks/experimental-nextjs-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 | 12 ++++++------ 10 files changed, 27 insertions(+), 15 deletions(-) diff --git a/code/addons/test/src/vitest-plugin/index.ts b/code/addons/test/src/vitest-plugin/index.ts index ac2c65b4f860..5b7d1e135e93 100644 --- a/code/addons/test/src/vitest-plugin/index.ts +++ b/code/addons/test/src/vitest-plugin/index.ts @@ -105,9 +105,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/package.json b/code/builders/builder-vite/package.json index b05e67fa4716..371fe10bbcc7 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/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 2ab46f81de8c..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 } = 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,7 +69,7 @@ export async function commonConfig( base: './', plugins: await pluginConfig(options), resolve: { - conditions: ['storybook', 'stories', 'test'], + conditions: ['storybook', 'stories', 'test', ...defaultClientConditions], preserveSymlinks: isPreservingSymlinks(), alias: { assert: require.resolve('browser-assert'), diff --git a/code/frameworks/experimental-nextjs-vite/package.json b/code/frameworks/experimental-nextjs-vite/package.json index 44466f2a5f2e..97a5c3ab0c21 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-vite/package.json b/code/frameworks/react-vite/package.json index f3861e9b2608..3100d4d892fb 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 09483ba1cc03..36ecd7bbeb65 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 aee3e6ab83f4..a86fea331414 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 d3b20d89759e..d51ca75ccef2 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 e1e142315e83..4dcf7bfe370f 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5997,7 +5997,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 @@ -6483,7 +6483,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 @@ -6940,7 +6940,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 @@ -7237,7 +7237,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 @@ -7296,7 +7296,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 @@ -7391,7 +7391,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