[Fix]self-closing-comp: stop reporting single-line spaces

Closes #1717 React does not trim JSXText if it is single-line spaces. In case like `<span> </span>`, the spaces are left as is.
jsx-eslint · Mar 21, 2019 · f6becb1 · f6becb1
1 parent cc7b98b
commit f6becb1
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 30 deletions.
diff --git a/lib/rules/self-closing-comp.js b/lib/rules/self-closing-comp.js
@@ -44,23 +44,27 @@ module.exports = {
       return node.name && node.name.type === 'JSXIdentifier' && !jsxUtil.isDOMComponent(node);
     }
 
-    function hasChildren(node) {
+    function childrenIsEmpty(node) {
+      return node.parent.children.length === 0;
+    }
+
+    function childrenIsMultilineSpaces(node) {
       const childrens = node.parent.children;
-      if (
-        !childrens.length ||
-        (childrens.length === 1 && (childrens[0].type === 'Literal' || childrens[0].type === 'JSXText') && !childrens[0].value.replace(/(?!\xA0)\s/g, ''))
-      ) {
-        return false;
-      }
-      return true;
+
+      return (
+        childrens.length === 1 &&
+        (childrens[0].type === 'Literal' || childrens[0].type === 'JSXText') &&
+        childrens[0].value.indexOf('\n') !== -1 &&
+        childrens[0].value.replace(/(?!\xA0)\s/g, '') === ''
+      );
     }
 
     function isShouldBeSelfClosed(node) {
       const configuration = Object.assign({}, optionDefaults, context.options[0]);
       return (
         configuration.component && isComponent(node) ||
         configuration.html && jsxUtil.isDOMComponent(node)
-      ) && !node.selfClosing && !hasChildren(node);
+      ) && !node.selfClosing && (childrenIsEmpty(node) || childrenIsMultilineSpaces(node));
     }
 
     // --------------------------------------------------------------------------

diff --git a/tests/lib/rules/self-closing-comp.js b/tests/lib/rules/self-closing-comp.js
@@ -37,6 +37,10 @@ ruleTester.run('self-closing-comp', rule, {
           <Hello name="John" />
         </Hello>
       `
+    }, {
+      code: 'var HelloJohn = <Hello name="John"> </Hello>;'
+    }, {
+      code: 'var HelloJohn = <Hello name="John">        </Hello>;'
     }, {
       code: 'var HelloJohn = <div>&nbsp;</div>;'
     }, {
@@ -56,6 +60,12 @@ ruleTester.run('self-closing-comp', rule, {
         </Hello>
       `,
       options: []
+    }, {
+      code: 'var HelloJohn = <div> </div>;',
+      options: []
+    }, {
+      code: 'var HelloJohn = <div>        </div>;',
+      options: []
     }, {
       code: 'var HelloJohn = <div>&nbsp;</div>;',
       options: []
@@ -117,13 +127,6 @@ ruleTester.run('self-closing-comp', rule, {
         message: 'Empty components are self-closing'
       }]
     }, {
-      code: 'var HelloJohn = <Hello name="John"> </Hello>;',
-      output: 'var HelloJohn = <Hello name="John" />;',
-      errors: [{
-        message: 'Empty components are self-closing'
-      }]
-    },
-    {
       code: 'var HelloJohn = <Hello name="John"></Hello>;',
       output: 'var HelloJohn = <Hello name="John" />;',
       options: [],
@@ -137,13 +140,6 @@ ruleTester.run('self-closing-comp', rule, {
       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 contentContainer = <div className="content"></div>;',
       output: 'var contentContainer = <div className="content" />;',
@@ -158,13 +154,6 @@ ruleTester.run('self-closing-comp', rule, {
       errors: [{
         message: 'Empty components are self-closing'
       }]
-    }, {
-      code: 'var contentContainer = <div className="content"> </div>;',
-      output: 'var contentContainer = <div className="content" />;',
-      options: [{html: true}],
-      errors: [{
-        message: 'Empty components are self-closing'
-      }]
     }
   ]
 });