[compiler] Show outlined functions in logging, playground

ghstack-source-id: 492ac04e11254f02df42b985d50fa3a9e94125c2 Pull Request resolved: #30344
facebook · Jul 16, 2024 · 5e91126 · 5e91126
1 parent a182079
commit 5e91126
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 6 deletions.
diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/PrintHIR.ts b/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 = "";

diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts b/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,

diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PrintReactiveFunction.ts b/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 {

diff --git a/compiler/packages/babel-plugin-react-compiler/src/Utils/logger.ts b/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`);