Add support to SyntaxTree 6 and Mermaid.js

Gemfile

@@ -4,4 +4,4 @@ source "https://rubygems.org"
 
 gem "bundler"
 gem "rake"
-gem "syntax_tree"
+gem "syntax_tree", "~> 6.0"

Gemfile.lock

@@ -1,8 +1,10 @@
 GEM
   remote: https://rubygems.org/
   specs:
+    prettier_print (1.2.0)
     rake (13.0.6)
-    syntax_tree (2.3.1)
+    syntax_tree (6.0.0)
+      prettier_print (>= 1.2.0)
 
 PLATFORMS
   ruby
@@ -12,7 +14,7 @@ PLATFORMS
 DEPENDENCIES
   bundler
   rake
-  syntax_tree
+  syntax_tree (~> 6.0)
 
 BUNDLED WITH
    2.3.6

README.md

@@ -12,6 +12,8 @@ To run the application locally, you should:
 * `yarn serve` to start the local development server.
 * Open a browser at `localhost:8000`.
 
+_In order to build package using linux you should set the env CI=1 along with the rake execution. `CI=1 bundle exec rake`_
+
 ## Contributing
 
 Bug reports and pull requests are welcome on GitHub at https://github.com/ruby-syntax-tree/syntax_tree.

Rakefile

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 file "wasi-vfs" do
-  version = "0.1.1"
+  version = "0.2.0"
   filename =
     if ENV["CI"]
       "wasi-vfs-cli-x86_64-unknown-linux-gnu.zip"
@@ -19,7 +19,7 @@ file "head-wasm32-unknown-wasi-full-js" do
   version = JSON.parse(File.read("package.json"))["dependencies"]["ruby-head-wasm-wasi"][1..]
   filename = "ruby-head-wasm32-unknown-wasi-full-js.tar.gz"
 
-  `curl -LO https://github.com/ruby/ruby.wasm/releases/download/ruby-head-wasm-wasi-#{version}/#{filename}`
+  `curl -LO https://github.com/ruby/ruby.wasm/releases/download/ruby-head-wasm-wasi-#{version}/ruby-head-wasm32-unknown-wasi-full-js.tar.gz`
   `tar xfz #{filename}`
   rm filename
 end
@@ -30,7 +30,9 @@ end
 
 file "src/app.wasm" => ["Gemfile.lock", "wasi-vfs", "ruby.wasm"] do
   require "bundler/setup"
-  cp_r $:.find { _1.include?("syntax_tree") }, "lib"
+
+  cp_r $:.find { _1.include?("syntax_tree") }, "."
+  cp_r $:.find { _1.include?("prettier_print") }, "."
 
   `./wasi-vfs pack ruby.wasm --mapdir /lib::./lib --mapdir /usr::./head-wasm32-unknown-wasi-full-js/usr -o src/app.wasm`
   rm_rf "lib"

docs/index.html

@@ -16,70 +16,22 @@ <h1>Syntax Tree</h1>
         <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>
+          <select>
+            <option value="prettyPrint">AST</option>
+            <option value="disasm">ISEQ</option>
+            <option value="mermaid">GRAPH</option>
+          </select>
         </div>
       </nav>
-      <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="editor">
+SyntaxTree::Binary[
+  left: SyntaxTree::Int[value: "1"],
+  operator: :+,
+  right: SyntaxTree::Int[value: "1"]
+]
+      </textarea>
       <textarea id="output" disabled readonly>Loading...</textarea>
+      <div id="graph-container" class="graph-container"></div>
     </main>
     <script type="module" src="index.js"></script>
   </body>

package.json

@@ -8,6 +8,7 @@
     "@monaco-editor/loader": "^1.3.2",
     "@wasmer/wasi": "^0.12.0",
     "@wasmer/wasmfs": "^0.12.0",
+    "mermaid": "^9.4.0",
     "path-browserify": "^1.0.1",
     "ruby-head-wasm-wasi": "^0.3.0"
   },

src/createRuby.ts

