Storybook Framework Support

[lanesawyer]

🙋 Storybook Framework Support

Storybook is a practically the industry standard for building components, and in their upcoming version 7.0 they've announced support for a generalized framework pattern to make it easier for frameworks and build tools to hook into their ecosystem! You can find the announcement blog here and the docs for contributing a framework here.

It would be amazing if Parcel had a plugin for Storybook. Right now I'm running Parcel for my application but Storybook is still using Webpack. While it works fine enough, it would be so nice to get the speed of Parcel into Storybook and to standardize the underlying tools used between my application and Storybook.

🤔 Expected Behavior

Parcel would be a supported tool in the Storybook ecosystem.

😯 Current Behavior

Parcel is not a supported tool in the Storybook ecosystem.

💁 Possible Solution

The overview for contributing a framework can be found on this documentation page. I've linked to the React one but the docs are all pretty similar regardless of the front-end framework being used.

Since it's newly announced I'm not quite sure what the actual work looks like or how onerous this would be to build or maintain, but I thought I'd throw this out there since I think it would be a major feather in Parcel's cap to support one of the most popular component library tools out there!

🔦 Context

As I mentioned earlier, my application is using Parcel but all our Storybook components are using their Webpack configuration. Ideally Parcel would be the underlying bundler for our whole stack (which uses React in the application), in order to reduce the chance of any bugs or differences between my application and Storybook that could come from using different bundler/build tools.

[devongovett]

I haven't looked at the new docs you linked to, but I recently wrote a builder plugin for storybook using parcel for another project I work on. With a little more work it could probably be extracted into something general purpose. https://github.com/adobe/react-spectrum/tree/main/packages/dev/storybook-builder-parcel

[mischnic]

I tried to update that to the upcoming storybook 7 (which apparently moves to a lazily loading stories by default via storyStoreV7, so requires a completely different boilerplate): https://github.com/mischnic/storybook-parcel

The basic cases work (both for the legacy and modern approach), the biggest outstanding problem was getting HMR to work with the lazy version: https://github.com/mischnic/storybook-parcel/blob/1c291a17b47488abdffd14911084597128c339ec/packages/storybook-builder-parcel/gen-preview-modern.js#L33-L58

[lanesawyer]

@mischnic, any luck on your version? I've been tempted to start trying to build an integration myself but I'm curious if you're on the cusp of it working or if it needs a new approach since it's been a while and code has changed.

Unfortunately, he last version of Storybook v6 had a breaking change that prevents anyone from using TypeScript 5.0 or above, so my team is getting antsy about being stuck at TypeScript 4.9...

They're thinking of swapping Parcel for Vite due to Storybook being more integral to the product than Parcel 😬

I'd rather that not happen, since I really like Parcel!

[devongovett]

This is now available in https://github.com/parcel-bundler/storybook