Update

.github/workflows/main.yml

@@ -1,11 +1,35 @@
-name: Github Pages
-on: [push]
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
 jobs:
-  build-and-deploy:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@master
+        uses: actions/checkout@v3
 
       - name: Setup Ruby
         uses: ruby/setup-ruby@v1
@@ -16,17 +40,23 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v2
         with:
-          node-version: 14.x
+          node-version: 18.x
           cache: yarn
 
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+
       - name: Package application
         run: |
           bundle exec rake
           yarn install --frozen-lockfile
           yarn build
 
-      - name: Deploy
-        uses: peaceiris/actions-gh-pages@v3
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
         with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./docs
+          path: './docs'
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

bin/build.js

@@ -0,0 +1,22 @@
+import esbuild from "esbuild";
+import url from "url";
+import wasmPlugin from "./wasmPlugin.js";
+
+const entryPoint = url.fileURLToPath(new URL("../src/index", import.meta.url));
+const outdir = url.fileURLToPath(new URL("../docs", import.meta.url));
+
+const { metafile } = await esbuild.build({
+  bundle: true,
+  entryPoints: [entryPoint],
+  format: "esm",
+  metafile: true,
+  minify: true,
+  outdir,
+  plugins: [wasmPlugin],
+  sourcemap: true,
+  splitting: true,
+  target: "es6"
+});
+
+const analysis = await esbuild.analyzeMetafile(metafile);
+console.log(analysis);

bin/serve.js

@@ -0,0 +1,20 @@
+import esbuild from "esbuild";
+import url from "url";
+import wasmPlugin from "./wasmPlugin.js";
+
+const entryPoint = url.fileURLToPath(new URL("../src/index", import.meta.url));
+const outdir = url.fileURLToPath(new URL("../docs", import.meta.url));
+
+const ctx = await esbuild.context({
+  bundle: true,
+  entryPoints: [entryPoint],
+  format: "esm",
+  outdir,
+  plugins: [wasmPlugin],
+  sourcemap: true,
+  splitting: true,
+  target: "esnext"
+});
+
+const { host, port } = await ctx.serve({ servedir: outdir });
+console.log(`Listening at ${host}:${port}`);

bin/wasmPlugin.js

@@ -1,9 +1,9 @@
-module.exports = {
+import path from 'node:path';
+import fs from 'node:fs';
+
+export default {
   name: 'wasm',
   setup(build) {
-    let path = require('path')
-    let fs = require('fs')
-
     // Resolve ".wasm" files to a path with a namespace
     build.onResolve({ filter: /\.wasm$/ }, args => {
       // If this is the import inside the stub module, import the
@@ -37,7 +37,7 @@ module.exports = {
     // binary itself is imported from a second virtual module.
     build.onLoad({ filter: /.*/, namespace: 'wasm-stub' }, async (args) => ({
       contents: `import wasm from ${JSON.stringify(args.path)}
-        export default (imports) => WebAssembly.instantiate(wasm, imports).then((result) => result.instance)`,
+        export default () => WebAssembly.compile(wasm)`,
     }))
 
     // Virtual modules in the "wasm-binary" namespace contain the
@@ -50,3 +50,4 @@ module.exports = {
     }))
   },
 }
+

docs/index.html

@@ -23,9 +23,12 @@ <h1>Syntax Tree</h1>
           </select>
         </div>
       </nav>
-      <textarea id="editor">1 + 2 * 3</textarea>
+      <textarea id="editor">def fibonacci(n)
+  (n == 0 || n == 1) ? n : fibonacci(n - 1) + fibonacci(n - 2)
+end
+</textarea>
       <textarea id="output" disabled readonly>Loading...</textarea>
-      <div id="graph-container" class="graph-container"></div>
+      <div id="graph" class="graph">Loading...</div>
     </main>
     <script type="module" src="index.js"></script>
   </body>

package.json

@@ -1,21 +1,17 @@
 {
   "license": "MIT",
+  "type": "module",
   "scripts": {
-    "build": "bin/build",
-    "serve": "bin/serve"
+    "build": "node bin/build.js",
+    "serve": "node bin/serve.js"
   },
   "dependencies": {
     "@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"
+    "mermaid": "^10.0.0",
+    "monaco-editor": "^0.36.0",
+    "ruby-head-wasm-wasi": "^0.6.0"
   },
   "devDependencies": {
-    "@types/node": "^17.0.33",
-    "@types/path-browserify": "^1.0.0",
-    "esbuild": "^0.14.39",
-    "monaco-editor": "^0.33.0"
+    "esbuild": "^0.17.10"
   }
 }

src/createRuby.js

@@ -0,0 +1,51 @@
+import { DefaultRubyVM } from "ruby-head-wasm-wasi/dist/browser.esm";
+import app from "./app.wasm";
+
+export default async function createRuby() {
+  const { vm } = await DefaultRubyVM(await app());
+
+  // Once our virtual machine is booted, we're going to require the necessary
+  // 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.
+  vm.eval(`
+    require "rubygems"
+    require "did_you_mean"
+    require "json"
+    require "pp"
+    $:.unshift("/lib")
+    require_relative "/lib/syntax_tree"
+    require_relative "/lib/prettier_print"
+  `);
+
+  return {
+    // A function that disassembles the YARV instructions for the given source.
+    disasm(source) {
+      const jsonSource = JSON.stringify(JSON.stringify(source));
+      const rubySource = `RubyVM::InstructionSequence.compile(JSON.parse(${jsonSource})).disasm`;
+
+      return vm.eval(rubySource).toString();
+    },
+    mermaid(source) {
+      const jsonSource = JSON.stringify(JSON.stringify(source));
+      const rubySource = `SyntaxTree.parse(JSON.parse(${jsonSource})).to_mermaid`;
+
+      return vm.eval(rubySource).toString();
+    },
+    // A function that calls through to the SyntaxTree.format function to get
+    // the pretty-printed version of the source.
+    format(source) {
+      const jsonSource = JSON.stringify(JSON.stringify(source));
+      const rubySource = `SyntaxTree.format(JSON.parse(${jsonSource}))`;
+
+      return vm.eval(rubySource).toString();
+    },
+    // A function that calls through to PP to get the pretty-printed version of
+    // the syntax tree.
+    prettyPrint(source) {
+      const jsonSource = JSON.stringify(JSON.stringify(source));
+      const rubySource = `PP.pp(SyntaxTree.parse(JSON.parse(${jsonSource})), +"", 80)`;
+
+      return vm.eval(rubySource).toString();
+    }
+  };
+};