From 5af91ea7929d0bbe6fa45e20ce99e2cb38b7ff3a Mon Sep 17 00:00:00 2001
From: Steven Vandevelde <steven@tokono.ma>
Date: Sun, 9 Mar 2025 17:25:42 +0100
Subject: [PATCH] refactor: Easier reactive state + some other improvements

---
 .../{engines => engine}/audio/index.astro     |  2 +-
 .../audio/manifest.json.ts                    |  2 +-
 src/pages/index.astro                         | 58 ++++++++-----------
 src/pages/{interface => ui}/audio/index.astro |  2 +-
 .../{interface => ui}/audio/manifest.json.ts  |  2 +-
 5 files changed, 27 insertions(+), 39 deletions(-)
 rename src/pages/{engines => engine}/audio/index.astro (97%)
 rename src/pages/{engines => engine}/audio/manifest.json.ts (95%)
 rename src/pages/{interface => ui}/audio/index.astro (96%)
 rename src/pages/{interface => ui}/audio/manifest.json.ts (93%)

diff --git a/src/pages/engines/audio/index.astro b/src/pages/engine/audio/index.astro
similarity index 97%
rename from src/pages/engines/audio/index.astro
rename to src/pages/engine/audio/index.astro
index 96deb7e..47a5931 100644
--- a/src/pages/engines/audio/index.astro
+++ b/src/pages/engine/audio/index.astro
@@ -2,7 +2,7 @@
 import Applet from "../../../layouts/applet.astro";
 ---
 
-<Applet title="Diffuse engines/audio applet">
+<Applet title="Diffuse engine/audio applet">
   <div id="container">
     <audio
       src="https://archive.org/download/lp_moonlight-sonata_ludwig-van-beethoven-frdric-chopin-alexand/disc1%2F01.02.%20Moonlight%20Sonata%20Op.%2027%2C%20No.%202%20In%20C%20Sharp%20Minor%3A%20Allegretto.mp3?tunnel=1"
diff --git a/src/pages/engines/audio/manifest.json.ts b/src/pages/engine/audio/manifest.json.ts
similarity index 95%
rename from src/pages/engines/audio/manifest.json.ts
rename to src/pages/engine/audio/manifest.json.ts
index b741856..7c3c3ba 100644
--- a/src/pages/engines/audio/manifest.json.ts
+++ b/src/pages/engine/audio/manifest.json.ts
@@ -1,7 +1,7 @@
 import { manifest } from "../../../common/pages/manifest.ts";
 
 export const GET = manifest({
-  name: "diffuse/engines/audio",
+  name: "diffuse/engine/audio",
   entrypoint: "index.html",
   actions: {
     load: {
diff --git a/src/pages/index.astro b/src/pages/index.astro
index b974735..e2f3f3f 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -3,13 +3,13 @@ import Page from "../layouts/page.astro";
 ---
 
 <Page title="Diffuse Applets Usage Example">
-  <iframe src="engines/audio/" frameborder="0" height="0" width="0"></iframe>
-  <iframe src="interface/audio/" frameborder="0" style="width: 100%"></iframe>
+  <iframe src="engine/audio/" frameborder="0" height="0" width="0"></iframe>
+  <iframe src="ui/audio/" frameborder="0" style="width: 100%"></iframe>
 </Page>
 
 <style>
   body {
-    background: darkgray;
+    background: darkgrey;
   }
 </style>
 
@@ -18,35 +18,25 @@ import Page from "../layouts/page.astro";
   import { effect, signal } from "spellcaster/spellcaster.js";
 
   ////////////////////////////////////////////
-  // 🗂️ Applet index
+  // 🗂️ Applets
   ////////////////////////////////////////////
-  const index = {
-    engines: {
-      audio: await applet("engines/audio"),
-    },
-    interface: {
-      audio: await applet("interface/audio", { setHeight: true }),
-    },
+  const engine = {
+    audio: await applet("engine/audio"),
+  };
+
+  const ui = {
+    audio: await applet("ui/audio", { setHeight: true }),
   };
 
   ////////////////////////////////////////////
   // ⚡ Connect applets
   ////////////////////////////////////////////
-  index.interface.audio.ondata = (event) => {
-    if (event.data.isPlaying) {
-      index.engines.audio.sendAction("play", null);
-    } else {
-      index.engines.audio.sendAction("pause", null);
-    }
-  };
-
-  reactive(index.engines.audio, "isPlaying", (isPlaying: boolean) =>
-    index.interface.audio.sendAction("set_is_playing", isPlaying),
+  reactive(ui.audio, (isPlaying: boolean) =>
+    engine.audio.sendAction(isPlaying ? "play" : "pause", null),
   );
 
-  reactive(index.engines.audio, "progress", (progress: number) =>
-    index.interface.audio.sendAction("set_progress", progress),
-  );
+  reactive(engine.audio, (isPlaying: boolean) => ui.audio.sendAction("set_is_playing", isPlaying));
+  reactive(engine.audio, (progress: number) => ui.audio.sendAction("set_progress", progress));
 
   ////////////////////////////////////////////
   // 🪟 Applet initialiser
@@ -56,23 +46,21 @@ import Page from "../layouts/page.astro";
       `[src="${src}${src.endsWith("/") ? "" : "/"}"]`,
     );
 
-    if (opts.setHeight) {
-      frame.addEventListener(
-        "load",
-        () => {
-          frame.height = frame.contentWindow.document.body.scrollHeight + "px";
-        },
-        { once: true },
-      );
-    }
+    const applet = await applets.connect(frame.contentWindow);
+    if (opts.setHeight) applet.onresize = () => (frame.height = `${applet.height}px`);
 
-    return await applets.connect(frame.contentWindow);
+    return applet;
   }
 
   ////////////////////////////////////////////
   // 🔮 Reactive state management
   ////////////////////////////////////////////
-  function reactive<P extends string, T>(applet: Applet, property: P, effectFn: (t: T) => void) {
+  function reactive<P extends string, T>(applet: Applet, effectFn: (t: T) => void) {
+    const property = effectFn
+      .toString()
+      .slice(1)
+      .match(/([^(\)|,|\s)]+)/)[1];
+
     const [getter, setter] = signal(applet.data[property] as T);
 
     effect(() => effectFn(getter()));
diff --git a/src/pages/interface/audio/index.astro b/src/pages/ui/audio/index.astro
similarity index 96%
rename from src/pages/interface/audio/index.astro
rename to src/pages/ui/audio/index.astro
index 2b595e9..9286694 100644
--- a/src/pages/interface/audio/index.astro
+++ b/src/pages/ui/audio/index.astro
@@ -2,7 +2,7 @@
 import Applet from "../../../layouts/applet.astro";
 ---
 
-<Applet title="Diffuse interface/audio applet">
+<Applet title="Diffuse ui/audio applet">
   <div
     style="background: dimgray; color: white; height: 100px; line-height: 100px; text-align: center;"
   >
diff --git a/src/pages/interface/audio/manifest.json.ts b/src/pages/ui/audio/manifest.json.ts
similarity index 93%
rename from src/pages/interface/audio/manifest.json.ts
rename to src/pages/ui/audio/manifest.json.ts
index 80eb644..61e05aa 100644
--- a/src/pages/interface/audio/manifest.json.ts
+++ b/src/pages/ui/audio/manifest.json.ts
@@ -1,7 +1,7 @@
 import { manifest } from "../../../common/pages/manifest.ts";
 
 export const GET = manifest({
-  name: "diffuse/interface/audio",
+  name: "diffuse/ui/audio",
   entrypoint: "index.html",
   actions: {
     set_is_playing: {
-- 
2.51.2