inline initialSource

Author: kddnewton

docs/index.html

@@ -14,7 +14,65 @@ <h1>Syntax Tree</h1>
         <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="editor"># frozen_string_literal: true
+
+require "json"
+require "pp"
+require "prettyprint"
+require "ripper"
+require "stringio"
+
+require_relative "syntax_tree/formatter"
+require_relative "syntax_tree/node"
+require_relative "syntax_tree/parser"
+require_relative "syntax_tree/prettyprint"
+require_relative "syntax_tree/version"
+require_relative "syntax_tree/visitor"
+require_relative "syntax_tree/visitor/json_visitor"
+require_relative "syntax_tree/visitor/pretty_print_visitor"
+
+module SyntaxTree
+  # This holds references to objects that respond to both #parse and #format
+  # so that we can use them in the CLI.
+  HANDLERS = {}
+  HANDLERS.default = SyntaxTree
+
+  # This is a hook provided so that plugins can register themselves as the
+  # handler for a particular file type.
+  def self.register_handler(extension, handler)
+    HANDLERS[extension] = handler
+  end
+
+  # Parses the given source and returns the syntax tree.
+  def self.parse(source)
+    parser = Parser.new(source)
+    response = parser.parse
+    response unless parser.error?
+  end
+
+  # Parses the given source and returns the formatted source.
+  def self.format(source)
+    formatter = Formatter.new(source, [])
+    parse(source).format(formatter)
+
+    formatter.flush
+    formatter.output.join
+  end
+
+  # Returns the source from the given filepath taking into account any potential
+  # magic encoding comments.
+  def self.read(filepath)
+    encoding =
+      File.open(filepath, "r") do |file|
+        header = file.readline
+        header += file.readline if header.start_with?("#!")
+        Ripper.new(header).tap(&:parse).encoding
+      end
+
+    File.read(filepath, encoding: encoding)
+  end
+end
+</textarea>
       <textarea id="tree" disabled readonly>Loading...</textarea>
     </main>
     <script type="module" src="index.js"></script>

src/index.ts

@@ -1,33 +1,38 @@
 import "./index.css";
 
-import type { Editor } from "codemirror";
-import type { Ruby } from "./createRuby";
-import initialSource from "./initialSource";
+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
+  // this chunk is loaded.
+  import("./CodeMirror").then(({ default: CodeMirror }) => {
+    const editor = document.getElementById("editor") as HTMLTextAreaElement;
+    const newEditor = document.createElement("div");
+    editor.replaceWith(newEditor);
+  
+    return CodeMirror(newEditor, {
+      lineNumbers: true,
+      mode: "ruby",
+      theme: "xq-light",
+      value: editor.value
+    });
+  }),
+  // We're going to load the Ruby VM chunk asynchronously because it is pretty
+  // dang huge (> 40Mb). In the meantime the textarea that is holding the place
+  // 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;
 
-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>) => {
+  tree.addEventListener("source-changed", (event: CustomEvent<{ source: string }>) => {
     try {
-      treeElement.value = ruby.prettyPrint(event.detail.source);
+      tree.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.
@@ -37,41 +42,14 @@ function synchronize() {
   // 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", {
+    tree.dispatchEvent(new CustomEvent<{ source: string }>("source-changed", {
       detail: { source: editor.getDoc().getValue() }
     }));
   });
 
   // Attach to the format button to update the source whenever the button is
   // clicked.
-  formatElement.addEventListener("click", () => {
+  document.getElementById("format").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();
-  }
 });