run strudel in an iframe

index.html

@@ -176,5 +176,6 @@ <h1>Are you sure?</h1>
     <script type="module" src="./src/main.js"></script>
     <script type="module" src="./src/settings.js"></script>
     <script type="module" src="./src/confirm.js"></script>
+    <iframe src="/strudel" id="strudel"></iframe>
   </body>
 </html>

src/main.js

@@ -11,35 +11,12 @@ import {
   highlightMiniLocations,
   updateMiniLocations,
 } from "@strudel/codemirror";
-import { StrudelSession } from "./strudel";
 import { strudelTheme } from "./theme";
 
 import "./style.css";
 
 const editorViews = new Map();
 
-const onError = (err, docId) => {
-  console.log("onError", docId);
-  console.error(err);
-};
-
-const onHighlight = (docId, haps, phase) => {
-  // update codemirror view to highlight this frame's haps
-  const view = editorViews.get(docId);
-  // console.log(docId, haps);
-  highlightMiniLocations(view, phase || 0, haps || []);
-};
-const onUpdateMiniLocations = (docId, miniLocations) => {
-  const view = editorViews.get(docId);
-  updateMiniLocations(view, miniLocations);
-};
-
-const strudel = new StrudelSession({
-  onError,
-  onHighlight,
-  onUpdateMiniLocations,
-});
-
 const flokBasicSetup = (doc) => {
   const text = doc.getText();
   const undoManager = new UndoManager(text);
@@ -113,11 +90,6 @@ const createEditor = (doc) => {
   });
 };
 
-const handleEvalHydra = (msg) => {
-  console.log("eval:hydra", msg);
-  // evaluate hydra code here...
-};
-
 const session = new Session("pastagang", {
   // changed this part to what flok.cc uses
   hostname: "flok.cc",
@@ -128,20 +100,60 @@ window.session = session;
 
 /* session.on("change", (...args) => console.log("change", ...args));
 session.on("message", (msg) => console.log("message", msg)); */
-session.on("eval:hydra", handleEvalHydra);
-session.on("eval:strudel", (msg) => strudel.eval(msg));
 
 session.on("sync", () => {
   // If session is empty, create two documents
   if (session.getDocuments().length === 0) {
     session.setActiveDocuments([
-      { id: "slot1", target: "strudel" },
-      { id: "slot2", target: "strudel" },
+      { id: "1", target: "strudel" },
+      { id: "2", target: "strudel" },
+      { id: "3", target: "strudel" },
+      { id: "4", target: "strudel" },
     ]);
   }
 
   // Create editors for each document
   session.getDocuments().map((doc) => createEditor(doc));
 });
 
+const handleEvalHydra = (msg) => {
+  console.log("eval:hydra", msg);
+  // evaluate hydra code here...
+};
+session.on("eval:hydra", handleEvalHydra);
+
+// strudel
+const strudelFrame = document.getElementById("strudel");
+session.on("eval:strudel", (msg) =>
+  strudelFrame.contentWindow.postMessage({ type: "eval", msg })
+);
+const strudelEventHandlers = {
+  onHighlight: (docId, phase) => {
+    // update codemirror view to highlight this frame's haps
+    const view = editorViews.get(docId);
+    // we need to set the haps on the window, as data sent through postMessage is serialized
+    // serialized haps won't work with highlightMiniLocations
+    // the strudel frame will set the needed phase and haps
+    const haps = window.highlights[docId] || [];
+    // console.log(window.highlights[docId]);
+    highlightMiniLocations(view, phase, haps);
+  },
+  onError: (err, docId) => {
+    console.log("onError", docId);
+    console.error(err);
+  },
+  onUpdateMiniLocations: (docId, miniLocations) => {
+    const view = editorViews.get(docId);
+    updateMiniLocations(view, miniLocations);
+  },
+};
+window.addEventListener("message", (event) => {
+  if (event.origin !== window.location.origin) {
+    return;
+  }
+  const handler = strudelEventHandlers[event.data.type];
+  // console.log(event.data.type, event.data.msg);
+  handler && handler(...event.data.msg);
+});
+
 session.initialize();

src/strudel.js

@@ -99,7 +99,7 @@ export class StrudelSession {
           // filter out haps belonging to this document (docId is set in eval)
           const haps =
             currentFrame.filter((h) => h.value.docId === docId) || [];
-          this.onHighlight(docId, haps, phase || 0);
+          this.onHighlight(docId, phase || 0, haps);
         });
       },
       (err) => {

src/style.css

@@ -163,3 +163,7 @@ label {
   align-items: center;
   flex-wrap: wrap;
 }
+
+iframe#strudel {
+  display: none;
+}

strudel.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+  <body style="background-color: #111">
+    <script type="module">
+      // this is expected to run in an iframe
+      // this way, strudel runs in an iframe
+      // so it wont mess with the global scope
+      // + we can sandbox the evaluation
+      // the js here is only for plumbing postMessages
+      // + creating the strudel session
+      import { StrudelSession } from "./src/strudel";
+      function send(type, msg) {
+        window.parent.postMessage({ type, msg });
+      }
+      window.parent.highlights = {};
+
+      const strudel = new StrudelSession({
+        onError: (...args) => send("onError", args),
+        onHighlight: (...args) => {
+          const [docId, phase, haps] = args;
+          window.parent.highlights[docId] = haps; // set haps on window to skip serialization
+          send("onHighlight", [docId, phase]);
+        },
+        onUpdateMiniLocations: (...args) => send("onUpdateMiniLocations", args),
+      });
+
+      window.addEventListener("message", (event) => {
+        if (event.origin !== window.location.origin) {
+          return;
+        }
+        // console.log("received", event.data);
+        if (event.data.type === "eval") {
+          strudel.eval(event.data.msg);
+        }
+      });
+
+      console.log("strudel iframe loaded", strudel);
+    </script>
+  </body>
+</html>

vite.config.js

@@ -0,0 +1,12 @@
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  build: {
+    rollupOptions: {
+      input: {
+        main: "index.html",
+        strudel: "strudel.html", // iframe
+      },
+    },
+  },
+});