From 27b37341e5efc3d3a465a8d16962bd8d9aa62760 Mon Sep 17 00:00:00 2001
From: Joe Savona <joesavona@fb.com>
Date: Tue, 10 Jan 2023 11:05:32 -0800
Subject: [PATCH] Playground uses run() to automatically sync w compiler passes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changes playground to use the modified `run()` function of the compiler, polling
the generator and building up a Map of tabs automatically based on the passes
that the compiler runs. This means tabs are always derived from the current
state of the compiler and we can never forget to add a pass.

<img width="1497" alt="Screen Shot 2023-01-10 at 11 06 03 AM"
src="https://user-images.githubusercontent.com/6425824/211639442-da421f73-e19e-4b63-9f33-0ce5a68cceb7.png">

Note the inclusion of some recently added passes that weren't added to the
playground — which was my fault but only bc i intended to ship this PR soon :-)
---
 .../playground/components/Editor/Output.tsx   | 256 ++++++------------
 .../playground/components/Editor/index.tsx    |  10 +-
 .../playground/components/TabbedWindow.tsx    |  44 ++-
 3 files changed, 106 insertions(+), 204 deletions(-)

diff --git a/compiler/forget/packages/playground/components/Editor/Output.tsx b/compiler/forget/packages/playground/components/Editor/Output.tsx
index 07ddfe04cf..59671f872d 100644
--- a/compiler/forget/packages/playground/components/Editor/Output.tsx
+++ b/compiler/forget/packages/playground/components/Editor/Output.tsx
@@ -9,59 +9,22 @@ import MonacoEditor from "@monaco-editor/react";
 import { HIR } from "babel-plugin-react-forget";
 import prettier from "prettier";
 import prettierParserBabel from "prettier/parser-babel";
-import { memo, useMemo } from "react";
+import { memo, useMemo, useState } from "react";
 import type { Store } from "../../lib/stores";
-import TabbedWindow, { TabTypes } from "../TabbedWindow";
+import TabbedWindow from "../TabbedWindow";
 import { monacoOptions } from "./monacoOptions";
-const {
-  buildReactiveFunction,
-  codegenReactiveFunction,
-  eliminateRedundantPhi,
-  enterSSA,
-  Environment,
-  flattenReactiveLoops,
-  inferTypes,
-  inferMutableRanges,
-  inferReactiveScopes,
-  inferReactiveScopeVariables,
-  inferReferenceEffects,
-  leaveSSA,
-  lower,
-  parseFunctions,
-  printHIR,
-  printReactiveFunction,
-  propagateScopeDependencies,
-  pruneUnusedLabels,
-  pruneUnusedScopes,
-} = HIR;
+const { parseFunctions, printHIR, printReactiveFunction } = HIR;
 const MemoizedOutput = memo(Output);
 
 export default MemoizedOutput;
 
 type Props = {
   store: Store;
-  tabsOpen: Map<TabTypes, boolean>;
-  setTabsOpen: (newTab: Map<TabTypes, boolean>) => void;
-};
-
-type CompilerOutput = {
-  ssaOutput: string;
-  hirOutput: string;
-  eliminateRedundantPhiOutput: string;
-  inferTypesOutput: string;
-  inferReferenceEffectsOutput: string;
-  inferMutableRangesOutput: string;
-  inferReactiveScopeVariablesOutput: string;
-  inferReactiveScopesOutput: string;
-  reactiveFunctionOutput: string;
-  leaveSSAOutput: string;
-  codegenOutput: string;
-  sourceMapUrl: string | null;
 };
 
 type CompilerError = string;
 
