From 9a319f17852c73d19661b40b6ce771a8420c22e1 Mon Sep 17 00:00:00 2001 From: Sean Cassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Sat, 7 Sep 2024 15:32:35 +1200 Subject: [PATCH] chore: upgrade react-compiler's eslint and babel plugins (#418) * chore: upgrade react-compiler's eslint and babel plugins * refactor: linting warnings related to the react-compiler --- package.json | 4 +- pnpm-lock.yaml | 20 +++--- src/components/ui/input-datetime.tsx | 72 ++++++++++--------- .../-components/view-report/plugin/table.tsx | 2 +- .../view-report/plugin/view-columns.tsx | 2 +- .../-modules/table-list/column-visibility.tsx | 2 +- .../_auth/-modules/table-list/content.tsx | 2 +- .../_auth/-modules/table-list/toolbar.tsx | 4 +- 8 files changed, 56 insertions(+), 52 deletions(-) diff --git a/package.json b/package.json index 00989de8..d07956bd 100644 --- a/package.json +++ b/package.json @@ -92,11 +92,11 @@ "@types/react-signature-canvas": "^1.0.5", "@vitejs/plugin-react": "^4.3.1", "autoprefixer": "^10.4.20", - "babel-plugin-react-compiler": "0.0.0-experimental-7d62301-20240821", + "babel-plugin-react-compiler": "0.0.0-experimental-7449567-20240905", "eslint": "^9.9.1", "eslint-config-prettier": "^9.1.0", "eslint-plugin-react": "^7.35.2", - "eslint-plugin-react-compiler": "0.0.0-experimental-8e3b87c-20240821", + "eslint-plugin-react-compiler": "0.0.0-experimental-8d8bd53-20240905", "eslint-plugin-react-hooks": "5.1.0-beta-26f2496093-20240514", "globals": "^15.9.0", "postcss": "^8.4.45", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f52d62d0..bc39df9e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -217,8 +217,8 @@ importers: specifier: ^10.4.20 version: 10.4.20(postcss@8.4.45) babel-plugin-react-compiler: - specifier: 0.0.0-experimental-7d62301-20240821 - version: 0.0.0-experimental-7d62301-20240821 + specifier: 0.0.0-experimental-7449567-20240905 + version: 0.0.0-experimental-7449567-20240905 eslint: specifier: ^9.9.1 version: 9.9.1(jiti@1.21.0) @@ -229,8 +229,8 @@ importers: specifier: ^7.35.2 version: 7.35.2(eslint@9.9.1(jiti@1.21.0)) eslint-plugin-react-compiler: - specifier: 0.0.0-experimental-8e3b87c-20240821 - version: 0.0.0-experimental-8e3b87c-20240821(eslint@9.9.1(jiti@1.21.0)) + specifier: 0.0.0-experimental-8d8bd53-20240905 + version: 0.0.0-experimental-8d8bd53-20240905(eslint@9.9.1(jiti@1.21.0)) eslint-plugin-react-hooks: specifier: 5.1.0-beta-26f2496093-20240514 version: 5.1.0-beta-26f2496093-20240514(eslint@9.9.1(jiti@1.21.0)) @@ -2015,8 +2015,8 @@ packages: babel-dead-code-elimination@1.0.6: resolution: {integrity: sha512-JxFi9qyRJpN0LjEbbjbN8g0ux71Qppn9R8Qe3k6QzHg2CaKsbUQtbn307LQGiDLGjV6JCtEFqfxzVig9MyDCHQ==} - babel-plugin-react-compiler@0.0.0-experimental-7d62301-20240821: - resolution: {integrity: sha512-jkkE/OzJpu5tOa3GwGM3vgaBAjkOGYmKEYyo6NXNaCtt/ITYjs2Tq2+MmrDLx1nsxBDi91rB+MLV8kes/KQ0lQ==} + babel-plugin-react-compiler@0.0.0-experimental-7449567-20240905: + resolution: {integrity: sha512-ltBywPFOEf1rRnkRQ1TiiPJeqJ1Cte86bo4tpSPsfqGTTsiyUo8OLyOR13EG08QIFTQd6HfGGgjpE9Kv/t5Vcg==} balanced-match@1.0.2: resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} @@ -2308,8 +2308,8 @@ packages: peerDependencies: eslint: '>=7.0.0' - eslint-plugin-react-compiler@0.0.0-experimental-8e3b87c-20240821: - resolution: {integrity: sha512-VSJDGcBGwI3UeMwAa+BLdVyTwyKfPtGvhSlcfrzjnQe0v+dx4Yo+hmVvPSZ42RsJpq58HIjkjSTY6TwLjpI0QQ==} + eslint-plugin-react-compiler@0.0.0-experimental-8d8bd53-20240905: + resolution: {integrity: sha512-iWgFnhAJcckBOF3FcQ5RdR9Q2NN6gmYpu+ALljft5pMmIJasZR3asshIUYadHG+46ZaZWoa+Rhk9ouIj/O8qIQ==} engines: {node: ^14.17.0 || ^16.0.0 || >= 18.0.0} peerDependencies: eslint: '>=7' @@ -5443,7 +5443,7 @@ snapshots: transitivePeerDependencies: - supports-color - babel-plugin-react-compiler@0.0.0-experimental-7d62301-20240821: + babel-plugin-react-compiler@0.0.0-experimental-7449567-20240905: dependencies: '@babel/generator': 7.2.0 '@babel/types': 7.25.2 @@ -5842,7 +5842,7 @@ snapshots: dependencies: eslint: 9.9.1(jiti@1.21.0) - eslint-plugin-react-compiler@0.0.0-experimental-8e3b87c-20240821(eslint@9.9.1(jiti@1.21.0)): + eslint-plugin-react-compiler@0.0.0-experimental-8d8bd53-20240905(eslint@9.9.1(jiti@1.21.0)): dependencies: '@babel/core': 7.25.2 '@babel/parser': 7.25.3 diff --git a/src/components/ui/input-datetime.tsx b/src/components/ui/input-datetime.tsx index 204a9d68..be80d6c3 100644 --- a/src/components/ui/input-datetime.tsx +++ b/src/components/ui/input-datetime.tsx @@ -15,6 +15,7 @@ interface InputDatetimeProps extends React.HTMLAttributes { function InputDatetime(props: InputDatetimeProps) { const elementId = React.useRef(generateShortId()); + // eslint-disable-next-line react-compiler/react-compiler const id = props.id ?? elementId.current; const [date, setDate] = React.useState( @@ -62,42 +63,45 @@ function InputDatetime(props: InputDatetimeProps) { className="flex h-10 items-center justify-start gap-0.5 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background duration-100 focus-within:border-input focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50" {...getRootProps()} > - {segments.map((segment, idx) => { - if (segment.type === "separator") { + { + // eslint-disable-next-line react-compiler/react-compiler + segments.map((segment, idx) => { + if (segment.type === "separator") { + return ( + + {segment.value} + + ); + } + + const inputId = idx === 0 ? id : `${id}-${segment.type}`; + const placeholder = + segment.type !== "am/pm" ? segment.value : undefined; + return ( - - {segment.value} - + ); - } - - const inputId = idx === 0 ? id : `${id}-${segment.type}`; - const placeholder = - segment.type !== "am/pm" ? segment.value : undefined; - - return ( - - ); - })} + }) + } ); } diff --git a/src/routes/_auth/(reports)/-components/view-report/plugin/table.tsx b/src/routes/_auth/(reports)/-components/view-report/plugin/table.tsx index 56cc54a9..d109d8a6 100644 --- a/src/routes/_auth/(reports)/-components/view-report/plugin/table.tsx +++ b/src/routes/_auth/(reports)/-components/view-report/plugin/table.tsx @@ -113,7 +113,7 @@ function ReportTableContent( } return colSizes; // eslint-disable-next-line react-compiler/react-compiler - // eslint-disable-next-line react-hooks/exhaustive-deps, react-compiler/react-compiler + // eslint-disable-next-line react-hooks/exhaustive-deps }, [table.getState().columnSizingInfo, table.getFlatHeaders()]); const visibleColumns = React.useMemo( diff --git a/src/routes/_auth/(reports)/-components/view-report/plugin/view-columns.tsx b/src/routes/_auth/(reports)/-components/view-report/plugin/view-columns.tsx index 5cc75bf7..72dbc729 100644 --- a/src/routes/_auth/(reports)/-components/view-report/plugin/view-columns.tsx +++ b/src/routes/_auth/(reports)/-components/view-report/plugin/view-columns.tsx @@ -20,7 +20,7 @@ export const ViewColumns: ReportTablePlugin = (props) => { const allLeafColumns = React.useMemo( () => table.getAllLeafColumns(), // eslint-disable-next-line react-compiler/react-compiler - // eslint-disable-next-line react-hooks/exhaustive-deps, react-compiler/react-compiler + // eslint-disable-next-line react-hooks/exhaustive-deps [table.getAllLeafColumns()] ); diff --git a/src/routes/_auth/-modules/table-list/column-visibility.tsx b/src/routes/_auth/-modules/table-list/column-visibility.tsx index 61c39186..66f31331 100644 --- a/src/routes/_auth/-modules/table-list/column-visibility.tsx +++ b/src/routes/_auth/-modules/table-list/column-visibility.tsx @@ -20,7 +20,7 @@ function TableListColumnVisibilityDropdown() { const columns = React.useMemo( () => table.getAllColumns(), // eslint-disable-next-line react-compiler/react-compiler - // eslint-disable-next-line react-hooks/exhaustive-deps, react-compiler/react-compiler + // eslint-disable-next-line react-hooks/exhaustive-deps [table.getAllColumns()] ); diff --git a/src/routes/_auth/-modules/table-list/content.tsx b/src/routes/_auth/-modules/table-list/content.tsx index e193642c..1f5d20e0 100644 --- a/src/routes/_auth/-modules/table-list/content.tsx +++ b/src/routes/_auth/-modules/table-list/content.tsx @@ -51,7 +51,7 @@ function TableListContent(props: TableListContentProps) { const rowModel = React.useMemo( () => table.getRowModel(), // eslint-disable-next-line react-compiler/react-compiler - // eslint-disable-next-line react-hooks/exhaustive-deps, react-compiler/react-compiler + // eslint-disable-next-line react-hooks/exhaustive-deps [table.getRowModel()] ); diff --git a/src/routes/_auth/-modules/table-list/toolbar.tsx b/src/routes/_auth/-modules/table-list/toolbar.tsx index eb09038c..3cc8186c 100644 --- a/src/routes/_auth/-modules/table-list/toolbar.tsx +++ b/src/routes/_auth/-modules/table-list/toolbar.tsx @@ -129,7 +129,7 @@ function TableListToolbarActions({ const tableFilters = React.useMemo( () => table.getState().columnFilters, // eslint-disable-next-line react-compiler/react-compiler - // eslint-disable-next-line react-hooks/exhaustive-deps, react-compiler/react-compiler + // eslint-disable-next-line react-hooks/exhaustive-deps [table.getState().columnFilters] ); @@ -280,7 +280,7 @@ function ToolbarFilter({ const baseState = React.useMemo( () => table.getState().columnFilters.find((item) => item.id === id), // eslint-disable-next-line react-compiler/react-compiler - // eslint-disable-next-line react-hooks/exhaustive-deps, react-compiler/react-compiler + // eslint-disable-next-line react-hooks/exhaustive-deps [id, table.getState().columnFilters] );