babel: [Bug]: Edge case in TSX: `(t: T) => t`

💻

Would you like to work on a fix?

How are you using Babel?

Programmatic API (babel.transform, babel.parse)

Input code

const { transformSync } = require('@babel/core')

let result = transformSync(`
  const fn = <T,>(t: T) => t;
`, {
  babelrc: false,
  configFile: false,
  parserOpts: {
    plugins: [
      'jsx',
      'typescript',
    ]
  },
})

console.log(result.code)

Configuration file name

No response

Configuration

No response

Current and expected behavior

The current output:

const fn = <T>(t: T) => t;

This is valid in TS, but invalid in TSX, because <T> is treated as a tag in TSX context.

Expected output:

const fn = <T,>(t: T) => t;

Environment

  System:
    OS: macOS 11.5.2
  Binaries:
    Node: 16.9.1 - /usr/local/bin/node
    Yarn: 1.22.11 - /usr/local/bin/yarn
    npm: 7.23.0 - /usr/local/bin/npm

Possible solution

No response

Additional context

Original Issue: vitejs/vite#4949.

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 19 (15 by maintainers)

Most upvoted comments

Yes, yarn jest generator works without problems on my machine 🤔

Okay, never mind then, probably it is related to my env. I actually started to dig in already, and it is going well and will update you soon I hope. Thanks

ozanhonamlioglu on Jan 6, 2022

Yes, yarn jest generator works without problems on my machine 🤔

nicolo-ribaudo on Jan 6, 2022

This is my head hash ddd93b9c61a197711c2e3eae8a8b175783ea6976 which is the current.

And yes I exactly did the steps you specified in here

> 2. Fork the repo
> 3. Run `git clone https://github.com/<YOUR_USERNAME>/babel.git && cd babel`
> 4. Run `yarn && make bootstrap`
> 5. Wait ⏳
> 6. Run `make watch` (or `make build` whenever you change a file)
> 7. Add a test (only `input.js`; `output.js` will be automatically generated)
> 8. Update the code!
> 9. `yarn jest 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 generator` and they will be automatically updated.
> 10. If it is working, run `make test` to run all the tests
> 11. Run `git push` and open a PR!

I am actually able to generate output.js files but the only way to generate them is to remove everything inside babel-generator/test/index.js except line 816 suites.forEach(function (testSuite) {...

Are you able to run yarn jest generator without any error with the current fork/branch?

ozanhonamlioglu on Jan 5, 2022

Yes 👍

nicolo-ribaudo on Jan 3, 2022

Hi! Can I pick this bug?

ChaitanyaGadodia on Sep 20, 2021

@nicolo-ribaudo Thank you for inviting me. However I’ll not be able to use *nix system in the next few days. So I guess you could do the latter.

The “solution” I posted above was just a quick & dirty hack into node_modules, it just passed this single edge case and didn’t follow common practices (it stores a value in an array). It’s difficult for me to refactor it into a more robust one in such large code base.

Always printing trailing comma in type list seems promising but may break many other things. I don’t know it very much. So I’ll leave this chance to other experienced programmers.

hyrious on Sep 18, 2021

@hyrious Since you already looked at the @babel/generator code, would you like to open a PR? Otherwise I’ll mark this as a [good first issue] for anyone who is interested in contributing.

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)

Write a comment there to let other possible contributors know that you are working on this bug.
Fork the repo
Run git clone https://github.com/<YOUR_USERNAME>/babel.git && cd babel
Run yarn && make bootstrap
Wait ⏳
Run make watch (or make build whenever you change a file)
Add a test (only input.js; output.js will be automatically generated)
Update the code!
yarn jest 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 generator and they will be automatically updated.
If it is working, run make test to run all the tests
Run git push and open a PR!

nicolo-ribaudo on Sep 18, 2021

We can just always unconditionally print a trailing comma.

nicolo-ribaudo on Sep 18, 2021