Vite: Add partial SvelteKit support

.circleci/config.yml

@@ -316,7 +316,7 @@ jobs:
     executor:
       class: medium+
       name: sb_node_14_browsers
-    parallelism: 11
+    parallelism: 13
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'

.github/workflows/generate-repros-next.yml

@@ -5,10 +5,9 @@ on:
     - cron: '2 2 */1 * *'
   workflow_dispatch:
   # To remove when the branch will be merged
-  push:
-    branches:
-      - vite-frameworks-xyz
-      - norbert/sb-524-webpack5react18ts
+  # push:
+  #   branches:
+  #     - jeppe/sb-544-sveltekit
 
 jobs:
   generate:

code/frameworks/angular/src/server/framework-preset-angular-ivy.ts

@@ -58,7 +58,7 @@ export const webpack = async (webpackConfig: Configuration, options: PresetOptio
     return webpackConfig;
   }
 
-  if(angularOptions.enableNgcc !== false) {
+  if (angularOptions.enableNgcc !== false) {
     runNgcc();
   }
 

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

@@ -1,4 +1,5 @@
 import type { StorybookConfig } from '@storybook/builder-vite';
+import { PluginOption } from 'vite';
 import { hasPlugin } from './utils';
 import { svelteDocgen } from './plugins/svelte-docgen';
 
@@ -20,8 +21,23 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets
   // Add docgen plugin
   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-storybook-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

@@ -126,6 +126,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)',
@@ -180,6 +206,7 @@ export default {
   ...vue2ViteTemplates,
   ...vue3ViteTemplates,
   ...svelteViteTemplates,
+  ...svelteKitTemplates,
   ...litViteTemplates,
   ...vueCliTemplates,
   // FIXME: missing documentation.json

code/lib/telemetry/src/storybook-metadata.test.ts

@@ -128,7 +128,10 @@ describe('await computeStorybookMetadata', () => {
       },
     });
 
-    expect(angularResult.framework).toEqual({ name: 'angular', options: { enableIvy: true, enableNgcc: true } });
+    expect(angularResult.framework).toEqual({
+      name: 'angular',
+      options: { enableIvy: true, enableNgcc: true },
+    });
   });
 
   test('should separate storybook packages and addons', async () => {

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,15 +246,23 @@ 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 source directories to complement any existing allow patterns
+  (".storybook" is already being allowed by builder-vite)
+*/
+function setSandboxViteFinal(mainConfig: ConfigFile) {
   const viteFinalCode = `
   (config) => ({
     ...config,
-    optimizeDeps: {
-      ...config.optimizeDeps,
-      force: true,
+    optimizeDeps: { ...config.optimizeDeps, force: true },
+    server: {
+      ...config.server,
+      fs: {
+        ...config.server?.fs,
+        allow: ['src', 'template-stories', 'node_modules', ...(config.server?.fs?.allow || [])],
+      },
     },
   })`;
   mainConfig.setFieldNode(
@@ -467,7 +476,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);
 

scripts/verdaccio.yaml

@@ -63,6 +63,10 @@ packages:
     access: $all
     publish: $all
     proxy: npmjs
+  '@storybook/create-svelte-with-args':
+    access: $all
+    publish: $all
+    proxy: npmjs
   '@storybook/react-docgen-typescript-plugin':
     access: $all
     publish: $all