[New] add jsx-no-useless-fragment rule

Co-Authored-By: Jordan Harband <[email protected]>

Author: golopot

README.md

@@ -170,6 +170,7 @@ Enable the rules that you would like to use.
 * [react/jsx-no-literals](docs/rules/jsx-no-literals.md): Prevent usage of unwrapped JSX strings
 * [react/jsx-no-target-blank](docs/rules/jsx-no-target-blank.md): Prevent usage of unsafe `target='_blank'`
 * [react/jsx-no-undef](docs/rules/jsx-no-undef.md): Disallow undeclared variables in JSX
+* [react/jsx-no-useless-fragment](docs/rules/jsx-no-useless-fragment.md): Disallow unnescessary fragments (fixable)
 * [react/jsx-one-expression-per-line](docs/rules/jsx-one-expression-per-line.md): Limit to one expression per line in JSX
 * [react/jsx-curly-brace-presence](docs/rules/jsx-curly-brace-presence.md): Enforce curly braces or disallow unnecessary curly braces in JSX
 * [react/jsx-fragments](docs/rules/jsx-fragments.md): Enforce shorthand or standard form for React fragments

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

@@ -0,0 +1,50 @@
+# Disallow unnecessary fragments (react/jsx-no-useless-fragment)
+
+A fragment is redundant if it contains only one child, or if it is the child of a html element.
+
+**Fixable:** This rule is sometimes automatically fixable using the `--fix` flag on the command line.
+
+## Rule Details
+
+The following patterns are considered warnings:
+
+```jsx
+<>foo</>
+
+<>{foo}</>
+
+<><Foo /></>
+
+<></>
+
+<Fragment>foo</Fragment>
+
+<React.Fragment>foo</React.Fragment>
+
+<section>
+  <>
+    <div />
+    <div />
+  </>
+</section>
+```
+
+The following patterns are **not** considered warnings:
+
+```jsx
+<>
+  <Foo />
+  <Bar />
+</>
+
+<>foo {bar}</>
+
+<> {foo}</>
+
+<SomeComponent>
+  <>
+    <div />
+    <div />
+  </>
+</SomeComponent>
+```

index.js

