From cf7d895db6aa48fb63e6a11d2ef2ae3ea5c48169 Mon Sep 17 00:00:00 2001
From: Lauren Tan <poteto@users.noreply.github.com>
Date: Wed, 15 May 2024 15:36:27 -0700
Subject: [PATCH] [compiler:eslint] Fix false positive with TS type param
 syntax

Previously we would attempt to parse code in the eslint plugin with the
HermesParser first as it can handle some TS syntax. However, this was
leading to a mis-parse of React hook calls with type params (eg,
`useRef<null>()` as a BinaryExpression rather than a CallExpression with
a type param. This triggered our validation that Hooks should not be
used as normal values.

To fix this, we now try to parse with the babel parser (with TS support)
for filenames that end with ts/tsx, and fallback to HermesParser for
regular JS files.

ghstack-source-id: 5b7231031cace749a6e689412b3e8b5c9d03ed4b
Pull Request resolved: https://github.com/facebook/react/pull/29081
---
 .../ReactCompilerRuleTypescript-test.ts       | 12 ++------
 .../src/rules/ReactCompilerRule.ts            | 30 ++++++++-----------
 2 files changed, 16 insertions(+), 26 deletions(-)

diff --git a/compiler/packages/eslint-plugin-react-compiler/__tests__/ReactCompilerRuleTypescript-test.ts b/compiler/packages/eslint-plugin-react-compiler/__tests__/ReactCompilerRuleTypescript-test.ts
index 3ac2bec2da..9c44f62ef8 100644
--- a/compiler/packages/eslint-plugin-react-compiler/__tests__/ReactCompilerRuleTypescript-test.ts
+++ b/compiler/packages/eslint-plugin-react-compiler/__tests__/ReactCompilerRuleTypescript-test.ts
@@ -34,10 +34,8 @@ const tests: CompilerTestCases = {
         }
       `,
     },
-  ],
-  invalid: [
     {
-      name: "[FALSE POSITIVE] Repro for hooks as normal values",
+      name: "Repro for hooks as normal values",
       filename: "test.tsx",
       code: normalizeIndent`
         function Button(props) {
@@ -45,13 +43,9 @@ const tests: CompilerTestCases = {
           return <Button thing={scrollview} />;
         }
       `,
-      errors: [
-        {
-          message:
-            "Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values",
-        },
-      ],
     },
+  ],
+  invalid: [
     {
       name: "Mutating useState value",
       filename: "test.tsx",
diff --git a/compiler/packages/eslint-plugin-react-compiler/src/rules/ReactCompilerRule.ts b/compiler/packages/eslint-plugin-react-compiler/src/rules/ReactCompilerRule.ts
index bfda6adf43..a7c242c08d 100644
--- a/compiler/packages/eslint-plugin-react-compiler/src/rules/ReactCompilerRule.ts
+++ b/compiler/packages/eslint-plugin-react-compiler/src/rules/ReactCompilerRule.ts
@@ -114,29 +114,25 @@ const rule: Rule.RuleModule = {
     }
 
     let babelAST;
-    try {
-      // first try parsing with the faster Hermes that also supports JS, Flow
-      // and most TS syntax
+    if (
+      context.filename.endsWith(".tsx") ||
+      context.filename.endsWith(".ts")
+    ) {
+      try {
+        const { parse: babelParse } = require("@babel/parser");
+        babelAST = babelParse(sourceCode, {
+          filename,
+          sourceType: "unambiguous",
+          plugins: ["typescript", "jsx"],
+        });
+      } catch {}
+    } else {
       babelAST = HermesParser.parse(sourceCode, {
         babel: true,
         enableExperimentalComponentSyntax: true,
         sourceFilename: filename,
         sourceType: "module",
       });
-    } catch {
-      // If Hermes fails, try Babel for advanced TS syntax.
-      if (
-        context.filename.endsWith(".tsx") ||
-        context.filename.endsWith(".ts")
-      ) {
-        try {
-          const { parse: babelParse } = require("@babel/parser");
-          babelAST = babelParse(sourceCode, {
-            sourceType: "unambiguous",
-            plugins: ["typescript", "jsx"],
-          });
-        } catch {}
-      }
     }
 
     if (babelAST != null) {