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

jsx-eslint · Feb 14, 2020 · 9b5d6aa · 9b5d6aa
1 parent 598277e
commit 9b5d6aa
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 1 deletion.
diff --git a/docs/rules/self-closing-comp.md b/docs/rules/self-closing-comp.md
@@ -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:
@@ -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>;
 ```
 
@@ -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`

diff --git a/lib/rules/self-closing-comp.js b/lib/rules/self-closing-comp.js
@@ -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) {

diff --git a/tests/lib/rules/self-closing-comp.js b/tests/lib/rules/self-closing-comp.js
@@ -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: []
@@ -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}]
@@ -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" />;',