refactor(client): use generic messengers in awaitResponse (#59272)

client/src/templates/Challenges/utils/awaitable-messenger.ts

@@ -1,30 +1,34 @@
+export type Messenger<Message> = {
+  postMessage: (message: Message, options: WindowPostMessageOptions) => void;
+};
+
 /**
- * Sends a message to a web worker and awaits a response.
+ * Sends a message via a messenger (an object containing postMessage) and awaits a response.
  *
- * @template MessageOut - The type of the message being sent to the worker.
- * @template MessageIn - The type of the message expected from the worker. Must include a `type` and `value` property.
+ * @template MessageOut - The type of the message being sent.
+ * @template MessageIn - The type of the message expected to be returned. Must include a `type` and `value` property.
  * @template Value - The type of the value expected in the response message.
  *
  * @param {Object} params - The parameters for the function.
- * @param {Worker} params.worker - The web worker to send the message to.
- * @param {MessageOut} params.message - The message to send to the worker.
- * @param {Function} params.onMessage - A callback function to handle the response from the worker.
- * @param {MessageIn} params.onMessage.response - The response message from the worker.
- * @param {Function} params.onMessage.resolve - A function to resolve the promise with the response value.
- * @param {Function} params.onMessage.reject - A function to reject the promise with an error message.
+ * @param {Message} params.messenger - An object cabable of sending messages via postMessage.
+ * @param {MessageOut} params.message - The message to send .
+ * @param {Function} params.onMessage - A callback function to handle the response.
+ * @param {MessageIn} params.onMessage.response - The response message.
+ * @param {Function} params.onMessage.resolve - A function which, when called, resolves the promise with its argument.
+ * @param {Function} params.onMessage.reject - A function which, when called, rejects the promise with its argument.
  *
- * @returns {Promise<Value>} A promise that resolves with the response value from the worker or rejects with an error message.
+ * @returns {Promise<Value>} A promise that resolves with the response value or rejects with an error message.
  */
 export function awaitResponse<
   MessageOut,
   MessageIn extends { type: string; value: Value; error: string },
   Value
 >({
-  worker,
+  messenger,
   message,
   onMessage
 }: {
-  worker: Worker;
+  messenger: Messenger<MessageOut>;
   message: MessageOut;
   onMessage: (
     response: MessageIn,
@@ -48,7 +52,10 @@ export function awaitResponse<
         onMessage(event.data, resolve, reject);
       };
 
-      worker.postMessage(message, [channel.port2]);
+      messenger.postMessage(message, {
+        targetOrigin: '*',
+        transfer: [channel.port2]
+      });
     }
   );
 }

client/src/templates/Challenges/utils/typescript-worker-handler.ts

@@ -1,5 +1,5 @@
 import typeScriptWorkerData from '../../../../config/browser-scripts/typescript-worker.json';
-import { awaitResponse } from './worker-messenger';
+import { awaitResponse } from './awaitable-messenger';
 
 const typeScriptWorkerSrc = `/js/${typeScriptWorkerData.filename}.js`;
 
@@ -14,7 +14,7 @@ function getTypeScriptWorker(): Worker {
 
 export function compileTypeScriptCode(code: string): Promise<string> {
   return awaitResponse({
-    worker: getTypeScriptWorker(),
+    messenger: getTypeScriptWorker(),
     message: { type: 'compile', code },
     onMessage: (data, onSuccess, onFailure) => {
       if (data.type === 'compiled') {
@@ -32,7 +32,7 @@ export function compileTypeScriptCode(code: string): Promise<string> {
 
 export function checkTSServiceIsReady(): Promise<boolean> {
   return awaitResponse({
-    worker: getTypeScriptWorker(),
+    messenger: getTypeScriptWorker(),
     message: { type: 'check-is-ready' },
     onMessage: (data, onSuccess) => {
       if (data.type === 'ready') {