Merge pull request #22861 from storybookjs/chore_add_swc_feature_flag

Chore: (Docs) Adds useSWC documentation as alternative to Babel

docs/configure/babel.md

@@ -115,6 +115,8 @@ However, when your Storybook refers to files outside of the current project dire
 
 ## Troubleshooting
 
+### Babel configuration not working
+
 To troubleshoot your Babel configuration, set the `BABEL_SHOW_CONFIG_FOR` environment variable. For example, to see how Storybook is transpiling your `.storybook/preview.js` file, add the following environment variable:
 
 ```sh
@@ -130,3 +132,20 @@ When the command finishes running, it will display the available Babel configura
 </div>
 
 For more info, please refer to the [Babel documentation](https://babeljs.io/docs/en/configuration#print-effective-configs).
+
+### SWC fallback
+
+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 exp experimental `useSWC` option:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-enable-swc-loader.js.mdx',
+    'common/storybook-enable-swc-loader.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.

docs/configure/overview.md

@@ -56,6 +56,7 @@ 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/storybook-enable-swc-loader.js.mdx

@@ -0,0 +1,21 @@
+```js
+// .storybook/main.js
+
+export default {
+  // Replace your-framework with the webpack-based framework you are using (e.g., react-webpack5)
+  framework: {
+    name: '@storybook/your-framework',
+    options: {
+      builder: {
+        useSWC: true,
+      },
+    },
+  },
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+};
+```

docs/snippets/common/storybook-enable-swc-loader.ts.mdx

@@ -0,0 +1,25 @@
+```ts
+// .storybook/main.ts
+
+// Replace your-framework with the webpack-based framework you are using (e.g., react-webpack5)
+import type { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
+  framework: {
+    name: '@storybook/your-framework',
+    options: {
+      builder: {
+        useSWC: true,
+      },
+    },
+  },
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+};
+
+export default config;
+```