From de264aff483653822ee868029b243e03e5b63a99 Mon Sep 17 00:00:00 2001 From: Johannes Millan Date: Fri, 16 Jan 2026 21:34:35 +0100 Subject: [PATCH] fix(plugins): fix i18n message protocol for iframe communication Fixed the message passing between plugin iframes and plugin.ts to use the proper PLUGIN_MESSAGE/PLUGIN_MESSAGE_RESPONSE protocol instead of custom messages. This ensures translations and other messages are correctly routed through the plugin bridge. Changes: - Updated useTranslate to use PLUGIN_MESSAGE type - Listen for PLUGIN_MESSAGE_RESPONSE instead of custom response - Wrap message in { type, payload } structure - Updated plugin.ts to read from message.payload - Added debug logging for troubleshooting - Applied fixes to both procrastination-buster and boilerplate --- .../boilerplate-solid-js/src/plugin.ts | 12 +++++------ .../src/utils/useTranslate.ts | 11 ++++++---- .../procrastination-buster/src/plugin.ts | 13 ++++++++++-- .../src/utils/useTranslate.ts | 21 +++++++++++++++---- 4 files changed, 41 insertions(+), 16 deletions(-) diff --git a/packages/plugin-dev/boilerplate-solid-js/src/plugin.ts b/packages/plugin-dev/boilerplate-solid-js/src/plugin.ts index e7c24ba92..179ca8b78 100644 --- a/packages/plugin-dev/boilerplate-solid-js/src/plugin.ts +++ b/packages/plugin-dev/boilerplate-solid-js/src/plugin.ts @@ -83,12 +83,12 @@ if (plugin.onMessage) { }; case 'createTask': { const newTask = await plugin.addTask({ - title: message.data.title, - projectId: message.data.projectId, + title: message.payload.title, + projectId: message.payload.projectId, }); plugin.showSnack({ - msg: `Task "${message.data.title}" created!`, + msg: `Task "${message.payload.title}" created!`, type: 'SUCCESS', }); @@ -100,7 +100,7 @@ if (plugin.onMessage) { return await plugin.getAllProjects(); // Example: Persist plugin data case 'saveSettings': - await plugin.persistDataSynced(JSON.stringify(message.data)); + await plugin.persistDataSynced(JSON.stringify(message.payload)); return { success: true }; // Example: Load plugin data case 'loadSettings': { @@ -109,9 +109,9 @@ if (plugin.onMessage) { } // i18n support case 'translate': - return plugin.translate(message.data.key, message.data.params); + return await plugin.translate(message.payload.key, message.payload.params); case 'getCurrentLanguage': - return plugin.getCurrentLanguage(); + return await plugin.getCurrentLanguage(); default: return { error: 'Unknown message type' }; } diff --git a/packages/plugin-dev/boilerplate-solid-js/src/utils/useTranslate.ts b/packages/plugin-dev/boilerplate-solid-js/src/utils/useTranslate.ts index daf7740e2..ec89a6218 100644 --- a/packages/plugin-dev/boilerplate-solid-js/src/utils/useTranslate.ts +++ b/packages/plugin-dev/boilerplate-solid-js/src/utils/useTranslate.ts @@ -1,19 +1,22 @@ import { createSignal, createEffect, onCleanup } from 'solid-js'; -// Communication with plugin.js +// Communication with plugin.js via the PluginAPI.onMessage system const sendMessage = async (type: string, payload?: any): Promise => { return new Promise((resolve) => { const messageId = Math.random().toString(36).substring(2, 9); const handler = (event: MessageEvent) => { - if (event.data.messageId === messageId) { + // Listen for MESSAGE_RESPONSE from parent + if (event.data.type === 'PLUGIN_MESSAGE_RESPONSE' && event.data.messageId === messageId) { window.removeEventListener('message', handler); - resolve(event.data.response); + resolve(event.data.result); } }; window.addEventListener('message', handler); - window.parent.postMessage({ type, payload, messageId }, '*'); + const message = { type, payload }; + // Use the proper PLUGIN_MESSAGE type for the plugin message system + window.parent.postMessage({ type: 'PLUGIN_MESSAGE', message, messageId }, '*'); }); }; diff --git a/packages/plugin-dev/procrastination-buster/src/plugin.ts b/packages/plugin-dev/procrastination-buster/src/plugin.ts index 3415f7c34..bbf9d6221 100644 --- a/packages/plugin-dev/procrastination-buster/src/plugin.ts +++ b/packages/plugin-dev/procrastination-buster/src/plugin.ts @@ -12,12 +12,21 @@ plugin.log.info('Procrastination Buster plugin initialized'); // i18n support - handle translation requests from iframe if (plugin.onMessage) { plugin.onMessage(async (message: any) => { + plugin.log.info('[plugin.ts] Received message:', message); switch (message?.type) { case 'translate': - return plugin.translate(message.payload.key, message.payload.params); + const translation = await plugin.translate( + message.payload.key, + message.payload.params, + ); + plugin.log.info('[plugin.ts] Returning translation:', translation); + return translation; case 'getCurrentLanguage': - return plugin.getCurrentLanguage(); + const lang = await plugin.getCurrentLanguage(); + plugin.log.info('[plugin.ts] Returning language:', lang); + return lang; default: + plugin.log.info('[plugin.ts] Unknown message type:', message?.type); return { error: 'Unknown message type' }; } }); diff --git a/packages/plugin-dev/procrastination-buster/src/utils/useTranslate.ts b/packages/plugin-dev/procrastination-buster/src/utils/useTranslate.ts index 963e681fd..e149db580 100644 --- a/packages/plugin-dev/procrastination-buster/src/utils/useTranslate.ts +++ b/packages/plugin-dev/procrastination-buster/src/utils/useTranslate.ts @@ -1,19 +1,32 @@ import { createSignal, createEffect, onCleanup } from 'solid-js'; -// Communication with plugin.js +// Communication with plugin.js via the PluginAPI.onMessage system const sendMessage = async (type: string, payload?: any): Promise => { return new Promise((resolve) => { const messageId = Math.random().toString(36).substring(2, 9); const handler = (event: MessageEvent) => { - if (event.data.messageId === messageId) { + console.log('[useTranslate] Received message:', event.data); + // Listen for MESSAGE_RESPONSE from parent + if ( + event.data.type === 'PLUGIN_MESSAGE_RESPONSE' && + event.data.messageId === messageId + ) { + console.log('[useTranslate] Message matched, resolving with:', event.data.result); window.removeEventListener('message', handler); - resolve(event.data.response); + resolve(event.data.result); } }; window.addEventListener('message', handler); - window.parent.postMessage({ type, payload, messageId }, '*'); + const message = { type, payload }; + console.log('[useTranslate] Sending message:', { + type: 'PLUGIN_MESSAGE', + message, + messageId, + }); + // Use the proper PLUGIN_MESSAGE type for the plugin message system + window.parent.postMessage({ type: 'PLUGIN_MESSAGE', message, messageId }, '*'); }); };