From 21c3101f450ddc08f219558c4ad3160c23b681de Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Thu, 18 Jan 2024 13:51:05 +0000 Subject: [PATCH 1/4] Initial changes for webpack addons --- docs/addons/writing-presets.md | 4 ++ docs/api/main-config-babel-default.md | 4 +- docs/api/main-config-babel.md | 10 +++- docs/api/main-config-swc.md | 4 +- docs/builders/webpack.md | 58 +++++++++++++++++++ ...don-compiler-babel-auto-install.npm.js.mdx | 3 + ...on-compiler-babel-auto-install.pnpm.js.mdx | 3 + ...on-compiler-babel-auto-install.yarn.js.mdx | 3 + ...addon-compiler-swc-auto-install.npm.js.mdx | 3 + ...ddon-compiler-swc-auto-install.pnpm.js.mdx | 3 + ...ddon-compiler-swc-auto-install.yarn.js.mdx | 3 + 11 files changed, 95 insertions(+), 3 deletions(-) create mode 100644 docs/snippets/common/storybook-addon-compiler-babel-auto-install.npm.js.mdx create mode 100644 docs/snippets/common/storybook-addon-compiler-babel-auto-install.pnpm.js.mdx create mode 100644 docs/snippets/common/storybook-addon-compiler-babel-auto-install.yarn.js.mdx create mode 100644 docs/snippets/common/storybook-addon-compiler-swc-auto-install.npm.js.mdx create mode 100644 docs/snippets/common/storybook-addon-compiler-swc-auto-install.pnpm.js.mdx create mode 100644 docs/snippets/common/storybook-addon-compiler-swc-auto-install.yarn.js.mdx diff --git a/docs/addons/writing-presets.md b/docs/addons/writing-presets.md index 4c7ae3be3843..eaa3da082eb5 100644 --- a/docs/addons/writing-presets.md +++ b/docs/addons/writing-presets.md @@ -57,7 +57,9 @@ To customize Storybook's Babel configuration and add support for additional feat + The Babel configuration is only applied to frameworks that use Babel internally. If you enable it for a framework that uses a different compiler, like [SWC](https://swc.rs/) or [esbuild](https://esbuild.github.io/), it will be ignored. + ### Builders @@ -199,6 +201,8 @@ However, if you need, you can also customize the template used by Storybook to r As Storybook relies on [esbuild](https://esbuild.github.io/) instead of Webpack to build the UI, presets that depend on the `managerWebpack` API to configure the manager or load additional files other than CSS or images will no longer work. We recommend removing it from your preset and adjusting your configuration to convert any additional files to JavaScript. +**Learn more about the Storybook addon ecosystem** + - [Types of addons](./addon-types.md) for other types of addons - [Writing addons](./writing-addons.md) for the basics of addon development - Presets for preset development diff --git a/docs/api/main-config-babel-default.md b/docs/api/main-config-babel-default.md index b79867e1dc34..5145e9e90c1f 100644 --- a/docs/api/main-config-babel-default.md +++ b/docs/api/main-config-babel-default.md @@ -26,7 +26,9 @@ To adjust your Storybook's Babel setup directly—not via an addon—use [`babel ## `Babel.Config` -See [Babel docs](https://babeljs.io/docs/options). +The options provided by [Babel](https://babeljs.io/) are only applicable if you've enabled the [`@storybook/addon-webpack5-compiler-babel`](https://storybook.js.org/addons/@storybook/addon-webpack5-compiler-babel) addon. + + ## `Options` diff --git a/docs/api/main-config-babel.md b/docs/api/main-config-babel.md index a84a938b5a35..65596798bf4f 100644 --- a/docs/api/main-config-babel.md +++ b/docs/api/main-config-babel.md @@ -27,7 +27,15 @@ Customize Storybook's [Babel](https://babeljs.io/) setup. ## `Babel.Config` -See [Babel docs](https://babeljs.io/docs/options). +The options provided by [Babel](https://babeljs.io/) are only applicable if you've enabled the [`@storybook/addon-webpack5-compiler-babel`](https://storybook.js.org/addons/@storybook/addon-webpack5-compiler-babel) addon. + + + +If you have an existing Babel configuration file (e.g., `.babelrc`), it will be automatically detected and used by Storybook without any additional configuration required. + + + + ## `Options` diff --git a/docs/api/main-config-swc.md b/docs/api/main-config-swc.md index ffd91ddbc7fb..3069d6c93cdc 100644 --- a/docs/api/main-config-swc.md +++ b/docs/api/main-config-swc.md @@ -21,7 +21,9 @@ Customize Storybook's [SWC](https://swc.rs/) setup. ## `SWC.Options` -See SWC's [documentation](https://swc.rs/) for more information. +The options provided by [SWC](https://swc.rs/) are only applicable if you've enabled the [`@storybook/addon-webpack5-compiler-swc`](https://storybook.js.org/addons/@storybook/addon-webpack5-compiler-swc) addon. + + ## Options diff --git a/docs/builders/webpack.md b/docs/builders/webpack.md index dcf545175b56..43631084f126 100644 --- a/docs/builders/webpack.md +++ b/docs/builders/webpack.md @@ -41,6 +41,62 @@ Storybook's Webpack configuration is based on [Webpack 5](https://webpack.js.org When Storybook starts, it automatically merges the configuration into its own. However, when providing the `webpackFinal` configuration element, you're responsible for merging the configuration yourself. We recommend that you handle the changes to the `config` object responsibly, preserving both the `entry` and `output` properties. +## Compiler support + +Out of the box, Storybook provides a compiler-agnostic approach to bundling your Storybook, allowing you to use the same tooling you use to bundle your application (e.g., [Babel](https://babeljs.io/), [SWC](https://swc.rs/)). However, if you need to use a custom compiler, you can use the `core.compiler` configuration option to provide a custom compiler. For example: + +### SWC + +If you've enabled Storybook to use SWC as your compiler, you can use the [`@storybook/addon-webpack5-compiler-swc`](https://storybook.js.org/addons/@storybook/addon-webpack5-compiler-swc) addon to provide additional configuration options. Enabling the addon will automatically configure Storybook to use SWC. + +Run the following command to set up the addon automatically: + + + + + + + + + + + +Additional options can be provided to customize the SWC configuration. See the [SWC API documentation](../api/main-config-swc.md) for more information. + + + +### Babel + +If you're working with a project that relies on Babel's tooling to provide support for specific features, including TypeScript or other modern JavaScript features, you can use the [`@storybook/addon-webpack5-compiler-babel`](https://storybook.js.org/addons/@storybook/addon-webpack5-compiler-babel) addon to allow you to include them in your Storybook to ensure compatibility with your project. Run the following command to set up the addon automatically: + + + + + + + + + +When enabled, the addon will adjust the Webpack configuration to use the [`babel-loader`](https://webpack.js.org/loaders/babel-loader/) as the default loader for JavaScript and TypeScript files and will detect and use your project's Babel configuration. + + + +Additional options can be provided to customize the Babel configuration. See the [`babel` API documentation](../api/main-config-swc.md) for more information, or if you're working on an addon, the [`babelDefault` documentation](../addons/writing-presets.md#babel) for more information. + + + #### Working with Webpack plugins Another way to customize your Storybook configuration is to add a custom plugin or loader to help with code optimization, asset management, or other tasks. Nevertheless, since Storybook relies on the `HtmlWebpackPlugin` to generate the preview page, we recommend that you append the changes to the `config.plugins` array rather than overwriting it. For example: @@ -107,6 +163,8 @@ Additionally, if you're generating a [static build](../api/cli-options.md#build) + + ## What about Webpack 4 support? Support for Webpack 4 has been removed and is no longer being maintained. If you're upgrading your Storybook, it will automatically use Webpack 5 and attempt to migrate your configuration. However, if you're working with a custom Webpack configuration, you may need to update it to work with Webpack 5. The migration process is necessary to ensure that your project runs smoothly with the latest version of Storybook. You can follow the instructions provided on the Webpack [website](https://webpack.js.org/migrate/5/) to update your configuration. diff --git a/docs/snippets/common/storybook-addon-compiler-babel-auto-install.npm.js.mdx b/docs/snippets/common/storybook-addon-compiler-babel-auto-install.npm.js.mdx new file mode 100644 index 000000000000..35d5d3444177 --- /dev/null +++ b/docs/snippets/common/storybook-addon-compiler-babel-auto-install.npm.js.mdx @@ -0,0 +1,3 @@ +```sh +npx storybook@latest add @storybook/addon-webpack5-compiler-babel +``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-addon-compiler-babel-auto-install.pnpm.js.mdx b/docs/snippets/common/storybook-addon-compiler-babel-auto-install.pnpm.js.mdx new file mode 100644 index 000000000000..f053e76b164f --- /dev/null +++ b/docs/snippets/common/storybook-addon-compiler-babel-auto-install.pnpm.js.mdx @@ -0,0 +1,3 @@ +```sh +pnpm dlx storybook@latest add @storybook/addon-webpack5-compiler-babel +``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-addon-compiler-babel-auto-install.yarn.js.mdx b/docs/snippets/common/storybook-addon-compiler-babel-auto-install.yarn.js.mdx new file mode 100644 index 000000000000..840fadbb28a9 --- /dev/null +++ b/docs/snippets/common/storybook-addon-compiler-babel-auto-install.yarn.js.mdx @@ -0,0 +1,3 @@ +```sh +yarn dlx storybook@latest add @storybook/addon-webpack5-compiler-babel +``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-addon-compiler-swc-auto-install.npm.js.mdx b/docs/snippets/common/storybook-addon-compiler-swc-auto-install.npm.js.mdx new file mode 100644 index 000000000000..049dc25bcc70 --- /dev/null +++ b/docs/snippets/common/storybook-addon-compiler-swc-auto-install.npm.js.mdx @@ -0,0 +1,3 @@ +```sh +npx storybook@latest add @storybook/addon-webpack5-compiler-swc +``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-addon-compiler-swc-auto-install.pnpm.js.mdx b/docs/snippets/common/storybook-addon-compiler-swc-auto-install.pnpm.js.mdx new file mode 100644 index 000000000000..8530e0279e06 --- /dev/null +++ b/docs/snippets/common/storybook-addon-compiler-swc-auto-install.pnpm.js.mdx @@ -0,0 +1,3 @@ +```sh +pnpm dlx storybook@latest add @storybook/addon-webpack5-compiler-swc +``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-addon-compiler-swc-auto-install.yarn.js.mdx b/docs/snippets/common/storybook-addon-compiler-swc-auto-install.yarn.js.mdx new file mode 100644 index 000000000000..299cdfe02949 --- /dev/null +++ b/docs/snippets/common/storybook-addon-compiler-swc-auto-install.yarn.js.mdx @@ -0,0 +1,3 @@ +```sh +yarn dlx storybook@latest add @storybook/addon-webpack5-compiler-swc +``` \ No newline at end of file From 1304d6f64f09cb7a8352db091d70823bc44e0c0e Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Thu, 18 Jan 2024 16:36:55 +0000 Subject: [PATCH 2/4] Docs: Webpack updates for addons --- docs/api/main-config-babel.md | 2 - docs/api/main-config-swc.md | 2 - docs/builders/webpack.md | 102 +++++++++--------- ...don-compiler-babel-auto-install.npm.js.mdx | 2 +- ...on-compiler-babel-auto-install.pnpm.js.mdx | 2 +- ...on-compiler-babel-auto-install.yarn.js.mdx | 2 +- ...addon-compiler-swc-auto-install.npm.js.mdx | 2 +- ...ddon-compiler-swc-auto-install.pnpm.js.mdx | 2 +- ...ddon-compiler-swc-auto-install.yarn.js.mdx | 2 +- 9 files changed, 54 insertions(+), 64 deletions(-) diff --git a/docs/api/main-config-babel.md b/docs/api/main-config-babel.md index 65596798bf4f..a9c41ae382aa 100644 --- a/docs/api/main-config-babel.md +++ b/docs/api/main-config-babel.md @@ -35,8 +35,6 @@ If you have an existing Babel configuration file (e.g., `.babelrc`), it will be - - ## `Options` Type: `{ configType?: 'DEVELOPMENT' | 'PRODUCTION' }` diff --git a/docs/api/main-config-swc.md b/docs/api/main-config-swc.md index 3069d6c93cdc..0a102bf0cf13 100644 --- a/docs/api/main-config-swc.md +++ b/docs/api/main-config-swc.md @@ -23,8 +23,6 @@ Customize Storybook's [SWC](https://swc.rs/) setup. The options provided by [SWC](https://swc.rs/) are only applicable if you've enabled the [`@storybook/addon-webpack5-compiler-swc`](https://storybook.js.org/addons/@storybook/addon-webpack5-compiler-swc) addon. - - ## Options Type: `{ configType?: 'DEVELOPMENT' | 'PRODUCTION' }` diff --git a/docs/builders/webpack.md b/docs/builders/webpack.md index 43631084f126..13a9f5e78259 100644 --- a/docs/builders/webpack.md +++ b/docs/builders/webpack.md @@ -41,133 +41,123 @@ Storybook's Webpack configuration is based on [Webpack 5](https://webpack.js.org When Storybook starts, it automatically merges the configuration into its own. However, when providing the `webpackFinal` configuration element, you're responsible for merging the configuration yourself. We recommend that you handle the changes to the `config` object responsibly, preserving both the `entry` and `output` properties. -## Compiler support - -Out of the box, Storybook provides a compiler-agnostic approach to bundling your Storybook, allowing you to use the same tooling you use to bundle your application (e.g., [Babel](https://babeljs.io/), [SWC](https://swc.rs/)). However, if you need to use a custom compiler, you can use the `core.compiler` configuration option to provide a custom compiler. For example: - -### SWC - -If you've enabled Storybook to use SWC as your compiler, you can use the [`@storybook/addon-webpack5-compiler-swc`](https://storybook.js.org/addons/@storybook/addon-webpack5-compiler-swc) addon to provide additional configuration options. Enabling the addon will automatically configure Storybook to use SWC. +#### Working with Webpack plugins -Run the following command to set up the addon automatically: +Another way to customize your Storybook configuration is to add a custom plugin or loader to help with code optimization, asset management, or other tasks. Nevertheless, since Storybook relies on the `HtmlWebpackPlugin` to generate the preview page, we recommend that you append the changes to the `config.plugins` array rather than overwriting it. For example: - - - - -Additional options can be provided to customize the SWC configuration. See the [SWC API documentation](../api/main-config-swc.md) for more information. - - +Additionally, when working with Webpack loaders that don't explicitly include specific file extensions (i.e., via the `test` property), you should `exclude` the `.ejs` file extension for that loader. -### Babel +### Import a custom Webpack configuration -If you're working with a project that relies on Babel's tooling to provide support for specific features, including TypeScript or other modern JavaScript features, you can use the [`@storybook/addon-webpack5-compiler-babel`](https://storybook.js.org/addons/@storybook/addon-webpack5-compiler-babel) addon to allow you to include them in your Storybook to ensure compatibility with your project. Run the following command to set up the addon automatically: +If you already have an existing Webpack configuration file that you need to reuse with Storybook, you can import it and merge it into the default configuration. For example: - - -When enabled, the addon will adjust the Webpack configuration to use the [`babel-loader`](https://webpack.js.org/loaders/babel-loader/) as the default loader for JavaScript and TypeScript files and will detect and use your project's Babel configuration. - - + -Additional options can be provided to customize the Babel configuration. See the [`babel` API documentation](../api/main-config-swc.md) for more information, or if you're working on an addon, the [`babelDefault` documentation](../addons/writing-presets.md#babel) for more information. +Projects scaffolded based on generators may require that you import their specific Webpack configuration files. We suggest reading your generator's documentation for more information. -#### Working with Webpack plugins +### Debug Webpack configuration -Another way to customize your Storybook configuration is to add a custom plugin or loader to help with code optimization, asset management, or other tasks. Nevertheless, since Storybook relies on the `HtmlWebpackPlugin` to generate the preview page, we recommend that you append the changes to the `config.plugins` array rather than overwriting it. For example: +If you intend to debug the Webpack configuration used by Storybook, you can use the Storybook CLI to help you. If you're running in [development mode](../api/cli-options.md#dev), you can use the following command: -Additionally, when working with Webpack loaders that don't explicitly include specific file extensions (i.e., via the `test` property), you should `exclude` the `.ejs` file extension for that loader. - -### Import a custom Webpack configuration - -If you already have an existing Webpack configuration file that you need to reuse with Storybook, you can import it and merge it into the default configuration. For example: +Additionally, if you're generating a [static build](../api/cli-options.md#build) of your Storybook, you can use the following command: - - -Projects scaffolded based on generators may require that you import their specific Webpack configuration files. We suggest reading your generator's documentation for more information. +## Compiler support - +Out of the box, Storybook provides a compiler-agnostic approach to bundling your project, allowing you to use the same tooling you use to bundle your application (e.g., [Babel](https://babeljs.io/), [SWC](https://swc.rs/)), enabling efficient and performant component development within the ecosystem of Webpack 5-based projects. -### Debug Webpack configuration +### SWC -If you intend to debug the Webpack configuration used by Storybook, you can use the Storybook CLI to help you. If you're running in [development mode](../api/cli-options.md#dev), you can use the following command: +If you're working with a project built using [SWC](https://swc.rs/) for faster builds and improved performance, you can use the [`@storybook/addon-webpack5-compiler-swc`](https://storybook.js.org/addons/@storybook/addon-webpack5-compiler-swc) addon, allowing you the same performance benefits and compatibility with your project. Run the following command to set up the addon automatically: -Additionally, if you're generating a [static build](../api/cli-options.md#build) of your Storybook, you can use the following command: + + +Additional options can be provided to customize the SWC configuration. See the [SWC API documentation](../api/main-config-swc.md) for more information. + + + +When enabled, the addon will adjust the Webpack configuration to use the [`swc-loader`](https://swc.rs/docs/usage/swc-loader) as the default loader for JavaScript and TypeScript files and will detect and use your project's SWC configuration. + +### Babel + +If you're working with a project that relies on Babel's tooling to provide support for specific features, including TypeScript or other modern JavaScript features, you can use the [`@storybook/addon-webpack5-compiler-babel`](https://storybook.js.org/addons/@storybook/addon-webpack5-compiler-babel) addon to allow you to include them in your Storybook to ensure compatibility with your project. Run the following command to set up the addon automatically: - + -## What about Webpack 4 support? +Additional options can be provided to customize the Babel configuration. See the [`babel` API documentation](../api/main-config-babel.md) for more information, or if you're working on an addon, the [`babelDefault` documentation](../api/main-config-babel-default.md) for more information. -Support for Webpack 4 has been removed and is no longer being maintained. If you're upgrading your Storybook, it will automatically use Webpack 5 and attempt to migrate your configuration. However, if you're working with a custom Webpack configuration, you may need to update it to work with Webpack 5. The migration process is necessary to ensure that your project runs smoothly with the latest version of Storybook. You can follow the instructions provided on the Webpack [website](https://webpack.js.org/migrate/5/) to update your configuration. + + +When enabled, the addon will adjust the Webpack configuration to use the [`babel-loader`](https://webpack.js.org/loaders/babel-loader/) as the default loader for JavaScript and TypeScript files and will detect and use your project's Babel configuration. ## Troubleshooting @@ -203,6 +193,10 @@ However, if you're working with a framework that provides a default aliasing con As Storybook relies on [esbuild](https://esbuild.github.io/) to build its internal manager, support for bundling assets with the `managerWebpack` will no longer have an impact on the Storybook UI. We recommend removing existing `managerWebpack` configuration elements from your Storybook configuration file and bundling assets other than images or CSS into JavaScript beforehand. +### Storybook doesn't run with Webpack 4 + +Support for Webpack 4 has been removed and is no longer being maintained. If you're upgrading your Storybook, it will automatically use Webpack 5 and attempt to migrate your configuration. However, if you're working with a custom Webpack configuration, you may need to update it to work with Webpack 5. The migration process is necessary to ensure that your project runs smoothly with the latest version of Storybook. You can follow the instructions provided on the Webpack [website](https://webpack.js.org/migrate/5/) to update your configuration. + #### Learn more about builders - [Vite builder](./vite.md) for bundling with Vite diff --git a/docs/snippets/common/storybook-addon-compiler-babel-auto-install.npm.js.mdx b/docs/snippets/common/storybook-addon-compiler-babel-auto-install.npm.js.mdx index 35d5d3444177..334013ebdfba 100644 --- a/docs/snippets/common/storybook-addon-compiler-babel-auto-install.npm.js.mdx +++ b/docs/snippets/common/storybook-addon-compiler-babel-auto-install.npm.js.mdx @@ -1,3 +1,3 @@ ```sh npx storybook@latest add @storybook/addon-webpack5-compiler-babel -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-addon-compiler-babel-auto-install.pnpm.js.mdx b/docs/snippets/common/storybook-addon-compiler-babel-auto-install.pnpm.js.mdx index f053e76b164f..bb5e796ab2f1 100644 --- a/docs/snippets/common/storybook-addon-compiler-babel-auto-install.pnpm.js.mdx +++ b/docs/snippets/common/storybook-addon-compiler-babel-auto-install.pnpm.js.mdx @@ -1,3 +1,3 @@ ```sh pnpm dlx storybook@latest add @storybook/addon-webpack5-compiler-babel -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-addon-compiler-babel-auto-install.yarn.js.mdx b/docs/snippets/common/storybook-addon-compiler-babel-auto-install.yarn.js.mdx index 840fadbb28a9..c29afff2cedd 100644 --- a/docs/snippets/common/storybook-addon-compiler-babel-auto-install.yarn.js.mdx +++ b/docs/snippets/common/storybook-addon-compiler-babel-auto-install.yarn.js.mdx @@ -1,3 +1,3 @@ ```sh yarn dlx storybook@latest add @storybook/addon-webpack5-compiler-babel -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-addon-compiler-swc-auto-install.npm.js.mdx b/docs/snippets/common/storybook-addon-compiler-swc-auto-install.npm.js.mdx index 049dc25bcc70..8161ee59d97d 100644 --- a/docs/snippets/common/storybook-addon-compiler-swc-auto-install.npm.js.mdx +++ b/docs/snippets/common/storybook-addon-compiler-swc-auto-install.npm.js.mdx @@ -1,3 +1,3 @@ ```sh npx storybook@latest add @storybook/addon-webpack5-compiler-swc -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-addon-compiler-swc-auto-install.pnpm.js.mdx b/docs/snippets/common/storybook-addon-compiler-swc-auto-install.pnpm.js.mdx index 8530e0279e06..5f70d2b8d773 100644 --- a/docs/snippets/common/storybook-addon-compiler-swc-auto-install.pnpm.js.mdx +++ b/docs/snippets/common/storybook-addon-compiler-swc-auto-install.pnpm.js.mdx @@ -1,3 +1,3 @@ ```sh pnpm dlx storybook@latest add @storybook/addon-webpack5-compiler-swc -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-addon-compiler-swc-auto-install.yarn.js.mdx b/docs/snippets/common/storybook-addon-compiler-swc-auto-install.yarn.js.mdx index 299cdfe02949..ceb0554462a0 100644 --- a/docs/snippets/common/storybook-addon-compiler-swc-auto-install.yarn.js.mdx +++ b/docs/snippets/common/storybook-addon-compiler-swc-auto-install.yarn.js.mdx @@ -1,3 +1,3 @@ ```sh yarn dlx storybook@latest add @storybook/addon-webpack5-compiler-swc -``` \ No newline at end of file +``` From bd4e507033797a997f03ccf6a99cc66293803928 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Thu, 18 Jan 2024 18:37:06 +0000 Subject: [PATCH 3/4] Removes comment from documentation and links --- docs/api/main-config-babel-default.md | 4 +--- docs/api/main-config-babel.md | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/docs/api/main-config-babel-default.md b/docs/api/main-config-babel-default.md index 5145e9e90c1f..94f34878ac63 100644 --- a/docs/api/main-config-babel-default.md +++ b/docs/api/main-config-babel-default.md @@ -26,9 +26,7 @@ To adjust your Storybook's Babel setup directly—not via an addon—use [`babel ## `Babel.Config` -The options provided by [Babel](https://babeljs.io/) are only applicable if you've enabled the [`@storybook/addon-webpack5-compiler-babel`](https://storybook.js.org/addons/@storybook/addon-webpack5-compiler-babel) addon. - - +The options provided by [Babel](https://babeljs.io/docs/options) are only applicable if you've enabled the [`@storybook/addon-webpack5-compiler-babel`](https://storybook.js.org/addons/@storybook/addon-webpack5-compiler-babel) addon. ## `Options` diff --git a/docs/api/main-config-babel.md b/docs/api/main-config-babel.md index a9c41ae382aa..d7e9c865a0e0 100644 --- a/docs/api/main-config-babel.md +++ b/docs/api/main-config-babel.md @@ -27,7 +27,7 @@ Customize Storybook's [Babel](https://babeljs.io/) setup. ## `Babel.Config` -The options provided by [Babel](https://babeljs.io/) are only applicable if you've enabled the [`@storybook/addon-webpack5-compiler-babel`](https://storybook.js.org/addons/@storybook/addon-webpack5-compiler-babel) addon. +The options provided by [Babel](https://babeljs.io/docs/options) are only applicable if you've enabled the [`@storybook/addon-webpack5-compiler-babel`](https://storybook.js.org/addons/@storybook/addon-webpack5-compiler-babel) addon. From 51473f653ba2a30e4c9aee63bfc1a54583ba41f8 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Thu, 18 Jan 2024 19:41:52 +0000 Subject: [PATCH 4/4] Minor tweaks to wording --- docs/builders/webpack.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/builders/webpack.md b/docs/builders/webpack.md index 13a9f5e78259..e63741290eec 100644 --- a/docs/builders/webpack.md +++ b/docs/builders/webpack.md @@ -109,11 +109,11 @@ Additionally, if you're generating a [static build](../api/cli-options.md#build) ## Compiler support -Out of the box, Storybook provides a compiler-agnostic approach to bundling your project, allowing you to use the same tooling you use to bundle your application (e.g., [Babel](https://babeljs.io/), [SWC](https://swc.rs/)), enabling efficient and performant component development within the ecosystem of Webpack 5-based projects. +Storybook takes a compiler-agnostic approach to bundling. This allows you to bring your own application bundler (e.g., [Babel](https://babeljs.io/), [SWC](https://swc.rs/)) and ensures compatibility within the vast ecosystem of Webpack 5-based projects. ### SWC -If you're working with a project built using [SWC](https://swc.rs/) for faster builds and improved performance, you can use the [`@storybook/addon-webpack5-compiler-swc`](https://storybook.js.org/addons/@storybook/addon-webpack5-compiler-swc) addon, allowing you the same performance benefits and compatibility with your project. Run the following command to set up the addon automatically: +If your project is built using [SWC](https://swc.rs/), use the [`@storybook/addon-webpack5-compiler-swc`](https://storybook.js.org/addons/@storybook/addon-webpack5-compiler-swc) addon. This addon increases ecosystem compatibility with Webpack 5 projects while maintaining high performance. Run the following command to set up the addon automatically: @@ -133,7 +133,7 @@ Additional options can be provided to customize the SWC configuration. See the [ -When enabled, the addon will adjust the Webpack configuration to use the [`swc-loader`](https://swc.rs/docs/usage/swc-loader) as the default loader for JavaScript and TypeScript files and will detect and use your project's SWC configuration. +When enabled, this addon adjusts the Webpack configuration to use the [`swc-loader`](https://swc.rs/docs/usage/swc-loader) for JavaScript and TypeScript files. Additionally, it will detect and use your project's SWC configuration. ### Babel @@ -157,7 +157,7 @@ Additional options can be provided to customize the Babel configuration. See the -When enabled, the addon will adjust the Webpack configuration to use the [`babel-loader`](https://webpack.js.org/loaders/babel-loader/) as the default loader for JavaScript and TypeScript files and will detect and use your project's Babel configuration. +When enabled, the addon will adjust the Webpack configuration to use the [`babel-loader`](https://webpack.js.org/loaders/babel-loader/) as the default loader for JavaScript and TypeScript files. Additionally, it will detect and use your project's Babel configuration. ## Troubleshooting