Files
twenty/packages/twenty-sdk/scripts/remote-dom/generators/remote-components.generator.ts
T
Raphaël BosiandGitHub f0bc9fcb43 [FRONT COMPONENTS] Move to twenty-sdk (#17587)
Move front components from twenty-shared to twenty-sdk
2026-02-02 12:21:53 +00:00

65 lines
1.6 KiB
TypeScript

import type { Project, SourceFile } from 'ts-morph';
import { type ComponentSchema } from './schemas';
import { addExportedConst, addFileHeader, eventToReactProp } from './utils';
const generateComponentDefinition = (
sourceFile: SourceFile,
component: ComponentSchema,
): void => {
const hasEvents = component.events.length > 0;
const componentExportName = component.tagName;
let initializer: string;
if (hasEvents) {
const eventProps = component.events
.map((event) => {
const propName = eventToReactProp(event);
return ` ${propName}: { event: '${event}' },`;
})
.join('\n');
initializer = `createRemoteComponent('${component.customElementName}', ${component.name}Element, {
eventProps: {
${eventProps}
},
})`;
} else {
initializer = `createRemoteComponent('${component.customElementName}', ${component.name}Element)`;
}
addExportedConst(sourceFile, componentExportName, initializer);
};
export const generateRemoteComponents = (
project: Project,
components: ComponentSchema[],
): SourceFile => {
const sourceFile = project.createSourceFile('remote-components.ts', '', {
overwrite: true,
});
sourceFile.addImportDeclaration({
moduleSpecifier: '@remote-dom/react',
namedImports: ['createRemoteComponent'],
});
const elementImports = components.map(
(component) => `${component.name}Element`,
);
sourceFile.addImportDeclaration({
moduleSpecifier: './remote-elements',
namedImports: elementImports,
});
for (const component of components) {
generateComponentDefinition(sourceFile, component);
}
addFileHeader(sourceFile);
return sourceFile;
};