Add some toggles

Author: kddnewton

docs/index.html

@@ -12,7 +12,12 @@
         <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>
+        <span><button type="button" id="format" disabled>Format</button></span>
+
+        <div class="toggles">
+          <span><button type="button" value="prettyPrint" disabled>AST</button></span>
+          <span><button type="button" value="disasm" disabled>ISEQ</button></span>
+        </div>
       </nav>
       <textarea id="editor"># frozen_string_literal: true
 
@@ -73,7 +78,7 @@ <h1>Syntax Tree</h1>
   end
 end
 </textarea>
-      <textarea id="tree" disabled readonly>Loading...</textarea>
+      <textarea id="output" disabled readonly>Loading...</textarea>
     </main>
     <script type="module" src="index.js"></script>
   </body>

src/index.css

@@ -36,6 +36,11 @@ nav h1, nav a, nav span {
   padding: 0 1em;
 }
 
+.toggles {
+  margin-left: auto;
+  padding-right: 1em;
+}
+
 textarea {
   font-size: 0.9em;
   overflow-wrap: normal;

src/index.ts

@@ -1,5 +1,8 @@
 import "./index.css";
 
+type SourceChangedEvent = { source: string };
+type DisplayChangedEvent = { kind: "prettyPrint" | "disasm" };
+
 Promise.all([
   // We're going to load the editor asynchronously so that we can get to
   // first-paint faster. This works out nicely since we can use a textarea until
@@ -21,18 +24,52 @@ Promise.all([
   // of the actual functional one is just going to display "Loading...".
   import("./createRuby").then(({ default: createRuby }) => createRuby())
 ]).then(([editor, ruby]) => {
-  // First, grab a reference to the tree element so that we can update it. Then,
-  // set it initially to the tree represented by the source already there.
-  const tree = document.getElementById("tree") as HTMLTextAreaElement;
-  tree.value = ruby.prettyPrint(editor.getDoc().getValue());
-  tree.disabled = false;
+  // First, grab a reference to the output element so that we can update it.
+  // Then, set it initially to the output represented by the source.
+  const output = document.getElementById("output") as HTMLTextAreaElement;
+  output.value = ruby.prettyPrint(editor.getDoc().getValue());
+  output.disabled = false;
+
+  // This is the function that will be used to display the output from the
+  // source.
+  let displayFunction = ruby.prettyPrint;
+
+  // Handle a custom event here for if the display option changed.
+  output.addEventListener("display-changed", (event: CustomEvent<DisplayChangedEvent>) => {
+    displayFunction = ruby[event.detail.kind];
+
+    try {
+      output.value = displayFunction(editor.getDoc().getValue());
+    } 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.
+    }
+  });
+
+  // Hook into both the output toggles to make sure they send out the correct
+  // event information.
+  const toggles = document.getElementsByClassName("toggles")[0];
+
+  toggles.querySelectorAll("button").forEach((button) => {
+    button.disabled = (button.value === "prettyPrint");
+
+    button.addEventListener("click", () => {
+      toggles.querySelectorAll("button").forEach((toggle) => {
+        toggle.disabled = (button.value === toggle.value);
+      });
+
+      output.dispatchEvent(new CustomEvent<DisplayChangedEvent>("display-changed", {
+        detail: { kind: button.value as DisplayChangedEvent["kind"] }
+      }));
+    });
+  });
 
   // 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.
-  tree.addEventListener("source-changed", (event: CustomEvent<{ source: string }>) => {
+  output.addEventListener("source-changed", (event: CustomEvent<SourceChangedEvent>) => {
     try {
-      tree.value = ruby.prettyPrint(event.detail.source);
+      output.value = displayFunction(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.
@@ -42,14 +79,17 @@ Promise.all([
   // Attach to the editor and dispatch custom source-changed events whenever the
   // value is updated in the editor.
   editor.on("change", () => {
-    tree.dispatchEvent(new CustomEvent<{ source: string }>("source-changed", {
+    output.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.
-  document.getElementById("format").addEventListener("click", () => {
+  const format = document.getElementById("format");
+  format.disabled = false;
+
+  format.addEventListener("click", () => {
     editor.getDoc().setValue(ruby.format(editor.getValue()));
   });
 });