feat: add auto-run:

Author: palkan

Gemfile

@@ -4,4 +4,4 @@ source "https://rubygems.org"
 
 gem "js", "~> 2.5" unless ENV["JS"] == "false"
 gem "ruby_wasm", "~> 2.5"
-gem "ruby-next", "~> 1.0"
+gem "ruby-next", "~> 1.0.3"

Gemfile.lock

@@ -5,18 +5,18 @@ GEM
     diff-lcs (1.5.1)
     js (2.5.0)
     paco (0.2.3)
-    parser (3.3.0.5)
+    parser (3.3.1.0)
       ast (~> 2.4.1)
       racc
     racc (1.7.3)
     require-hooks (0.2.2)
-    ruby-next (1.0.2)
+    ruby-next (1.0.3)
       paco (~> 0.2)
       require-hooks (~> 0.2)
-      ruby-next-core (= 1.0.2)
+      ruby-next-core (= 1.0.3)
       ruby-next-parser (>= 3.2.2.0)
       unparser (~> 0.6.0)
-    ruby-next-core (1.0.2)
+    ruby-next-core (1.0.3)
     ruby-next-parser (3.2.2.0)
       parser (>= 3.0.3.1)
     ruby_wasm (2.5.0)
@@ -35,7 +35,7 @@ PLATFORMS
 
 DEPENDENCIES
   js (~> 2.5)
-  ruby-next (~> 1.0)
+  ruby-next (~> 1.0.3)
   ruby_wasm (~> 2.5)
 
 BUNDLED WITH

src/app.js

@@ -103,6 +103,22 @@ export default class App {
         this.showEditor("outputEditor");
       });
 
+    this.autorunCb = document.getElementById("autorun");
+    let refreshDebounceId;
+
+    this.codeEditor.onDidChangeModelContent((ev) => {
+      if (!this.autorunCb.checked) return;
+
+      if (refreshDebounceId) {
+        clearTimeout(refreshDebounceId);
+      }
+
+      refreshDebounceId = setTimeout(() => {
+        this.refresh();
+        refreshDebounceId = undefined;
+      }, 500);
+    });
+
     this.el.addEventListener("change", this.onSelectEditor);
 
     this.versionSelect = document.getElementById("versionSelect");
@@ -197,6 +213,23 @@ export default class App {
     this.loadExampleFromUrl();
   }
 
+  refresh() {
+    let newSource;
+    try {
+      newSource = this.transpile(this.codeEditor.getValue(), { raise: true });
+    } catch (e) {
+      return;
+    }
+
+    this.previewEditor.setValue(newSource);
+
+    let { result, output } = this.executeWithOutput(newSource);
+
+    if (result) output += "\n\n> " + result;
+
+    this.outputEditor.setValue(output);
+  }
+
   transpile(code, opts = {}) {
     let rubyOptions = "{";
 
@@ -218,6 +251,10 @@ export default class App {
 
       return result;
     } catch (e) {
+      if (opts.raise) {
+        throw e;
+      }
+
       console.error(e);
       return e.message;
     }

src/index.html

@@ -72,6 +72,7 @@ <h1 class="text-2xl">Playground</h1>
                 <span>Run</span>
               </span>
             </sl-button>
+            <sl-checkbox id="autorun">Auto</sl-checkbox>
           </div>
           <div class="flex flex-row space-x-2 justify-center items-center px-2 mr-4">
             <a href="https://github.com/ruby-next/ruby-next" target="_blank" class="flex flex-row items-center space-x-1 hover:opacity-75 cursor-pointer">

src/shoelace.js

@@ -8,3 +8,4 @@ import "@shoelace-style/shoelace/dist/components/dialog/dialog.js";
 import "@shoelace-style/shoelace/dist/components/icon/icon.js";
 import "@shoelace-style/shoelace/dist/components/button/button.js";
 import "@shoelace-style/shoelace/dist/components/input/input.js";
+import "@shoelace-style/shoelace/dist/components/checkbox/checkbox.js";