From 100dfd7dabbdcfd1d8fedd972f9afd42b57f6a5f Mon Sep 17 00:00:00 2001
From: Mike Vitousek <mmvitousek@gmail.com>
Date: Mon, 1 Jul 2024 09:05:52 -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;