Enable JSX in `.js` files

[Janpot]

Acknowledgements

• [X] I read the documentation and searched existing issues to avoid duplicates
• [X] I understand this is a bug tracker and anything other than a proven bug will be closed
• [X] I understand this is a free project and relies on community contributions
• [X] I read and understood the Contribution guide

Minimal reproduction URL

https://stackblitz.com/edit/node-axhph5?file=src%2Findex.ts

Problem & expected behavior (under 200 words)

Just run pnpm start, then pnpm start2. tsc happily transforms the jsx in the js file.

Bugs are expected to be fixed by those affected by it

• [X] I'm interested in working on this issue

Compensating engineering work will speed up resolution and support the project

• [x] I'm willing to offer $10 for financial support

[privatenumber]

I agree for feature parity, tsx should assume that JSX can be used in any JS file if compilerOptions.jsx is enabled.

However, we currently skip compiling .js files that don't contain ESM, which gave us a notable performance boost. If we start compiling all .js files to support JSX, it would undo that performance gain.

[Janpot]

To expand on our use-case

• We have lots of JSX + ESM in .js files.
• All of our tooling standardised on .js, tsx and ts files, we never added support for .jsx
• We want to migrate from babel-node to tsx, some of our scripts import frontend code.

However, we currently skip compiling .js files that don't contain ESM

Our js files contain ESM. Is there a way for us to signal that our .js files are ESM+JSX without changing the file extension or type: 'module'?

[privatenumber]

I'll investigate treating all non-dependency .js files as JSX if jsx is enabled in tsconfig.json but it will be a breaking change for v5.

If you're blocked, the fastest way to move forward would be to rename them to .jsx:

find /path/to/your/directory -name "*.js" -exec bash -c 'mv "$0" "${0%.js}.jsx"' {} \;