-function compile(source: string): CompilerOutput | CompilerError {
+function compile(source: string): Map<string, React.ReactNode> | CompilerError {
   try {
     const astFunctions = parseFunctions(source);
     if (astFunctions.length === 0) {
@@ -70,82 +33,96 @@ function compile(source: string): CompilerOutput | CompilerError {
 
     // TODO: Handle multiple functions
     const func = astFunctions[0];
-    const env = new Environment();
-    const ir = lower(func, env);
 
-    const hirOutput = printHIR(ir.body);
-
-    enterSSA(ir, env);
-    const ssaOutput = printHIR(ir.body);
-
-    eliminateRedundantPhi(ir);
-    const eliminateRedundantPhiOutput = printHIR(ir.body);
-
-    inferTypes(ir);
-    const inferTypesOutput = printHIR(ir.body);
-
-    inferReferenceEffects(ir);
-    const inferReferenceEffectsOutput = printHIR(ir.body);
-
-    inferMutableRanges(ir);
-    const inferMutableRangesOutput = printHIR(ir.body);
-
-    leaveSSA(ir);
-    const leaveSSAOutput = printHIR(ir.body);
-
-    inferReactiveScopeVariables(ir);
-    const inferReactiveScopeVariablesOutput = printHIR(ir.body);
-
-    inferReactiveScopes(ir);
-    const inferReactiveScopesOutput = printHIR(ir.body);
-
-    const reactiveFunction = buildReactiveFunction(ir);
-    pruneUnusedLabels(reactiveFunction);
-    flattenReactiveLoops(reactiveFunction);
-    propagateScopeDependencies(reactiveFunction);
-    pruneUnusedScopes(reactiveFunction);
-    const reactiveFunctionOutput = printReactiveFunction(reactiveFunction);
-
-    const ast = codegenReactiveFunction(reactiveFunction);
-    const generated = generate(
-      ast,
-      {
-        sourceMaps: true,
-        sourceFileName: "input.js",
-      },
-      source
-    );
-    const sourceMapUrl = getSourceMapUrl(
-      generated.code,
-      JSON.stringify(generated.map)
-    );
-    const codegenOutput = prettier.format(generated.code, {
-      semi: true,
-      parser: "babel",
-      plugins: [prettierParserBabel],
+    const tabs = new Map<string, React.ReactNode>();
+    const generator = HIR.run(func);
+    let ast;
+    while (true) {
+      const next = generator.next();
+      if (next.done) {
+        ast = next.value;
+        break;
+      }
+      const result = next.value;
+      switch (result.kind) {
+        case "ast": {
+          const { code } = codegen(result.value, source);
+          tabs.set(
+            result.name,
+            <TextTabContent output={code}></TextTabContent>
+          );
+          break;
+        }
+        case "hir": {
+          const text = printHIR(result.value.body);
+          tabs.set(
+            result.name,
+            <TextTabContent output={text}></TextTabContent>
+          );
+          break;
+        }
+        case "reactive": {
+          const text = printReactiveFunction(result.value);
+          tabs.set(
+            result.name,
+            <TextTabContent output={text}></TextTabContent>
+          );
+          break;
+        }
+        default: {
+          throw new Error("Unexpected result kind");
+        }
+      }
+    }
+    // Ensure that JS and the JS source map come first
+    const reorderedTabs = new Map();
+    const { code, sourceMapUrl } = codegen(ast, source);
+    reorderedTabs.set("JS", <TextTabContent output={code}></TextTabContent>);
+    if (sourceMapUrl) {
+      reorderedTabs.set(
+        "SourceMap",
+        <>
+          <iframe
+            src={sourceMapUrl}
+            className="w-full h-96"
+            title="Generated Code"
+          />
+        </>
+      );
+    }
+    tabs.forEach((tab, name) => {
+      reorderedTabs.set(name, tab);
     });
-
-    return {
-      hirOutput,
-      ssaOutput,
-      eliminateRedundantPhiOutput,
-      inferTypesOutput,
-      inferReferenceEffectsOutput,
-      inferMutableRangesOutput,
-      inferReactiveScopeVariablesOutput,
-      inferReactiveScopesOutput,
-      reactiveFunctionOutput,
-      leaveSSAOutput,
-      codegenOutput,
-      sourceMapUrl,
-    };
+    return reorderedTabs;
   } catch (e: any) {
     return e.toString();
   }
 }
 
+function codegen(
+  ast: any,
+  source: string
+): { code: any; sourceMapUrl: string | null } {
+  const generated = generate(
+    ast,
+    { sourceMaps: true, sourceFileName: "input.js" },
+    source
+  );
+  const sourceMapUrl = getSourceMapUrl(
+    generated.code,
+    JSON.stringify(generated.map)
+  );
+  const codegenOutput = prettier.format(generated.code, {
+    semi: true,
+    parser: "babel",
+    plugins: [prettierParserBabel],
+  });
+  return { code: codegenOutput, sourceMapUrl };
+}
+
 // TODO(gsn: Update diagnostics ƒrom HIR output
-function Output({ store, setTabsOpen, tabsOpen }: Props) {
+function Output({ store }: Props) {
+  const [tabsOpen, setTabsOpen] = useState<Set<string>>(() => new Set());
   const compilerOutput = useMemo(() => compile(store.source), [store.source]);
 
   if (typeof compilerOutput === "string") {
@@ -158,66 +135,7 @@ function Output({ store, setTabsOpen, tabsOpen }: Props) {
       defaultTab="HIR"
       setTabsOpen={setTabsOpen}
       tabsOpen={tabsOpen}
-      tabs={{
-        JS: <TextTabContent output={compilerOutput.codegenOutput} />,
-        HIR: (
-          <TextTabContent output={compilerOutput.hirOutput}></TextTabContent>
-        ),
-        SSA: (
-          <TextTabContent output={compilerOutput.ssaOutput}></TextTabContent>
-        ),
-        EliminateRedundantPhi: (
-          <TextTabContent
-            output={compilerOutput.eliminateRedundantPhiOutput}
-          ></TextTabContent>
-        ),
-        InferTypes: (
-          <TextTabContent
-            output={compilerOutput.inferTypesOutput}
-          ></TextTabContent>
-        ),
-        InferReferenceEffects: (
-          <TextTabContent
-            output={compilerOutput.inferReferenceEffectsOutput}
-          ></TextTabContent>
-        ),
-        InferMutableRanges: (
-          <TextTabContent
-            output={compilerOutput.inferMutableRangesOutput}
-          ></TextTabContent>
-        ),
-        LeaveSSA: (
-          <TextTabContent
-            output={compilerOutput.leaveSSAOutput}
-          ></TextTabContent>
-        ),
-        InferReactiveScopeVariables: (
-          <TextTabContent
-            output={compilerOutput.inferReactiveScopeVariablesOutput}
-          ></TextTabContent>
-        ),
-        InferReactiveScopes: (
-          <TextTabContent
-            output={compilerOutput.inferReactiveScopesOutput}
-          ></TextTabContent>
-        ),
-        ReactiveFunctions: (
-          <TextTabContent
-            output={compilerOutput.reactiveFunctionOutput}
-          ></TextTabContent>
-        ),
-        SourceMap: (
-          <>
-            {compilerOutput.sourceMapUrl && (
-              <iframe
-                src={compilerOutput.sourceMapUrl}
-                className="w-full h-96"
-                title="Generated Code"
-              />
-            )}
-          </>
-        ),
-      }}
+      tabs={compilerOutput}
     />
   );
 }
diff --git a/compiler/forget/packages/playground/components/Editor/index.tsx b/compiler/forget/packages/playground/components/Editor/index.tsx
index a9923ac92e..a6d826184f 100644
--- a/compiler/forget/packages/playground/components/Editor/index.tsx
+++ b/compiler/forget/packages/playground/components/Editor/index.tsx
@@ -8,7 +8,7 @@
 import clsx from "clsx";
 import invariant from "invariant";
 import { useSnackbar } from "notistack";
-import { useDeferredValue, useState } from "react";
+import { useDeferredValue } from "react";
 import { useMountEffect } from "../../hooks";
 import { defaultStore } from "../../lib/defaultStore";
 import {
@@ -19,7 +19,6 @@ import {
   type Store,
 } from "../../lib/stores";
 import { useStore, useStoreDispatch } from "../StoreContext";
-import { TabTypes } from "../TabbedWindow";
 import Input from "./Input";
 import Output from "./Output";
 
@@ -28,7 +27,6 @@ export default function Editor() {
   const deferredStore = useDeferredValue(store);
   const dispatchStore = useStoreDispatch();
   const { enqueueSnackbar } = useSnackbar();
-  const [tabsOpen, setTabsOpen] = useState<Map<TabTypes, boolean>>(new Map());
 
   useMountEffect(() => {
     let mountStore: Store;
@@ -62,11 +60,7 @@ export default function Editor() {
           <Input />
         </div>
         <div className={clsx("flex sm:flex")}>
-          <Output
-            tabsOpen={tabsOpen}
-            setTabsOpen={setTabsOpen}
-            store={deferredStore}
-          />
+          <Output store={deferredStore} />
         </div>
       </div>
     </>
diff --git a/compiler/forget/packages/playground/components/TabbedWindow.tsx b/compiler/forget/packages/playground/components/TabbedWindow.tsx
index d284d2d129..dadf5c281d 100644
--- a/compiler/forget/packages/playground/components/TabbedWindow.tsx
+++ b/compiler/forget/packages/playground/components/TabbedWindow.tsx
@@ -7,35 +7,21 @@
 
 import React, { useCallback } from "react";
 
-export type TabTypes =
-  | "HIR"
-  | "SSA"
-  | "EliminateRedundantPhi"
-  | "InferTypes"
-  | "InferReferenceEffects"
-  | "InferMutableRanges"
-  | "InferReactiveScopeVariables"
-  | "InferReactiveScopes"
-  | "ReactiveFunctions"
-  | "LeaveSSA"
-  | "JS"
-  | "SourceMap";
-
-type TabsRecord = Record<TabTypes, React.ReactNode>;
+type TabsRecord = Map<string, React.ReactNode>;
 
 export default function TabbedWindow(props: {
   defaultTab: string | null;
   tabs: TabsRecord;
-  tabsOpen: Map<TabTypes, boolean>;
-  setTabsOpen: (newTab: Map<TabTypes, boolean>) => void;
+  tabsOpen: Set<string>;
+  setTabsOpen: (newTab: Set<string>) => void;
 }): React.ReactElement {
   return (
     <div className="flex flex-row h-full">
-      {Object.keys(props.tabs).map((name, index, all) => {
+      {Array.from(props.tabs.keys()).map((name) => {
         return (
           <TabbedWindowItem
-            name={name as TabTypes}
-            key={index}
+            name={name}
+            key={name}
             tabs={props.tabs}
             tabsOpen={props.tabsOpen}
             setTabsOpen={props.setTabsOpen}
@@ -52,16 +38,20 @@ function TabbedWindowItem({
   tabsOpen,
   setTabsOpen,
 }: {
-  name: TabTypes;
+  name: string;
   tabs: TabsRecord;
-  tabsOpen: Map<TabTypes, boolean>;
-  setTabsOpen: (newTab: Map<TabTypes, boolean>) => void;
+  tabsOpen: Set<string>;
+  setTabsOpen: (newTab: Set<string>) => void;
 }): React.ReactElement {
-  const isShow = tabsOpen.get(name) ?? false;
+  const isShow = tabsOpen.has(name);
 
   const toggleTabs = useCallback(() => {
-    const nextState = new Map(tabsOpen);
-    nextState.set(name, !isShow);
+    const nextState = new Set(tabsOpen);
+    if (nextState.has(name)) {
+      nextState.delete(name);
+    } else {
+      nextState.add(name);
+    }
     setTabsOpen(nextState);
   }, [tabsOpen, name, isShow, setTabsOpen]);
 
@@ -75,7 +65,7 @@ function TabbedWindowItem({
           >
             - {name}
           </h2>
-          {tabs[name]}
+          {tabs.get(name) ?? <div>No output for {name}</div>}
         </div>
       ) : (
         <div className="relative items-center h-full px-4 py-8 align-middle border-r border-grey-200">