Feature: Add Builder-Vite

[blowsie]

Is your feature request related to a problem? Please describe
ESM build tools are becoming ever more popular, we have the likes of Vite and Snowpack, which have significant performance and feature improvements over some of the offerings from other tools such as webpack.

Vue 3 and React both have first-class support from Vite

When developing a project with Vite you have to create a simple vite config, to add storybook you would have to maintain a webpack config also.

Describe the solution you'd like
To support Vite projects, ideally consuming the projects vite config.

Describe alternatives you've considered

• Nothing yet
• Adding configs for both webpack and vite in my project

Are you able to assist to bring the feature to reality?
I would happily contribute as much as I am technically capable, or provide demo cases and testing.

Additional context

Vite

https://vitejs.dev/
https://www.youtube.com/watch?v=xXrhg26VCSc

[shilman]

100% interested in exploring this. Our builder abstraction is still immature--lots to figure out to make this a reality.

[eirslett]

I'll just leave this link here: there is some community work going on for Vite support: https://github.com/SasanFarrokh/storybook/tree/vite-support

[shilman]

And here's a WIP strawman for how we plan to incorporate new builders into the Storybook ecosystem:

https://docs.google.com/document/d/1M3pFGLCnZLec78p3fFkWvei-ajnpn1BXjzjd93TGvRs/edit?usp=sharing

I'm hoping that we can agree on a mechanism for allowing community builders this week and release it in 6.3-alpha next week.

[shilman]

https://github.com/eirslett/storybook-builder-vite

[o-alexandrov]

Vite's builder from eirslett has an open HMR issue on the Storybook's side.
Reproducible with the example in this repo.

• HMR works for Vite-managed parts (actual components used in stories), but doesn't work for Storybook-managed parts (thru Webpack)
  • related issue
    • user claims this issue is also applicable to Svelte

Ideally, 3rd party builders replace Webpack completely; that's how I believe most of us would think @storybook/*/standalone should work.

• also would be great, if those, who are using the standalone version or 3rd party bundlers/builders, won't need to download the dependencies related to the default bundling (webpack 4, etc.)

[o-alexandrov]

@shilman could you please share @storybookjs plans on fixing it?

• so it'd be easier for Storybook users to make bundling-related decisions

Using nodemon to reload **/*.stories.* doesn't work, resulting in an error when files are updated and after trying random reload libraries, only a custom script with chokidar helps to manually close the process and run storybook again.

It'd be reassuring to know Storybook acknowledges the existence of HMR issue and plans to work on it thru community or itself.

[shilman]

@o-alexandrov is there an open issue in the storybook monorepo? if so, can you share a link, and if not, can you create one?

[shilman]

@o-alexandrov Ok I understand the question better now after chatting with @IanVS

This is primarily a vite-builder issue. Builders are 100% responsible for Storybook's preview iframe in the current architecture, and as far as I know have all the information they need to implement HMR for both components and stories.

There may be more changes needed on the Storybook side. For example, we've been making change on the storybook side to make our libraries/addons more ESM-friendly, driven by builder-vite (or some other builder-X) requirements. But until I hear otherwise this is not a Storybook issue.

@IanVS is going to start looking at this issue tomorrow in the vite builder. As usual, we will do our best to turn around any issues in Storybook core as quickly as possible to keep this work unblocked.

I'm going to close this issue for now, and further discussion on any aspect of the Vite builder can happen on the builder-vite repo: https://github.com/eirslett/storybook-builder-vite

I'll open a new issue if/when we decide to integrate builder-vite into core. Thanks!

[blowsie]

I just popped by to say, Vite is proving to be the next best thing since sliced bread, I hope that one day storybook officially runs on Vite by default ;)

[shilman]

@blowsie not ruling it out by any means!