Split out tree for better UX

Author: kddnewton

.gitignore

@@ -1,9 +1,15 @@
-/docs/index.js*
+# Ignore everything in the output docs directory controlled by the build system.
+/docs/
+!/docs/index.css
+!/docs/index.html
+
+# Ignore everything to do with building the app.wasm file.
 /head-wasm32-unknown-wasi-full-js/
 /lib/
-/node_modules/
 /ruby.wasm
 /src/app.wasm
-/vendor/
 /wasi-vfs
+
+# Ignore all of the node dependencies and related files.
+/node_modules/
 /yarn-error.log

src/Editor.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+type EditorProps = {
+  cols: number,
+  value: string,
+  onChange: (value: string) => void
+};
+
+const Editor: React.FC<EditorProps> = ({ cols, value, onChange }) => {
+  const onSourceChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    onChange(event.target.value);
+  };
+
+  return <textarea cols={cols} value={value} onChange={onSourceChange} />;
+};
+
+export default Editor;

src/Tree.tsx

@@ -0,0 +1,39 @@
+import React, { useEffect, useMemo, useState } from "react";
+
+import createRuby, { Ruby } from "./createRuby";
+
+function prettyPrint(ruby: Ruby, value: string) {
+  try {
+    return ruby.prettyPrint(value);
+  } catch (error) {
+    // For now, just ignoring the error. Eventually I'd like to make this mark
+    // an error state on the editor to give feedback to the user.
+  }
+}
+
+type TreeProps = {
+  cols: number,
+  value: string
+};
+
+const Tree: React.FC<TreeProps> = ({ cols, value }) => {
+  const [ruby, setRuby] = useState<Ruby>(null);
+  const [output, setOutput] = useState<string>("");
+
+  useEffect(() => {
+    createRuby().then((ruby) => {
+      setRuby(ruby);
+      setOutput(prettyPrint(ruby, value));
+    });
+  }, []);
+
+  useMemo(() => {
+    if (ruby) {
+      setOutput(prettyPrint(ruby, value));
+    }
+  }, [ruby, value]);
+
+  return <textarea cols={cols} value={output} readOnly />;
+};
+
+export default Tree;

src/index.tsx

@@ -1,79 +1,19 @@
-import React, { useEffect, useReducer } from "react";
+import React, { Suspense, useState } from "react";
 import { createRoot } from "react-dom/client";
 
-import createRuby, { Ruby } from "./createRuby";
-
-type State = {
-  state: "initializing" | "ready" | "evaluating",
-  source: string,
-  output: string,
-  ruby: null | Ruby
-};
-
-const initialState: State = {
-  state: "initializing",
-  source: "1 + 2",
-  output: "",
-  ruby: null
-};
-
-type Action = (
-  | { type: "changeSource", source: string }
-  | { type: "createRuby", ruby: Ruby, output: string }
-  | { type: "evaluateSource", output: string }
-  | { type: "syntaxErrorSource" }
-);
-
-function reducer(state: State, action: Action): State {
-  switch (action.type) {
-    case "changeSource":
-      return { ...state, state: "evaluating", source: action.source };
-    case "createRuby":
-      return { ...state, state: "ready", ruby: action.ruby, output: action.output };
-    case "evaluateSource":
-      return { ...state, state: "ready", output: action.output };
-    case "syntaxErrorSource":
-      return { ...state, state: "ready" };
-  }
-}
+import Editor from "./Editor";
+const Tree = React.lazy(() => import("./Tree"));
 
 const App: React.FC = () => {
-  const [state, dispatch] = useReducer(reducer, initialState);
-
-  const onSourceChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    dispatch({ type: "changeSource", source: event.target.value });
-  };
-
-  useEffect(() => {
-    switch (state.state) {
-      case "initializing":
-        createRuby().then((ruby) => {
-          dispatch({ type: "createRuby", ruby, output: ruby.prettyPrint(state.source) });
-        });
-        return;
-      case "evaluating":
-        try {
-          dispatch({ type: "evaluateSource", output: state.ruby.prettyPrint(state.source) });
-        } catch (error) {
-          dispatch({ type: "syntaxErrorSource" });
-        }
-        return;
-    }
-  }, [state.state]);
+  const [source, setSource] = useState<string>("1 + 2");
+  const cols = 80;
 
   return (
     <>
-      <textarea
-        cols={80}
-        value={state.source}
-        onChange={onSourceChange}
-        readOnly={state.state !== "ready"}
-      />
-      <textarea
-        cols={80}
-        value={state.output}
-        readOnly
-      />
+      <Editor cols={cols} value={source} onChange={setSource} />
+      <Suspense fallback={<textarea cols={cols} readOnly />}>
+        <Tree cols={cols} value={source} />
+      </Suspense>
     </>
   );
 };

tsconfig.json

@@ -4,7 +4,7 @@
     "allowSyntheticDefaultImports": true,
     "downlevelIteration": true,
     "jsx": "react",
-    "module": "es6",
+    "module": "es2020",
     "moduleResolution": "node",
     "noImplicitAny": true,
     "target": "es5"