[playground] option to codegen output in HIR tab
We might need to revisit the tabs vs. options split, but for now this just adds a checkbox toggle that outputs codegenned JS instead of HIR in the HIR tab. Open to ideas to organize this in the future...
Jan Kassens committed
Nov 13, 2022 at 11:00 UTC
d9724c7e006fecfdd0eec955b98148ecdfad214e
2 files changed
+26
-2
compiler/forget/packages/playground/components/Editor/HIRTabContent.tsx
+24
-2
@@ -9,6 +9,9 @@ import clsx from "clsx";
9
10
import { HIR } from "babel-plugin-react-forget";
11
import { useState } from "react";
12
+import generate from "@babel/generator";
13
+import prettier from "prettier";
14
+import prettierParserBabel from "prettier/parser-babel";
15
16
const {
17
parseFunctions,
@@ -20,12 +23,14 @@ const {
23
leaveSSA,
24
lower,
25
printHIR,
26
+ codegen,
27
} = HIR;
28
29
export default function HIRTabContent({ source }: { source: string }) {
30
const astFunctions = parseFunctions(source);
31
32
const [flags, setFlags] = useState({
33
+ codegen: true,
34
eliminateRedundantPhi: true,
35
inferReferenceEffects: true,
36
inferMutableRanges: true,
@@ -53,8 +58,17 @@ export default function HIRTabContent({ source }: { source: string }) {
58
if (flags.leaveSSA) {
59
leaveSSA(ir);
60
}
56
- const textHIR = printHIR(ir.body);
57
- body = <pre>{textHIR}</pre>;
61
+ const output = flags.codegen
62
+ ? prettier.format(
63
+ generate(codegen(ir)).code.replace("\n\n", "\n"),
64
+ {
65
+ semi: true,
66
+ parser: "babel",
67
+ plugins: [prettierParserBabel],
68
+ }
69
+ )
70
+ : printHIR(ir.body);
71
+ body = <pre>{output}</pre>;
72
} catch (e: any) {
73
body = <div>error: ${e.toString()}</div>;
74
}
@@ -77,6 +91,7 @@ type Flags = {
91
inferReferenceEffects: boolean;
92
inferMutableRanges: boolean;
93
leaveSSA: boolean;
94
+ codegen: boolean;
95
};
96
97
function CompilerFlagsEditor({
@@ -118,6 +133,13 @@ function CompilerFlagsEditor({
133
setFlags({ ...flags, leaveSSA });
134
}}
135
/>
136
+ <LabeledCheckbox
137
+ label="Codegen"
138
+ value={flags.codegen}
139
+ onChange={(codegen) => {
140
+ setFlags({ ...flags, codegen });
141
+ }}
142
+ />
143
</div>
144
</div>
145
);
compiler/forget/src/index.ts
+2
@@ -32,6 +32,7 @@ import leaveSSA from "./HIR/LeaveSSA";
32
import traverse, { NodePath } from "@babel/traverse";
33
import * as t from "@babel/types";
34
import { parse } from "@babel/parser";
35
+import codegen from "./HIR/Codegen";
36
37
function parseFunctions(
38
source: string
@@ -64,6 +65,7 @@ export const HIR = {
65
printHIR,
66
Environment,
67
leaveSSA,
68
+ codegen,
69
};
70
71
export default BabelPlugin;