diff --git a/client/src/templates/Challenges/utils/worker-messenger.ts b/client/src/templates/Challenges/utils/awaitable-messenger.ts similarity index 54% rename from client/src/templates/Challenges/utils/worker-messenger.ts rename to client/src/templates/Challenges/utils/awaitable-messenger.ts index faa4900590e..e8d51321a64 100644 --- a/client/src/templates/Challenges/utils/worker-messenger.ts +++ b/client/src/templates/Challenges/utils/awaitable-messenger.ts @@ -1,30 +1,34 @@ +export type Messenger = { + 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} A promise that resolves with the response value from the worker or rejects with an error message. + * @returns {Promise} 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; 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] + }); } ); } diff --git a/client/src/templates/Challenges/utils/typescript-worker-handler.ts b/client/src/templates/Challenges/utils/typescript-worker-handler.ts index 3bd3223ea4d..8c550f31c73 100644 --- a/client/src/templates/Challenges/utils/typescript-worker-handler.ts +++ b/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 { 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 { export function checkTSServiceIsReady(): Promise { return awaitResponse({ - worker: getTypeScriptWorker(), + messenger: getTypeScriptWorker(), message: { type: 'check-is-ready' }, onMessage: (data, onSuccess) => { if (data.type === 'ready') {