[Fix] function-component-definition, boolean-prop-naming, jsx-first-prop-new-line, jsx-props-no-multi-spaces, propTypes: use type args

Author: HenryBrown0

CHANGELOG.md

@@ -1,4 +1,5 @@
 # Change Log
+
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](https://semver.org/).
 This change log adheres to standards from [Keep a CHANGELOG](https://keepachangelog.com).
@@ -19,6 +20,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`no-invalid-html-attribute`]: substitute placeholders in suggestion messages ([#3759][] @mdjermanovic)
 * [`sort-prop-types`]: single line type ending without semicolon ([#3784][] @akulsr0)
 * [`require-default-props`]: report when required props have default value ([#3785][] @akulsr0)
+* [`function-component-definition`], [`boolean-prop-naming`], [`jsx-first-prop-new-line`], [`jsx-props-no-multi-spaces`], `propTypes`: use type args ([#3629][] @HenryBrown0)
 
 ### Changed
 * [Refactor] `variableUtil`: Avoid creating a single flat variable scope for each lookup ([#3782][] @DanielRosenwasser)
@@ -34,6 +36,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 [#3748]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3748
 [#3724]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3724
 [#3694]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3694
+[#3629]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3629
 
 ## [7.34.4] - 2024.07.13
 

lib/rules/boolean-prop-naming.js

@@ -256,7 +256,8 @@ module.exports = {
         return;
       }
 
-      const annotationTypeParams = component.node.parent.id.typeAnnotation.typeAnnotation.typeParameters;
+      const typeAnnotation = component.node.parent.id.typeAnnotation.typeAnnotation;
+      const annotationTypeParams = typeAnnotation.typeArguments || typeAnnotation.typeParameters;
       if (
         annotationTypeParams && (
           annotationTypeParams.type === 'TSTypeParameterInstantiation'

lib/rules/function-component-definition.js

@@ -34,7 +34,7 @@ const UNNAMED_FUNCTION_TEMPLATES = {
 };
 
 function hasOneUnconstrainedTypeParam(node) {
-  const nodeTypeParams = node.typeParameters;
+  const nodeTypeParams = node.typeArguments || node.typeParameters;
 
   return nodeTypeParams
     && nodeTypeParams.params
@@ -206,7 +206,7 @@ module.exports = {
         options.range,
         buildFunction(options.template, {
           typeAnnotation,
-          typeParams: getNodeText(node.typeParameters, source),
+          typeParams: getNodeText(node.typeArguments || node.typeParameters, source),
           params: getParams(node, source),
           returnType: getNodeText(node.returnType, source),
           body: getBody(node, source),

lib/rules/jsx-first-prop-new-line.js

@@ -55,7 +55,7 @@ module.exports = {
               report(context, messages.propOnNewLine, 'propOnNewLine', {
                 node: decl,
                 fix(fixer) {
-                  return fixer.replaceTextRange([(node.typeParameters || node.name).range[1], decl.range[0]], '\n');
+                  return fixer.replaceTextRange([(node.typeArguments || node.typeParameters || node.name).range[1], decl.range[0]], '\n');
                 },
               });
             }

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

@@ -103,7 +103,7 @@ module.exports = {
     }
 
     function containsGenericType(node) {
-      const nodeTypeParams = node.typeParameters;
+      const nodeTypeParams = node.typeArguments || node.typeParameters;
       if (typeof nodeTypeParams === 'undefined') {
         return false;
       }
@@ -114,7 +114,7 @@ module.exports = {
     function getGenericNode(node) {
       const name = node.name;
       if (containsGenericType(node)) {
-        const type = node.typeParameters;
+        const type = node.typeArguments || node.typeParameters;
 
         return Object.assign(
           {},

lib/util/propTypes.js

@@ -637,7 +637,7 @@ module.exports = function propTypesInstructions(context, components, utils) {
         typeName = node.typeName.name;
         const leftMostName = getLeftMostTypeName(node.typeName);
         const shouldTraverseTypeParams = genericReactTypesImport.has(leftMostName);
-        const nodeTypeParams = node.typeParameters;
+        const nodeTypeParams = node.typeArguments || node.typeParameters;
         if (shouldTraverseTypeParams && nodeTypeParams && nodeTypeParams.length !== 0) {
           // All react Generic types are derived from:
           // type PropsWithChildren<P> = P & { children?: ReactNode | undefined }
@@ -749,7 +749,7 @@ module.exports = function propTypesInstructions(context, components, utils) {
 
     convertReturnTypeToPropTypes(node, rootNode) {
       // ReturnType<T> should always have one parameter
-      const nodeTypeParams = node.typeParameters;
+      const nodeTypeParams = node.typeArguments || node.typeParameters;
       if (nodeTypeParams) {
         if (nodeTypeParams.params.length === 1) {
           let returnType = nodeTypeParams.params[0];
@@ -784,7 +784,8 @@ module.exports = function propTypesInstructions(context, components, utils) {
                     case 'ObjectExpression':
                       iterateProperties(context, res.properties, (key, value, propNode) => {
                         if (propNode && propNode.argument && propNode.argument.type === 'CallExpression') {
-                          const propNodeTypeParams = propNode.argument.typeParameters;
+                          const propNodeTypeParams = propNode.argument.typeArguments
+                            || propNode.argument.typeParameters;
                           if (propNodeTypeParams) {
                             this.visitTSNode(propNodeTypeParams);
                           } else {
@@ -806,8 +807,8 @@ module.exports = function propTypesInstructions(context, components, utils) {
                       });
                       break;
                     case 'CallExpression':
-                      if (res.typeParameters) {
-                        this.visitTSNode(res.typeParameters);
+                      if (res.typeArguments || res.typeParameters) {
+                        this.visitTSNode(res.typeArguments || res.typeParameters);
                       } else {
                         // Ignore this CallExpression return value since it doesn't have any typeParameters to let us know it's types.
                         this.shouldIgnorePropTypes = true;
@@ -992,7 +993,7 @@ module.exports = function propTypesInstructions(context, components, utils) {
         break;
       case 'GenericTypeAnnotation':
         if (propTypes.id.name === '$ReadOnly') {
-          const propTypeParams = propTypes.typeParameters;
+          const propTypeParams = propTypes.typeArguments || propTypes.typeParameters;
           ignorePropsValidation = declarePropTypesForObjectTypeAnnotation(
             propTypeParams.params[0],
             declaredPropTypes
@@ -1034,8 +1035,10 @@ module.exports = function propTypesInstructions(context, components, utils) {
     if (
       node.parent
       && node.parent.callee
-      && node.parent.typeParameters
-      && node.parent.typeParameters.params
+      && (
+        (node.parent.typeArguments && node.parent.typeArguments.params)
+        || (node.parent.typeParameters && node.parent.typeParameters.params)
+      )
       && (
         node.parent.callee.name === 'forwardRef' || (
           node.parent.callee.object
@@ -1045,7 +1048,7 @@ module.exports = function propTypesInstructions(context, components, utils) {
         )
       )
     ) {
-      const propTypesParams = node.parent.typeParameters;
+      const propTypesParams = node.parent.typeArguments || node.parent.typeParameters;
       const declaredPropTypes = {};
       const obj = new DeclarePropTypesForTSTypeAnnotation(propTypesParams.params[1], declaredPropTypes, rootNode);
       components.set(node, {
@@ -1093,7 +1096,7 @@ module.exports = function propTypesInstructions(context, components, utils) {
       if (
         annotation
         && annotation.type !== 'TSTypeReference'
-        && annotation.typeParameters == null
+        && (annotation.typeArguments == null || annotation.typeParameters == null)
       ) {
         return;
       }