Define hydra, mercury and strudel globals on parent Window to s…

…hare global variables between languages (#274)

Fixes #272

Also, define `m` global reference to Mercury RMS meter function (#213)
on Hydra context.

packages/web/src/lib/mercury-wrapper.ts

@@ -1,12 +1,5 @@
 import { Mercury } from "mercury-engine";
 
-// global variable m for the main output sound from Mercury
-declare global {
-  interface Window {
-    m: number;
-  }
-}
-
 export type ErrorHandler = (error: string) => void;
 
 export class MercuryWrapper {
@@ -16,8 +9,6 @@ export class MercuryWrapper {
   protected _onWarning: ErrorHandler;
   protected _repl: any;
   protected _code: any;
-  protected _meter: any;
-  // protected _docPatterns: any;
 
   constructor({
     onError,
@@ -26,7 +17,6 @@ export class MercuryWrapper {
     onError?: ErrorHandler;
     onWarning?: ErrorHandler;
   }) {
-    // this._docPatterns = {};
     this._onError = onError || (() => {});
     this._onWarning = onWarning || (() => {});
   }
@@ -47,8 +37,6 @@ export class MercuryWrapper {
 
         // initialize the meter
         this._repl.addMeter();
-        // update the value every 16ms for 60fps
-        this._meter = setInterval(() => (window.m = this._repl.getMeter()), 16);
       },
       onmidi: () => {
         console.log("MIDI devices ready");
@@ -84,4 +72,9 @@ export class MercuryWrapper {
       }
     }
   }
+
+  getMeter() {
+    if (!this.initialized) return 0;
+    return this._repl.getMeter();
+  }
 }

packages/web/src/routes/frames/hydra.tsx

@@ -1,10 +1,17 @@
 import HydraCanvas from "@/components/hydra-canvas";
+import { useAnimationFrame } from "@/hooks/use-animation-frame";
 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";
 
+declare global {
+  interface Window {
+    m: number; // meter value from Mercury
+  }
+}
+
 export function Component() {
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const hasWebGl = useMemo(() => isWebglSupported(), []);
@@ -37,9 +44,18 @@ export function Component() {
 
       await hydra.initialize();
       setInstance(hydra);
+
+      window.parent.hydra = window;
     })();
   }, []);
 
+  // Update global value `m` for Mercury RMS meter (see src/routes/frames/mercury-web.tsx)
+  useAnimationFrame(
+    useCallback(() => {
+      window.m = window.parent?.mercury?.m;
+    }, [])
+  );
+
   useEvalHandler(
     useCallback(
       (msg) => {

packages/web/src/routes/frames/mercury-web.tsx

@@ -4,6 +4,12 @@ import { sendToast } from "@/lib/utils";
 import { type EvalMessage } from "@flok-editor/session";
 import { useCallback, useEffect, useState } from "react";
 
+declare global {
+  interface Window {
+    m: number; // meter value
+  }
+}
+
 export function Component() {
   const [instance, setInstance] = useState<any>(null);
 
@@ -19,6 +25,8 @@ export function Component() {
       });
 
       setInstance(instance);
+
+      window.parent.mercury = window;
     })();
   }, []);
 
@@ -32,5 +40,15 @@ export function Component() {
     )
   );
 
+  useEffect(() => {
+    // update the value every 16ms for 60fps
+    const meter = setInterval(() => {
+      if (!instance) return;
+      window.m = instance.getMeter();
+    }, 16);
+
+    return () => clearInterval(meter);
+  });
+
   return null;
 }

packages/web/src/routes/frames/strudel.tsx

@@ -20,6 +20,8 @@ export function Component() {
 
       await instance.importModules();
       setInstance(instance);
+
+      window.parent.strudel = window;
     })();
   }, []);
 

packages/web/src/routes/session.tsx

@@ -45,6 +45,9 @@ import {
 declare global {
   interface Window {
     documentsContext: { [docId: string]: any };
+    hydra: any;
+    mercury: any;
+    strudel: any;
   }
 }