[playground] option to codegen output in HIR tab

We might need to revisit the tabs vs. options split, but for now this just adds 
a checkbox toggle that outputs codegenned JS instead of HIR in the HIR tab. Open 
to ideas to organize this in the future...

compiler/forget/packages/playground/components/Editor/HIRTabContent.tsx

@@ -9,6 +9,9 @@ import clsx from "clsx";
 
 import { HIR } from "babel-plugin-react-forget";
 import { useState } from "react";
+import generate from "@babel/generator";
+import prettier from "prettier";
+import prettierParserBabel from "prettier/parser-babel";
 
 const {
   parseFunctions,
@@ -20,12 +23,14 @@ const {
   leaveSSA,
   lower,
   printHIR,
+  codegen,
 } = HIR;
 
 export default function HIRTabContent({ source }: { source: string }) {
   const astFunctions = parseFunctions(source);
 
   const [flags, setFlags] = useState({
+    codegen: true,
     eliminateRedundantPhi: true,
     inferReferenceEffects: true,
     inferMutableRanges: true,
@@ -53,8 +58,17 @@ export default function HIRTabContent({ source }: { source: string }) {
             if (flags.leaveSSA) {
               leaveSSA(ir);
             }
-            const textHIR = printHIR(ir.body);
-            body = <pre>{textHIR}</pre>;
+            const output = flags.codegen
+              ? prettier.format(
+                  generate(codegen(ir)).code.replace("\n\n", "\n"),
+                  {
+                    semi: true,
+                    parser: "babel",
+                    plugins: [prettierParserBabel],
+                  }
+                )
+              : printHIR(ir.body);
+            body = <pre>{output}</pre>;
           } catch (e: any) {
             body = <div>error: ${e.toString()}</div>;
           }
@@ -77,6 +91,7 @@ type Flags = {
   inferReferenceEffects: boolean;
   inferMutableRanges: boolean;
   leaveSSA: boolean;
+  codegen: boolean;
 };
 
 function CompilerFlagsEditor({
@@ -118,6 +133,13 @@ function CompilerFlagsEditor({
             setFlags({ ...flags, leaveSSA });
           }}
         />
+        <LabeledCheckbox
+          label="Codegen"
+          value={flags.codegen}
+          onChange={(codegen) => {
+            setFlags({ ...flags, codegen });
+          }}
+        />
       </div>
     </div>
   );

compiler/forget/src/index.ts

@@ -32,6 +32,7 @@ import leaveSSA from "./HIR/LeaveSSA";
 import traverse, { NodePath } from "@babel/traverse";
 import * as t from "@babel/types";
 import { parse } from "@babel/parser";
+import codegen from "./HIR/Codegen";
 
 function parseFunctions(
   source: string
@@ -64,6 +65,7 @@ export const HIR = {
   printHIR,
   Environment,
   leaveSSA,
+  codegen,
 };
 
 export default BabelPlugin;