diff --git a/packages/twenty-front-component-renderer/src/host/components/FrontComponentRenderer.tsx b/packages/twenty-front-component-renderer/src/host/components/FrontComponentRenderer.tsx index d3c09ec6c2..36f6c26d88 100644 --- a/packages/twenty-front-component-renderer/src/host/components/FrontComponentRenderer.tsx +++ b/packages/twenty-front-component-renderer/src/host/components/FrontComponentRenderer.tsx @@ -1,6 +1,7 @@ import { FrontComponentErrorEffect } from '@/remote/components/FrontComponentErrorEffect'; -import { FrontComponentHostCommunicationApiEffect } from '@/remote/components/FrontComponentHostCommunicationApiEffect'; +import { FrontComponentInitializeHostCommunicationApiEffect } from '@/remote/components/FrontComponentInitializeHostCommunicationApiEffect'; import { FrontComponentUpdateContextEffect } from '@/remote/components/FrontComponentUpdateContextEffect'; +import { FrontComponentUpdateHostCommunicationApiEffect } from '@/remote/components/FrontComponentUpdateHostCommunicationApiEffect'; import { type FrontComponentHostCommunicationApi } from '@/types/FrontComponentHostCommunicationApi'; import { type SdkClientUrls } from '@/types/HostToWorkerRenderContext'; import { type WorkerExports } from '@/types/WorkerExports'; @@ -55,7 +56,6 @@ export const FrontComponentRenderer = ({ apiUrl={apiUrl} sdkClientUrls={sdkClientUrls} frontComponentId={executionContext.frontComponentId} - frontComponentHostCommunicationApi={frontComponentHostCommunicationApi} setReceiver={setReceiver} setThread={setThread} setError={setError} @@ -63,7 +63,6 @@ export const FrontComponentRenderer = ({ ); }, [ componentUrl, - frontComponentHostCommunicationApi, setError, setReceiver, setThread, @@ -102,7 +101,13 @@ export const FrontComponentRenderer = ({ {isDefined(thread) && ( <> - + + ; }; -export const FrontComponentHostCommunicationApiEffect = ({ +export const FrontComponentInitializeHostCommunicationApiEffect = ({ thread, -}: FrontComponentHostCommunicationApiEffectProps) => { +}: FrontComponentInitializeHostCommunicationApiEffectProps) => { useEffect(() => { thread.imports.initializeHostCommunicationApi().catch((error) => { console.error('Failed to initialize host communication API:', error); diff --git a/packages/twenty-front-component-renderer/src/remote/components/FrontComponentUpdateHostCommunicationApiEffect.tsx b/packages/twenty-front-component-renderer/src/remote/components/FrontComponentUpdateHostCommunicationApiEffect.tsx new file mode 100644 index 0000000000..bdc8dd4540 --- /dev/null +++ b/packages/twenty-front-component-renderer/src/remote/components/FrontComponentUpdateHostCommunicationApiEffect.tsx @@ -0,0 +1,20 @@ +import { type FrontComponentHostCommunicationApi } from '@/types/FrontComponentHostCommunicationApi'; +import { type WorkerExports } from '@/types/WorkerExports'; +import { type ThreadWebWorker } from '@quilted/threads'; +import { useEffect } from 'react'; + +type FrontComponentUpdateHostCommunicationApiEffectProps = { + thread: ThreadWebWorker; + frontComponentHostCommunicationApi: FrontComponentHostCommunicationApi; +}; + +export const FrontComponentUpdateHostCommunicationApiEffect = ({ + thread, + frontComponentHostCommunicationApi, +}: FrontComponentUpdateHostCommunicationApiEffectProps) => { + useEffect(() => { + Object.assign(thread.exports, frontComponentHostCommunicationApi); + }, [thread, frontComponentHostCommunicationApi]); + + return null; +}; diff --git a/packages/twenty-front-component-renderer/src/remote/components/FrontComponentWorkerEffect.tsx b/packages/twenty-front-component-renderer/src/remote/components/FrontComponentWorkerEffect.tsx index 7d93f58ddf..2781c128b9 100644 --- a/packages/twenty-front-component-renderer/src/remote/components/FrontComponentWorkerEffect.tsx +++ b/packages/twenty-front-component-renderer/src/remote/components/FrontComponentWorkerEffect.tsx @@ -1,8 +1,8 @@ import { ThreadWebWorker, release, retain } from '@quilted/threads'; import { RemoteReceiver } from '@remote-dom/core/receivers'; import { useEffect, useRef } from 'react'; -import { type ConfirmationModalCaller } from 'twenty-shared/types'; import { type CommandConfirmationModalResult } from 'twenty-sdk'; +import { type ConfirmationModalCaller } from 'twenty-shared/types'; import { type FrontComponentHostCommunicationApi } from '../../types/FrontComponentHostCommunicationApi'; import { type SdkClientUrls } from '../../types/HostToWorkerRenderContext'; import { type WorkerExports } from '../../types/WorkerExports'; @@ -17,13 +17,26 @@ type CommandMenuItemConfirmationModalResultBrowserEventDetail = { confirmationResult: CommandConfirmationModalResult; }; +const noopAsync = async () => {}; + +const HOST_COMMUNICATION_API_NOOP_INITIALIZATION: FrontComponentHostCommunicationApi = + { + navigate: noopAsync, + requestAccessTokenRefresh: async () => '', + openSidePanelPage: noopAsync, + openCommandConfirmationModal: noopAsync, + unmountFrontComponent: noopAsync, + enqueueSnackbar: noopAsync, + closeSidePanel: noopAsync, + updateProgress: noopAsync, + }; + type FrontComponentWorkerEffectProps = { componentUrl: string; applicationAccessToken?: string; apiUrl?: string; sdkClientUrls?: SdkClientUrls; frontComponentId: string; - frontComponentHostCommunicationApi: FrontComponentHostCommunicationApi; setReceiver: React.Dispatch>; setThread: React.Dispatch< React.SetStateAction(worker, { - exports: frontComponentHostCommunicationApi, + exports: { ...HOST_COMMUNICATION_API_NOOP_INITIALIZATION }, }); const handleCommandMenuItemConfirmationModalResultBrowserEvent = ( @@ -135,7 +147,6 @@ export const FrontComponentWorkerEffect = ({ setError, setReceiver, setThread, - frontComponentHostCommunicationApi, ]); return null;