[compiler] Show outlined functions in logging, playground

ghstack-source-id: 4813899
Pull Request resolved: #30344

Author: josephsavona

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

@@ -21,6 +21,7 @@ import {
   lower,
   mergeConsecutiveBlocks,
   mergeOverlappingReactiveScopesHIR,
+  printFunction,
   pruneUnusedLabelsHIR,
 } from "../HIR";
 import {

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 = "";
@@ -66,6 +74,7 @@ export function printFunction(fn: HIRFunction): string {
   }
   output.push(printHIR(fn.body));
   output.push(...fn.directives);
+
   return output.join("\n");
 }
 

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

@@ -278,7 +278,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("\n" + 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,13 @@ 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 {
+  printFunction,
+  printFunctionWithOutlined,
+  printHIR,
+} from "../HIR/PrintHIR";
 import { CodegenFunction, printReactiveFunction } from "../ReactiveScopes";
+import { printReactiveFunctionWithOutlined } from "../ReactiveScopes/PrintReactiveFunction";
 
 let ENABLED: boolean = false;
 
@@ -79,7 +84,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 +96,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`);