diff --git a/docs/api/main-config-core.md b/docs/api/main-config-core.md index abd14e892ffc..36ba83accc4c 100644 --- a/docs/api/main-config-core.md +++ b/docs/api/main-config-core.md @@ -35,6 +35,14 @@ Type: Configures Storybook's builder, [Vite](../builders/vite.md) or [Webpack](../builders/webpack.md). +
+ +💡 With the new [Framework API](./new-frameworks.md), [`framework.options.builder`](./main-config-framework.md#optionsbuilder) is now the preferred way to configure the builder. + +You should only use `core.builder.options` if you need to configure a builder that is not part of a framework. + +
+ -## `argTypeTargetsV7` (EXPERIMENTAL) +## `argTypeTargetsV7` + +(⚠️ **Experimental**) Type: `boolean` diff --git a/docs/api/main-config-framework.md b/docs/api/main-config-framework.md index 41eb7c9b26da..abf8e0ca2b5a 100644 --- a/docs/api/main-config-framework.md +++ b/docs/api/main-config-framework.md @@ -10,8 +10,6 @@ Required: `true` Configures Storybook based on a set of [framework-specific](../configure/frameworks.md) settings. -For available frameworks and their options, see their respective [documentation](https://github.com/storybookjs/storybook/tree/next/code/frameworks). - + +## `name` + +Type: `string` + +For available frameworks and their options, see their respective [documentation](https://github.com/storybookjs/storybook/tree/next/code/frameworks). + +## `options` + +Type: `Record` + +While many options are specific to a framework, there are some options that are shared across some frameworks, e.g. those that configure Storybook's [builder](./main-config-core.md#builder). + +### `options.builder` + +Type: `Record` + +Configures Storybook's builder, [Vite](../builders/vite.md) or [Webpack](../builders/webpack.md). + +#### `options.builder.useSWC` + +(⚠️ **Experimental**) + +For frameworks made with the [Webpack](../builders/webpack.md) builder, this option allows you to use the [SWC](https://swc.rs/) compiler instead of [Babel](../configure/babel.md). + +When Storybook loads, it will update Webpack's configuration including the required loaders (e.g., [`TerserPlugin`](https://webpack.js.org/plugins/terser-webpack-plugin/), [`babel-loader`](https://webpack.js.org/loaders/babel-loader/)) with SWC equivalents (e.g., [`swc-loader`](https://swc.rs/docs/usage/swc-loader)) for bundling and minification. + + + + + + diff --git a/docs/configure/babel.md b/docs/configure/babel.md index 84f6093b6a5b..b497a28d4a31 100644 --- a/docs/configure/babel.md +++ b/docs/configure/babel.md @@ -133,19 +133,19 @@ When the command finishes running, it will display the available Babel configura For more info, please refer to the [Babel documentation](https://babeljs.io/docs/en/configuration#print-effective-configs). -### SWC fallback +### SWC alternative (experimental) -If you're working with a Webpack-based project and having issues with Babel configuration, you can opt into replacing Babel with the [SWC](https://swc.rs/) compiler. To do so, update your Storybook configuration file (e.g., `.storybook/main.js|ts`) to enable the experimental `useSWC` option: +If you're working with a Webpack-based project, you can opt into replacing Babel with the [SWC](https://swc.rs/) compiler, which can be faster for some projects. To do so, update your [Storybook configuration file](../api/main-config.md) (e.g., `.storybook/main.js|ts`) to enable the experimental `useSWC` option: -When Storybook loads, it will update Webpack's configuration including the required loaders (e.g., [`TerserPlugin`](https://webpack.js.org/plugins/terser-webpack-plugin/), [`babel-loader`](https://webpack.js.org/loaders/babel-loader/)) with SWC equivalents (e.g., [`swc-loader`](https://swc.rs/docs/usage/swc-loader)) for bundling and minification. +See the [`useSWC` API reference](../api/main-config-framework.md#optionsbuilderuseswc) for more information. diff --git a/docs/configure/overview.md b/docs/configure/overview.md index 2e01f9af5be6..57493ea78d83 100644 --- a/docs/configure/overview.md +++ b/docs/configure/overview.md @@ -56,7 +56,6 @@ Additionally, you can also provide additional feature flags to your Storybook co | `storyStoreV7` | Configures Storybook to load stories [on demand](#on-demand-story-loading), rather than during boot up
`features: { storyStoreV7: true }` | | `buildStoriesJson` | Generates a `stories.json` file to help story loading with the on-demand mode
`features: { buildStoriesJson: true }` | | `legacyMdx1` | Enables support for MDX version 1 as a fallback. Requires [`@storybook/mdx1-csf`](https://github.com/storybookjs/mdx1-csf)
`features: { legacyMdx1: true }` | -| `useSWC` | Enables experimental support for [SWC](https://swc.rs/) as a Babel alternative for Webpack-based projects
`builder: { useSWC: true }` | ## Configure story loading diff --git a/docs/snippets/common/storybook-enable-swc-loader.js.mdx b/docs/snippets/common/main-config-framework-options-builder-use-swc.js.mdx similarity index 74% rename from docs/snippets/common/storybook-enable-swc-loader.js.mdx rename to docs/snippets/common/main-config-framework-options-builder-use-swc.js.mdx index 757503657748..482fcc579176 100644 --- a/docs/snippets/common/storybook-enable-swc-loader.js.mdx +++ b/docs/snippets/common/main-config-framework-options-builder-use-swc.js.mdx @@ -12,10 +12,5 @@ export default { }, }, stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], - addons: [ - '@storybook/addon-links', - '@storybook/addon-essentials', - '@storybook/addon-interactions', - ], }; ``` diff --git a/docs/snippets/common/storybook-enable-swc-loader.ts.mdx b/docs/snippets/common/main-config-framework-options-builder-use-swc.ts.mdx similarity index 79% rename from docs/snippets/common/storybook-enable-swc-loader.ts.mdx rename to docs/snippets/common/main-config-framework-options-builder-use-swc.ts.mdx index 8a47a512aa83..c1d670f0f3a9 100644 --- a/docs/snippets/common/storybook-enable-swc-loader.ts.mdx +++ b/docs/snippets/common/main-config-framework-options-builder-use-swc.ts.mdx @@ -14,11 +14,6 @@ const config: StorybookConfig = { }, }, stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], - addons: [ - '@storybook/addon-links', - '@storybook/addon-essentials', - '@storybook/addon-interactions', - ], }; export default config;