Pyodide

.changeset/blue-ways-teach.md

@@ -0,0 +1,6 @@
+---
+"hyperbook": minor
+"@hyperbook/markdown": minor
+---
+
+Add pyide

.changeset/funny-radios-jog.md

@@ -0,0 +1,6 @@
+---
+"hyperbook": minor
+"@hyperbook/markdown": minor
+---
+
+Add input and tests to pyide

packages/markdown/assets/code.css

@@ -182,4 +182,21 @@ code[data-line-numbers-max-digits="4"]>[data-line]::before {
 
 code-input:not(.code-input_registered)::before {
   content: "..."!important;
+}
+
+/**
+ * Allows code-input elements to be used with the Prism.js line-numbers plugin, as long as the code-input element 
+ * or a parent element of it has the CSS class `line-numbers`.
+ * https://prismjs.com/plugins/line-numbers/
+ * Files: prism-line-numbers.css
+ */
+/* Update padding to match line-numbers plugin */
+code-input.line-numbers textarea, code-input.line-numbers.code-input_pre-element-styled pre,
+.line-numbers code-input textarea, .line-numbers code-input.code-input_pre-element-styled pre {
+  padding-left: max(3.8em, var(--padding, 16px))!important;
+}
+
+/* Ensure pre code/textarea just wide enough to give 100% width with line numbers */
+code-input.line-numbers, .line-numbers code-input {
+  grid-template-columns: calc(100% - max(0em, calc(3.8em - var(--padding, 16px))));
 }

packages/markdown/assets/directive-pyide/client.js

@@ -11,78 +11,206 @@ hyperbook.python = (function () {
     `${HYPERBOOK_ASSETS}directive-pyide/webworker.js`
   );
 
-  const callbacks = {};
-  let isRunning = false;
+  let callback = null;
+  /**
+   * @type Uint8Array
+   */
+  let interruptBuffer;
+  /**
+   * @type Int32Array
+   */
+  let stdinBuffer;
+  if (window.crossOriginIsolated) {
+    interruptBuffer = new Uint8Array(new SharedArrayBuffer(1));
+    stdinBuffer = new Int32Array(new SharedArrayBuffer(1024));
+    pyodideWorker.postMessage({
+      type: "setStdinBuffer",
+      payload: { stdinBuffer },
+    });
+    pyodideWorker.postMessage({
+      type: "setInterruptBuffer",
+      payload: { interruptBuffer },
+    });
+  } else {
+    interruptBuffer = new ArrayBuffer(1);
+    pyodideWorker.postMessage({
+      type: "setInterruptBuffer",
+      payload: { interruptBuffer },
+    });
+  }
 
-  const asyncRun = (id) => {
-    if (isRunning) return;
+  const asyncRun = (id, type) => {
+    if (callback) return;
 
-    isRunning = true;
-    updateRunning();
+    interruptBuffer[0] = 0;
     return (script, context) => {
-      // the id could be generated more carefully
       return new Promise((onSuccess) => {
-        callbacks[id] = onSuccess;
+        callback = onSuccess;
+        updateRunning(id, type);
         pyodideWorker.postMessage({
-          ...context,
-          python: script,
+          type: "run",
+          payload: {
+            ...context,
+            python: script,
+          },
           id,
         });
       });
     };
   };
 
-  const updateRunning = () => {
+  function interruptExecution() {
+    // 2 stands for SIGINT.
+    interruptBuffer[0] = 2;
+  }
+
+  const updateRunning = (id, type) => {
     for (let elem of elems) {
       const run = elem.getElementsByClassName("run")[0];
-      if (isRunning) {
-        run.classList.add("running");
-        run.textContent = "Running ...";
+      const test = elem.getElementsByClassName("test")[0];
+      if (callback) {
+        if (elem.id === id && type === "run") {
+          run.textContent = "Running (Click to stop) ...";
+          run.addEventListener("click", interruptExecution);
+        } else if (test && elem.id === id && type === "test") {
+          test.textContent = "Testing (Click to stop) ...";
+          test.addEventListener("click", interruptExecution);
+        } else {
+          run.classList.add("running");
+          run.disabled = true;
+          if (test) {
+            test.classList.add("running");
+            test.disabled = true;
+          }
+        }
       } else {
         run.classList.remove("running");
         run.textContent = "Run";
+        run.disabled = false;
+        run.removeEventListener("click", interruptExecution);
+        if (test) {
+          test.classList.remove("running");
+          test.textContent = "Test";
+          test.disabled = false;
+          test.removeEventListener("click", interruptExecution);
+        }
       }
-      run.disabled = isRunning;
     }
   };
 
   pyodideWorker.onmessage = (event) => {
-    const { id, ...data } = event.data;
-    if (data.type === "stdout") {
-      const output = document
-        .getElementById(id)
-        .getElementsByClassName("output")[0];
-      output.appendChild(document.createTextNode(data.message + "\n"));
-      return;
+    const { id, type, payload } = event.data;
+    switch (type) {
+      case "stdout": {
+        const output = document
+          .getElementById(id)
+          .getElementsByClassName("output")[0];
+        output.appendChild(document.createTextNode(payload + "\n"));
+        break;
+      }
+      case "error": {
+        const onSuccess = callback;
+        onSuccess({ error: payload });
+        break;
+      }
+      case "success": {
+        const onSuccess = callback;
+        onSuccess({ results: payload });
+        break;
+      }
     }
-    const onSuccess = callbacks[id];
-    delete callbacks[id];
-    isRunning = false;
-    updateRunning();
-    onSuccess(data);
   };
 
   const elems = document.getElementsByClassName("directive-pyide");
 
   for (let elem of elems) {
     const editor = elem.getElementsByClassName("editor")[0];
     const run = elem.getElementsByClassName("run")[0];
+    const test = elem.getElementsByClassName("test")[0];
     const output = elem.getElementsByClassName("output")[0];
+    const input = elem.getElementsByClassName("input")[0];
+    const outputBtn = elem.getElementsByClassName("output-btn")[0];
+    const inputBtn = elem.getElementsByClassName("input-btn")[0];
     const id = elem.id;
+    let tests = [];
+    try {
+      tests = JSON.parse(atob(elem.getAttribute("data-tests")));
+    } catch (e) {}
+
+    function showInput() {
+      outputBtn.classList.remove("active");
+      inputBtn.classList.add("active");
+      output.classList.add("hidden");
+      input.classList.remove("hidden");
+    }
+    function showOutput() {
+      outputBtn.classList.add("active");
+      inputBtn.classList.remove("active");
+      output.classList.remove("hidden");
+      input.classList.add("hidden");
+    }
+
+    outputBtn?.addEventListener("click", showOutput);
+    inputBtn?.addEventListener("click", showInput);
+
+    test?.addEventListener("click", async () => {
+      showOutput();
+      if (callback) return;
+
+      output.innerHTML = "";
+
+      const script = editor.value;
+      for (let test of tests) {
+        const testCode = test.code.replace("#SCRIPT#", script);
+
+        const heading = document.createElement("div");
+        console.log(test);
+        heading.innerHTML = `== Test ${test.name} ==`;
+        heading.classList.add("test-heading");
+        output.appendChild(heading);
+
+        await asyncRun(id, "test")(testCode, {})
+          .then(({ results, error }) => {
+            if (results) {
+              output.textContent += results;
+            } else if (error) {
+              output.textContent += error;
+            }
+            callback = null;
+            updateRunning(id, "test");
+          })
+          .catch((e) => {
+            output.textContent = `Error: ${e}`;
+            console.log(e);
+            callback = null;
+            updateRunning(id, "test");
+          });
+      }
+    });
+
+    run?.addEventListener("click", async () => {
+      showOutput();
+      if (callback) return;
 
-    run?.addEventListener("click", () => {
       const script = editor.value;
       output.innerHTML = "";
-      asyncRun(id)(script, {})
+      asyncRun(id, "run")(script, {
+        inputs: input.value.split("\n"),
+      })
         .then(({ results, error }) => {
           if (results) {
-            output.textContent = results;
+            output.textContent += results;
           } else if (error) {
-            output.textContent = error;
+            output.textContent += error;
           }
+          callback = null;
+          updateRunning(id, "run");
         })
         .catch((e) => {
           output.textContent = `Error: ${e}`;
+          console.log(e);
+          callback = null;
+          updateRunning(id, "run");
         });
     });
   }

packages/markdown/assets/directive-pyide/style.css

@@ -14,15 +14,30 @@
 
 .directive-pyide .container {
   width: 100%;
+  overflow: hidden;
+  height: 200px;
+  display: flex;
+  flex-direction: column;
+}
+
+.directive-pyide .output,
+.directive-pyide .input {
+  white-space: pre;
+  height: 100%;
   border: 1px solid var(--color-spacer);
   border-radius: 8px;
-  overflow: hidden;
-  padding: 10px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
 }
 
 .directive-pyide .output {
-    height: 200px;
-    white-space: pre;
+  padding: 16px;
+  margin-bottom: 0px;
+  font-family: hyperbook-monospace, monospace;
+}
+
+.directive-pyide .hidden {
+  display: none;
 }
 
 .directive-pyide .editor-container {
@@ -41,26 +56,52 @@
   flex: 1;
 }
 
-.directive-pyide button {
-  padding: 8px 16px;
+.directive-pyide .buttons {
+  display: flex;
   border: 1px solid var(--color-spacer);
   border-radius: 8px;
   border-bottom: none;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
+}
+
+.directive-pyide .test-heading {
+  font-size: 1.1em;
+  font-weight: bold;
+  text-decoration: underline;
+  margin-top: 8px;
+}
+
+.directive-pyide .test-heading:first-of-type {
+  margin-top: 0;
+}
+
+.directive-pyide button {
+  flex: 1;
+  padding: 8px 16px;
+  border: none;
+  border-right: 1px solid var(--color-spacer);
   background-color: var(--color--background);
   color: var(--color-text);
   cursor: pointer;
 }
 
+.directive-pyide .buttons:last-child {
+  border-right: none;
+}
+
+.directive-pyide button.active {
+  background-color: var(--color-spacer);
+}
+
 .directive-pyide button:hover {
   background-color: var(--color-spacer);
 }
 
 .directive-pyide button.running {
-    pointer-events: none;
-    cursor: not-allowed;
-    opacity: 0.5;
+  pointer-events: none;
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
 @media screen and (min-width: 1024px) {
@@ -69,7 +110,7 @@
     height: calc(100dvh - 128px);
 
     .output {
-        height: 100%;
+      height: 100%;
     }
 
     .container {