diff --git a/code/lib/builder-vite/src/build.ts b/code/lib/builder-vite/src/build.ts index d0a36401fc7..5333c56f7b2 100644 --- a/code/lib/builder-vite/src/build.ts +++ b/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 = { - ...baseConfig, - build: { - outDir: options.outputDir, - emptyOutDir: false, // do not clean before running Vite build - Storybook has already added assets in there! - sourcemap: true, - }, + const config = await commonConfig(options, 'build'); + config.build = { + outDir: options.outputDir, + 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>('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); } diff --git a/code/lib/builder-vite/src/envs.ts b/code/lib/builder-vite/src/envs.ts index 10739164262..7ebead6aab4 100644 --- a/code/lib/builder-vite/src/envs.ts +++ b/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. diff --git a/code/lib/builder-vite/src/optimizeDeps.ts b/code/lib/builder-vite/src/optimizeDeps.ts index fbe560720ed..09df4ba81c8 100644 --- a/code/lib/builder-vite/src/optimizeDeps.ts +++ b/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) => Promise.all(arr.map(predicate)).then((results) => arr.filter((_v, index) => results[index])); -export async function getOptimizeDeps( - config: UserConfig & { configFile: false; root: string }, - options: ExtendedOptions -) { - const { root } = config; +export async function getOptimizeDeps(config: ViteInlineConfig, options: ExtendedOptions) { + const { root = process.cwd() } = 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. diff --git a/code/lib/builder-vite/src/vite-config.ts b/code/lib/builder-vite/src/vite-config.ts index 4df5b091b3f..f094e9ca0ea 100644 --- a/code/lib/builder-vite/src/vite-config.ts +++ b/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 | 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 { - return { +): Promise { + 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, - define: {}, + root: path.resolve(options.configDir, '..'), + 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>('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) { - const { framework } = options; +export async function pluginConfig(options: ExtendedOptions) { + const { presets } = options; + const framework = await presets.apply('framework', '', options); + const frameworkName: string = typeof framework === 'object' ? framework.name : framework; + const svelteOptions: Record = 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. - 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[]; + ] as PluginOption[]; - 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()); diff --git a/code/lib/builder-vite/src/vite-server.ts b/code/lib/builder-vite/src/vite-server.ts index 26ecbc4d51a..a8a1b35b1d4 100644 --- a/code/lib/builder-vite/src/vite-server.ts +++ b/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 defaultConfig = { - ...baseConfig, - server: { - middlewareMode: true, - hmr: { - port, - server: devServer, - }, - fs: { - strict: true, - }, + const config = await commonConfig(options, 'development'); + + // Set up dev server + config.server = { + middlewareMode: true, + hmr: { + port: options.port, + server: devServer, + }, + fs: { + strict: true, }, - appType: 'custom' as const, - optimizeDeps: await getOptimizeDeps(baseConfig, options), }; + config.appType = 'custom'; - const finalConfig = await presets.apply('viteFinal', defaultConfig, options); - - const envsRaw = await presets.apply>('env'); - // Stringify env variables after getting `envPrefix` from the final config - const envs = stringifyProcessEnvs(envsRaw, finalConfig.envPrefix); - // Update `define` - finalConfig.define = { - ...finalConfig.define, - ...envs, - }; + // 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); }