CLI: Support community builders in sb init

[shilman]

Issue: N/A

What I did

Now sb init --builder can take an arbitrary package such as storybook-builder-vite. It will add it to main.js and also install it as a dependency.

The "core" builders of webpack4 and webpack5 are also supported

How to test

npm init @vitejs/app # choose react
cd vite-project
/path/to/storybook/lib/cli/bin/index.js init --builder storybook-addon-vite

[yannbf]

Overall it looks good, I'm just wondering what happens if you pass a wrong builder like --builder foo

[shilman]

@yannbf Then it tries to install a package called foo and fails 😉

[yannbf]

@yannbf Then it tries to install a package called foo and fails 😉

Yea, I hope in that case nothing would happen (rollback with no files generated etc) and the user could just rerun the command with the correct name, although I don't think that's the case.
If the dependency does succeed to install (funny enough, foo is a package!), then it will be applied to mainjs even though it's not correct. I guess this is an edge case, something to improve later on.

[vasileermicioi]

npx [email protected] init --builder storybook-addon-vite gives an error npm ERR! 404 Not Found - GET https://registry.npmjs.org/storybook-addon-vite - Not found

[yannbf]

Hey @vasileermicioi I believe the correct package name is storybook-builder-vite. Can you try that out?

[vasileermicioi]

yes, it works with npx [email protected] init --builder storybook-builder-vite

as a side note, good performance for yarn storybook, now takes 8-9 seconds on my PC versus 18-20 seconds before

[vasileermicioi]

with vite builder hmr is not working for stories :(

[yannbf]

Thanks for your input! However, keep in mind that the vite builder is from the community and not oficial from storybook, so it's best to give feedback in the builder repository. The builder is very fresh, it's still in version 0.0.3 and will likely be polished as the time goes by.

There's an issue related to HMR in the repo already: storybookjs/builder-vite#3