Strip out typescript

bin/build.mjs → bin/build.js

@@ -1,8 +1,8 @@
 import esbuild from "esbuild";
 import url from "url";
-import wasmPlugin from "./wasmPlugin.mjs";
+import wasmPlugin from "./wasmPlugin.js";
 
-const entryPoint = url.fileURLToPath(new URL("../src/index.ts", import.meta.url));
+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({

bin/serve.mjs → bin/serve.js

@@ -1,8 +1,8 @@
 import esbuild from "esbuild";
 import url from "url";
-import wasmPlugin from "./wasmPlugin.mjs";
+import wasmPlugin from "./wasmPlugin.js";
 
-const entryPoint = url.fileURLToPath(new URL("../src/index.ts", import.meta.url));
+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({

package.json

@@ -1,8 +1,9 @@
 {
   "license": "MIT",
+  "type": "module",
   "scripts": {
-    "build": "node bin/build.mjs",
-    "serve": "node bin/serve.mjs"
+    "build": "node bin/build.js",
+    "serve": "node bin/serve.js"
   },
   "dependencies": {
     "@monaco-editor/loader": "^1.3.2",
@@ -13,8 +14,6 @@
     "ruby-head-wasm-wasi": "^0.6.0"
   },
   "devDependencies": {
-    "@types/node": "^18.14.1",
-    "@types/path-browserify": "^1.0.0",
     "esbuild": "^0.17.10",
     "monaco-editor": "^0.36.0"
   }

src/createRuby.ts → src/createRuby.js

@@ -1,12 +1,8 @@
-import { WASI } from "@wasmer/wasi";
-import { WasmFs } from "@wasmer/wasmfs";
-import path from "path-browserify";
-import { DefaultRubyVM } from "ruby-head-wasm-wasi/dist/browser.esm.js";
-
-import load from "./app.wasm";
+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 load())
+  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
@@ -23,38 +19,33 @@ export default async function createRuby() {
 
   return {
     // A function that disassembles the YARV instructions for the given source.
-    disasm(source: string) {
+    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: string) {
+    mermaid(source) {
       const jsonSource = JSON.stringify(JSON.stringify(source));
-      const rubySource = `
-        source = JSON.parse(${jsonSource})
-        SyntaxTree.parse(source).to_mermaid
-      `;
+      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: string) {
+    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: string) {
+    prettyPrint(source) {
       const jsonSource = JSON.stringify(JSON.stringify(source));
       const rubySource = `PP.pp(SyntaxTree.parse(JSON.parse(${jsonSource})), +"", 80)`;
 
       return vm.eval(rubySource).toString();
     }
   };
 };
-
-export type Ruby = Awaited<ReturnType<typeof createRuby>>;

src/index.ts → src/index.js

@@ -1,15 +1,12 @@
 import "./index.css";
 
-type SourceChangedEvent = { source: string };
-type DisplayChangedEvent = { kind: "prettyPrint" | "disasm" | "mermaid" };
-
-Promise.all([
+await 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("./monacoLoader").then(async ({ default: loader }) => {
     const monaco = await loader.init();
-    const editor = document.getElementById("editor") as HTMLTextAreaElement;
+    const editor = document.getElementById("editor");
     const newEditor = document.createElement("div");
     editor.replaceWith(newEditor);
 
@@ -21,15 +18,15 @@ Promise.all([
       }
     });
   }),
-  import("./mermaid-js"),
+  import("./mermaid"),
   // 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, mermaidjs, ruby]) => {
+]).then(([editor, mermaid, 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;
+  const output = document.getElementById("output");
   output.value = ruby.prettyPrint(editor.getValue());
   output.disabled = false;
 
@@ -38,14 +35,14 @@ Promise.all([
   let displayFunction = ruby.prettyPrint;
 
   // Handle a custom event here for if the display option changed.
-  output.addEventListener("display-changed", (event: CustomEvent<DisplayChangedEvent>) => {
+  output.addEventListener("display-changed", (event) => {
     displayFunction = ruby[event.detail.kind];
 
     try {
       let source = displayFunction(editor.getValue());
 
       if (event.detail.kind === 'mermaid') {
-        mermaidjs.render(() => {
+        mermaid.render(() => {
           output.setAttribute("style", "display: none;");
 
           return source;
@@ -54,7 +51,7 @@ Promise.all([
         output.value = source;
         output.setAttribute("style", "");
 
-        mermaidjs.reset();
+        mermaid.reset();
       }
     } catch (error) {
       // For now, just ignoring the error. Eventually I'd like to make this mark
@@ -66,33 +63,33 @@ Promise.all([
   // event information.
   const toggles = document.getElementsByClassName("toggles")[0];
 
-  toggles.querySelector("select").addEventListener('change', (e) => {
-    output.dispatchEvent(new CustomEvent<DisplayChangedEvent>("display-changed", {
-      detail: { kind: e.target.value as DisplayChangedEvent["kind"] }
+  toggles.querySelector("select").addEventListener('change', (event) => {
+    output.dispatchEvent(new CustomEvent("display-changed", {
+      detail: { kind: event.target.value }
     }));
   });
 
   // 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>) => {
+  output.addEventListener("source-changed", (event) => {
     // 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"] }
+    output.dispatchEvent(new CustomEvent("display-changed", {
+      detail: { kind: toggles.querySelector('select').value }
     }));
   });
 
   // Attach to the editor and dispatch custom source-changed events whenever the
   // value is updated in the editor.
   editor.onDidChangeModelContent(() => {
-    output.dispatchEvent(new CustomEvent<SourceChangedEvent>("source-changed", {
+    output.dispatchEvent(new CustomEvent("source-changed", {
       detail: { source: editor.getValue() }
     }));
   });
 
   // Attach to the format button to update the source whenever the button is
   // clicked.
-  const format = document.getElementById("format") as HTMLButtonElement;
+  const format = document.getElementById("format");
   format.disabled = false;
 
   format.addEventListener("click", () => {

src/mermaid-js.ts → src/mermaid.js

@@ -2,13 +2,11 @@ import mermaidjs from "mermaid";
 
 const getCleanContainer = () => {
   const div = document.querySelector("#graph-container");
-
-  div.innerHTML = '';
-
+  div.innerHTML = "";
   return div;
 }
 
-const render = (fn: Function) => {
+const render = (fn) => {
   let container = getCleanContainer();
 
   container.setAttribute("style", "display: block;");

yarn.lock

@@ -238,16 +238,11 @@
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-5.1.2.tgz#07508b45797cb81ec3f273011b054cd0755eddca"
   integrity sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==
 
-"@types/node@*", "@types/node@^18.14.1":
+"@types/node@*":
   version "18.14.1"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-18.14.1.tgz#90dad8476f1e42797c49d6f8b69aaf9f876fc69f"
   integrity sha512-QH+37Qds3E0eDlReeboBxfHbX9omAcBCXEzswCu6jySP642jiM3cYSIkU/REqwhCUqXdonHFuBfJDiAJxMNhaQ==
 
-"@types/path-browserify@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@types/path-browserify/-/path-browserify-1.0.0.tgz#294ec6e88b6b0d340a3897b7120e5b393f16690e"
-  integrity sha512-XMCcyhSvxcch8b7rZAtFAaierBYdeHXVvg2iYnxOV0MCQHmPuRRmGZPFDRzPayxcGiiSL1Te9UIO+f3cuj0tfw==
-
 "@types/shelljs@^0.8.11":
   version "0.8.11"
   resolved "https://registry.yarnpkg.com/@types/shelljs/-/shelljs-0.8.11.tgz#17a5696c825974e96828e96e89585d685646fcb8"