[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:
+6
-6
@@ -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}
|
||||
/>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user