Merge remote-tracking branch 'upstream/master' into zach/unstable-memo-message

Author: zacharyliu

CHANGELOG.md

@@ -5,6 +5,27 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 
 ## Unreleased
 
+### Added
+* [`destructuring-assignment`]: add option `destructureInSignature` ([#3235][] @golopot)
+
+### Fixed
+* [`hook-use-state`]: Allow UPPERCASE setState setter prefixes ([#3244][] @duncanbeevers)
+* `propTypes`: add `VFC` to react generic type param map ([#3230][] @dlech)
+
+[#3244]: https://github.com/yannickcr/eslint-plugin-react/pull/3244
+[#3235]: https://github.com/yannickcr/eslint-plugin-react/pull/3235
+[#3230]: https://github.com/yannickcr/eslint-plugin-react/issues/3230
+
+## [7.29.4] - 2022.03.13
+
+### Fixed
+* [`no-unused-state`]: avoid a crash on a class field gDSFP ([#3236][] @ljharb)
+* [`boolean-prop-naming`]: handle React.FC, intersection, union types ([#3241][] @ljharb)
+
+[7.29.4]: https://github.com/yannickcr/eslint-plugin-react/compare/v7.29.3...v7.29.4
+[#3241]: https://github.com/yannickcr/eslint-plugin-react/pull/3241
+[#3236]: https://github.com/yannickcr/eslint-plugin-react/issues/3236
+
 ## [7.29.3] - 2022.03.03
 
 ### Fixed

README.md

@@ -123,7 +123,7 @@ Enable the rules that you would like to use.
 |  |  | [react/boolean-prop-naming](docs/rules/boolean-prop-naming.md) | Enforces consistent naming for boolean props |
 |  |  | [react/button-has-type](docs/rules/button-has-type.md) | Forbid "button" element without an explicit "type" attribute |
 |  |  | [react/default-props-match-prop-types](docs/rules/default-props-match-prop-types.md) | Enforce all defaultProps are defined and not "required" in propTypes. |
-|  |  | [react/destructuring-assignment](docs/rules/destructuring-assignment.md) | Enforce consistent usage of destructuring assignment of props, state, and context |
+|  | 🔧 | [react/destructuring-assignment](docs/rules/destructuring-assignment.md) | Enforce consistent usage of destructuring assignment of props, state, and context |
 | ✔ |  | [react/display-name](docs/rules/display-name.md) | Prevent missing displayName in a React component definition |
 |  |  | [react/forbid-component-props](docs/rules/forbid-component-props.md) | Forbid certain props on components |
 |  |  | [react/forbid-dom-props](docs/rules/forbid-dom-props.md) | Forbid certain props on DOM Nodes |

docs/rules/destructuring-assignment.md

@@ -91,7 +91,7 @@ const Foo = class extends React.PureComponent {
 
 ```js
 ...
-"react/destructuring-assignment": [<enabled>, "always", { "ignoreClassFields": <boolean> }]
+"react/destructuring-assignment": [<enabled>, "always", { "ignoreClassFields": <boolean>, "destructureInSignature": "always" | "ignore" }]
 ...
 ```
 
@@ -104,3 +104,33 @@ class Foo extends React.PureComponent {
   bar = this.props.bar
 }
 ```
+
+### `destructureInSignature` (default: "ignore")
+
+This option can be one of `always` or `ignore`. When configured with `always`, the rule will require props destructuring happens in the function signature.
+
+Examples of **incorrect** code for `destructureInSignature: 'always'` :
+
+```jsx
+function Foo(props) {
+  const {a} = props;
+  return <>{a}</>
+}
+```
+
+Examples of **correct** code for `destructureInSignature: 'always'` :
+
+```jsx
+function Foo({a}) {
+  return <>{a}</>
+}
+```
+
+```jsx
+// Ignores when props is used elsewhere
+function Foo(props) {
+  const {a} = props;
+  useProps(props); // NOTE: it is a bad practice to pass the props object anywhere else!
+  return <Goo a={a}/>
+}
+```

lib/rules/boolean-prop-naming.js

@@ -228,6 +228,65 @@ module.exports = {
       args.filter((arg) => arg.type === 'ObjectExpression').forEach((object) => validatePropNaming(node, object.properties));
     }
 
+    function getComponentTypeAnnotation(component) {
+      // If this is a functional component that uses a global type, check it
+      if (
+        (component.node.type === 'FunctionDeclaration' || component.node.type === 'ArrowFunctionExpression')
+        && component.node.params
+        && component.node.params.length > 0
+        && component.node.params[0].typeAnnotation
+      ) {
+        return component.node.params[0].typeAnnotation.typeAnnotation;
+      }
+
+      if (
+        component.node.parent
+        && component.node.parent.type === 'VariableDeclarator'
+        && component.node.parent.id
+        && component.node.parent.id.type === 'Identifier'
+        && component.node.parent.id.typeAnnotation
+        && component.node.parent.id.typeAnnotation.typeAnnotation
+        && component.node.parent.id.typeAnnotation.typeAnnotation.typeParameters
+        && (
+          component.node.parent.id.typeAnnotation.typeAnnotation.typeParameters.type === 'TSTypeParameterInstantiation'
+          || component.node.parent.id.typeAnnotation.typeAnnotation.typeParameters.type === 'TypeParameterInstantiation'
+        )
+      ) {
+        return component.node.parent.id.typeAnnotation.typeAnnotation.typeParameters.params.find(
+          (param) => param.type === 'TSTypeReference' || param.type === 'GenericTypeAnnotation'
+        );
+      }
+    }
+
+    function findAllTypeAnnotations(identifier, node) {
+      if (node.type === 'TSTypeLiteral' || node.type === 'ObjectTypeAnnotation') {
+        const currentNode = [].concat(
+          objectTypeAnnotations.get(identifier.name) || [],
+          node
+        );
+        objectTypeAnnotations.set(identifier.name, currentNode);
+      } else if (
+        node.type === 'TSParenthesizedType'
+        && (
+          node.typeAnnotation.type === 'TSIntersectionType'
+          || node.typeAnnotation.type === 'TSUnionType'
+        )
+      ) {
+        node.typeAnnotation.types.forEach((type) => {
+          findAllTypeAnnotations(identifier, type);
+        });
+      } else if (
+        node.type === 'TSIntersectionType'
+        || node.type === 'TSUnionType'
+        || node.type === 'IntersectionTypeAnnotation'
+        || node.type === 'UnionTypeAnnotation'
+      ) {
+        node.types.forEach((type) => {
+          findAllTypeAnnotations(identifier, type);
+        });
+      }
+    }
+
     // --------------------------------------------------------------------------
     // Public
     // --------------------------------------------------------------------------
@@ -292,16 +351,11 @@ module.exports = {
       },
 
       TypeAlias(node) {
-        // Cache all ObjectType annotations, we will check them at the end
-        if (node.right.type === 'ObjectTypeAnnotation') {
-          objectTypeAnnotations.set(node.id.name, node.right);
-        }
+        findAllTypeAnnotations(node.id, node.right);
       },
 
       TSTypeAliasDeclaration(node) {
-        if (node.typeAnnotation.type === 'TSTypeLiteral') {
-          objectTypeAnnotations.set(node.id.name, node.typeAnnotation);
-        }
+        findAllTypeAnnotations(node.id, node.typeAnnotation);
       },
 
       // eslint-disable-next-line object-shorthand
@@ -311,19 +365,11 @@ module.exports = {
         }
 
         const list = components.list();
+
         Object.keys(list).forEach((component) => {
-          // If this is a functional component that uses a global type, check it
-          if (
-            (
-              list[component].node.type === 'FunctionDeclaration'
-              || list[component].node.type === 'ArrowFunctionExpression'
-            )
-            && list[component].node.params
-            && list[component].node.params.length
-            && list[component].node.params[0].typeAnnotation
-          ) {
-            const typeNode = list[component].node.params[0].typeAnnotation;
-            const annotation = typeNode.typeAnnotation;
+          const annotation = getComponentTypeAnnotation(list[component]);
+
+          if (annotation) {
             let propType;
             if (annotation.type === 'GenericTypeAnnotation') {
               propType = objectTypeAnnotations.get(annotation.id.name);
@@ -334,10 +380,12 @@ module.exports = {
             }
 
             if (propType) {
-              validatePropNaming(
-                list[component].node,
-                propType.properties || propType.members
-              );
+              [].concat(propType).forEach((prop) => {
+                validatePropNaming(
+                  list[component].node,
+                  prop.properties || prop.members
+                );
+              });
             }
           }
 

lib/rules/destructuring-assignment.js

@@ -50,6 +50,7 @@ const messages = {
   noDestructContextInSFCArg: 'Must never use destructuring context assignment in SFC argument',
   noDestructAssignment: 'Must never use destructuring {{type}} assignment',
   useDestructAssignment: 'Must use destructuring {{type}} assignment',
+  destructureInSignature: 'Must destructure props in the function signature.',
 };
 
 module.exports = {
@@ -60,7 +61,7 @@ module.exports = {
       recommended: false,
       url: docsUrl('destructuring-assignment'),
     },
-
+    fixable: 'code',
     messages,
 
     schema: [{
@@ -75,6 +76,13 @@ module.exports = {
         ignoreClassFields: {
           type: 'boolean',
         },
+        destructureInSignature: {
+          type: 'string',
+          enum: [
+            'always',
+            'ignore',
+          ],
+        },
       },
       additionalProperties: false,
     }],
@@ -83,6 +91,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 destructureInSignature = (context.options[1] && context.options[1].destructureInSignature) || 'ignore';
     const sfcParams = createSFCParams();
 
     /**
@@ -230,6 +239,41 @@ module.exports = {
             },
           });
         }
+
+        if (
+          SFCComponent
+          && destructuringSFC
+          && configuration === 'always'
+          && destructureInSignature === 'always'
+          && node.init.name === 'props'
+        ) {
+          const scopeSetProps = context.getScope().set.get('props');
+          const propsRefs = scopeSetProps && scopeSetProps.references;
+          if (!propsRefs) {
+            return;
+          }
+          // Skip if props is used elsewhere
+          if (propsRefs.length > 1) {
+            return;
+          }
+          report(context, messages.destructureInSignature, 'destructureInSignature', {
+            node,
+            fix(fixer) {
+              const param = SFCComponent.node.params[0];
+              if (!param) {
+                return;
+              }
+              const replaceRange = [
+                param.range[0],
+                param.typeAnnotation ? param.typeAnnotation.range[0] : param.range[1],
+              ];
+              return [
+                fixer.replaceTextRange(replaceRange, context.getSourceCode().getText(node.id)),
+                fixer.remove(node.parent),
+              ];
+            },
+          });
+        }
       },
     };
   }),

lib/rules/hook-use-state.js

@@ -66,23 +66,31 @@ module.exports = {
         ? setterVariable.name
         : undefined;
 
-      const expectedSetterVariableName = valueVariableName ? (
-        `set${valueVariableName.charAt(0).toUpperCase()}${valueVariableName.slice(1)}`
-      ) : undefined;
+      const caseCandidateMatch = valueVariableName ? valueVariableName.match(/(^[a-z]+)(.*)/) : undefined;
+      const upperCaseCandidatePrefix = caseCandidateMatch ? caseCandidateMatch[1] : undefined;
+      const caseCandidateSuffix = caseCandidateMatch ? caseCandidateMatch[2] : undefined;
+      const expectedSetterVariableNames = upperCaseCandidatePrefix ? [
+        `set${upperCaseCandidatePrefix.charAt(0).toUpperCase()}${upperCaseCandidatePrefix.slice(1)}${caseCandidateSuffix}`,
+        `set${upperCaseCandidatePrefix.toUpperCase()}${caseCandidateSuffix}`,
+      ] : [];
 
       const isSymmetricGetterSetterPair = valueVariable
         && setterVariable
-        && setterVariableName === expectedSetterVariableName
+        && expectedSetterVariableNames.indexOf(setterVariableName) !== -1
         && variableNodes.length === 2;
 
       if (!isSymmetricGetterSetterPair) {
         const suggestions = [
           {
             desc: 'Destructure useState call into value + setter pair',
             fix: (fixer) => {
+              if (expectedSetterVariableNames.length === 0) {
+                return;
+              }
+
               const fix = fixer.replaceTextRange(
                 node.parent.id.range,
-                `[${valueVariableName}, ${expectedSetterVariableName}]`
+                `[${valueVariableName}, ${expectedSetterVariableNames[0]}]`
               );
 
               return fix;

lib/rules/no-unused-state.js

@@ -249,6 +249,7 @@ module.exports = {
         !node.static
         || name !== 'getDerivedStateFromProps'
         || !node.value
+        || !node.value.params
         || node.value.params.length < 2 // no `state` argument
       ) {
         return false;

lib/util/propTypes.js

@@ -105,6 +105,7 @@ module.exports = function propTypesInstructions(context, components, utils) {
     ForwardRefRenderFunction: 1,
     forwardRef: 1,
     VoidFunctionComponent: 0,
+    VFC: 0,
     PropsWithChildren: 0,
     SFC: 0,
     StatelessComponent: 0,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-react",
-  "version": "7.29.3",
+  "version": "7.29.4",
   "author": "Yannick Croissant <yannick.croissant+npm@gmail.com>",
   "description": "React specific linting rules for ESLint",
   "main": "index.js",