[compiler][entrypoint] Fix edgecases for noEmit and opt-outs

Title

Author: mofeiZ

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

@@ -59,6 +59,7 @@ type ProgramContextOptions = {
   opts: PluginOptions;
   filename: string | null;
   code: string | null;
+  hasModuleScopeOptOut: boolean;
 };
 export class ProgramContext {
   /**
@@ -70,6 +71,7 @@ export class ProgramContext {
   code: string | null;
   reactRuntimeModule: string;
   suppressions: Array<SuppressionRange>;
+  hasModuleScopeOptOut: boolean;
 
   /*
    * This is a hack to work around what seems to be a Babel bug. Babel doesn't
@@ -94,13 +96,15 @@ export class ProgramContext {
     opts,
     filename,
     code,
+    hasModuleScopeOptOut,
   }: ProgramContextOptions) {
     this.scope = program.scope;
     this.opts = opts;
     this.filename = filename;
     this.code = code;
     this.reactRuntimeModule = getReactCompilerRuntimeModule(opts.target);
     this.suppressions = suppressions;
+    this.hasModuleScopeOptOut = hasModuleScopeOptOut;
   }
 
   isHookName(name: string): boolean {

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

@@ -325,6 +325,8 @@ export function compileProgram(
     filename: pass.filename,
     code: pass.code,
     suppressions,
+    hasModuleScopeOptOut:
+      findDirectiveDisablingMemoization(program.node.directives) != null,
   });
 
   const queue: Array<CompileSource> = findFunctionsToCompile(
@@ -368,7 +370,19 @@ export function compileProgram(
   }
 
   // Avoid modifying the program if we find a program level opt-out
-  if (findDirectiveDisablingMemoization(program.node.directives) != null) {
+  if (programContext.hasModuleScopeOptOut) {
+    if (compiledFns.length > 0) {
+      const error = new CompilerError();
+      error.pushErrorDetail(
+        new CompilerErrorDetail({
+          reason:
+            'Unexpected compiled functions when module scope opt-out is present',
+          severity: ErrorSeverity.Invariant,
+          loc: null,
+        }),
+      );
+      handleError(error, programContext, null);
+    }
     return null;
   }
 
@@ -520,32 +534,33 @@ function processFn(
     prunedMemoValues: compiledFn.prunedMemoValues,
   });
 
+  /**
+   * inferEffectDependencies + noEmit is currently only used for linting. In
+   * this mode, add source locations for where the compiler *can* infer effect
+   * dependencies.
+   */
+  for (const loc of compileResult.compiledFn.inferredEffectLocations) {
+    if (loc !== GeneratedSource) {
+      programContext.inferredEffectLocations.add(loc);
+    }
+  }
+
   /**
    * Always compile functions with opt in directives.
    */
-  if (directives.optIn != null) {
+  if (programContext.hasModuleScopeOptOut || programContext.opts.noEmit) {
+    return null;
+  } else if (directives.optIn != null) {
     return compiledFn;
   } else if (programContext.opts.compilationMode === 'annotation') {
     /**
      * If no opt-in directive is found and the compiler is configured in
      * annotation mode, don't insert the compiled function.
      */
     return null;
-  } else if (!programContext.opts.noEmit) {
+  } else {
     return compiledFn;
   }
-
-  /**
-   * inferEffectDependencies + noEmit is currently only used for linting. In
-   * this mode, add source locations for where the compiler *can* infer effect
-   * dependencies.
-   */
-  for (const loc of compileResult.compiledFn.inferredEffectLocations) {
-    if (loc !== GeneratedSource) {
-      programContext.inferredEffectLocations.add(loc);
-    }
-  }
-  return null;
 }
 
 function tryCompileFunction(

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-bailout-nopanic-shouldnt-outline.expect.md

@@ -20,9 +20,6 @@ function Foo() {
 function Foo() {
   return <button onClick={() => alert("hello!")}>Click me!</button>;
 }
-function _temp() {
-  return alert("hello!");
-}
 
 ```
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-memo-noemit.expect.md

@@ -19,22 +19,11 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @noEmit
+// @noEmit
 
 function Foo() {
   "use memo";
-  const $ = _c(1);
-  let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = <button onClick={_temp}>Click me!</button>;
-    $[0] = t0;
-  } else {
-    t0 = $[0];
-  }
-  return t0;
-}
-function _temp() {
-  return alert("hello!");
+  return <button onClick={() => alert("hello!")}>Click me!</button>;
 }
 
 export const FIXTURE_ENTRYPOINT = {