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

add showConfig support #11588

Merged
merged 23 commits into from Jul 30, 2020
Merged

add showConfig support #11588

merged 23 commits into from Jul 30, 2020

Conversation

@JLHwung
Copy link
Contributor

JLHwung commented May 19, 2020

Q                       A
Fixed Issues? Fixes #10617, closes #11018, closes #10538
Patch: Bug Fix?
Major: Breaking Change?
Minor: New Feature? Yes
Tests Added + Pass? Yes
Documentation PR Link babel/website#2302
Any Dependency Changes?
License MIT

showConfig will print the config chain applied on a specific file path by order of descending priority. It will also print the effective overrides and env config applied to a single file.

Example output (input, Full output)

(The <CWD> and <ROOTDIR> is not presented in the raw output, it is replaced by Babel's fixture runner.)

Babel configs on "<CWD>/src/index.js" (ascending priority):
config <CWD>/my-extended.js
{
  "sourceMaps": false,
  "presets": [
    "@foo/babel-preset-1"
  ]
}

config <CWD>/my-config.js
{
  "sourceType": "script",
  "plugins": [
    "[Function: (api) => ({/n  name: /"@foo//" + __dirname,/n  visitor ... ]"
  ],
  "extends": "./my-extended.js"
}

config <CWD>/my-config.js .env["test"]
{
  "plugins": [
    [
      "@foo/babel-plugin-3",
      {
        "noDocumentAll": true
      },
      "@foo/babel-plugin-three"
    ]
  ]
}

config <CWD>/my-config.js .overrides[0]
{
  "test": "src/index.js",
  "plugins": [
    [
      "@foo/babel-plugin-2",
      {
        "noDocumentAll": true
      }
    ]
  ]
}

config <CWD>/my-config.js .overrides[0].env["test"]
{
  "plugins": [
    "@foo/babel-plugin-1",
    [
      {
        "name": "@foo/inline-babel-plugin-1",
        "visitor": {}
      },
      {
        "noDocumentAll": true
      }
    ]
  ]
}

config <CWD>/.babelrc
{}

programmatic options from @babel/cli
{
  "sourceFileName": "./src/index.js",
  "presets": [
    "<ROOTDIR>/packages/babel-preset-react"
  ],
  "plugins": [
    "<ROOTDIR>/packages/babel-plugin-transform-arrow-functions",
    "<ROOTDIR>/packages/babel-plugin-transform-strict-mode",
    "<ROOTDIR>/packages/babel-plugin-transform-modules-commonjs"
  ],
  "configFile": "./my-config.js",
  "caller": {
    "name": "@babel/cli"
  },
  "filename": "./src/index.js"
}

Known limits

  • It does not expand the presets
  • It does not print the resolved config
  • It does not tell users why certain file is ignored/excluded

These limits can be addressed in other PRs.

Additional
This PR includes commits in #11544.

@babel-bot
Copy link
Collaborator

babel-bot commented May 19, 2020

Build successful! You can test your changes in the REPL here: https://babeljs.io/repl/build/26507/

@codesandbox
Copy link

codesandbox bot commented May 19, 2020

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit a577902:

Sandbox Source
babel-repl-custom-plugin Configuration
babel-plugin-multi-config Configuration
@JLHwung JLHwung force-pushed the JLHwung:print-config branch 3 times, most recently from 6089574 to 56516c5 Jun 8, 2020
@JLHwung JLHwung force-pushed the JLHwung:print-config branch 3 times, most recently from 6cacd17 to 46978e8 Jun 16, 2020
@JLHwung JLHwung marked this pull request as ready for review Jun 16, 2020
Copy link
Member

nicolo-ribaudo left a comment

This is awesome

packages/babel-core/src/config/config-chain.js Outdated Show resolved Hide resolved

mergeChain(fileChain, result);
}
}

