From b09b1a68d1966eafa0cfcac5475ed7b7510b4994 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Thu, 8 Dec 2022 22:32:00 +0100 Subject: [PATCH 1/6] fix sveltekit repro templates to support new args --- code/lib/cli/src/repro-templates.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/lib/cli/src/repro-templates.ts b/code/lib/cli/src/repro-templates.ts index a3b36ed04e5..bede75a14a5 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', From e97b81f4f2197dd8e2c45dee97e7c7d27a489e2d Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Thu, 8 Dec 2022 23:17:16 +0100 Subject: [PATCH 2/6] remove new sveltekit vite plugin --- code/frameworks/sveltekit/src/preset.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/code/frameworks/sveltekit/src/preset.ts b/code/frameworks/sveltekit/src/preset.ts index 2719f02b7b5..939b67261d7 100644 --- a/code/frameworks/sveltekit/src/preset.ts +++ b/code/frameworks/sveltekit/src/preset.ts @@ -15,7 +15,12 @@ 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-middleware', + ]); return { ...baseConfig, plugins }; }; From ad2232c26b554076e25effc295717acb521160dc Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Thu, 8 Dec 2022 23:19:37 +0100 Subject: [PATCH 3/6] svelte-vite error on sveltekit instead of warn --- code/frameworks/svelte-vite/src/preset.ts | 5 ++-- code/frameworks/svelte-vite/src/utils.ts | 34 ++++++++--------------- 2 files changed, 14 insertions(+), 25 deletions(-) diff --git a/code/frameworks/svelte-vite/src/preset.ts b/code/frameworks/svelte-vite/src/preset.ts index 669473bfa35..e14062debeb 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 5d6e3b21d6b..f44a6aa63ba 100644 --- a/code/frameworks/svelte-vite/src/utils.ts +++ b/code/frameworks/svelte-vite/src/utils.ts @@ -1,6 +1,4 @@ import type { PluginOption } from 'vite'; -import { deprecate } from '@storybook/node-logger'; -import { withoutVitePlugins } from '@storybook/builder-vite'; import type { Options } from '@storybook/types'; function checkName(plugin: PluginOption, name: string) { @@ -23,32 +21,24 @@ 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; - } + if (hasPlugin(plugins, 'vite-plugin-svelte-kit') && framework !== '@storybook/sveltekit') { + throw new Error(` + 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 - // 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']); + See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#sveltekit-needs-the-storybooksveltekit-framework + `); + } } From ae25de1f3cd141dee32644a9d60688d5042405e6 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 9 Dec 2022 12:37:13 +0100 Subject: [PATCH 4/6] also disable vite-plugin-sveltekit-build --- code/frameworks/sveltekit/src/preset.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/code/frameworks/sveltekit/src/preset.ts b/code/frameworks/sveltekit/src/preset.ts index 939b67261d7..d5650f52cb6 100644 --- a/code/frameworks/sveltekit/src/preset.ts +++ b/code/frameworks/sveltekit/src/preset.ts @@ -19,6 +19,7 @@ export const viteFinal: NonNullable = async (confi // 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', ]); From ace93e17fea79871b5154d6058d7bf0d3a5a7b6b Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 9 Dec 2022 12:42:36 +0100 Subject: [PATCH 5/6] detect new sveltekit plugins in svelte-vite --- code/frameworks/svelte-vite/src/utils.ts | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/code/frameworks/svelte-vite/src/utils.ts b/code/frameworks/svelte-vite/src/utils.ts index f44a6aa63ba..50e8e82083c 100644 --- a/code/frameworks/svelte-vite/src/utils.ts +++ b/code/frameworks/svelte-vite/src/utils.ts @@ -30,8 +30,14 @@ export async function handleSvelteKit(plugins: PluginOption[], options: Options) const frameworkPreset = await options.presets.apply('framework', {}, options); const framework = typeof frameworkPreset === 'string' ? frameworkPreset : frameworkPreset.name; - if (hasPlugin(plugins, 'vite-plugin-svelte-kit') && framework !== '@storybook/sveltekit') { - throw new Error(` + const hasSvelteKitPlugins = + hasPlugin(plugins, 'vite-plugin-svelte-kit') || + hasPlugin(plugins, 'vite-plugin-sveltekit-build') || + hasPlugin(plugins, 'vite-plugin-sveltekit-middleware'); + + if (hasSvelteKitPlugins && framework !== '@storybook/sveltekit') { + throw new Error( + ` 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 @@ -39,6 +45,7 @@ export async function handleSvelteKit(plugins: PluginOption[], options: Options) npx sb@next automigrate sveltekitFramework See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#sveltekit-needs-the-storybooksveltekit-framework - `); + ` + ); } } From c8914eff8736ee993db3a010b301a4faf0d7f774 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 9 Dec 2022 12:51:55 +0100 Subject: [PATCH 6/6] log error message instead of throwing --- code/frameworks/svelte-vite/package.json | 1 + code/frameworks/svelte-vite/src/utils.ts | 7 +++++-- code/yarn.lock | 1 + 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index 245eb6181b0..2acdf728773 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/utils.ts b/code/frameworks/svelte-vite/src/utils.ts index 50e8e82083c..b87e98f888e 100644 --- a/code/frameworks/svelte-vite/src/utils.ts +++ b/code/frameworks/svelte-vite/src/utils.ts @@ -1,5 +1,7 @@ import type { PluginOption } from '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; @@ -36,8 +38,8 @@ export async function handleSvelteKit(plugins: PluginOption[], options: Options) hasPlugin(plugins, 'vite-plugin-sveltekit-middleware'); if (hasSvelteKitPlugins && framework !== '@storybook/sveltekit') { - throw new Error( - ` + 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 @@ -47,5 +49,6 @@ export async function handleSvelteKit(plugins: PluginOption[], options: Options) See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#sveltekit-needs-the-storybooksveltekit-framework ` ); + throw new Error(); } } diff --git a/code/yarn.lock b/code/yarn.lock index ffa44e77778..3f834001ffc 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: