[New] jsx-props-no-spreading: add explicitSpread option to allow …

…explicit spread of props Fixes #2439.
jsx-eslint · Oct 5, 2019 · 0877bcd · 0877bcd
1 parent 03bdefc
commit 0877bcd
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 7 deletions.
diff --git a/docs/rules/jsx-props-no-spreading.md b/docs/rules/jsx-props-no-spreading.md
@@ -27,8 +27,9 @@ const {one_prop, two_prop} = otherProps;
 ```js
 ...
 "react/jsx-props-no-spreading": [{
-    "html": "ignore" / "enforce",
-    "custom": "ignore" / "enforce",
+    "html": "ignore" | "enforce",
+    "custom": "ignore" | "enforce",
+    "explicitSpread": "ignore" | "enforce",
     "exceptions": [<string>]
 }]
 ...
@@ -65,6 +66,16 @@ The following patterns are still considered warnings:
 <img {...props} />
 ```
 
+### explicitSpread
+
+`explicitSpread` set to `ignore` will ignore spread operators that are explicilty listing all object properties within that spread. Default is set to `enforce`.
+
+The following pattern is **not** considered warning when `explicitSpread` is set to `ignore`:
+
+```jsx
+<img {...{ prop1, prop2, prop3 }} />
+```
+
 ### exceptions
 
 An "exception" will always flip the resulting html or custom setting for that component - ie, html set to `ignore`, with an exception of `div` will enforce on an `div`; custom set to `enforce` with an exception of `Foo` will ignore `Foo`.

diff --git a/lib/rules/jsx-props-no-spreading.js b/lib/rules/jsx-props-no-spreading.js
@@ -12,7 +12,12 @@ const docsUrl = require('../util/docsUrl');
 // ------------------------------------------------------------------------------
 
 const OPTIONS = {ignore: 'ignore', enforce: 'enforce'};
-const DEFAULTS = {html: OPTIONS.enforce, custom: OPTIONS.enforce, exceptions: []};
+const DEFAULTS = {
+  html: OPTIONS.enforce,
+  custom: OPTIONS.enforce,
+  explicitSpread: OPTIONS.enforce,
+  exceptions: []
+};
 
 // ------------------------------------------------------------------------------
 // Rule Definition
@@ -70,21 +75,34 @@ module.exports = {
     const configuration = context.options[0] || {};
     const ignoreHtmlTags = (configuration.html || DEFAULTS.html) === OPTIONS.ignore;
     const ignoreCustomTags = (configuration.custom || DEFAULTS.custom) === OPTIONS.ignore;
+    const ignoreExplicitSpread = (configuration.explicitSpread || DEFAULTS.explicitSpread) === OPTIONS.ignore;
     const exceptions = configuration.exceptions || DEFAULTS.exceptions;
     const isException = (tag, allExceptions) => allExceptions.indexOf(tag) !== -1;
+    const isProperty = property => property.type === 'Property';
     return {
       JSXSpreadAttribute(node) {
         const tagName = node.parent.name.name;
         const isHTMLTag = tagName && tagName[0] !== tagName[0].toUpperCase();
         const isCustomTag = tagName && tagName[0] === tagName[0].toUpperCase();
-        if (isHTMLTag &&
+        if (
+          isHTMLTag &&
           ((ignoreHtmlTags && !isException(tagName, exceptions)) ||
-          (!ignoreHtmlTags && isException(tagName, exceptions)))) {
+          (!ignoreHtmlTags && isException(tagName, exceptions)))
+        ) {
           return;
         }
-        if (isCustomTag &&
+        if (
+          isCustomTag &&
           ((ignoreCustomTags && !isException(tagName, exceptions)) ||
-          (!ignoreCustomTags && isException(tagName, exceptions)))) {
+          (!ignoreCustomTags && isException(tagName, exceptions)))
+        ) {
+          return;
+        }
+        if (
+          ignoreExplicitSpread &&
+          node.argument.type === 'ObjectExpression' &&
+          node.argument.properties.every(isProperty)
+        ) {
           return;
         }
         context.report({

diff --git a/tests/lib/rules/jsx-props-no-spreading.js b/tests/lib/rules/jsx-props-no-spreading.js
@@ -82,6 +82,13 @@ ruleTester.run('jsx-props-no-spreading', rule, {
       '</App>'
     ].join('\n'),
     options: [{html: 'ignore'}]
+  }, {
+    code: `
+      <App>
+        <Foo {...{ prop1, prop2, prop3 }} />
+      </App>
+    `,
+    options: [{explicitSpread: 'ignore'}]
   }],
 
   invalid: [{
@@ -154,5 +161,36 @@ ruleTester.run('jsx-props-no-spreading', rule, {
     ].join('\n'),
     options: [{html: 'ignore'}],
     errors: [expectedError]
+  }, {
+    code: `
+      <App>
+        <Foo {...{ prop1, prop2, prop3 }} />
+      </App>
+    `,
+    errors: [expectedError]
+  }, {
+    code: `
+      <App>
+        <Foo {...{ prop1, ...rest }} />
+      </App>
+    `,
+    options: [{explicitSpread: 'ignore'}],
+    errors: [expectedError]
+  }, {
+    code: `
+      <App>
+        <Foo {...{ ...props }} />
+      </App>
+    `,
+    options: [{explicitSpread: 'ignore'}],
+    errors: [expectedError]
+  }, {
+    code: `
+      <App>
+        <Foo {...props } />
+      </App>
+    `,
+    options: [{explicitSpread: 'ignore'}],
+    errors: [expectedError]
   }]
 });