feat(rules): add jsx-props-no-spread-multi

Author: Simon Schick

README.md

@@ -338,6 +338,7 @@ module.exports = [
 | [jsx-one-expression-per-line](docs/rules/jsx-one-expression-per-line.md)                     | Require one JSX element per line                                                                                                             |    |    | 🔧 |    |    |
 | [jsx-pascal-case](docs/rules/jsx-pascal-case.md)                                             | Enforce PascalCase for user-defined JSX components                                                                                           |    |    |    |    |    |
 | [jsx-props-no-multi-spaces](docs/rules/jsx-props-no-multi-spaces.md)                         | Disallow multiple spaces between inline JSX props                                                                                            |    |    | 🔧 |    |    |
+| [jsx-props-no-spread-multi](docs/rules/jsx-props-no-spread-multi.md)                         | Disallow JSX prop spreading the same expression multiple times                                                                               | ☑️ |    |    |    |    |
 | [jsx-props-no-spreading](docs/rules/jsx-props-no-spreading.md)                               | Disallow JSX prop spreading                                                                                                                  |    |    |    |    |    |
 | [jsx-sort-default-props](docs/rules/jsx-sort-default-props.md)                               | Enforce defaultProps declarations alphabetical sorting                                                                                       |    |    |    |    | ❌  |
 | [jsx-sort-props](docs/rules/jsx-sort-props.md)                                               | Enforce props alphabetical sorting                                                                                                           |    |    | 🔧 |    |    |

configs/recommended.js

@@ -11,6 +11,7 @@ module.exports = Object.assign({}, all, {
     'react/jsx-no-duplicate-props': 2,
     'react/jsx-no-target-blank': 2,
     'react/jsx-no-undef': 2,
+    'react/jsx-props-no-spread-multi': 2,
     'react/jsx-uses-react': 2,
     'react/jsx-uses-vars': 2,
     'react/no-children-prop': 2,

docs/rules/jsx-props-no-spread-multi.md

@@ -0,0 +1,27 @@
+# Disallow JSX prop spreading the same expression multiple times (`react/jsx-props-no-spread-multi`)
+
+💼 This rule is enabled in the ☑️ `recommended` [config](https://github.com/jsx-eslint/eslint-plugin-react/#shareable-configs).
+
+<!-- end auto-generated rule header -->
+
+Enforces that any unique express is only spread once. Generally spreading the same expression twice is an indicator of a mistake since any attribute between the spreads may be overridden when
+the intent was not to. Even when that is not the case this will lead to unnecessary computations to be performed.
+
+## Rule Details
+
+Examples of **incorrect** code for this rule:
+
+```jsx
+<App {...props} myAttr='1' {...props} />
+```
+
+Examples of **correct** code for this rule:
+
+```jsx
+<App myAttr='1' {...props} />
+<App {...props} myAttr='1' />
+```
+
+## When Not To Use It
+
+When spreading the same expression yields different values.

lib/rules/index.js

@@ -50,6 +50,7 @@ module.exports = {
   'jsx-fragments': require('./jsx-fragments'),
   'jsx-props-no-multi-spaces': require('./jsx-props-no-multi-spaces'),
   'jsx-props-no-spreading': require('./jsx-props-no-spreading'),
+  'jsx-props-no-spread-multi': require('./jsx-props-no-spread-multi'),
   'jsx-sort-default-props': require('./jsx-sort-default-props'),
   'jsx-sort-props': require('./jsx-sort-props'),
   'jsx-space-before-closing': require('./jsx-space-before-closing'),

lib/rules/jsx-props-no-spread-multi.js

@@ -0,0 +1,60 @@
+/**
+ * @fileoverview Prevent JSX prop spreading the same value multiple times
+ * @author Simon Schick
+ */
+
+'use strict';
+
+const docsUrl = require('../util/docsUrl');
+const report = require('../util/report');
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+const messages = {
+  noMultiSpreading: 'Spreading the same value multiple times is forbidden',
+};
+
+/**
+ * Filter for JSON.stringify that omits circular and position structures.
+ *
+ * @param {string} key
+ * @param {*} value
+ * @returns {*}
+ */
+const propertyFilter = (key, value) => (key !== 'parent' && key !== 'range' && key !== 'loc' ? value : undefined);
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Disallow JSX prop spreading the same expression multiple times',
+      category: 'Best Practices',
+      recommended: true,
+      url: docsUrl('jsx-props-no-spread-multi'),
+    },
+    messages,
+  },
+
+  create(context) {
+    return {
+      JSXOpeningElement(node) {
+        const spreads = node.attributes.filter((attr) => attr.type === 'JSXSpreadAttribute');
+        if (spreads.length < 2) {
+          return;
+        }
+        const hashes = new Set();
+        for (const spread of spreads) {
+          // TODO: Deep compare ast function?
+          const hash = JSON.stringify(spread, propertyFilter);
+          if (hashes.has(hash)) {
+            report(context, messages.noMultiSpreading, 'noMultiSpreading', {
+              node: spread,
+            });
+          }
+          hashes.add(hash);
+        }
+      },
+    };
+  },
+};

lib/types.d.ts

@@ -11,11 +11,16 @@ declare global {
   type JSXAttribute = ASTNode;
   type JSXElement = ASTNode;
   type JSXFragment = ASTNode;
+  type JSXOpeningElement = ASTNode;
   type JSXSpreadAttribute = ASTNode;
 
-  type Context = eslint.Rule.RuleContext
+  type Context = eslint.Rule.RuleContext;
 
-  type TypeDeclarationBuilder = (annotation: ASTNode, parentName: string, seen: Set<typeof annotation>) => object;
+  type TypeDeclarationBuilder = (
+    annotation: ASTNode,
+    parentName: string,
+    seen: Set<typeof annotation>
+  ) => object;
 
   type TypeDeclarationBuilders = {
     [k in string]: TypeDeclarationBuilder;

tests/lib/rules/jsx-props-no-spread-multi.js

@@ -0,0 +1,65 @@
+/**
+ * @fileoverview Tests for jsx-props-no-spread-multi
+ */
+
+'use strict';
+
+// -----------------------------------------------------------------------------
+// Requirements
+// -----------------------------------------------------------------------------
+
+const RuleTester = require('eslint').RuleTester;
+const rule = require('../../../lib/rules/jsx-props-no-spread-multi');
+
+const parsers = require('../../helpers/parsers');
+
+const parserOptions = {
+  ecmaVersion: 2018,
+  sourceType: 'module',
+  ecmaFeatures: {
+    jsx: true,
+  },
+};
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+const ruleTester = new RuleTester({ parserOptions });
+const expectedError = { messageId: 'noMultiSpreading' };
+
+ruleTester.run('jsx-props-no-spread-multi', rule, {
+  valid: parsers.all([
+    {
+      code: `
+        const a = {};
+        const b = {};
+        <App {...a} {...b} />
+      `,
+    },
+  ]),
+
+  invalid: parsers.all([
+    {
+      code: `
+        const props = {};
+        <App {...props} {...props} />
+      `,
+      errors: [expectedError],
+    },
+    {
+      code: `
+        const props = {};
+        <div {...props} a='a' {...props} />
+      `,
+      errors: [expectedError],
+    },
+    {
+      code: `
+        const func = () => ({});
+        <div {...func()} {...func()}  />
+      `,
+      errors: [expectedError],
+    },
+  ]),
+});