[compiler] Show outlined functions in logging, playground

compiler/apps/playground/components/Editor/EditorImpl.tsx

@@ -42,6 +42,8 @@ import {
   default as Output,
   PrintedCompilerPipelineValue,
 } from "./Output";
+import { printFunctionWithOutlined } from "babel-plugin-react-compiler/src/HIR/PrintHIR";
+import { printReactiveFunctionWithOutlined } from "babel-plugin-react-compiler/src/ReactiveScopes/PrintReactiveFunction";
 
 function parseInput(input: string, language: "flow" | "typescript") {
   // Extract the first line to quickly check for custom test directives
@@ -242,7 +244,7 @@ function compile(source: string): [CompilerOutput, "flow" | "typescript"] {
               kind: "hir",
               fnName,
               name: result.name,
-              value: printHIR(result.value.body),
+              value: printFunctionWithOutlined(result.value),
             });
             break;
           }
@@ -251,7 +253,7 @@ function compile(source: string): [CompilerOutput, "flow" | "typescript"] {
               kind: "reactive",
               fnName,
               name: result.name,
-              value: printReactiveFunction(result.value),
+              value: printReactiveFunctionWithOutlined(result.value),
             });
             break;
           }

compiler/packages/babel-plugin-react-compiler/src/HIR/PrintHIR.ts

@@ -41,6 +41,14 @@ export type Options = {
   indent: number;
 };
 
+export function printFunctionWithOutlined(fn: HIRFunction): string {
+  const output = [printFunction(fn)];
+  for (const outlined of fn.env.getOutlinedFunctions()) {
+    output.push(`\nfunction ${outlined.fn.id}:\n${printHIR(outlined.fn.body)}`);
+  }
+  return output.join("\n");
+}
+
 export function printFunction(fn: HIRFunction): string {
   const output = [];
   let definition = "";

compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts

@@ -51,7 +51,6 @@ import { buildReactiveFunction } from "./BuildReactiveFunction";
 import { SINGLE_CHILD_FBT_TAGS } from "./MemoizeFbtAndMacroOperandsInSameScope";
 import { ReactiveFunctionVisitor, visitReactiveFunction } from "./visitors";
 import { ReactFunctionType } from "../HIR/Environment";
-import { logReactiveFunction } from "../Utils/logger";
 
 export const MEMO_CACHE_SENTINEL = "react.memo_cache_sentinel";
 export const EARLY_RETURN_SENTINEL = "react.early_return_sentinel";
@@ -278,7 +277,6 @@ export function codegenFunction(
     pruneHoistedContexts(reactiveFunction);
 
     const identifiers = renameVariables(reactiveFunction);
-    logReactiveFunction("Outline", reactiveFunction);
     const codegen = codegenReactiveFunction(
       new Context(
         cx.env,

compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PrintReactiveFunction.ts

@@ -17,15 +17,32 @@ import {
   ReactiveValue,
 } from "../HIR/HIR";
 import {
+  printFunction,
   printIdentifier,
   printInstructionValue,
   printPlace,
   printType,
 } from "../HIR/PrintHIR";
 import { assertExhaustive } from "../Utils/utils";
 
+export function printReactiveFunctionWithOutlined(
+  fn: ReactiveFunction
+): string {
+  const writer = new Writer();
+  writeReactiveFunction(fn, writer);
+  for (const outlined of fn.env.getOutlinedFunctions()) {
+    writer.writeLine("\nfunction " + printFunction(outlined.fn));
+  }
+  return writer.complete();
+}
+
 export function printReactiveFunction(fn: ReactiveFunction): string {
   const writer = new Writer();
+  writeReactiveFunction(fn, writer);
+  return writer.complete();
+}
+
+function writeReactiveFunction(fn: ReactiveFunction, writer: Writer): void {
   writer.writeLine(`function ${fn.id !== null ? fn.id : "<unknown>"}(`);
   writer.indented(() => {
     for (const param of fn.params) {
@@ -39,7 +56,6 @@ export function printReactiveFunction(fn: ReactiveFunction): string {
   writer.writeLine(") {");
   writeReactiveInstructions(writer, fn.body);
   writer.writeLine("}");
-  return writer.complete();
 }
 
 export function printReactiveScopeSummary(scope: ReactiveScope): string {

compiler/packages/babel-plugin-react-compiler/src/Utils/logger.ts

@@ -9,8 +9,9 @@ import generate from "@babel/generator";
 import * as t from "@babel/types";
 import chalk from "chalk";
 import { HIR, HIRFunction, ReactiveFunction } from "../HIR/HIR";
-import { printFunction, printHIR } from "../HIR/PrintHIR";
-import { CodegenFunction, printReactiveFunction } from "../ReactiveScopes";
+import { printFunctionWithOutlined, printHIR } from "../HIR/PrintHIR";
+import { CodegenFunction } from "../ReactiveScopes";
+import { printReactiveFunctionWithOutlined } from "../ReactiveScopes/PrintReactiveFunction";
 
 let ENABLED: boolean = false;
 
@@ -79,7 +80,7 @@ export function logCodegenFunction(step: string, fn: CodegenFunction): void {
 
 export function logHIRFunction(step: string, fn: HIRFunction): void {
   if (ENABLED) {
-    const printed = printFunction(fn);
+    const printed = printFunctionWithOutlined(fn);
     if (printed !== lastLogged) {
       lastLogged = printed;
       process.stdout.write(`${chalk.green(step)}:\n${printed}\n\n`);
@@ -91,7 +92,7 @@ export function logHIRFunction(step: string, fn: HIRFunction): void {
 
 export function logReactiveFunction(step: string, fn: ReactiveFunction): void {
   if (ENABLED) {
-    const printed = printReactiveFunction(fn);
+    const printed = printReactiveFunctionWithOutlined(fn);
     if (printed !== lastLogged) {
       lastLogged = printed;
       process.stdout.write(`${chalk.green(step)}:\n${printed}\n\n`);