JSX: Support for new JSX transform approach

[BPScott]

Search Terms

JSX, transform, babel 7.9.0, react

Suggestion

A year or so ago React laid out a plan to simplify element creation. A requirement of this plan would be that transpilers that compiled JSX would need to change to emit a new function instead of using React.createElement. This would also eliminate the need for users having to add React in scope of their js files in order for jsx to work.

The first step has just been completed and shipped in Babel 7.9.0:

Blog post: https://babeljs.io/blog/2020/03/16/7.9.0#a-new-jsx-transform-11154-https-githubcom-babel-babel-pull-11154
PR: babel/babel#11154

I would like support for this new approach to JSX transpilation to be present in TypeScript.

I'm not familar with the internals of this PR, I'm just an enthused bystander but I think changes would be something like:

• When the jsx compiler option is set to preserve or react-native, don't throw a warning if you use JSX but React is not in scope - as the import to the jsx factory function would be added by a further transform step (i.e. Babel)
• Add a new value to the jsx compiler option jsx-automatic (name up for debate, but this is based on the option for the babel transform), that will transform code in a similar manner to babel-plugin-transform-react-jsx as discussed in Add experimental version of the babel-plugin-transform-react-jsx transform babel/babel#11154.

Checklist

My suggestion meets these guidelines:

• This wouldn't be a breaking change in existing TypeScript/JavaScript code
• This wouldn't change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, etc.)
• This feature would agree with the rest of TypeScript's Design Goals.

[DanielRosenwasser]

Duplicate of #34547?

[BPScott]

Yep. My search-fu has failed me again. sorry.