@hyperbook/markdown 0.21.0 → 0.22.1

package/dist/assets/directive-pyide/client.js

@@ -11,79 +11,228 @@ 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) => {
+    const elems = document.getElementsByClassName("directive-pyide");
     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 output = elem.getElementsByClassName("output")[0];
-    const id = elem.id;
-
-    run?.addEventListener("click", () => {
-      const script = editor.value;
-      output.innerHTML = "";
-      asyncRun(id)(script, {})
-        .then(({ results, error }) => {
-          if (results) {
-            output.textContent = results;
-          } else if (error) {
-            output.textContent = error;
-          }
+  const init = (root) => {
+    const elems = root.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;
+
+        const script = editor.value;
+        output.innerHTML = "";
+        asyncRun(id, "run")(script, {
+          inputs: input.value.split("\n"),
         })
-        .catch((e) => {
-          output.textContent = `Error: ${e}`;
+          .then(({ results, error }) => {
+            if (results) {
+              output.textContent += results;
+            } else if (error) {
+              output.textContent += error;
+            }
+            callback = null;
+            updateRunning(id, "run");
+          })
+          .catch((e) => {
+            output.textContent = `Error: ${e}`;
+            console.log(e);
+            callback = null;
+            updateRunning(id, "run");
+          });
+      });
+    }
+  };
+
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      if (mutation.addedNodes.length) {
+        mutation.addedNodes.forEach((node) => {
+          if (node.type === 1 && node.classList?.contains("directive-pyide")) {
+            init(node);
+          }
         });
+      }
     });
-  }
+  });
+
+  observer.observe(document.body, { childList: true, subtree: true });
+
+  document.addEventListener("DOMContentLoaded", () => {
+    init(document);
+  });
 })();

package/dist/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 {

package/dist/assets/directive-pyide/webworker.js

@@ -3,40 +3,84 @@
 // and `.wasm` files as well:
 importScripts("https://cdn.jsdelivr.net/pyodide/v0.26.4/full/pyodide.js");
 
+class StdinHandler {
+  constructor(results, options) {
+    this.results = results;
+    this.idx = 0;
+    Object.assign(this, options);
+  }
+
+  stdin() {
+    return this.results[this.idx++];
+  }
+}
+
 async function loadPyodideAndPackages() {
-  self.pyodide = await loadPyodide();
+  var pyodide = await loadPyodide();
+  self.pyodide = pyodide;
   await self.pyodide.loadPackage([]);
 }
 let pyodideReadyPromise = loadPyodideAndPackages();
 
-self.onmessage = async (event) => {
-  // make sure loading is done
-  await pyodideReadyPromise;
-  // Don't bother yet with this line, suppose our API is built in such a way:
-  const { id, python, ...context } = event.data;
-  // The worker copies the context in its own "memory" (an object mapping name to values)
-  for (const key of Object.keys(context)) {
-    self[key] = context[key];
-  }
+self.onmessage = async ({ data: { id, type, payload } }) => {
+  switch (type) {
+    case "run": {
+      // make sure loading is done
+      await pyodideReadyPromise;
+      // Don't bother yet with this line, suppose our API is built in such a way:
+      const { python, inputs, ...context } = payload;
+      // The worker copies the context in its own "memory" (an object mapping name to values)
+      for (const key of Object.keys(context)) {
+        self[key] = context[key];
+      }
+
+      self.pyodide.setStdin(new StdinHandler(inputs));
+
+      self.pyodide.setStdout({
+        batched: (msg) => {
+          self.postMessage({ id, type: "stdout", payload: msg });
+        },
+      });
+
+      self.pyodide.setStderr({
+        batched: (msg) => {
+          self.postMessage({ id, type: "stderr", payload: msg });
+        },
+      });
 
-  self.pyodide.setStdout({
-    batched: (msg) => {
-      self.postMessage({ id, type: "stdout", message: msg });
-    },
-  });
-
-  self.pyodide.setStderr({
-    batched: (msg) => {
-      self.postMessage({ id, type: "stderr", message: msg });
-    },
-  });
-
-  // Now is the easy part, the one that is similar to working in the main thread:
-  try {
-    await self.pyodide.loadPackagesFromImports(python);
-    let results = await self.pyodide.runPythonAsync(python);
-    self.postMessage({ results, id });
-  } catch (error) {
-    self.postMessage({ error: error.message, id });
+      // Now is the easy part, the one that is similar to working in the main thread:
+      const filename = "<exec>";
+      try {
+        await self.pyodide.loadPackagesFromImports(python);
+        const dict = self.pyodide.globals.get("dict");
+        const globals = dict();
+        let results = await self.pyodide.runPythonAsync(python, {
+          globals,
+          locals: globals,
+          filename,
+        });
+        globals.destroy();
+        dict.destroy();
+        self.postMessage({ type: "success", id, payload: results });
+      } catch (error) {
+        // clean up trackback
+        let message = error.message;
+        if (message.startsWith("Traceback")) {
+          const lines = message?.split("\n") || [];
+          const i = lines.findIndex((line) => line.includes(filename));
+          message = lines[0] + "\n" + lines.slice(i).join("\n");
+          self.postMessage({ type: "error", payload: message, id });
+        }
+        self.postMessage({ type: "error", payload: message, id });
+      }
+      break;
+    }
+    case "setInterruptBuffer": {
+      const { interruptBuffer } = payload;
+      // make sure loading is done
+      await pyodideReadyPromise;
+      self.pyodide.setInterruptBuffer(interruptBuffer);
+      break;
+    }
   }
 };

package/dist/assets/directive-scratchblock/client.js

@@ -1,5 +1,5 @@
 hyperbook.scratchblock = (function () {
-  function init() {
+  const init = () => {
     scratchblocks.renderMatching("pre.directive-scratchblock", {
       style: "scratch3",
       languages: [
@@ -24,7 +24,22 @@ hyperbook.scratchblock = (function () {
       ],
       scale: 1,
     });
-  }
+  };
 
-  init();
+  document.addEventListener("DOMContentLoaded", () => {
+    init();
+  });
+
+  // Observe for new elements
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      mutation.addedNodes.forEach((node) => {
+        if (node.nodeType === 1 && node.matches("pre.directive-scratchblock")) {
+          init();
+        }
+      });
+    });
+  });
+
+  observer.observe(document.body, { childList: true, subtree: true });
 })();

package/dist/assets/directive-slideshow/client.js

@@ -50,15 +50,36 @@ hyperbook.slideshow = (function () {
     window.hyperbook.slideshow.update(id);
   };
 
-  const slideshows = document.getElementsByClassName("slideshow");
-  for (let slideshow of slideshows) {
-    const id = slideshow.getAttribute("data-id");
-    update(id);
-  }
+  const init = (root) => {
+    const slideshows = root.getElementsByClassName("slideshow");
+    for (let slideshow of slideshows) {
+      const id = slideshow.getAttribute("data-id");
+      update(id);
+    }
+  };
+
+  // Initialize existing slideshows on document load
+  document.addEventListener("DOMContentLoaded", () => {
+    init(document);
+  });
+
+  // Observe for new slideshows added to the DOM
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      mutation.addedNodes.forEach((node) => {
+        if (node.nodeType === 1) { // Element node
+          init(node);
+        }
+      });
+    });
+  });
+
+  observer.observe(document.body, { childList: true, subtree: true });
 
   return {
     update,
     moveBy,
     setActive,
+    init,
   };
 })();