@@ -34,6 +34,7 @@ const allRules = {
   'jsx-no-duplicate-props': require('./lib/rules/jsx-no-duplicate-props'),
   'jsx-no-literals': require('./lib/rules/jsx-no-literals'),
   'jsx-no-target-blank': require('./lib/rules/jsx-no-target-blank'),
+  'jsx-no-useless-fragment': require('./lib/rules/jsx-no-useless-fragment'),
   'jsx-one-expression-per-line': require('./lib/rules/jsx-one-expression-per-line'),
   'jsx-no-undef': require('./lib/rules/jsx-no-undef'),
   'jsx-curly-brace-presence': require('./lib/rules/jsx-curly-brace-presence'),

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

@@ -0,0 +1,168 @@
+/**
+ * @fileoverview Disallow useless fragments
+ */
+
+'use strict';
+
+const pragmaUtil = require('../util/pragma');
+const docsUrl = require('../util/docsUrl');
+
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    fixable: 'code',
+    docs: {
+      description: 'Disallow unnecessary fragments',
+      category: 'Possible Errors',
+      recommended: false,
+      url: docsUrl('jsx-no-useless-fragment')
+    },
+    messages: {
+      NeedsMoreChidren: 'Fragments should contain more than one child - otherwise, there‘s no need for a Fragment at all.',
+      ChildOfHtmlElement: 'Passing a fragment to an HTML element is useless.'
+    }
+  },
+
+  create(context) {
+    const reactPragma = pragmaUtil.getFromContext(context);
+    const fragmentPragma = pragmaUtil.getFragmentFromContext(context);
+
+    /**
+     * Test whether a JSXElement is a fragment
+     * @param {JSXElement} node
+     * @returns {boolean}
+     */
+    function isFragment(node) {
+      const name = node.openingElement.name;
+
+      // <Fragment>
+      if (
+        name.type === 'JSXIdentifier' &&
+        name.name === fragmentPragma
+      ) {
+        return true;
+      }
+
+      // <React.Fragment>
+      if (
+        name.type === 'JSXMemberExpression' &&
+        name.object.type === 'JSXIdentifier' &&
+        name.object.name === reactPragma &&
+        name.property.type === 'JSXIdentifier' &&
+        name.property.name === fragmentPragma
+      ) {
+        return true;
+      }
+
+      return false;
+    }
+
+    /**
+     * Test whether a node is an padding spaces trimmed by react runtime.
+     * @param {ASTNode} node
+     * @returns {boolean}
+     */
+    function isPaddingSpaces(node) {
+      return (node.type === 'JSXText' || node.type === 'Literal') &&
+        /^\s*$/.test(node.raw) &&
+        node.raw.includes('\n');
+    }
+
+    /**
+     * Test whether a JSXElement has less than two children, excluding paddings spaces.
+     * @param {JSXElement|JSXFragment} node
+     */
+    function hasLessThanTwoChildren(node) {
+      if (node.children.length < 2) {
+        return true;
+      }
+
+      return (
+        node.children.length -
+        Number(isPaddingSpaces(node.children[0])) -
+        Number(isPaddingSpaces(node.children[node.children.length - 1]))
+      ) < 2;
+    }
+
+    /**
+     * @param {JSXElement|JSXFragment} node
+     * @returns {boolean}
+     */
+    function isChildOfHtmlElement(node) {
+      return node.parent.type === 'JSXElement' &&
+        node.parent.openingElement.name.type === 'JSXIdentifier' &&
+        /^[a-z]+$/.test(node.parent.openingElement.name.name);
+    }
+
+    function isJSXText(node) {
+      return !!node && (node.type === 'JSXText' || node.type === 'Literal');
+    }
+
+    /**
+     * Avoid fixing case like:
+     * ```jsx
+     * <div>
+     *   pine<>
+     *     apple
+     *   </>
+     * </div>
+     * ```
+     * @param {JSXElement|JSXFragment} node
+     * @returns {boolean}
+     */
+    function isSafeToFix(node) {
+      if (!node.parent.children) {
+        return false;
+      }
+
+      const i = node.parent.children.indexOf(node);
+      const previousChild = node.parent.children[i - 1];
+      const nextChild = node.parent.children[i + 1];
+
+      return (
+        (!isJSXText(previousChild) || /\s$/.test(previousChild.value)) &&
+        (!isJSXText(nextChild) || /^\s/.test(nextChild.value))
+      );
+    }
+
+    function fix(node, fixer) {
+      return node.type === 'JSXFragment' ?
+        [
+          fixer.remove(node.openingFragment),
+          fixer.remove(node.closingFragment)
+        ] :
+        [
+          fixer.remove(node.openingElement),
+          fixer.remove(node.closingElement)
+        ];
+    }
+
+    function checkNode(node) {
+      if (hasLessThanTwoChildren(node)) {
+        context.report({
+          node,
+          messageId: 'NeedsMoreChidren',
+          fix: isSafeToFix(node) ? (fixer => fix(node, fixer)) : null
+        });
+      }
+
+      if (isChildOfHtmlElement(node)) {
+        context.report({
+          node,
+          messageId: 'ChildOfHtmlElement',
+          fix: isSafeToFix(node) ? (fixer => fix(node, fixer)) : null
+        });
+      }
+    }
+
+    return {
+      JSXElement(node) {
+        if (isFragment(node)) {
+          checkNode(node);
+        }
+      },
+      JSXFragment: checkNode
+    };
+  }
+};

lib/types.d.ts

@@ -9,6 +9,8 @@ declare global {
   type Token = eslint.AST.Token;
   type Fixer = eslint.Rule.RuleFixer;
   type JSXAttribute = ASTNode;
+  type JSXElement = ASTNode;
+  type JSXFragment = ASTNode;
   type JSXSpreadAttribute = ASTNode;
 
   interface Context extends eslint.SourceCode {