storybook-addon-swc

Storybook addon that improves build time by building with swc.

🗒 Examples

• webpack4
• webpack5

🚀 Installation

$ npm install -D storybook-addon-swc @swc/core

👏 Getting Started

Edit the .storybook/main.js file and register the addon.

module.exports = {
  addons: [
    'storybook-addon-swc',
  ],
};

🔧 Configurations

Additional configuration options can be passed as needed.

module.exports = {
  addons: [
    {
      name: 'storybook-addon-swc',
      options: {
        enable: true,
        enableSwcLoader: true,
        enableSwcMinify: true,
        swcLoaderOptions: {},
        swcMinifyOptions: {},
      },
    },
  ],
};

Options

| Name | Description | Type | Default Value | |--------------------|---------------------------------------------------------------------------------------------|----------------------------------------------------------|-----------------------------------------------------------------------------------------| | enable | If set to false, this add-on will be disabled. | boolean | true | | enableSwcLoader | If set to false, swc-loader is disabled and babel-loader is used. | boolean | true | | enableSwcMinify | If set to false, minify using swc is disabled and minify using conventional terser is used. | boolean | true | | swcLoaderOptions | Options for swc loader. | object | see | | swcMinifyOptions | Options for swc minify. | object | see |

SWC Plugins

The SWC plugins feature is still experimental, but can be used by changing the settings as follows.

module.exports = {
  addons: [
    {
      name: 'storybook-addon-swc',
      options: {
        swcLoaderOptions: {
          jsc: {
            experimental: {
              plugins: [['plugin-name', {}]],
            },
          },
        },
      },
    },
  ],
};

🎓 Alternative

storybook-addon-turbo-build

This add-on replaces babel-loader with esbuild-loader.
It was used as a reference in the development of storybook-addon-swc.

storybook-builder-vite

This builder changes the build system of Storybook from Webpack to Vite.
Vite is very fast because it does not bundle during development.

🤝 Contributing

Contributions, issues and feature requests are welcome.

Feel free to check issues page if you want to contribute.

📝 License

Copyright © 2020 @Karibash.

This project is MIT licensed.