feat: implement run + puts/p support

palkan · palkan · commit 59899dd0f4a4 · 2024-01-22T21:56:07.000-08:00
diff --git a/src/app.js b/src/app.js
@@ -16,49 +16,153 @@ puts greet.call(hello: 'martian')
 
 const DEFAULT_PREVIEW = `# Here you will see the transpiled source code.`;
 
+const CONFIG = `# Here you can define custom source rewriters.`;
+
+const OUTPUT = "// Here will be the output of your program";
+
+const THEMES = {
+  light: "vs",
+  dark: "vs-dark",
+};
+
 export default class App {
   constructor(el, vm, monaco) {
     this.el = el;
     this.vm = vm;
     this.monaco = monaco;
+
+    this.onSelectEditor = this.onSelectEditor.bind(this);
   }
 
   bootstrap() {
-    this.currentEditor = this.initEditor(
-      this.el.querySelector('[target="editor"]'),
+    const theme = window.matchMedia?.("(prefers-color-scheme: dark)").matches
+      ? "dark"
+      : "light";
+
+    this.monaco.editor.setTheme(THEMES[theme]);
+
+    this.codeEditor = this.initEditor(
+      this.el.querySelector("#codeEditor"),
       DEFAULT_SOURCE
     );
 
+    this.configEditor = this.initEditor(
+      this.el.querySelector("#configEditor"),
+      CONFIG
+    );
+
     this.previewEditor = this.initEditor(
-      this.el.querySelector('[target="preview"]'),
+      this.el.querySelector("#previewEditor"),
       DEFAULT_PREVIEW,
       {
         readOnly: true,
       }
     );
 
+    this.outputEditor = this.initEditor(
+      this.el.querySelector("#outputEditor"),
+      OUTPUT,
+      {
+        readOnly: true,
+        language: "shell",
+        lineNumbers: "off",
+      }
+    );
+
     this.el
       .querySelector('[target="transpile-btn"]')
       .addEventListener("click", () => {
-        const code = this.currentEditor.getValue();
-        const result = this.vm
-          .eval("RubyNext::Language.transform(%q(" + code + "), using: false)")
-          .toString();
+        const result = this.transpile(this.codeEditor.getValue());
 
         this.previewEditor.setValue(result);
+        this.showEditor("previewEditor");
+      });
+
+    this.el
+      .querySelector('[target="run-btn"]')
+      .addEventListener("click", () => {
+        const newSource = this.transpile(this.codeEditor.getValue());
+        this.previewEditor.setValue(newSource);
+
+        const result = this.execute(newSource);
+        let output = window.$puts.flush();
+
+        if (result) output += "\n\n> " + result;
+
+        this.outputEditor.setValue(output);
+
+        this.showEditor("outputEditor");
       });
+
+    this.el.addEventListener("change", this.onSelectEditor);
+
+    this.setCurrentVersion();
+  }
+
+  transpile(code) {
+    const result = this.vm
+      .eval("RubyNext.transform(%q(" + code + "))")
+      .toString();
+
+    return result;
+  }
+
+  execute(source) {
+    try {
+      return this.vm.eval(source).toString();
+    } catch (e) {
+      console.error(e);
+      return e.message;
+    }
+  }
+
+  async setCurrentVersion() {
+    const versionContainer = document.getElementById("currentVersion");
+    if (!versionContainer) return;
+
+    const version = this.execute("RUBY_VERSION + '-' + RUBY_PLATFORM");
+
+    versionContainer.innerText = version;
   }
 
   initEditor(target, value, opts = {}) {
     return this.monaco.editor.create(target, {
       value,
       language: "ruby",
-      theme: "vs-dark",
       automaticLayout: true,
       minimap: {
         enabled: false,
       },
       ...opts,
     });
   }
+
+  showEditor(editorName) {
+    const editor = this.el.querySelector(`#${editorName}`);
+    if (!editor) return;
+
+    const containerId = editor.dataset.pane;
+    if (!containerId) return;
+
+    const container = this.el.querySelector(`#${containerId}`);
+    if (!container) return;
+
+    // Hide previous editor
+    container
+      .querySelector("[data-pane]:not(.hidden)")
+      ?.classList.add("hidden");
+
+    // Make sure the correct radio is checked
+    const radio = container.querySelector(`input[value="${editorName}"]`);
+    if (radio) radio.checked = true;
+
+    // Show the editor
+    editor.classList.remove("hidden");
+  }
+
+  onSelectEditor(e) {
+    if (!e.target.value) return;
+
+    this.showEditor(e.target.value);
+  }
 }
diff --git a/src/index.html b/src/index.html
@@ -15,7 +15,7 @@
           <h2>Initializing Ruby Next playground...</h2>
           <ul class="mt-2 text-sm text-slate-500 dark:text-slate-400">
             <li class="flex flex-row items-center" id="loader-editor">
-              <i data-icon="loading"><svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 p-1" viewBox="0 0 24 24"><path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"><animateTransform attributeName="transform" type="rotate" dur="0.75s" values="0 12 12;360 12 12" repeatCount="indefinite"/></path></svg></i>
+              <i data-icon="loading"><svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 p-1" stroke="currentColor" viewBox="0 0 24 24"><path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"><animateTransform attributeName="transform" type="rotate" dur="0.75s" values="0 12 12;360 12 12" repeatCount="indefinite"/></path></svg></i>
               <i data-icon="check" class="hidden text-green-600"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
               </svg></i>
@@ -27,7 +27,7 @@ <h2>Initializing Ruby Next playground...</h2>
               <span class="ml-1">Code Editor</span>
             </li>
             <li class="flex flex-row items-center" id="loader-ruby">
-              <i data-icon="loading"><svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 p-1" viewBox="0 0 24 24"><path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"><animateTransform attributeName="transform" type="rotate" dur="0.75s" values="0 12 12;360 12 12" repeatCount="indefinite"/></path></svg></i>
+              <i data-icon="loading"><svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 p-1" stroke="currentColor" viewBox="0 0 24 24"><path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"><animateTransform attributeName="transform" type="rotate" dur="0.75s" values="0 12 12;360 12 12" repeatCount="indefinite"/></path></svg></i>
               <i data-icon="check" class="hidden text-green-600"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
               </svg></i>
@@ -44,8 +44,9 @@ <h2>Initializing Ruby Next playground...</h2>
       <div id="app" class="hidden w-full h-screen flex flex-col">
         <nav class="flex-shrink flex flex-row justify-between items-middle border-b-1 border-slate-300 shadow-md">
           <div class="flex flex-row items-center justify-start">
-            <img class="mx-2 h-12 w-auto" src="/assets/text-logo.png" alt="Ruby Next">
-            <h1 class="text-2xl border-l-2 pl-2 border-slate-400">Playground</h1>
+            <img class="mx-2 p-1 h-12 w-auto" src="/assets/logo.png" alt="Ruby Next">
+            <h1 class="text-2xl">Playground</h1>
+            <span class="text-sm ml-4 h-4" id="currentVersion"></span>
           </div>
           <div class="flex flex-row space-x-2 self-center justify-center items-center px-2">
             <button target="transpile-btn">Transpile</button>
@@ -63,45 +64,47 @@ <h1 class="text-2xl border-l-2 pl-2 border-slate-400">Playground</h1>
           </div>
         </nav>
         <div class="flex flex-row flex-grow relative">
-          <div class="flex flex-col w-1/2 relative">
-            <div class="flex flex-row flex-grow text-sm border-slate-300">
-              <label for="editor_left_pane_config" class="border p-1 flex flex-row space-x-1 items-center has-[:checked]:bg-editor-light dark:has-[:checked]:bg-editor-dark">
-                <input type="radio" id="editor_left_pane_config" name="editor_left_pane" value="config" class="hidden peer">
+          <div id="editor_left_pane" class="flex flex-col w-1/2 relative">
+            <div class="flex flex-row flex-grow text-sm bg-editor-light dark:bg-editor-dark">
+              <label for="editor_left_pane_config" class="mb-1 p-1 flex flex-row items-center cursor-pointer border-b border-editor-light dark:border-editor-dark has-[:checked]:border-editor-dark dark:has-[:checked]:border-editor-light opacity-75 has-[:checked]:opacity-100">
+                <input type="radio" id="editor_left_pane_config" name="editor_left_pane" value="configEditor" class="hidden peer">
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 0 1 1.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.559.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.894.149c-.424.07-.764.383-.929.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 0 1-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.398.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 0 1-.12-1.45l.527-.737c.25-.35.272-.806.108-1.204-.165-.397-.506-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.108-1.204l-.526-.738a1.125 1.125 0 0 1 .12-1.45l.773-.773a1.125 1.125 0 0 1 1.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894Z" />
                   <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
                 </svg>
-                <span>Config</span>
+                <span class="ml-1">Config</span>
               </label>
-              <label for="editor_left_pane_code" class="border p-1 flex flex-row space-x-1 items-center has-[:checked]:bg-editor-light dark:peer-checked:bg-editor-dark">
-                <input type="radio" id="editor_left_pane_code" name="editor_left_pane" value="code" class="hidden peer" checked>
+              <label for="editor_left_pane_code" class="mb-1 p-1 flex flex-row items-center cursor-pointer border-b border-editor-light dark:border-editor-dark has-[:checked]:border-editor-dark dark:has-[:checked]:border-editor-light opacity-75 has-[:checked]:opacity-100">
+                <input type="radio" id="editor_left_pane_code" name="editor_left_pane" value="codeEditor" class="hidden peer" checked>
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M14.25 9.75 16.5 12l-2.25 2.25m-4.5 0L7.5 12l2.25-2.25M6 20.25h12A2.25 2.25 0 0 0 20.25 18V6A2.25 2.25 0 0 0 18 3.75H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25Z" />
                 </svg>
-                <span>Code</span>
+                <span class="ml-1">Code</span>
               </label>
             </div>
-            <div target="editor" class="w-full h-full"></div>
+            <div id="configEditor" data-pane="editor_left_pane" class="w-full h-full hidden"></div>
+            <div id="codeEditor" data-pane="editor_left_pane" class="w-full h-full"></div>
           </div>
-          <div class="flex flex-col w-1/2 relative">
-            <div class="flex flex-row flex-grow text-sm border-slate-300">
-              <label for="editor_right_pane_preview" class="border active p-1 flex flex-row space-x-1 items-center has-[:checked]:bg-editor-light dark:peer-checked:bg-editor-dark">
-                <input type="radio" id="editor_right_pane_preview" name="editor_right_pane" value="preview" class="hidden" checked>
+          <div id="editor_right_pane" class="flex flex-col w-1/2 relative">
+            <div class="flex flex-row flex-grow text-sm bg-editor-light dark:bg-editor-dark">
+              <label for="editor_right_pane_preview" class="p-1 mb-1 flex flex-row items-center cursor-pointer border-b border-editor-light dark:border-editor-dark has-[:checked]:border-editor-dark dark:has-[:checked]:border-editor-light opacity-75 has-[:checked]:opacity-100">
+                <input type="radio" id="editor_right_pane_preview" name="editor_right_pane" value="previewEditor" class="hidden" checked>
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
                   <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
                 </svg>
-                <span>Preview</span>
+                <span class="ml-1">Preview</span>
               </label>
-              <label for="editor_right_pane_output" class="border p-1 flex flex-row space-x-1 items-center  has-[:checked]:bg-editor-light dark:peer-checked:bg-editor-dark">
-                <input type="radio" id="editor_right_pane_output" name="editor_right_pane" value="output" class="hidden">
+              <label for="editor_right_pane_output" class="p-1 mb-1 flex flex-row items-center cursor-pointer border-b border-editor-light dark:border-editor-dark has-[:checked]:border-editor-dark dark:has-[:checked]:border-editor-light opacity-75 has-[:checked]:opacity-100">
+                <input type="radio" id="editor_right_pane_output" name="editor_right_pane" value="outputEditor" class="hidden">
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                   <path stroke-linecap="round" stroke-linejoin="round" d="m6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z" />
                 </svg>
-                <span>Output</span>
+                <span class="ml-1">Output</span>
               </label>
             </div>
-            <div target="preview" class="w-full h-full"></div>
+            <div id="previewEditor" data-pane="editor_right_pane" class="w-full h-full"></div>
+            <div id="outputEditor" data-pane="editor_right_pane" class="w-full h-full hidden"></div>
           </div>
         </div>
       </div>
diff --git a/src/vm.js b/src/vm.js
@@ -1,19 +1,54 @@
 import { DefaultRubyVM } from "@ruby/wasm-wasi/dist/browser";
+import { consolePrinter } from "@ruby/wasm-wasi";
 import ruby from "./ruby.wasm";
 
 export default async function initVM() {
   const module = await ruby();
+
+  const output = [];
+  const originalLog = console.log;
+  window.$puts = function (val) {
+    originalLog(val);
+    output.push(val);
+  };
+
   const { vm } = await DefaultRubyVM(module);
 
+  window.$puts.flush = () => output.splice(0, output.length).join("\n");
+
   vm.eval(`
     require "/bundle/setup"
     require "rubygems"
     # Make gem no-op
     define_singleton_method(:gem) { |*| nil }
 
+    require "js"
+
+    module Kernel
+      def puts(val)
+        JS.eval("window.$puts('#{val.inspect}')")
+        nil
+      end
+
+      def p(val)
+        JS.eval("window.$puts('#{val}')")
+        nil
+      end
+    end
+
     require "ruby-next/language"
     require "ruby-next/language/rewriters/edge"
     require "ruby-next/language/rewriters/proposed"
+
+    module RubyNext
+      def self.transform(code, version: RUBY_VERSION, using: false)
+        options = {using:}
+        options[:rewriters] = Language.rewriters.select { |rw| rw.unsupported_version?(version) }
+
+        source = Language.transform(code, **options)
+        source += "\n # Transformed with RubyNext v#{RubyNext::VERSION} for Ruby #{version}"
+      end
+    end
   `);
 
   return vm;
