Support automatic JSX runtime and configuration via tsconfig.json

[devongovett]

Fixes #6389. Fixes #4622. Fixes #3287. Fixes #614. Closes T-1038.

This adds support for the new automatic JSX runtime added in React 17. This is automatically enabled when the version of React the app depends on is >= 17.0.0.

Additionally, this adds support for reading several options from tsconfig.json.

• jsx - Enable JSX even when an auto-detected library isn't installed. Can also be used to enable the automatic JSX runtime if set to react-jsx.
• jsxImportSource - The import source for the automatic JSX runtime (e.g. react or preact)
• jsxFactory - The pragma for the classic JSX transform.
• jsxFragmentFactory - The fragment factory for the classic JSX transform.
• experimentalDecorators enables support for legacy decorators, as used by TypeScript.

[height]

This pull request has been linked to and will mark 1 task as "Done" when merged:

• T-1038 Configuration (unlink task)

💡Tip: You can link multiple Height tasks to a pull request.

[parcel-benchmark]

Benchmark Results

Kitchen Sink 🚨

Timings

Description	Time	Difference
Cold	FAILED	-0.00ms
Cached	FAILED	-0.00ms

Cold Bundles

No bundles found, this is probably a failed build...

Cached Bundles

No bundles found, this is probably a failed build...

React HackerNews ✅

Timings

Description	Time	Difference
Cold	10.22s	+12.00ms
Cached	468.00ms	+4.00ms

Cold Bundles

No bundle changes detected.

Cached Bundles

Bundle	Size	Difference	Time	Difference
dist/logo.1e014c76.png	274.00b	+0.00b	287.00ms	-19.00ms 🚀

AtlasKit Editor 🚨

Timings

Description	Time	Difference
Cold	FAILED	-0.00ms
Cached	FAILED	-0.00ms

Cold Bundles

No bundles found, this is probably a failed build...

Cached Bundles

No bundles found, this is probably a failed build...

Three.js ✅

Timings

Description	Time	Difference
Cold	7.15s	+68.00ms
Cached	402.00ms	-5.00ms

Cold Bundles

No bundle changes detected.

Cached Bundles

No bundle changes detected.

Click here to view a detailed benchmark overview.

[mischnic]

Should it also look at jsconfig.json? Might be weird to have to add a tsconfig file to change React settings even if you're not using Typescript

[devongovett]

I wondered the same. I couldn't find definitive information about it though. Does jsconfig.json support compilerOptions even though it isn't being compiled by TSC presumably?

[mischnic]

This makes it sound like it is:

jsconfig.json is a descendant of tsconfig.json, which is a configuration file for TypeScript. jsconfig.json is tsconfig.json with "allowJs" attribute set to true.
(https://code.visualstudio.com/docs/languages/jsconfig)

And there is an example with compilerOptions.target on that page

[devongovett]

Hmm ok. Also should tsconfig only apply to .ts and .tsx files or also to .js files in the same project? And same for the inverse? Or should they just be treated as interchangeable?

[mischnic]

I would say prefer tsconfig over jsconfig in getConfigFrom, but I don't know how tsc/VS Code behave.

[mischnic]

This is automatically enabled when the version of React the app depends on is >= 17.0.0.

Preact >=10.5.0 support the automatic JSX runtime: https://github.com/preactjs/preact/releases/tag/10.5.0

[devongovett]

Found this "bug" about jsconfig.json not being picked up when a tsconfig.json is present, and it claims it's by design so we'll follow it. microsoft/TypeScript#15869

[Rechdan]

We can't don't import React when on v17?