feat: improvements

src/routes/sandbox/+page.svelte

@@ -1,15 +1,17 @@
-<script>
-  // @ts-nocheck
-  let ongoingRequest;
-  let resolveRequest;
-  let source;
-  async function post(channel, args) {
+<script lang="ts">
+  import type { ChannelEventData } from "../(app)/plugin/plugin-types";
+
+  let ongoingRequest: Promise<unknown> | undefined = undefined;
+  let resolveRequest: ((data: unknown) => void) | undefined = undefined;
+  let source: MessageEventSource | undefined = undefined;
+
+  async function post(channel: string, args: unknown[]) {
     while (ongoingRequest) {
       await ongoingRequest;
     }
     ongoingRequest = new Promise((resolve) => {
       resolveRequest = resolve;
-      source.postMessage([channel, args], "*");
+      source?.postMessage([channel, args], { targetOrigin: "*" });
     });
     ongoingRequest.then(() => {
       ongoingRequest = undefined;
@@ -17,13 +19,13 @@
     return ongoingRequest;
   }
 
-  window.addEventListener("message", (event) => {
+  function onMessage(event: MessageEvent<ChannelEventData>) {
     if ("response" in event.data) {
-      resolveRequest(event.data.response);
+      resolveRequest?.(event.data.response);
     } else {
-      source = event.source;
+      source = event.source ?? undefined;
 
-      var Action = event.data.actionCodes;
+      const Action = event.data.actionCodes;
       Object.assign(
         Action,
         Object.fromEntries(
@@ -33,12 +35,17 @@
         ),
       );
 
-      var Chara = {};
-      for (const fn of event.data.charaChannels) {
-        Chara[fn] = (...args) => post(fn, args);
-      }
-
-      eval(`(async function(){${event.data.script}})()`);
+      new Function("Action", "Chara", event.data.script)(
+        Action,
+        Object.fromEntries(
+          event.data.charaChannels.map((name) => [
+            name,
+            (...args: unknown[]) => post(name, args),
+          ]),
+        ),
+      );
     }
-  });
+  }
 </script>
+
+<svelte:window on:message={onMessage} />