[New] prefer-read-only-props, prop-types, component detection: allow components to be async functions

pnodet · ljharb · commit 3fb79e16b7f1 · 2023-11-15T12:40:16.000+07:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`no-invalid-html-attribute`]: add support for `apple-touch-startup-image` `rel` attributes in `link` tags ([#3638][] @thomashockaday)
 * [`no-unknown-property`]: add requireDataLowercase option ([#3645][] @HermanBilous)
 * [`no-unknown-property`]: add `displaystyle` on `<math>` ([#3652][] @lounsbrough)
+* [`prefer-read-only-props`], [`prop-types`], component detection: allow components to be async functions ([#3654][] @pnodet)
 
 ### Fixed
 * [`jsx-no-leaked-render`]: preserve RHS parens for multiline jsx elements while fixing ([#3623][] @akulsr0)
@@ -22,6 +23,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [Refactor] [`function-component-definition`]: exit early if no type params ([#3634][] @HenryBrown0)
 * [Refactor] [`jsx-props-no-multi-spaces`]: extract type parameters to var ([#3634][] @HenryBrown0)
 
+[#3654]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3654
 [#3652]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3652
 [#3645]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3645
 [#3638]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3638
diff --git a/lib/util/Components.js b/lib/util/Components.js
@@ -855,7 +855,7 @@ function componentRule(rule, context) {
     },
 
     FunctionExpression(node) {
-      if (node.async) {
+      if (node.async && node.generator) {
         components.add(node, 0);
         return;
       }
@@ -868,7 +868,7 @@ function componentRule(rule, context) {
     },
 
     FunctionDeclaration(node) {
-      if (node.async) {
+      if (node.async && node.generator) {
         components.add(node, 0);
         return;
       }
@@ -881,11 +881,6 @@ function componentRule(rule, context) {
     },
 
     ArrowFunctionExpression(node) {
-      if (node.async) {
-        components.add(node, 0);
-        return;
-      }
-
       const component = utils.getStatelessComponent(node);
       if (!component) {
         return;
diff --git a/tests/lib/rules/prefer-read-only-props.js b/tests/lib/rules/prefer-read-only-props.js
@@ -218,6 +218,19 @@ ruleTester.run('prefer-read-only-props', rule, {
       `,
       features: ['ts', 'no-babel-old'],
     },
+    {
+      code: `
+        import React from "react";
+        type Props = {
+          readonly name: string[];
+        }
+        const MyComponent: React.FC<Props> = async ({ name }) => {
+          return <div>{name}</div>;
+        };
+        export default MyComponent;
+      `,
+      features: ['ts', 'no-babel-old'],
+    },
     {
       code: `
         import React from "react";
@@ -500,6 +513,35 @@ ruleTester.run('prefer-read-only-props', rule, {
         },
       ],
     },
+    {
+      code: `
+        import React from "react";
+        type Props = {
+          name: string[];
+        }
+        const MyComponent: React.FC<Props> = async ({ name }) => {
+          return <div>{name}</div>;
+        };
+        export default MyComponent;
+      `,
+      output: `
+        import React from "react";
+        type Props = {
+          readonly name: string[];
+        }
+        const MyComponent: React.FC<Props> = async ({ name }) => {
+          return <div>{name}</div>;
+        };
+        export default MyComponent;
+      `,
+      features: ['ts', 'no-babel-old'],
+      errors: [
+        {
+          messageId: 'readOnlyProp',
+          data: { name: 'name' },
+        },
+      ],
+    },
     {
       code: `
         type Props = {
diff --git a/tests/lib/rules/prop-types.js b/tests/lib/rules/prop-types.js
@@ -1571,25 +1571,28 @@ ruleTester.run('prop-types', rule, {
       options: [{ skipUndeclared: false }],
     },
     {
-      // Async functions can't be components.
+      // Async generator functions can't be components.
       code: `
-        var Hello = async function(props) {
+        var Hello = async function* (props) {
+          yield null;
           return <div>Hello {props.name}</div>;
         }
       `,
     },
     {
-      // Async functions can't be components.
+      // Async generator functions can't be components.
       code: `
-        async function Hello(props) {
+        async function* Hello(props) {
+          yield null;
           return <div>Hello {props.name}</div>;
         }
       `,
     },
     {
-      // Async functions can't be components.
+      // Async generator functions can't be components.
       code: `
-        var Hello = async (props) => {
+        var Hello = async function* (props) {
+          yield null;
           return <div>Hello {props.name}</div>;
         }
       `,
