Add option to the self-closing-comp

docs/rules/self-closing-comp.md

@@ -17,5 +17,79 @@ 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
+
+It takes an option as the second parameter, which corresponding what components tags should be self-closed when this is possible.
+
+```js
+...
+"self-closing-comp": [<enabled>, 'all'|'component'|'html'>]
+...
+```
+
+### `all`
+
+All tags, including custom components and html components should be self-closed.
+
+The following patterns are considered warnings:
+
+```js
+var HelloJohn = <Hello name="John"></Hello>;
+
+var contentContainer = <div className="content"></div>;
+```
+
+The following patterns are not considered warnings:
+
+```js
+var HelloJohn = <Hello name="John" />;
+
+var Profile = <Hello name="John"><img src="picture.png" /></Hello>;
+
+var contentContainer = <div className="content" />;
+
+var contentContainer = <div className="content"><div /></div>;
+```
+
+### `component`
+
+Only custom components tags should be self-closed. This is the default option.
+
+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`
+
+Only 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 HelloJohn = <Hello name="John"></Hello>;
+
+var contentContainer = <div className="content" />;
+
+var contentContainer = <div className="content"><div /></div>;
 ```

lib/rules/self-closing-comp.js

@@ -30,14 +30,24 @@ module.exports = function(context) {
     return true;
   }
 
+  function isShouldBeSelfClosed(node) {
+    var configuration = context.options[0] || 'component';
+    return (
+      configuration === 'all' ||
+      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 +59,6 @@ module.exports = function(context) {
 
 };
 
-module.exports.schema = [];
+module.exports.schema = [{
+  enum: ['all', 'component', 'html']
+}];

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

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