[compiler] Run compiler pipeline on 'use no forget'

This PR updates the babel plugin to continue the compilation pipeline as
normal on components/hooks that have been opted out using a directive.
Instead, we no longer emit the compiled function when the directive is
present.

Previously, we would skip over the entire pipeline. By continuing to
enter the pipeline, we'll be able to detect if there are unused
directives.

ghstack-source-id: f26aec9
Pull Request resolved: #30720

Author: poteto

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

@@ -165,6 +165,12 @@ export type LoggerEvent =
       fnLoc: t.SourceLocation | null;
       detail: Omit<Omit<CompilerErrorDetailOptions, 'severity'>, 'suggestions'>;
     }
+  | {
+      kind: 'CompileSkip';
+      fnLoc: t.SourceLocation | null;
+      reason: string;
+      loc: t.SourceLocation | null;
+    }
   | {
       kind: 'CompileSuccess';
       fnLoc: t.SourceLocation | null;

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

@@ -43,13 +43,15 @@ export type CompilerPass = {
   comments: Array<t.CommentBlock | t.CommentLine>;
   code: string | null;
 };
+const OPT_IN_DIRECTIVES = new Set(['use forget', 'use memo']);
+export const OPT_OUT_DIRECTIVES = new Set(['use no forget', 'use no memo']);
 
 function findDirectiveEnablingMemoization(
   directives: Array<t.Directive>,
 ): t.Directive | null {
   for (const directive of directives) {
     const directiveValue = directive.value.value;
-    if (directiveValue === 'use forget' || directiveValue === 'use memo') {
+    if (OPT_IN_DIRECTIVES.has(directiveValue)) {
       return directive;
     }
   }
@@ -62,11 +64,7 @@ function findDirectiveDisablingMemoization(
 ): t.Directive | null {
   for (const directive of directives) {
     const directiveValue = directive.value.value;
-    if (
-      (directiveValue === 'use no forget' ||
-        directiveValue === 'use no memo') &&
-      !options.ignoreUseNoForget
-    ) {
+    if (OPT_OUT_DIRECTIVES.has(directiveValue) && !options.ignoreUseNoForget) {
       return directive;
     }
   }
@@ -338,6 +336,11 @@ export function compileProgram(
   }> = [];
   const compiledFns: Array<CompileResult> = [];
 
+  const useNoForget = findDirectiveDisablingMemoization(
+    program.node.directives,
+    pass.opts,
+  );
+
   const traverseFunction = (fn: BabelFn, pass: CompilerPass): void => {
     const fnType = getReactFunctionType(fn, pass, environment);
     if (fnType === null || ALREADY_COMPILED.has(fn.node)) {
@@ -434,8 +437,20 @@ export function compileProgram(
       handleError(err, pass, fn.node.loc ?? null);
       return null;
     }
-
-    if (!pass.opts.noEmit && !hasCriticalError) {
+    /**
+     * If 'use no forget/memo' is present, we still run the code through the compiler for validation
+     * but we don't mutate the babel AST. This allows us to flag if there is an unused
+     * 'use no forget/memo' directive.
+     */
+    if (useNoForget != null) {
+      pass.opts.logger?.logEvent(pass.filename, {
+        kind: 'CompileSkip',
+        fnLoc: fn.node.body.loc ?? null,
+        reason: `Skipped due to '${useNoForget.value}' directive.`,
+        loc: useNoForget.loc ?? null,
+      });
+      return null;
+    } else if (!pass.opts.noEmit && !hasCriticalError) {
       return compiledFn;
     }
     return null;
@@ -596,24 +611,6 @@ function shouldSkipCompilation(
     }
   }
 
-  // Top level "use no forget", skip this file entirely
-  const useNoForget = findDirectiveDisablingMemoization(
-    program.node.directives,
-    pass.opts,
-  );
-  if (useNoForget != null) {
-    pass.opts.logger?.logEvent(pass.filename, {
-      kind: 'CompileError',
-      fnLoc: null,
-      detail: {
-        severity: ErrorSeverity.Todo,
-        reason: 'Skipped due to "use no forget" directive.',
-        loc: useNoForget.loc ?? null,
-        suggestions: null,
-      },
-    });
-    return true;
-  }
   const moduleName = pass.opts.runtimeModule ?? 'react/compiler-runtime';
   if (hasMemoCacheFunctionImport(program, moduleName)) {
     return true;
@@ -638,14 +635,10 @@ function getReactFunctionType(
     );
     if (useNoForget != null) {
       pass.opts.logger?.logEvent(pass.filename, {
-        kind: 'CompileError',
+        kind: 'CompileSkip',
         fnLoc: fn.node.body.loc ?? null,
-        detail: {
-          severity: ErrorSeverity.Todo,
-          reason: 'Skipped due to "use no forget" directive.',
-          loc: useNoForget.loc ?? null,
-          suggestions: null,
-        },
+        reason: `Skipped due to '${useNoForget.value}' directive.`,
+        loc: useNoForget.loc ?? null,
       });
       return null;
     }

compiler/packages/babel-plugin-react-compiler/src/index.ts

@@ -18,6 +18,7 @@ export {
   compileProgram,
   parsePluginOptions,
   run,
+  OPT_OUT_DIRECTIVES,
   type CompilerPipelineValue,
   type PluginOptions,
 } from './Entrypoint';