-
-
Notifications
You must be signed in to change notification settings - Fork 2.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[react/jsx-no-useless-fragments] add option to allow single expressions in fragments #3006
[react/jsx-no-useless-fragments] add option to allow single expressions in fragments #3006
Conversation
…ons in fragments
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Seems pretty straightforward.
Codecov Report
@@ 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
Continue to review full report at Codecov.
|
f455285
to
9f1d618
Compare
Thanks for the speedy review and merge @ljharb! Appreciate it. |
Any plans on releasing a new release so we can work with this? :D |
There’s always a plan to do a release. There’s just no schedule. |
@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 |
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:
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 😅)