Unary async arrow misprinted as concise async arrow when the binding identifier has leading comments

Bug Report

• I would like to work on a fix!

Current behavior

• REPL

Input Code

await knex.transaction(async (/** @type {any} */ trx) => {
});

is compiled to:

"use strict";

await knex.transaction(async
/** @type {any} */
trx => {});

and Node.JS throws so error:

SyntaxError: missing ) after argument list at Module._compile (internal/modules/cjs/loader.js:723:23) at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12) at Function.Module._load (internal/modules/cjs/loader.js:585:3) at Module.require (internal/modules/cjs/loader.js:692:17) at require (internal/modules/cjs/helpers.js:25:18) at Object.<anonymous> (/workspace/src/index.js:30:38) at Module._compile (internal/modules/cjs/loader.js:778:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)

Expected behavior

My source code should be compiled to this one without breaking async (/** comments */ param) => ...:

"use strict";

await knex.transaction(async (/** @type {any} */ trx) => {});

Babel Configuration (babel.config.js, .babelrc, package.json#babel, cli command, .eslintrc)

• Filename: babel.config.js

{
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "node": 10
        },
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ]
}

Environment

• Babel version(s): v7.12.10
• Node/npm version: Node 10/yarn 1.22.5
• OS: macOS 11.0.1
• Monorepo: no
• How you are using Babel: @babel/cli
• Typescript: 4.1.3

Possible Solution

Additional context

I use Typescript JSDoc comments.

[nwalters512]

Thanks for the pointers! Excited to make my first contribution to Babel - I opened up a PR at #13136.

Re: yarn && make bootstrap, it looks like make bootstrap already runs yarn install - it could save a small amount of time for future recipients of these instructions to just have folks run make bootstrap 🙂

[nicolo-ribaudo]

Thanks!

The problem is likely in https://github.com/babel/babel/blob/672a58660f0b15691c44582f1f3fdcdac0fa0d2f/packages/babel-generator/src/generators/methods.ts#L115-L141, where we decide how to print the arrow function parameters.

If it helps, you can reproduce it with this code:

const input = `
fn(async (/* comment */ x) => {})
`;

const ast = parser.parse(input);

console.log(generator.default(ast));

If it is the first time that you contribute to Babel, follow these steps: (you need to have make and yarn available on your machine)

1. Fork the repo
2. Run git clone https://github.com/<YOUR_USERNAME>/babel.git && cd babel
3. Run yarn && make bootstrap
4. Wait ⏳
5. Run make watch (or make build whenever you change a file)
6. Add a test in packages/babel-generator/test/fixtures/comments (only input.js; output.js will be automatically generated)
7. Update the code!
8. yarn jest babel-generator to run the tests
   • If some test outputs don’t match but the new results are correct, you can delete the bad output.js files and run the tests again
   • If you prefer, you can run OVERWRITE=true yarn jest babel-generator and they will be automatically updated.
9. If it is working, run make test to run all the tests
10. Run git push and open a PR!