[FRONT COMPONENTS] Navigate from the remote (#17762)

## PR Description

This PR:
- Introduces a `FrontComponentHostCommunicationApi`, which allows us to
pass functions to be executed from the worker
- Exposes a navigate function from the host to the front component
remote workers, enabling SDK components to trigger in-app navigation
- Gets rid of `useSyncExternalStore` and makes the execution context
reactive without it
- Refactors and improves the `esbuild` plugin system

## Video


https://github.com/user-attachments/assets/7b26a1c2-f85f-4898-a71d-f60c70e61711
This commit is contained in:
Raphaël Bosi
2026-02-09 14:38:35 +01:00
committed by GitHub
parent 2106f46e9e
commit 2b29918bf8
39 changed files with 689 additions and 293 deletions
@@ -1,13 +1,13 @@
import { currentUserState } from '@/auth/states/currentUserState';
import { getMockFrontComponentUrl } from '@/front-components/utils/mockFrontComponent';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { useTheme } from '@emotion/react';
import { t } from '@lingui/core/macro';
import { useState } from 'react';
import { useRecoilValue } from 'recoil';
import { FrontComponentRenderer as SharedFrontComponentRenderer } from 'twenty-sdk/front-component';
import { isDefined } from 'twenty-shared/utils';
import { useFrontComponentExecutionContext } from '@/front-components/hooks/useFrontComponentExecutionContext';
type FrontComponentRendererProps = {
frontComponentId: string;
};
@@ -19,7 +19,8 @@ export const FrontComponentRenderer = ({
const [hasError, setHasError] = useState(false);
const { enqueueErrorSnackBar } = useSnackBar();
const currentUser = useRecoilValue(currentUserState);
const { executionContext, frontComponentHostCommunicationApi } =
useFrontComponentExecutionContext();
const handleError = (error?: Error) => {
if (isDefined(error)) {
@@ -40,9 +41,8 @@ export const FrontComponentRenderer = ({
<SharedFrontComponentRenderer
theme={theme}
componentUrl={getMockFrontComponentUrl()}
executionContext={{
userId: currentUser?.id,
}}
executionContext={executionContext}
frontComponentHostCommunicationApi={frontComponentHostCommunicationApi}
onError={handleError}
/>
);