even better sandbox

static/css/main.css

@@ -537,6 +537,16 @@ img[is="th-emoji"] {
 
 /* Literate programming support */
 
+:root {
+    --error-color: #d94141;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --error-color: #e39393;
+    }
+}
+
 th-literate-program[data-mode="input"] {
     /* Override the cursor with an I-beam, because the editor captures clicks and does not bubble
        them back up to the caller */
@@ -551,7 +561,7 @@ th-literate-program[data-mode="output"] {
     }
 
     & code.error {
-        color: #e39393;
+        color: var(--error-color);
     }
 
     &::after {
@@ -570,6 +580,7 @@ th-literate-program[data-mode="output"] {
 th-literate-program[data-mode="graphics"] {
     padding: 0;
     background: none;
+    border: none;
 
     & iframe {
         border-style: none;
@@ -581,6 +592,28 @@ th-literate-program[data-mode="graphics"] {
     & iframe.hidden {
         display: none;
     }
+
+    & pre.error {
+        color: var(--error-color);
+        position: relative;
+
+        &:empty {
+            display: none;
+        }
+
+        &::after {
+            content: 'Error';
+
+            padding: 8px;
+
+            position: absolute;
+            right: 0;
+            top: 0;
+
+            color: var(--text-color);
+            opacity: 50%;
+        }
+    }
 }
 
 /* Syntax highlighting */

static/js/components/literate-programming.js

@@ -200,12 +200,25 @@ class OutputMode {
     clearResults() {
         this.frame.replaceChildren();
     }
+
+    static messageOutputArrayToString(output) {
+        return output
+            .map(x => {
+                if (typeof x === "object") return JSON.stringify(x);
+                else return x + "";
+            })
+            .join(" ");
+    }
 }
 
 class GraphicsMode {
     constructor(frame) {
         this.frame = frame;
 
+        this.error = document.createElement("pre");
+        this.error.classList.add("error");
+        this.frame.appendChild(this.error);
+
         this.iframe = document.createElement("iframe");
         this.iframe.classList.add("hidden");
         this.iframe.src = import.meta.resolve("../../html/sandbox.html");
@@ -213,15 +226,20 @@ class GraphicsMode {
 
         this.iframe.contentWindow.addEventListener("message", event => {
             let message = event.data;
-            if (message.kind == "resize") {
+            if (message.kind == "ready") {
+                this.evaluate();
+            }
+            else if (message.kind == "resize") {
                 this.resize(message);
+            } else if (message.kind == "output" && message.output.kind == "error") {
+                this.error.textContent = OutputMode.messageOutputArrayToString(message.output.message);
+                this.iframe.classList.add("hidden");
+            } else if (message.kind == "evalComplete") {
+                this.error.textContent = "";
             }
         });
 
-        this.iframe.contentWindow.addEventListener("DOMContentLoaded", () => this.evaluate());
         this.frame.program.onChanged.push(_ => this.evaluate());
-
-        this.evaluate();
     }
 
     evaluate() {

static/js/components/literate-programming/eval.js

@@ -18,7 +18,22 @@ async function withTemporaryGlobalScope(callback) {
     }
 }
 
-export async function evaluate(commands) {
+let evaluationComplete = null;
+
+export async function evaluate(commands, { start, success, error }) {
+    if (evaluationComplete != null) {
+        await evaluationComplete;
+    }
+
+    if (start != null) {
+        start();
+    }
+
+    let signalEvaluationComplete;
+    evaluationComplete = new Promise((resolve, _reject) => {
+        signalEvaluationComplete = resolve;
+    })
+
     outputIndex = 0;
     try {
         await withTemporaryGlobalScope(async scope => {
@@ -34,15 +49,25 @@ export async function evaluate(commands) {
                 }
             }
         });
-    } catch (error) {
+        if (success != null) {
+            success();
+        }
+        postMessage({
+            kind: "evalComplete",
+        });
+    } catch (err) {
         postMessage({
             kind: "output",
             output: {
                 kind: "error",
-                message: [error.toString()],
+                message: [err.toString()],
             },
             outputIndex,
         });
+        if (error != null) {
+            error();
+        }
     }
+    signalEvaluationComplete();
 }
 

static/js/components/literate-programming/worker.js

@@ -18,6 +18,6 @@ globalThis.console = {
 addEventListener("message", async event => {
     let message = event.data;
     if (message.action == "eval") {
-        evaluate(message.input);
+        evaluate(message.input, {});
     }
 });

static/js/sandbox.js

@@ -1,3 +1,15 @@
+export const internals = {
+    body: document.createElement("body"),
+};
+
+export function body() {
+    return internals.body;
+}
+
+export function addElement(element) {
+    body().appendChild(element);
+}
+
 export class Sketch {
     constructor(width, height) {
         this.canvas = document.createElement("canvas");
@@ -5,6 +17,6 @@ export class Sketch {
         this.canvas.height = height;
         this.ctx = this.canvas.getContext("2d");
 
-        document.body.appendChild(this.canvas);
+        addElement(this.canvas);
     }
 }

static/js/vendor/codejar.js

@@ -306,8 +306,8 @@ export function CodeJar(editor, highlight, opt = {}) {
         }
     }
     function handleSelfClosingCharacters(event) {
-        const open = `([{'"`;
-        const close = `)]}'"`;
+        const open = `([{'"\``;
+        const close = `)]}'"\``;
         if (open.includes(event.key)) {
             preventDefault(event);
             const pos = save();