[FRONT COMPONENTS] Build front components from twenty apps for remote dom (#17566)

Modify the front components build to match the expected format for
remote dom execution in a worker.

packages/twenty-shared/src/front-component-constants/AllowedHtmlElements.ts

@@ -3,11 +3,13 @@ type PropertySchema = {
   optional: boolean;
 };
 
-export const ALLOWED_HTML_ELEMENTS: Array<{
+export type AllowedHtmlElement = {
   tag: string;
   name: string;
   properties: Record<string, PropertySchema>;
-}> = [
+};
+
+export const ALLOWED_HTML_ELEMENTS: AllowedHtmlElement[] = [
   { tag: 'html-div', name: 'HtmlDiv', properties: {} },
   { tag: 'html-span', name: 'HtmlSpan', properties: {} },
   { tag: 'html-section', name: 'HtmlSection', properties: {} },
@@ -143,4 +145,4 @@ export const ALLOWED_HTML_ELEMENTS: Array<{
   },
   { tag: 'html-br', name: 'HtmlBr', properties: {} },
   { tag: 'html-hr', name: 'HtmlHr', properties: {} },
-] as const;
+];

packages/twenty-shared/src/front-component-constants/HtmlCommonProperties.ts

@@ -1,4 +1,4 @@
-import { type PropertySchema } from '../types/PropertySchema';
+import { type PropertySchema } from '../front-component/types/PropertySchema';
 
 export const HTML_COMMON_PROPERTIES: Record<string, PropertySchema> = {
   id: { type: 'string', optional: true },

packages/twenty-shared/src/front-component-constants/HtmlTagToRemoteComponent.ts

@@ -0,0 +1,9 @@
+import { ALLOWED_HTML_ELEMENTS } from './AllowedHtmlElements';
+
+export const HTML_TAG_TO_REMOTE_COMPONENT: Record<string, string> =
+  Object.fromEntries(
+    ALLOWED_HTML_ELEMENTS.map((element) => [
+      element.tag.startsWith('html-') ? element.tag.slice(5) : element.tag,
+      element.name,
+    ]),
+  );

packages/twenty-shared/src/front-component-constants/index.ts

@@ -0,0 +1,15 @@
+/*
+ * _____                    _
+ *|_   _|_      _____ _ __ | |_ _   _
+ *  | | \ \ /\ / / _ \ '_ \| __| | | | Auto-generated file
+ *  | |  \ V  V /  __/ | | | |_| |_| | Any edits to this will be overridden
+ *  |_|   \_/\_/ \___|_| |_|\__|\__, |
+ *                              |___/
+ */
+
+export type { AllowedHtmlElement } from './AllowedHtmlElements';
+export { ALLOWED_HTML_ELEMENTS } from './AllowedHtmlElements';
+export { COMMON_HTML_EVENTS } from './CommonHtmlEvents';
+export { EVENT_TO_REACT } from './EventToReact';
+export { HTML_COMMON_PROPERTIES } from './HtmlCommonProperties';
+export { HTML_TAG_TO_REMOTE_COMPONENT } from './HtmlTagToRemoteComponent';

packages/twenty-shared/src/front-component/index.ts

@@ -8,3 +8,116 @@
  */
 
 export { FrontComponentRenderer } from './host/components/FrontComponentRenderer';
+export { componentRegistry } from './host/generated/host-component-registry';
+export { FrontComponentWorkerEffect } from './remote/components/FrontComponentWorkerEffect';
+export {
+  HtmlDiv,
+  HtmlSpan,
+  HtmlSection,
+  HtmlArticle,
+  HtmlHeader,
+  HtmlFooter,
+  HtmlMain,
+  HtmlNav,
+  HtmlAside,
+  HtmlP,
+  HtmlH1,
+  HtmlH2,
+  HtmlH3,
+  HtmlH4,
+  HtmlH5,
+  HtmlH6,
+  HtmlStrong,
+  HtmlEm,
+  HtmlSmall,
+  HtmlCode,
+  HtmlPre,
+  HtmlBlockquote,
+  HtmlA,
+  HtmlImg,
+  HtmlUl,
+  HtmlOl,
+  HtmlLi,
+  HtmlForm,
+  HtmlLabel,
+  HtmlInput,
+  HtmlTextarea,
+  HtmlSelect,
+  HtmlOption,
+  HtmlButton,
+  HtmlTable,
+  HtmlThead,
+  HtmlTbody,
+  HtmlTfoot,
+  HtmlTr,
+  HtmlTh,
+  HtmlTd,
+  HtmlBr,
+  HtmlHr,
+} from './remote/generated/remote-components';
+export type {
+  HtmlCommonProperties,
+  HtmlCommonEvents,
+  HtmlAProperties,
+  HtmlImgProperties,
+  HtmlFormProperties,
+  HtmlLabelProperties,
+  HtmlInputProperties,
+  HtmlTextareaProperties,
+  HtmlSelectProperties,
+  HtmlOptionProperties,
+  HtmlButtonProperties,
+  HtmlThProperties,
+  HtmlTdProperties,
+} from './remote/generated/remote-elements';
+export {
+  HtmlDivElement,
+  HtmlSpanElement,
+  HtmlSectionElement,
+  HtmlArticleElement,
+  HtmlHeaderElement,
+  HtmlFooterElement,
+  HtmlMainElement,
+  HtmlNavElement,
+  HtmlAsideElement,
+  HtmlPElement,
+  HtmlH1Element,
+  HtmlH2Element,
+  HtmlH3Element,
+  HtmlH4Element,
+  HtmlH5Element,
+  HtmlH6Element,
+  HtmlStrongElement,
+  HtmlEmElement,
+  HtmlSmallElement,
+  HtmlCodeElement,
+  HtmlPreElement,
+  HtmlBlockquoteElement,
+  HtmlAElement,
+  HtmlImgElement,
+  HtmlUlElement,
+  HtmlOlElement,
+  HtmlLiElement,
+  HtmlFormElement,
+  HtmlLabelElement,
+  HtmlInputElement,
+  HtmlTextareaElement,
+  HtmlSelectElement,
+  HtmlOptionElement,
+  HtmlButtonElement,
+  HtmlTableElement,
+  HtmlTheadElement,
+  HtmlTbodyElement,
+  HtmlTfootElement,
+  HtmlTrElement,
+  HtmlThElement,
+  HtmlTdElement,
+  HtmlBrElement,
+  HtmlHrElement,
+  RemoteRootElement,
+  RemoteFragmentElement,
+} from './remote/generated/remote-elements';
+export { createRemoteWorker } from './remote/worker/createRemoteWorker';
+export type { HostToWorkerRenderContext } from './types/HostToWorkerRenderContext';
+export type { PropertySchema } from './types/PropertySchema';
+export type { WorkerExports } from './types/WorkerExports';

packages/twenty-shared/src/front-component/remote/worker/remote-worker.ts

@@ -11,12 +11,15 @@ import {
 } from '@remote-dom/core/elements';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { type HostToWorkerRenderContext } from '../../types/HostToWorkerRenderContext';
 import { type WorkerExports } from '../../types/WorkerExports';
 import * as RemoteComponents from '../generated/remote-components';
 
 (globalThis as Record<string, unknown>).React = React;
 (globalThis as Record<string, unknown>).RemoteComponents = RemoteComponents;
+(globalThis as Record<string, unknown>).jsx = jsx;
+(globalThis as Record<string, unknown>).jsxs = jsxs;
 
 const render: WorkerExports['render'] = async (
   connection: RemoteConnection,

packages/twenty-shared/src/front-component/types/WorkerToHostBridge.ts

@@ -1,9 +0,0 @@
-import { type RemoteConnection } from '@remote-dom/core/elements';
-import { type HostToWorkerRenderContext } from './HostToWorkerRenderContext';
-
-export type WorkerExports = {
-  render: (
-    connection: RemoteConnection,
-    context: HostToWorkerRenderContext,
-  ) => Promise<void>;
-};