package/dist/assets/directive-tabs/client.js

@@ -1,14 +1,15 @@
 hyperbook.tabs = (function () {
-  let allTabs = document.querySelectorAll(".directive-tabs .tab[data-tabs-id]");
-
-  allTabs.forEach((tab) =>
-    tab.addEventListener("click", () => {
-      selectTab(
-        tab.getAttribute("data-tabs-id"),
-        tab.getAttribute("data-tab-id"),
-      );
-    }),
-  );
+  const init = (root) => {
+    let allTabs = root.querySelectorAll(".directive-tabs .tab[data-tabs-id]");
+    allTabs.forEach((tab) =>
+      tab.addEventListener("click", () => {
+        selectTab(
+          tab.getAttribute("data-tabs-id"),
+          tab.getAttribute("data-tab-id"),
+        );
+      }),
+    );
+  };
 
   function selectTab(tabsId, tabId) {
     let relevantTabButtons = document.querySelectorAll(
@@ -31,7 +32,23 @@ hyperbook.tabs = (function () {
     });
   }
 
+  init(document.body);
+
+  // Observe for new tabs added to the DOM
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      mutation.addedNodes.forEach((node) => {
+        if (node.nodeType === 1) { // Element node
+          init(node);
+        }
+      });
+    });
+  });
+
+  observer.observe(document.body, { childList: true, subtree: true });
+
   return {
     selectTab,
+    init,
   };
 })();

package/dist/assets/prism/prism.css

@@ -1,3 +1,5 @@
 /* PrismJS 1.29.0
-https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+java+plsql+python+sql&plugins=line-numbers+toolbar+copy-to-clipboard+download-button */
 code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.token.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}
+pre[class*=language-].line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}pre[class*=language-].line-numbers>code{position:relative;white-space:inherit}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}
+div.code-toolbar{position:relative}div.code-toolbar>.toolbar{position:absolute;z-index:10;top:.3em;right:.2em;transition:opacity .3s ease-in-out;opacity:0}div.code-toolbar:hover>.toolbar{opacity:1}div.code-toolbar:focus-within>.toolbar{opacity:1}div.code-toolbar>.toolbar>.toolbar-item{display:inline-block}div.code-toolbar>.toolbar>.toolbar-item>a{cursor:pointer}div.code-toolbar>.toolbar>.toolbar-item>button{background:0 0;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}div.code-toolbar>.toolbar>.toolbar-item>a,div.code-toolbar>.toolbar>.toolbar-item>button,div.code-toolbar>.toolbar>.toolbar-item>span{color:#bbb;font-size:.8em;padding:0 .5em;background:#f5f2f0;background:rgba(224,224,224,.2);box-shadow:0 2px 0 0 rgba(0,0,0,.2);border-radius:.5em}div.code-toolbar>.toolbar>.toolbar-item>a:focus,div.code-toolbar>.toolbar>.toolbar-item>a:hover,div.code-toolbar>.toolbar>.toolbar-item>button:focus,div.code-toolbar>.toolbar>.toolbar-item>button:hover,div.code-toolbar>.toolbar>.toolbar-item>span:focus,div.code-toolbar>.toolbar>.toolbar-item>span:hover{color:inherit;text-decoration:none}