[compiler] Errors in earlier functions dont stop subsequent compilation

Errors in an earlier component/hook shouldn't stop later components from compiling.

ghstack-source-id: 55363fd
Pull Request resolved: #30844

Author: josephsavona

compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts

@@ -310,8 +310,6 @@ export function compileProgram(
     pass.opts.eslintSuppressionRules ?? DEFAULT_ESLINT_SUPPRESSIONS,
     pass.opts.flowSuppressions,
   );
-  const lintError = suppressionsToCompilerError(suppressions);
-  let hasCriticalError = lintError != null;
   const queue: Array<{
     kind: 'original' | 'outlined';
     fn: BabelFn;
@@ -385,22 +383,24 @@ export function compileProgram(
       );
     }
 
-    if (lintError != null) {
-      /**
-       * Note that Babel does not attach comment nodes to nodes; they are dangling off of the
-       * Program node itself. We need to figure out whether an eslint suppression range
-       * applies to this function first.
-       */
-      const suppressionsInFunction = filterSuppressionsThatAffectFunction(
-        suppressions,
-        fn,
-      );
-      if (suppressionsInFunction.length > 0) {
-        if (optOutDirectives.length > 0) {
-          logError(lintError, pass, fn.node.loc ?? null);
-        } else {
-          handleError(lintError, pass, fn.node.loc ?? null);
-        }
+    /**
+     * Note that Babel does not attach comment nodes to nodes; they are dangling off of the
+     * Program node itself. We need to figure out whether an eslint suppression range
+     * applies to this function first.
+     */
+    const suppressionsInFunction = filterSuppressionsThatAffectFunction(
+      suppressions,
+      fn,
+    );
+    if (suppressionsInFunction.length > 0) {
+      const lintError = suppressionsToCompilerError(suppressionsInFunction);
+      if (optOutDirectives.length > 0) {
+        logError(lintError, pass, fn.node.loc ?? null);
+      } else {
+        handleError(lintError, pass, fn.node.loc ?? null);
+      }
+      if (isCriticalError(lintError)) {
+        return null;
       }
     }
 
@@ -436,7 +436,6 @@ export function compileProgram(
           return null;
         }
       }
-      hasCriticalError ||= isCriticalError(err);
       handleError(err, pass, fn.node.loc ?? null);
       return null;
     }
@@ -470,7 +469,7 @@ export function compileProgram(
       return null;
     }
 
-    if (!pass.opts.noEmit && !hasCriticalError) {
+    if (!pass.opts.noEmit) {
       return compiledFn;
     }
     return null;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unclosed-eslint-suppression.expect.md

@@ -39,8 +39,6 @@ function CrimesAgainstReact() {
   1 | // Note: Everything below this is sketchy
 > 2 | /* eslint-disable react-hooks/rules-of-hooks */
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ InvalidReact: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. eslint-disable react-hooks/rules-of-hooks (2:2)
-
-InvalidReact: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. eslint-disable-next-line react-hooks/rules-of-hooks (25:25)
   3 | function lowercasecomponent() {
   4 |   'use forget';
   5 |   const x = [];

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multiple-components-first-is-invalid.expect.md

@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+// @panicThreshold(none)
+import {useHook} from 'shared-runtime';
+
+function InvalidComponent(props) {
+  if (props.cond) {
+    useHook();
+  }
+  return <div>Hello World!</div>;
+}
+
+function ValidComponent(props) {
+  return <div>{props.greeting}</div>;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @panicThreshold(none)
+import { useHook } from "shared-runtime";
+
+function InvalidComponent(props) {
+  if (props.cond) {
+    useHook();
+  }
+  return <div>Hello World!</div>;
+}
+
+function ValidComponent(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.greeting) {
+    t0 = <div>{props.greeting}</div>;
+    $[0] = props.greeting;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multiple-components-first-is-invalid.js

@@ -0,0 +1,13 @@
+// @panicThreshold(none)
+import {useHook} from 'shared-runtime';
+
+function InvalidComponent(props) {
+  if (props.cond) {
+    useHook();
+  }
+  return <div>Hello World!</div>;
+}
+
+function ValidComponent(props) {
+  return <div>{props.greeting}</div>;
+}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unclosed-eslint-suppression-skips-all-components.expect.md

@@ -0,0 +1,39 @@
+
+## Input
+
+```javascript
+// @panicThreshold(none)
+
+// unclosed disable rule should affect all components
+/* eslint-disable react-hooks/rules-of-hooks */
+
+function ValidComponent1(props) {
+  return <div>Hello World!</div>;
+}
+
+function ValidComponent2(props) {
+  return <div>{props.greeting}</div>;
+}
+
+```
+
+## Code
+
+```javascript
+// @panicThreshold(none)
+
+// unclosed disable rule should affect all components
+/* eslint-disable react-hooks/rules-of-hooks */
+
+function ValidComponent1(props) {
+  return <div>Hello World!</div>;
+}
+
+function ValidComponent2(props) {
+  return <div>{props.greeting}</div>;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unclosed-eslint-suppression-skips-all-components.js

@@ -0,0 +1,12 @@
+// @panicThreshold(none)
+
+// unclosed disable rule should affect all components
+/* eslint-disable react-hooks/rules-of-hooks */
+
+function ValidComponent1(props) {
+  return <div>Hello World!</div>;
+}
+
+function ValidComponent2(props) {
+  return <div>{props.greeting}</div>;
+}