From 4d8a3f9a74dda1fb14ab9afae10a27d63777187a Mon Sep 17 00:00:00 2001
From: Chiawen Chen <golopot@gmail.com>
Date: Sun, 1 Sep 2019 17:53:20 +0800
Subject: [PATCH] allow the case of fragment with only text and is not child

---
 docs/rules/jsx-no-useless-fragment.md      |  6 ++++--
 lib/rules/jsx-no-useless-fragment.js       | 13 ++++++++++++-
 tests/lib/rules/jsx-no-useless-fragment.js | 10 ++++------
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/docs/rules/jsx-no-useless-fragment.md b/docs/rules/jsx-no-useless-fragment.md
index 20ef5fca62..fce91f901f 100644
--- 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
index 1837749c3c..b713a0bf10 100644
--- 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
index d113a44866..ebf2cefa19 100644
--- 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>',