chore: add twenty-ui hot reload in development mode

Author: thaisguigon

Diff for: .eslintrc.cjs

@@ -48,11 +48,16 @@ module.exports = {
       'error',
       {
         groups: [
+          // Packages
           ['^react', '^@?\\w'],
-          ['^(@|~|src)(/.*|$)'],
+          // Internal modules
+          ['^(@|~|src|@ui)(/.*|$)'],
+          // Side effect imports
           ['^\\u0000'],
+          // Relative imports
           ['^\\.\\.(?!/?$)', '^\\.\\./?$'],
           ['^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$'],
+          // CSS imports
           ['^.+\\.?(css)$'],
         ],
       },

Diff for: package.json

@@ -306,7 +306,7 @@
     "typescript": "^5.3.3",
     "vite": "^5.0.0",
     "vite-plugin-checker": "^0.6.2",
-    "vite-plugin-dts": "~2.3.0",
+    "vite-plugin-dts": "3.8.1",
     "vite-plugin-svgr": "^4.2.0",
     "vitest": "1.4.0"
   },

Diff for: packages/twenty-emails/package.json

@@ -17,13 +17,6 @@
       "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"
-  },
   "engines": {
     "node": "^18.17.1",
     "npm": "please-use-yarn",

Diff for: packages/twenty-emails/vite.config.ts

@@ -13,8 +13,7 @@ export default defineConfig({
     tsconfigPaths(),
     dts({
       entryRoot: 'src',
-      tsConfigFilePath: path.join(__dirname, 'tsconfig.lib.json'),
-      skipDiagnostics: true,
+      tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
     }),
   ],
 

Diff for: packages/twenty-front/jest.config.ts

@@ -1,5 +1,8 @@
+/* eslint-disable @nx/enforce-module-boundaries,import/no-relative-packages */
 import { JestConfigWithTsJest, pathsToModuleNameMapper } from 'ts-jest';
 
+import { compilerOptions as twentyUiCompilerOptions } from '../twenty-ui/tsconfig.json';
+
 import { compilerOptions } from './tsconfig.json';
 
 const jestConfig: JestConfigWithTsJest = {
@@ -15,6 +18,8 @@ const jestConfig: JestConfigWithTsJest = {
   },
   moduleNameMapper: {
     ...pathsToModuleNameMapper(compilerOptions.paths),
+    // Include internal library aliases, so there is no need to build the library before tests.
+    ...pathsToModuleNameMapper(twentyUiCompilerOptions.paths),
     '\\.(jpg|jpeg|png|gif|webp|svg|svg\\?react)$':
       '<rootDir>/__mocks__/imageMock.js',
     '\\.css$': '<rootDir>/__mocks__/styleMock.js',

Diff for: packages/twenty-front/tsconfig.json

@@ -7,27 +7,23 @@
     "skipLibCheck": true,
     "allowJs": true,
     "esModuleInterop": true,
-    "paths": {
-      "@/*": ["packages/twenty-front/src/modules/*"],
-      "~/*": ["packages/twenty-front/src/*"],
-      "twenty-ui": ["packages/twenty-ui/src/index.ts"]
-    },
-
-    /* Bundler mode */
     "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true,
     "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-
-    /* Linting */
     "strict": true,
     "noUnusedLocals": false,
     "noUnusedParameters": false,
     "noFallthroughCasesInSwitch": true,
-    "forceConsistentCasingInFileNames": true
+    "forceConsistentCasingInFileNames": true,
+    "paths": {
+      "@/*": ["packages/twenty-front/src/modules/*"],
+      "~/*": ["packages/twenty-front/src/*"],
+      "twenty-ui": ["packages/twenty-ui/src/index.ts"]
+    }
   },
   "files": [],
   "include": [],

Diff for: packages/twenty-front/vite.config.ts

@@ -42,20 +42,17 @@ export default defineConfig(({ command, mode }) => {
 
     plugins: [
       react({ jsxImportSource: '@emotion/react' }),
-      tsconfigPaths(),
+      tsconfigPaths({
+        projects: [
+          'tsconfig.json',
+          // Include internal library aliases in development mode, so hot reload is enabled for libraries.
+          mode === 'development' ? '../twenty-ui/tsconfig.json' : undefined,
+        ].filter(Boolean) as string[],
+      }),
       svgr(),
       checker(checkers),
     ],
 
-    resolve:
-      mode === 'development'
-        ? {
-            alias: {
-              '@ui': '../../packages/twenty-ui/src',
-            },
-          }
-        : {},
-
     build: {
       outDir: 'build',
     },

Diff for: packages/twenty-ui/vite.config.ts

@@ -1,22 +1,21 @@
 /// <reference types='vitest' />
-import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
 import react from '@vitejs/plugin-react-swc';
 import * as path from 'path';
 import { defineConfig } from 'vite';
 import checker from 'vite-plugin-checker';
 import dts from 'vite-plugin-dts';
+import tsconfigPaths from 'vite-tsconfig-paths';
 
 export default defineConfig({
   root: __dirname,
   cacheDir: '../../node_modules/.vite/packages/twenty-ui',
 
   plugins: [
     react(),
-    nxViteTsPaths(),
+    tsconfigPaths(),
     dts({
       entryRoot: 'src',
-      tsConfigFilePath: path.join(__dirname, 'tsconfig.lib.json'),
-      skipDiagnostics: true,
+      tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
     }),
     checker({
       typescript: {