Merge pull request #20181 from storybookjs/jeppe/support-new-sveltekit

SvelteKit: Support `v1.0.0-next.574` and above

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": {

code/frameworks/svelte-vite/src/preset.ts

@@ -8,7 +8,7 @@ export const core: StorybookConfig['core'] = {
 };
 
 export const viteFinal: NonNullable<StorybookConfig['viteFinal']> = async (config, options) => {
-  let { plugins = [] } = config;
+  const { plugins = [] } = config;
   const { svelte, loadSvelteConfig } = await import('@sveltejs/vite-plugin-svelte');
   const svelteOptions: Record<string, any> = await options.presets.apply(
     'svelteOptions',
@@ -25,8 +25,7 @@ export const viteFinal: NonNullable<StorybookConfig['viteFinal']> = 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

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<PluginOption[]> {
-  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();
+  }
 }

code/frameworks/sveltekit/src/preset.ts

@@ -15,7 +15,13 @@ export const viteFinal: NonNullable<StorybookConfig['viteFinal']> = 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 };
 };

code/lib/cli/src/repro-templates.ts

@@ -238,7 +238,7 @@ export const allTemplates: Record<string, Template> = {
     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<string, Template> = {
     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',

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: