Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CLI: Add interactive babel config file generation #20234

Merged
merged 5 commits into from
Dec 15, 2022

Conversation

ndelangen
Copy link
Member

Issue: #20220

What I did

I made the babel config file more interactive, it will now ask you if you'd like typescript and or react.

And it will add preset-env by default with the right target.

@ndelangen
Copy link
Member Author

I still need to figure out how to actually make this install dependencies, because that would require picking the right package manager..

Copy link
Member

@shilman shilman left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought the goal here was to replicate the 6.5 config for backwards compatbility.

Re: installation, we should be able to use our PackageManager abstraction that handles this already no matter what package manager you use

@ndelangen
Copy link
Member Author

ndelangen commented Dec 14, 2022

The 6.5 default babel config was/is an absolute mess, it contains like 20+ presets and plugins and actually conflict with the modern code output we have today. (regeneratorRuntime issue).

I suspect adding preset-react and preset-typescript will fix 98.45% of users' issues. And will leave them with having to install 3 extra packages, and a babel config file that is human understandable; and does not contain plugins for transpiling down to code that is actively supported by the browser we target.

@yannbf
Copy link
Member

yannbf commented Dec 14, 2022

I thought the goal here was to replicate the 6.5 config for backwards compatibility.

If we do that, we're essentially adding this to user's code, and depending on like 20 different packages:

{
  "sourceType": "unambiguous",
  "presets": [
    [
      "@babel/preset-env",
      {
        "shippedProposals": true,
        "loose": true
      }
    ],
    "@babel/preset-typescript"
  ],
  "plugins": [
    "@babel/plugin-transform-shorthand-properties",
    "@babel/plugin-transform-block-scoping",
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ],
    [
      "@babel/plugin-proposal-private-methods",
      {
        "loose": true
      }
    ],
    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-syntax-dynamic-import",
    [
      "@babel/plugin-proposal-object-rest-spread",
      {
        "loose": true,
        "useBuiltIns": true
      }
    ],
    "@babel/plugin-transform-classes",
    "@babel/plugin-transform-arrow-functions",
    "@babel/plugin-transform-parameters",
    "@babel/plugin-transform-destructuring",
    "@babel/plugin-transform-spread",
    "@babel/plugin-transform-for-of",
    "babel-plugin-macros",
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-nullish-coalescing-operator",
    [
      "babel-plugin-polyfill-corejs3",
      {
        "method": "usage-global",
        "absoluteImports": "core-js",
        "version": "3.18.3"
      }
    ]
  ]
}

My feeling is that this would make people feel that Storybook is convoluted, where something simpler like this has proven enough:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": 100
        }
      }
    ],
    "@babel/preset-typescript"
  ]
}

@shilman
Copy link
Member

shilman commented Dec 14, 2022

@ndelangen @yannbf OK i'm on board with that

@shilman shilman added the cli label Dec 14, 2022
@ndelangen
Copy link
Member Author

Cool, I'll continue working on installing the dependencies for the user automatically.

I think we might want to create a separate ticket for adding a suggestion in the "migration end-report".

@shilman
Copy link
Member

shilman commented Dec 14, 2022

Here's an example of using the user's package manager to install deps on their behalf:

https://github.com/storybookjs/storybook/blob/next/code/lib/cli/src/add.ts#L107

@ndelangen ndelangen changed the title make the babel config file generation a interactive process make the babel config file generation an interactive process Dec 14, 2022
@ndelangen ndelangen requested review from shilman and yannbf December 14, 2022 18:07
@ndelangen ndelangen changed the title make the babel config file generation an interactive process CLI: babel config file generation is now an interactive process Dec 14, 2022
@ndelangen
Copy link
Member Author

ndelangen commented Dec 15, 2022

I ran this locally (in a place where it makes no sense to do so and it worked (well the yarn install failed due to reasons, but the code all worked well)

info Generating the storybook default babel config at /Users/me/Projects/Storybook/core/code/ui
✔ Do you want to add the TypeScript preset? … yes
✔ Do you want to add the React preset? … yes
info Writing file to /Users/me/Projects/Storybook/core/code/ui/.babelrc.json
✔ Shall we install the required dependencies now? (@babel/preset-env, @babel/preset-typescript, @babel/preset-react) … yes
info Installing dependencies...
Usage Error: Package "@babel/preset-env" is already listed as a regular dependency - remove the -D,-P flags or remove it from your dependencies first

$ yarn add [--json] [-E,--exact] [-T,--tilde] [-C,--caret] [-D,--dev] [-P,--peer] [-O,--optional] [--prefer-dev] [-i,--interactive] [--cached] [--mode #0] ...
An error occurred while installing dependencies.

I think it is good to go.

It generated:

{
  "sourceType": "unambiguous",
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": 100
        }
      }
    ],
    "@babel/preset-typescript",
    "@babel/preset-react"
  ],
  "plugins": []
}

@shilman shilman changed the title CLI: babel config file generation is now an interactive process CLI: Add interactive babel config file generation Dec 15, 2022
Copy link
Member

@shilman shilman left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great! 💯

@shilman shilman merged commit 79f2e15 into next Dec 15, 2022
@shilman shilman deleted the norbert/sb-1107-sb20220-bug-sb-babelrc-produces-empty branch December 15, 2022 15:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Archived in project
Development

Successfully merging this pull request may close these issues.

3 participants