[New] destructuring-assignment: add ignoreUseContext option

jsx-eslint · Jun 1, 2023 · 0266151 · 0266151
1 parent 747fad0
commit 0266151
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 4 deletions.
diff --git a/docs/rules/destructuring-assignment.md b/docs/rules/destructuring-assignment.md
@@ -96,7 +96,7 @@ const Foo = class extends React.PureComponent {
 
 ```js
 ...
-"react/destructuring-assignment": [<enabled>, "always", { "ignoreClassFields": <boolean>, "destructureInSignature": "always" | "ignore" }]
+"react/destructuring-assignment": [<enabled>, "always", { "ignoreClassFields": <boolean>, "destructureInSignature": "always" | "ignore", "ignoreUseContext": <boolean> }]
 ...
 ```
 
@@ -139,3 +139,18 @@ function Foo(props) {
   return <Goo a={a}/>
 }
 ```
+
+### `ignoreUseContext`
+
+When configured with `true`, the rule will ignore values returned from `useContext`.
+
+Examples of **correct** code for this rule:
+
+```jsx
+import { useContext } from 'react';
+
+function Foo() {
+  const foo = useContext(fooContext);
+  return <>{foo.bar}</>
+}
+```
diff --git a/lib/rules/destructuring-assignment.js b/lib/rules/destructuring-assignment.js
@@ -84,6 +84,9 @@ module.exports = {
             'ignore',
           ],
         },
+        ignoreUseContext: {
+          type: 'boolean',
+        },
       },
       additionalProperties: false,
     }],
@@ -92,6 +95,7 @@ module.exports = {
   create: Components.detect((context, components, utils) => {
     const configuration = context.options[0] || DEFAULT_OPTION;
     const ignoreClassFields = (context.options[1] && (context.options[1].ignoreClassFields === true)) || false;
+    const ignoreUseContext = (context.options[1] && (context.options[1].ignoreUseContext === true)) || false;
     const destructureInSignature = (context.options[1] && context.options[1].destructureInSignature) || 'ignore';
     const sfcParams = createSFCParams();
 
@@ -247,7 +251,7 @@ module.exports = {
           contextSet.add(node.id.name);
         }
 
-        if (SFCComponent && destructuringUseContext && configuration === 'never') {
+        if (SFCComponent && destructuringUseContext && !ignoreUseContext && configuration === 'never') {
           report(context, messages.noDestructAssignment, 'noDestructAssignment', {
             node,
             data: {

diff --git a/tests/lib/rules/destructuring-assignment.js b/tests/lib/rules/destructuring-assignment.js
@@ -833,7 +833,7 @@ ruleTester.run('destructuring-assignment', rule, {
         ],
         output: `
           function Foo({a}) {
-            
+
             return <p>{a}</p>;
           }
         `,
@@ -854,7 +854,7 @@ ruleTester.run('destructuring-assignment', rule, {
         ],
         output: `
           function Foo({a}: FooProps) {
-            
+
             return <p>{a}</p>;
           }
         `,
@@ -890,6 +890,30 @@ ruleTester.run('destructuring-assignment', rule, {
       errors: [
         { message: 'Must never use destructuring useContext assignment' },
       ],
+    },
+    {
+      code: `
+        import { useContext } from 'react';
+
+        const MyComponent = (props) => {
+          const foo = useContext(aContext);
+          return <div>{foo.test}</div>
+        };
+      `,
+      options: ['always', { ignoreUseContext: true }],
+      settings: { react: { version: '16.9.0' } },
+    },
+    {
+      code: `
+        import { useContext } from 'react';
+
+        const MyComponent = (props) => {
+          const {foo} = useContext(aContext);
+          return <div>{foo}</div>
+        };
+      `,
+      options: ['never', { ignoreUseContext: true }],
+      settings: { react: { version: '16.9.0' } },
     }
   )),
 });