chore: set up twenty-emails config so build isn't needed in development (#3619)

* chore: set up twenty-emails config so build isn't needed in development

* fix: fix script dependency

* chore: use @vitejs/plugin-react-swc

* Remove useless dependancy

* Fix typing

* chore: use baseUrl in twenty-emails

* chore: fix docker server prod build

* refactor: optimize Docker file and tsconfig

* fix: fix WORKDIR in docker

---------

Co-authored-by: martmull <martmull@hotmail.fr>

.gitignore

@@ -18,4 +18,3 @@
 !.yarn/versions
 coverage
 .vercel
-**/yarn.lock

nx.json

@@ -2,20 +2,38 @@
   "targetDefaults": {
     "build": {
       "cache": true,
-      "dependsOn": ["^build"]
+      "dependsOn": [
+        "^build"
+      ]
+    },
+    "start": {
+      "cache": true,
+      "dependsOn": [
+        "^build"
+      ]
     },
     "lint": {
       "cache": true
     },
     "test": {
-      "cache": true
+      "cache": true,
+      "dependsOn": [
+        "^build"
+      ]
     },
-    "e2e": {
+    "test:e2e": {
-      "cache": true
+      "cache": true,
+      "dependsOn": [
+        "^build"
+      ]
     },
     "@nx/jest:jest": {
       "cache": true,
-      "inputs": ["default", "^default", "{workspaceRoot}/jest.preset.js"],
+      "inputs": [
+        "default",
+        "^default",
+        "{workspaceRoot}/jest.preset.js"
+      ],
       "options": {
         "passWithNoTests": true
       },
@@ -25,6 +43,13 @@
           "codeCoverage": true
         }
       }
+    },
+    "@nx/vite:test": {
+      "cache": true,
+      "inputs": [
+        "default",
+        "^default"
+      ]
     }
   },
   "installation": {
@@ -32,5 +57,15 @@
   },
   "affected": {
     "defaultBase": "main"
+  },
+  "generators": {
+    "@nx/react": {
+      "application": {
+        "babel": true
+      },
+      "library": {
+        "unitTestRunner": "none"
+      }
+    }
   }
 }

package.json