@@ -66,10 +66,13 @@ export default async function createRuby() {
   // files to make it work. I'm not sure why I need to explicitly require
   // did_you_mean here, but it doesn't work without it.
   ruby.eval(`
+    require "rubygems"
     require "did_you_mean"
     require "json"
+    require "pp"
     $:.unshift("/lib")
     require_relative "/lib/syntax_tree"
+    require_relative "/lib/prettier_print"
   `);
 
   return {
@@ -80,6 +83,15 @@ export default async function createRuby() {
 
       return ruby.eval(rubySource).toString();
     },
+    mermaid(source: string) {
+      const jsonSource = JSON.stringify(JSON.stringify(source));
+      const rubySource = `
+        source = JSON.parse(${jsonSource})
+        SyntaxTree.parse(source).to_mermaid
+      `;
+
+      return ruby.eval(rubySource).toString();
+    },
     // A function that calls through to the SyntaxTree.format function to get
     // the pretty-printed version of the source.
     format(source: string) {
@@ -92,12 +104,7 @@ export default async function createRuby() {
     // the syntax tree.
     prettyPrint(source: string) {
       const jsonSource = JSON.stringify(JSON.stringify(source));
-      const rubySource = `
-        PP.format([], 80) do |q|
-          source = JSON.parse(${jsonSource})
-          SyntaxTree.parse(source).pretty_print(q)
-        end.join
-      `;
+      const rubySource = `PP.pp(SyntaxTree.parse(JSON.parse(${jsonSource})), +"", 80)`;
 
       return ruby.eval(rubySource).toString();
     }

src/index.css

@@ -48,3 +48,13 @@ textarea {
   resize: none;
   white-space: pre;
 }
+
+select {
+  min-width: 15em;
+}
+
+.graph-container {
+  text-align: center;
+  overflow-y: scroll;
+  overflow-x: scroll;
+}

src/index.ts

@@ -1,7 +1,7 @@
 import "./index.css";
 
 type SourceChangedEvent = { source: string };
-type DisplayChangedEvent = { kind: "prettyPrint" | "disasm" };
+type DisplayChangedEvent = { kind: "prettyPrint" | "disasm" | "mermaid" };
 
 Promise.all([
   // We're going to load the editor asynchronously so that we can get to
@@ -21,11 +21,12 @@ Promise.all([
       }
     });
   }),
+  import("./mermaid-js"),
   // 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]) => {
+]).then(([editor, mermaidjs, ruby]) => {
   // 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;
@@ -41,7 +42,20 @@ Promise.all([
     displayFunction = ruby[event.detail.kind];
 
     try {
-      output.value = displayFunction(editor.getValue());
+      let source = displayFunction(editor.getValue());
+
+      if (event.detail.kind === 'mermaid') {
+        mermaidjs.render(() => {
+          output.setAttribute("style", "display: none;");
+
+          return source;
+        });
+      } else {
+        output.value = source;
+        output.setAttribute("style", "");
+
+        mermaidjs.reset();
+      }
     } 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.
@@ -52,30 +66,20 @@ Promise.all([
   // 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"] }
-      }));
-    });
+  toggles.querySelector("select").addEventListener('change', (e) => {
+    output.dispatchEvent(new CustomEvent<DisplayChangedEvent>("display-changed", {
+      detail: { kind: e.target.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.
   output.addEventListener("source-changed", (event: CustomEvent<SourceChangedEvent>) => {
-    try {
-      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.
-    }
+    // We may want to add some throttle here to avoid to much rerendering in our Graph
+    output.dispatchEvent(new CustomEvent<DisplayChangedEvent>("display-changed", {
+      detail: { kind: toggles.querySelector('select').value as DisplayChangedEvent["kind"] }
+    }));
   });
 
   // Attach to the editor and dispatch custom source-changed events whenever the

src/mermaid-js.ts

@@ -0,0 +1,24 @@
+import mermaidjs from "mermaid";
+
+const getCleanContainer = () => {
+  const div = document.querySelector("#graph-container");
+
+  div.innerHTML = '';
+
+  return div;
+}
+
+const render = (fn: Function) => {
+  let container = getCleanContainer();
+
+  container.setAttribute("style", "display: block;");
+
+  mermaidjs.initialize({ startOnLoad: false });
+  mermaidjs.render('preparedScheme', fn(), (svg) => {
+    container.innerHTML = svg;
+  }, container);
+}
+
+const reset = () => getCleanContainer().setAttribute("style", "display: none;");
+
+export { render, reset };