File Manager

Current Path: Root / node_modules/ eslint-plugin-react/ lib/ rules

Parent Directory

Name	Size	Last Modified
[F]boolean-prop-naming.js Edit	12.29 KB	2022-10-08 17:28:24
[F]button-has-type.js Edit	4.25 KB	2022-10-08 17:28:24
[F]default-props-match-prop-types.js Edit	3.32 KB	2022-10-08 17:28:24
[F]destructuring-assignment.js Edit	8.66 KB	2022-10-08 17:28:25
[F]display-name.js Edit	7.81 KB	2022-10-08 17:28:25
[F]forbid-component-props.js Edit	3.27 KB	2022-10-08 17:28:25
[F]forbid-dom-props.js Edit	3.07 KB	2022-10-08 17:28:25
[F]forbid-elements.js Edit	2.96 KB	2022-10-08 17:28:25
[F]forbid-foreign-prop-types.js Edit	3.38 KB	2022-10-08 17:28:25
[F]forbid-prop-types.js Edit	8.33 KB	2022-10-08 17:28:25
[F]function-component-definition.js Edit	8.02 KB	2022-10-08 17:28:26
[F]hook-use-state.js Edit	5.45 KB	2022-10-08 17:28:26
[F]iframe-missing-sandbox.js Edit	3.88 KB	2022-10-08 17:28:26
[F]jsx-boolean-value.js Edit	4.27 KB	2022-10-08 17:28:26
[F]jsx-child-element-spacing.js Edit	2.80 KB	2022-10-08 17:28:26
[F]jsx-closing-bracket-location.js Edit	10.58 KB	2022-10-08 17:28:26
[F]jsx-closing-tag-location.js Edit	1.92 KB	2022-10-08 17:28:26
[F]jsx-curly-brace-presence.js Edit	13.66 KB	2022-10-08 17:28:26
[F]jsx-curly-newline.js Edit	5.85 KB	2022-10-08 17:28:26
[F]jsx-curly-spacing.js Edit	14.36 KB	2022-10-08 17:28:26
[F]jsx-equals-spacing.js Edit	3.43 KB	2022-10-08 17:28:26
[F]jsx-filename-extension.js Edit	2.78 KB	2022-10-08 17:28:26
[F]jsx-first-prop-new-line.js Edit	2.28 KB	2022-10-08 17:28:27
[F]jsx-fragments.js Edit	6.77 KB	2022-10-08 17:28:27
[F]jsx-handler-names.js Edit	5.08 KB	2022-10-08 17:28:27
[F]jsx-indent-props.js Edit	6.29 KB	2022-10-08 17:28:27
[F]jsx-indent.js Edit	14.15 KB	2022-10-08 17:28:27
[F]jsx-key.js Edit	8.28 KB	2022-10-08 17:28:27
[F]jsx-max-depth.js Edit	4.07 KB	2022-10-08 17:28:27
[F]jsx-max-props-per-line.js Edit	4.04 KB	2022-10-08 17:28:27
[F]jsx-newline.js Edit	4.39 KB	2022-10-08 17:28:27
[F]jsx-no-bind.js Edit	5.86 KB	2022-10-08 17:28:27
[F]jsx-no-comment-textnodes.js Edit	1.64 KB	2022-10-08 17:28:27
[F]jsx-no-constructed-context-values.js Edit	7.04 KB	2022-10-08 17:28:27
[F]jsx-no-duplicate-props.js Edit	1.63 KB	2022-10-08 17:28:27
[F]jsx-no-leaked-render.js Edit	5.08 KB	2022-10-08 17:28:27
[F]jsx-no-literals.js Edit	5.60 KB	2022-10-08 17:28:27
[F]jsx-no-script-url.js Edit	2.65 KB	2022-10-08 17:28:28
[F]jsx-no-target-blank.js Edit	9.61 KB	2022-10-08 17:28:28
[F]jsx-no-undef.js Edit	2.97 KB	2022-10-08 17:28:28
[F]jsx-no-useless-fragment.js Edit	6.62 KB	2022-10-08 17:28:28
[F]jsx-one-expression-per-line.js Edit	7.37 KB	2022-10-08 17:28:28
[F]jsx-pascal-case.js Edit	4.44 KB	2022-10-08 17:28:28
[F]jsx-props-no-multi-spaces.js Edit	3.54 KB	2022-10-08 17:28:28
[F]jsx-props-no-spreading.js Edit	3.94 KB	2022-10-08 17:28:28
[F]jsx-sort-default-props.js Edit	4.88 KB	2022-10-08 17:28:28
[F]jsx-sort-props.js Edit	17.60 KB	2022-10-08 17:28:28
[F]jsx-space-before-closing.js Edit	2.79 KB	2022-10-08 17:28:28
[F]jsx-tag-spacing.js Edit	10.24 KB	2022-10-08 17:28:28
[F]jsx-uses-react.js Edit	1.33 KB	2022-10-08 17:28:28
[F]jsx-uses-vars.js Edit	1.49 KB	2022-10-08 17:28:28
[F]jsx-wrap-multilines.js Edit	7.62 KB	2022-10-08 17:28:28
[F]no-access-state-in-setstate.js Edit	5.73 KB	2022-10-08 17:28:29
[F]no-adjacent-inline-elements.js Edit	2.93 KB	2022-10-08 17:28:29
[F]no-array-index-key.js Edit	7.20 KB	2022-10-08 17:28:29
[F]no-arrow-function-lifecycle.js Edit	4.59 KB	2022-10-08 17:28:29
[F]no-children-prop.js Edit	3.67 KB	2022-10-08 17:28:29
[F]no-danger-with-children.js Edit	4.99 KB	2022-10-08 17:28:29
[F]no-danger.js Edit	1.92 KB	2022-10-08 17:28:29
[F]no-deprecated.js Edit	8.20 KB	2022-10-08 17:28:29
[F]no-did-mount-set-state.js Edit	260 bytes	2022-10-08 17:28:29
[F]no-did-update-set-state.js Edit	262 bytes	2022-10-08 17:28:29
[F]no-direct-mutation-state.js Edit	4.40 KB	2022-10-08 17:28:30
[F]no-find-dom-node.js Edit	1.20 KB	2022-10-08 17:28:30
[F]no-invalid-html-attribute.js Edit	14.28 KB	2022-10-08 17:28:30
[F]no-is-mounted.js Edit	1.31 KB	2022-10-08 17:28:30
[F]no-multi-comp.js Edit	1.97 KB	2022-10-08 17:28:30
[F]no-namespace.js Edit	1.66 KB	2022-10-08 17:28:30
[F]no-redundant-should-component-update.js Edit	2.33 KB	2022-10-08 17:28:30
[F]no-render-return-value.js Edit	2.17 KB	2022-10-08 17:28:30
[F]no-set-state.js Edit	2.27 KB	2022-10-08 17:28:30
[F]no-string-refs.js Edit	3.42 KB	2022-10-08 17:28:30
[F]no-this-in-sfc.js Edit	1.24 KB	2022-10-08 17:28:30
[F]no-typos.js Edit	8.63 KB	2022-10-08 17:28:30
[F]no-unescaped-entities.js Edit	3.70 KB	2022-10-08 17:28:30
[F]no-unknown-property.js Edit	25.22 KB	2022-10-08 17:28:30
[F]no-unsafe.js Edit	4.11 KB	2022-10-08 17:28:30
[F]no-unstable-nested-components.js Edit	14.78 KB	2022-10-08 17:28:30
[F]no-unused-class-component-methods.js Edit	6.55 KB	2022-10-08 17:28:30
[F]no-unused-prop-types.js Edit	4.85 KB	2022-10-08 17:28:30
[F]no-unused-state.js Edit	15.45 KB	2022-10-08 17:28:30
[F]no-will-update-set-state.js Edit	393 bytes	2022-10-08 17:28:31
[F]prefer-es6-class.js Edit	1.49 KB	2022-10-08 17:28:31
[F]prefer-exact-props.js Edit	4.85 KB	2022-10-08 17:28:31
[F]prefer-read-only-props.js Edit	2.22 KB	2022-10-08 17:28:31
[F]prefer-stateless-function.js Edit	12.52 KB	2022-10-08 17:28:31
[F]prop-types.js Edit	6.07 KB	2022-10-08 17:28:31
[F]react-in-jsx-scope.js Edit	1.30 KB	2022-10-08 17:28:31
[F]require-default-props.js Edit	6.48 KB	2022-10-08 17:28:31
[F]require-optimization.js Edit	6.75 KB	2022-10-08 17:28:31
[F]require-render-return.js Edit	3.07 KB	2022-10-08 17:28:31
[F]self-closing-comp.js Edit	2.89 KB	2022-10-08 17:28:31
[F]sort-comp.js Edit	13.22 KB	2022-10-08 17:28:31
[F]sort-prop-types.js Edit	7.78 KB	2022-10-08 17:28:31
[F]state-in-constructor.js Edit	1.81 KB	2022-10-08 17:28:31
[F]static-property-placement.js Edit	6.24 KB	2022-10-08 17:28:31
[F]style-prop-object.js Edit	3.83 KB	2022-10-08 17:28:31
[F]void-dom-elements-no-children.js Edit	3.93 KB	2022-10-08 17:28:31

