CLI: Support known builder & renderer but unknown framework

[shilman]

In Storybook 7.0 we are introducing the concept of Frameworks, which are fully specified storybook configurations including a renderer (e.g. preact), a builder (e.g. vite), and some other presets.

We've recently updated the CLI to handle this new structure in sb init/sb repro/etc. However the new code throws an error when it can't find a framework matching the user's configuration. Instead, it should have some fallback behavior, TBD. This behavior should be consistent with the to-be-designed "framework eject" feature.

Proposal

core: {
  builder: 'builder-name',
  renderer: 'renderer-name',
}

To support this, we would need to add support for a new field core.renderer which would effectively be another addon placed before the contents of addons (just like framework is implemented). core.builder is already supported.

[domyen]

In cases where there isn't a predefined version, perhaps the CLI can ask the user to eject their own custom pair of renderer & builder?

This project uses Marko and Vite. Storybook doesn't have an automatic configuration for this pair of libraries yet.
Would you like to create your own configuration?
Y/N

#if marko renderer exists
	We found a Marko renderer to render your component. Add it to your config?
	Y/N
#else 
	We couldn't find a renderer for your component. Choose from an existing renderer or create your own.
	[ React, HTML, Vue, etc..., Create your own »]
# endif

#if Vite builder exists
	We found a Vite builder to build your component code. Add it to your config?
	Y/N
#else 
	We couldn't find a builder for your component. Choose from an existing builder or create your own.
	[Webpack4, Webpack5, Snowpack, etc..., Create your own »]
# endif

[SardukarSilver]

any chance it will be fixed?

[yannbf]

For whoever works on this, users end up having the following error message:
Sorry, for now, you can not do this, please use a framework such as @storybook/react-webpack5

Here's the location: baseGenerator. We should try and make the CLI more interactive like Dom's suggestion above!

[matthewbub]

Hi all 👋 thank you for linking this issue in the CLI error. Is there any sort of work-around for this for the immediate time being?

I'm seeing this in a clean vite app:

 npx sb init --builder @storybook/builder-vite

Need to install the following packages:
  sb@7.0.11
Ok to proceed? (y) 

 storybook init - the simplest way to add a Storybook to your project. 

 • Detecting project type. ✓
(node:39669) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
 • Adding Storybook support to your "React" app
     Error: Sorry, for now, you can not do this, please use a framework such as @storybook/react-webpack5

https://github.com/storybookjs/storybook/issues/18360
    at baseGenerator (/Users/hi-matbub/.npm/_npx/d28cfb4b54958d89/node_modules/@storybook/cli/dist/generate.js:42:11013)
    at async generator3 (/Users/hi-matbub/.npm/_npx/d28cfb4b54958d89/node_modules/@storybook/cli/dist/generate.js:50:5065)
    at async installStorybook (/Users/hi-matbub/.npm/_npx/d28cfb4b54958d89/node_modules/@storybook/cli/dist/generate.js:332:791)
    at async doInitiate (/Users/hi-matbub/.npm/_npx/d28cfb4b54958d89/node_modules/@storybook/cli/dist/generate.js:337:707)
    at async withTelemetry (/Users/hi-matbub/.npm/_npx/d28cfb4b54958d89/node_modules/@storybook/core-server/dist/index.js:35:3422)
    at async initiate (/Users/hi-matbub/.npm/_npx/d28cfb4b54958d89/node_modules/@storybook/cli/dist/generate.js:348:109)

The repo if that is needed: https://github.com/9mbs/connect-readme/tree/main/workspaces/components

[yannbf]

Hey @9mbs could you please just try npx storybook@latest init? The configuration should be automatically detected, or you would get a prompt, so there's no need to pass --builder anymore. Could you also please share where you got the npx sb init --builder @storybook/builder-vite command from?

[shilman]

Yowza!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.12 containing PR #22559 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb@latest upgrade