diff --git a/.github/workflows/ci-front.yaml b/.github/workflows/ci-front.yaml index f3fd72bf098..3f36e4a21fb 100644 --- a/.github/workflows/ci-front.yaml +++ b/.github/workflows/ci-front.yaml @@ -27,6 +27,7 @@ jobs: packages/twenty-front/** packages/twenty-ui/** packages/twenty-shared/** + packages/twenty-sdk/** changed-files-check-e2e: uses: ./.github/workflows/changed-files.yaml with: @@ -85,6 +86,7 @@ jobs: run: | npx nx build twenty-shared npx nx build twenty-ui + npx nx build twenty-sdk - name: Install Playwright run: | cd packages/twenty-front diff --git a/packages/twenty-front/package.json b/packages/twenty-front/package.json index 1a686046181..854ff50417d 100644 --- a/packages/twenty-front/package.json +++ b/packages/twenty-front/package.json @@ -112,6 +112,7 @@ "recoil": "^0.7.7", "remark-gfm": "^4.0.1", "transliteration": "^2.3.5", + "twenty-sdk": "workspace:*", "twenty-shared": "workspace:*", "twenty-ui": "workspace:*", "use-debounce": "^10.0.0" diff --git a/packages/twenty-front/src/modules/command-menu/pages/front-component/components/CommandMenuFrontComponentPage.tsx b/packages/twenty-front/src/modules/command-menu/pages/front-component/components/CommandMenuFrontComponentPage.tsx index f3be7dcda13..e24a651ade8 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/front-component/components/CommandMenuFrontComponentPage.tsx +++ b/packages/twenty-front/src/modules/command-menu/pages/front-component/components/CommandMenuFrontComponentPage.tsx @@ -1,8 +1,15 @@ +import { Suspense, lazy } from 'react'; + import { viewableFrontComponentIdComponentState } from '@/command-menu/pages/front-component/states/viewableFrontComponentIdComponentState'; -import { FrontComponentRenderer } from '@/front-components/components/FrontComponentRenderer'; import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; import { isDefined } from 'twenty-shared/utils'; +const FrontComponentRenderer = lazy(() => + import('@/front-components/components/FrontComponentRenderer').then( + (module) => ({ default: module.FrontComponentRenderer }), + ), +); + export const CommandMenuFrontComponentPage = () => { const viewableFrontComponentId = useRecoilComponentValue( viewableFrontComponentIdComponentState, @@ -12,5 +19,9 @@ export const CommandMenuFrontComponentPage = () => { return null; } - return ; + return ( + + + + ); }; diff --git a/packages/twenty-front/src/modules/front-components/components/FrontComponentRenderer.tsx b/packages/twenty-front/src/modules/front-components/components/FrontComponentRenderer.tsx index f938e47698d..3683a347703 100644 --- a/packages/twenty-front/src/modules/front-components/components/FrontComponentRenderer.tsx +++ b/packages/twenty-front/src/modules/front-components/components/FrontComponentRenderer.tsx @@ -5,7 +5,7 @@ import { t } from '@lingui/core/macro'; import { isDefined } from 'twenty-shared/utils'; import { getMockFrontComponentUrl } from '@/front-components/utils/mockFrontComponent'; -import { FrontComponentRenderer as SharedFrontComponentRenderer } from 'twenty-shared/front-component'; +import { FrontComponentRenderer as SharedFrontComponentRenderer } from 'twenty-sdk/front-component'; type FrontComponentRendererProps = { frontComponentId: string; diff --git a/packages/twenty-front/src/modules/front-components/utils/mockFrontComponent.ts b/packages/twenty-front/src/modules/front-components/utils/mockFrontComponent.ts index ec0742cb7db..7147f702c59 100644 --- a/packages/twenty-front/src/modules/front-components/utils/mockFrontComponent.ts +++ b/packages/twenty-front/src/modules/front-components/utils/mockFrontComponent.ts @@ -3,7 +3,6 @@ import { isDefined } from 'twenty-shared/utils'; // eslint-disable-next-line const mockFrontComponentCode = ` var r=globalThis.React.useState,s=globalThis.React.useEffect;var n=globalThis.jsx,o=globalThis.jsxs,g=globalThis.React.Fragment;var e=globalThis.RemoteComponents,x=()=>{let[a,l]=r(0),[m,p]=r(0);return s(()=>{let t=setInterval(()=>{p(i=>i+1)},1e3);return()=>clearInterval(t)},[]),o(e.HtmlDiv,{style:{padding:"20px",fontFamily:"Arial, sans-serif",maxWidth:"400px",margin:"0 auto",display:"flex",flexDirection:"column",alignItems:"center"},children:[n(e.HtmlH1,{style:{color:"#333",marginBottom:"20px",fontSize:"24px"},children:"Test Component"}),o(e.HtmlP,{style:{fontSize:"18px",marginBottom:"10px",color:"#666"},children:["Count: ",a]}),o(e.HtmlP,{style:{fontSize:"18px",marginBottom:"20px",color:"#666"},children:["Timer: ",m,"s"]}),n(e.HtmlButton,{onClick:()=>l(a+1),style:{padding:"10px 20px",fontSize:"16px",backgroundColor:"#007bff",color:"white",border:"none",borderRadius:"5px",cursor:"pointer",transition:"all 0.3s ease",boxShadow:"0 2px 4px rgba(0, 0, 0, 0.2)"},onMouseEnter:t=>{t.currentTarget.style.backgroundColor="#0056b3",t.currentTarget.style.transform="translateY(-2px)",t.currentTarget.style.boxShadow="0 4px 8px rgba(0, 0, 0, 0.3)"},onMouseLeave:t=>{t.currentTarget.style.backgroundColor="#007bff",t.currentTarget.style.transform="translateY(0)",t.currentTarget.style.boxShadow="0 2px 4px rgba(0, 0, 0, 0.2)"},children:"Increment"})]})},b=globalThis.jsx(x,{});export{b as default}; -//# sourceMappingURL=test-component.front-component.mjs.map `; let cachedMockBlobUrl: string | null = null; diff --git a/packages/twenty-front/src/modules/page-layout/widgets/front-component/components/FrontComponentWidgetRenderer.tsx b/packages/twenty-front/src/modules/page-layout/widgets/front-component/components/FrontComponentWidgetRenderer.tsx index e545d54f17f..9b9a6c50ff4 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/front-component/components/FrontComponentWidgetRenderer.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/front-component/components/FrontComponentWidgetRenderer.tsx @@ -1,10 +1,17 @@ +import { Suspense, lazy } from 'react'; + import { isDefined } from 'twenty-shared/utils'; import { isWidgetConfigurationOfType } from '@/command-menu/pages/page-layout/utils/isWidgetConfigurationOfType'; -import { FrontComponentRenderer } from '@/front-components/components/FrontComponentRenderer'; import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget'; import { PageLayoutWidgetNoDataDisplay } from '@/page-layout/widgets/components/PageLayoutWidgetNoDataDisplay'; +const FrontComponentRenderer = lazy(() => + import('@/front-components/components/FrontComponentRenderer').then( + (module) => ({ default: module.FrontComponentRenderer }), + ), +); + type FrontComponentWidgetRendererProps = { widget: PageLayoutWidget; }; @@ -23,5 +30,9 @@ export const FrontComponentWidgetRenderer = ({ const frontComponentId = configuration.frontComponentId; - return ; + return ( + + + + ); }; diff --git a/packages/twenty-sdk/package.json b/packages/twenty-sdk/package.json index ee4763944e3..2a9d4975af0 100644 --- a/packages/twenty-sdk/package.json +++ b/packages/twenty-sdk/package.json @@ -8,7 +8,9 @@ "twenty": "dist/cli.cjs" }, "files": [ - "dist" + "dist", + "front-component", + "front-component-constants" ], "scripts": { "build": "npx rimraf dist && npx vite build" @@ -26,11 +28,24 @@ "types": "./dist/index.d.ts", "import": "./dist/index.mjs", "require": "./dist/index.cjs" + }, + "./front-component": { + "types": "./dist/front-component/index.d.ts", + "import": "./dist/front-component.mjs", + "require": "./dist/front-component.cjs" + }, + "./front-component-constants": { + "types": "./dist/front-component-constants/index.d.ts", + "import": "./dist/front-component-constants.mjs", + "require": "./dist/front-component-constants.cjs" } }, "license": "AGPL-3.0", "dependencies": { "@genql/cli": "^3.0.3", + "@quilted/threads": "^4.0.1", + "@remote-dom/core": "^1.10.1", + "@remote-dom/react": "^1.2.2", "@sniptt/guards": "^0.2.0", "archiver": "^7.0.1", "axios": "^1.6.0", @@ -47,19 +62,22 @@ "inquirer": "^10.0.0", "jsonc-parser": "^3.2.0", "lodash.camelcase": "^4.3.0", - "react": "^19.0.0", + "react": "^18.0.0", "typescript": "^5.9.2", "uuid": "^13.0.0", "vite": "^7.0.0", - "vite-tsconfig-paths": "^4.2.1" + "vite-tsconfig-paths": "^4.2.1", + "zod": "^4.1.11" }, "devDependencies": { + "@prettier/sync": "^0.5.2", "@types/archiver": "^6.0.0", "@types/fs-extra": "^11.0.0", "@types/inquirer": "^9.0.0", "@types/lodash.camelcase": "^4.3.7", "@types/node": "^24.0.0", - "@types/react": "^19.0.2", + "@types/react": "^18", + "ts-morph": "^25.0.0", "tsx": "^4.7.0", "vite-plugin-dts": "^4.5.4", "wait-on": "^7.2.0" @@ -69,6 +87,13 @@ "yarn": "^4.0.2" }, "typesVersions": { - "*": {} + "*": { + "front-component": [ + "dist/front-component/index.d.ts" + ], + "front-component-constants": [ + "dist/front-component-constants/index.d.ts" + ] + } } } diff --git a/packages/twenty-sdk/project.json b/packages/twenty-sdk/project.json index 7952425fdf9..db21b14de0b 100644 --- a/packages/twenty-sdk/project.json +++ b/packages/twenty-sdk/project.json @@ -4,7 +4,8 @@ "sourceRoot": "packages/twenty-sdk/src", "projectType": "library", "tags": [ - "scope:sdk" + "scope:sdk", + "scope:shared" ], "targets": { "build": { @@ -13,7 +14,11 @@ "^build" ], "outputs": [ - "{projectRoot}/dist" + "{projectRoot}/dist", + "{projectRoot}/front-component/package.json", + "{projectRoot}/front-component/dist", + "{projectRoot}/front-component-constants/package.json", + "{projectRoot}/front-component-constants/dist" ] }, "dev": { diff --git a/packages/twenty-shared/scripts/remote-dom/generateRemoteDomElements.ts b/packages/twenty-sdk/scripts/remote-dom/generateRemoteDomElements.ts similarity index 100% rename from packages/twenty-shared/scripts/remote-dom/generateRemoteDomElements.ts rename to packages/twenty-sdk/scripts/remote-dom/generateRemoteDomElements.ts diff --git a/packages/twenty-shared/scripts/remote-dom/generators/constants/CustomElementNames.ts b/packages/twenty-sdk/scripts/remote-dom/generators/constants/CustomElementNames.ts similarity index 100% rename from packages/twenty-shared/scripts/remote-dom/generators/constants/CustomElementNames.ts rename to packages/twenty-sdk/scripts/remote-dom/generators/constants/CustomElementNames.ts diff --git a/packages/twenty-shared/scripts/remote-dom/generators/constants/InternalElementClasses.ts b/packages/twenty-sdk/scripts/remote-dom/generators/constants/InternalElementClasses.ts similarity index 100% rename from packages/twenty-shared/scripts/remote-dom/generators/constants/InternalElementClasses.ts rename to packages/twenty-sdk/scripts/remote-dom/generators/constants/InternalElementClasses.ts diff --git a/packages/twenty-shared/scripts/remote-dom/generators/constants/OutputFiles.ts b/packages/twenty-sdk/scripts/remote-dom/generators/constants/OutputFiles.ts similarity index 100% rename from packages/twenty-shared/scripts/remote-dom/generators/constants/OutputFiles.ts rename to packages/twenty-sdk/scripts/remote-dom/generators/constants/OutputFiles.ts diff --git a/packages/twenty-shared/scripts/remote-dom/generators/constants/TypeNames.ts b/packages/twenty-sdk/scripts/remote-dom/generators/constants/TypeNames.ts similarity index 100% rename from packages/twenty-shared/scripts/remote-dom/generators/constants/TypeNames.ts rename to packages/twenty-sdk/scripts/remote-dom/generators/constants/TypeNames.ts diff --git a/packages/twenty-shared/scripts/remote-dom/generators/constants/index.ts b/packages/twenty-sdk/scripts/remote-dom/generators/constants/index.ts similarity index 100% rename from packages/twenty-shared/scripts/remote-dom/generators/constants/index.ts rename to packages/twenty-sdk/scripts/remote-dom/generators/constants/index.ts diff --git a/packages/twenty-shared/scripts/remote-dom/generators/host-registry.generator.ts b/packages/twenty-sdk/scripts/remote-dom/generators/host-registry.generator.ts similarity index 94% rename from packages/twenty-shared/scripts/remote-dom/generators/host-registry.generator.ts rename to packages/twenty-sdk/scripts/remote-dom/generators/host-registry.generator.ts index bb0f5bea9c5..f7b5ad672f5 100644 --- a/packages/twenty-shared/scripts/remote-dom/generators/host-registry.generator.ts +++ b/packages/twenty-sdk/scripts/remote-dom/generators/host-registry.generator.ts @@ -79,7 +79,11 @@ const generateRegistryMap = (components: ComponentSchema[]): string => { ) .join('\n'); - return `export const componentRegistry = new Map>([ + return `type ComponentRegistryValue = + | ReturnType + | typeof RemoteFragmentRenderer; + +export const componentRegistry: Map = new Map([ ${entries} ['${CUSTOM_ELEMENT_NAMES.FRAGMENT}', RemoteFragmentRenderer], ]);`; diff --git a/packages/twenty-shared/scripts/remote-dom/generators/index.ts b/packages/twenty-sdk/scripts/remote-dom/generators/index.ts similarity index 100% rename from packages/twenty-shared/scripts/remote-dom/generators/index.ts rename to packages/twenty-sdk/scripts/remote-dom/generators/index.ts diff --git a/packages/twenty-shared/scripts/remote-dom/generators/remote-components.generator.ts b/packages/twenty-sdk/scripts/remote-dom/generators/remote-components.generator.ts similarity index 100% rename from packages/twenty-shared/scripts/remote-dom/generators/remote-components.generator.ts rename to packages/twenty-sdk/scripts/remote-dom/generators/remote-components.generator.ts diff --git a/packages/twenty-shared/scripts/remote-dom/generators/remote-elements.generator.ts b/packages/twenty-sdk/scripts/remote-dom/generators/remote-elements.generator.ts similarity index 100% rename from packages/twenty-shared/scripts/remote-dom/generators/remote-elements.generator.ts rename to packages/twenty-sdk/scripts/remote-dom/generators/remote-elements.generator.ts diff --git a/packages/twenty-shared/scripts/remote-dom/generators/schemas.ts b/packages/twenty-sdk/scripts/remote-dom/generators/schemas.ts similarity index 100% rename from packages/twenty-shared/scripts/remote-dom/generators/schemas.ts rename to packages/twenty-sdk/scripts/remote-dom/generators/schemas.ts diff --git a/packages/twenty-shared/scripts/remote-dom/generators/utils/add-exported-const.ts b/packages/twenty-sdk/scripts/remote-dom/generators/utils/add-exported-const.ts similarity index 100% rename from packages/twenty-shared/scripts/remote-dom/generators/utils/add-exported-const.ts rename to packages/twenty-sdk/scripts/remote-dom/generators/utils/add-exported-const.ts diff --git a/packages/twenty-shared/scripts/remote-dom/generators/utils/add-exported-type.ts b/packages/twenty-sdk/scripts/remote-dom/generators/utils/add-exported-type.ts similarity index 100% rename from packages/twenty-shared/scripts/remote-dom/generators/utils/add-exported-type.ts rename to packages/twenty-sdk/scripts/remote-dom/generators/utils/add-exported-type.ts diff --git a/packages/twenty-shared/scripts/remote-dom/generators/utils/add-file-header.ts b/packages/twenty-sdk/scripts/remote-dom/generators/utils/add-file-header.ts similarity index 100% rename from packages/twenty-shared/scripts/remote-dom/generators/utils/add-file-header.ts rename to packages/twenty-sdk/scripts/remote-dom/generators/utils/add-file-header.ts diff --git a/packages/twenty-shared/scripts/remote-dom/generators/utils/add-statement.ts b/packages/twenty-sdk/scripts/remote-dom/generators/utils/add-statement.ts similarity index 100% rename from packages/twenty-shared/scripts/remote-dom/generators/utils/add-statement.ts rename to packages/twenty-sdk/scripts/remote-dom/generators/utils/add-statement.ts diff --git a/packages/twenty-shared/scripts/remote-dom/generators/utils/event-to-react-prop.ts b/packages/twenty-sdk/scripts/remote-dom/generators/utils/event-to-react-prop.ts similarity index 100% rename from packages/twenty-shared/scripts/remote-dom/generators/utils/event-to-react-prop.ts rename to packages/twenty-sdk/scripts/remote-dom/generators/utils/event-to-react-prop.ts diff --git a/packages/twenty-shared/scripts/remote-dom/generators/utils/extract-html-tag.ts b/packages/twenty-sdk/scripts/remote-dom/generators/utils/extract-html-tag.ts similarity index 100% rename from packages/twenty-shared/scripts/remote-dom/generators/utils/extract-html-tag.ts rename to packages/twenty-sdk/scripts/remote-dom/generators/utils/extract-html-tag.ts diff --git a/packages/twenty-shared/scripts/remote-dom/generators/utils/generate-properties-config.ts b/packages/twenty-sdk/scripts/remote-dom/generators/utils/generate-properties-config.ts similarity index 100% rename from packages/twenty-shared/scripts/remote-dom/generators/utils/generate-properties-config.ts rename to packages/twenty-sdk/scripts/remote-dom/generators/utils/generate-properties-config.ts diff --git a/packages/twenty-shared/scripts/remote-dom/generators/utils/generate-properties-type.ts b/packages/twenty-sdk/scripts/remote-dom/generators/utils/generate-properties-type.ts similarity index 100% rename from packages/twenty-shared/scripts/remote-dom/generators/utils/generate-properties-type.ts rename to packages/twenty-sdk/scripts/remote-dom/generators/utils/generate-properties-type.ts diff --git a/packages/twenty-shared/scripts/remote-dom/generators/utils/generated-file-header.ts b/packages/twenty-sdk/scripts/remote-dom/generators/utils/generated-file-header.ts similarity index 100% rename from packages/twenty-shared/scripts/remote-dom/generators/utils/generated-file-header.ts rename to packages/twenty-sdk/scripts/remote-dom/generators/utils/generated-file-header.ts diff --git a/packages/twenty-shared/scripts/remote-dom/generators/utils/index.ts b/packages/twenty-sdk/scripts/remote-dom/generators/utils/index.ts similarity index 100% rename from packages/twenty-shared/scripts/remote-dom/generators/utils/index.ts rename to packages/twenty-sdk/scripts/remote-dom/generators/utils/index.ts diff --git a/packages/twenty-shared/scripts/remote-dom/generators/utils/schema-type-to-constructor.ts b/packages/twenty-sdk/scripts/remote-dom/generators/utils/schema-type-to-constructor.ts similarity index 100% rename from packages/twenty-shared/scripts/remote-dom/generators/utils/schema-type-to-constructor.ts rename to packages/twenty-sdk/scripts/remote-dom/generators/utils/schema-type-to-constructor.ts diff --git a/packages/twenty-shared/scripts/remote-dom/generators/utils/schema-type-to-ts.ts b/packages/twenty-sdk/scripts/remote-dom/generators/utils/schema-type-to-ts.ts similarity index 100% rename from packages/twenty-shared/scripts/remote-dom/generators/utils/schema-type-to-ts.ts rename to packages/twenty-sdk/scripts/remote-dom/generators/utils/schema-type-to-ts.ts diff --git a/packages/twenty-sdk/src/cli/utilities/build/common/front-component-build/utils/replace-html-tags-with-remote-components.ts b/packages/twenty-sdk/src/cli/utilities/build/common/front-component-build/utils/replace-html-tags-with-remote-components.ts index 08d2e285078..40d7d26470f 100644 --- a/packages/twenty-sdk/src/cli/utilities/build/common/front-component-build/utils/replace-html-tags-with-remote-components.ts +++ b/packages/twenty-sdk/src/cli/utilities/build/common/front-component-build/utils/replace-html-tags-with-remote-components.ts @@ -1,7 +1,7 @@ -import { HTML_TAG_TO_REMOTE_COMPONENT } from 'twenty-shared/front-component-constants'; - import { isDefined } from 'twenty-shared/utils'; +import { HTML_TAG_TO_REMOTE_COMPONENT } from '@/front-component-constants'; + const REMOTE_COMPONENTS_GLOBAL_NAMESPACE = 'RemoteComponents'; const buildHtmlTagToRemoteComponentPattern = (): RegExp => { diff --git a/packages/twenty-sdk/src/cli/utilities/build/manifest/manifest-build.ts b/packages/twenty-sdk/src/cli/utilities/build/manifest/manifest-build.ts index 893e0cc3d85..51014e64988 100644 --- a/packages/twenty-sdk/src/cli/utilities/build/manifest/manifest-build.ts +++ b/packages/twenty-sdk/src/cli/utilities/build/manifest/manifest-build.ts @@ -1,6 +1,3 @@ -import { basename, extname, relative, sep } from 'path'; -import { readFile } from 'fs-extra'; -import { glob } from 'fast-glob'; import { type EntityFilePaths, extractDefineEntity, @@ -8,23 +5,26 @@ import { TARGET_FUNCTION_TO_ENTITY_KEY_MAPPING, } from '@/cli/utilities/build/manifest/manifest-extract-config'; import { extractManifestFromFile } from '@/cli/utilities/build/manifest/manifest-extract-config-from-file'; +import { findPathFile } from '@/cli/utilities/file/file-find'; +import { parseJsoncFile } from '@/cli/utilities/file/file-jsonc'; +import { type FrontComponentConfig, type LogicFunctionConfig } from '@/sdk'; +import { glob } from 'fast-glob'; +import * as fs from 'fs-extra'; +import { readFile } from 'fs-extra'; +import { basename, extname, relative, sep } from 'path'; import { type ApplicationManifest, - type Manifest, type AssetManifest, ASSETS_DIR, type FieldManifest, type FrontComponentManifest, type LogicFunctionManifest, + type Manifest, type ObjectManifest, type RoleManifest, } from 'twenty-shared/application'; -import { parseJsoncFile } from '@/cli/utilities/file/file-jsonc'; -import { findPathFile } from '@/cli/utilities/file/file-find'; +import { type Sources } from 'twenty-shared/types'; import { assertUnreachable } from 'twenty-shared/utils'; -import { type FrontComponentConfig, type LogicFunctionConfig } from '@/sdk'; -import type { Sources } from 'twenty-shared/types'; -import * as fs from 'fs-extra'; const loadSources = async (appPath: string): Promise => { return await glob(['**/*.ts', '**/*.tsx'], { diff --git a/packages/twenty-shared/src/front-component-constants/AllowedHtmlElements.ts b/packages/twenty-sdk/src/front-component-constants/AllowedHtmlElements.ts similarity index 100% rename from packages/twenty-shared/src/front-component-constants/AllowedHtmlElements.ts rename to packages/twenty-sdk/src/front-component-constants/AllowedHtmlElements.ts diff --git a/packages/twenty-shared/src/front-component-constants/CommonHtmlEvents.ts b/packages/twenty-sdk/src/front-component-constants/CommonHtmlEvents.ts similarity index 100% rename from packages/twenty-shared/src/front-component-constants/CommonHtmlEvents.ts rename to packages/twenty-sdk/src/front-component-constants/CommonHtmlEvents.ts diff --git a/packages/twenty-shared/src/front-component-constants/EventToReact.ts b/packages/twenty-sdk/src/front-component-constants/EventToReact.ts similarity index 100% rename from packages/twenty-shared/src/front-component-constants/EventToReact.ts rename to packages/twenty-sdk/src/front-component-constants/EventToReact.ts diff --git a/packages/twenty-shared/src/front-component-constants/HtmlCommonProperties.ts b/packages/twenty-sdk/src/front-component-constants/HtmlCommonProperties.ts similarity index 100% rename from packages/twenty-shared/src/front-component-constants/HtmlCommonProperties.ts rename to packages/twenty-sdk/src/front-component-constants/HtmlCommonProperties.ts diff --git a/packages/twenty-shared/src/front-component-constants/HtmlTagToRemoteComponent.ts b/packages/twenty-sdk/src/front-component-constants/HtmlTagToRemoteComponent.ts similarity index 100% rename from packages/twenty-shared/src/front-component-constants/HtmlTagToRemoteComponent.ts rename to packages/twenty-sdk/src/front-component-constants/HtmlTagToRemoteComponent.ts diff --git a/packages/twenty-shared/src/front-component-constants/index.ts b/packages/twenty-sdk/src/front-component-constants/index.ts similarity index 100% rename from packages/twenty-shared/src/front-component-constants/index.ts rename to packages/twenty-sdk/src/front-component-constants/index.ts diff --git a/packages/twenty-shared/src/front-component/host/components/FrontComponentRenderer.tsx b/packages/twenty-sdk/src/front-component/host/components/FrontComponentRenderer.tsx similarity index 93% rename from packages/twenty-shared/src/front-component/host/components/FrontComponentRenderer.tsx rename to packages/twenty-sdk/src/front-component/host/components/FrontComponentRenderer.tsx index 6f47cd6ca2f..5e68c903bf4 100644 --- a/packages/twenty-shared/src/front-component/host/components/FrontComponentRenderer.tsx +++ b/packages/twenty-sdk/src/front-component/host/components/FrontComponentRenderer.tsx @@ -3,7 +3,7 @@ import { RemoteRootRenderer, } from '@remote-dom/react/host'; import React, { useState } from 'react'; -import { isDefined } from '../../../utils/validation/isDefined'; +import { isDefined } from 'twenty-shared/utils'; import { FrontComponentWorkerEffect } from '../../remote/components/FrontComponentWorkerEffect'; import { componentRegistry } from '../generated/host-component-registry'; diff --git a/packages/twenty-shared/src/front-component/host/generated/host-component-registry.ts b/packages/twenty-sdk/src/front-component/host/generated/host-component-registry.ts similarity index 98% rename from packages/twenty-shared/src/front-component/host/generated/host-component-registry.ts rename to packages/twenty-sdk/src/front-component/host/generated/host-component-registry.ts index b37fb963503..f39b002ff0a 100644 --- a/packages/twenty-shared/src/front-component/host/generated/host-component-registry.ts +++ b/packages/twenty-sdk/src/front-component/host/generated/host-component-registry.ts @@ -345,10 +345,11 @@ const HtmlHrWrapper = ({ }: { children?: React.ReactNode } & Record) => { return React.createElement('hr', filterProps(props), children); }; -export const componentRegistry = new Map< - string, - ReturnType ->([ +type ComponentRegistryValue = + | ReturnType + | typeof RemoteFragmentRenderer; + +export const componentRegistry: Map = new Map([ ['html-div', createRemoteComponentRenderer(HtmlDivWrapper)], ['html-span', createRemoteComponentRenderer(HtmlSpanWrapper)], ['html-section', createRemoteComponentRenderer(HtmlSectionWrapper)], diff --git a/packages/twenty-shared/src/front-component/host/generated/host-index.ts b/packages/twenty-sdk/src/front-component/host/generated/host-index.ts similarity index 100% rename from packages/twenty-shared/src/front-component/host/generated/host-index.ts rename to packages/twenty-sdk/src/front-component/host/generated/host-index.ts diff --git a/packages/twenty-shared/src/front-component/index.ts b/packages/twenty-sdk/src/front-component/index.ts similarity index 100% rename from packages/twenty-shared/src/front-component/index.ts rename to packages/twenty-sdk/src/front-component/index.ts diff --git a/packages/twenty-shared/src/front-component/remote/components/FrontComponentWorkerEffect.tsx b/packages/twenty-sdk/src/front-component/remote/components/FrontComponentWorkerEffect.tsx similarity index 100% rename from packages/twenty-shared/src/front-component/remote/components/FrontComponentWorkerEffect.tsx rename to packages/twenty-sdk/src/front-component/remote/components/FrontComponentWorkerEffect.tsx diff --git a/packages/twenty-shared/src/front-component/remote/generated/remote-components.ts b/packages/twenty-sdk/src/front-component/remote/generated/remote-components.ts similarity index 100% rename from packages/twenty-shared/src/front-component/remote/generated/remote-components.ts rename to packages/twenty-sdk/src/front-component/remote/generated/remote-components.ts diff --git a/packages/twenty-shared/src/front-component/remote/generated/remote-elements.ts b/packages/twenty-sdk/src/front-component/remote/generated/remote-elements.ts similarity index 100% rename from packages/twenty-shared/src/front-component/remote/generated/remote-elements.ts rename to packages/twenty-sdk/src/front-component/remote/generated/remote-elements.ts diff --git a/packages/twenty-shared/src/front-component/remote/generated/remote-index.ts b/packages/twenty-sdk/src/front-component/remote/generated/remote-index.ts similarity index 100% rename from packages/twenty-shared/src/front-component/remote/generated/remote-index.ts rename to packages/twenty-sdk/src/front-component/remote/generated/remote-index.ts diff --git a/packages/twenty-shared/src/front-component/remote/mock/mock-front-component.ts b/packages/twenty-sdk/src/front-component/remote/mock/mock-front-component.ts similarity index 90% rename from packages/twenty-shared/src/front-component/remote/mock/mock-front-component.ts rename to packages/twenty-sdk/src/front-component/remote/mock/mock-front-component.ts index 3f6943fb674..5e2a957bb0a 100644 --- a/packages/twenty-shared/src/front-component/remote/mock/mock-front-component.ts +++ b/packages/twenty-sdk/src/front-component/remote/mock/mock-front-component.ts @@ -1,7 +1,13 @@ +/* eslint-disable */ //@ts-nocheck import React, { useEffect, useState } from 'react'; -import { HtmlButton, HtmlDiv, HtmlH3, HtmlP } from '../generated/remote-components'; +import { + HtmlButton, + HtmlDiv, + HtmlH3, + HtmlP, +} from '../generated/remote-components'; const FrontComponent = () => { const [clickCount, setClickCount] = useState(0); diff --git a/packages/twenty-shared/src/front-component/remote/worker/createRemoteWorker.ts b/packages/twenty-sdk/src/front-component/remote/worker/createRemoteWorker.ts similarity index 100% rename from packages/twenty-shared/src/front-component/remote/worker/createRemoteWorker.ts rename to packages/twenty-sdk/src/front-component/remote/worker/createRemoteWorker.ts diff --git a/packages/twenty-shared/src/front-component/remote/worker/remote-worker.ts b/packages/twenty-sdk/src/front-component/remote/worker/remote-worker.ts similarity index 100% rename from packages/twenty-shared/src/front-component/remote/worker/remote-worker.ts rename to packages/twenty-sdk/src/front-component/remote/worker/remote-worker.ts diff --git a/packages/twenty-shared/src/front-component/types/HostToWorkerRenderContext.ts b/packages/twenty-sdk/src/front-component/types/HostToWorkerRenderContext.ts similarity index 100% rename from packages/twenty-shared/src/front-component/types/HostToWorkerRenderContext.ts rename to packages/twenty-sdk/src/front-component/types/HostToWorkerRenderContext.ts diff --git a/packages/twenty-shared/src/front-component/types/PropertySchema.ts b/packages/twenty-sdk/src/front-component/types/PropertySchema.ts similarity index 100% rename from packages/twenty-shared/src/front-component/types/PropertySchema.ts rename to packages/twenty-sdk/src/front-component/types/PropertySchema.ts diff --git a/packages/twenty-shared/src/front-component/types/WorkerExports.ts b/packages/twenty-sdk/src/front-component/types/WorkerExports.ts similarity index 100% rename from packages/twenty-shared/src/front-component/types/WorkerExports.ts rename to packages/twenty-sdk/src/front-component/types/WorkerExports.ts diff --git a/packages/twenty-sdk/tsconfig.json b/packages/twenty-sdk/tsconfig.json index 6069a8c2351..a6b0b8cb63c 100644 --- a/packages/twenty-sdk/tsconfig.json +++ b/packages/twenty-sdk/tsconfig.json @@ -25,5 +25,11 @@ "vite.config.ts", "scripts/generateBarrels.ts", "jest.config.mjs" + ], + "exclude": [ + "src/front-component/remote/mock/**/*", + "src/front-component/host/generated/host-component-registry.ts", + "src/front-component/remote/generated/remote-components.ts", + "src/front-component/remote/generated/remote-elements.ts" ] } diff --git a/packages/twenty-sdk/vite.config.ts b/packages/twenty-sdk/vite.config.ts index 33cdcb5a3f4..fcc5b4083c4 100644 --- a/packages/twenty-sdk/vite.config.ts +++ b/packages/twenty-sdk/vite.config.ts @@ -52,6 +52,11 @@ export default defineConfig(() => { return { root: __dirname, cacheDir: '../../node_modules/.vite/packages/twenty-sdk', + resolve: { + alias: { + '@/': path.resolve(__dirname, 'src') + '/', + }, + }, plugins: [ tsconfigPaths({ root: __dirname, @@ -81,6 +86,23 @@ export default defineConfig(() => { }, }), ], + 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: { outDir: 'dist', lib: { entry: entries, name: 'twenty-sdk' }, diff --git a/packages/twenty-shared/package.json b/packages/twenty-shared/package.json index 20d640c715a..0b1355f3d66 100644 --- a/packages/twenty-shared/package.json +++ b/packages/twenty-shared/package.json @@ -18,28 +18,20 @@ "@prettier/sync": "^0.5.2", "@types/babel__preset-env": "^7", "@types/handlebars": "^4.1.0", - "@types/react": "^18", - "@types/react-dom": "^18", "babel-plugin-module-resolver": "^5.0.2", "glob": "^11.1.0", - "ts-morph": "^25.0.0", "tsx": "^4.19.3", "vite": "^7.0.0", "vite-plugin-dts": "3.8.1", "vite-tsconfig-paths": "^4.2.1" }, "dependencies": { - "@quilted/threads": "^4.0.1", - "@remote-dom/core": "^1.10.1", - "@remote-dom/react": "^1.2.2", "@sniptt/guards": "^0.2.0", "class-validator": "^0.14.0", "handlebars": "^4.7.8", "libphonenumber-js": "^1.10.26", "lodash.camelcase": "^4.3.0", "qs": "^6.11.2", - "react": "^18.0.0", - "react-dom": "^18.0.0", "react-router-dom": "^6.4.4", "transliteration": "^2.3.5", "zod": "^4.1.11" @@ -70,16 +62,6 @@ "import": "./dist/database-events.mjs", "require": "./dist/database-events.cjs" }, - "./front-component": { - "types": "./dist/front-component/index.d.ts", - "import": "./dist/front-component.mjs", - "require": "./dist/front-component.cjs" - }, - "./front-component-constants": { - "types": "./dist/front-component-constants/index.d.ts", - "import": "./dist/front-component-constants.mjs", - "require": "./dist/front-component-constants.cjs" - }, "./metadata": { "types": "./dist/metadata/index.d.ts", "import": "./dist/metadata.mjs", @@ -122,8 +104,6 @@ "application", "constants", "database-events", - "front-component", - "front-component-constants", "metadata", "testing", "translations", @@ -146,12 +126,6 @@ "database-events": [ "dist/database-events/index.d.ts" ], - "front-component": [ - "dist/front-component/index.d.ts" - ], - "front-component-constants": [ - "dist/front-component-constants/index.d.ts" - ], "metadata": [ "dist/metadata/index.d.ts" ], diff --git a/packages/twenty-shared/project.json b/packages/twenty-shared/project.json index 11ba3245b01..67f5dec2fb9 100644 --- a/packages/twenty-shared/project.json +++ b/packages/twenty-shared/project.json @@ -22,10 +22,6 @@ "{projectRoot}/constants/dist", "{projectRoot}/database-events/package.json", "{projectRoot}/database-events/dist", - "{projectRoot}/front-component/package.json", - "{projectRoot}/front-component/dist", - "{projectRoot}/front-component-constants/package.json", - "{projectRoot}/front-component-constants/dist", "{projectRoot}/metadata/package.json", "{projectRoot}/metadata/dist", "{projectRoot}/testing/package.json", diff --git a/packages/twenty-shared/src/application/applicationType.ts b/packages/twenty-shared/src/application/applicationType.ts index 85ee727e05c..f10f9513f6f 100644 --- a/packages/twenty-shared/src/application/applicationType.ts +++ b/packages/twenty-shared/src/application/applicationType.ts @@ -1,5 +1,5 @@ -import { type ApplicationVariables } from '@/sdk'; -import { type SyncableEntityOptions } from '@/application/syncableEntityOptionsType'; +import { type ApplicationVariables } from './applicationVariablesType'; +import { type SyncableEntityOptions } from './syncableEntityOptionsType'; export type ApplicationMarketplaceData = { author?: string; diff --git a/packages/twenty-shared/src/application/manifestType.ts b/packages/twenty-shared/src/application/manifestType.ts index 23067ae6f4b..304e6c17bd7 100644 --- a/packages/twenty-shared/src/application/manifestType.ts +++ b/packages/twenty-shared/src/application/manifestType.ts @@ -1,14 +1,12 @@ -import { - type PackageJson, - type ApplicationManifest, - type ObjectManifest, - type LogicFunctionManifest, - type AssetManifest, - type FrontComponentManifest, - type RoleManifest, - type FieldManifest, -} from '@/sdk'; import { type Sources } from '@/types'; +import { type ApplicationManifest } from './applicationType'; +import { type AssetManifest } from './assetManifestType'; +import { type FieldManifest } from './fieldManifestType'; +import { type FrontComponentManifest } from './frontComponentManifestType'; +import { type LogicFunctionManifest } from './logicFunctionManifestType'; +import { type ObjectManifest } from './objectManifestType'; +import { type PackageJson } from './packageJsonType'; +import { type RoleManifest } from './roleManifestType'; export type Manifest = { application: ApplicationManifest; diff --git a/packages/twenty-shared/tsconfig.json b/packages/twenty-shared/tsconfig.json index 5a0349c21c2..04364670828 100644 --- a/packages/twenty-shared/tsconfig.json +++ b/packages/twenty-shared/tsconfig.json @@ -1,7 +1,6 @@ { "extends": "../../tsconfig.base.json", "compilerOptions": { - "jsx": "react", "allowJs": false, "esModuleInterop": false, "allowSyntheticDefaultImports": true, @@ -17,15 +16,8 @@ }, "include": [ "src/**/*.ts", - "src/**/*.tsx", "scripts/**/*.ts", "**/__mocks__/**/*", "jest.config.mjs" - ], - "exclude": [ - "src/front-component/remote/mock/**/*", - "src/front-component/host/generated/host-component-registry.ts", - "src/front-component/remote/generated/remote-components.ts", - "src/front-component/remote/generated/remote-elements.ts" ] } diff --git a/packages/twenty-shared/tsconfig.lib.json b/packages/twenty-shared/tsconfig.lib.json index 59caaf58a1e..930c23d66be 100644 --- a/packages/twenty-shared/tsconfig.lib.json +++ b/packages/twenty-shared/tsconfig.lib.json @@ -7,12 +7,10 @@ "outDir": "../../.cache/tsc", "types": ["node"] }, - "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"], + "include": ["src/**/*.js", "src/**/*.ts"], "exclude": [ "**/*.spec.ts", "**/*.test.ts", - "**/*.spec.tsx", - "**/*.test.tsx", "**/__mocks__/**/*" ] } diff --git a/packages/twenty-shared/vite.config.ts b/packages/twenty-shared/vite.config.ts index 1509cdd5b34..49d38f805b7 100644 --- a/packages/twenty-shared/vite.config.ts +++ b/packages/twenty-shared/vite.config.ts @@ -52,24 +52,6 @@ export default defineConfig(() => { }), dts({ entryRoot: './src', tsconfigPath: tsConfigPath }), ], - worker: { - format: 'iife', - rollupOptions: { - output: { - inlineDynamicImports: true, - }, - }, - plugins: () => [ - { - name: 'define-process-env', - transform(code: string) { - return code - .replace(/process\.env\.NODE_ENV/g, JSON.stringify('production')) - .replace(/process\.env/g, '{}'); - }, - }, - ], - }, build: { outDir: 'dist', lib: { entry: entries, name: 'twenty-shared' }, diff --git a/yarn.lock b/yarn.lock index b8289f7f4d5..db4de530ed1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -24887,15 +24887,6 @@ __metadata: languageName: node linkType: hard -"@types/react-dom@npm:^18": - version: 18.3.7 - resolution: "@types/react-dom@npm:18.3.7" - peerDependencies: - "@types/react": ^18.0.0 - checksum: 10c0/8bd309e2c3d1604a28a736a24f96cbadf6c05d5288cfef8883b74f4054c961b6b3a5e997fd5686e492be903c8f3380dba5ec017eff3906b1256529cd2d39603e - languageName: node - linkType: hard - "@types/react-dom@npm:^18.2.15": version: 18.3.0 resolution: "@types/react-dom@npm:18.3.0" @@ -24952,15 +24943,6 @@ __metadata: languageName: node linkType: hard -"@types/react@npm:^19.0.2": - version: 19.2.8 - resolution: "@types/react@npm:19.2.8" - dependencies: - csstype: "npm:^3.2.2" - checksum: 10c0/832834998c4ee971fca72ecf1eb95dc924ad3931a2112c687a4dae498aabd115c5fa4db09186853e34a646226b0223808c8f867df03d17601168f9cf119448de - languageName: node - linkType: hard - "@types/readdir-glob@npm:*": version: 1.1.5 resolution: "@types/readdir-glob@npm:1.1.5" @@ -51456,7 +51438,7 @@ __metadata: languageName: node linkType: hard -"react-dom@npm:18.3.1, react-dom@npm:^18.0.0, react-dom@npm:^18.2.0": +"react-dom@npm:18.3.1, react-dom@npm:^18.2.0": version: 18.3.1 resolution: "react-dom@npm:18.3.1" dependencies: @@ -52022,13 +52004,6 @@ __metadata: languageName: node linkType: hard -"react@npm:^19.0.0": - version: 19.2.4 - resolution: "react@npm:19.2.4" - checksum: 10c0/cd2c9ff67a720799cc3b38a516009986f7fc4cb8d3e15716c6211cf098d1357ee3e348ab05ad0600042bbb0fd888530ba92e329198c92eafa0994f5213396596 - languageName: node - linkType: hard - "react@npm:^19.1.0": version: 19.2.0 resolution: "react@npm:19.2.0" @@ -57656,6 +57631,7 @@ __metadata: remark-gfm: "npm:^4.0.1" rollup-plugin-visualizer: "npm:^5.14.0" transliteration: "npm:^2.3.5" + twenty-sdk: "workspace:*" twenty-shared: "workspace:*" twenty-ui: "workspace:*" use-debounce: "npm:^10.0.0" @@ -57665,18 +57641,22 @@ __metadata: languageName: unknown linkType: soft -"twenty-sdk@workspace:packages/twenty-sdk": +"twenty-sdk@workspace:*, twenty-sdk@workspace:packages/twenty-sdk": version: 0.0.0-use.local resolution: "twenty-sdk@workspace:packages/twenty-sdk" dependencies: "@genql/cli": "npm:^3.0.3" + "@prettier/sync": "npm:^0.5.2" + "@quilted/threads": "npm:^4.0.1" + "@remote-dom/core": "npm:^1.10.1" + "@remote-dom/react": "npm:^1.2.2" "@sniptt/guards": "npm:^0.2.0" "@types/archiver": "npm:^6.0.0" "@types/fs-extra": "npm:^11.0.0" "@types/inquirer": "npm:^9.0.0" "@types/lodash.camelcase": "npm:^4.3.7" "@types/node": "npm:^24.0.0" - "@types/react": "npm:^19.0.2" + "@types/react": "npm:^18" archiver: "npm:^7.0.1" axios: "npm:^1.6.0" chalk: "npm:^5.3.0" @@ -57692,7 +57672,8 @@ __metadata: inquirer: "npm:^10.0.0" jsonc-parser: "npm:^3.2.0" lodash.camelcase: "npm:^4.3.0" - react: "npm:^19.0.0" + react: "npm:^18.0.0" + ts-morph: "npm:^25.0.0" tsx: "npm:^4.7.0" typescript: "npm:^5.9.2" uuid: "npm:^13.0.0" @@ -57700,6 +57681,7 @@ __metadata: vite-plugin-dts: "npm:^4.5.4" vite-tsconfig-paths: "npm:^4.2.1" wait-on: "npm:^7.2.0" + zod: "npm:^4.1.11" bin: twenty: dist/cli.cjs languageName: unknown @@ -57922,14 +57904,9 @@ __metadata: "@babel/preset-env": "npm:^7.26.9" "@lingui/core": "npm:^5.1.2" "@prettier/sync": "npm:^0.5.2" - "@quilted/threads": "npm:^4.0.1" - "@remote-dom/core": "npm:^1.10.1" - "@remote-dom/react": "npm:^1.2.2" "@sniptt/guards": "npm:^0.2.0" "@types/babel__preset-env": "npm:^7" "@types/handlebars": "npm:^4.1.0" - "@types/react": "npm:^18" - "@types/react-dom": "npm:^18" babel-plugin-module-resolver: "npm:^5.0.2" class-validator: "npm:^0.14.0" glob: "npm:^11.1.0" @@ -57937,11 +57914,8 @@ __metadata: libphonenumber-js: "npm:^1.10.26" lodash.camelcase: "npm:^4.3.0" qs: "npm:^6.11.2" - react: "npm:^18.0.0" - react-dom: "npm:^18.0.0" react-router-dom: "npm:^6.4.4" transliteration: "npm:^2.3.5" - ts-morph: "npm:^25.0.0" tsx: "npm:^4.19.3" vite: "npm:^7.0.0" vite-plugin-dts: "npm:3.8.1"