Update on "[compiler] Show outlined functions in logging, playground"

Updates focus mode logging and playground to show outlined functions at each step:

<img width="1723" alt="Screenshot 2024-07-16 at 12 07 59 PM" src="https://github.com/user-attachments/assets/5425e430-93ee-47e3-b45e-b67d3f7ade00">


[ghstack-poisoned]

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;
           }

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";

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();
 }