Storybook Builder Parcel

A Storybook Builder integration that uses Parcel as the bundler.

• Custom transformer to support React Fast Refresh in CSF story files. This enables you to edit your components or stories without losing state.
• Support for auto-generating controls and docs from TypeScript via react-docgen-typescript, with hot reloading when your types change.
• Enhances CSF with automatic annotation of original story source code and description

Setup

1. Install the dependencies:

npm install --save-dev storybook-react-parcel @parcel/config-storybook

2. Create a Parcel config file in your Storybook folder, e.g. .storybook/.parcelrc:

{
  "extends": "@parcel/config-storybook"
}

You can add additional Parcel configuration here if needed.

3. Configure Storybook to use Parcel in .storybook/main.js (or TS):

module.exports = {
  // ...
  framework: 'storybook-react-parcel'
};

4. Enable package exports in Parcel

  "@parcel/resolver-default": {
    "packageExports": true
  }

5. If you are using the storybook addon-a11y, you will need to patch it. See https://github.com/adobe/react-spectrum/pull/8272/commits/1e9a68a4e42463655742c41a64d612081c60ba20

See the example in this repo for more details.

Acknowledgements

The code in this repo is based on the official builder plugins for Webpack and Vite, initially ported to Parcel by Niklas Mischkulnig.