feat: edit-only mode

Author: nalgeon

src/snippet.js

@@ -61,13 +61,15 @@ class CodapiSnippet extends HTMLElement {
     // init initializes the component state.
     init() {
         const filesStr = this.getAttribute("files");
-        this.executor = new Executor({
-            engine: this.getAttribute("engine"),
-            sandbox: this.getAttribute("sandbox"),
-            command: this.getAttribute("command"),
-            template: this.getAttribute("template"),
-            files: filesStr ? filesStr.split(" ") : null,
-        });
+        this.executor = this.hasAttribute("sandbox")
+            ? new Executor({
+                  engine: this.getAttribute("engine"),
+                  sandbox: this.getAttribute("sandbox"),
+                  command: this.getAttribute("command"),
+                  template: this.getAttribute("template"),
+                  files: filesStr ? filesStr.split(" ") : null,
+              })
+            : null;
         this.dependsOn = this.getAttribute("depends-on");
         this.state = State.unknown;
     }
@@ -80,6 +82,7 @@ class CodapiSnippet extends HTMLElement {
 
         this._toolbar = this.querySelector("codapi-toolbar");
         const actions = this.getAttribute("actions");
+        this._toolbar.runnable = this.executor != null;
         this._toolbar.addActions(actions ? actions.split(" ") : null);
 
         const status = this._toolbar.querySelector("codapi-status");
@@ -197,6 +200,9 @@ class CodapiSnippet extends HTMLElement {
 
     // execute runs the code.
     async execute(command = undefined) {
+        if (!this.executor) {
+            return;
+        }
         if (this.snippet.isEmpty) {
             this._output.showMessage("(empty)");
             return;

src/toolbar.js

@@ -4,7 +4,7 @@ import { Action } from "./action.js";
 
 const template = document.createElement("template");
 template.innerHTML = `
-<button>Run</button>
+<button hidden>Run</button>
 <a href="#edit" hidden>Edit</a>
 <codapi-status></codapi-status>
 `;
@@ -87,6 +87,18 @@ class CodapiToolbar extends HTMLElement {
         this.status.showMessage(message);
     }
 
+    get runnable() {
+        return !this.run.hasAttribute("hidden");
+    }
+
+    set runnable(value) {
+        if (value) {
+            this.run.removeAttribute("hidden");
+        } else {
+            this.run.setAttribute("hidden", "");
+        }
+    }
+
     get editable() {
         return !this.edit.hasAttribute("hidden");
     }

tests/snippet.js

@@ -15,6 +15,9 @@ async function runTests() {
     await testAttachSelector();
     await testAttachSelectorPrev();
 
+    await testRunnable();
+    await testNotRunnable();
+
     await testEditorOff();
     await testEditorBasic();
     await testEditorExternal();
@@ -271,6 +274,32 @@ async function testRunError() {
     });
 }
 
+async function testRunnable() {
+    return new Promise((resolve, reject) => {
+        t.log("testRunnable...");
+        const ui = createSnippet(`
+            <pre><code>print("hello")</code></pre>
+            <codapi-snippet sandbox="python"></codapi-snippet>
+        `);
+        t.assert("runnable", ui.toolbar.runnable);
+        t.assert("run button", !ui.toolbar.run.hasAttribute("hidden"));
+        resolve();
+    });
+}
+
+async function testNotRunnable() {
+    return new Promise((resolve, reject) => {
+        t.log("testNotRunnable...");
+        const ui = createSnippet(`
+            <pre><code>print("hello")</code></pre>
+            <codapi-snippet></codapi-snippet>
+        `);
+        t.assert("runnable", !ui.toolbar.runnable);
+        t.assert("run button", ui.toolbar.run.hasAttribute("hidden"));
+        resolve();
+    });
+}
+
 async function testEditAndRun() {
     return new Promise((resolve, reject) => {
         t.log("testEditAndRun...");