diff --git a/compiler/apps/playground/components/Editor/EditorImpl.tsx b/compiler/apps/playground/components/Editor/EditorImpl.tsx index 312492b48c3c1..a96672194b0f2 100644 --- a/compiler/apps/playground/components/Editor/EditorImpl.tsx +++ b/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; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/PrintHIR.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/PrintHIR.ts index df7d2698f4b29..837b3729dce13 100644 --- 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 index 43e2b7c4bb31b..38d030cd7103c 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts +++ b/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, diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PrintReactiveFunction.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PrintReactiveFunction.ts index aedd3d7d227b4..7f6e347fe7a56 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PrintReactiveFunction.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PrintReactiveFunction.ts @@ -17,6 +17,7 @@ import { ReactiveValue, } from "../HIR/HIR"; import { + printFunction, printIdentifier, printInstructionValue, printPlace, @@ -24,8 +25,24 @@ import { } 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 : ""}(`); 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 index 125c291602c5b..def921aeb0f62 100644 --- 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`);