[Fix] prefer-read-only-props: support Flow $ReadOnly

Fixes #2472
jsx-eslint · Aug 26, 2020 · de2ec66 · de2ec66
1 parent d6ee945
commit de2ec66
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,8 +12,12 @@ This change log adheres to standards from [Keep a CHANGELOG](http://keepachangel
 ### Fixed
 * [`function-component-definition`]: ignore object properties ([#2771][] @stefan-wullems)
 * [`forbid-component-props`]: Implemented support for "namespaced" components ([#2767][] @mnn)
+* [`prefer-read-only-props`]: support Flow `$ReadOnly` ([#2772][], [#2779][], [#2770][] @karolina-benitez)
 
+[#2779]: https://github.com/yannickcr/eslint-plugin-react/pull/2779
+[#2772]: https://github.com/yannickcr/eslint-plugin-react/pull/2772
 [#2771]: https://github.com/yannickcr/eslint-plugin-react/pull/2771
+[#2770]: https://github.com/yannickcr/eslint-plugin-react/pull/2770
 [#2767]: https://github.com/yannickcr/eslint-plugin-react/pull/2767
 [#2761]: https://github.com/yannickcr/eslint-plugin-react/pull/2761
 [#2748]: https://github.com/yannickcr/eslint-plugin-react/pull/2748

diff --git a/lib/rules/prefer-read-only-props.js b/lib/rules/prefer-read-only-props.js
@@ -13,7 +13,7 @@ function isFlowPropertyType(node) {
 }
 
 function isCovariant(node) {
-  return node.variance && node.variance.kind === 'plus';
+  return node.variance && node.variance.kind === 'plus' || node.parent.parent.parent.id && node.parent.parent.parent.id.name === '$ReadOnly';
 }
 
 // ------------------------------------------------------------------------------

diff --git a/tests/lib/rules/prefer-read-only-props.js b/tests/lib/rules/prefer-read-only-props.js
@@ -131,6 +131,37 @@ ruleTester.run('prefer-read-only-props', rule, {
           name: PropTypes.string,
         };
       `
+    },
+    {
+      // Class component with typed props argument
+      code: `
+        type Props = $ReadOnly<{
+          name: string,
+        }>
+
+        class Hello extends React.Component<Props> {
+          render () {
+            return <div>Hello {this.props.name}</div>;
+          }
+        }
+      `,
+      parser: parsers.BABEL_ESLINT
+    },
+    {
+      // Class component with typed props argument
+      code: `
+        type Props = $ReadOnly<{
+          +firstName: string,
+          lastName: string
+        }>
+
+        class Hello extends React.Component<Props> {
+          render () {
+            return <div>Hello {this.props.firstName} {this.props.lastName}</div>;
+          }
+        }
+      `,
+      parser: parsers.BABEL_ESLINT
     }
   ],