Editing: jsx-no-useless-fragment.js

/**
 * @fileoverview Disallow useless fragments
 */

'use strict';

const arrayIncludes = require('array-includes');

const pragmaUtil = require('../util/pragma');
const jsxUtil = require('../util/jsx');
const docsUrl = require('../util/docsUrl');
const report = require('../util/report');

function isJSXText(node) {
  return !!node && (node.type === 'JSXText' || node.type === 'Literal');
}

/**
 * @param {string} text
 * @returns {boolean}
 */
function isOnlyWhitespace(text) {
  return text.trim().length === 0;
}

/**
 * @param {ASTNode} node
 * @returns {boolean}
 */
function isNonspaceJSXTextOrJSXCurly(node) {
  return (isJSXText(node) && !isOnlyWhitespace(node.raw)) || node.type === 'JSXExpressionContainer';
}

/**
 * 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}
 */
function trimLikeReact(text) {
  const leadingSpaces = /^\s*/.exec(text)[0];
  const trailingSpaces = /\s*$/.exec(text)[0];

const start = arrayIncludes(leadingSpaces, '\n') ? leadingSpaces.length : 0;
  const end = arrayIncludes(trailingSpaces, '\n') ? text.length - trailingSpaces.length : text.length;

return text.slice(start, end);
}

