From b22c1acbe5a867f547107bd9367bde0916201f59 Mon Sep 17 00:00:00 2001 From: Kyle Gach Date: Thu, 8 Jun 2023 10:46:06 -0600 Subject: [PATCH] Update `useSWC` docs - Add to API reference - Update related content/snippets --- docs/api/main-config-core.md | 8 ++++ docs/api/main-config-framework.md | 37 ++++++++++++++++++- docs/configure/babel.md | 10 ++--- docs/configure/overview.md | 1 - ...-framework-options-builder-use-swc.js.mdx} | 5 --- ...-framework-options-builder-use-swc.ts.mdx} | 5 --- 6 files changed, 48 insertions(+), 18 deletions(-) rename docs/snippets/common/{storybook-enable-swc-loader.js.mdx => main-config-framework-options-builder-use-swc.js.mdx} (74%) rename docs/snippets/common/{storybook-enable-swc-loader.ts.mdx => main-config-framework-options-builder-use-swc.ts.mdx} (79%) diff --git a/docs/api/main-config-core.md b/docs/api/main-config-core.md index abd14e892ff..36ba83accc4 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. + +
+ + +## `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 84f6093b6a5..3e43fa5ff59 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-experimental) for more information. diff --git a/docs/configure/overview.md b/docs/configure/overview.md index 2e01f9af5be..57493ea78d8 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 75750365774..482fcc57917 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 8a47a512aa8..c1d670f0f3a 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;