From ac6746f0d2025bec2ff8bc948f2d5d7ed3bfe810 Mon Sep 17 00:00:00 2001
From: Lauren Tan <poteto@users.noreply.github.com>
Date: Fri, 16 Aug 2024 12:07:50 -0400
Subject: [PATCH] [compiler] Surface unused opt out directives in eslint

This PR updates the eslint plugin to report unused opt out directives.
One of the downsides of the opt out directive is that it opts the
component/hook out of compilation forever, even if the underlying issue
was fixed in product code or fixed in the compiler.

Additionally, the opt out directive would effectively disable our eslint
plugin from running on the opted out component/hook, which increases the
chances of said function accruing more rules of React violations or
other anti-patterns.

ghstack-source-id: cf7458b04395290a79397b94905eaf0477717bb1
Pull Request resolved: https://github.com/facebook/react/pull/30721
---
 .../__tests__/ReactCompilerRule-test.ts       | 32 ++++++++++++
 .../src/rules/ReactCompilerRule.ts            | 51 ++++++++++++++++++-
 2 files changed, 82 insertions(+), 1 deletion(-)

diff --git a/compiler/packages/eslint-plugin-react-compiler/__tests__/ReactCompilerRule-test.ts b/compiler/packages/eslint-plugin-react-compiler/__tests__/ReactCompilerRule-test.ts
index c87bcadbe98bca..75bdba02f9f1d6 100644
--- a/compiler/packages/eslint-plugin-react-compiler/__tests__/ReactCompilerRule-test.ts
+++ b/compiler/packages/eslint-plugin-react-compiler/__tests__/ReactCompilerRule-test.ts
@@ -104,6 +104,17 @@ const tests: CompilerTestCases = {
         }
       `,
     },
+    {
+      name: "'use no forget' directive is respected when errors are present",
+      code: normalizeIndent`
+        let count = 0;
+        function Component() {
+          'use no forget';
+          count++;
+          return <div>Hello world {count}</div>
+        }
+      `,
+    },
   ],
   invalid: [
     {
@@ -199,6 +210,27 @@ const tests: CompilerTestCases = {
         },
       ],
     },
+    {
+      name: "Unused 'use no forget' directive is reported when no errors are present",
+      code: normalizeIndent`
+        function Component() {
+          'use no forget';
+          return <div>Hello world</div>
+        }
+      `,
+      errors: [
+        {
+          message: "Unused 'use no forget' directive",
+          suggestions: [
+            {
+              output:
+                // yuck
+                '\nfunction Component() {\n  \n  return <div>Hello world</div>\n}\n',
+            },
+          ],
+        },
+      ],
+    },
   ],
 };
 
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 2fe34a0b7ff2b6..27a600fe0cab51 100644
--- a/compiler/packages/eslint-plugin-react-compiler/src/rules/ReactCompilerRule.ts
+++ b/compiler/packages/eslint-plugin-react-compiler/src/rules/ReactCompilerRule.ts
@@ -15,10 +15,12 @@ import BabelPluginReactCompiler, {
   ErrorSeverity,
   parsePluginOptions,
   validateEnvironmentConfig,
+  OPT_OUT_DIRECTIVES,
   type PluginOptions,
 } from 'babel-plugin-react-compiler/src';
 import {Logger} from 'babel-plugin-react-compiler/src/Entrypoint';
 import type {Rule} from 'eslint';
+import {Statement} from 'estree';
 import * as HermesParser from 'hermes-parser';
 
 type CompilerErrorDetailWithLoc = Omit<CompilerErrorDetailOptions, 'loc'> & {
@@ -146,6 +148,7 @@ const rule: Rule.RuleModule = {
         userOpts['__unstable_donotuse_reportAllBailouts'];
     }
 
+    let shouldReportUnusedOptOutDirective = true;
     const options: PluginOptions = {
       ...parsePluginOptions(userOpts),
       ...COMPILER_OPTIONS,
@@ -155,6 +158,7 @@ const rule: Rule.RuleModule = {
       logEvent: (filename, event): void => {
         userLogger?.logEvent(filename, event);
         if (event.kind === 'CompileError') {
+          shouldReportUnusedOptOutDirective = false;
           const detail = event.detail;
           const suggest = makeSuggestions(detail);
           if (__unstable_donotuse_reportAllBailouts && event.fnLoc != null) {
@@ -269,7 +273,52 @@ const rule: Rule.RuleModule = {
         /* errors handled by injected logger */
       }
     }
-    return {};
+
+    function reportUnusedOptOutDirective(stmt: Statement) {
+      if (
+        stmt.type === 'ExpressionStatement' &&
+        stmt.expression.type === 'Literal' &&
+        typeof stmt.expression.value === 'string' &&
+        OPT_OUT_DIRECTIVES.has(stmt.expression.value) &&
+        stmt.loc != null
+      ) {
+        context.report({
+          message: `Unused '${stmt.expression.value}' directive`,
+          loc: stmt.loc,
+          suggest: [
+            {
+              desc: 'Remove the directive',
+              fix(fixer) {
+                return fixer.remove(stmt);
+              },
+            },
+          ],
+        });
+      }
+    }
+    if (shouldReportUnusedOptOutDirective) {
+      return {
+        FunctionDeclaration(fnDecl) {
+          for (const stmt of fnDecl.body.body) {
+            reportUnusedOptOutDirective(stmt);
+          }
+        },
+        ArrowFunctionExpression(fnExpr) {
+          if (fnExpr.body.type === 'BlockStatement') {
+            for (const stmt of fnExpr.body.body) {
+              reportUnusedOptOutDirective(stmt);
+            }
+          }
+        },
+        FunctionExpression(fnExpr) {
+          for (const stmt of fnExpr.body.body) {
+            reportUnusedOptOutDirective(stmt);
+          }
+        },
+      };
+    } else {
+      return {};
+    }
   },
 };