Support JSX fragments with jsxFragFactory compiler option and @jsxFrag pragma by nojvek · Pull Request #35392 · microsoft/TypeScript (original) (raw)

Fixes #20469

Problem:

Currently <><Foo /></> only works with "jsx": "react". Using an inline pragma for jsxFactory /** @jsx dom */ or config defined "jsxFactory": "h" throws an error that JSX fragment is not supported when using --jsxFactory

The issue has been open for almost 2 years now.

Proposal Fix:

Very much inspired from babel to keep ecosystem consistent.

https://babeljs.io/docs/en/babel-plugin-transform-react-jsx

1. jsxFragFactory compiler option.

Babel plugin-transform-react-jsx supports following options

{ "plugins": [ ["@babel/plugin-transform-react-jsx", { "pragma": "Preact.h", // default pragma is React.createElement "pragmaFrag": "Preact.Fragment", // default is React.Fragment "throwIfNamespace": false // defaults to true }] ] }

Typescript already supports jsxFactory compiler option, this PR adds another optional jsxFragFactory compiler option for similar developer UX.

{ "compilerOptions": { "target": "esnext", "module": "commonjs", "jsx": "react", "jsxFactory": "Preact.h", "jsxFragFactory": "Preact.Fragment" } }

1. support for @jsxFrag pragma. This code would work in both typescript and babel without changes. TS will need jsx: react for emit though.

/** @jsx Preact.h / /* @jsxFrag Preact.Fragment */

import Preact from 'preact';

var descriptions = items.map(item => ( <>