Babel JSX import plugin: Support short Fragment syntax

[sirreal]

Is your feature request related to a problem? Please describe.

The @wordpress/babel-plugin-import-jsx-pragma package allows you to use JSX without adding the React import. In combination with @babel/transform-react-jsx, this makes it simple to use @wordpress/element to write JSX as the README describes.

However, when using the JSX Fragment <>short syntax</>, the recommended @babel/transform-react-jsx plugin errors if the pragma option is set but pragmaFrag is not set and it needs to transform <></>.

transform-react-jsx: pragma has been set but pragmafrag has not been set

See the JSX transform options for details.

Describe the solution you'd like

The existing options for the don't make it clear where the plugin might be extended to support Fragment options. With React.Fragment, no additions should be necessary. However, when using createElement and Fragment from @wordpress/element, a Fragment import is also necessary. It might look something like this, closely mirroring the JSX transform options:

module.exports = {
	plugins: [
		[ '@wordpress/babel-plugin-import-jsx-pragma', {
			scopeVariable: 'createElement',
			source: '@wordpress/element',
			isDefault: false,

			/**
			 * Additional option
			 * Maintains backwards compatibility
			 * "Frag" suffix mirrors transform plugin
			 */
			scopeVariableFrag: 'Fragment', // default to null: no import is added when <></> is observed

			/**
			 * Can we assume `Fragment` is from the same package and _not_ the default?
			 * These options are then redundant.
			 * In particular, multiple `isDefault` from the same package would likely be problematic.
			 */
			// sourceFrag: 'Fragment',
			// isDefaultFrag: false,
		} ],
		[ '@babel/transform-react-jsx', {
			pragma: 'createElement',
			pragmaFrag: 'Fragment',
		} ],
	],
};

Then, when the transform is applied:

function MyComponent( props ) {
  return <>
    <h1>Hello!</h1>
    <h2>👋</h2>
  </>;
}

/* ⬇️ After transform ⬇️ */

import { createElement, Fragment } from '@wordpress/element';
function MyComponent( props ) {
  return <>
    <h1>Hello!</h1>
    <h2>👋</h2>
  </>;
}

Describe alternatives you've considered

You can set the pragmaFrag for the @babel/transform-react-jsx, but you need to ensure that the import is present, which seems to defeat the purpose of the way these plugins are designed to work.

// Original needs to import Fragment. Defeats purpose 😞
import { Fragment } from '@wordpress/element';
function MyComponent( props ) {
  return <>
    <h1>Hello!</h1>
    <h2>👋</h2>
  </>;
}

/* ⬇️ After transform ⬇️ */

// Original needs to import Fragment. Defeats purpose 😞
import { createElement, Fragment } from '@wordpress/element';
function MyComponent( props ) {
  return <>
    <h1>Hello!</h1>
    <h2>👋</h2>
  </>;
}

[gziolo]

Yes, this sounds great. Let’s do it to make it easier to use Fragment.

[sirreal]

Working on this in #15120