/**
 * Test if node is like `<Fragment key={_}>_</Fragment>`
 * @param {JSXElement} node
 * @returns {boolean}
 */
function isKeyedElement(node) {
  return node.type === 'JSXElement'
    && node.openingElement.attributes
    && 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';
}

const messages = {
  NeedsMoreChildren: '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.',
};

module.exports = {
  meta: {
    type: 'suggestion',
    fixable: 'code',
    docs: {
      description: 'Disallow unnecessary fragments',
      category: 'Possible Errors',
      recommended: false,
      url: docsUrl('jsx-no-useless-fragment'),
    },
    messages,
  },

create(context) {
    const config = context.options[0] || {};
    const allowExpressions = config.allowExpressions || false;

const reactPragma = pragmaUtil.getFromContext(context);
    const fragmentPragma = pragmaUtil.getFragmentFromContext(context);

/**
     * Test whether a node is an padding spaces trimmed by react runtime.
     * @param {ASTNode} node
     * @returns {boolean}
     */
    function isPaddingSpaces(node) {
      return isJSXText(node)
        && isOnlyWhitespace(node.raw)
        && arrayIncludes(node.raw, '\n');
    }

function isFragmentWithSingleExpression(node) {
      const children = node && node.children.filter((child) => !isPaddingSpaces(child));
      return (
        children
        && children.length === 1
        && children[0].type === 'JSXExpressionContainer'
      );
    }

/**
     * Test whether a JSXElement has less than two children, excluding paddings spaces.
     * @param {JSXElement|JSXFragment} node
     * @returns {boolean}
     */
    function hasLessThanTwoChildren(node) {
      if (!node || !node.children) {
        return true;
      }

/** @type {ASTNode[]} */
      const nonPaddingChildren = node.children.filter(
        (child) => !isPaddingSpaces(child)
      );

if (nonPaddingChildren.length < 2) {
        return !containsCallExpression(nonPaddingChildren[0]);
      }
    }

/**
     * @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);
    }

/**
     * @param {JSXElement|JSXFragment} node
     * @return {boolean}
     */
    function isChildOfComponentElement(node) {
      return node.parent.type === 'JSXElement'
        && !isChildOfHtmlElement(node)
        && !jsxUtil.isFragment(node.parent, reactPragma, fragmentPragma);
    }

/**
     * @param {ASTNode} node
     * @returns {boolean}
     */
    function canFix(node) {
      // Not safe to fix fragments without a jsx parent.
      if (!(node.parent.type === 'JSXElement' || node.parent.type === 'JSXFragment')) {
        // const a = <></>
        if (node.children.length === 0) {
          return false;
        }

// const a = <>cat {meow}</>
        if (node.children.some(isNonspaceJSXTextOrJSXCurly)) {
          return false;
        }
      }

// Not safe to fix `<Eeee><>foo</></Eeee>` because `Eeee` might require its children be a ReactElement.
      if (isChildOfComponentElement(node)) {
        return false;
      }

// old TS parser can't handle this one
      if (node.type === 'JSXFragment' && (!node.openingFragment || !node.closingFragment)) {
        return false;
      }

return true;
    }

/**
     * @param {ASTNode} node
     * @returns {Function | undefined}
     */
    function getFix(node) {
      if (!canFix(node)) {
        return undefined;
      }

return function fix(fixer) {
        const opener = node.type === 'JSXFragment' ? node.openingFragment : node.openingElement;
        const closer = node.type === 'JSXFragment' ? node.closingFragment : node.closingElement;

const childrenText = opener.selfClosing ? '' : context.getSourceCode().getText().slice(opener.range[1], closer.range[0]);

return fixer.replaceText(node, trimLikeReact(childrenText));
      };
    }

function checkNode(node) {
      if (isKeyedElement(node)) {
        return;
      }

if (
        hasLessThanTwoChildren(node)
        && !isFragmentWithOnlyTextAndIsNotChild(node)
        && !(allowExpressions && isFragmentWithSingleExpression(node))
      ) {
        report(context, messages.NeedsMoreChildren, 'NeedsMoreChildren', {
          node,
          fix: getFix(node),
        });
      }

if (isChildOfHtmlElement(node)) {
        report(context, messages.ChildOfHtmlElement, 'ChildOfHtmlElement', {
          node,
          fix: getFix(node),
        });
      }
    }

return {
      JSXElement(node) {
        if (jsxUtil.isFragment(node, reactPragma, fragmentPragma)) {
          checkNode(node);
        }
      },
      JSXFragment: checkNode,
    };
  },
};

Cancel

File Explorer

Navigation

File Manager

Editing: jsx-no-useless-fragment.js

File Explorer

Navigation

File Manager

Editing: jsx-no-useless-fragment.js

Confirm Deletion

Rename Item

Change Permissions (Chmod)