mirror of
https://github.com/twentyhq/twenty
synced 2026-04-21 13:37:22 +00:00
d2f8352cb8
## Recoil → Jotai progressive migration: infrastructure + ChipFieldDisplay ### Benchmark In the beginning, there was no hope: <img width="1180" height="948" alt="image" src="https://github.com/user-attachments/assets/f8635991-52e6-4958-8240-6ba7214132b2" /> Then the hope was reborn <img width="2070" height="948" alt="image" src="https://github.com/user-attachments/assets/be1182b9-1c8d-4fdc-ab4c-1484ad74449d" /> ### Approach We introduce a **V2 state management layer** backed by Jotai that mirrors the existing Recoil API, enabling component-by-component migration without a big-bang rewrite. #### V2 API (Jotai-backed, Recoil-ergonomic) - `createStateV2` / `createFamilyStateV2` — drop-in replacements for `createState` / `createFamilyState`, returning wrapper types over Jotai atoms - `useRecoilValueV2`, `useRecoilStateV2`, `useFamilyRecoilValueV2`, etc. — thin wrappers around Jotai's `useAtomValue` / `useAtom` / `useSetAtom` - A shared `jotaiStore` (via `createStore()`) passed to a `<JotaiProvider>` wrapping `<RecoilRoot>`, also accessible imperatively for dual-writes #### Dual-write bridge for progressive migration For state shared between migrated and non-migrated components, we use **dual-write**: writers update both the Recoil atom and the Jotai V2 atom (via `jotaiStore.set()`). This avoids sync components or extra subscriptions. Write sites updated: `useUpsertRecordsInStore`, `useSetRecordTableData`, `ListenRecordUpdatesEffect`, `RecordShowEffect`, `useLoadRecordIndexStates`, `useUpdateObjectViewOptions`. #### First migration: ChipFieldDisplay render path - `useChipFieldDisplay` → reads `recordStoreFamilyStateV2` via `useFamilyRecoilValueV2` (was `useRecoilValue(recordStoreFamilyState)`) - `RecordChip` → reads `recordIndexOpenRecordInStateV2` via `useRecoilValueV2` (was `useRecoilValue(recordIndexOpenRecordInState)`) - `Avatar` (twenty-ui) and event handlers (`useOpenRecordInCommandMenu`) left on Recoil — not on the render path / in a different package #### Pattern for migrating additional state 1. Create V2 atom: `createStateV2` or `createFamilyStateV2` 2. Add `jotaiStore.set(v2Atom, value)` at each write site 3. Switch readers to `useRecoilValueV2(v2Atom)` 4. Once all readers are migrated, remove the Recoil atom and dual-writes #### Why not jotai-recoil-adapter? Evaluated [jotai-recoil-adapter](https://github.com/clockelliptic/jotai-recoil-adapter) — not production-ready (21 open issues, no React 19, forces providerless mode, missing types). We built a purpose-built thin layer instead.
158 lines
5.3 KiB
JSON
158 lines
5.3 KiB
JSON
{
|
|
"name": "twenty-front",
|
|
"private": true,
|
|
"type": "module",
|
|
"scripts": {
|
|
"build": "NODE_ENV=production VITE_DISABLE_TYPESCRIPT_CHECKER=true NODE_OPTIONS=--max-old-space-size=8192 npx vite build && sh ./scripts/inject-runtime-env.sh",
|
|
"build:sourcemaps": "NODE_ENV=production VITE_BUILD_SOURCEMAP=true VITE_DISABLE_TYPESCRIPT_CHECKER=true NODE_OPTIONS=--max-old-space-size=8192 npx vite build && sh ./scripts/inject-runtime-env.sh",
|
|
"start:prod": "NODE_ENV=production npx serve -s build",
|
|
"tsup": "npx tsup"
|
|
},
|
|
"engines": {
|
|
"node": "^24.5.0",
|
|
"npm": "please-use-yarn",
|
|
"yarn": "^4.0.2"
|
|
},
|
|
"browserslist": {
|
|
"production": [
|
|
">0.2%",
|
|
"not dead",
|
|
"not op_mini all"
|
|
],
|
|
"development": [
|
|
"last 1 chrome version",
|
|
"last 1 firefox version",
|
|
"last 1 safari version"
|
|
]
|
|
},
|
|
"msw": {
|
|
"workerDirectory": "public"
|
|
},
|
|
"dependencies": {
|
|
"@ai-sdk/react": "2.0.52",
|
|
"@apollo/client": "^3.7.17",
|
|
"@blocknote/mantine": "^0.31.1",
|
|
"@blocknote/react": "^0.31.1",
|
|
"@blocknote/xl-docx-exporter": "^0.31.1",
|
|
"@blocknote/xl-pdf-exporter": "^0.31.1",
|
|
"@calcom/embed-react": "^1.5.3",
|
|
"@cyntler/react-doc-viewer": "^1.17.0",
|
|
"@dagrejs/dagre": "^1.1.2",
|
|
"@floating-ui/react": "^0.24.3",
|
|
"@graphiql/plugin-explorer": "^1.0.2",
|
|
"@graphiql/react": "^0.23.0",
|
|
"@hello-pangea/dnd": "^16.2.0",
|
|
"@hookform/resolvers": "^5.2.2",
|
|
"@lingui/core": "^5.1.2",
|
|
"@lingui/detect-locale": "^5.2.0",
|
|
"@lingui/react": "^5.1.2",
|
|
"@monaco-editor/react": "^4.7.0",
|
|
"@nivo/core": "^0.99.0",
|
|
"@nivo/line": "^0.99.0",
|
|
"@nivo/pie": "^0.99.0",
|
|
"@nivo/radial-bar": "^0.99.0",
|
|
"@react-email/components": "^0.5.3",
|
|
"@react-pdf/renderer": "^4.1.6",
|
|
"@scalar/api-reference-react": "^0.4.36",
|
|
"@sentry/react": "^10.27.0",
|
|
"@tiptap/core": "3.4.2",
|
|
"@tiptap/extension-bold": "3.4.2",
|
|
"@tiptap/extension-document": "3.4.2",
|
|
"@tiptap/extension-hard-break": "3.4.2",
|
|
"@tiptap/extension-heading": "3.4.2",
|
|
"@tiptap/extension-image": "3.4.4",
|
|
"@tiptap/extension-italic": "3.4.2",
|
|
"@tiptap/extension-link": "3.4.2",
|
|
"@tiptap/extension-list": "3.4.2",
|
|
"@tiptap/extension-paragraph": "3.4.2",
|
|
"@tiptap/extension-strike": "3.4.2",
|
|
"@tiptap/extension-text": "3.4.2",
|
|
"@tiptap/extension-underline": "3.4.2",
|
|
"@tiptap/extensions": "3.4.2",
|
|
"@tiptap/react": "3.4.2",
|
|
"@types/marked": "^6.0.0",
|
|
"@xyflow/react": "^12.4.2",
|
|
"ai": "5.0.52",
|
|
"apollo-link-rest": "^0.9.0",
|
|
"apollo-upload-client": "^17.0.0",
|
|
"buffer": "^6.0.3",
|
|
"cron-parser": "5.1.1",
|
|
"date-fns": "^2.30.0",
|
|
"docx": "^9.1.0",
|
|
"file-saver": "^2.0.5",
|
|
"graphiql": "^3.1.1",
|
|
"graphql": "16.8.1",
|
|
"graphql-sse": "^2.5.4",
|
|
"input-otp": "^1.4.2",
|
|
"jotai": "^2.17.1",
|
|
"js-cookie": "^3.0.5",
|
|
"json-2-csv": "^5.4.0",
|
|
"json-logic-js": "^2.0.5",
|
|
"jwt-decode": "^4.0.0",
|
|
"linkify-react": "^4.1.3",
|
|
"linkifyjs": "^4.1.3",
|
|
"marked": "^17.0.1",
|
|
"qs": "^6.11.2",
|
|
"react-data-grid": "7.0.0-beta.13",
|
|
"react-datepicker": "^6.7.1",
|
|
"react-dropzone": "^14.2.3",
|
|
"react-error-boundary": "^4.0.11",
|
|
"react-grid-layout": "^1.5.2",
|
|
"react-helmet-async": "^1.3.0",
|
|
"react-hook-form": "^7.45.1",
|
|
"react-hotkeys-hook": "^4.4.4",
|
|
"react-imask": "^7.6.0",
|
|
"react-intersection-observer": "^9.15.1",
|
|
"react-loading-skeleton": "^3.3.1",
|
|
"react-markdown": "^10.1.0",
|
|
"react-phone-number-input": "patch:react-phone-number-input@npm%3A3.4.5#../../.yarn/patches/react-phone-number-input-npm-3.4.5-dc2895c306.patch",
|
|
"react-qr-code": "^2.0.18",
|
|
"react-responsive": "^9.0.2",
|
|
"react-router-dom": "^6.4.4",
|
|
"react-textarea-autosize": "^8.4.1",
|
|
"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"
|
|
},
|
|
"devDependencies": {
|
|
"@lingui/cli": "^5.1.2",
|
|
"@lingui/swc-plugin": "^5.6.0",
|
|
"@lingui/vite-plugin": "^5.1.2",
|
|
"@playwright/test": "^1.56.1",
|
|
"@tiptap/suggestion": "3.4.2",
|
|
"@types/apollo-upload-client": "^17.0.2",
|
|
"@types/file-saver": "^2.0.7",
|
|
"@types/js-cookie": "^3.0.3",
|
|
"@types/json-logic-js": "^2",
|
|
"@types/react-grid-layout": "^1",
|
|
"@typescript-eslint/eslint-plugin": "^8.39.0",
|
|
"@typescript-eslint/utils": "^8.39.0",
|
|
"eslint": "^9.32.0",
|
|
"eslint-config-prettier": "^9.1.0",
|
|
"eslint-plugin-import": "^2.31.0",
|
|
"eslint-plugin-jsx-a11y": "^6.10.2",
|
|
"eslint-plugin-lingui": "^0.9.0",
|
|
"eslint-plugin-prefer-arrow": "^1.2.3",
|
|
"eslint-plugin-prettier": "^5.1.2",
|
|
"eslint-plugin-project-structure": "^3.9.1",
|
|
"eslint-plugin-react": "^7.37.2",
|
|
"eslint-plugin-react-hooks": "^5.0.0",
|
|
"eslint-plugin-react-refresh": "^0.4.4",
|
|
"eslint-plugin-simple-import-sort": "^10.0.0",
|
|
"eslint-plugin-storybook": "^0.9.0",
|
|
"eslint-plugin-unicorn": "^56.0.1",
|
|
"eslint-plugin-unused-imports": "^3.0.0",
|
|
"monaco-editor": "^0.51.0",
|
|
"monaco-editor-auto-typings": "^0.4.5",
|
|
"optionator": "^0.9.1",
|
|
"playwright": "^1.56.1",
|
|
"rollup-plugin-visualizer": "^5.14.0",
|
|
"vite-plugin-checker": "^0.10.2",
|
|
"vite-plugin-svgr": "^4.3.0",
|
|
"vite-tsconfig-paths": "^4.2.1"
|
|
}
|
|
}
|