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

Author: Simon Schick

README.md

@@ -338,7 +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-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,7 +11,6 @@ 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

@@ -1,7 +1,5 @@
 # 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

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

@@ -16,21 +16,23 @@ const messages = {
   noMultiSpreading: 'Spreading the same expression multiple times is forbidden',
 };
 
+const ignoredAstProperties = new Set(['parent', 'range', 'loc', 'start', 'end', '_babelType']);
+
 /**
  * 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);
+const propertyFilter = (key, value) => (ignoredAstProperties.has(key) ? undefined : value);
 
 module.exports = {
   meta: {
     docs: {
       description: 'Disallow JSX prop spreading the same expression multiple times',
       category: 'Best Practices',
-      recommended: true,
+      recommended: false,
       url: docsUrl('jsx-props-no-spread-multi'),
     },
     messages,
@@ -43,16 +45,17 @@ module.exports = {
         if (spreads.length < 2) {
           return;
         }
-        const hashes = new Set();
+        // We detect duplicate expressions by hashing the ast nodes
+        const argumentHashes = new Set();
         for (const spread of spreads) {
           // TODO: Deep compare ast function?
-          const hash = JSON.stringify(spread, propertyFilter);
-          if (hashes.has(hash)) {
+          const hash = JSON.stringify(spread.argument, propertyFilter);
+          if (argumentHashes.has(hash)) {
             report(context, messages.noMultiSpreading, 'noMultiSpreading', {
               node: spread,
             });
           }
-          hashes.add(hash);
+          argumentHashes.add(hash);
         }
       },
     };

package.json

@@ -57,7 +57,7 @@
     "@typescript-eslint/parser": "^2.34.0 || ^3.10.1 || ^4.0.0 || ^5.0.0",
     "aud": "^2.0.4",
     "babel-eslint": "^8 || ^9 || ^10.1.0",
-    "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8",
+    "eslint": "^3.19.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-doc-generator": "^1.7.0",
     "eslint-plugin-eslint-plugin": "^2.3.0 || ^3.5.3 || ^4.0.1 || ^5.0.5",

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

@@ -60,6 +60,13 @@ ruleTester.run('jsx-props-no-spread-multi', rule, {
       `,
       errors: [expectedError],
     },
+    {
+      code: `
+        const props = {};
+        <div {...props} {...props} {...props} />
+      `,
+      errors: [expectedError, expectedError],
+    },
     {
       code: `
         const func = () => ({});