From 8751cef9d248b80b6a87b908a1918f91ac7a7fcb Mon Sep 17 00:00:00 2001 From: Joe Savona Date: Tue, 16 Jul 2024 12:10:07 +0900 Subject: [PATCH] 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(); }