Paul Rastoin
37908114fc
Followup https://github.com/twentyhq/twenty/pull/19010 ## Dependency diagram ``` ┌─────────────────────┐ │ twenty-front │ │ (React frontend) │ └─────────┬───────────┘ │ imports runtime: │ FrontComponentRenderer │ FrontComponentRendererWithSdkClient │ useFrontComponentExecutionContext ▼ ┌──────────────────────────────────┐ ┌─────────────────────────┐ │ twenty-front-component-renderer │────────▶│ twenty-sdk │ │ (remote-dom host + worker) │ │ (app developer SDK) │ │ │ │ │ │ imports from twenty-sdk: │ │ Public API: │ │ • types only: │ │ defineFrontComponent │ │ FrontComponentExecutionContext│ │ navigate, closeSide… │ │ NavigateFunction │ │ useFrontComponent… │ │ CloseSidePanelFunction │ │ Command components │ │ CommandConfirmation… │ │ conditional avail. │ │ OpenCommandConfirmation… │ │ │ │ EnqueueSnackbarFunction │ │ Internal only: │ │ etc. │ │ frontComponentHost… │ │ │ │ front-component-build │ │ owns locally: │ │ esbuild plugins │ │ • ALLOWED_HTML_ELEMENTS │ │ │ │ • EVENT_TO_REACT │ └────────────┬────────────┘ │ • HTML_TAG_TO_CUSTOM_ELEMENT… │ │ │ • SerializedEventData │ │ types │ • PropertySchema │ ▼ │ • frontComponentHostComm… │ ┌─────────────────────────┐ │ (local ref to globalThis) │ │ twenty-shared │ │ • setFrontComponentExecution… │ │ (common types/utils) │ │ (local impl, same keys) │ │ AppPath, SidePanelP… │ │ │ │ EnqueueSnackbarParams │ └──────────────────────────────────┘ │ isDefined, … │ │ └─────────────────────────┘ │ also depends on ▼ twenty-shared (types) @remote-dom/* (runtime) @quilted/threads (runtime) react (runtime) ``` **Key points:** - **`twenty-front`** depends on the renderer, **not** on `twenty-sdk` directly (for rendering) - **`twenty-front-component-renderer`** depends on `twenty-sdk` for **types only** (function signatures, `FrontComponentExecutionContext`). The runtime bridge (`frontComponentHostCommunicationApi`) is shared via `globalThis` keys, not module imports - **`twenty-sdk`** has no dependency on the renderer — clean one-way dependency - The renderer owns all remote-dom infrastructure (element schemas, event mappings, custom element tags) that was previously leaking through the SDK's public API - The SDK's `./build` entry point was removed entirely (unused)
71 lines
2.2 KiB
TypeScript
71 lines
2.2 KiB
TypeScript
import {
|
|
type AppPath,
|
|
type SidePanelPages,
|
|
type EnqueueSnackbarParams,
|
|
type NavigateOptions,
|
|
} from 'twenty-shared/types';
|
|
import { type getAppPath } from 'twenty-shared/utils';
|
|
|
|
export type NavigateFunction = <T extends AppPath>(
|
|
to: T,
|
|
params?: Parameters<typeof getAppPath<T>>[1],
|
|
queryParams?: Record<string, any>,
|
|
options?: NavigateOptions,
|
|
) => Promise<void>;
|
|
|
|
export type OpenSidePanelPageFunction = (params: {
|
|
page: SidePanelPages;
|
|
pageTitle: string;
|
|
pageIcon?: string;
|
|
shouldResetSearchState?: boolean;
|
|
}) => Promise<void>;
|
|
|
|
export type CommandConfirmationModalResult = 'confirm' | 'cancel';
|
|
|
|
export type CommandConfirmationModalAccent = 'default' | 'blue' | 'danger';
|
|
|
|
export type OpenCommandConfirmationModalFunction = (params: {
|
|
title: string;
|
|
subtitle: string;
|
|
confirmButtonText?: string;
|
|
confirmButtonAccent?: CommandConfirmationModalAccent;
|
|
}) => Promise<CommandConfirmationModalResult>;
|
|
|
|
export type UnmountFrontComponentFunction = () => Promise<void>;
|
|
|
|
export type EnqueueSnackbarFunction = (
|
|
params: EnqueueSnackbarParams,
|
|
) => Promise<void>;
|
|
|
|
export type CloseSidePanelFunction = () => Promise<void>;
|
|
|
|
export type UpdateProgressFunction = (progress: number) => Promise<void>;
|
|
|
|
export type RequestAccessTokenRefreshFunction = () => Promise<string>;
|
|
|
|
export type OpenCommandConfirmationModalHostFunction = (
|
|
params: Parameters<OpenCommandConfirmationModalFunction>[0],
|
|
) => Promise<void>;
|
|
|
|
export type FrontComponentHostCommunicationApiStore = {
|
|
navigate?: NavigateFunction;
|
|
requestAccessTokenRefresh?: RequestAccessTokenRefreshFunction;
|
|
openSidePanelPage?: OpenSidePanelPageFunction;
|
|
openCommandConfirmationModal?: OpenCommandConfirmationModalFunction;
|
|
unmountFrontComponent?: UnmountFrontComponentFunction;
|
|
enqueueSnackbar?: EnqueueSnackbarFunction;
|
|
closeSidePanel?: CloseSidePanelFunction;
|
|
updateProgress?: UpdateProgressFunction;
|
|
};
|
|
|
|
import { FRONT_COMPONENT_HOST_COMMUNICATION_API_KEY } from '../constants/front-component-host-communication-api-key';
|
|
|
|
declare global {
|
|
var frontComponentHostCommunicationApi: FrontComponentHostCommunicationApiStore;
|
|
}
|
|
|
|
globalThis[FRONT_COMPONENT_HOST_COMMUNICATION_API_KEY] ??= {};
|
|
|
|
export const frontComponentHostCommunicationApi =
|
|
globalThis.frontComponentHostCommunicationApi;
|