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)
42 lines
1.0 KiB
TypeScript
42 lines
1.0 KiB
TypeScript
export const EVENT_TO_REACT: Record<string, string> = {
|
|
click: 'onClick',
|
|
dblclick: 'onDoubleClick',
|
|
mousedown: 'onMouseDown',
|
|
mouseup: 'onMouseUp',
|
|
mouseover: 'onMouseOver',
|
|
mouseout: 'onMouseOut',
|
|
mouseenter: 'onMouseEnter',
|
|
mouseleave: 'onMouseLeave',
|
|
keydown: 'onKeyDown',
|
|
keyup: 'onKeyUp',
|
|
keypress: 'onKeyPress',
|
|
focus: 'onFocus',
|
|
blur: 'onBlur',
|
|
change: 'onChange',
|
|
input: 'onInput',
|
|
submit: 'onSubmit',
|
|
scroll: 'onScroll',
|
|
wheel: 'onWheel',
|
|
contextmenu: 'onContextMenu',
|
|
drag: 'onDrag',
|
|
timeupdate: 'onTimeUpdate',
|
|
play: 'onPlay',
|
|
pause: 'onPause',
|
|
ended: 'onEnded',
|
|
loadedmetadata: 'onLoadedMetadata',
|
|
loadeddata: 'onLoadedData',
|
|
volumechange: 'onVolumeChange',
|
|
seeking: 'onSeeking',
|
|
seeked: 'onSeeked',
|
|
error: 'onError',
|
|
canplay: 'onCanPlay',
|
|
canplaythrough: 'onCanPlayThrough',
|
|
waiting: 'onWaiting',
|
|
progress: 'onProgress',
|
|
durationchange: 'onDurationChange',
|
|
ratechange: 'onRateChange',
|
|
stalled: 'onStalled',
|
|
suspend: 'onSuspend',
|
|
emptied: 'onEmptied',
|
|
};
|