From 006ead314ea9f216ded02896e44c1ea08128f12f Mon Sep 17 00:00:00 2001
From: Mike Vitousek <mmvitousek@gmail.com>
Date: Sun, 30 Jun 2024 16:36:17 -0700
Subject: [PATCH] [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
---
 compiler/apps/playground/components/Editor/Output.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/compiler/apps/playground/components/Editor/Output.tsx b/compiler/apps/playground/components/Editor/Output.tsx
index 3b2b26c8804e7..c8c37bd29a518 100644
--- a/compiler/apps/playground/components/Editor/Output.tsx
+++ b/compiler/apps/playground/components/Editor/Output.tsx
@@ -99,13 +99,14 @@ async function tabify(source: string, compilerOutput: CompilerOutput) {
     }
   }
   let lastPassOutput: string | null = null;
+  let nonDiffPasses = ["HIR", "BuildReactiveFunction", "EnvironmentConfig"];
   for (const [passName, text] of concattedResults) {
     tabs.set(
       passName,
       <TextTabContent
         output={text}
-        diff={passName !== "HIR" ? lastPassOutput : null}
-        showInfoPanel={true}
+        diff={lastPassOutput}
+        showInfoPanel={!nonDiffPasses.includes(passName)}
       ></TextTabContent>
     );
     lastPassOutput = text;
@@ -187,7 +188,7 @@ function Output({ store, compilerOutput }: Props) {
     });
   }, [store.source, compilerOutput]);
 
-  const changedPasses: Set<string> = new Set();
+  const changedPasses: Set<string> = new Set(["JS", "HIR"]); // Initial and final passes should always be bold
   let lastResult: string = "";
   for (const [passName, results] of compilerOutput.results) {
     for (const result of results) {
@@ -195,7 +196,7 @@ function Output({ store, compilerOutput }: Props) {
       if (result.kind === "hir" || result.kind === "reactive") {
         currResult += `function ${result.fnName}\n\n${result.value}`;
       }
-      if (passName !== "HIR" && currResult !== lastResult) {
+      if (currResult !== lastResult) {
         changedPasses.add(passName);
       }
       lastResult = currResult;