first attempt to use iframe for p5

Author: mikebarkmin

.gitignore

@@ -6,6 +6,7 @@ vdirectory.public.json
 vfiles.json
 
 packages/markdown/index.html
+packages/markdown/public
 
 *.zip
 

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

@@ -0,0 +1,7 @@
+.directive-p5 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 16px;
+  overflow: scroll;
+}

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

@@ -1,37 +1,3 @@
 # Test Site
 
-
-```mermaid
-classDiagram
-    Kryptomat <|-- Caesar
-    Kryptomat <|-- Vigenere
-    <<Abstract>> Kryptomat
-    Kryptomat: -String gt
-    Kryptomat: -String kt
-    Kryptomat: +Kryptomat()
-    Kryptomat: +verschluesseln()*
-    Kryptomat: +entschlüsseln()*
-    Kryptomat: -zahlenZuBuchstaben(int pWert) char
-    Kryptomat: -buchstabenZuZahlen(char pWert) int
-    Kryptomat: +getGt() String
-    Kryptomat: +setGt(String pGt) void
-    Kryptomat: +getKt() String
-    Kryptomat: +setKt(String pKt) void
-
-    class Caesar{
-      -int schluessel
-      +Caesar()
-      +getSchluessel() int
-      +setSchluessel(int pSchluessel) void 
-      +verschluesseln() void
-      +entschluesseln() void
-    }
-    class Vigenere{
-      -String schluessel
-      +Vigenere()
-      +getSchluessel() String
-      +setSchluessel(String pSchluessel) void
-      +verschluesseln() void
-      +entschluesseln() void
-    }
-```
+::p5{src="koch.js"}

packages/markdown/dev.md

