jsx-fragments: allow Fragment syntax option

[nicmosc]

Description

Right now one can specify either syntax or element, however element automatically falls back to using React.Fragment which is not supported in the case the variable is not exposed as an UMD global - the case when using es modules.

This option allows to use modules instead and import the Fragment component from the react library

Note: we need this behaviour for our team so we've patched the library with the same changes you see here for now.

Usage

'react/jsx-fragments': ['warn', 'elementShort'],

Showcase

Screen.Recording.2024-09-02.at.13.27.46.mov

Open to:

• using a different option name instead of elementShort e.g. module?
• if there is a way to achieve this without modifying the rule OR there is a way to infer this from the project settings it's probably better - any ideas?

[ljharb]

Historically, you’re required to have React in scope for jsx to work, so this never came up until the new jsx renderer in React 17.

However, in a modern codebase, why wouldn’t you always prefer the syntax?