From 98cb9eff929aa7363e6369ed3bc38c09cdd57198 Mon Sep 17 00:00:00 2001
From: Lauren Tan <poteto@users.noreply.github.com>
Date: Thu, 26 Jan 2023 16:33:56 -0500
Subject: [PATCH] Fix playground tabs always showing the same HIR or reactive
 function

Previously we were storing a pointer to the HIR or ReactiveFunction

prior to printing, so when we printed them it would always print the

results of the last pass. This commit changes it so we print them to

strings when iterating through the compiler pipeline so each snapshot is

correctly preserved

![Screenshot 2023-01-26 at 4 34 23
PM](https://user-images.githubusercontent.com/1390709/214955701-67f4da1e-b12c-432a-ba47-1a29afd91312.png)
---
 .../playground/components/Editor/Output.tsx   | 30 +++++++----
 .../playground/components/Editor/index.tsx    | 50 +++++++++++++++++--
 2 files changed, 65 insertions(+), 15 deletions(-)

diff --git a/compiler/forget/packages/playground/components/Editor/Output.tsx b/compiler/forget/packages/playground/components/Editor/Output.tsx
index 68b1200375..55fdd43dad 100644
--- a/compiler/forget/packages/playground/components/Editor/Output.tsx
+++ b/compiler/forget/packages/playground/components/Editor/Output.tsx
@@ -8,12 +8,7 @@
 import generate from "@babel/generator";
 import * as t from "@babel/types";
 import MonacoEditor from "@monaco-editor/react";
-import {
-  printHIR,
-  printReactiveFunction,
-  type CompilerError,
-  type CompilerPipelineValue,
-} from "babel-plugin-react-forget";
+import { type CompilerError } from "babel-plugin-react-forget";
 import prettier from "prettier";
 import prettierParserBabel from "prettier/parser-babel";
 import { memo, useMemo, useState } from "react";
@@ -24,8 +19,23 @@ const MemoizedOutput = memo(Output);
 
 export default MemoizedOutput;
 
+export type PrintedCompilerPipelineValue =
+  | {
+      kind: "ast";
+      name: string;
+      fnName: string | null;
+      value: t.FunctionDeclaration;
+    }
+  | {
+      kind: "hir";
+      name: string;
+      fnName: string | null;
+      value: string;
+    }
+  | { kind: "reactive"; name: string; fnName: string | null; value: string };
+
 export type CompilerOutput =
-  | { kind: "ok"; results: Map<string, CompilerPipelineValue[]> }
+  | { kind: "ok"; results: Map<string, PrintedCompilerPipelineValue[]> }
   | { kind: "err"; error: CompilerError };
 
 type Props = {
@@ -45,8 +55,8 @@ function tabify(source: string, compilerOutput: CompilerOutput) {
       switch (result.kind) {
         case "hir": {
           const prev = concattedResults.get(result.name);
-          const next = printHIR(result.value.body);
-          const identName = `function ${result.value.id?.name}`;
+          const next = result.value;
+          const identName = `function ${result.fnName}`;
           if (prev != null) {
             concattedResults.set(passName, `${prev}\n\n${identName}\n${next}`);
           } else {
@@ -56,7 +66,7 @@ function tabify(source: string, compilerOutput: CompilerOutput) {
         }
         case "reactive": {
           const prev = concattedResults.get(passName);
-          const next = printReactiveFunction(result.value);
+          const next = result.value;
           if (prev != null) {
             concattedResults.set(passName, `${prev}\n\n${next}`);
           } else {
diff --git a/compiler/forget/packages/playground/components/Editor/index.tsx b/compiler/forget/packages/playground/components/Editor/index.tsx
index 9cea6e046a..a75b79b419 100644
--- a/compiler/forget/packages/playground/components/Editor/index.tsx
+++ b/compiler/forget/packages/playground/components/Editor/index.tsx
@@ -8,7 +8,11 @@
 import { parse } from "@babel/parser";
 import traverse, { NodePath } from "@babel/traverse";
 import * as t from "@babel/types";
-import { CompilerPipelineValue, run } from "babel-plugin-react-forget";
+import {
+  printHIR,
+  printReactiveFunction,
+  run,
+} from "babel-plugin-react-forget";
 import clsx from "clsx";
 import invariant from "invariant";
 import { useSnackbar } from "notistack";
@@ -24,7 +28,11 @@ import {
 } from "../../lib/stores";
 import { useStore, useStoreDispatch } from "../StoreContext";
 import Input from "./Input";
-import { CompilerOutput, default as Output } from "./Output";
+import {
+  CompilerOutput,
+  default as Output,
+  PrintedCompilerPipelineValue,
+} from "./Output";
 
 function parseFunctions(
   source: string
@@ -50,8 +58,8 @@ function parseFunctions(
 
 function compile(source: string): CompilerOutput {
   try {
-    const results = new Map<string, CompilerPipelineValue[]>();
-    const upsert = (result: CompilerPipelineValue) => {
+    const results = new Map<string, PrintedCompilerPipelineValue[]>();
+    const upsert = (result: PrintedCompilerPipelineValue) => {
       const entry = results.get(result.name);
       if (Array.isArray(entry)) {
         entry.push(result);
@@ -61,7 +69,39 @@ function compile(source: string): CompilerOutput {
     };
     for (const fn of parseFunctions(source)) {
       for (const result of run(fn)) {
-        upsert(result);
+        const fnName = fn.node.id?.name ?? null;
+        switch (result.kind) {
+          case "ast": {
+            upsert({
+              kind: "ast",
+              fnName,
+              name: result.name,
+              value: result.value,
+            });
+            break;
+          }
+          case "hir": {
+            upsert({
+              kind: "hir",
+              fnName,
+              name: result.name,
+              value: printHIR(result.value.body),
+            });
+            break;
+          }
+          case "reactive": {
+            upsert({
+              kind: "reactive",
+              fnName,
+              name: result.name,
+              value: printReactiveFunction(result.value),
+            });
+            break;
+          }
+          default: {
+            throw new Error(`Unhandled result ${result}`);
+          }
+        }
       }
     }
     return { kind: "ok", results };