Vite: Add partial SvelteKit support

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

@@ -1,4 +1,5 @@
 import type { StorybookConfig } from '@storybook/builder-vite';
+import { PluginOption } from 'vite';
 import { svelteDocgen } from './plugins/svelte-docgen';
 
 export const addons: StorybookConfig['addons'] = ['@storybook/svelte'];
@@ -12,8 +13,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 here: https://vitejs.dev/guide/api-plugin.html#config
+      plugins[index] = undefined;
+    }
+    if (Array.isArray(plugin)) {
+      // recursive, Vite plugins can be nested
+      removeSvelteKitPlugin(plugin);
+    }
+  });
+};

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

@@ -82,6 +82,19 @@ export async function pluginConfig(options: ExtendedOptions) {
     mdxPlugin(options),
     injectExportOrderPlugin,
     stripStoryHMRBoundary(),
+    {
+      name: '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 storybook specific directories only if there's an allow list so that we don't end up
+        // disallowing the root unless root is already disallowed
+        if (config?.server?.fs?.allow) {
+          config.server.fs.allow.push('.storybook');
+        }
+      },
+    },
   ] 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

@@ -111,6 +111,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 litViteTemplates = {
   'lit-vite/default-js': {
     name: 'Lit Vite (JS)',
@@ -164,6 +190,7 @@ export default {
   ...vue2ViteTemplates,
   ...vue3ViteTemplates,
   ...svelteViteTemplates,
+  ...svelteKitTemplates,
   ...litViteTemplates,
   ...vueCliTemplates,
   // FIXME: missing documentation.json

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';
@@ -245,16 +246,31 @@ function addEsbuildLoaderToStories(mainConfig: ConfigFile) {
   );
 }
 
-// Recompile optimized deps on each startup, so you can change @storybook/* packages and not
-// have to clear caches.
-function forceViteRebuilds(mainConfig: ConfigFile) {
+/*
+  Recompile optimized deps on each startup, so you can change @storybook/* packages and not
+  have to clear caches.
+  And allow "template-stories" directory if necessary
+
+*/
+function setSandboxViteFinal(mainConfig: ConfigFile) {
   const viteFinalCode = `
   (config) => ({
     ...config,
     optimizeDeps: {
       ...config.optimizeDeps,
       force: true,
     },
+    plugins: [
+      ...config.plugins,
+      {
+        name: 'storybook:allow-template-stories',
+        config(config) {
+          if (config?.server?.fs?.allow) {
+            config.server.fs.allow.push('template-stories');
+          }
+        },
+      },
+    ],
   })`;
   mainConfig.setFieldNode(
     ['viteFinal'],
@@ -467,7 +483,7 @@ export async function sandbox(optionValues: OptionValues<typeof options>) {
     // Add some extra settings (see above for what these do)
     mainConfig.setFieldValue(['core', 'disableTelemetry'], true);
     if (builder === '@storybook/builder-webpack5') addEsbuildLoaderToStories(mainConfig);
-    if (builder === '@storybook/builder-vite') forceViteRebuilds(mainConfig);
+    if (builder === '@storybook/builder-vite') setSandboxViteFinal(mainConfig);
 
     await writeConfig(mainConfig);