diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index 245eb6181b0c..2acdf7287734 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -59,6 +59,7 @@ "magic-string": "^0.26.1", "svelte": "^3.0.0", "sveltedoc-parser": "^4.2.1", + "ts-dedent": "^2.2.0", "vite": "^3.0.0||^4.0.0" }, "devDependencies": { diff --git a/code/frameworks/svelte-vite/src/preset.ts b/code/frameworks/svelte-vite/src/preset.ts index 669473bfa351..e14062debeb9 100644 --- a/code/frameworks/svelte-vite/src/preset.ts +++ b/code/frameworks/svelte-vite/src/preset.ts @@ -8,7 +8,7 @@ export const core: StorybookConfig['core'] = { }; export const viteFinal: NonNullable = async (config, options) => { - let { plugins = [] } = config; + const { plugins = [] } = config; const { svelte, loadSvelteConfig } = await import('@sveltejs/vite-plugin-svelte'); const svelteOptions: Record = await options.presets.apply( 'svelteOptions', @@ -25,8 +25,7 @@ export const viteFinal: NonNullable = async (confi // Add docgen plugin plugins.push(svelteDocgen(svelteConfig)); - // temporarily support SvelteKit - plugins = await handleSvelteKit(plugins, options); + await handleSvelteKit(plugins, options); // TODO: temporary until/unless https://github.com/storybookjs/addon-svelte-csf/issues/64 is fixed // Wrapping in try-catch in case `@storybook/addon-svelte-csf is not installed diff --git a/code/frameworks/svelte-vite/src/utils.ts b/code/frameworks/svelte-vite/src/utils.ts index 5d6e3b21d6b1..b87e98f888e2 100644 --- a/code/frameworks/svelte-vite/src/utils.ts +++ b/code/frameworks/svelte-vite/src/utils.ts @@ -1,7 +1,7 @@ import type { PluginOption } from 'vite'; -import { deprecate } from '@storybook/node-logger'; -import { withoutVitePlugins } from '@storybook/builder-vite'; import type { Options } from '@storybook/types'; +import dedent from 'ts-dedent'; +import { logger } from '@storybook/node-logger'; function checkName(plugin: PluginOption, name: string) { return typeof plugin === 'object' && 'name' in plugin && plugin.name === name; @@ -23,32 +23,32 @@ export function hasPlugin(plugins: PluginOption[], name: string) { * but warns the user that they should use the sveltekit framework instead. * Should be removed when we decide to remove support completely for SvelteKit in svelte-vite */ -export async function handleSvelteKit( - plugins: PluginOption[], - options: Options -): Promise { - if (!hasPlugin(plugins, 'vite-plugin-svelte-kit')) { - // this is not a SvelteKit project ✅ - return plugins; - } - +export async function handleSvelteKit(plugins: PluginOption[], options: Options) { /* the sveltekit framework uses this svelte-vite framework under the hood - so we have to take extra care of only warning when the user is actually using + so we have to take extra care of only throwing when the user is actually using svelte-vite directly and not just through sveltekit */ - const frameworkPreset = await options.presets.apply('framework', {}, options); const framework = typeof frameworkPreset === 'string' ? frameworkPreset : frameworkPreset.name; - if (framework === '@storybook/sveltekit') { - // this uses @storybook/sveltekit, so everything is fine ✅ - return plugins; - } + const hasSvelteKitPlugins = + hasPlugin(plugins, 'vite-plugin-svelte-kit') || + hasPlugin(plugins, 'vite-plugin-sveltekit-build') || + hasPlugin(plugins, 'vite-plugin-sveltekit-middleware'); - // this is a SvelteKit project but doesn't use @storybook/sveltekit, warn user about this and remove vite-plugin-svelte-kit ❌ - deprecate( - 'SvelteKit support in @storybook/svelte-vite is deprecated in Storybook 7.0, use @storybook/sveltekit instead.' - ); - return withoutVitePlugins(plugins, ['vite-plugin-svelte-kit']); + if (hasSvelteKitPlugins && framework !== '@storybook/sveltekit') { + logger.error( + dedent` + We've detected a SvelteKit project using the @storybook/svelte-vite framework, which is not supported in Storybook 7.0 + Please use the @storybook/sveltekit framework instead. + You can migrate automatically by running + + npx sb@next automigrate sveltekitFramework + + See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#sveltekit-needs-the-storybooksveltekit-framework + ` + ); + throw new Error(); + } } diff --git a/code/frameworks/sveltekit/src/preset.ts b/code/frameworks/sveltekit/src/preset.ts index 2719f02b7b57..d5650f52cb6e 100644 --- a/code/frameworks/sveltekit/src/preset.ts +++ b/code/frameworks/sveltekit/src/preset.ts @@ -15,7 +15,13 @@ export const viteFinal: NonNullable = async (confi // Remove vite-plugin-svelte-kit from plugins if using SvelteKit // see https://github.com/storybookjs/storybook/issues/19280#issuecomment-1281204341 - plugins = withoutVitePlugins(plugins, ['vite-plugin-svelte-kit']); + plugins = withoutVitePlugins(plugins, [ + // pre @sveltejs/kit@1.0.0-next.574 + 'vite-plugin-svelte-kit', + // @sveltejs/kit@1.0.0-next.574 and later + 'vite-plugin-sveltekit-build', + 'vite-plugin-sveltekit-middleware', + ]); return { ...baseConfig, plugins }; }; diff --git a/code/lib/cli/src/repro-templates.ts b/code/lib/cli/src/repro-templates.ts index a3b36ed04e5b..bede75a14a55 100644 --- a/code/lib/cli/src/repro-templates.ts +++ b/code/lib/cli/src/repro-templates.ts @@ -238,7 +238,7 @@ export const allTemplates: Record = { inDevelopment: true, name: 'Svelte Kit (JS)', script: - 'yarn create svelte-with-args --name=svelte-kit/skeleton-js --directory=. --template=skeleton --types=null --no-prettier --no-eslint --no-playwright', + 'yarn create svelte-with-args --name=svelte-kit/skeleton-js --directory=. --template=skeleton --types=null --no-prettier --no-eslint --no-playwright --no-vitest', expected: { framework: '@storybook/sveltekit', renderer: '@storybook/svelte', @@ -249,7 +249,7 @@ export const allTemplates: Record = { inDevelopment: true, name: 'Svelte Kit (TS)', script: - 'yarn create svelte-with-args --name=svelte-kit/skeleton-ts --directory=. --template=skeleton --types=typescript --no-prettier --no-eslint --no-playwright', + 'yarn create svelte-with-args --name=svelte-kit/skeleton-ts --directory=. --template=skeleton --types=typescript --no-prettier --no-eslint --no-playwright --no-vitest', expected: { framework: '@storybook/sveltekit', renderer: '@storybook/svelte', diff --git a/code/yarn.lock b/code/yarn.lock index ffa44e777780..3f834001ffc5 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -7439,6 +7439,7 @@ __metadata: magic-string: ^0.26.1 svelte: ^3.0.0 sveltedoc-parser: ^4.2.1 + ts-dedent: ^2.2.0 typescript: ~4.9.3 vite: ^4.0.0-beta.2 peerDependencies: