Use React TSX tags without having to write "import React from 'react'"

Suggestion

I have to write import React from 'react' every time I use TSX syntax even though I make no explicit mention of the name React in the following lines of code (Of course, TSC output will contain mentions of React but the key is explicit).

It is possible to write JSX tags in Babel's JavaScript without import React from 'react' by using Babel's/Webpack's plugins. A notable example is Next.js.

Therefore I suggest: If user are not mentioning React directly, user shouldn't have to declare React explicitly. This can be configured in compiler options, something like a combination of --jsxFactoryPath and --jsxModule for example.

Examples

React.js

Ideal Source Code

tsconfig.json:

{
  "compilerOptions": {
    "module": "commonjs",
    "jsxFactoryPath": ["createElement"],
    "jsxModule": "react"
  }
}

index.tsx:

export = <div id='123'>hello</div>

Desired Output

index.js:

var _jsx = require("react").createElement;
module.exports = _jsx("div", { id: "123" }, "hello");

Hyperscript

Ideal Source Code

tsconfig.json:

{
  "compilerOptions": {
    "module": "commonjs",
    "jsxFactoryPath": [],
    "jsxModule": "hyperscript"
  }
}

index.tsx:

export = <div id='123'>hello</div>

Desired Output

var _jsx = require("hyperscript");
module.exports = _jsx("div", { id: "123" }, "hello");

Generic

Ideal Source Code

tsconfig.json:

{
  "compilerOptions": {
    "module": "commonjs",
    "jsxFactoryPath": ["obj1", "obj2", "func"],
    "jsxModule": "pkg/dir1/dir2"
  }
}

index.tsx:

export = <div id='123'>hello</div>

Desired Output

index.js:

var _jsx = require("pkg/dir1/dir2").obj1.obj2.func;
module.exports = _jsx("div", { id: "123" }, "hello");

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. new expression-level syntax)

Beginne mit den Compiler-Optionen in tsconfig.json und den TSX-Beispielen in index.tsx und vergleiche anschließend das in der Issue referenzierte Verhalten von Babel/Webpack. Erledigt ist die Aufgabe, wenn TSX ein konfigurierbares Modul und eine konfigurierbare Factory ohne einen expliziten React-Import verwenden kann und dabei die angeforderte CommonJS-Ausgabe für die React-, hyperscript- und generischen Beispiele erzeugt.