[Fix] jsx-no-useless-fragment: accept fragments with call expressions

Author: hasparus

lib/rules/jsx-no-useless-fragment.js

@@ -66,6 +66,17 @@ function isKeyedElement(node) {
     && node.openingElement.attributes.some(jsxUtil.isJSXAttributeKey);
 }
 
+/**
+ * @param {ASTNode} node
+ * @returns {boolean}
+ */
+function containsCallExpression(node) {
+  return node
+    && node.type === 'JSXExpressionContainer'
+    && node.expression
+    && node.expression.type === 'CallExpression';
+}
+
 module.exports = {
   meta: {
     type: 'suggestion',
@@ -103,15 +114,18 @@ module.exports = {
      * @returns {boolean}
      */
     function hasLessThanTwoChildren(node) {
-      if (!node || !node.children || node.children.length < 2) {
+      if (!node || !node.children) {
         return true;
       }
 
-      return (
-        node.children.length
-        - (+isPaddingSpaces(node.children[0]))
-        - (+isPaddingSpaces(node.children[node.children.length - 1]))
-      ) < 2;
+      /** @type {ASTNode[]} */
+      const nonPaddingChildren = node.children.filter(
+        (child) => !isPaddingSpaces(child)
+      );
+
+      if (nonPaddingChildren.length < 2) {
+        return !containsCallExpression(nonPaddingChildren[0]);
+      }
     }
 
     /**

tests/lib/rules/jsx-no-useless-fragment.js

@@ -63,6 +63,10 @@ ruleTester.run('jsx-no-useless-fragment', rule, {
     {
       code: '<Fooo content={<>eeee ee eeeeeee eeeeeeee</>} />',
       parser: parsers.BABEL_ESLINT
+    },
+    {
+      code: '<>{foos.map(foo => foo)}</>',
+      parser: parsers.BABEL_ESLINT
     }
   ],
   invalid: [
@@ -72,6 +76,12 @@ ruleTester.run('jsx-no-useless-fragment', rule, {
       errors: [{messageId: 'NeedsMoreChidren', type: 'JSXFragment'}],
       parser: parsers.BABEL_ESLINT
     },
+    {
+      code: '<>{}</>',
+      output: null,
+      errors: [{messageId: 'NeedsMoreChidren', type: 'JSXFragment'}],
+      parser: parsers.BABEL_ESLINT
+    },
     {
       code: '<p>moo<>foo</></p>',
       output: '<p>moofoo</p>',