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.

Sign up for GitHub

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

Jump to bottom

[Fix] self-closing-comp: consider JSXMemberExpression as component too #2572

Merged
merged 1 commit into from Feb 15, 2020
Merged

[Fix] self-closing-comp: consider JSXMemberExpression as component too #2572

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
10 changes: 10 additions & 0 deletions docs/rules/self-closing-comp.md
View file
Open in desktop
Expand Up @@ -10,6 +10,8 @@ The following patterns are considered warnings:

```jsx
var HelloJohn = <Hello name="John"></Hello>;

var HelloJohnCompound = <Hello.Compound name="John"></Hello.Compound>;
```

The following patterns are **not** considered warnings:
Expand All @@ -21,8 +23,12 @@ var intentionalSpace = <div>{' '}</div>;

var HelloJohn = <Hello name="John" />;

var HelloJohnCompound = <Hello.Compound name="John" />;

var Profile = <Hello name="John"><img src="picture.png" /></Hello>;

var ProfileCompound = <Hello.Compound name="John"><img src="picture.png" /></Hello.Compound>;

var HelloSpace = <Hello>{' '}</Hello>;
```

Expand Down Expand Up @@ -58,7 +64,11 @@ var intentionalSpace = <div>{' '}</div>;

var HelloJohn = <Hello name="John" />;

var HelloJohnCompound = <Hello.Compound name="John" />;

var Profile = <Hello name="John"><img src="picture.png" /></Hello>;

var ProfileCompound = <Hello.Compound name="John"><img src="picture.png" /></Hello.Compound>;
```

### `html`
Expand Down
6 changes: 5 additions & 1 deletion lib/rules/self-closing-comp.js
View file
Open in desktop
Expand Up @@ -42,7 +42,11 @@ module.exports = {

create(context) {
function isComponent(node) {
return node.name && node.name.type === 'JSXIdentifier' && !jsxUtil.isDOMComponent(node);
return (
node.name &&
(node.name.type === 'JSXIdentifier' || node.name.type === 'JSXMemberExpression') &&
!jsxUtil.isDOMComponent(node)
);
}

function childrenIsEmpty(node) {
Expand Down
67 changes: 67 additions & 0 deletions tests/lib/rules/self-closing-comp.js
View file
Open in desktop
Expand Up @@ -30,37 +30,66 @@ ruleTester.run('self-closing-comp', rule, {
valid: [
{
code: 'var HelloJohn = <Hello name="John" />;'
}, {
code: 'var HelloJohn = <Hello.Compound name="John" />;'
}, {
code: 'var Profile = <Hello name="John"><img src="picture.png" /></Hello>;'
}, {
code: 'var Profile = <Hello.Compound name="John"><img src="picture.png" /></Hello.Compound>;'
}, {
code: `
<Hello>
<Hello name="John" />
</Hello>
`
}, {
code: `
<Hello.Compound>
<Hello.Compound name="John" />
</Hello.Compound>
`
}, {
code: 'var HelloJohn = <Hello name="John"> </Hello>;'
}, {
code: 'var HelloJohn = <Hello.Compound name="John"> </Hello.Compound>;'
}, {
code: 'var HelloJohn = <Hello name="John"> </Hello>;'
}, {
code: 'var HelloJohn = <Hello.Compound name="John"> </Hello.Compound>;'
}, {
code: 'var HelloJohn = <div>&nbsp;</div>;'
}, {
code: 'var HelloJohn = <div>{\' \'}</div>;'
}, {
code: 'var HelloJohn = <Hello name="John">&nbsp;</Hello>;'
}, {
code: 'var HelloJohn = <Hello.Compound name="John">&nbsp;</Hello.Compound>;'
}, {
code: 'var HelloJohn = <Hello name="John" />;',
options: []
}, {
code: 'var HelloJohn = <Hello.Compound name="John" />;',
options: []
}, {
code: 'var Profile = <Hello name="John"><img src="picture.png" /></Hello>;',
options: []
}, {
code: 'var Profile = <Hello.Compound name="John"><img src="picture.png" /></Hello.Compound>;',
options: []
}, {
code: `
<Hello>
<Hello name="John" />
</Hello>
`,
options: []
}, {
code: `
<Hello.Compound>
<Hello.Compound name="John" />
</Hello.Compound>
`,
options: []
}, {
code: 'var HelloJohn = <div> </div>;',
options: []
Expand All @@ -76,15 +105,27 @@ ruleTester.run('self-closing-comp', rule, {
}, {
code: 'var HelloJohn = <Hello name="John">&nbsp;</Hello>;',
options: []
}, {
code: 'var HelloJohn = <Hello.Compound name="John">&nbsp;</Hello.Compound>;',
options: []
}, {
code: 'var HelloJohn = <Hello name="John"></Hello>;',
options: [{component: false}]
}, {
code: 'var HelloJohn = <Hello.Compound name="John"></Hello.Compound>;',
options: [{component: false}]
}, {
code: 'var HelloJohn = <Hello name="John">\n</Hello>;',
options: [{component: false}]
}, {
code: 'var HelloJohn = <Hello.Compound name="John">\n</Hello.Compound>;',
options: [{component: false}]
}, {
code: 'var HelloJohn = <Hello name="John"> </Hello>;',
options: [{component: false}]
}, {
code: 'var HelloJohn = <Hello.Compound name="John"> </Hello.Compound>;',
options: [{component: false}]
}, {
code: 'var contentContainer = <div className="content" />;',
options: [{html: true}]
Expand Down Expand Up @@ -121,26 +162,52 @@ ruleTester.run('self-closing-comp', rule, {
errors: [{
message: 'Empty components are self-closing'
}]
}, {
code: 'var CompoundHelloJohn = <Hello.Compound name="John"></Hello.Compound>;',
output: 'var CompoundHelloJohn = <Hello.Compound name="John" />;',
errors: [{
message: 'Empty components are self-closing'
}]
}, {
code: 'var HelloJohn = <Hello name="John">\n</Hello>;',
output: 'var HelloJohn = <Hello name="John" />;',
errors: [{
message: 'Empty components are self-closing'
}]
}, {
code: 'var HelloJohn = <Hello.Compound name="John">\n</Hello.Compound>;',
output: 'var HelloJohn = <Hello.Compound name="John" />;',
errors: [{
message: 'Empty components are self-closing'
}]
}, {
code: 'var HelloJohn = <Hello name="John"></Hello>;',
output: 'var HelloJohn = <Hello name="John" />;',
options: [],
errors: [{
message: 'Empty components are self-closing'
}]
}, {
code: 'var HelloJohn = <Hello.Compound name="John"></Hello.Compound>;',
output: 'var HelloJohn = <Hello.Compound name="John" />;',
options: [],
errors: [{
message: 'Empty components are self-closing'
}]
}, {
code: 'var HelloJohn = <Hello name="John">\n</Hello>;',
output: 'var HelloJohn = <Hello name="John" />;',
options: [],
errors: [{
message: 'Empty components are self-closing'
}]
}, {
code: 'var HelloJohn = <Hello.Compound name="John">\n</Hello.Compound>;',
output: 'var HelloJohn = <Hello.Compound name="John" />;',
options: [],
errors: [{
message: 'Empty components are self-closing'
}]
}, {
code: 'var contentContainer = <div className="content"></div>;',
output: 'var contentContainer = <div className="content" />;',
Expand Down