@@ -155,6 +155,8 @@
     "zod": "^3.22.2"
   },
   "devDependencies": {
+    "@babel/core": "^7.14.5",
+    "@babel/preset-react": "^7.14.5",
     "@docusaurus/module-type-aliases": "^3.0.0",
     "@docusaurus/tsconfig": "3.0.0",
     "@graphql-codegen/cli": "^3.3.1",
@@ -168,7 +170,9 @@
     "@nx/eslint": "17.2.7",
     "@nx/eslint-plugin": "17.2.7",
     "@nx/jest": "17.2.7",
-    "@nx/js": "17.2.7",
+    "@nx/js": "17.2.8",
+    "@nx/react": "^17.2.8",
+    "@nx/vite": "17.2.8",
     "@storybook/addon-actions": "^7.6.3",
     "@storybook/addon-coverage": "^1.0.0",
     "@storybook/addon-essentials": "^7.6.7",
@@ -185,7 +189,7 @@
     "@swc-node/register": "~1.6.7",
     "@swc/core": "~1.3.100",
     "@testing-library/jest-dom": "^6.1.5",
-    "@testing-library/react": "^13.4.0",
+    "@testing-library/react": "14.0.0",
     "@types/apollo-upload-client": "^17.0.2",
     "@types/bcrypt": "^5.0.0",
     "@types/better-sqlite3": "^7.6.8",
@@ -241,6 +245,7 @@
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jest-fetch-mock": "^3.0.3",
+    "jsdom": "~22.1.0",
     "msw": "^2.0.11",
     "msw-storybook-addon": "2.0.0--canary.122.b3ed3b1.0",
     "nx": "^17.2.8",
@@ -259,6 +264,7 @@
     "typescript": "^5.3.3",
     "vite": "^5.0.0",
     "vite-plugin-checker": "^0.6.2",
+    "vite-plugin-dts": "~2.3.0",
     "vite-plugin-svgr": "^4.2.0"
   },
   "engines": {

packages/twenty-docker/prod/twenty-server/Dockerfile

@@ -5,20 +5,15 @@ WORKDIR /app
 COPY ./package.json .
 COPY ./yarn.lock .
 COPY ./.yarnrc.yml .
+COPY ./tsconfig.base.json .
+COPY ./nx.json .
 COPY ./.yarn/releases /app/.yarn/releases
-COPY ./tools/eslint-rules /app/tools/eslint-rules
-COPY ./packages/twenty-server/package.json /app/packages/twenty-server/package.json
-COPY ./packages/twenty-server/patches /app/packages/twenty-server/patches
 COPY ./packages/twenty-emails /app/packages/twenty-emails
-
+COPY ./packages/twenty-server /app/packages/twenty-server
-WORKDIR /app/packages/twenty-emails
+RUN yarn workspaces focus twenty-emails twenty-server
-RUN yarn workspaces focus
+RUN npx nx run twenty-server:build
-RUN yarn build
 
 WORKDIR /app/packages/twenty-server
-COPY ./packages/twenty-server /app/packages/twenty-server
-RUN yarn workspaces focus
-RUN yarn build
 
 LABEL org.opencontainers.image.source=https://github.com/twentyhq/twenty
 LABEL org.opencontainers.image.description="This image provides a consistent and reproducible environment for the backend, ensuring it deploys faster and runs the same way regardless of the deployment environment."

packages/twenty-emails/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

packages/twenty-emails/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["../../.eslintrc.js"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

packages/twenty-emails/package.json

@@ -8,18 +8,32 @@
   "main": "./dist/index.js",
   "scripts": {
     "nx": "NX_DEFAULT_PROJECT=twenty-emails node ../../node_modules/nx/bin/nx.js",
-    "build": "tsup"
+    "build": "vite build",
+    "lint": "eslint"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
   },
   "devDependencies": {
+    "@nx/vite": "17.2.8",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "~2.3.0",
+    "vite-tsconfig-paths": "^4.2.1"
+  },
+  "dependencies": {
     "@react-email/components": "0.0.12",
-    "@types/react": "^18.2.39",
+    "date-fns": "^2.30.0"
-    "date-fns": "^2.30.0",
-    "tsup": "^8.0.1",
-    "typescript": "^5.3.3"
   },
   "engines": {
     "node": "^18.17.1",
     "npm": "please-use-yarn",
     "yarn": "^4.0.2"
+  },
+  "nx": {
+    "projectType": "library"
   }
 }

packages/twenty-emails/src/components/BaseEmail.tsx

@@ -1,13 +1,17 @@
-import * as React from 'react';
+import { PropsWithChildren } from 'react';
 import { Container, Html } from '@react-email/components';
 import { BaseHead } from 'src/components/BaseHead';
 import { Logo } from 'src/components/Logo';
 
-export const BaseEmail = ({ children, width = 290 }) => {
+type BaseEmailProps = PropsWithChildren<{
+  width?: number;
+}>;
+
+export const BaseEmail = ({ children, width }: BaseEmailProps) => {
   return (
     <Html lang="en">
       <BaseHead />
-      <Container width={width}>
+      <Container width={width || 290}>
         <Logo />
         {children}
       </Container>

packages/twenty-emails/src/components/BaseHead.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { Font, Head } from '@react-email/components';
 import { emailTheme } from 'src/common-style';
 

packages/twenty-emails/src/components/CallToAction.tsx

@@ -1,6 +1,7 @@
-import * as React from 'react';
+import { ReactNode } from 'react';
 import { Button } from '@react-email/button';
 import { emailTheme } from 'src/common-style';
+
 const callToActionStyle = {
   display: 'flex',
   padding: '8px 32px',
@@ -13,7 +14,12 @@ const callToActionStyle = {
   fontWeight: emailTheme.font.weight.bold,
 };
 
-export const CallToAction = ({ value, href }) => {
+type CallToActionProps = {
+  href: string;
+  value: ReactNode;
+};
+
+export const CallToAction = ({ value, href }: CallToActionProps) => {
   return (
     <Button href={href} style={callToActionStyle}>
       {value}

packages/twenty-emails/src/components/HighlightedText.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { ReactNode } from 'react';
 import { Column } from '@react-email/components';
 import { Row } from '@react-email/row';
 import { Text } from '@react-email/text';
@@ -18,7 +18,11 @@ const highlightedStyle = {
   color: emailTheme.font.colors.highlighted,
 };
 
-export const HighlightedText = ({ value }) => {
+type HighlightedTextProps = {
+  value: ReactNode;
+};
+
+export const HighlightedText = ({ value }: HighlightedTextProps) => {
   return (
     <Row style={rowStyle}>
       <Column>

packages/twenty-emails/src/components/Link.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { ReactNode } from 'react';
 import { Link as EmailLink } from '@react-email/components';
 import { emailTheme } from 'src/common-style';
 
@@ -7,7 +7,12 @@ const linkStyle = {
   textDecoration: 'underline',
 };
 
-export const Link = ({ value, href }) => {
+type LinkProps = {
+  value: ReactNode;
+  href: string;
+};
+
+export const Link = ({ value, href }: LinkProps) => {
   return (
     <EmailLink href={href} style={linkStyle}>
       {value}

packages/twenty-emails/src/components/MainText.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { PropsWithChildren } from 'react';
 import { Text } from '@react-email/text';
 import { emailTheme } from 'src/common-style';
 
@@ -8,6 +8,6 @@ const mainTextStyle = {
   color: emailTheme.font.colors.primary,
 };
 
-export const MainText = ({ children }) => {
+export const MainText = ({ children }: PropsWithChildren) => {
   return <Text style={mainTextStyle}>{children}</Text>;
 };

packages/twenty-emails/src/components/Title.tsx

@@ -1,6 +1,10 @@
+import { ReactNode } from 'react';
 import { Heading } from '@react-email/components';
-import * as React from 'react';
 
-export const Title = ({ value }) => {
+type TitleProps = {
+  value: ReactNode;
+};
+
+export const Title = ({ value }: TitleProps) => {
   return <Heading as="h1">{value}</Heading>;
 };

packages/twenty-emails/src/emails/clean-inactive-workspaces.email.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { BaseEmail } from 'src/components/BaseEmail';
 import { CallToAction } from 'src/components/CallToAction';
 import { HighlightedText } from 'src/components/HighlightedText';

packages/twenty-emails/src/emails/delete-inactive-workspaces.email.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { Column, Row, Section } from '@react-email/components';
 import { BaseEmail } from 'src/components/BaseEmail';
 import { MainText } from 'src/components/MainText';

packages/twenty-emails/src/emails/password-reset-link.email.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { BaseEmail } from 'src/components/BaseEmail';
 import { CallToAction } from 'src/components/CallToAction';
 import { Link } from 'src/components/Link';

packages/twenty-emails/src/emails/password-update-notify.email.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { format } from 'date-fns';
 import { BaseEmail } from 'src/components/BaseEmail';
 import { CallToAction } from 'src/components/CallToAction';

packages/twenty-emails/src/index.ts

@@ -0,0 +1,4 @@
+export * from './emails/clean-inactive-workspaces.email';
+export * from './emails/delete-inactive-workspaces.email';
+export * from './emails/password-reset-link.email';
+export * from './emails/password-update-notify.email';

packages/twenty-emails/tsconfig.json

@@ -1,7 +1,19 @@
 {
   "compilerOptions": {
-    "module": "commonjs",
+    "jsx": "react-jsx",
-    "baseUrl": "./",
+    "allowJs": false,
-    "jsx": "react-jsx"
+    "esModuleInterop": false,
-  }
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "types": ["vite/client"],
+    "baseUrl": "."
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json"
 }

packages/twenty-emails/tsconfig.lib.json

@@ -0,0 +1,22 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "node",
+      "@nx/react/typings/image.d.ts",
+      "vite/client"
+    ]
+  },
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}

packages/twenty-emails/tsup.config.ts

@@ -1,9 +0,0 @@
-import { defineConfig } from 'tsup';
-
-export default defineConfig([
-  {
-    entry: { index: './tsup.index.tsx' },
-    format: ['cjs', 'esm'],
-    dts: true,
-  },
-]);

packages/twenty-emails/tsup.index.tsx

@@ -1,4 +0,0 @@
-export * from './src/emails/clean-inactive-workspaces.email';
-export * from './src/emails/delete-inactive-workspaces.email';
-export * from './src/emails/password-reset-link.email';
-export * from './src/emails/password-update-notify.email';

packages/twenty-emails/vite.config.ts

@@ -0,0 +1,43 @@
+import react from '@vitejs/plugin-react-swc';
+import * as path from 'path';
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+export default defineConfig({
+  root: __dirname,
+  cacheDir: '../../node_modules/.vite/packages/twenty-emails',
+
+  plugins: [
+    react(),
+    tsconfigPaths(),
+    dts({
+      entryRoot: 'src',
+      tsConfigFilePath: path.join(__dirname, 'tsconfig.lib.json'),
+      skipDiagnostics: true,
+    }),
+  ],
+
+  // Configuration for building your library.
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    outDir: './dist',
+    reportCompressedSize: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: 'src/index.ts',
+      name: 'twenty-emails',
+      fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forget to update your package.json as well.
+      formats: ['es', 'cjs'],
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: ['react', 'react-dom', 'react/jsx-runtime'],
+    },
+  },
+});

packages/twenty-server/package.json

@@ -8,19 +8,18 @@
   "scripts": {
     "nx": "NX_DEFAULT_PROJECT=twenty-server node ../../node_modules/nx/bin/nx.js",
     "prebuild": "rimraf dist",
-    "build": "yarn prebuild && nest build",
+    "build": "yarn prebuild && nest build --path ./tsconfig.build.json",
-    "build-twenty-emails": "yarn nx run twenty-emails:build",
     "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
-    "start": "set NODE_ENV=development && yarn build-twenty-emails && nest start",
+    "start": "NODE_ENV=development && nest start",
-    "start:dev": "yarn build-twenty-emails && nest start --watch",
+    "start:dev": "npx nx start --watch",
-    "start:debug": "yarn build-twenty-emails && nest start --debug --watch",
+    "start:debug": "npx nx start:dev --debug",
     "start:prod": "node dist/src/main",
     "lint": "eslint \"src/**/*.ts\" --fix",
-    "test": "yarn build-twenty-emails && jest",
+    "test": "jest",
-    "test:watch": "yarn build-twenty-emails && jest --watch",
+    "test:watch": "npx nx test --watch",
-    "test:cov": "yarn build-twenty-emails && jest --coverage",
+    "test:cov": "npx nx test --coverage",
-    "test:debug": "yarn build-twenty-emails && node --inspect-brk -r tsconfig-paths/register -r ts-node/register ../../node_modules/.bin/jest --runInBand",
+    "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register ../../node_modules/.bin/jest --runInBand",
-    "test:e2e": "yarn build-twenty-emails && ./scripts/run-integration.sh",
+    "test:e2e": "./scripts/run-integration.sh",
     "typeorm": "npx ts-node -r tsconfig-paths/register ../../node_modules/typeorm/cli.js",
     "typeorm:migrate": "yarn typeorm migration:run -d ./src/database/typeorm/metadata/metadata.datasource.ts && yarn typeorm migration:run -d ./src/database/typeorm/core/core.datasource.ts",
     "database:init": "yarn database:setup && yarn database:seed:dev",
@@ -96,7 +95,6 @@
     "react": "^18.2.0",
     "rimraf": "^3.0.2",
     "sharp": "^0.32.1",
-    "twenty-emails": "workspace:*",
     "type-fest": "^4.1.0",
     "typeorm": "^0.3.17"
   },
@@ -112,5 +110,14 @@
     "node": "^18.17.1",
     "npm": "please-use-yarn",
     "yarn": "^4.0.2"
+  },
+  "nx": {
+    "targets": {
+      "test:debug": {
+        "dependsOn": [
+          "^build"
+        ]
+      }
+    }
   }
 }

packages/twenty-server/tsconfig.build.json

@@ -1,4 +1,11 @@
 {
   "extends": "./tsconfig.json",
-  "exclude": ["node_modules", "test", "dist", "**/*spec.ts"]
+  "compilerOptions": {
+    "rootDir": ".",
+    "paths": {
+      "src/*": ["packages/twenty-server/src/*"]
+    },
+    "types": ["node"]
+  },
+  "exclude": ["node_modules", "dist", "test", "**/*spec.ts"]
 }

packages/twenty-server/tsconfig.json

@@ -1,5 +1,7 @@
 {
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
+    "jsx": "react-jsx",
     "module": "commonjs",
     "declaration": true,
     "removeComments": true,
@@ -11,8 +13,6 @@
     "target": "es2017",
     "sourceMap": true,
     "outDir": "./dist",
-    "rootDir": "./",
-    "baseUrl": "./",
     "incremental": true,
     "skipLibCheck": true,
     "strictNullChecks": true,
@@ -22,6 +22,10 @@
     "forceConsistentCasingInFileNames": false,
     "noFallthroughCasesInSwitch": false,
     "resolveJsonModule": true,
-    "types": ["jest", "node"]
+    "types": ["jest", "node"],
+    "paths": {
+      "src/*": ["packages/twenty-server/src/*"],
+      "twenty-emails": ["packages/twenty-emails/src/index.ts"]
+    }
   }
 }

tsconfig.base.json

@@ -14,7 +14,9 @@
     "skipLibCheck": true,
     "skipDefaultLibCheck": true,
     "baseUrl": ".",
-    "paths": {}
+    "paths": {
+      "twenty-emails": ["packages/twenty-emails/src/index.ts"]
+    }
   },
   "exclude": ["node_modules", "tmp"]
 }