From 254b6a64d535468c1294984ffc49bc335458e74b Mon Sep 17 00:00:00 2001 From: Ivan <8611739+IRBorisov@users.noreply.github.com> Date: Fri, 13 Dec 2024 13:55:26 +0300 Subject: [PATCH] F: Add react-compiler to build toolchain --- README.md | 1 + rsconcept/frontend/package-lock.json | 11 +++++++++++ rsconcept/frontend/package.json | 1 + .../src/components/ui/DataTable/DataTable.tsx | 1 + .../src/components/ui/DataTable/PaginationTools.tsx | 1 + .../src/components/ui/DataTable/SelectAll.tsx | 2 ++ .../src/components/ui/DataTable/SelectRow.tsx | 2 ++ .../src/components/ui/DataTable/SortingIcon.tsx | 2 ++ .../src/components/ui/DataTable/TableBody.tsx | 2 ++ .../src/components/ui/DataTable/TableFooter.tsx | 2 ++ .../src/components/ui/DataTable/TableHeader.tsx | 2 ++ .../EditorConstituenta/FormConstituenta.tsx | 6 +++--- .../frontend/src/pages/RSFormPage/RSEditContext.tsx | 2 +- rsconcept/frontend/vite.config.ts | 13 ++++++++++++- 14 files changed, 43 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 70b16093..c9d2de0e 100644 --- a/README.md +++ b/README.md @@ -60,6 +60,7 @@ This readme file is used mostly to document project dependencies and conventions - eslint-plugin-simple-import-sort - eslint-plugin-react-hooks - eslint-plugin-tsdoc + - babel-plugin-react-compiler - vite - jest - ts-jest diff --git a/rsconcept/frontend/package-lock.json b/rsconcept/frontend/package-lock.json index 58427abe..e47b08bd 100644 --- a/rsconcept/frontend/package-lock.json +++ b/rsconcept/frontend/package-lock.json @@ -41,6 +41,7 @@ "@typescript-eslint/parser": "^8.0.1", "@vitejs/plugin-react": "^4.3.4", "autoprefixer": "^10.4.20", + "babel-plugin-react-compiler": "^19.0.0-beta-37ed2a7-20241206", "eslint": "^9.16.0", "eslint-plugin-react": "^7.37.2", "eslint-plugin-react-compiler": "^19.0.0-beta-37ed2a7-20241206", @@ -4008,6 +4009,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/babel-plugin-react-compiler": { + "version": "19.0.0-beta-37ed2a7-20241206", + "resolved": "https://registry.npmjs.org/babel-plugin-react-compiler/-/babel-plugin-react-compiler-19.0.0-beta-37ed2a7-20241206.tgz", + "integrity": "sha512-nnkrHpeDKM8A5laq9tmFvvGbbDQ7laGfQLp50cvCkCXmWrPcZdCtaQpNh8UJS/yLREJnv2R4JDL5ADfxyAn+yQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/types": "^7.19.0" + } + }, "node_modules/babel-preset-current-node-syntax": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.1.0.tgz", diff --git a/rsconcept/frontend/package.json b/rsconcept/frontend/package.json index 94eb85d8..b9b9d38d 100644 --- a/rsconcept/frontend/package.json +++ b/rsconcept/frontend/package.json @@ -45,6 +45,7 @@ "@typescript-eslint/parser": "^8.0.1", "@vitejs/plugin-react": "^4.3.4", "autoprefixer": "^10.4.20", + "babel-plugin-react-compiler": "^19.0.0-beta-37ed2a7-20241206", "eslint": "^9.16.0", "eslint-plugin-react": "^7.37.2", "eslint-plugin-react-compiler": "^19.0.0-beta-37ed2a7-20241206", diff --git a/rsconcept/frontend/src/components/ui/DataTable/DataTable.tsx b/rsconcept/frontend/src/components/ui/DataTable/DataTable.tsx index 7894643d..da3e4f41 100644 --- a/rsconcept/frontend/src/components/ui/DataTable/DataTable.tsx +++ b/rsconcept/frontend/src/components/ui/DataTable/DataTable.tsx @@ -1,4 +1,5 @@ 'use client'; +'use no memo'; import { ColumnSort, diff --git a/rsconcept/frontend/src/components/ui/DataTable/PaginationTools.tsx b/rsconcept/frontend/src/components/ui/DataTable/PaginationTools.tsx index e5b19dd0..68c0a9f0 100644 --- a/rsconcept/frontend/src/components/ui/DataTable/PaginationTools.tsx +++ b/rsconcept/frontend/src/components/ui/DataTable/PaginationTools.tsx @@ -1,4 +1,5 @@ 'use client'; +'use no memo'; import { Table } from '@tanstack/react-table'; import clsx from 'clsx'; diff --git a/rsconcept/frontend/src/components/ui/DataTable/SelectAll.tsx b/rsconcept/frontend/src/components/ui/DataTable/SelectAll.tsx index 11ff2b21..a33394f0 100644 --- a/rsconcept/frontend/src/components/ui/DataTable/SelectAll.tsx +++ b/rsconcept/frontend/src/components/ui/DataTable/SelectAll.tsx @@ -1,3 +1,5 @@ +'use no memo'; + import { Table } from '@tanstack/react-table'; import CheckboxTristate from '@/components/ui/CheckboxTristate'; diff --git a/rsconcept/frontend/src/components/ui/DataTable/SelectRow.tsx b/rsconcept/frontend/src/components/ui/DataTable/SelectRow.tsx index 57135c4f..28d1f521 100644 --- a/rsconcept/frontend/src/components/ui/DataTable/SelectRow.tsx +++ b/rsconcept/frontend/src/components/ui/DataTable/SelectRow.tsx @@ -1,3 +1,5 @@ +'use no memo'; + import { Row } from '@tanstack/react-table'; import Checkbox from '@/components/ui/Checkbox'; diff --git a/rsconcept/frontend/src/components/ui/DataTable/SortingIcon.tsx b/rsconcept/frontend/src/components/ui/DataTable/SortingIcon.tsx index d74e0d4e..deb3c09e 100644 --- a/rsconcept/frontend/src/components/ui/DataTable/SortingIcon.tsx +++ b/rsconcept/frontend/src/components/ui/DataTable/SortingIcon.tsx @@ -1,3 +1,5 @@ +'use no memo'; + import { Column } from '@tanstack/react-table'; import { IconSortAsc, IconSortDesc } from '@/components/Icons'; diff --git a/rsconcept/frontend/src/components/ui/DataTable/TableBody.tsx b/rsconcept/frontend/src/components/ui/DataTable/TableBody.tsx index e87a07af..a6565f26 100644 --- a/rsconcept/frontend/src/components/ui/DataTable/TableBody.tsx +++ b/rsconcept/frontend/src/components/ui/DataTable/TableBody.tsx @@ -1,3 +1,5 @@ +'use no memo'; + import { Cell, flexRender, Row, Table } from '@tanstack/react-table'; import clsx from 'clsx'; diff --git a/rsconcept/frontend/src/components/ui/DataTable/TableFooter.tsx b/rsconcept/frontend/src/components/ui/DataTable/TableFooter.tsx index fe0e5196..eb648e1f 100644 --- a/rsconcept/frontend/src/components/ui/DataTable/TableFooter.tsx +++ b/rsconcept/frontend/src/components/ui/DataTable/TableFooter.tsx @@ -1,3 +1,5 @@ +'use no memo'; + import { flexRender, Header, HeaderGroup, Table } from '@tanstack/react-table'; interface TableFooterProps { diff --git a/rsconcept/frontend/src/components/ui/DataTable/TableHeader.tsx b/rsconcept/frontend/src/components/ui/DataTable/TableHeader.tsx index 0f8ad7c6..3715f134 100644 --- a/rsconcept/frontend/src/components/ui/DataTable/TableHeader.tsx +++ b/rsconcept/frontend/src/components/ui/DataTable/TableHeader.tsx @@ -1,3 +1,5 @@ +'use no memo'; + import { flexRender, Header, HeaderGroup, Table } from '@tanstack/react-table'; import SelectAll from './SelectAll'; diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx index 41ec1f1f..de9e4098 100644 --- a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx +++ b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx @@ -1,7 +1,7 @@ 'use client'; import clsx from 'clsx'; -import { useEffect, useMemo, useState } from 'react'; +import { useEffect, useLayoutEffect, useMemo, useState } from 'react'; import { toast } from 'react-toastify'; import { IconChild, IconPredecessor, IconSave } from '@/components/Icons'; @@ -89,9 +89,9 @@ function FormConstituenta({ setForceComment(false); setLocalParse(undefined); } - }, [state, schema, toggleReset]); + }, [state, schema, toggleReset, setIsModified]); - useEffect(() => { + useLayoutEffect(() => { if (!state) { setIsModified(false); return; diff --git a/rsconcept/frontend/src/pages/RSFormPage/RSEditContext.tsx b/rsconcept/frontend/src/pages/RSFormPage/RSEditContext.tsx index 44e6380a..30909dea 100644 --- a/rsconcept/frontend/src/pages/RSFormPage/RSEditContext.tsx +++ b/rsconcept/frontend/src/pages/RSFormPage/RSEditContext.tsx @@ -293,7 +293,7 @@ export const RSEditState = ({ const handleRenameCst = useCallback( (data: ICstRenameData) => { - const oldAlias = renameInitialData!.alias; + const oldAlias = renameInitialData?.alias ?? ''; model.cstRename(data, () => toast.success(information.renameComplete(oldAlias, data.alias))); }, [model, renameInitialData] diff --git a/rsconcept/frontend/vite.config.ts b/rsconcept/frontend/vite.config.ts index e8f4de0f..78ec6d52 100644 --- a/rsconcept/frontend/vite.config.ts +++ b/rsconcept/frontend/vite.config.ts @@ -4,6 +4,10 @@ import { defineConfig, loadEnv, PluginOption } from 'vite'; import { dependencies } from './package.json'; +const reactCompilerConfig = { + /* ... */ +}; + // Packages to include in main app bundle const inlinePackages = ['react', 'react-router', 'react-dom']; @@ -18,7 +22,14 @@ export default ({ mode }: { mode: string }) => { }; return defineConfig({ appType: 'spa', - plugins: [react(), muteWarningsPlugin(warningsToIgnore)], + plugins: [ + react({ + babel: { + plugins: [['babel-plugin-react-compiler', reactCompilerConfig]] + } + }), + muteWarningsPlugin(warningsToIgnore) + ], server: { port: Number(process.env.VITE_PORTAL_FRONT_PORT) },