Move refs up

Author: kddnewton

src/Editor.tsx

@@ -1,25 +1,25 @@
 import React, { useEffect, useRef } from "react";
-import CodeMirror from "codemirror";
+import CodeMirror, { Editor } from "codemirror";
 
 import "codemirror/mode/ruby/ruby";
 import "codemirror/lib/codemirror.css";
 import "codemirror/theme/xq-light.css";
 
 type EditorProps = {
-  value: string,
+  editorRef: React.MutableRefObject<Editor>,
+  initialValue: string,
   onChange: (value: string) => void
 };
 
-const Editor: React.FC<EditorProps> = ({ value, onChange }) => {
+const Editor: React.FC<EditorProps> = ({ editorRef, initialValue, onChange }) => {
   const elementRef = useRef<HTMLDivElement>(null);
-  const editorRef = useRef<CodeMirror.Editor>(null);
 
   useEffect(() => {
     if (elementRef.current && !editorRef.current) {
       const editor = CodeMirror(elementRef.current, {
         lineNumbers: true,
         mode: "ruby",
-        value,
+        value: initialValue,
         theme: "xq-light"
       });
 

src/Tree.tsx

@@ -2,17 +2,6 @@ import React, { useEffect, useState } from "react";
 
 import createRuby, { Ruby } from "./createRuby";
 
-// Create a singleton since we don't actually want there to be multiple virtual
-// machines running even if there are multiple Tree components.
-let ruby: Ruby = {
-  format(source) {
-    return source;
-  },
-  prettyPrint(source) {
-    return "Loading...";
-  }
-};
-
 // Track a state that represents where the ruby constant is at any given time.
 let rubyState: "initial" | "creating" | "ready" = "initial";
 
@@ -26,28 +15,29 @@ function prettyPrint(ruby: Ruby, value: string) {
 }
 
 type TreeProps = {
+  rubyRef: React.MutableRefObject<Ruby>,
   value: string
 };
 
-const Tree: React.FC<TreeProps> = ({ value }) => {
-  const [output, setOutput] = useState<string>(() => prettyPrint(ruby, value));
+const Tree: React.FC<TreeProps> = ({ rubyRef, value }) => {
+  const [output, setOutput] = useState<string>(() => prettyPrint(rubyRef.current, value));
 
   useEffect(() => {
     switch (rubyState) {
       case "initial":
         rubyState = "creating";
 
         createRuby().then((newRuby) => {
-          ruby = newRuby;
+          rubyRef.current = newRuby;
           rubyState = "ready";
-          setOutput(prettyPrint(ruby, value));
+          setOutput(prettyPrint(rubyRef.current, value));
         });
 
         break;
       case "creating":
         break;
       case "ready":
-        setOutput(prettyPrint(ruby, value));
+        setOutput(prettyPrint(rubyRef.current, value));
         break;
     }
   }, [value]);

src/index.css

@@ -32,10 +32,14 @@ nav a {
   vertical-align: middle;
 }
 
-nav h1, nav a {
+nav h1, nav a, nav span {
   padding: 0 1em;
 }
 
+textarea {
+  font-size: 0.9em;
+}
+
 .CodeMirror {
   height: 100% !important;
 }

src/index.tsx

@@ -1,15 +1,15 @@
-import React, { Suspense, useState } from "react";
+import React, { Suspense, useRef, useState } from "react";
 import { createRoot } from "react-dom/client";
+import type { Editor } from "codemirror";
 
+import type { Ruby } from "./createRuby";
 import initialSource from "./initialSource";
+
 const Editor = React.lazy(() => import("./Editor"));
 const Tree = React.lazy(() => import("./Tree"));
 
 import "./index.css";
 
-// type TreeProps = { value: string };
-// const Tree: React.FC<TreeProps> = () => <textarea disabled readOnly value="Hello, world!" />;
-
 type EditorFallbackProps = {
   value: string,
   onChange: (value: string) => void
@@ -30,18 +30,35 @@ const TreeFallback: React.FC = () => (
 const App: React.FC = () => {
   const [source, setSource] = useState<string>(initialSource);
 
+  const editorRef = useRef<Editor>(null);
+  const rubyRef = useRef<Ruby>({
+    format(source) {
+      return source;
+    },
+    prettyPrint(source) {
+      return "Loading...";
+    }
+  });
+
+  const onFormat = () => {
+    if (editorRef.current) {
+      editorRef.current.getDoc().setValue(rubyRef.current.format(source));
+    }
+  };
+
   return (
     <>
       <nav>
         <h1>Syntax Tree</h1>
         <a href="https://ruby-syntax-tree.github.io/syntax_tree">Docs</a>
         <a href="https://github.com/ruby-syntax-tree/syntax_tree">Source</a>
+        <span><button type="button" onClick={onFormat}>Format</button></span>
       </nav>
       <Suspense fallback={<EditorFallback value={source} onChange={setSource} />}>
-        <Editor value={source} onChange={setSource} />
+        <Editor editorRef={editorRef} initialValue={source} onChange={setSource} />
       </Suspense>
       <Suspense fallback={<TreeFallback />}>
-        <Tree value={source} />
+        <Tree rubyRef={rubyRef} value={source} />
       </Suspense>
     </>
   );