From 205232cd6d968750c8c4daff58bbb9395ae981d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dami=C3=A1n=20Silvani?= <munshkr@users.noreply.github.com>
Date: Wed, 3 Apr 2024 19:49:36 -0300
Subject: [PATCH] Sandbox web languages using iframes (#268)

Fixes #239

Load web libraries in separate pages and embed them using iframes. This
way, these libraries do not pollute the global Window from the session
page and there are no collisions between the globals each library
define.

Incidentally, this also fixes #193: Because the web language libraries
are only loaded inside the iframe and thus in a separate JS context,
when unloading the Iframe DOM element, sound and visuals stop.

Strudel also adds some extensions to the Codemirror editor and has an
animation frame to update decorators. For some reason, these updates
need to run in the same context as the editor, and can't be modified
from within the Iframe page.
---
 packages/web/src/components/editor.tsx        |  31 ++---
 .../web/src/components/web-target-iframe.tsx  |  47 +++++++
 .../web/src/hooks/use-animation-frame.tsx     |  21 +++
 packages/web/src/hooks/use-eval-handler.tsx   |  21 +++
 packages/web/src/hooks/use-hydra.tsx          |  40 ------
 packages/web/src/hooks/use-mercury.tsx        |  25 ----
 .../use-strudel-codemirror-extensions.ts      |  31 +++++
 packages/web/src/hooks/use-strudel.tsx        |  34 -----
 packages/web/src/lib/hydra-wrapper.ts         |   1 -
 packages/web/src/lib/strudel-wrapper.ts       | 124 ++++++++----------
 packages/web/src/lib/utils.ts                 |  51 ++++++-
 packages/web/src/main.tsx                     |   9 +-
 packages/web/src/routes/frames/hydra.tsx      |  54 ++++++++
 .../web/src/routes/frames/mercury-web.tsx     |  36 +++++
 packages/web/src/routes/frames/strudel.tsx    |  37 ++++++
 packages/web/src/routes/session.tsx           | 112 ++++++++--------
 16 files changed, 419 insertions(+), 255 deletions(-)
 create mode 100644 packages/web/src/components/web-target-iframe.tsx
 create mode 100644 packages/web/src/hooks/use-animation-frame.tsx
 create mode 100644 packages/web/src/hooks/use-eval-handler.tsx
 delete mode 100644 packages/web/src/hooks/use-hydra.tsx
 delete mode 100644 packages/web/src/hooks/use-mercury.tsx
 create mode 100644 packages/web/src/hooks/use-strudel-codemirror-extensions.ts
 delete mode 100644 packages/web/src/hooks/use-strudel.tsx
 create mode 100644 packages/web/src/routes/frames/hydra.tsx
 create mode 100644 packages/web/src/routes/frames/mercury-web.tsx
 create mode 100644 packages/web/src/routes/frames/strudel.tsx

diff --git a/packages/web/src/components/editor.tsx b/packages/web/src/components/editor.tsx
index 7e5f82a5..8b67ed46 100644
--- a/packages/web/src/components/editor.tsx
+++ b/packages/web/src/components/editor.tsx
@@ -7,11 +7,12 @@ import {
 } from "@/settings.json";
 import { javascript } from "@codemirror/lang-javascript";
 import { python } from "@codemirror/lang-python";
-import { EditorState, Prec, Compartment, Extension } from "@codemirror/state";
+import { Compartment, EditorState, Extension, Prec } from "@codemirror/state";
 import { EditorView, keymap, lineNumbers } from "@codemirror/view";
 import { evalKeymap, flashField, remoteEvalFlash } from "@flok-editor/cm-eval";
 import { tidal } from "@flok-editor/lang-tidal";
 import type { Document } from "@flok-editor/session";
+import { highlightExtension } from "@strudel/codemirror";
 import CodeMirror, {
   ReactCodeMirrorProps,
   ReactCodeMirrorRef,
@@ -19,7 +20,6 @@ import CodeMirror, {
 import React, { useEffect, useState } from "react";
 import { yCollab } from "y-codemirror.next";
 import { UndoManager } from "yjs";
-import { highlightExtension } from '@strudel/codemirror';
 
 const defaultLanguage = "javascript";
 const langByTarget = langByTargetUntyped as { [lang: string]: string };
@@ -121,28 +121,25 @@ const flokSetup = (
   ];
 };
 
-export interface EditorProps extends ReactCodeMirrorProps {
-  document?: Document;
-}
-
 // Code example from:
 // https://codemirror.net/examples/config/#dynamic-configuration
 // Allows toggling of extensions based on string shortkey
-// 
+//
 const toggleWith = (key: string, extension: Extension) => {
-  let comp = new Compartment;
+  let comp = new Compartment();
 
   function toggle(view: EditorView) {
     let on = comp.get(view.state) == extension;
     view.dispatch({
-      effects: comp.reconfigure(on ? [] : extension)
-    })
+      effects: comp.reconfigure(on ? [] : extension),
+    });
     return true;
   }
-  return [
-    comp.of([]),
-    keymap.of([{key, run: toggle}])
-  ]
+  return [comp.of([]), keymap.of([{ key, run: toggle }])];
+};
+
+export interface EditorProps extends ReactCodeMirrorProps {
+  document?: Document;
 }
 
 export const Editor = React.forwardRef(
@@ -175,10 +172,8 @@ export const Editor = React.forwardRef(
       languageExtension(),
       highlightExtension,
       readOnly ? EditorState.readOnly.of(true) : [],
-      // toggle linenumbers on/off
-      toggleWith('shift-ctrl-l', lineNumbers()),
-      // toggle linewrapping on/off
-      toggleWith('shift-ctrl-w', EditorView.lineWrapping) 
+      toggleWith("shift-ctrl-l", lineNumbers()), // toggle linenumbers on/off
+      toggleWith("shift-ctrl-w", EditorView.lineWrapping), // toggle linewrapping on/off
     ];
 
     // If it's read-only, put a div in front of the editor so that the user
diff --git a/packages/web/src/components/web-target-iframe.tsx b/packages/web/src/components/web-target-iframe.tsx
new file mode 100644
index 00000000..2341c25b
--- /dev/null
+++ b/packages/web/src/components/web-target-iframe.tsx
@@ -0,0 +1,47 @@
+import { useQuery } from "@/hooks/use-query";
+import { EvalMessage, Session } from "@flok-editor/session";
+import { useEffect, useRef } from "react";
+
+export interface WebTargetIframeProps {
+  target: string;
+  session: Session | null;
+}
+
+export const WebTargetIframe = ({ target, session }: WebTargetIframeProps) => {
+  const ref = useRef<HTMLIFrameElement | null>(null);
+
+  const query = useQuery();
+  const noWebEval = query.get("noWebEval")?.split(",") || [];
+
+  // Check if we should load the target
+  if (noWebEval.includes(target) || noWebEval.includes("*")) {
+    return null;
+  }
+
+  // Handle evaluation messages from session
+  useEffect(() => {
+    if (!session || !ref.current) return;
+
+    const handler = (msg: EvalMessage) => {
+      const payload = {
+        type: "eval",
+        body: msg,
+      };
+      ref.current?.contentWindow?.postMessage(payload, "*");
+    };
+
+    session.on(`eval:${target}`, handler);
+
+    return () => {
+      session.off(`eval:${target}`, handler);
+    };
+  }, [session, ref]);
+
+  return (
+    <iframe
+      ref={ref}
+      src={`/frames/${target}`}
+      className="absolute inset-0 w-full h-full"
+    />
+  );
+};
diff --git a/packages/web/src/hooks/use-animation-frame.tsx b/packages/web/src/hooks/use-animation-frame.tsx
new file mode 100644
index 00000000..d733bfd0
--- /dev/null
+++ b/packages/web/src/hooks/use-animation-frame.tsx
@@ -0,0 +1,21 @@
+import { useRef, useEffect, useCallback } from "react";
+
+export function useAnimationFrame(callback: (timestamp: number) => void) {
+  const requestId = useRef<number>();
+
+  const animate = useCallback(
+    (timestamp: number) => {
+      callback(timestamp);
+      requestId.current = requestAnimationFrame(animate);
+    },
+    [callback]
+  );
+
+  useEffect(() => {
+    requestId.current = requestAnimationFrame(animate);
+
+    return () => {
+      cancelAnimationFrame(requestId.current!);
+    };
+  }, [animate]);
+}
diff --git a/packages/web/src/hooks/use-eval-handler.tsx b/packages/web/src/hooks/use-eval-handler.tsx
new file mode 100644
index 00000000..036fa35e
--- /dev/null
+++ b/packages/web/src/hooks/use-eval-handler.tsx
@@ -0,0 +1,21 @@
+import { EvalMessage } from "@flok-editor/session";
+import { useEffect } from "react";
+
+export function useEvalHandler(callback: (message: EvalMessage) => void) {
+  useEffect(() => {
+    const handleEval = (event: MessageEvent) => {
+      if (event.data.type === "eval") {
+        const msg = event.data.body as EvalMessage;
+        callback(msg);
+      }
+    };
+
+    window.addEventListener("message", handleEval);
+
+    return () => {
+      window.removeEventListener("message", handleEval);
+    };
+  }, [callback]);
+
+  return;
+}
diff --git a/packages/web/src/hooks/use-hydra.tsx b/packages/web/src/hooks/use-hydra.tsx
deleted file mode 100644
index b15d06a7..00000000
--- a/packages/web/src/hooks/use-hydra.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { useWebTarget } from "@/hooks/use-web-target";
-import { HydraWrapper } from "@/lib/hydra-wrapper";
-import type { Session } from "@flok-editor/session";
-import { useRef } from "react";
-
-export function useHydra(
-  session: Session | null,
-  onError?: (err: unknown) => void,
-  onWarning?: (msg: string) => void
-) {
-  const canvasRef = useRef<HTMLCanvasElement | null>(null);
-
-  const webTarget = useWebTarget<HydraWrapper>(
-    "hydra",
-    session,
-    async () => {
-      console.log("Create HydraWrapper");
-
-      const hydra = new HydraWrapper({
-        canvas: canvasRef.current!,
-        onError,
-        onWarning,
-      });
-
-      hydra.initialize();
-
-      return hydra;
-    },
-    {
-      deps: [canvasRef],
-      loadIf: ([canvasRef]) => canvasRef.current,
-      onEval: (instance, { body }) => {
-        instance.tryEval(body);
-      },
-      onError,
-    }
-  );
-
-  return { ...webTarget, canvasRef };
-}
diff --git a/packages/web/src/hooks/use-mercury.tsx b/packages/web/src/hooks/use-mercury.tsx
deleted file mode 100644
index cea90399..00000000
--- a/packages/web/src/hooks/use-mercury.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { useWebTarget } from "@/hooks/use-web-target";
-import { MercuryWrapper } from "@/lib/mercury-wrapper";
-import type { Session } from "@flok-editor/session";
-
-export function useMercury(
-  session: Session | null,
-  onError?: (err: unknown) => void,
-  onWarning?: (msg: string) => void
-) {
-  return useWebTarget<MercuryWrapper>(
-    "mercury-web",
-    session,
-    async () => {
-      console.log("Create Mercury Wrapper");
-
-      const mercury = new MercuryWrapper({ onError, onWarning });
-
-      return mercury;
-    },
-    {
-      onEval: (instance, { body }) => instance.tryEval(body),
-      onError,
-    }
-  );
-}
diff --git a/packages/web/src/hooks/use-strudel-codemirror-extensions.ts b/packages/web/src/hooks/use-strudel-codemirror-extensions.ts
new file mode 100644
index 00000000..0a4e1fcd
--- /dev/null
+++ b/packages/web/src/hooks/use-strudel-codemirror-extensions.ts
@@ -0,0 +1,31 @@
+import { Session } from "@flok-editor/session";
+import {
+  highlightMiniLocations,
+  updateMiniLocations,
+} from "@strudel/codemirror";
+import { ReactCodeMirrorRef } from "@uiw/react-codemirror";
+import { useCallback } from "react";
+import { useAnimationFrame } from "./use-animation-frame";
+import { forEachDocumentContext } from "@/lib/utils";
+
+export function useStrudelCodemirrorExtensions(
+  session: Session | null,
+  editorRefs: React.RefObject<ReactCodeMirrorRef>[]
+) {
+  useAnimationFrame(
+    useCallback(() => {
+      if (!session) return;
+
+      forEachDocumentContext(
+        (ctx, editor) => {
+          const view = editor?.view;
+          if (!view) return;
+          updateMiniLocations(view, ctx.miniLocations || []);
+          highlightMiniLocations(view, ctx.phase || 0, ctx.haps || []);
+        },
+        session,
+        editorRefs
+      );
+    }, [session, editorRefs])
+  );
+}
diff --git a/packages/web/src/hooks/use-strudel.tsx b/packages/web/src/hooks/use-strudel.tsx
deleted file mode 100644
index 6020c99d..00000000
--- a/packages/web/src/hooks/use-strudel.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { useWebTarget } from "@/hooks/use-web-target";
-import { StrudelWrapper } from "@/lib/strudel-wrapper";
-import type { Session } from "@flok-editor/session";
-import { ReactCodeMirrorRef } from "@uiw/react-codemirror";
-
-export function useStrudel(
-  session: Session | null,
-  onError: (err: unknown) => void,
-  onWarning: (msg: string) => void,
-  editorRefs: React.RefObject<ReactCodeMirrorRef>[]
-) {
-  return useWebTarget<StrudelWrapper>(
-    "strudel",
-    session,
-    async () => {
-      console.log("Create StrudelWrapper");
-      const strudel = new StrudelWrapper({
-        onError,
-        onWarning,
-        editorRefs,
-        session,
-      });
-
-      console.log("Import Strudel modules");
-      await strudel.importModules();
-
-      return strudel;
-    },
-    {
-      onEval: (instance, msg) => instance.tryEval(msg),
-      onError,
-    }
-  );
-}
diff --git a/packages/web/src/lib/hydra-wrapper.ts b/packages/web/src/lib/hydra-wrapper.ts
index 597fc941..1ce2f6b6 100644
--- a/packages/web/src/lib/hydra-wrapper.ts
+++ b/packages/web/src/lib/hydra-wrapper.ts
@@ -73,7 +73,6 @@ export class HydraWrapper {
 
     try {
       await eval?.(`(async () => {\n${code}\n})()`);
-      this._onError("");
     } catch (error) {
       console.error(error);
       this._onError(`${error}`);
diff --git a/packages/web/src/lib/strudel-wrapper.ts b/packages/web/src/lib/strudel-wrapper.ts
index 7a944c1c..8bcd36c7 100644
--- a/packages/web/src/lib/strudel-wrapper.ts
+++ b/packages/web/src/lib/strudel-wrapper.ts
@@ -1,36 +1,29 @@
-import type { Session, EvalMessage } from "@flok-editor/session";
+import type { EvalMessage } from "@flok-editor/session";
 import {
-  repl,
+  Framer,
+  Pattern,
   controls,
   evalScope,
-  stack,
   noteToMidi,
-  Pattern,
+  repl,
+  stack,
   valueToMidi,
-  Framer,
 } from "@strudel/core";
+import { registerSoundfonts } from "@strudel/soundfonts";
 import { transpiler } from "@strudel/transpiler";
 import {
   getAudioContext,
   initAudioOnFirstClick,
-  webaudioOutput,
-  samples,
   registerSynthSounds,
+  samples,
+  webaudioOutput,
 } from "@strudel/webaudio";
-import { registerSoundfonts } from "@strudel/soundfonts";
-import {
-  updateMiniLocations,
-  highlightMiniLocations,
-} from "@strudel/codemirror";
-import { ReactCodeMirrorRef } from "@uiw/react-codemirror";
+import { updateDocumentsContext } from "./utils";
 
 export type ErrorHandler = (error: string) => void;
 
 controls.createParam("docId");
 
-const getDocumentIndex = (docId: string, session: Session | null) =>
-  session?.getDocuments().findIndex((d) => d.id === docId) ?? -1;
-
 export class StrudelWrapper {
   initialized: boolean = false;
 
@@ -38,26 +31,47 @@ export class StrudelWrapper {
   protected _onWarning: ErrorHandler;
   protected _repl: any;
   protected _docPatterns: any;
-  protected _editorRefs: React.RefObject<ReactCodeMirrorRef>[];
-  protected _session: Session | null;
   protected framer?: any;
 
   constructor({
     onError,
     onWarning,
-    editorRefs,
-    session,
   }: {
     onError: ErrorHandler;
     onWarning: ErrorHandler;
-    editorRefs: React.RefObject<ReactCodeMirrorRef>[];
-    session: Session | null;
   }) {
     this._docPatterns = {};
     this._onError = onError || (() => {});
     this._onWarning = onWarning || (() => {});
-    this._editorRefs = editorRefs;
-    this._session = session;
+  }
+
+  async importModules() {
+    initAudioOnFirstClick();
+    // import desired modules and add them to the eval scope
+    await evalScope(
+      import("@strudel/core"),
+      import("@strudel/midi"),
+      import("@strudel/mini"),
+      import("@strudel/tonal"),
+      import("@strudel/osc"),
+      import("@strudel/serial"),
+      import("@strudel/soundfonts"),
+      import("@strudel/webaudio"),
+      controls
+    );
+    try {
+      await Promise.all([
+        loadSamples(),
+        registerSynthSounds(),
+        registerSoundfonts(),
+      ]);
+    } catch (err) {
+      this._onWarning(`Failed to load default samples EmuSP12: ${err}`);
+    }
+  }
+
+  async initialize() {
+    if (this.initialized) return;
 
     let lastFrame: number | null = null;
     this.framer = new Framer(
@@ -67,9 +81,6 @@ export class StrudelWrapper {
           lastFrame = phase;
           return;
         }
-        if (!this._editorRefs) {
-          return;
-        }
         if (!this._repl.scheduler.pattern) {
           return;
         }
@@ -84,61 +95,25 @@ export class StrudelWrapper {
         );
         // iterate over each strudel doc
         Object.keys(this._docPatterns).forEach((docId: any) => {
-          const index = getDocumentIndex(docId, this._session);
-          const editorRef = this._editorRefs?.[index];
-          if (!editorRef?.current?.view) {
-            return;
-          }
           // filter out haps belonging to this document (docId is set in tryEval)
           const haps = currentFrame.filter((h: any) => h.value.docId === docId);
           // update codemirror view to highlight this frame's haps
-
-          highlightMiniLocations(editorRef.current.view, phase, haps);
+          updateDocumentsContext(docId, { haps, phase });
         });
       },
       (err: any) => {
-        console.error("strudel draw error", err);
+        console.error("[strudel] draw error", err);
       }
     );
-  }
 
-  async importModules() {
-    initAudioOnFirstClick();
-    // import desired modules and add them to the eval scope
-    await evalScope(
-      import("@strudel/core"),
-      import("@strudel/midi"),
-      import("@strudel/mini"),
-      import("@strudel/tonal"),
-      import("@strudel/osc"),
-      import("@strudel/serial"),
-      import("@strudel/soundfonts"),
-      import("@strudel/webaudio"),
-      controls
-    );
-    try {
-      await Promise.all([
-        loadSamples(),
-        registerSynthSounds(),
-        registerSoundfonts(),
-      ]);
-    } catch (err) {
-      this._onWarning(`Failed to load default samples EmuSP12: ${err}`);
-    }
-  }
-
-  async initialize() {
     this._repl = repl({
       defaultOutput: webaudioOutput,
       afterEval: (options: any) => {
         // assumes docId is injected at end end as a comment
         const docId = options.code.split("//").slice(-1)[0];
-        const index = getDocumentIndex(docId, this._session);
-        const editorRef = this._editorRefs?.[index];
-        if (editorRef?.current) {
-          const miniLocations = options.meta?.miniLocations;
-          updateMiniLocations(editorRef.current.view, miniLocations);
-        }
+        if (!docId) return;
+        const miniLocations = options.meta?.miniLocations;
+        updateDocumentsContext(docId, { miniLocations });
       },
       beforeEval: () => {},
       onSchedulerError: (e: unknown) => this._onError(`${e}`),
@@ -147,27 +122,32 @@ export class StrudelWrapper {
       transpiler,
     });
 
-    this.framer.start(); // TODO: when to start stop?
+    this.framer.start();
 
     // For some reason, we need to make a no-op evaluation ("silence") to make
     // sure everything is loaded correctly.
-    const pattern = await this._repl.evaluate(`silence`);
+    const pattern = await this._repl.evaluate(`silence//`);
     await this._repl.scheduler.setPattern(pattern, true);
 
     this.initialized = true;
   }
 
+  async dispose() {
+    if (this.framer) {
+      this.framer.stop();
+    }
+  }
+
   async tryEval(msg: EvalMessage) {
     if (!this.initialized) await this.initialize();
     try {
       const { body: code, docId } = msg;
       // little hack that injects the docId at the end of the code to make it available in afterEval
-      const pattern = await this._repl.evaluate(code + `//${docId}`);
+      const pattern = await this._repl.evaluate(`${code}//${docId}`);
       if (pattern) {
         this._docPatterns[docId] = pattern.docId(docId); // docId is needed for highlighting
         const allPatterns = stack(...Object.values(this._docPatterns));
         await this._repl.scheduler.setPattern(allPatterns, true);
-        this._onError("");
       }
     } catch (err) {
       console.error(err);
diff --git a/packages/web/src/lib/utils.ts b/packages/web/src/lib/utils.ts
index 60eea464..309a1be5 100644
--- a/packages/web/src/lib/utils.ts
+++ b/packages/web/src/lib/utils.ts
@@ -1,10 +1,12 @@
+import { type Session } from "@flok-editor/session";
+import { ReactCodeMirrorRef } from "@uiw/react-codemirror";
 import { ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import {
-  uniqueNamesGenerator,
   adjectives,
-  colors,
   animals,
+  colors,
+  uniqueNamesGenerator,
 } from "unique-names-generator";
 import { v4 as uuidv4 } from "uuid";
 
@@ -73,3 +75,48 @@ export function code2hash(code: string) {
 export function hash2code(hash: string) {
   return base64ToUnicode(decodeURIComponent(hash));
 }
+
+export function sendToast(
+  variant: "warning" | "destructive",
+  title: string,
+  message: string,
+  pre?: boolean
+) {
+  window.parent.postMessage(
+    {
+      type: "toast",
+      body: {
+        variant,
+        title,
+        message,
+        pre,
+      },
+    },
+    "*"
+  );
+}
+
+export function updateDocumentsContext(docId: string, context: object) {
+  if (typeof window.parent.documentsContext === "undefined") {
+    window.parent.documentsContext = {};
+  }
+  const prevContext = window.parent.documentsContext[docId] || {};
+  window.parent.documentsContext[docId] = { ...prevContext, ...context };
+}
+
+export function forEachDocumentContext(
+  callback: (context: any, editor: ReactCodeMirrorRef | null) => void,
+  session: Session,
+  editorRefs: React.RefObject<ReactCodeMirrorRef>[]
+) {
+  const documentsContext = window.documentsContext || {};
+  for (const docId in documentsContext) {
+    const context = documentsContext[docId];
+    const index = getDocumentIndex(docId, session);
+    const editor = editorRefs[index]?.current;
+    callback(context, editor);
+  }
+}
+
+export const getDocumentIndex = (docId: string, session: Session | null) =>
+  session?.getDocuments().findIndex((d) => d.id === docId) ?? -1;
diff --git a/packages/web/src/main.tsx b/packages/web/src/main.tsx
index fddec212..759dc238 100644
--- a/packages/web/src/main.tsx
+++ b/packages/web/src/main.tsx
@@ -5,7 +5,7 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import ErrorPage from "./error-page";
 import "./index.css";
 import { loader as rootLoader } from "./routes/root";
-import SessionPage from "./routes/session";
+import { webTargets } from "@/settings.json";
 
 const router = createBrowserRouter([
   {
@@ -15,9 +15,12 @@ const router = createBrowserRouter([
   },
   {
     path: "s/:name",
-    element: <SessionPage />,
-    loader: ({ params: { name } }) => ({ name }),
+    lazy: () => import("./routes/session"),
   },
+  ...webTargets.map((target) => ({
+    path: `frames/${target}`,
+    lazy: () => import(`./routes/frames/${target}.tsx`),
+  })),
 ]);
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
diff --git a/packages/web/src/routes/frames/hydra.tsx b/packages/web/src/routes/frames/hydra.tsx
new file mode 100644
index 00000000..5f29dacf
--- /dev/null
+++ b/packages/web/src/routes/frames/hydra.tsx
@@ -0,0 +1,54 @@
+import HydraCanvas from "@/components/hydra-canvas";
+import { useEvalHandler } from "@/hooks/use-eval-handler";
+import { HydraWrapper } from "@/lib/hydra-wrapper";
+import { sendToast } from "@/lib/utils";
+import { isWebglSupported } from "@/lib/webgl-detector";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+export function Component() {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const hasWebGl = useMemo(() => isWebglSupported(), []);
+  const [instance, setInstance] = useState<HydraWrapper | null>(null);
+
+  useEffect(() => {
+    if (hasWebGl) return;
+    sendToast(
+      "warning",
+      "WebGL not available",
+      "WebGL is disabled or not supported, so Hydra was not initialized"
+    );
+  }, [hasWebGl]);
+
+  useEffect(() => {
+    if (!hasWebGl) return;
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    (async () => {
+      const hydra = new HydraWrapper({
+        canvas,
+        onError: (err) => {
+          sendToast("destructive", "Hydra error", err.toString());
+        },
+        onWarning: (msg) => {
+          sendToast("warning", "Hydra warning", msg);
+        },
+      });
+
+      await hydra.initialize();
+      setInstance(hydra);
+    })();
+  }, []);
+
+  useEvalHandler(
+    useCallback(
+      (msg) => {
+        if (!instance) return;
+        instance.tryEval(msg.body);
+      },
+      [instance]
+    )
+  );
+
+  return hasWebGl && canvasRef && <HydraCanvas ref={canvasRef} fullscreen />;
+}
diff --git a/packages/web/src/routes/frames/mercury-web.tsx b/packages/web/src/routes/frames/mercury-web.tsx
new file mode 100644
index 00000000..b2371332
--- /dev/null
+++ b/packages/web/src/routes/frames/mercury-web.tsx
@@ -0,0 +1,36 @@
+import { useEvalHandler } from "@/hooks/use-eval-handler";
+import { MercuryWrapper } from "@/lib/mercury-wrapper";
+import { sendToast } from "@/lib/utils";
+import { type EvalMessage } from "@flok-editor/session";
+import { useCallback, useEffect, useState } from "react";
+
+export function Component() {
+  const [instance, setInstance] = useState<any>(null);
+
+  useEffect(() => {
+    (async () => {
+      const instance = new MercuryWrapper({
+        onError: (err) => {
+          sendToast("destructive", "Mercury error", err.toString());
+        },
+        onWarning: (msg) => {
+          sendToast("warning", "Mercury warning", msg);
+        },
+      });
+
+      setInstance(instance);
+    })();
+  }, []);
+
+  useEvalHandler(
+    useCallback(
+      (msg: EvalMessage) => {
+        if (!instance) return;
+        instance.tryEval(msg.body);
+      },
+      [instance]
+    )
+  );
+
+  return null;
+}
diff --git a/packages/web/src/routes/frames/strudel.tsx b/packages/web/src/routes/frames/strudel.tsx
new file mode 100644
index 00000000..434bdb10
--- /dev/null
+++ b/packages/web/src/routes/frames/strudel.tsx
@@ -0,0 +1,37 @@
+import { useEvalHandler } from "@/hooks/use-eval-handler";
+import { StrudelWrapper } from "@/lib/strudel-wrapper";
+import { sendToast } from "@/lib/utils";
+import { type EvalMessage } from "@flok-editor/session";
+import { useCallback, useEffect, useState } from "react";
+
+export function Component() {
+  const [instance, setInstance] = useState<any>(null);
+
+  useEffect(() => {
+    (async () => {
+      const instance = new StrudelWrapper({
+        onError: (err) => {
+          sendToast("destructive", "Strudel error", err.toString());
+        },
+        onWarning: (msg) => {
+          sendToast("warning", "Strudel warning", msg);
+        },
+      });
+
+      await instance.importModules();
+      setInstance(instance);
+    })();
+  }, []);
+
+  useEvalHandler(
+    useCallback(
+      (msg: EvalMessage) => {
+        if (!instance) return;
+        instance.tryEval(msg);
+      },
+      [instance]
+    )
+  );
+
+  return null;
+}
diff --git a/packages/web/src/routes/session.tsx b/packages/web/src/routes/session.tsx
index 91710c39..8eb9eb58 100644
--- a/packages/web/src/routes/session.tsx
+++ b/packages/web/src/routes/session.tsx
@@ -1,7 +1,6 @@
 import { CommandsButton } from "@/components/commands-button";
 import { ConfigureDialog } from "@/components/configure-dialog";
 import { Editor } from "@/components/editor";
-import HydraCanvas from "@/components/hydra-canvas";
 import { MessagesPanel } from "@/components/messages-panel";
 import { Mosaic } from "@/components/mosaic";
 import { Pane } from "@/components/pane";
@@ -12,13 +11,12 @@ import { ShareUrlDialog } from "@/components/share-url-dialog";
 import { PubSubState, StatusBar, SyncState } from "@/components/status-bar";
 import { Toaster } from "@/components/ui/toaster";
 import UsernameDialog from "@/components/username-dialog";
+import { WebTargetIframe } from "@/components/web-target-iframe";
 import { WelcomeDialog } from "@/components/welcome-dialog";
 import { useHash } from "@/hooks/use-hash";
-import { useHydra } from "@/hooks/use-hydra";
-import { useMercury } from "@/hooks/use-mercury";
 import { useQuery } from "@/hooks/use-query";
 import { useShortcut } from "@/hooks/use-shortcut";
-import { useStrudel } from "@/hooks/use-strudel";
+import { useStrudelCodemirrorExtensions } from "@/hooks/use-strudel-codemirror-extensions";
 import { useToast } from "@/hooks/use-toast";
 import {
   cn,
@@ -28,18 +26,27 @@ import {
   mod,
   store,
 } from "@/lib/utils";
-import { isWebglSupported } from "@/lib/webgl-detector";
 import {
   defaultTarget,
   knownTargets,
   panicCodes as panicCodesUntyped,
   webTargets,
 } from "@/settings.json";
-import { Document, Session } from "@flok-editor/session";
-import { ReactCodeMirrorRef } from "@uiw/react-codemirror";
+import { Session, type Document } from "@flok-editor/session";
+import { type ReactCodeMirrorRef } from "@uiw/react-codemirror";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Helmet } from "react-helmet-async";
-import { useLoaderData, useNavigate } from "react-router-dom";
+import {
+  LoaderFunctionArgs,
+  useLoaderData,
+  useNavigate,
+} from "react-router-dom";
+
+declare global {
+  interface Window {
+    documentsContext: { [docId: string]: any };
+  }
+}
 
 const panicCodes = panicCodesUntyped as { [target: string]: string };
 
@@ -54,7 +61,11 @@ export interface Message {
   body: string[];
 }
 
-export default function SessionPage() {
+export async function loader({ params }: LoaderFunctionArgs) {
+  return { name: params.name };
+}
+
+export function Component() {
   const query = useQuery();
   const [hash, setHash] = useHash();
 
@@ -89,7 +100,7 @@ export default function SessionPage() {
     useRef<ReactCodeMirrorRef>(null)
   );
 
-  const hasWebGl = useMemo(() => isWebglSupported(), []);
+  useStrudelCodemirrorExtensions(session, editorRefs);
 
   const { toast: _toast } = useToast();
   const hideErrors = !!query.get("hideErrors");
@@ -275,18 +286,6 @@ export default function SessionPage() {
     return () => newSession.destroy();
   }, [name]);
 
-  // Show a warning if WebGL is not enabled
-  useEffect(() => {
-    if (!session || hasWebGl) return;
-
-    toast({
-      variant: "warning",
-      title: "WebGL not available",
-      description:
-        "WebGL is disabled or not supported, so Hydra was not initialized",
-    });
-  }, [session, hasWebGl]);
-
   useEffect(() => {
     if (!session) return;
     console.log(`Setting user on session to '${username}'`);
@@ -341,23 +340,26 @@ export default function SessionPage() {
     setSessionUrl(`${currentURL}#${hashString}`);
   }, [session, shareUrlDialogOpen]);
 
-  // Load external libraries
-  useStrudel(
-    session,
-    (err) => handleWebError("Strudel", err),
-    (msg) => handleWebWarning("Strudel", msg),
-    editorRefs
-  );
-  useMercury(
-    session,
-    (err) => handleWebError("Mercury", err),
-    (msg) => handleWebWarning("Mercury", msg)
-  );
-  const { canvasRef: hydraCanvasRef } = useHydra(
-    session,
-    (err) => handleWebError("Hydra", err),
-    (msg) => handleWebWarning("Hydra", msg)
-  );
+  // Handle window messages from iframes
+  useEffect(() => {
+    const messageHandler = (event: MessageEvent) => {
+      if (event.data.type === "toast") {
+        const { variant, title, message, pre } = event.data.body;
+        const description = pre ? (
+          <pre className="whitespace-pre-wrap">{message}</pre>
+        ) : (
+          message
+        );
+        toast({ variant, title, description });
+      }
+    };
+
+    window.addEventListener("message", messageHandler);
+
+    return () => {
+      window.removeEventListener("message", messageHandler);
+    };
+  }, []);
 
   const focusEditor = (i: number) => {
     const ref = editorRefs[i].current;
@@ -473,24 +475,6 @@ export default function SessionPage() {
     );
   };
 
-  const handleWebError = (title: string, error: unknown) => {
-    if (!error) return;
-    toast({
-      variant: "destructive",
-      title,
-      description: <pre className="whitespace-pre-wrap">{String(error)}</pre>,
-    });
-  };
-
-  const handleWebWarning = (title: string, msg: string) => {
-    if (!msg) return;
-    toast({
-      variant: "warning",
-      title,
-      description: msg,
-    });
-  };
-
   const handleAutoShowToggleClick = useCallback((pressed: boolean) => {
     store.set("messages:autoshow", pressed);
     setAutoShowMessages(pressed);
@@ -508,6 +492,14 @@ export default function SessionPage() {
 
   const bgOpacity = query.get("bgOpacity") || "1.0";
 
+  const activeWebTargets = useMemo(
+    () =>
+      webTargets.filter((target) =>
+        documents.some((doc) => doc.target === target)
+      ),
+    [documents]
+  );
+
   return (
     <div style={{ backgroundColor: `rgb(0 0 0 / ${bgOpacity})` }}>
       <Helmet>
@@ -580,9 +572,9 @@ export default function SessionPage() {
           </Pane>
         ))}
       />
-      {hasWebGl && hydraCanvasRef && (
-        <HydraCanvas ref={hydraCanvasRef} fullscreen />
-      )}
+      {activeWebTargets.map((target) => (
+        <WebTargetIframe key={target} session={session} target={target} />
+      ))}
       <div
         className={cn(
           "fixed top-1 right-1 flex m-1",