Vite: Add partial SvelteKit support

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

@@ -1,6 +1,7 @@
 import path from 'path';
 import fs from 'fs';
 import type { StorybookConfig } from '@storybook/builder-vite';
+import { PluginOption } from 'vite';
 import { svelteDocgen } from './plugins/svelte-docgen';
 
 export const addons: StorybookConfig['addons'] = ['@storybook/svelte'];
@@ -24,8 +25,23 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets
 
   plugins.push(svelteDocgen(config));
 
+  removeSvelteKitPlugin(plugins);
+
   return {
     ...config,
     plugins,
   };
 };
+
+const removeSvelteKitPlugin = (plugins: PluginOption[]) => {
+  plugins.forEach((plugin, index) => {
+    if (plugin && 'name' in plugin && plugin.name === 'vite-plugin-svelte-kit') {
+      // eslint-disable-next-line no-param-reassign -- we explicitly want to mutate the array as stated in Vite docs
+      plugins[index] = undefined;
+    }
+    if (Array.isArray(plugin)) {
+      // recursive, Vite plugins can be nested
+      removeSvelteKitPlugin(plugin);
+    }
+  });
+};

code/lib/builder-vite/src/vite-config.ts

@@ -88,6 +88,19 @@ export async function pluginConfig(options: ExtendedOptions) {
     mdxPlugin(options),
     injectExportOrderPlugin,
     stripStoryHMRBoundary(),
+    {
+      name: 'vite-plugin-storybook-allow-root-dir',
+      enforce: 'post',
+      config(config) {
+        // if there is NO allow list then Vite allows anything in the root directory
+        // if there is an allow list then Vite only allows anything in the listed directories
+        // add the root directory only if there's an allow list so that we don't end up
+        // disallowing the other directories unless root is already disallowed
+        if (config?.server?.fs?.allow) {
+          config.server.fs.allow.push('.');
+        }
+      },
+    },
   ] as PluginOption[];
 
   // We need the react plugin here to support MDX in non-react projects.

code/lib/builder-vite/src/vite-server.ts

@@ -7,23 +7,24 @@ import { getOptimizeDeps } from './optimizeDeps';
 export async function createViteServer(options: ExtendedOptions, devServer: Server) {
   const { presets } = options;
 
-  const config = await commonConfig(options, 'development');
+  const commonCfg = await commonConfig(options, 'development');
 
-  // Set up dev server
-  config.server = {
-    middlewareMode: true,
-    hmr: {
-      port: options.port,
-      server: devServer,
-    },
-    fs: {
-      strict: true,
+  const config = {
+    ...commonCfg,
+    // Set up dev server
+    server: {
+      middlewareMode: true,
+      hmr: {
+        port: options.port,
+        server: devServer,
+      },
+      fs: {
+        strict: true,
+      },
     },
+    appType: 'custom' as const,
+    optimizeDeps: await getOptimizeDeps(commonCfg, options),
   };
-  config.appType = 'custom';
-
-  // TODO: find a way to avoid having to do this in a separate step.
-  config.optimizeDeps = await getOptimizeDeps(config, options);
 
   const finalConfig = await presets.apply('viteFinal', config, options);
   return createServer(finalConfig);

code/lib/cli/src/generators/SVELTE/index.ts

@@ -1,43 +1,13 @@
-import fse from 'fs-extra';
-import { logger } from '@storybook/node-logger';
-
 import { CoreBuilder } from '../../project_types';
 import { baseGenerator } from '../baseGenerator';
 import { Generator } from '../types';
 
 const generator: Generator = async (packageManager, npmOptions, options) => {
-  let extraMain;
-  // svelte.config.js ?
-  if (fse.existsSync('./svelte.config.js')) {
-    logger.info("Configuring preprocessor from 'svelte.config.js'");
-
-    extraMain = {
-      svelteOptions: { preprocess: '%%require("../svelte.config.js").preprocess%%' },
-    };
-  } else if (fse.existsSync('./svelte.config.cjs')) {
-    logger.info("Configuring preprocessor from 'svelte.config.cjs'");
-
-    extraMain = {
-      svelteOptions: { preprocess: '%%require("../svelte.config.cjs").preprocess%%' },
-    };
-  } else {
-    // svelte-preprocess dependencies ?
-    const packageJson = packageManager.retrievePackageJson();
-    if (packageJson.devDependencies && packageJson.devDependencies['svelte-preprocess']) {
-      logger.info("Configuring preprocessor with 'svelte-preprocess'");
-
-      extraMain = {
-        svelteOptions: { preprocess: '%%require("svelte-preprocess")()%%' },
-      };
-    }
-  }
-
   const extraPackages = options.builder === CoreBuilder.Webpack5 ? ['svelte', 'svelte-loader'] : [];
 
   await baseGenerator(packageManager, npmOptions, options, 'svelte', {
     extraPackages,
     extensions: ['js', 'jsx', 'ts', 'tsx', 'svelte'],
-    extraMain,
     commonJs: true,
   });
 };

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

@@ -94,6 +94,32 @@ const svelteViteTemplates = {
   // }
 };
 
+// SvelteKit only supports Node.js >16.x, so before generating these repros you need to switch to that version
+const svelteKitTemplates = {
+  'svelte-kit/skeleton-js': {
+    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',
+    cadence: ['ci', 'daily', 'weekly'],
+    expected: {
+      framework: '@storybook/svelte-vite',
+      renderer: '@storybook/svelte',
+      builder: '@storybook/builder-vite',
+    },
+  },
+  'svelte-kit/skeleton-ts': {
+    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',
+    cadence: ['ci', 'daily', 'weekly'],
+    expected: {
+      framework: '@storybook/svelte-vite',
+      renderer: '@storybook/svelte',
+      builder: '@storybook/builder-vite',
+    },
+  },
+};
+
 const vueCliTemplates = {
   'vue-cli/default-js': {
     name: 'Vue-CLI (Default JS)',
@@ -126,6 +152,7 @@ export default {
   ...reactViteTemplates,
   ...vue3ViteTemplates,
   ...svelteViteTemplates,
+  ...svelteKitTemplates,
   ...vueCliTemplates,
   // FIXME: missing documentation.json
   // 'angular/latest': {

scripts/sandbox.ts

@@ -13,6 +13,7 @@ import {
 import prompts from 'prompts';
 import type { AbortController } from 'node-abort-controller';
 import command from 'execa';
+import dedent from 'ts-dedent';
 
 import { createOptions, getOptionsOrPrompt, OptionValues } from './utils/options';
 import { executeCLIStep } from './utils/cli-step';