From c3d9a73489459154ef2a58de77b74000acaeafb9 Mon Sep 17 00:00:00 2001
From: Karolina Benitez <kbeniitez@gmail.com>
Date: Wed, 26 Aug 2020 16:27:40 -0700
Subject: [PATCH] [Fix] `prefer-read-only-props`: support Flow `$ReadOnly`

---
 lib/rules/prefer-read-only-props.js       |  2 +-
 tests/lib/rules/prefer-read-only-props.js | 31 +++++++++++++++++++++++
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/lib/rules/prefer-read-only-props.js b/lib/rules/prefer-read-only-props.js
index 8349435f24..3a1faff94a 100644
--- 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
index 9445605c68..f1bc224a38 100644
--- 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
     }
   ],