@storybook/builder-vite 0.2.7 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +23 -18
- package/dist/inject-export-order-plugin.js.map +1 -1
- package/dist/plugins/mdx-plugin.js +6 -38
- package/dist/plugins/mdx-plugin.js.map +1 -1
- package/dist/vite-config.js +13 -6
- package/dist/vite-config.js.map +1 -1
- package/inject-export-order-plugin.ts +0 -1
- package/package.json +12 -11
- package/plugins/mdx-plugin.ts +6 -48
- package/vite-config.ts +13 -6
package/README.md
CHANGED
|
@@ -2,9 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
Build your stories with [vite](https://vitejs.dev/) for fast startup times and near-instant HMR.
|
|
4
4
|
|
|
5
|
+
**Note:** This Repository is for Storybook 6.4 and 6.5. In Storybook 7, the Vite builder was brought into the main Storybook monorepo (https://github.com/storybookjs/storybook). See https://storybook.js.org/blog/first-class-vite-support-in-storybook/ for details.
|
|
6
|
+
|
|
5
7
|
# Table of Contents <!-- omit in toc -->
|
|
6
8
|
|
|
7
|
-
- [Migration from storybook-builder-vite](#migration-from-storybook-builder-vite)
|
|
8
9
|
- [Installation](#installation)
|
|
9
10
|
- [Usage](#usage)
|
|
10
11
|
- [Getting started with Vite and Storybook (on a new project)](#getting-started-with-vite-and-storybook-on-a-new-project)
|
|
@@ -15,29 +16,17 @@ Build your stories with [vite](https://vitejs.dev/) for fast startup times and n
|
|
|
15
16
|
- [React Docgen](#react-docgen)
|
|
16
17
|
- [Note about working directory](#note-about-working-directory)
|
|
17
18
|
- [Known issues](#known-issues)
|
|
19
|
+
- [Migration from storybook-builder-vite](#migration-from-storybook-builder-vite)
|
|
18
20
|
- [Contributing](#contributing)
|
|
19
21
|
- [About this codebase](#about-this-codebase)
|
|
20
22
|
|
|
21
|
-
## Migration from storybook-builder-vite
|
|
22
|
-
|
|
23
|
-
This project has moved from `storybook-builder-vite` to `@storybook/builder-vite` as part of a larger effort to improve Vite support in Storybook. To automatically migrate your existing project, you can run
|
|
24
|
-
|
|
25
|
-
```bash
|
|
26
|
-
npx sb@next automigrate
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
To manually migrate:
|
|
30
|
-
|
|
31
|
-
1. Remove `storybook-builder-vite` from your `package.json` dependencies
|
|
32
|
-
2. Install `@storybook/builder-vite`
|
|
33
|
-
3. Update your `core.builder` setting in `.storybook/main.js` to `@storybook/builder-vite`.
|
|
34
|
-
|
|
35
23
|
## Installation
|
|
36
24
|
|
|
37
25
|
Requirements:
|
|
38
26
|
|
|
39
|
-
-
|
|
40
|
-
-
|
|
27
|
+
- Node 14 - 16 (Node 18 is supported by Storybook 7.0)
|
|
28
|
+
- Vite 4.0 or newer (for Vite v3, use `@storybook/builder-vite@0.2.x`)
|
|
29
|
+
- Storybook 6.4 or 6.5 (for storybook 7, see https://github.com/storybookjs/storybook/tree/next/code/lib/builder-vite)
|
|
41
30
|
|
|
42
31
|
```bash
|
|
43
32
|
npm install @storybook/builder-vite --save-dev
|
|
@@ -132,7 +121,9 @@ The function should return the updated Vite configuration.
|
|
|
132
121
|
|
|
133
122
|
### Svelte Customization
|
|
134
123
|
|
|
135
|
-
When using this builder with Svelte, your
|
|
124
|
+
When using this builder with Svelte, your `svelte.config.js` file will be used automatically.
|
|
125
|
+
|
|
126
|
+
If you need to make overrides for Storybook, your `.storybook/main.js` (or equivalent)
|
|
136
127
|
can contain a `svelteOptions` object to pass custom options to
|
|
137
128
|
[`vite-plugin-svelte`](https://github.com/sveltejs/vite-plugin-svelte/tree/main/packages/vite-plugin-svelte):
|
|
138
129
|
|
|
@@ -203,6 +194,20 @@ storybook configuration directory. This can be overridden in viteFinal.
|
|
|
203
194
|
|
|
204
195
|
- HMR: saving a story file does not hot-module-reload, a full reload happens instead. HMR works correctly when saving component files.
|
|
205
196
|
|
|
197
|
+
## Migration from storybook-builder-vite
|
|
198
|
+
|
|
199
|
+
This project has moved from `storybook-builder-vite` to `@storybook/builder-vite` as part of a larger effort to improve Vite support in Storybook. To automatically migrate your existing project, you can run
|
|
200
|
+
|
|
201
|
+
```bash
|
|
202
|
+
npx sb@next automigrate
|
|
203
|
+
```
|
|
204
|
+
|
|
205
|
+
To manually migrate:
|
|
206
|
+
|
|
207
|
+
1. Remove `storybook-builder-vite` from your `package.json` dependencies
|
|
208
|
+
2. Install `@storybook/builder-vite`
|
|
209
|
+
3. Update your `core.builder` setting in `.storybook/main.js` to `@storybook/builder-vite`.
|
|
210
|
+
|
|
206
211
|
## Contributing
|
|
207
212
|
|
|
208
213
|
The Vite builder cannot build itself.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"inject-export-order-plugin.js","sourceRoot":"","sources":["../inject-export-order-plugin.ts"],"names":[],"mappings":";;;;;;AAAA,qDAAwC;AACxC,gEAAuC;AAE1B,QAAA,uBAAuB,GAAG;IACrC,IAAI,EAAE,2CAA2C;IACjD,gEAAgE;IAChE,OAAO,EAAE,MAAM;IACf,KAAK,CAAC,SAAS,CAAC,IAAY,EAAE,EAAU;QACtC,IAAI,CAAC,6BAA6B,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YAC/E,OAAO;SACR;QACD,iFAAiF;QACjF,uEAAuE;QACvE,kDAAkD;QAClD,MAAM,CAAC,EAAE,OAAO,CAAC,GAAG,MAAM,IAAA,uBAAK,EAAC,IAAI,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"inject-export-order-plugin.js","sourceRoot":"","sources":["../inject-export-order-plugin.ts"],"names":[],"mappings":";;;;;;AAAA,qDAAwC;AACxC,gEAAuC;AAE1B,QAAA,uBAAuB,GAAG;IACrC,IAAI,EAAE,2CAA2C;IACjD,gEAAgE;IAChE,OAAO,EAAE,MAAM;IACf,KAAK,CAAC,SAAS,CAAC,IAAY,EAAE,EAAU;QACtC,IAAI,CAAC,6BAA6B,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YAC/E,OAAO;SACR;QACD,iFAAiF;QACjF,uEAAuE;QACvE,kDAAkD;QAClD,MAAM,CAAC,EAAE,OAAO,CAAC,GAAG,MAAM,IAAA,uBAAK,EAAC,IAAI,CAAC,CAAC;QACtC,IAAI,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAAC,EAAE;YAC3C,yCAAyC;YACzC,OAAO;SACR;QACD,MAAM,CAAC,GAAG,IAAI,sBAAW,CAAC,IAAI,CAAC,CAAC;QAChC,MAAM,cAAc,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC;QAC9D,CAAC,CAAC,MAAM,CAAC,uCAAuC,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;QACnF,OAAO;YACL,IAAI,EAAE,CAAC,CAAC,QAAQ,EAAE;YAClB,GAAG,EAAE,CAAC,CAAC,WAAW,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC;SAChD,CAAC;IACJ,CAAC;CACF,CAAC","sourcesContent":["import { parse } from 'es-module-lexer';\nimport MagicString from 'magic-string';\n\nexport const injectExportOrderPlugin = {\n name: 'storybook-vite-inject-export-order-plugin',\n // This should only run after the typescript has been transpiled\n enforce: 'post',\n async transform(code: string, id: string) {\n if (!/\\.stories\\.(?:[tj]sx?|vue)$/.test(id) && !/(stories|story).mdx$/.test(id)) {\n return;\n }\n // TODO: Maybe convert `injectExportOrderPlugin` to function that returns object,\n // and run `await init;` once and then call `parse()` without `await`,\n // instead of calling `await parse()` every time.\n const [, exports] = await parse(code);\n if (exports.includes('__namedExportsOrder')) {\n // user has defined named exports already\n return;\n }\n const s = new MagicString(code);\n const orderedExports = exports.filter((e) => e !== 'default');\n s.append(`;export const __namedExportsOrder = ${JSON.stringify(orderedExports)};`);\n return {\n code: s.toString(),\n map: s.generateMap({ hires: true, source: id }),\n };\n },\n};\n"]}
|
|
@@ -25,20 +25,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
25
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
26
|
exports.mdxPlugin = void 0;
|
|
27
27
|
const isStorybookMdx = (id) => id.endsWith('stories.mdx') || id.endsWith('story.mdx');
|
|
28
|
-
function injectRenderer(code, mdx2) {
|
|
29
|
-
if (mdx2) {
|
|
30
|
-
return `
|
|
31
|
-
import React from 'react';
|
|
32
|
-
${code}
|
|
33
|
-
`;
|
|
34
|
-
}
|
|
35
|
-
return `
|
|
36
|
-
/* @jsx mdx */
|
|
37
|
-
import React from 'react';
|
|
38
|
-
import { mdx } from '@mdx-js/react';
|
|
39
|
-
${code}
|
|
40
|
-
`;
|
|
41
|
-
}
|
|
42
28
|
/**
|
|
43
29
|
* Storybook uses two different loaders when dealing with MDX:
|
|
44
30
|
*
|
|
@@ -49,39 +35,21 @@ function injectRenderer(code, mdx2) {
|
|
|
49
35
|
*/
|
|
50
36
|
function mdxPlugin(options) {
|
|
51
37
|
const { features } = options;
|
|
52
|
-
let reactRefresh;
|
|
53
38
|
return {
|
|
54
39
|
name: 'storybook-vite-mdx-plugin',
|
|
55
40
|
enforce: 'pre',
|
|
56
|
-
|
|
57
|
-
// @vitejs/plugin-react-refresh has been upgraded to @vitejs/plugin-react,
|
|
58
|
-
// and the name of the plugin performing `transform` has been changed from 'react-refresh' to 'vite:react-babel',
|
|
59
|
-
// to be compatible, we need to look for both plugin name.
|
|
60
|
-
// We should also look for the other plugins names exported from @vitejs/plugin-react in case there are some internal refactors.
|
|
61
|
-
const reactRefreshPlugins = plugins.filter((p) => p.name === 'react-refresh' ||
|
|
62
|
-
p.name === 'vite:react-babel' ||
|
|
63
|
-
p.name === 'vite:react-refresh' ||
|
|
64
|
-
p.name === 'vite:react-jsx');
|
|
65
|
-
reactRefresh = reactRefreshPlugins.find((p) => p.transform);
|
|
66
|
-
},
|
|
67
|
-
async transform(src, id, options) {
|
|
41
|
+
async transform(src, id) {
|
|
68
42
|
if (id.match(/\.mdx?$/)) {
|
|
69
43
|
// @ts-ignore
|
|
70
44
|
const { compile } = (features === null || features === void 0 ? void 0 : features.previewMdx2)
|
|
71
45
|
? await Promise.resolve().then(() => __importStar(require('@storybook/mdx2-csf')))
|
|
72
46
|
: await Promise.resolve().then(() => __importStar(require('@storybook/mdx1-csf')));
|
|
47
|
+
// TODO: we don't currently support setting mdx options. Storybook 7.0 does
|
|
73
48
|
const mdxCode = String(await compile(src, { skipCsf: !isStorybookMdx(id) }));
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
const result = await transform.call(this, modifiedCode, `${id}.jsx`, options);
|
|
79
|
-
if (!result)
|
|
80
|
-
return modifiedCode;
|
|
81
|
-
if (typeof result === 'string')
|
|
82
|
-
return result;
|
|
83
|
-
const { code, map: resultMap } = result;
|
|
84
|
-
return { code, map: !resultMap || typeof resultMap === 'string' ? resultMap : { ...resultMap, sources: [id] } };
|
|
49
|
+
return {
|
|
50
|
+
code: mdxCode,
|
|
51
|
+
map: null,
|
|
52
|
+
};
|
|
85
53
|
}
|
|
86
54
|
},
|
|
87
55
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mdx-plugin.js","sourceRoot":"","sources":["../../plugins/mdx-plugin.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,MAAM,cAAc,GAAG,CAAC,EAAU,EAAE,EAAE,CAAC,EAAE,CAAC,QAAQ,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;AAE9F
|
|
1
|
+
{"version":3,"file":"mdx-plugin.js","sourceRoot":"","sources":["../../plugins/mdx-plugin.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,MAAM,cAAc,GAAG,CAAC,EAAU,EAAE,EAAE,CAAC,EAAE,CAAC,QAAQ,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;AAE9F;;;;;;;GAOG;AACH,SAAgB,SAAS,CAAC,OAAgB;IACxC,MAAM,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAC;IAE7B,OAAO;QACL,IAAI,EAAE,2BAA2B;QACjC,OAAO,EAAE,KAAK;QACd,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE,EAAE;YACrB,IAAI,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE;gBACvB,aAAa;gBACb,MAAM,EAAE,OAAO,EAAE,GAAG,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,WAAW;oBACvC,CAAC,CAAC,wDAAa,qBAAqB,GAAC;oBACrC,CAAC,CAAC,wDAAa,qBAAqB,GAAC,CAAC;gBAExC,4EAA4E;gBAC5E,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,OAAO,CAAC,GAAG,EAAE,EAAE,OAAO,EAAE,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;gBAE7E,OAAO;oBACL,IAAI,EAAE,OAAO;oBACb,GAAG,EAAE,IAAI;iBACV,CAAC;aACH;QACH,CAAC;KACF,CAAC;AACJ,CAAC;AAvBD,8BAuBC","sourcesContent":["import type { Options } from '@storybook/core-common';\nimport { Plugin } from 'vite';\n\nconst isStorybookMdx = (id: string) => id.endsWith('stories.mdx') || id.endsWith('story.mdx');\n\n/**\n * Storybook uses two different loaders when dealing with MDX:\n *\n * - *stories.mdx and *story.mdx are compiled with the CSF compiler\n * - *.mdx are compiled with the MDX compiler directly\n *\n * @see https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/recipes.md#csf-stories-with-arbitrary-mdx\n */\nexport function mdxPlugin(options: Options): Plugin {\n const { features } = options;\n\n return {\n name: 'storybook-vite-mdx-plugin',\n enforce: 'pre',\n async transform(src, id) {\n if (id.match(/\\.mdx?$/)) {\n // @ts-ignore\n const { compile } = features?.previewMdx2\n ? await import('@storybook/mdx2-csf')\n : await import('@storybook/mdx1-csf');\n\n // TODO: we don't currently support setting mdx options. Storybook 7.0 does\n const mdxCode = String(await compile(src, { skipCsf: !isStorybookMdx(id) }));\n\n return {\n code: mdxCode,\n map: null,\n };\n }\n },\n };\n}\n"]}
|
package/dist/vite-config.js
CHANGED
|
@@ -29,7 +29,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
29
29
|
exports.pluginConfig = exports.commonConfig = exports.readPackageJson = void 0;
|
|
30
30
|
const path = __importStar(require("path"));
|
|
31
31
|
const fs_1 = __importDefault(require("fs"));
|
|
32
|
-
const plugin_react_1 = __importDefault(require("@vitejs/plugin-react"));
|
|
33
32
|
const semver_1 = __importDefault(require("@storybook/semver"));
|
|
34
33
|
const envs_1 = require("./envs");
|
|
35
34
|
const code_generator_plugin_1 = require("./code-generator-plugin");
|
|
@@ -78,11 +77,6 @@ async function pluginConfig(options, _type) {
|
|
|
78
77
|
(0, mdx_plugin_1.mdxPlugin)(options),
|
|
79
78
|
(0, no_fouc_1.noFouc)(),
|
|
80
79
|
inject_export_order_plugin_1.injectExportOrderPlugin,
|
|
81
|
-
// We need the react plugin here to support MDX.
|
|
82
|
-
(0, plugin_react_1.default)({
|
|
83
|
-
// Do not treat story files as HMR boundaries, storybook itself needs to handle them.
|
|
84
|
-
exclude: [/\.stories\.(?:[tj]sx?|vue)$/, /node_modules/].concat(framework === 'react' ? [] : [/\.([tj])sx?$/]),
|
|
85
|
-
}),
|
|
86
80
|
{
|
|
87
81
|
name: 'vite-plugin-storybook-allow',
|
|
88
82
|
enforce: 'post',
|
|
@@ -215,6 +209,19 @@ async function pluginConfig(options, _type) {
|
|
|
215
209
|
plugins.push(require('@preact/preset-vite').default());
|
|
216
210
|
}
|
|
217
211
|
if (framework === 'react') {
|
|
212
|
+
try {
|
|
213
|
+
const reactPlugin = require('@vitejs/plugin-react');
|
|
214
|
+
plugins.push(reactPlugin());
|
|
215
|
+
}
|
|
216
|
+
catch (err) {
|
|
217
|
+
if (err.code === 'MODULE_NOT_FOUND') {
|
|
218
|
+
throw new Error(`
|
|
219
|
+
@storybook/builder-vite requires @vitejs/plugin-react to be installed when using @storybook/react.
|
|
220
|
+
Please install it and start storybook again.
|
|
221
|
+
`);
|
|
222
|
+
}
|
|
223
|
+
throw err;
|
|
224
|
+
}
|
|
218
225
|
const { reactDocgen: reactDocgenOption, reactDocgenTypescriptOptions } = await presets.apply('typescript', {});
|
|
219
226
|
let typescriptPresent;
|
|
220
227
|
try {
|
package/dist/vite-config.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vite-config.js","sourceRoot":"","sources":["../vite-config.ts"],"names":[],"mappings":"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","sourcesContent":["import * as path from 'path';\nimport fs from 'fs';\nimport { Plugin } from 'vite';\nimport { TypescriptConfig } from '@storybook/core-common';\nimport viteReact from '@vitejs/plugin-react';\nimport semver from '@storybook/semver';\n\nimport { allowedEnvPrefix as envPrefix } from './envs';\nimport { codeGeneratorPlugin } from './code-generator-plugin';\nimport { injectExportOrderPlugin } from './inject-export-order-plugin';\nimport { mdxPlugin } from './plugins/mdx-plugin';\nimport { noFouc } from './plugins/no-fouc';\nimport { sourceLoaderPlugin } from './source-loader-plugin';\n\nimport type { UserConfig } from 'vite';\nimport type { ExtendedOptions } from './types';\n\nexport type PluginConfigType = 'build' | 'development';\n\nexport function readPackageJson(dir: string = process.cwd()): Record<string, any> | false {\n const packageJsonPath = path.resolve(dir, 'package.json');\n if (!fs.existsSync(packageJsonPath)) {\n return false;\n }\n\n const jsonContent = fs.readFileSync(packageJsonPath, 'utf8');\n return JSON.parse(jsonContent);\n}\n\n// Vite config that is common to development and production mode\nexport async function commonConfig(\n options: ExtendedOptions,\n _type: PluginConfigType\n): Promise<UserConfig & { configFile: false; root: string }> {\n const { framework } = options;\n const vuePath = framework === 'vue3' ? 'vue/dist/vue.esm-bundler.js' : 'vue/dist/vue.esm.js';\n\n return {\n configFile: false,\n root: path.resolve(options.configDir, '..'),\n cacheDir: 'node_modules/.vite-storybook',\n envPrefix,\n define: {},\n resolve: /^vue3?$/.test(framework)\n ? {\n alias: {\n vue: vuePath,\n },\n }\n : {},\n plugins: await pluginConfig(options, _type),\n };\n}\n\nexport async function pluginConfig(options: ExtendedOptions, _type: PluginConfigType) {\n const { framework, presets } = options;\n const svelteOptions: Record<string, any> = await presets.apply('svelteOptions', {}, options);\n const root = path.resolve(options.configDir, '..');\n\n const plugins = [\n codeGeneratorPlugin(options),\n sourceLoaderPlugin(options),\n mdxPlugin(options),\n noFouc(),\n injectExportOrderPlugin,\n // We need the react plugin here to support MDX.\n viteReact({\n // Do not treat story files as HMR boundaries, storybook itself needs to handle them.\n exclude: [/\\.stories\\.(?:[tj]sx?|vue)$/, /node_modules/].concat(framework === 'react' ? [] : [/\\.([tj])sx?$/]),\n }),\n {\n name: 'vite-plugin-storybook-allow',\n enforce: 'post',\n config(config) {\n // if there is no allow list then Vite allows anything in the root directory\n // if there is an allow list then Vite allows anything in the listed directories\n // add the .storybook directory only if there's an allow list so that we don't end up\n // disallowing the root directory unless it's already disallowed\n if (config?.server?.fs?.allow) {\n config.server.fs.allow.push('.storybook');\n }\n },\n },\n ] as Plugin[];\n\n if (framework === 'vue') {\n const pkgJson = readPackageJson(root);\n const vueVer: string | false | undefined = pkgJson && (pkgJson?.dependencies?.vue ?? pkgJson?.devDependencies?.vue);\n // Default to 2.7, but check if package.json has a version that is less than 2.7\n const is26 = vueVer && semver.gtr('2.7.0', vueVer);\n try {\n const vuePlugin = is26 ? require('vite-plugin-vue2').createVuePlugin : require('@vitejs/plugin-vue2');\n plugins.push(vuePlugin());\n } catch (err) {\n if ((err as NodeJS.ErrnoException).code === 'MODULE_NOT_FOUND') {\n throw new Error(`\n @storybook/builder-vite requires ${\n is26 ? 'vite-plugin-vue2' : '@vitejs/plugin-vue2'\n } to be installed when using @storybook/vue.\n Please install it and start storybook again.\n `);\n }\n throw err;\n }\n try {\n const { vueDocgen } = await import('./plugins/vue-docgen');\n plugins.push(vueDocgen(2));\n } catch (err) {\n if ((err as NodeJS.ErrnoException).code === 'MODULE_NOT_FOUND') {\n throw new Error(\n '@storybook/builder-vite requires vue-docgen-api to be installed ' +\n 'when using @storybook/vue.' +\n ' Please install it and start storybook again.'\n );\n }\n throw err;\n }\n }\n\n if (framework === 'vue3') {\n try {\n const vuePlugin = require('@vitejs/plugin-vue');\n plugins.push(vuePlugin());\n } catch (err) {\n if ((err as NodeJS.ErrnoException).code === 'MODULE_NOT_FOUND') {\n throw new Error(`\n @storybook/builder-vite requires @vitejs/plugin-vue to be installed when using @storybook/vue3.\n Please install it and start storybook again.\n `);\n }\n throw err;\n }\n\n try {\n const { vueDocgen } = await import('./plugins/vue-docgen');\n plugins.push(vueDocgen(3));\n } catch (err) {\n if ((err as NodeJS.ErrnoException).code === 'MODULE_NOT_FOUND') {\n throw new Error(\n '@storybook/builder-vite requires vue-docgen-api to be installed ' +\n 'when using @storybook/vue3.' +\n ' Please install it and start storybook again.'\n );\n }\n throw err;\n }\n }\n\n if (framework === 'svelte') {\n try {\n const sveltePlugin = require('@sveltejs/vite-plugin-svelte').svelte;\n\n // We need to create two separate svelte plugins, one for stories, and one for other svelte files\n // because stories.svelte files cannot be hot-module-reloaded.\n // Suggested in: https://github.com/sveltejs/vite-plugin-svelte/issues/321#issuecomment-1113205509\n\n // First, create an array containing user exclude patterns, to combine with ours.\n const userExclude = Array.isArray(svelteOptions?.exclude)\n ? svelteOptions?.exclude\n : svelteOptions?.exclude\n ? [svelteOptions?.exclude]\n : [];\n\n // These are the svelte stories we need to exclude from HMR\n const storyPatterns = ['**/*.story.svelte', '**/*.stories.svelte'];\n // Non-story svelte files\n // Starting in 1.0.0-next.42, svelte.config.js is included by default.\n // We disable that, but allow it to be overridden in svelteOptions\n plugins.push(sveltePlugin({ ...svelteOptions, exclude: [...userExclude, ...storyPatterns] }));\n // Svelte stories without HMR\n const storySveltePlugin = sveltePlugin({\n ...svelteOptions,\n exclude: userExclude,\n include: storyPatterns,\n hot: false,\n });\n plugins.push({\n // Starting in 1.0.0-next.43, the plugin function returns an array of plugins. We only want the first one here.\n ...(Array.isArray(storySveltePlugin) ? storySveltePlugin[0] : storySveltePlugin),\n name: 'vite-plugin-svelte-stories',\n });\n } catch (err) {\n if ((err as NodeJS.ErrnoException).code === 'MODULE_NOT_FOUND') {\n throw new Error(\n '@storybook/builder-vite requires @sveltejs/vite-plugin-svelte to be installed' +\n ' when using @storybook/svelte.' +\n ' Please install it and start storybook again.'\n );\n }\n throw err;\n }\n\n const { loadSvelteConfig } = require('@sveltejs/vite-plugin-svelte');\n const config = { ...loadSvelteConfig(), ...svelteOptions };\n\n try {\n const csfPlugin = require('./svelte/csf-plugin').default;\n plugins.push(csfPlugin(config));\n } catch (err) {\n // Not all projects use `.stories.svelte` for stories, and by default 6.5+ does not auto-install @storybook/addon-svelte-csf.\n // If it's any other kind of error, re-throw.\n if ((err as NodeJS.ErrnoException).code !== 'MODULE_NOT_FOUND') {\n throw err;\n }\n }\n\n const { svelteDocgen } = await import('./plugins/svelte-docgen');\n plugins.push(svelteDocgen(config));\n }\n\n if (framework === 'preact') {\n plugins.push(require('@preact/preset-vite').default());\n }\n\n if (framework === 'react') {\n const { reactDocgen: reactDocgenOption, reactDocgenTypescriptOptions } = await presets.apply(\n 'typescript',\n {} as TypescriptConfig\n );\n\n let typescriptPresent;\n\n try {\n require.resolve('typescript');\n typescriptPresent = true;\n } catch (e) {\n typescriptPresent = false;\n }\n\n if (reactDocgenOption === 'react-docgen-typescript' && typescriptPresent) {\n plugins.push(\n require('@joshwooding/vite-plugin-react-docgen-typescript')({\n ...reactDocgenTypescriptOptions,\n // We *need* this set so that RDT returns default values in the same format as react-docgen\n savePropValueAsString: true,\n })\n );\n }\n\n // Add react-docgen so long as the option is not false\n if (typeof reactDocgenOption === 'string') {\n const { reactDocgen } = await import('./plugins/react-docgen');\n // Needs to run before the react plugin, so add to the front\n plugins.unshift(\n // If react-docgen is specified, use it for everything, otherwise only use it for non-typescript files\n reactDocgen({ include: reactDocgenOption === 'react-docgen' ? /\\.(mjs|tsx?|jsx?)$/ : /\\.(mjs|jsx?)$/ })\n );\n }\n }\n\n if (framework === 'glimmerx') {\n const plugin = require('vite-plugin-glimmerx/index.cjs');\n plugins.push(plugin.default());\n }\n\n return plugins;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"vite-config.js","sourceRoot":"","sources":["../vite-config.ts"],"names":[],"mappings":"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","sourcesContent":["import * as path from 'path';\nimport fs from 'fs';\nimport { Plugin } from 'vite';\nimport { TypescriptConfig } from '@storybook/core-common';\nimport semver from '@storybook/semver';\n\nimport { allowedEnvPrefix as envPrefix } from './envs';\nimport { codeGeneratorPlugin } from './code-generator-plugin';\nimport { injectExportOrderPlugin } from './inject-export-order-plugin';\nimport { mdxPlugin } from './plugins/mdx-plugin';\nimport { noFouc } from './plugins/no-fouc';\nimport { sourceLoaderPlugin } from './source-loader-plugin';\n\nimport type { UserConfig } from 'vite';\nimport type { ExtendedOptions } from './types';\n\nexport type PluginConfigType = 'build' | 'development';\n\nexport function readPackageJson(dir: string = process.cwd()): Record<string, any> | false {\n const packageJsonPath = path.resolve(dir, 'package.json');\n if (!fs.existsSync(packageJsonPath)) {\n return false;\n }\n\n const jsonContent = fs.readFileSync(packageJsonPath, 'utf8');\n return JSON.parse(jsonContent);\n}\n\n// Vite config that is common to development and production mode\nexport async function commonConfig(\n options: ExtendedOptions,\n _type: PluginConfigType\n): Promise<UserConfig & { configFile: false; root: string }> {\n const { framework } = options;\n const vuePath = framework === 'vue3' ? 'vue/dist/vue.esm-bundler.js' : 'vue/dist/vue.esm.js';\n\n return {\n configFile: false,\n root: path.resolve(options.configDir, '..'),\n cacheDir: 'node_modules/.vite-storybook',\n envPrefix,\n define: {},\n resolve: /^vue3?$/.test(framework)\n ? {\n alias: {\n vue: vuePath,\n },\n }\n : {},\n plugins: await pluginConfig(options, _type),\n };\n}\n\nexport async function pluginConfig(options: ExtendedOptions, _type: PluginConfigType) {\n const { framework, presets } = options;\n const svelteOptions: Record<string, any> = await presets.apply('svelteOptions', {}, options);\n const root = path.resolve(options.configDir, '..');\n\n const plugins = [\n codeGeneratorPlugin(options),\n sourceLoaderPlugin(options),\n mdxPlugin(options),\n noFouc(),\n injectExportOrderPlugin,\n {\n name: 'vite-plugin-storybook-allow',\n enforce: 'post',\n config(config) {\n // if there is no allow list then Vite allows anything in the root directory\n // if there is an allow list then Vite allows anything in the listed directories\n // add the .storybook directory only if there's an allow list so that we don't end up\n // disallowing the root directory unless it's already disallowed\n if (config?.server?.fs?.allow) {\n config.server.fs.allow.push('.storybook');\n }\n },\n },\n ] as Plugin[];\n\n if (framework === 'vue') {\n const pkgJson = readPackageJson(root);\n const vueVer: string | false | undefined = pkgJson && (pkgJson?.dependencies?.vue ?? pkgJson?.devDependencies?.vue);\n // Default to 2.7, but check if package.json has a version that is less than 2.7\n const is26 = vueVer && semver.gtr('2.7.0', vueVer);\n try {\n const vuePlugin = is26 ? require('vite-plugin-vue2').createVuePlugin : require('@vitejs/plugin-vue2');\n plugins.push(vuePlugin());\n } catch (err) {\n if ((err as NodeJS.ErrnoException).code === 'MODULE_NOT_FOUND') {\n throw new Error(`\n @storybook/builder-vite requires ${\n is26 ? 'vite-plugin-vue2' : '@vitejs/plugin-vue2'\n } to be installed when using @storybook/vue.\n Please install it and start storybook again.\n `);\n }\n throw err;\n }\n try {\n const { vueDocgen } = await import('./plugins/vue-docgen');\n plugins.push(vueDocgen(2));\n } catch (err) {\n if ((err as NodeJS.ErrnoException).code === 'MODULE_NOT_FOUND') {\n throw new Error(\n '@storybook/builder-vite requires vue-docgen-api to be installed ' +\n 'when using @storybook/vue.' +\n ' Please install it and start storybook again.'\n );\n }\n throw err;\n }\n }\n\n if (framework === 'vue3') {\n try {\n const vuePlugin = require('@vitejs/plugin-vue');\n plugins.push(vuePlugin());\n } catch (err) {\n if ((err as NodeJS.ErrnoException).code === 'MODULE_NOT_FOUND') {\n throw new Error(`\n @storybook/builder-vite requires @vitejs/plugin-vue to be installed when using @storybook/vue3.\n Please install it and start storybook again.\n `);\n }\n throw err;\n }\n\n try {\n const { vueDocgen } = await import('./plugins/vue-docgen');\n plugins.push(vueDocgen(3));\n } catch (err) {\n if ((err as NodeJS.ErrnoException).code === 'MODULE_NOT_FOUND') {\n throw new Error(\n '@storybook/builder-vite requires vue-docgen-api to be installed ' +\n 'when using @storybook/vue3.' +\n ' Please install it and start storybook again.'\n );\n }\n throw err;\n }\n }\n\n if (framework === 'svelte') {\n try {\n const sveltePlugin = require('@sveltejs/vite-plugin-svelte').svelte;\n\n // We need to create two separate svelte plugins, one for stories, and one for other svelte files\n // because stories.svelte files cannot be hot-module-reloaded.\n // Suggested in: https://github.com/sveltejs/vite-plugin-svelte/issues/321#issuecomment-1113205509\n\n // First, create an array containing user exclude patterns, to combine with ours.\n const userExclude = Array.isArray(svelteOptions?.exclude)\n ? svelteOptions?.exclude\n : svelteOptions?.exclude\n ? [svelteOptions?.exclude]\n : [];\n\n // These are the svelte stories we need to exclude from HMR\n const storyPatterns = ['**/*.story.svelte', '**/*.stories.svelte'];\n // Non-story svelte files\n // Starting in 1.0.0-next.42, svelte.config.js is included by default.\n // We disable that, but allow it to be overridden in svelteOptions\n plugins.push(sveltePlugin({ ...svelteOptions, exclude: [...userExclude, ...storyPatterns] }));\n // Svelte stories without HMR\n const storySveltePlugin = sveltePlugin({\n ...svelteOptions,\n exclude: userExclude,\n include: storyPatterns,\n hot: false,\n });\n plugins.push({\n // Starting in 1.0.0-next.43, the plugin function returns an array of plugins. We only want the first one here.\n ...(Array.isArray(storySveltePlugin) ? storySveltePlugin[0] : storySveltePlugin),\n name: 'vite-plugin-svelte-stories',\n });\n } catch (err) {\n if ((err as NodeJS.ErrnoException).code === 'MODULE_NOT_FOUND') {\n throw new Error(\n '@storybook/builder-vite requires @sveltejs/vite-plugin-svelte to be installed' +\n ' when using @storybook/svelte.' +\n ' Please install it and start storybook again.'\n );\n }\n throw err;\n }\n\n const { loadSvelteConfig } = require('@sveltejs/vite-plugin-svelte');\n const config = { ...loadSvelteConfig(), ...svelteOptions };\n\n try {\n const csfPlugin = require('./svelte/csf-plugin').default;\n plugins.push(csfPlugin(config));\n } catch (err) {\n // Not all projects use `.stories.svelte` for stories, and by default 6.5+ does not auto-install @storybook/addon-svelte-csf.\n // If it's any other kind of error, re-throw.\n if ((err as NodeJS.ErrnoException).code !== 'MODULE_NOT_FOUND') {\n throw err;\n }\n }\n\n const { svelteDocgen } = await import('./plugins/svelte-docgen');\n plugins.push(svelteDocgen(config));\n }\n\n if (framework === 'preact') {\n plugins.push(require('@preact/preset-vite').default());\n }\n\n if (framework === 'react') {\n try {\n const reactPlugin = require('@vitejs/plugin-react');\n plugins.push(reactPlugin());\n } catch (err) {\n if ((err as NodeJS.ErrnoException).code === 'MODULE_NOT_FOUND') {\n throw new Error(`\n @storybook/builder-vite requires @vitejs/plugin-react to be installed when using @storybook/react.\n Please install it and start storybook again.\n `);\n }\n throw err;\n }\n\n const { reactDocgen: reactDocgenOption, reactDocgenTypescriptOptions } = await presets.apply(\n 'typescript',\n {} as TypescriptConfig\n );\n\n let typescriptPresent;\n\n try {\n require.resolve('typescript');\n typescriptPresent = true;\n } catch (e) {\n typescriptPresent = false;\n }\n\n if (reactDocgenOption === 'react-docgen-typescript' && typescriptPresent) {\n plugins.push(\n require('@joshwooding/vite-plugin-react-docgen-typescript')({\n ...reactDocgenTypescriptOptions,\n // We *need* this set so that RDT returns default values in the same format as react-docgen\n savePropValueAsString: true,\n })\n );\n }\n\n // Add react-docgen so long as the option is not false\n if (typeof reactDocgenOption === 'string') {\n const { reactDocgen } = await import('./plugins/react-docgen');\n // Needs to run before the react plugin, so add to the front\n plugins.unshift(\n // If react-docgen is specified, use it for everything, otherwise only use it for non-typescript files\n reactDocgen({ include: reactDocgenOption === 'react-docgen' ? /\\.(mjs|tsx?|jsx?)$/ : /\\.(mjs|jsx?)$/ })\n );\n }\n }\n\n if (framework === 'glimmerx') {\n const plugin = require('vite-plugin-glimmerx/index.cjs');\n plugins.push(plugin.default());\n }\n\n return plugins;\n}\n"]}
|
|
@@ -13,7 +13,6 @@ export const injectExportOrderPlugin = {
|
|
|
13
13
|
// and run `await init;` once and then call `parse()` without `await`,
|
|
14
14
|
// instead of calling `await parse()` every time.
|
|
15
15
|
const [, exports] = await parse(code);
|
|
16
|
-
|
|
17
16
|
if (exports.includes('__namedExportsOrder')) {
|
|
18
17
|
// user has defined named exports already
|
|
19
18
|
return;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/builder-vite",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.0",
|
|
4
4
|
"description": "A plugin to run and build Storybooks with Vite",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -21,16 +21,16 @@
|
|
|
21
21
|
"lint:eslint": "eslint \"**/*.{ts,tsx,js,jsx,mjs,cjs}\" --fix",
|
|
22
22
|
"lint-ci": "yarn lint-ci:prettier && yarn lint-ci:eslint",
|
|
23
23
|
"lint-ci:prettier": "prettier . --check",
|
|
24
|
-
"lint-ci:eslint": "eslint \"**/*.{ts,tsx,js,jsx,mjs,cjs}\" --max-warnings=0"
|
|
24
|
+
"lint-ci:eslint": "eslint \"**/*.{ts,tsx,js,jsx,mjs,cjs}\" --max-warnings=0",
|
|
25
|
+
"update-examples": "cd ../../examples/lit-ts && yarn && cd ../preact && yarn && cd ../react && cd ../react-18 && yarn && cd ../react-ts && yarn && cd ../svelte && yarn && cd ../vue2.6 && yarn && cd ../vue2.7 && yarn && cd ../vue3 && yarn && cd ../workspaces && yarn"
|
|
25
26
|
},
|
|
26
27
|
"dependencies": {
|
|
27
|
-
"@joshwooding/vite-plugin-react-docgen-typescript": "0.
|
|
28
|
+
"@joshwooding/vite-plugin-react-docgen-typescript": "0.2.1",
|
|
28
29
|
"@storybook/core-common": "^6.4.3",
|
|
29
|
-
"@storybook/mdx1-csf": "^0.0.
|
|
30
|
+
"@storybook/mdx1-csf": "^1.0.0-next.0",
|
|
30
31
|
"@storybook/node-logger": "^6.4.3",
|
|
31
32
|
"@storybook/semver": "^7.3.2",
|
|
32
33
|
"@storybook/source-loader": "^6.4.3",
|
|
33
|
-
"@vitejs/plugin-react": "^2.0.0",
|
|
34
34
|
"ast-types": "^0.14.2",
|
|
35
35
|
"es-module-lexer": "^0.9.3",
|
|
36
36
|
"glob": "^7.2.0",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"devDependencies": {
|
|
44
44
|
"@storybook/addon-svelte-csf": "^2.0.7",
|
|
45
45
|
"@storybook/client-api": "^6.5.12",
|
|
46
|
-
"@storybook/mdx2-csf": "
|
|
46
|
+
"@storybook/mdx2-csf": "next",
|
|
47
47
|
"@sveltejs/vite-plugin-svelte": "^1.0.0",
|
|
48
48
|
"@types/express": "^4.17.13",
|
|
49
49
|
"@types/node": "^17.0.23",
|
|
@@ -56,14 +56,15 @@
|
|
|
56
56
|
"prettier": "^2.7.1",
|
|
57
57
|
"svelte": "^3.50.1",
|
|
58
58
|
"typescript": "^4.8.3",
|
|
59
|
-
"vite": "
|
|
59
|
+
"vite": "4.0.4",
|
|
60
60
|
"vue-docgen-api": "^4.40.0"
|
|
61
61
|
},
|
|
62
62
|
"peerDependencies": {
|
|
63
|
-
"@storybook/mdx2-csf": "
|
|
64
|
-
"@sveltejs/vite-plugin-svelte": "^
|
|
65
|
-
"@vitejs/plugin-
|
|
66
|
-
"
|
|
63
|
+
"@storybook/mdx2-csf": ">=1.0.0-next.0",
|
|
64
|
+
"@sveltejs/vite-plugin-svelte": "^2.0.0",
|
|
65
|
+
"@vitejs/plugin-react": "^3.0.0",
|
|
66
|
+
"@vitejs/plugin-vue": "^4.0.0",
|
|
67
|
+
"vite": ">= 4.0.0",
|
|
67
68
|
"vue-docgen-api": "^4.40.0"
|
|
68
69
|
},
|
|
69
70
|
"peerDependenciesMeta": {
|
package/plugins/mdx-plugin.ts
CHANGED
|
@@ -3,22 +3,6 @@ import { Plugin } from 'vite';
|
|
|
3
3
|
|
|
4
4
|
const isStorybookMdx = (id: string) => id.endsWith('stories.mdx') || id.endsWith('story.mdx');
|
|
5
5
|
|
|
6
|
-
function injectRenderer(code: string, mdx2: boolean) {
|
|
7
|
-
if (mdx2) {
|
|
8
|
-
return `
|
|
9
|
-
import React from 'react';
|
|
10
|
-
${code}
|
|
11
|
-
`;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
return `
|
|
15
|
-
/* @jsx mdx */
|
|
16
|
-
import React from 'react';
|
|
17
|
-
import { mdx } from '@mdx-js/react';
|
|
18
|
-
${code}
|
|
19
|
-
`;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
6
|
/**
|
|
23
7
|
* Storybook uses two different loaders when dealing with MDX:
|
|
24
8
|
*
|
|
@@ -30,49 +14,23 @@ function injectRenderer(code: string, mdx2: boolean) {
|
|
|
30
14
|
export function mdxPlugin(options: Options): Plugin {
|
|
31
15
|
const { features } = options;
|
|
32
16
|
|
|
33
|
-
let reactRefresh: Plugin | undefined;
|
|
34
|
-
|
|
35
17
|
return {
|
|
36
18
|
name: 'storybook-vite-mdx-plugin',
|
|
37
19
|
enforce: 'pre',
|
|
38
|
-
|
|
39
|
-
// @vitejs/plugin-react-refresh has been upgraded to @vitejs/plugin-react,
|
|
40
|
-
// and the name of the plugin performing `transform` has been changed from 'react-refresh' to 'vite:react-babel',
|
|
41
|
-
// to be compatible, we need to look for both plugin name.
|
|
42
|
-
// We should also look for the other plugins names exported from @vitejs/plugin-react in case there are some internal refactors.
|
|
43
|
-
const reactRefreshPlugins = plugins.filter(
|
|
44
|
-
(p) =>
|
|
45
|
-
p.name === 'react-refresh' ||
|
|
46
|
-
p.name === 'vite:react-babel' ||
|
|
47
|
-
p.name === 'vite:react-refresh' ||
|
|
48
|
-
p.name === 'vite:react-jsx'
|
|
49
|
-
);
|
|
50
|
-
reactRefresh = reactRefreshPlugins.find((p) => p.transform);
|
|
51
|
-
},
|
|
52
|
-
async transform(src, id, options) {
|
|
20
|
+
async transform(src, id) {
|
|
53
21
|
if (id.match(/\.mdx?$/)) {
|
|
54
22
|
// @ts-ignore
|
|
55
23
|
const { compile } = features?.previewMdx2
|
|
56
24
|
? await import('@storybook/mdx2-csf')
|
|
57
25
|
: await import('@storybook/mdx1-csf');
|
|
58
26
|
|
|
27
|
+
// TODO: we don't currently support setting mdx options. Storybook 7.0 does
|
|
59
28
|
const mdxCode = String(await compile(src, { skipCsf: !isStorybookMdx(id) }));
|
|
60
29
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
const transform = rTransform && 'handler' in rTransform ? rTransform.handler : rTransform;
|
|
66
|
-
|
|
67
|
-
const result = await transform!.call(this, modifiedCode, `${id}.jsx`, options);
|
|
68
|
-
|
|
69
|
-
if (!result) return modifiedCode;
|
|
70
|
-
|
|
71
|
-
if (typeof result === 'string') return result;
|
|
72
|
-
|
|
73
|
-
const { code, map: resultMap } = result;
|
|
74
|
-
|
|
75
|
-
return { code, map: !resultMap || typeof resultMap === 'string' ? resultMap : { ...resultMap, sources: [id] } };
|
|
30
|
+
return {
|
|
31
|
+
code: mdxCode,
|
|
32
|
+
map: null,
|
|
33
|
+
};
|
|
76
34
|
}
|
|
77
35
|
},
|
|
78
36
|
};
|
package/vite-config.ts
CHANGED
|
@@ -2,7 +2,6 @@ import * as path from 'path';
|
|
|
2
2
|
import fs from 'fs';
|
|
3
3
|
import { Plugin } from 'vite';
|
|
4
4
|
import { TypescriptConfig } from '@storybook/core-common';
|
|
5
|
-
import viteReact from '@vitejs/plugin-react';
|
|
6
5
|
import semver from '@storybook/semver';
|
|
7
6
|
|
|
8
7
|
import { allowedEnvPrefix as envPrefix } from './envs';
|
|
@@ -63,11 +62,6 @@ export async function pluginConfig(options: ExtendedOptions, _type: PluginConfig
|
|
|
63
62
|
mdxPlugin(options),
|
|
64
63
|
noFouc(),
|
|
65
64
|
injectExportOrderPlugin,
|
|
66
|
-
// We need the react plugin here to support MDX.
|
|
67
|
-
viteReact({
|
|
68
|
-
// Do not treat story files as HMR boundaries, storybook itself needs to handle them.
|
|
69
|
-
exclude: [/\.stories\.(?:[tj]sx?|vue)$/, /node_modules/].concat(framework === 'react' ? [] : [/\.([tj])sx?$/]),
|
|
70
|
-
}),
|
|
71
65
|
{
|
|
72
66
|
name: 'vite-plugin-storybook-allow',
|
|
73
67
|
enforce: 'post',
|
|
@@ -213,6 +207,19 @@ export async function pluginConfig(options: ExtendedOptions, _type: PluginConfig
|
|
|
213
207
|
}
|
|
214
208
|
|
|
215
209
|
if (framework === 'react') {
|
|
210
|
+
try {
|
|
211
|
+
const reactPlugin = require('@vitejs/plugin-react');
|
|
212
|
+
plugins.push(reactPlugin());
|
|
213
|
+
} catch (err) {
|
|
214
|
+
if ((err as NodeJS.ErrnoException).code === 'MODULE_NOT_FOUND') {
|
|
215
|
+
throw new Error(`
|
|
216
|
+
@storybook/builder-vite requires @vitejs/plugin-react to be installed when using @storybook/react.
|
|
217
|
+
Please install it and start storybook again.
|
|
218
|
+
`);
|
|
219
|
+
}
|
|
220
|
+
throw err;
|
|
221
|
+
}
|
|
222
|
+
|
|
216
223
|
const { reactDocgen: reactDocgenOption, reactDocgenTypescriptOptions } = await presets.apply(
|
|
217
224
|
'typescript',
|
|
218
225
|
{} as TypescriptConfig
|