Auto migration: Add compiler addons for Webpack5-based projects

[vanessayuenn]

This auto migration should make sure that for all Webpack5-based projects (except for Angular, CRA, Ember, and Next.js), either @storybook/addon-webpack5-compiler-babel or @storybook/addon-webpack5-compiler-swcis set up. Furthermore, we have to remove the frameworks.options.useSWC flag and consider its value to determine which addon must be set up.

Framework-specific migrations

Next.js

• Remove the frameworks.options.builder.useSWC flag
• Prompt-only the user that Storybook now behaves like Next.js. That means if a babel config file isn't available in the cwd, Storybook starts in SWC mode. If a Babelrc file is available, but experimental.forceSwcTransforms: true is set in the Next.js config, then Storybook will also start in SWC mode; otherwise, it will start in Babel mode.

Other Webpack5-based projects except Angular, CRA and Ember

If frameworks.options.builder.useSWC: true

• Remove the flag
• Setup @storybook/addon-webpack5-compiler-swc via npx storybook@next add @storybook/addon-webpack5-compiler-swc

If frameworks.options.builder.useSWC: false

• Remove the flag
• Setup @storybook/addon-webpack5-compiler-babel via npx storybook@next add @storybook/addon-webpack5-compiler-babel

If frameworks.options.builder.useSWC is not set

• Tell the user that Storybook's Webpack5 builder is compiler agnostic and that it doesn't depend on Babel anymore. Instead, the user can select one of the two official compiler addons. Make sure that the user understands when to pick which addon (Babel rich ecosystem, most likely the best fit if the user has an extensive Babel setup; SWC is faster and more straightforward regarding configuration)

For all cases

• Ensure the user understands how to switch compilers by removing one from the addons list and adding a new one via add command.