Simplify by removing react

kddnewton · kddnewton · commit f5bed1d1c48a · 2022-04-27T15:19:00.000-04:00
diff --git a/bin/build b/bin/build
@@ -7,7 +7,7 @@ const wasmPlugin = require("./wasmPlugin");
 
 esbuild.build({
   bundle: true,
-  entryPoints: [path.join(__dirname, "../src/index.tsx")],
+  entryPoints: [path.join(__dirname, "../src/index.ts")],
   format: "esm",
   minify: true,
   outdir: path.join(__dirname, "../docs"),
diff --git a/bin/serve b/bin/serve
@@ -11,7 +11,7 @@ const serveOptions = {
 
 const buildOptions = {
   bundle: true,
-  entryPoints: [path.join(__dirname, "../src/index.tsx")],
+  entryPoints: [path.join(__dirname, "../src/index.ts")],
   format: "esm",
   outdir: path.join(__dirname, "../docs"),
   plugins: [wasmPlugin],
diff --git a/docs/index.html b/docs/index.html
@@ -7,8 +7,16 @@
     <link rel="stylesheet" type="text/css" href="index.css">
   </head>
   <body>
-    <noscript>JavaScript must be enabled in order to run this application.</noscript>
-    <div id="root"></div>
+    <main>
+      <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" id="format">Format</button></span>
+      </nav>
+      <textarea id="editor"></textarea>
+      <textarea id="tree" disabled readonly>Loading...</textarea>
+    </main>
     <script type="module" src="index.js"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -9,16 +9,12 @@
     "@wasmer/wasmfs": "^0.12.0",
     "codemirror": "^5.65.3",
     "path-browserify": "^1.0.1",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
     "ruby-head-wasm-wasi": "^0.3.0"
   },
   "devDependencies": {
     "@types/codemirror": "^5.60.5",
     "@types/node": "^17.0.27",
     "@types/path-browserify": "^1.0.0",
-    "@types/react": "^18.0.6",
-    "@types/react-dom": "^18.0.2",
     "esbuild": "^0.14.38"
   }
 }
diff --git a/src/CodeMirror.ts b/src/CodeMirror.ts
@@ -0,0 +1,7 @@
+import CodeMirror from "codemirror";
+
+import "codemirror/mode/ruby/ruby";
+import "codemirror/lib/codemirror.css";
+import "codemirror/theme/xq-light.css";
+
+export default CodeMirror;
diff --git a/src/Editor.tsx b/src/Editor.tsx
diff --git a/src/Tree.tsx b/src/Tree.tsx
diff --git a/src/index.css b/src/index.css
@@ -5,7 +5,7 @@ html, body {
   margin: 0;
 }
 
-#root {
+main {
   display: grid;
   height: 100%;
   grid-template-columns: repeat(2, 1fr);
diff --git a/src/index.ts b/src/index.ts
@@ -0,0 +1,77 @@
+import "./index.css";
+
+import type { Editor } from "codemirror";
+import type { Ruby } from "./createRuby";
+import initialSource from "./initialSource";
+
+let editorElement = document.getElementById("editor") as HTMLTextAreaElement;
+const formatElement = document.getElementById("format");
+const treeElement = document.getElementById("tree") as HTMLTextAreaElement;
+
+// First, set the initial value of the editor element. It's just going to be a
+// textarea until we've loaded the editor chunk.
+editorElement.value = initialSource;
+
+let editor: Editor = null;
+let ruby: Ruby = null;
+
+type SourceChangedEvent = {
+  source: string
+};;
+
+// This function is called to set up the event handlers once both the editor and
+// the ruby chunk have been loaded.
+function synchronize() {
+  // We're going to handle updates to the source through a custom event. This
+  // turns out to be faster than handling the change event directly on the
+  // editor since it blocks updates to the UI until the event handled returns.
+  document.body.addEventListener("source-changed", (event: CustomEvent<SourceChangedEvent>) => {
+    try {
+      treeElement.value = ruby.prettyPrint(event.detail.source);
+    } 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.
+    }
+  });
+
+  // Attach to the editor and dispatch custom source-changed events whenever the
+  // value is updated in the editor.
+  editor.on("change", () => {
+    document.body.dispatchEvent(new CustomEvent<SourceChangedEvent>("source-changed", {
+      detail: { source: editor.getDoc().getValue() }
+    }));
+  });
+
+  // Attach to the format button to update the source whenever the button is
+  // clicked.
+  formatElement.addEventListener("click", () => {
+    editor.getDoc().setValue(ruby.format(editor.getValue()));
+  });
+
+  // Finally, un-disable the tree element.
+  treeElement.disabled = false;
+}
+
+import("./CodeMirror").then(({ default: CodeMirror }) => {
+  const newEditorElement = document.createElement("div");
+  editorElement.replaceWith(newEditorElement);
+
+  editor = CodeMirror(newEditorElement, {
+    lineNumbers: true,
+    mode: "ruby",
+    theme: "xq-light",
+    value: editorElement.value
+  });
+
+  if (ruby) {
+    synchronize();
+  }
+});
+
+import("./createRuby").then(({ default: createRuby }) => createRuby()).then((created) => {
+  ruby = created;
+
+  if (editor) {
+    synchronize();
+  }
+});
diff --git a/src/index.tsx b/src/index.tsx
diff --git a/tsconfig.json b/tsconfig.json
@@ -9,5 +9,5 @@
     "noImplicitAny": true,
     "target": "es5"
   },
-  "files": ["src/index.tsx"]
+  "files": ["src/index.ts"]
 }
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@ html, body {`
`5`	`5`	`margin: 0;`
`6`	`6`	`}`
`7`	`7`
`8`		`-#root {`
	`8`	`+main {`
`9`	`9`	`display: grid;`
`10`	`10`	`height: 100%;`
`11`	`11`	`grid-template-columns: repeat(2, 1fr);`
Original file line number	Diff line number	Diff line change
`@@ -9,5 +9,5 @@`
`9`	`9`	`"noImplicitAny": true,`
`10`	`10`	`"target": "es5"`
`11`	`11`	`},`
`12`		`- "files": ["src/index.tsx"]`
	`12`	`+ "files": ["src/index.ts"]`
`13`	`13`	`}`