@@ -68,8 +68,10 @@ const result = await process(markdown, {
     if (typeof p === "string") {
       p = [p];
     }
-    if (base === "public" || base === "book") {
-      return path.posix.join("", ...p);
+    if (base === "public") {
+      return path.posix.join("/public", ...p);
+    } else if (base === "book") {
+      return path.posix.join("/", ...p);
     }
     if (base === "assets") {
       return path.posix.join("/dist", base, ...p);

packages/markdown/devBuild.mjs

@@ -81,6 +81,7 @@
     "live-server": "^1.2.2",
     "mermaid": "11.3.0",
     "ncp": "^2.0.0",
+    "p5": "^1.11.1",
     "scratchblocks": "^3.6.4",
     "vfile": "^6.0.3",
     "vitest": "^1.6.0",

packages/markdown/package.json

@@ -79,6 +79,20 @@ async function postbuild() {
         "hyperbook-excalidraw.umd.js",
       ),
     },
+    {
+      src: path.join("./node_modules", "p5", "lib", "p5.min.js"),
+      dst: path.join("./dist", "assets", "directive-p5", "p5.min.js"),
+    },
+    {
+      src: path.join(
+        "./node_modules",
+        "p5",
+        "lib",
+        "addons",
+        "p5.sound.min.js",
+      ),
+      dst: path.join("./dist", "assets", "directive-p5", "p5.sound.min.js"),
+    },
   ];
 
   for (let asset of assets) {

packages/markdown/postbuild.mjs

@@ -46,6 +46,7 @@ import remarkDirectiveTerm from "./remarkDirectiveTerm";
 import remarkLink from "./remarkLink";
 import remarkDirectivePagelist from "./remarkDirectivePagelist";
 import rehypeQrCode from "./rehypeQrCode";
+import rehypeDirectiveP5 from "./rehypeDirectiveP5";
 
 const remark = (ctx: HyperbookContext) => {
   const remarkPlugins: PluggableList = [
@@ -107,6 +108,7 @@ const remark = (ctx: HyperbookContext) => {
         },
       },
     ],
+    rehypeDirectiveP5(ctx),
     rehypeFormat,
   ];
 

packages/markdown/src/process.ts

@@ -0,0 +1,123 @@
+// Register directive nodes in mdast:
+/// <reference types="mdast-util-directive" />
+//
+import { HyperbookContext } from "@hyperbook/types";
+import { Root } from "mdast";
+import fs from "fs";
+import path from "path";
+import { visit } from "unist-util-visit";
+import { VFile } from "vfile";
+import {
+  expectContainerDirective,
+  isDirective,
+  registerDirective,
+} from "./remarkHelper";
+
+interface CodeBundle {
+  js?: string;
+  scripts?: string[];
+}
+
+export default (ctx: HyperbookContext) => () => {
+  const name = "p5";
+  const cdnLibraryUrl = ctx.makeUrl(
+    path.posix.join("directive-p5", "p5.min.js"),
+    "assets",
+  );
+
+  const wrapSketch = (sketchCode?: string) => {
+    if (sketchCode !== "" && !sketchCode?.includes("setup")) {
+      return `
+      function setup() {
+        createCanvas(100, 100);
+        background(200);
+        ${sketchCode}
+      }`;
+    }
+    return sketchCode;
+  };
+
+  // see https://github.com/processing/p5.js-website/blob/main/src/components/CodeEmbed/frame.tsx
+  const wrapInMarkup = (code: CodeBundle) =>
+    `<!DOCTYPE html>
+<meta charset="utf8" />
+<base href="${ctx.makeUrl("", "public")}" />
+<style type='text/css'>
+html, body {
+  margin: 0;
+  padding: 0;
+}
+canvas {
+  display: block;
+}
+</style>
+${(code.scripts ? [cdnLibraryUrl, ...code.scripts] : []).map((src) => `<script type="text/javascript" src="${src}"></script>`).join("\n")}
+<body>Hallo</body>
+<script id="code" type="text/javascript">${wrapSketch(code.js) || ""}</script>
+${
+  (code.scripts?.length ?? 0) > 0
+    ? ""
+    : `
+<script type="text/javascript">
+  // Listen for p5.min.js text content and include in iframe's head as script
+  window.addEventListener("message", event => {
+    // Include check to prevent p5.min.js from being loaded twice
+    const scriptExists = !!document.getElementById("p5ScriptTagInIframe");
+    if (!scriptExists && event.data?.sender === '${cdnLibraryUrl}') {
+      const p5ScriptElement = document.createElement('script');
+      p5ScriptElement.id = "p5ScriptTagInIframe";
+      p5ScriptElement.type = 'text/javascript';
+      p5ScriptElement.textContent = event.data.message;
+      document.head.appendChild(p5ScriptElement);
+    }
+  })
+</script>
+`
+}
+`.replace(/\u00A0/g, " ");
+
+  return (tree: Root, file: VFile) => {
+    visit(tree, function (node) {
+      if (node.type === "element" && node.tagName === "p5") {
+        const { src = "" } = node.properties || {};
+
+        expectContainerDirective(node, file, name);
+        registerDirective(file, name, [], ["style.css"]);
+
+        const srcFile = fs.readFileSync(
+          path.join(ctx.root, "public", String(src)),
+          "utf8",
+        );
+
+        const srcdoc = wrapInMarkup({
+          js: srcFile,
+          scripts: [
+            ctx.makeUrl(
+              path.posix.join("directive-p5", "p5.sound.min.js"),
+              "assets",
+            ),
+          ],
+        });
+        node.tagName = "div";
+        node.properties = {
+          class: "directive-p5",
+        };
+        node.children = [
+          {
+            type: "element",
+            tagName: "iframe",
+            properties: {
+              srcdoc: srcdoc,
+              loading: "eager",
+              sandbox:
+                "allow-scripts allow-popups allow-modals allow-forms allow-same-origin",
+              "aria-label": "Code Preview",
+              title: "Code Preview",
+            },
+            children: [],
+          },
+        ];
+      }
+    });
+  };
+};

packages/markdown/src/rehypeDirectiveP5.ts

@@ -0,0 +1,33 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`remarkDirectiveEmbed > should transform 1`] = `
+"
+<div class="directive-p5">
+  <iframe srcdoc="<!DOCTYPE html>
+<meta charset=&#x22;utf8&#x22; />
+<base href=&#x22;/public&#x22; />
+<style type='text/css'>
+html, body {
+  margin: 0;
+  padding: 0;
+}
+canvas {
+  display: block;
+}
+</style>
+<script type=&#x22;text/javascript&#x22; src=&#x22;/assets/directive-p5/p5.min.js&#x22;></script>
+<script type=&#x22;text/javascript&#x22; src=&#x22;/assets/directive-p5/p5.sound.min.js&#x22;></script>
+<body>Hallo</body>
+<script id=&#x22;code&#x22; type=&#x22;text/javascript&#x22;>function setup() {
+  createCanvas(720, 200);
+  background(0);
+}
+function draw() {
+  circle(mouseX, mouseY, 50);
+}
+</script>
+
+" loading="eager" sandbox="allow-scripts allow-popups allow-modals allow-forms allow-same-origin" aria-label="Code Preview" title="Code Preview"></iframe>
+</div>
+"
+`;