From 69c8206e2651795d281618d4c763904ed466854d Mon Sep 17 00:00:00 2001 From: Joe Savona Date: Tue, 16 Jul 2024 10:58:34 +0900 Subject: [PATCH 1/5] [compiler] Show outlined functions in logging, playground [ghstack-poisoned] --- compiler/apps/playground/components/Editor/Output.tsx | 7 ++++++- .../src/Entrypoint/Pipeline.ts | 8 ++++++++ 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/compiler/apps/playground/components/Editor/Output.tsx b/compiler/apps/playground/components/Editor/Output.tsx index c8c37bd29a518..ab8dca924e847 100644 --- a/compiler/apps/playground/components/Editor/Output.tsx +++ b/compiler/apps/playground/components/Editor/Output.tsx @@ -99,7 +99,12 @@ async function tabify(source: string, compilerOutput: CompilerOutput) { } } let lastPassOutput: string | null = null; - let nonDiffPasses = ["HIR", "BuildReactiveFunction", "EnvironmentConfig"]; + let nonDiffPasses = [ + "HIR", + "BuildReactiveFunction", + "EnvironmentConfig", + "OutlineFunctions (outlined)", + ]; for (const [passName, text] of concattedResults) { tabs.set( passName, diff --git a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts index b1480d76dc0f3..7080cb33134c9 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts @@ -246,6 +246,14 @@ function* runWithEnvironment( if (env.config.enableFunctionOutlining) { outlineFunctions(hir); yield log({ kind: "hir", name: "OutlineFunctions", value: hir }); + + for (const outlined of env.getOutlinedFunctions()) { + yield log({ + kind: "hir", + name: "OutlineFunctions (outlined)", + value: outlined.fn, + }); + } } alignMethodCallScopes(hir); From b8deb6680856d977de91c5cfad3c9fe9726ae15c Mon Sep 17 00:00:00 2001 From: Joe Savona Date: Tue, 16 Jul 2024 11:07:20 +0900 Subject: [PATCH 2/5] Update on "[compiler] Show outlined functions in logging, playground" [ghstack-poisoned] --- compiler/apps/playground/components/Editor/Output.tsx | 2 +- .../babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts | 7 ++++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/compiler/apps/playground/components/Editor/Output.tsx b/compiler/apps/playground/components/Editor/Output.tsx index ab8dca924e847..4cdfaca153c3b 100644 --- a/compiler/apps/playground/components/Editor/Output.tsx +++ b/compiler/apps/playground/components/Editor/Output.tsx @@ -103,7 +103,7 @@ async function tabify(source: string, compilerOutput: CompilerOutput) { "HIR", "BuildReactiveFunction", "EnvironmentConfig", - "OutlineFunctions (outlined)", + "Outlined", ]; for (const [passName, text] of concattedResults) { tabs.set( diff --git a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts index 7080cb33134c9..b84613a0fb3cb 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts @@ -21,6 +21,7 @@ import { lower, mergeConsecutiveBlocks, mergeOverlappingReactiveScopesHIR, + printFunction, pruneUnusedLabelsHIR, } from "../HIR"; import { @@ -249,9 +250,9 @@ function* runWithEnvironment( for (const outlined of env.getOutlinedFunctions()) { yield log({ - kind: "hir", - name: "OutlineFunctions (outlined)", - value: outlined.fn, + kind: "debug", + name: "Outlined", + value: printFunction(outlined.fn), }); } } From 2c67503b50789673405b45e438ba3a99fbc61695 Mon Sep 17 00:00:00 2001 From: Joe Savona Date: Tue, 16 Jul 2024 11:28:58 +0900 Subject: [PATCH 3/5] Update on "[compiler] Show outlined functions in logging, playground" [ghstack-poisoned] --- .../playground/components/Editor/Output.tsx | 7 +------ .../src/Entrypoint/Pipeline.ts | 8 -------- .../src/HIR/PrintHIR.ts | 9 +++++++++ .../ReactiveScopes/CodegenReactiveFunction.ts | 1 - .../ReactiveScopes/PrintReactiveFunction.ts | 18 +++++++++++++++++- .../src/Utils/logger.ts | 11 ++++++++--- 6 files changed, 35 insertions(+), 19 deletions(-) diff --git a/compiler/apps/playground/components/Editor/Output.tsx b/compiler/apps/playground/components/Editor/Output.tsx index 4cdfaca153c3b..c8c37bd29a518 100644 --- a/compiler/apps/playground/components/Editor/Output.tsx +++ b/compiler/apps/playground/components/Editor/Output.tsx @@ -99,12 +99,7 @@ async function tabify(source: string, compilerOutput: CompilerOutput) { } } let lastPassOutput: string | null = null; - let nonDiffPasses = [ - "HIR", - "BuildReactiveFunction", - "EnvironmentConfig", - "Outlined", - ]; + let nonDiffPasses = ["HIR", "BuildReactiveFunction", "EnvironmentConfig"]; for (const [passName, text] of concattedResults) { tabs.set( passName, diff --git a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts index b84613a0fb3cb..972486ace3496 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts @@ -247,14 +247,6 @@ function* runWithEnvironment( if (env.config.enableFunctionOutlining) { outlineFunctions(hir); yield log({ kind: "hir", name: "OutlineFunctions", value: hir }); - - for (const outlined of env.getOutlinedFunctions()) { - yield log({ - kind: "debug", - name: "Outlined", - value: printFunction(outlined.fn), - }); - } } alignMethodCallScopes(hir); 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..33896534e38e3 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 = ""; @@ -66,6 +74,7 @@ export function printFunction(fn: HIRFunction): string { } output.push(printHIR(fn.body)); output.push(...fn.directives); + return output.join("\n"); } 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..50f04c0cc12a6 100644 --- 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 index aedd3d7d227b4..353292e1fca22 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("\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 : ""}(`); 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..7858f2cbdd1b0 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,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`); From 71bcdfa870737157d8a2501a5e35d6845fbcfd8f Mon Sep 17 00:00:00 2001 From: Joe Savona Date: Tue, 16 Jul 2024 11:30:43 +0900 Subject: [PATCH 4/5] Update on "[compiler] Show outlined functions in logging, playground" [ghstack-poisoned] --- .../src/Entrypoint/Pipeline.ts | 1 - .../babel-plugin-react-compiler/src/HIR/PrintHIR.ts | 1 - .../babel-plugin-react-compiler/src/Utils/logger.ts | 8 ++------ 3 files changed, 2 insertions(+), 8 deletions(-) diff --git a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts index 972486ace3496..b1480d76dc0f3 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts @@ -21,7 +21,6 @@ import { lower, mergeConsecutiveBlocks, mergeOverlappingReactiveScopesHIR, - printFunction, pruneUnusedLabelsHIR, } from "../HIR"; import { 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 33896534e38e3..837b3729dce13 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/HIR/PrintHIR.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/PrintHIR.ts @@ -74,7 +74,6 @@ export function printFunction(fn: HIRFunction): string { } output.push(printHIR(fn.body)); output.push(...fn.directives); - return output.join("\n"); } 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 7858f2cbdd1b0..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,12 +9,8 @@ import generate from "@babel/generator"; import * as t from "@babel/types"; import chalk from "chalk"; import { HIR, HIRFunction, ReactiveFunction } from "../HIR/HIR"; -import { - printFunction, - printFunctionWithOutlined, - 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; From 8751cef9d248b80b6a87b908a1918f91ac7a7fcb Mon Sep 17 00:00:00 2001 From: Joe Savona Date: Tue, 16 Jul 2024 12:10:07 +0900 Subject: [PATCH 5/5] Update on "[compiler] Show outlined functions in logging, playground" MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Updates focus mode logging and playground to show outlined functions at each step: Screenshot 2024-07-16 at 12 07 59 PM [ghstack-poisoned] --- compiler/apps/playground/components/Editor/EditorImpl.tsx | 6 ++++-- .../src/ReactiveScopes/CodegenReactiveFunction.ts | 1 - .../src/ReactiveScopes/PrintReactiveFunction.ts | 2 +- 3 files changed, 5 insertions(+), 4 deletions(-) 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/ReactiveScopes/CodegenReactiveFunction.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts index 50f04c0cc12a6..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"; 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 353292e1fca22..7f6e347fe7a56 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PrintReactiveFunction.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PrintReactiveFunction.ts @@ -31,7 +31,7 @@ export function printReactiveFunctionWithOutlined( const writer = new Writer(); writeReactiveFunction(fn, writer); for (const outlined of fn.env.getOutlinedFunctions()) { - writer.writeLine("\n" + printFunction(outlined.fn)); + writer.writeLine("\nfunction " + printFunction(outlined.fn)); } return writer.complete(); }