Add self-closing-comp rule

Author: Yannick Croissant

README.md

@@ -46,7 +46,8 @@ Finally, enable all of the rules that you would like to use.
     "react/no-multi-comp": 1,
     "react/prop-types": 1,
     "react/display-name": 1,
-    "react/wrap-multilines": 1
+    "react/wrap-multilines": 1,
+    "react/self-closing-comp": 1
   }
 }
 ```
@@ -57,6 +58,7 @@ Finally, enable all of the rules that you would like to use.
 * [prop-types](docs/rules/prop-types.md): Prevent missing propTypes in a React component definition
 * [display-name](docs/rules/display-name.md): Prevent missing displayName in a React component definition
 * [wrap-multilines](docs/rules/wrap-multilines.md): Prevent missing parentheses around multilines JSX
+* [self-closing-comp](docs/rules/self-closing-comp.md): Prevent extra closing tags for components without children
 
 ## To Do
 

docs/rules/self-closing-comp.md

@@ -0,0 +1,21 @@
+# Prevent extra closing tags for components without children (self-closing-comp)
+
+Components without children can be self-closed to avoid unnecessary extra closing tag.
+
+## Rule Details
+
+The following patterns are considered warnings:
+
+```js
+var HelloJohn = <Hello name="John"></Hello>;
+```
+
+The following patterns are not warnings:
+
+```js
+var contentContainer = <div className="content"></div>;
+
+var HelloJohn = <Hello name="John" />;
+
+var Profile = <Hello name="John"><img src="picture.png" /></Hello>; 
+```

index.js

@@ -5,12 +5,14 @@ module.exports = {
     'no-multi-comp': require('./lib/rules/no-multi-comp'),
     'prop-types': require('./lib/rules/prop-types'),
     'display-name': require('./lib/rules/display-name'),
-    'wrap-multilines': require('./lib/rules/wrap-multilines')
+    'wrap-multilines': require('./lib/rules/wrap-multilines'),
+    'self-closing-comp': require('./lib/rules/self-closing-comp')
   },
   rulesConfig: {
     'no-multi-comp': 0,
     'prop-types': 0,
     'display-name': 0,
-    'wrap-multilines': 0
+    'wrap-multilines': 0,
+    'self-closing-comp': 0
   }
 };

lib/rules/self-closing-comp.js

@@ -0,0 +1,55 @@
+/**
+ * @fileoverview Prevent extra closing tags for components without children
+ * @author Yannick Croissant
+ */
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+  // HTML5 and SVG elements whitelist
+  var standardElements = [
+    'a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'big', 'blockquote', 'body',
+    'br', 'button', 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'data', 'datalist', 'dd', 'del', 'details',
+    'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2',
+    'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen',
+    'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'menu', 'menuitem', 'meta', 'meter', 'nav', 'noscript',
+    'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby',
+    's', 'samp', 'script', 'section', 'select', 'small', 'source', 'span', 'strong', 'style', 'sub', 'summary', 'sup',
+    'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var',
+    'video', 'wbr', 'circle', 'defs', 'ellipse', 'g', 'line', 'linearGradient', 'mask', 'path', 'pattern', 'polygon',
+    'polyline', 'radialGradient', 'rect', 'stop', 'svg', 'text', 'tspan'
+  ];
+
+  function isComponent(node) {
+    return node.name && node.name.type === 'XJSIdentifier' && standardElements.indexOf(node.name.name) === -1;
+  }
+
+  function hasChildren(node) {
+    if (
+      !node.parent.children.length ||
+      (node.parent.children[0].type === 'Literal' && !node.parent.children[0].value.trim())
+    ) {
+      return false;
+    }
+    return true;
+  }
+
+  // --------------------------------------------------------------------------
+  // Public
+  // --------------------------------------------------------------------------
+
+  return {
+
+    'XJSOpeningElement': function(node) {
+      if (!isComponent(node) || node.selfClosing || hasChildren(node)) {
+        return;
+      }
+      context.report(node, 'Empty components are self-closing');
+    }
+  };
+
+};

lib/rules/self-closing.js

@@ -0,0 +1,73 @@
+/**
+ * @fileoverview Prevent extra closing tags for components without children
+ * @author Yannick Croissant
+ */
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+var eslint = require('eslint').linter;
+var ESLintTester = require('eslint-tester');
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+
+var eslintTester = new ESLintTester(eslint);
+eslintTester.addRuleTest('lib/rules/self-closing-comp', {
+
+    valid: [
+        {
+            code: 'var contentContainer = <div className="content"></div>;',
+            settings: {
+                ecmascript: 6,
+                jsx: true
+            }
+        }, {
+            code: 'var HelloJohn = <Hello name="John" />;',
+            settings: {
+                ecmascript: 6,
+                jsx: true
+            }
+        }, {
+            code: 'var Profile = <Hello name="John"><img src="picture.png" /></Hello>;',
+            settings: {
+                ecmascript: 6,
+                jsx: true
+            }
+        }
+    ],
+
+    invalid: [
+        {
+            code: 'var HelloJohn = <Hello name="John"></Hello>;',
+            settings: {
+                ecmascript: 6,
+                jsx: true
+            },
+            errors: [{
+                message: 'Empty components are self-closing'
+            }]
+        }, {
+            code: 'var HelloJohn = <Hello name="John">\n</Hello>;',
+            settings: {
+                ecmascript: 6,
+                jsx: true
+            },
+            errors: [{
+                message: 'Empty components are self-closing'
+            }]
+        }, {
+            code: 'var HelloJohn = <Hello name="John"> </Hello>;',
+            settings: {
+                ecmascript: 6,
+                jsx: true
+            },
+            errors: [{
+                message: 'Empty components are self-closing'
+            }]
+        }
+    ]
+});