-
-
Notifications
You must be signed in to change notification settings - Fork 9.3k
/
vite-config.ts
123 lines (105 loc) · 3.9 KB
/
vite-config.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
import { resolve } from 'node:path';
import {
getBuilderOptions,
getFrameworkName,
isPreservingSymlinks,
resolvePathInStorybookCache,
} from 'storybook/internal/common';
import { globalsNameReferenceMap } from 'storybook/internal/preview/globals';
import type { Options } from 'storybook/internal/types';
import type {
ConfigEnv,
InlineConfig,
PluginOption,
UserConfig as ViteConfig,
InlineConfig as ViteInlineConfig,
} from 'vite';
import {
codeGeneratorPlugin,
csfPlugin,
externalGlobalsPlugin,
injectExportOrderPlugin,
pluginWebpackStats,
stripStoryHMRBoundary,
} from './plugins';
import type { BuilderOptions } from './types';
export type PluginConfigType = 'build' | 'development';
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: Options,
_type: PluginConfigType
): Promise<ViteInlineConfig> {
const configEnv = _type === 'development' ? configEnvServe : configEnvBuild;
const { loadConfigFromFile, mergeConfig } = await import('vite');
const { viteConfigPath } = await getBuilderOptions<BuilderOptions>(options);
const projectRoot = resolve(options.configDir, '..');
// I destructure away the `build` property from the user's config object
// I do this because I can contain config that breaks storybook, such as we had in a lit project.
// If the user needs to configure the `build` they need to do so in the viteFinal function in main.js.
const { config: { build: buildProperty = undefined, ...userConfig } = {} } =
(await loadConfigFromFile(configEnv, viteConfigPath, projectRoot)) ?? {};
const sbConfig: InlineConfig = {
configFile: false,
cacheDir: resolvePathInStorybookCache('sb-vite', options.cacheKey),
root: projectRoot,
// Allow storybook deployed as subfolder. See https://github.com/storybookjs/builder-vite/issues/238
base: './',
plugins: await pluginConfig(options),
resolve: {
conditions: ['storybook', 'stories', 'test'],
preserveSymlinks: isPreservingSymlinks(),
alias: {
assert: require.resolve('browser-assert'),
},
},
// 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_'],
// Pass build.target option from user's vite config
build: {
target: buildProperty?.target,
},
};
const config: ViteConfig = mergeConfig(userConfig, sbConfig);
return config;
}
export async function pluginConfig(options: Options) {
const frameworkName = await getFrameworkName(options);
const build = await options.presets.apply('build');
const externals: Record<string, string> = globalsNameReferenceMap;
if (build?.test?.disableBlocks) {
externals['@storybook/blocks'] = '__STORYBOOK_BLOCKS_EMPTY_MODULE__';
}
const plugins = [
codeGeneratorPlugin(options),
await csfPlugin(options),
await injectExportOrderPlugin(),
await 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');
}
},
},
await externalGlobalsPlugin(externals),
pluginWebpackStats({ workingDir: process.cwd() }),
] as PluginOption[];
return plugins;
}