[compiler][playground] Formatting changes to pass tabs
Summary: Compiler pass tabs are bolded when their contents have changed from previous passes; but currently the HIR and JS tabs are unbolded. Conceptually they should be, if HIR is "changed" from the source code and JS is "changed" from the last IR phase. In addition, the "show diff" option doesn't make a ton of sense for tabs that either aren't part of the pipeline (EnvironmentConfig) or (maybe more controversially, but imo) passes where the IR representation has changed since the last pass (BuildReactiveFunctions). This diff drops the button from those tabs. ghstack-source-id: 1d67e2f371a8c75792f7f6450f52ecbf79720c00 Pull Request resolved: https://github.com/facebook/react/pull/30151
Mike Vitousek committed
Jul 1, 2024 at 09:05 UTC
100dfd7dabbdcfd1d8fedd972f9afd42b57f6a5f
1 file changed
+5
-4
compiler/apps/playground/components/Editor/Output.tsx
+5
-4
@@ -99,13 +99,14 @@ async function tabify(source: string, compilerOutput: CompilerOutput) {
99
}
100
}
101
let lastPassOutput: string | null = null;
102
+ let nonDiffPasses = ["HIR", "BuildReactiveFunction", "EnvironmentConfig"];
103
for (const [passName, text] of concattedResults) {
104
tabs.set(
105
passName,
106
<TextTabContent
107
output={text}
107
- diff={passName !== "HIR" ? lastPassOutput : null}
108
- showInfoPanel={true}
108
+ diff={lastPassOutput}
109
+ showInfoPanel={!nonDiffPasses.includes(passName)}
110
></TextTabContent>
111
);
112
lastPassOutput = text;
@@ -187,7 +188,7 @@ function Output({ store, compilerOutput }: Props) {
188
});
189
}, [store.source, compilerOutput]);
190
190
- const changedPasses: Set<string> = new Set();
191
+ const changedPasses: Set<string> = new Set(["JS", "HIR"]); // Initial and final passes should always be bold
192
let lastResult: string = "";
193
for (const [passName, results] of compilerOutput.results) {
194
for (const result of results) {
@@ -195,7 +196,7 @@ function Output({ store, compilerOutput }: Props) {
196
if (result.kind === "hir" || result.kind === "reactive") {
197
currResult += `function ${result.fnName}\n\n${result.value}`;
198
}
198
- if (passName !== "HIR" && currResult !== lastResult) {
199
+ if (currResult !== lastResult) {
200
changedPasses.add(passName);
201
}
202
lastResult = currResult;