allow the case of fragment with only text and is not child

jsx-eslint · Sep 1, 2019 · 4d8a3f9 · 4d8a3f9
1 parent 14b4cd8
commit 4d8a3f9
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 9 deletions.
diff --git a/docs/rules/jsx-no-useless-fragment.md b/docs/rules/jsx-no-useless-fragment.md
@@ -9,12 +9,12 @@ A fragment is redundant if it contains only one child, or if it is the child of
 The following patterns are considered warnings:
 
 ```jsx
-<>foo</>
-
 <>{foo}</>
 
 <><Foo /></>
 
+<p><>foo</></p>
+
 <></>
 
 <Fragment>foo</Fragment>
@@ -41,6 +41,8 @@ The following patterns are **not** considered warnings:
 
 <> {foo}</>
 
+const cat = <>meow</>
+
 <SomeComponent>
   <>
     <div />

diff --git a/lib/rules/jsx-no-useless-fragment.js b/lib/rules/jsx-no-useless-fragment.js
@@ -27,6 +27,17 @@ function isOnlyWhitespace(text) {
   return text.trim().length === 0;
 }
 
+/**
+ * Somehow fragment like this is useful: <Foo content={<>ee eeee eeee ...</>} />
+ * @param {ASTNode} node
+ * @returns {boolean}
+ */
+function isFragmentWithOnlyTextAndIsNotChild(node) {
+  return node.children.length === 1 &&
+    isJSXText(node.children[0]) &&
+    !(node.parent.type === 'JSXElement' || node.parent.type === 'JSXFragment');
+}
+
 /**
  * @param {string} text
  * @returns {string}
@@ -158,7 +169,7 @@ module.exports = {
         return;
       }
 
-      if (hasLessThanTwoChildren(node)) {
+      if (hasLessThanTwoChildren(node) && !isFragmentWithOnlyTextAndIsNotChild(node)) {
         context.report({
           node,
           messageId: 'NeedsMoreChidren',

diff --git a/tests/lib/rules/jsx-no-useless-fragment.js b/tests/lib/rules/jsx-no-useless-fragment.js
@@ -59,6 +59,10 @@ ruleTester.run('jsx-no-uselses-fragment', rule, {
     {
       code: '<Fragment key={item.id}>{item.value}</Fragment>',
       parser: parsers.BABEL_ESLINT
+    },
+    {
+      code: '<Fooo content={<>eeee ee eeeeeee eeeeeeee</>} />',
+      parser: parsers.BABEL_ESLINT
     }
   ],
   invalid: [
@@ -68,12 +72,6 @@ ruleTester.run('jsx-no-uselses-fragment', rule, {
       errors: [{messageId: 'NeedsMoreChidren', type: 'JSXFragment'}],
       parser: parsers.BABEL_ESLINT
     },
-    {
-      code: '<>foo</>',
-      output: null,
-      errors: [{messageId: 'NeedsMoreChidren'}],
-      parser: parsers.BABEL_ESLINT
-    },
     {
       code: '<p>moo<>foo</></p>',
       output: '<p>moofoo</p>',