[compiler] Show outlined functions in logging, playground
ghstack-source-id: abda15e8749052b93d2382fe9a5e45bb7e080f3a Pull Request resolved: https://github.com/facebook/react/pull/30344
Joe Savona committed
Jul 16, 2024 at 12:10 UTC
163365a07872337e04826c4f501565d43dbd2fd4
5 files changed
+34
-9
compiler/apps/playground/components/Editor/EditorImpl.tsx
+4
-2
@@ -42,6 +42,8 @@ import {
42
default as Output,
43
PrintedCompilerPipelineValue,
44
} from "./Output";
45
+import { printFunctionWithOutlined } from "babel-plugin-react-compiler/src/HIR/PrintHIR";
46
+import { printReactiveFunctionWithOutlined } from "babel-plugin-react-compiler/src/ReactiveScopes/PrintReactiveFunction";
47
48
function parseInput(input: string, language: "flow" | "typescript") {
49
// Extract the first line to quickly check for custom test directives
@@ -242,7 +244,7 @@ function compile(source: string): [CompilerOutput, "flow" | "typescript"] {
244
kind: "hir",
245
fnName,
246
name: result.name,
245
- value: printHIR(result.value.body),
247
+ value: printFunctionWithOutlined(result.value),
248
});
249
break;
250
}
@@ -251,7 +253,7 @@ function compile(source: string): [CompilerOutput, "flow" | "typescript"] {
253
kind: "reactive",
254
fnName,
255
name: result.name,
254
- value: printReactiveFunction(result.value),
256
+ value: printReactiveFunctionWithOutlined(result.value),
257
});
258
break;
259
}
compiler/packages/babel-plugin-react-compiler/src/HIR/PrintHIR.ts
+8
@@ -41,6 +41,14 @@ export type Options = {
41
indent: number;
42
};
43
44
+export function printFunctionWithOutlined(fn: HIRFunction): string {
45
+ const output = [printFunction(fn)];
46
+ for (const outlined of fn.env.getOutlinedFunctions()) {
47
+ output.push(`\nfunction ${outlined.fn.id}:\n${printHIR(outlined.fn.body)}`);
48
+ }
49
+ return output.join("\n");
50
+}
51
+
52
export function printFunction(fn: HIRFunction): string {
53
const output = [];
54
let definition = "";
compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts
-2
@@ -51,7 +51,6 @@ import { buildReactiveFunction } from "./BuildReactiveFunction";
51
import { SINGLE_CHILD_FBT_TAGS } from "./MemoizeFbtAndMacroOperandsInSameScope";
52
import { ReactiveFunctionVisitor, visitReactiveFunction } from "./visitors";
53
import { ReactFunctionType } from "../HIR/Environment";
54
-import { logReactiveFunction } from "../Utils/logger";
54
55
export const MEMO_CACHE_SENTINEL = "react.memo_cache_sentinel";
56
export const EARLY_RETURN_SENTINEL = "react.early_return_sentinel";
@@ -278,7 +277,6 @@ export function codegenFunction(
277
pruneHoistedContexts(reactiveFunction);
278
279
const identifiers = renameVariables(reactiveFunction);
281
- logReactiveFunction("Outline", reactiveFunction);
280
const codegen = codegenReactiveFunction(
281
new Context(
282
cx.env,
compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PrintReactiveFunction.ts
+17
-1
@@ -17,6 +17,7 @@ import {
17
ReactiveValue,
18
} from "../HIR/HIR";
19
import {
20
+ printFunction,
21
printIdentifier,
22
printInstructionValue,
23
printPlace,
@@ -24,8 +25,24 @@ import {
25
} from "../HIR/PrintHIR";
26
import { assertExhaustive } from "../Utils/utils";
27
28
+export function printReactiveFunctionWithOutlined(
29
+ fn: ReactiveFunction
30
+): string {
31
+ const writer = new Writer();
32
+ writeReactiveFunction(fn, writer);
33
+ for (const outlined of fn.env.getOutlinedFunctions()) {
34
+ writer.writeLine("\nfunction " + printFunction(outlined.fn));
35
+ }
36
+ return writer.complete();
37
+}
38
+
39
export function printReactiveFunction(fn: ReactiveFunction): string {
40
const writer = new Writer();
41
+ writeReactiveFunction(fn, writer);
42
+ return writer.complete();
43
+}
44
+
45
+function writeReactiveFunction(fn: ReactiveFunction, writer: Writer): void {
46
writer.writeLine(`function ${fn.id !== null ? fn.id : "<unknown>"}(`);
47
writer.indented(() => {
48
for (const param of fn.params) {
@@ -39,7 +56,6 @@ export function printReactiveFunction(fn: ReactiveFunction): string {
56
writer.writeLine(") {");
57
writeReactiveInstructions(writer, fn.body);
58
writer.writeLine("}");
42
- return writer.complete();
59
}
60
61
export function printReactiveScopeSummary(scope: ReactiveScope): string {
compiler/packages/babel-plugin-react-compiler/src/Utils/logger.ts
+5
-4
@@ -9,8 +9,9 @@ import generate from "@babel/generator";
9
import * as t from "@babel/types";
10
import chalk from "chalk";
11
import { HIR, HIRFunction, ReactiveFunction } from "../HIR/HIR";
12
-import { printFunction, printHIR } from "../HIR/PrintHIR";
13
-import { CodegenFunction, printReactiveFunction } from "../ReactiveScopes";
12
+import { printFunctionWithOutlined, printHIR } from "../HIR/PrintHIR";
13
+import { CodegenFunction } from "../ReactiveScopes";
14
+import { printReactiveFunctionWithOutlined } from "../ReactiveScopes/PrintReactiveFunction";
15
16
let ENABLED: boolean = false;
17
@@ -79,7 +80,7 @@ export function logCodegenFunction(step: string, fn: CodegenFunction): void {
80
81
export function logHIRFunction(step: string, fn: HIRFunction): void {
82
if (ENABLED) {
82
- const printed = printFunction(fn);
83
+ const printed = printFunctionWithOutlined(fn);
84
if (printed !== lastLogged) {
85
lastLogged = printed;
86
process.stdout.write(`${chalk.green(step)}:\n${printed}\n\n`);
@@ -91,7 +92,7 @@ export function logHIRFunction(step: string, fn: HIRFunction): void {
92
93
export function logReactiveFunction(step: string, fn: ReactiveFunction): void {
94
if (ENABLED) {
94
- const printed = printReactiveFunction(fn);
95
+ const printed = printReactiveFunctionWithOutlined(fn);
96
if (printed !== lastLogged) {
97
lastLogged = printed;
98
process.stdout.write(`${chalk.green(step)}:\n${printed}\n\n`);