[react/jsx-no-useless-fragments] add option to allow single expressions in fragments

[mattdarveniza]

Problem

When writing JSX in typescript, a common problem is that Typescript expects the return type of a component to be ReactElement. This excludes other types that a component could return, for example just a plain string. This is a problem that's been discussed with the TS community here: 21699, however my understanding is there are technical barriers to overcome in order to support this.

A common workaround for this is to wrap a variable in a fragment and expression to get the desired result:

type Person = { name: string }

// type error
const WhatsMyName: React.FC<{ person: Person }> = ({ person }) => person.name

// workaround
const WhatsMyName: React.FC<{ person: Person }> = ({ person }) => <>{person.name}</>

This works well (even if it introduces a small amount of overhead in React), but triggers the jsx-no-useless-fragments rule, because as far as eslint is concerned, this is a useless fragment in javascript.

Solution

I'm proposing that we add an option to allow single expressions for Typescript users that want to employ this workaround. I went with an extra option because the original behaviour still makes sense in plain Javascript, and this is a behaviour only Typescript users would find useful.

(also fixed a typo from NeedsMoreChidren -> NeedsMoreChildren. Took me a while to figure out why the tests weren't passing thanks to that typo 😅)

[ljharb]

Seems pretty straightforward.

[codecov-commenter]

Codecov Report

Merging #3006 (f455285) into master (291acbf) will decrease coverage by 0.36%.
The diff coverage is 92.85%.

@@            Coverage Diff             @@
##           master    #3006      +/-   ##
==========================================
- Coverage   97.59%   97.22%   -0.37%     
==========================================
  Files         110      110              
  Lines        7267     7312      +45     
  Branches     2652     2669      +17     
==========================================
+ Hits         7092     7109      +17     
- Misses        175      203      +28     

Impacted Files	Coverage Δ
lib/util/jsx.js	92.64% <87.80%> (-7.36%)	⬇️
lib/util/ast.js	94.83% <93.10%> (-3.58%)	⬇️
lib/rules/jsx-no-useless-fragment.js	98.85% <100.00%> (+0.10%)	⬆️
lib/rules/no-typos.js	100.00% <100.00%> (ø)
lib/util/Components.js	95.36% <100.00%> (-3.51%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 860ebea...f455285. Read the comment docs.

[mattdarveniza]

Thanks for the speedy review and merge @ljharb! Appreciate it.

[anton-johansson]

Any plans on releasing a new release so we can work with this? :D

[ljharb]

There’s always a plan to do a release. There’s just no schedule.

[dzek69]

@ljharb @yannickcr if there is no schedule, can you release it like now? :) it's been 3 months without a release and I'd enjoy this one be released, thanks