mirror of
https://github.com/twentyhq/twenty
synced 2026-04-21 21:47:38 +00:00
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)
81 lines
1.9 KiB
TypeScript
81 lines
1.9 KiB
TypeScript
import path from 'path';
|
|
import { type PackageJson } from 'type-fest';
|
|
import { defineConfig } from 'vite';
|
|
import tsconfigPaths from 'vite-tsconfig-paths';
|
|
|
|
import packageJson from './package.json';
|
|
|
|
export default defineConfig(() => {
|
|
return {
|
|
root: __dirname,
|
|
cacheDir:
|
|
'../../node_modules/.vite/packages/twenty-front-component-renderer',
|
|
resolve: {
|
|
alias: {
|
|
'@/': path.resolve(__dirname, 'src') + '/',
|
|
},
|
|
},
|
|
plugins: [
|
|
tsconfigPaths({
|
|
root: __dirname,
|
|
}),
|
|
],
|
|
worker: {
|
|
format: 'iife',
|
|
rollupOptions: {
|
|
output: {
|
|
inlineDynamicImports: true,
|
|
},
|
|
},
|
|
plugins: () => [
|
|
{
|
|
name: 'define-process-env',
|
|
transform: (code: string) =>
|
|
code
|
|
.replace(/process\.env\.NODE_ENV/g, JSON.stringify('production'))
|
|
.replace(/process\.env/g, '{}'),
|
|
},
|
|
],
|
|
},
|
|
build: {
|
|
emptyOutDir: false,
|
|
outDir: 'dist',
|
|
lib: {
|
|
entry: 'src/index.ts',
|
|
name: 'twenty-front-component-renderer',
|
|
},
|
|
rollupOptions: {
|
|
onwarn: (warning, warn) => {
|
|
if (
|
|
warning.code === 'MODULE_LEVEL_DIRECTIVE' &&
|
|
warning.message.includes('"use client"')
|
|
) {
|
|
return;
|
|
}
|
|
warn(warning);
|
|
},
|
|
external: (id: string) => {
|
|
const deps = Object.keys(
|
|
(packageJson as PackageJson).dependencies || {},
|
|
);
|
|
|
|
return deps.some((dep) => id === dep || id.startsWith(dep + '/'));
|
|
},
|
|
output: [
|
|
{
|
|
format: 'es',
|
|
entryFileNames: '[name].mjs',
|
|
},
|
|
{
|
|
format: 'cjs',
|
|
interop: 'auto',
|
|
esModule: true,
|
|
exports: 'named',
|
|
entryFileNames: '[name].cjs',
|
|
},
|
|
],
|
|
},
|
|
},
|
|
logLevel: 'warn',
|
|
};
|
|
});
|