Webpack5: Remove babel and SWC compiler from builder #25379
Conversation
valentinpalkovic
force-pushed
the
valentin/remove-babel-from-webpack5-builder
branch
from
e6df8ee to
ec5c571
Compare
valentinpalkovic
requested review from
shilman,
yannbf,
ndelangen and
jonniebigodes
There was a problem hiding this comment.
@valentinpalkovic, thanks for taking the time to update the documentation with this pull request. Appreciate it 🙏 ! I left some items for you to look into when you can. Also, I was wondering if we could either update the Webpack documentation or the compiler page with a small section mentioning the new addons to give them some relevance and avoiding having them getting buried in the migration guide. Let me know, and we'll take it from there.
There was a problem hiding this comment.
Great job @valentinpalkovic !! I added some minor edits to make it slightly less wordy
Co-authored-by: Michael Shilman <[email protected]>
Co-authored-by: Michael Shilman <[email protected]>
Co-authored-by: Michael Shilman <[email protected]>
Co-authored-by: Michael Shilman <[email protected]>
…-from-webpack5-builder
Co-authored-by: Michael Shilman <[email protected]>
Co-authored-by: Michael Shilman <[email protected]>
Co-authored-by: Michael Shilman <[email protected]>
|
🚨 Potential security issues detected. Learn more about Socket for GitHub ↗︎ To accept the risk, merge this PR and you will not be notified again.
Next stepsWhat is new author?A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package. Scrutinize new collaborator additions to packages because they now have the ability to publish code into your dependency tree. Packages should avoid frequent or unnecessary additions or changes to publishing rights. Take a deeper look at the dependencyTake a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support [AT] socket [DOT] dev. Remove the packageIf you happen to install a dependency that Socket reports as Known Malware you should immediately remove it and select a different dependency. For other alert types, you may may wish to investigate alternative packages or consider if there are other ways to mitigate the specific risk posed by the dependency. Mark a package as acceptable riskTo ignore an alert, reply with a comment starting with
|
valentinpalkovic
deleted the
valentin/remove-babel-from-webpack5-builder
branch
Closes #25172
What I did
This PR removes Babel and SWC from the Webpack5 builder and will add
@storybook/addon-webpack5-compiler-swcper default to Webpack5 projects during initialization where possible.Webpack users have to choose between one of the two add-ons:
to set up SWC or Babel as a loader for Webpack5. The SWC addon will be set up and installed per default for the user during
sb initfor all Webpack5-based projects.The following frameworks don't need a particular compiler addon since the compiler is built-in:
Additionally:
@storybook/preset-web-components-webpackand integrated the code directly into@storybook/web-components-webpack5framework.options.builder.useSWC(see migration note)framework.options.fastRefresh(see migration note)typescript.skipBabeloptionnpx sb babelrc)sb initto install@storybook/addon-webpack5-compiler-<babel|swc>for frameworks, which need an additional compilerOut of scope
Automigrations are not written yet and will be added in a follow-up step.
Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
The sandboxes are already covering a lot of use cases. It might be beneficial, though, to test some Webpack5-based projects. Remember that we currently don't have any auto migrations to automatically setup the necessary addons for users to add a compiler. You have to manually either install
@storybook/addon-webpack5-compiler-swcor@storybook/addon-webpack5-compiler-babeland add it to the addons in `.storybook/main.<js|ts>.The following frameworks don't need a compiler addon for webpack5 at all since the compiler is integrated:
Documentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli/src/sandbox-templates.tsMake sure this PR contains one of the labels below:
Available labels
bug: Internal changes that fixes incorrect behavior.maintenance: User-facing maintenance tasks.dependencies: Upgrading (sometimes downgrading) dependencies.build: Internal-facing build tooling & test updates. Will not show up in release changelog.cleanup: Minor cleanup style change. Will not show up in release changelog.documentation: Documentation only changes. Will not show up in release changelog.feature request: Introducing a new feature.BREAKING CHANGE: Changes that break compatibility in some way with current major version.other: Changes that don't fit in the above categories.🦋 Canary release
This pull request has been released as version
0.0.0-pr-25379-sha-d343aef0. Install it by pinning all your Storybook dependencies to that version.More information
0.0.0-pr-25379-sha-d343aef0valentin/remove-babel-from-webpack5-builderd343aef01704715783)To request a new release of this pull request, mention the
@storybookjs/coreteam.core team members can create a new canary release here or locally with
gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=25379