Update useSWC docs

- Add to API reference
- Update related content/snippets

docs/api/main-config-core.md

@@ -35,6 +35,14 @@ Type:
 
 Configures Storybook's builder, [Vite](../builders/vite.md) or [Webpack](../builders/webpack.md).
 
+<div class="aside">
+
+💡 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.
+
+</div>
+
 <!-- prettier-ignore-start -->
 
 <CodeSnippets

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).
-
 <!-- prettier-ignore-start -->
 
 <CodeSnippets
@@ -22,3 +20,38 @@ For available frameworks and their options, see their respective [documentation]
 />
 
 <!-- prettier-ignore-end -->
+
+## `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<string, any>`
+
+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<string, any>`
+
+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.
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/main-config-framework-options-builder-use-swc.js.mdx',
+    'common/main-config-framework-options-builder-use-swc.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->

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:
 
 <!-- prettier-ignore-start -->
 
 <CodeSnippets
   paths={[
-    'common/storybook-enable-swc-loader.js.mdx',
-    'common/storybook-enable-swc-loader.ts.mdx',
+    'common/main-config-framework-options-builder-use-swc.js.mdx',
+    'common/main-config-framework-options-builder-use-swc.ts.mdx',
   ]}
 />
 
 <!-- prettier-ignore-end -->
 
-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.

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 <br/> `features: { storyStoreV7: true }`                   |
 | `buildStoriesJson`    | Generates a `stories.json` file to help story loading with the on-demand mode <br/> `features: { buildStoriesJson: true }`                                        |
 | `legacyMdx1`          | Enables support for MDX version 1 as a fallback. Requires [`@storybook/mdx1-csf`](https://github.com/storybookjs/mdx1-csf) <br/> `features: { legacyMdx1: true }` |
-| `useSWC`              | Enables experimental support for [SWC](https://swc.rs/) as a Babel alternative for Webpack-based projects<br/> `builder: { useSWC: true }`                        |
 
 ## Configure story loading
 

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',
-  ],
 };
 ```

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;