Vite: use vite.config.js as config base

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

@@ -1,32 +1,19 @@
 import { build as viteBuild } from 'vite';
-import { stringifyProcessEnvs } from './envs';
 import { commonConfig } from './vite-config';
 
-import type { EnvsRaw, ExtendedOptions } from './types';
+import type { ExtendedOptions } from './types';
 
 export async function build(options: ExtendedOptions) {
   const { presets } = options;
 
-  const baseConfig = await commonConfig(options, 'build');
+  const config = await commonConfig(options, 'build');
-  const config = {
+  config.build = {
-    ...baseConfig,
+    outDir: options.outputDir,
-    build: {
+    emptyOutDir: false, // do not clean before running Vite build - Storybook has already added assets in there!
-      outDir: options.outputDir,
+    sourcemap: true,
-      emptyOutDir: false, // do not clean before running Vite build - Storybook has already added assets in there!
-      sourcemap: true,
-    },
   };
 
   const finalConfig = await presets.apply('viteFinal', config, options);
 
-  const envsRaw = await presets.apply<Promise<EnvsRaw>>('env');
-  // Stringify env variables after getting `envPrefix` from the final config
-  const envs = stringifyProcessEnvs(envsRaw, finalConfig.envPrefix);
-  // Update `define`
-  finalConfig.define = {
-    ...finalConfig.define,
-    ...envs,
-  };
-
   await viteBuild(finalConfig);
 }

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

@@ -15,9 +15,6 @@ const allowedEnvVariables = [
   'SSR',
 ];
 
-// Env variables starts with env prefix will be exposed to your client source code via `import.meta.env`
-export const allowedEnvPrefix = ['VITE_', 'STORYBOOK_'];
-
 /**
  * Customized version of stringifyProcessEnvs from @storybook/core-common which
  * uses import.meta.env instead of process.env and checks for allowed variables.

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

@@ -1,5 +1,6 @@
 import * as path from 'path';
-import { normalizePath, resolveConfig, UserConfig } from 'vite';
+import { normalizePath, resolveConfig } from 'vite';
+import type { InlineConfig as ViteInlineConfig } from 'vite';
 import { listStories } from './list-stories';
 
 import type { ExtendedOptions } from './types';
@@ -101,13 +102,11 @@ const INCLUDE_CANDIDATES = [
 const asyncFilter = async (arr: string[], predicate: (val: string) => Promise<boolean>) =>
   Promise.all(arr.map(predicate)).then((results) => arr.filter((_v, index) => results[index]));
 
-export async function getOptimizeDeps(
+export async function getOptimizeDeps(config: ViteInlineConfig, options: ExtendedOptions) {
-  config: UserConfig & { configFile: false; root: string },
+  const { root = process.cwd() } = config;
-  options: ExtendedOptions
-) {
-  const { root } = config;
   const absoluteStories = await listStories(options);
   const stories = absoluteStories.map((storyPath) => normalizePath(path.relative(root, storyPath)));
+  // TODO: check if resolveConfig takes a lot of time, possible optimizations here
   const resolvedConfig = await resolveConfig(config, 'serve', 'development');
 
   // This function converts ids which might include ` > ` to a real path, if it exists on disk.

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

@@ -1,15 +1,20 @@
 import * as path from 'path';
 import fs from 'fs';
-import { Plugin } from 'vite';
+import { loadConfigFromFile, mergeConfig } from 'vite';
+import type {
+  ConfigEnv,
+  InlineConfig as ViteInlineConfig,
+  PluginOption,
+  UserConfig as ViteConfig,
+} from 'vite';
 import viteReact from '@vitejs/plugin-react';
-import type { UserConfig } from 'vite';
 import { isPreservingSymlinks } from '@storybook/core-common';
-import { allowedEnvPrefix as envPrefix } from './envs';
 import { codeGeneratorPlugin } from './code-generator-plugin';
+import { stringifyProcessEnvs } from './envs';
 import { injectExportOrderPlugin } from './inject-export-order-plugin';
 import { mdxPlugin } from './plugins/mdx-plugin';
 import { noFouc } from './plugins/no-fouc';
-import type { ExtendedOptions } from './types';
+import type { ExtendedOptions, EnvsRaw } from './types';
 
 export type PluginConfigType = 'build' | 'development';
 
@@ -23,24 +28,60 @@ export function readPackageJson(): Record<string, any> | false {
   return JSON.parse(jsonContent);
 }
 
+const configEnvServe: ConfigEnv = {
+  mode: 'development',
+  command: 'serve',
+  ssrBuild: false,
+};
+
+const configEnvBuild: ConfigEnv = {
+  mode: 'production',
+  command: 'build',
+  ssrBuild: false,
+};
+
 // Vite config that is common to development and production mode
 export async function commonConfig(
   options: ExtendedOptions,
   _type: PluginConfigType
-): Promise<UserConfig & { configFile: false; root: string }> {
+): Promise<ViteInlineConfig> {
-  return {
+  const { presets } = options;
+  const configEnv = _type === 'development' ? configEnvServe : configEnvBuild;
+
+  const { config: userConfig = {} } = (await loadConfigFromFile(configEnv)) ?? {};
+
+  const sbConfig = {
     configFile: false,
-    root: path.resolve(options.configDir, '..'),
     cacheDir: 'node_modules/.vite-storybook',
-    envPrefix,
+    root: path.resolve(options.configDir, '..'),
-    define: {},
+    plugins: await pluginConfig(options),
     resolve: { preserveSymlinks: isPreservingSymlinks() },
-    plugins: await pluginConfig(options, _type),
+    // If an envPrefix is specified in the vite config, add STORYBOOK_ to it,
+    // otherwise, add VITE_ and STORYBOOK_ so that vite doesn't lose its default.
+    envPrefix: userConfig.envPrefix ? 'STORYBOOK_' : ['VITE_', 'STORYBOOK_'],
   };
+
+  const config: ViteConfig = mergeConfig(userConfig, sbConfig);
+
+  // Sanitize environment variables if needed
+  const envsRaw = await presets.apply<Promise<EnvsRaw>>('env');
+  if (Object.keys(envsRaw).length) {
+    // Stringify env variables after getting `envPrefix` from the  config
+    const envs = stringifyProcessEnvs(envsRaw, config.envPrefix);
+    config.define = {
+      ...config.define,
+      ...envs,
+    };
+  }
+
+  return config;
 }
 
-export async function pluginConfig(options: ExtendedOptions, _type: PluginConfigType) {
+export async function pluginConfig(options: ExtendedOptions) {
-  const { framework } = options;
+  const { presets } = options;
+  const framework = await presets.apply('framework', '', options);
+  const frameworkName: string = typeof framework === 'object' ? framework.name : framework;
+  const svelteOptions: Record<string, any> = await presets.apply('svelteOptions', {}, options);
 
   const plugins = [
     codeGeneratorPlugin(options),
@@ -48,34 +89,19 @@ export async function pluginConfig(options: ExtendedOptions, _type: PluginConfig
     mdxPlugin(options),
     noFouc(),
     injectExportOrderPlugin,
-    // We need the react plugin here to support MDX.
+  ] as PluginOption[];
-    viteReact({
-      // Do not treat story files as HMR boundaries, storybook itself needs to handle them.
-      exclude: [/\.stories\.([tj])sx?$/, /node_modules/].concat(
-        framework === 'react' ? [] : [/\.([tj])sx?$/]
-      ),
-    }),
-    {
-      name: 'vite-plugin-storybook-allow',
-      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 allows anything in the listed directories
-        // add the .storybook directory only if there's an allow list so that we don't end up
-        // disallowing the root directory unless it's already disallowed
-        if (config?.server?.fs?.allow) {
-          config.server.fs.allow.push('.storybook');
-        }
-      },
-    },
-  ] as Plugin[];
 
-  if (framework === 'preact') {
+  // We need the react plugin here to support MDX in non-react projects.
+  if (frameworkName !== '@storybook/react-vite') {
+    plugins.push(viteReact());
+  }
+
+  if (frameworkName === 'preact') {
     // eslint-disable-next-line global-require
     plugins.push(require('@preact/preset-vite').default());
   }
 
-  if (framework === 'glimmerx') {
+  if (frameworkName === 'glimmerx') {
     // eslint-disable-next-line global-require, import/extensions
     const plugin = require('vite-plugin-glimmerx/index.cjs');
     plugins.push(plugin.default());

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

@@ -1,40 +1,30 @@
 import type { Server } from 'http';
 import { createServer } from 'vite';
-import { stringifyProcessEnvs } from './envs';
-import { getOptimizeDeps } from './optimizeDeps';
 import { commonConfig } from './vite-config';
-import type { EnvsRaw, ExtendedOptions } from './types';
+import type { ExtendedOptions } from './types';
+import { getOptimizeDeps } from './optimizeDeps';
 
 export async function createViteServer(options: ExtendedOptions, devServer: Server) {
-  const { port, presets } = options;
+  const { presets } = options;
 
-  const baseConfig = await commonConfig(options, 'development');
+  const config = await commonConfig(options, 'development');
-  const defaultConfig = {
+
-    ...baseConfig,
+  // Set up dev server
-    server: {
+  config.server = {
-      middlewareMode: true,
+    middlewareMode: true,
-      hmr: {
+    hmr: {
-        port,
+      port: options.port,
-        server: devServer,
+      server: devServer,
-      },
+    },
-      fs: {
+    fs: {
-        strict: true,
+      strict: true,
-      },
     },
-    appType: 'custom' as const,
-    optimizeDeps: await getOptimizeDeps(baseConfig, options),
   };
+  config.appType = 'custom';
 
-  const finalConfig = await presets.apply('viteFinal', defaultConfig, options);
+  // TODO: find a way to avoid having to do this in a separate step.
-
+  config.optimizeDeps = await getOptimizeDeps(config, options);
-  const envsRaw = await presets.apply<Promise<EnvsRaw>>('env');
-  // Stringify env variables after getting `envPrefix` from the final config
-  const envs = stringifyProcessEnvs(envsRaw, finalConfig.envPrefix);
-  // Update `define`
-  finalConfig.define = {
-    ...finalConfig.define,
-    ...envs,
-  };
 
+  const finalConfig = await presets.apply('viteFinal', config, options);
   return createServer(finalConfig);
 }