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

Reviving: #35392 (which was closed due to inactivity)

Checklist

• There is an associated issue in the Backlog. Fixes Support JSX-Fragments with custom jsxFactory #20469
• Code is up-to-date with the master branch
• You've successfully run gulp runtests locally
• There are new or updated unit tests validating the change

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 3 years now.

Proposal Fix:

Very much inspired from babel to keep ecosystem consistent.

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

1. jsxFragmentFactory compiler option.

As suggested and reviewed by @weswigham in previous PR.

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 jsxFragmentFactory compiler option for similar developer UX.

{ "compilerOptions": { "target": "esnext", "module": "commonjs", "jsx": "react", "jsxFactory": "h", "jsxFragmentFactory": "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 => ( <>