Add self-closing-comp option to check html tags (fixes #572)

Author: gitim

docs/rules/self-closing-comp.md

@@ -17,5 +17,56 @@ var contentContainer = <div className="content"></div>;
 
 var HelloJohn = <Hello name="John" />;
 
-var Profile = <Hello name="John"><img src="picture.png" /></Hello>; 
+var Profile = <Hello name="John"><img src="picture.png" /></Hello>;
+```
+
+## Rule Options
+
+The rule can take one argument to select types of tags, which should be self-closed when this is possible. By default only custom components tags should be self-closed.
+
+```js
+...
+"self-closing-comp": ["error", {
+  "component": true,
+  "html": false
+}]
+...
+```
+
+### `component`
+
+When `true`, custom components tags should be self-closed.
+
+The following patterns are considered warnings:
+
+```js
+var HelloJohn = <Hello name="John"></Hello>;
+```
+
+The following patterns are not considered warnings:
+
+```js
+var contentContainer = <div className="content"></div>;
+
+var HelloJohn = <Hello name="John" />;
+
+var Profile = <Hello name="John"><img src="picture.png" /></Hello>;
+```
+
+### `html`
+
+When `true`, html components tags should be self-closed.
+
+The following patterns are considered warnings:
+
+```js
+var contentContainer = <div className="content"></div>;
+```
+
+The following patterns are not considered warnings:
+
+```js
+var contentContainer = <div className="content" />;
+
+var contentContainer = <div className="content"><div /></div>;
 ```

lib/rules/self-closing-comp.js

@@ -30,14 +30,23 @@ module.exports = function(context) {
     return true;
   }
 
+  function isShouldBeSelfClosed(node) {
+    var configuration = context.options[0] || {component: true};
+    return (
+      configuration.component && isComponent(node) ||
+      configuration.html && isTagName(node.name.name)
+    ) && !node.selfClosing && !hasChildren(node);
+  }
+
   // --------------------------------------------------------------------------
   // Public
   // --------------------------------------------------------------------------
 
   return {
 
     JSXOpeningElement: function(node) {
-      if (!isComponent(node) || node.selfClosing || hasChildren(node)) {
+
+      if (!isShouldBeSelfClosed(node)) {
         return;
       }
       context.report({
@@ -49,4 +58,17 @@ module.exports = function(context) {
 
 };
 
-module.exports.schema = [];
+module.exports.schema = [{
+  type: 'object',
+  properties: {
+    component: {
+      default: true,
+      type: 'boolean'
+    },
+    html: {
+      default: false,
+      type: 'boolean'
+    }
+  },
+  additionalProperties: false
+}];

tests/lib/rules/self-closing-comp.js

@@ -50,6 +50,64 @@ ruleTester.run('self-closing-comp', rule, {
     }, {
       code: 'var HelloJohn = <Hello name="John">&nbsp;</Hello>;',
       parserOptions: parserOptions
+    }, {
+      code: 'var contentContainer = <div className="content"></div>;',
+      options: [],
+      parserOptions: parserOptions
+    }, {
+      code: 'var HelloJohn = <Hello name="John" />;',
+      options: [],
+      parserOptions: parserOptions
+    }, {
+      code: 'var Profile = <Hello name="John"><img src="picture.png" /></Hello>;',
+      options: [],
+      parserOptions: parserOptions
+    }, {
+      code: '\
+      <Hello>\
+        <Hello name="John" />\
+      </Hello>',
+      options: [],
+      parserOptions: parserOptions
+    }, {
+      code: 'var HelloJohn = <div>&nbsp;</div>;',
+      options: [],
+      parserOptions: parserOptions
+    }, {
+      code: 'var HelloJohn = <div>{\' \'}</div>;',
+      options: [],
+      parserOptions: parserOptions
+    }, {
+      code: 'var HelloJohn = <Hello name="John">&nbsp;</Hello>;',
+      options: [],
+      parserOptions: parserOptions
+    }, {
+      code: 'var HelloJohn = <Hello name="John"></Hello>;',
+      options: [{component: false}],
+      parserOptions: parserOptions
+    }, {
+      code: 'var HelloJohn = <Hello name="John">\n</Hello>;',
+      options: [{component: false}],
+      parserOptions: parserOptions
+    }, {
+      code: 'var HelloJohn = <Hello name="John"> </Hello>;',
+      options: [{component: false}],
+      parserOptions: parserOptions
+    }, {
+      code: 'var contentContainer = <div className="content" />;',
+      options: [{html: true}],
+      parserOptions: parserOptions
+    }, {
+      code: 'var contentContainer = <div className="content"><img src="picture.png" /></div>;',
+      options: [{html: true}],
+      parserOptions: parserOptions
+    }, {
+      code: '\
+      <div>\
+        <div className="content" />\
+      </div>',
+      options: [{html: true}],
+      parserOptions: parserOptions
     }
   ],
 
@@ -72,6 +130,49 @@ ruleTester.run('self-closing-comp', rule, {
       errors: [{
         message: 'Empty components are self-closing'
       }]
+    },
+    {
+      code: 'var HelloJohn = <Hello name="John"></Hello>;',
+      options: [],
+      parserOptions: parserOptions,
+      errors: [{
+        message: 'Empty components are self-closing'
+      }]
+    }, {
+      code: 'var HelloJohn = <Hello name="John">\n</Hello>;',
+      options: [],
+      parserOptions: parserOptions,
+      errors: [{
+        message: 'Empty components are self-closing'
+      }]
+    }, {
+      code: 'var HelloJohn = <Hello name="John"> </Hello>;',
+      options: [],
+      parserOptions: parserOptions,
+      errors: [{
+        message: 'Empty components are self-closing'
+      }]
+    }, {
+      code: 'var contentContainer = <div className="content"></div>;',
+      options: [{html: true}],
+      parserOptions: parserOptions,
+      errors: [{
+        message: 'Empty components are self-closing'
+      }]
+    }, {
+      code: 'var contentContainer = <div className="content">\n</div>;',
+      options: [{html: true}],
+      parserOptions: parserOptions,
+      errors: [{
+        message: 'Empty components are self-closing'
+      }]
+    }, {
+      code: 'var contentContainer = <div className="content"> </div>;',
+      options: [{html: true}],
+      parserOptions: parserOptions,
+      errors: [{
+        message: 'Empty components are self-closing'
+      }]
     }
   ]
 });