jsx-max-depth: support shorthand fragments

Author: alexzherdev

lib/rules/jsx-max-depth.js

@@ -6,6 +6,7 @@
 
 const has = require('has');
 const variableUtil = require('../util/variable');
+const jsxUtil = require('../util/jsx');
 const docsUrl = require('../util/docsUrl');
 
 // ------------------------------------------------------------------------------
@@ -39,16 +40,12 @@ module.exports = {
     const option = context.options[0] || {};
     const maxDepth = has(option, 'max') ? option.max : DEFAULT_DEPTH;
 
-    function isJSXElement(node) {
-      return node.type === 'JSXElement';
-    }
-
     function isExpression(node) {
       return node.type === 'JSXExpressionContainer';
     }
 
     function hasJSX(node) {
-      return isJSXElement(node) || isExpression(node) && isJSXElement(node.expression);
+      return jsxUtil.isJSX(node) || isExpression(node) && jsxUtil.isJSX(node.expression);
     }
 
     function isLeaf(node) {
@@ -60,9 +57,9 @@ module.exports = {
     function getDepth(node) {
       let count = 0;
 
-      while (isJSXElement(node.parent) || isExpression(node.parent)) {
+      while (jsxUtil.isJSX(node.parent) || isExpression(node.parent)) {
         node = node.parent;
-        if (isJSXElement(node)) {
+        if (jsxUtil.isJSX(node)) {
           count++;
         }
       }
@@ -82,18 +79,18 @@ module.exports = {
       });
     }
 
-    function findJSXElement(variables, name) {
+    function findJSXElementOrFragment(variables, name) {
       function find(refs) {
         let i = refs.length;
 
         while (--i >= 0) {
           if (has(refs[i], 'writeExpr')) {
             const writeExpr = refs[i].writeExpr;
 
-            return isJSXElement(writeExpr)
+            return jsxUtil.isJSX(writeExpr)
               && writeExpr
               || writeExpr.type === 'Identifier'
-              && findJSXElement(variables, writeExpr.name);
+              && findJSXElementOrFragment(variables, writeExpr.name);
           }
         }
 
@@ -119,24 +116,28 @@ module.exports = {
       });
     }
 
+    function handleJSX(node) {
+      if (!isLeaf(node)) {
+        return;
+      }
+
+      const depth = getDepth(node);
+      if (depth > maxDepth) {
+        report(node, depth);
+      }
+    }
+
     return {
-      JSXElement: function(node) {
-        if (!isLeaf(node)) {
-          return;
-        }
+      JSXElement: handleJSX,
+      JSXFragment: handleJSX,
 
-        const depth = getDepth(node);
-        if (depth > maxDepth) {
-          report(node, depth);
-        }
-      },
       JSXExpressionContainer: function(node) {
         if (node.expression.type !== 'Identifier') {
           return;
         }
 
         const variables = variableUtil.variablesInScope(context);
-        const element = findJSXElement(variables, node.expression.name);
+        const element = findJSXElementOrFragment(variables, node.expression.name);
 
         if (element) {
           const baseDepth = getDepth(node);

tests/lib/rules/jsx-max-depth.js

@@ -61,6 +61,26 @@ ruleTester.run('jsx-max-depth', rule, {
   }, {
     code: 'const foo = (x) => <div><em>{x}</em></div>;',
     options: [{max: 2}]
+  }, {
+    code: [
+      '<></>'
+    ].join('\n'),
+    parser: 'babel-eslint'
+  }, {
+    code: [
+      '<>',
+      '  <foo />',
+      '</>'
+    ].join('\n'),
+    parser: 'babel-eslint',
+    options: [{max: 1}]
+  }, {
+    code: [
+      'const x = <><em>x</em></>;',
+      '<>{x}</>'
+    ].join('\n'),
+    parser: 'babel-eslint',
+    options: [{max: 2}]
   }],
 
   invalid: [{
@@ -121,6 +141,39 @@ ruleTester.run('jsx-max-depth', rule, {
       '{<div><div><span /></div></div>}',
       '</div>'
     ].join('\n'),
+    parser: 'babel-eslint',
     errors: [{message: 'Expected the depth of nested jsx elements to be <= 2, but found 3.'}]
+  }, {
+    code: [
+      '<>',
+      '  <foo />',
+      '</>'
+    ].join('\n'),
+    parser: 'babel-eslint',
+    options: [{max: 0}],
+    errors: [{message: 'Expected the depth of nested jsx elements to be <= 0, but found 1.'}]
+  }, {
+    code: [
+      '<>',
+      '  <>',
+      '    <bar />',
+      '  </>',
+      '</>'
+    ].join('\n'),
+    parser: 'babel-eslint',
+    options: [{max: 1}],
+    errors: [{message: 'Expected the depth of nested jsx elements to be <= 1, but found 2.'}]
+  }, {
+    code: [
+      'const x = <><span /></>;',
+      'let y = x;',
+      '<>{x}-{y}</>'
+    ].join('\n'),
+    parser: 'babel-eslint',
+    options: [{max: 1}],
+    errors: [
+      {message: 'Expected the depth of nested jsx elements to be <= 1, but found 2.'},
+      {message: 'Expected the depth of nested jsx elements to be <= 1, but found 2.'}
+    ]
   }]
 });