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)

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 {

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 };