[playground] Refactor compilation of HIR
Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react-forget/pull/825). * __->__ #825 [playground] Refactor compilation of HIR
Sathya Gunasekaran committed
Nov 24, 2022 at 15:28 UTC
06ca8b102609a77efb3d18f2e982ca670bb83dc6
1 file changed
+102
-65
compiler/forget/packages/playground/components/Editor/Output.tsx
+102
-65
@@ -10,7 +10,7 @@ import MonacoEditor from "@monaco-editor/react";
10
import { Diagnostic, HIR, OutputKind } from "babel-plugin-react-forget";
11
import prettier from "prettier";
12
import prettierParserBabel from "prettier/parser-babel";
13
-import { memo } from "react";
13
+import { memo, useMemo } from "react";
14
import type { Store } from "../../lib/stores";
15
import TabbedWindow from "../TabbedWindow";
16
import { monacoOptions } from "./monacoOptions";
@@ -36,14 +36,26 @@ type Props = {
36
updateDiagnostics: (newDiags: Diagnostic[]) => void;
37
};
38
39
-// TODO(gsn: Update diagnostics ƒrom HIR output
40
-function Output({ store }: Props) {
41
- const astFunctions = parseFunctions(store.source);
42
- if (astFunctions.length === 0) {
43
- return <div></div>;
44
- }
39
+type CompilerOutput = {
40
+ ssaOutput: string;
41
+ hirOutput: string;
42
+ eliminateRedundantPhiOutput: string;
43
+ inferReferenceEffectsOutput: string;
44
+ inferMutableRangesOutput: string;
45
+ leaveSSAOutput: string;
46
+ codegenOutput: string;
47
+ sourceMapUrl: string | null;
48
+};
49
+
50
+type CompilerError = string;
51
52
+function compile(source: string): CompilerOutput | CompilerError {
53
try {
54
+ const astFunctions = parseFunctions(source);
55
+ if (astFunctions.length === 0) {
56
+ return "";
57
+ }
58
+
59
// TODO: Handle multiple functions
60
const func = astFunctions[0];
61
const env = new Environment();
@@ -74,7 +86,7 @@ function Output({ store }: Props) {
86
sourceMaps: true,
87
sourceFileName: "input.js",
88
},
77
- store.source
89
+ source
90
);
91
const sourceMapUrl = getSourceMapUrl(
92
generated.code,
@@ -85,67 +97,92 @@ function Output({ store }: Props) {
97
parser: "babel",
98
plugins: [prettierParserBabel],
99
});
88
- return (
89
- <TabbedWindow
90
- defaultTab="HIR"
91
- tabs={{
92
- HIR: (
93
- <TextTabContent
94
- output={hirOutput}
95
- kind={OutputKind.IR}
96
- ></TextTabContent>
97
- ),
98
- SSA: (
99
- <TextTabContent
100
- output={ssaOutput}
101
- kind={OutputKind.IR}
102
- ></TextTabContent>
103
- ),
104
- EliminateRedundantPhi: (
105
- <TextTabContent
106
- output={eliminateRedundantPhiOutput}
107
- kind={OutputKind.IR}
108
- ></TextTabContent>
109
- ),
110
- InferReferenceEffects: (
111
- <TextTabContent
112
- output={inferReferenceEffectsOutput}
113
- kind={OutputKind.IR}
114
- ></TextTabContent>
115
- ),
116
- InferMutableRanges: (
117
- <TextTabContent
118
- output={inferMutableRangesOutput}
119
- kind={OutputKind.IR}
120
- ></TextTabContent>
121
- ),
122
- LeaveSSA: (
123
- <TextTabContent
124
- output={leaveSSAOutput}
125
- kind={OutputKind.IR}
126
- ></TextTabContent>
127
- ),
128
- JS: <TextTabContent output={codegenOutput} kind={OutputKind.JS} />,
129
- SourceMap: (
130
- <>
131
- {" "}
132
- {sourceMapUrl && (
133
- <iframe
134
- src={sourceMapUrl}
135
- className="w-full h-96"
136
- title="Generated Code"
137
- />
138
- )}
139
- </>
140
- ),
141
- }}
142
- />
143
- );
100
+
101
+ return {
102
+ hirOutput,
103
+ ssaOutput,
104
+ eliminateRedundantPhiOutput,
105
+ inferReferenceEffectsOutput,
106
+ inferMutableRangesOutput,
107
+ leaveSSAOutput,
108
+ codegenOutput,
109
+ sourceMapUrl,
110
+ };
111
} catch (e: any) {
145
- return <div>error: ${e.toString()}</div>;
112
+ return e.toString();
113
}
114
}
115
116
+// TODO(gsn: Update diagnostics ƒrom HIR output
117
+function Output({ store }: Props) {
118
+ const compilerOutput = useMemo(() => compile(store.source), [store.source]);
119
+ if (typeof compilerOutput === "string") {
120
+ if (compilerOutput === "") return <div></div>;
121
+ return <div>error: ${compilerOutput}</div>;
122
+ }
123
+
124
+ return (
125
+ <TabbedWindow
126
+ defaultTab="HIR"
127
+ tabs={{
128
+ HIR: (
129
+ <TextTabContent
130
+ output={compilerOutput.hirOutput}
131
+ kind={OutputKind.IR}
132
+ ></TextTabContent>
133
+ ),
134
+ SSA: (
135
+ <TextTabContent
136
+ output={compilerOutput.ssaOutput}
137
+ kind={OutputKind.IR}
138
+ ></TextTabContent>
139
+ ),
140
+ EliminateRedundantPhi: (
141
+ <TextTabContent
142
+ output={compilerOutput.eliminateRedundantPhiOutput}
143
+ kind={OutputKind.IR}
144
+ ></TextTabContent>
145
+ ),
146
+ InferReferenceEffects: (
147
+ <TextTabContent
148
+ output={compilerOutput.inferReferenceEffectsOutput}
149
+ kind={OutputKind.IR}
150
+ ></TextTabContent>
151
+ ),
152
+ InferMutableRanges: (
153
+ <TextTabContent
154
+ output={compilerOutput.inferMutableRangesOutput}
155
+ kind={OutputKind.IR}
156
+ ></TextTabContent>
157
+ ),
158
+ LeaveSSA: (
159
+ <TextTabContent
160
+ output={compilerOutput.leaveSSAOutput}
161
+ kind={OutputKind.IR}
162
+ ></TextTabContent>
163
+ ),
164
+ JS: (
165
+ <TextTabContent
166
+ output={compilerOutput.codegenOutput}
167
+ kind={OutputKind.JS}
168
+ />
169
+ ),
170
+ SourceMap: (
171
+ <>
172
+ {compilerOutput.sourceMapUrl && (
173
+ <iframe
174
+ src={compilerOutput.sourceMapUrl}
175
+ className="w-full h-96"
176
+ title="Generated Code"
177
+ />
178
+ )}
179
+ </>
180
+ ),
181
+ }}
182
+ />
183
+ );
184
+}
185
+
186
function utf16ToUTF8(s: string): string {
187
return unescape(encodeURIComponent(s));
188
}