Skip to content
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

[New] add `jsx-no-useless-fragment` rule #2261

Open
wants to merge 8 commits into
base: master
from

Conversation

Projects
None yet
2 participants
@golopot
Copy link
Contributor

commented May 5, 2019

fixes #2042

This rule disallows fragments with less than 2 children.

return true;
}

// <*.Fragment>

This comment has been minimized.

Copy link
@ljharb

ljharb May 5, 2019

Collaborator

we shouldn't check anything dot Fragment; we should follow the pragma settings here.

// <Fragment>
if (
name.type === 'JSXIdentifier'
&& name.name === 'Fragment'

This comment has been minimized.

Copy link
@ljharb

ljharb May 5, 2019

Collaborator

similarly, i think this is a pragma setting

@ljharb

This comment has been minimized.

Copy link
Collaborator

commented May 5, 2019

Should this rule be autofixable?

@sindresorhus sindresorhus referenced this pull request May 6, 2019

Merged

Add `clean-sidebar` feature #2011

3 of 3 tasks complete
@golopot

This comment has been minimized.

Copy link
Contributor Author

commented May 6, 2019

Autofixing <>foo</>, <>{foo}</> might break people's code if they use PropTypes.element, or uses some type checker.

Case like <><Foo /></> looks ok to be autofixable.

@ljharb ljharb added the new rule label May 13, 2019

@ljharb

This comment has been minimized.

Copy link
Collaborator

commented May 13, 2019

hm, maybe if there's cases that aren't safe to autofix, those should be separately controllable by an option?

@golopot golopot force-pushed the golopot:jsx-no-useless-fragment branch from 017c476 to 17cc2c7 May 16, 2019

@golopot

This comment has been minimized.

Copy link
Contributor Author

commented May 16, 2019

Now fragments in html element are reported.

Example:

<section>
  <>
    <div />
    <div />
  </>
</section>
@ljharb
Copy link
Collaborator

left a comment

So any time a fragment is being passed to an HTML element, it should be autofixable to inline the fragment's children, no?

Show resolved Hide resolved lib/rules/jsx-no-useless-fragment.js Outdated
Show resolved Hide resolved lib/rules/jsx-no-useless-fragment.js Outdated
* @param {JSXElement} node
* @returns {boolean}
*/
function isFragment(node) {

This comment has been minimized.

Copy link
@ljharb

ljharb May 17, 2019

Collaborator

this seems like it might be useful extracted to a util

golopot and others added some commits May 17, 2019

Apply suggestions: improve message text
Co-Authored-By: Jordan Harband <ljharb@gmail.com>
@golopot

This comment has been minimized.

Copy link
Contributor Author

commented May 18, 2019

Now a fragment is fixable if it is not an outermost element, except for when it might add extra spaces. The fix is a simple removal of openingElement and closingElement.

// fixing by simply removing fragments will add a space between "git" and "hub"
<div>
  git<>
    hub
  </>
</div>
@ljharb

This comment has been minimized.

Copy link
Collaborator

commented May 18, 2019

Couldn't that be fixed into:

<div>
  git{`
    hub
  `}
</div>

or

<div>
  git{' hub '}
</div>

?

@golopot

This comment has been minimized.

Copy link
Contributor Author

commented May 18, 2019

I think it is ok to leave these cases without a fix. Your fixed code both render "git hub", but my code renders "github".

@ljharb

This comment has been minimized.

Copy link
Collaborator

commented May 18, 2019

ah, git{'hub'} or just github then? but sure, leaving it without a fix is fine too.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.