if (context.showConfig) {
console.log(
// print config by the order of descending priority

This comment has been minimized.

@nicolo-ribaudo

nicolo-ribaudo Jun 17, 2020 Member

Maybe we should print in the output that in case of conflicts the first config overrides the second?

This comment has been minimized.

@JLHwung

JLHwung Jun 18, 2020 Author Contributor

I tend to keep the output succinct. The implementation detail of config merging should be referenced from babel docs but not a debug output.

To reason how these config merges, we can print the resolved config in later PRs. Think of the Styles tab v.s. the Computed tab in the Chrome DevTools / Elements.

@nicolo-ribaudo nicolo-ribaudo added this to the 7.11.0 milestone Jun 17, 2020
} else if (typeof d.value === "function") {
// If the unloaded descriptor is a function, i.e. `plugins: [ require("my-plugin") ]`,
// we print the first 50 characters of the function source code and hopefully we can see
// `name: 'my-plugin'` in the source

This comment has been minimized.

@hzoo

hzoo Jun 18, 2020 Member

Good hack, although I don't believe this will be the case for most plugins?

Even testing on https://codesandbox.io/s/lively-star-xv8bt, it will just print the code instead, the default plugin on ASTExplorer wouldn't even show the name until char 85.

This comment has been minimized.

@JLHwung

JLHwung Jun 18, 2020 Author Contributor

Good catch. Well since an object has no key orders, I don't think there exists an integer N such that the plugin name is included in the (0, N) substring.

My initial thought here is to provide user at least something more descriptive/recognizable than a generic [Function] string. I have come up with several approach:

  • Print Function name. It could not help much because we don't have such convention that the default export should be a named function
  • Use regex to extract name: "blablabla" from function source. It doesn't work with dynamic name and has false positive.
  • Actually load the descriptor. We have to initialize the API object earlier, and it may introduce breaking changes as we can end up loading a plugin twice.

So I end up with this approach and hope it could serve as an indicator so that users could know what this plugin is -- most of the time these are ad-hoc plugins not in node_modules.

This comment has been minimized.

@hzoo

hzoo Jun 18, 2020 Member

Use regex to extract name: "blablabla" from function source. It doesn't work with dynamic name

I think it would be really rare/weird to have a dynamic name, it's just a string? Yeah I don't think it'll be an issue in general but for standalone/repl which is a diff usecase altogether.

This comment has been minimized.

@nicolo-ribaudo

nicolo-ribaudo Jun 18, 2020 Member

I think that this is something that we can revisit with experience: I believe that the hard-to-understand function name might not be a problem for a few reasons:

  1. Most people use "babel-plugin-foo" or require.resolve("babel-plugin-foo")
  2. .slice(0, 50) always includes the plugin function name (or at least the first 41 characters if it's longer). This can be useful for plugins directly defined in the config file, as we do.
  3. If the plugin is an actual anonymous function and the .slice(0, 50) substring doesn't contain any useful information, the person can easily see in which config file it is defined and check what's used at that index in the plugins array directly in the config file.
@JLHwung JLHwung force-pushed the JLHwung:print-config branch 2 times, most recently from c82e049 to bf61000 Jun 18, 2020
@JLHwung JLHwung changed the base branch from master to main Jun 22, 2020
@JLHwung JLHwung force-pushed the JLHwung:print-config branch 2 times, most recently from c787103 to c6b74c8 Jun 23, 2020
export function* resolveShowConfigPath(
dirname: string,
): Handler<string | null> {
const targetPath = process.env.BABEL_SHOW_CONFIG_FOR_PATH;

This comment has been minimized.

@JLHwung

JLHwung Jun 23, 2020 Author Contributor

Do you think the following candidates are easier for typing?

BABEL_SHOW_CONFIG_FOR
BABEL_CONFIG_FOR

I don't think we can simply drop FOR because it looks like a boolean toggle

BABEL_SHOW_CONFIG=true

will never work as intended.

This comment has been minimized.

@nicolo-ribaudo

nicolo-ribaudo Jun 29, 2020 Member

I slightly prefer BABEL_SHOW_CONFIG_FOR

@JLHwung JLHwung requested a review from existentialism Jun 25, 2020
@existentialism existentialism self-assigned this Jun 25, 2020
@nicolo-ribaudo nicolo-ribaudo self-requested a review Jun 29, 2020
@JLHwung JLHwung force-pushed the JLHwung:print-config branch 2 times, most recently from edbe64d to 3886071 Jul 2, 2020
@existentialism
Copy link
Member

existentialism commented Jul 3, 2020

Should we add a test for .only?

@JLHwung JLHwung force-pushed the JLHwung:print-config branch 3 times, most recently from 7c1c2ac to 0d5fe2c Jul 28, 2020
@JLHwung JLHwung force-pushed the JLHwung:print-config branch from 0d5fe2c to a577902 Jul 29, 2020
@JLHwung JLHwung removed the PR: Needs Docs label Jul 29, 2020
@JLHwung JLHwung merged commit 164a939 into babel:main Jul 30, 2020
8 of 9 checks passed
8 of 9 checks passed
build
Details
test262-pr Workflow: test262-pr
Details
Gitpod Open an online workspace in Gitpod
Details
Travis CI - Pull Request Build Passed
Details
babel/repl REPL preview is available
Details
build-standalone Workflow: build-standalone
Details
ci/codesandbox Building packages succeeded.
Details
codecov/project 91.64% (target 90.00%)
Details
e2e Workflow: e2e
Details
@JLHwung JLHwung deleted the JLHwung:print-config branch Jul 30, 2020
@existentialism existentialism removed their assignment Jul 30, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

5 participants
You can’t perform that action at this time.