[New] jsx-no-useless-fragment: add ignoreUnsafeChildren flag

docs/rules/jsx-no-useless-fragment.md

@@ -52,3 +52,28 @@ const cat = <>meow</>
 
 <Fragment key={item.id}>{item.value}</Fragment>
 ```
+
+## Rule Options
+
+```js
+...
+"react/jsx-no-useless-fragments": [<enabled>, { "ignoreNeedsMoreChildren": <boolean> }]
+...
+```
+
+### `ignoreNeedsMoreChildren` (default: `false`)
+
+When `true` the rule will ignore errors related to fragments having enough
+children.
+
+Examples of **correct** code for this rule:
+
+```jsx
+<></>
+
+<>{children}</>
+
+<>{foo && <Foo/>}</>
+
+<>{foo?.map(x => <Bar x={x}/>)}</>
+```

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

@@ -96,6 +96,8 @@ module.exports = {
   create(context) {
     const reactPragma = pragmaUtil.getFromContext(context);
     const fragmentPragma = pragmaUtil.getFragmentFromContext(context);
+    const config = context.options[0] || {};
+    const ignoreNeedsMoreChildren = !!config.ignoreNeedsMoreChildren;
 
     /**
      * Test whether a node is an padding spaces trimmed by react runtime.
@@ -198,7 +200,7 @@ module.exports = {
         return;
       }
 
-      if (hasLessThanTwoChildren(node) && !isFragmentWithOnlyTextAndIsNotChild(node)) {
+      if (hasLessThanTwoChildren(node) && !isFragmentWithOnlyTextAndIsNotChild(node) && !ignoreNeedsMoreChildren) {
         context.report({
           node,
           messageId: 'NeedsMoreChidren',

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

@@ -67,6 +67,51 @@ ruleTester.run('jsx-no-useless-fragment', rule, {
     {
       code: '<>{foos.map(foo => foo)}</>',
       parser: parsers.BABEL_ESLINT
+    },
+    {
+      // component could require a ReactNode
+      code: '<></>',
+      output: null,
+      options: [{
+        ignoreNeedsMoreChildren: true
+      }],
+      parser: parsers.BABEL_ESLINT
+    },
+    {
+      // children could be undefined
+      code: '<>{children}</>',
+      output: null,
+      options: [{
+        ignoreNeedsMoreChildren: true
+      }],
+      parser: parsers.BABEL_ESLINT
+    },
+    {
+      // props.children could be undefined
+      code: '<>{props.children}</>',
+      output: null,
+      options: [{
+        ignoreNeedsMoreChildren: true
+      }],
+      parser: parsers.BABEL_ESLINT
+    },
+    {
+      // foo could be undefined
+      code: '<>{foo && <Foo/>}</>',
+      output: null,
+      options: [{
+        ignoreNeedsMoreChildren: true
+      }],
+      parser: parsers.BABEL_ESLINT
+    },
+    {
+      // foo could be undefined
+      code: '<>{foo?.map(x => <Bar id={x.id}/>)}</>',
+      output: null,
+      options: [{
+        ignoreNeedsMoreChildren: true
+      }],
+      parser: parsers.BABEL_ESLINT
     }
   ],
   invalid: [