From 9293cd0266ca37c3b9561b0594701b5196ae936f Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Tue, 22 Apr 2025 13:06:51 -0500 Subject: [PATCH 1/3] Initial commit --- eslint.config.js | 9 ++------- package.json | 2 +- src/hooks/useViewportColumns.ts | 2 +- vite.config.ts | 6 ++++-- 4 files changed, 8 insertions(+), 11 deletions(-) diff --git a/eslint.config.js b/eslint.config.js index 1b51495358..a891669c66 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -4,7 +4,6 @@ import vitest from '@vitest/eslint-plugin'; import { defineConfig, globalIgnores } from 'eslint/config'; import jestDom from 'eslint-plugin-jest-dom'; import react from 'eslint-plugin-react'; -import reactCompiler from 'eslint-plugin-react-compiler'; import reactHooks from 'eslint-plugin-react-hooks'; import reactHooksExtra from 'eslint-plugin-react-hooks-extra'; import sonarjs from 'eslint-plugin-sonarjs'; @@ -26,7 +25,6 @@ export default defineConfig([ plugins: { react, - 'react-compiler': reactCompiler, 'react-hooks': reactHooks, 'react-hooks-extra': reactHooksExtra, sonarjs, @@ -381,14 +379,11 @@ export default defineConfig([ 'react/style-prop-object': 0, 'react/void-dom-elements-no-children': 1, - // React Compiler - // https://react.dev/learn/react-compiler#installing-eslint-plugin-react-compiler - 'react-compiler/react-compiler': 1, - // React Hooks // https://www.npmjs.com/package/eslint-plugin-react-hooks - 'react-hooks/rules-of-hooks': 1, 'react-hooks/exhaustive-deps': 1, + 'react-hooks/react-compiler': 1, + 'react-hooks/rules-of-hooks': 1, // React Hooks Extra // https://eslint-react.xyz/ diff --git a/package.json b/package.json index a183ef2885..665f0e185e 100644 --- a/package.json +++ b/package.json @@ -73,11 +73,11 @@ "@vitest/eslint-plugin": "^1.1.44", "@wyw-in-js/rollup": "^0.6.0", "@wyw-in-js/vite": "^0.6.0", + "babel-plugin-react-compiler": "^19.1.0-rc.1", "browserslist": "^4.24.5", "eslint": "^9.26.0", "eslint-plugin-jest-dom": "^5.5.0", "eslint-plugin-react": "^7.37.4", - "eslint-plugin-react-compiler": "^19.1.0-rc.1", "eslint-plugin-react-hooks": "^5.2.0", "eslint-plugin-react-hooks-extra": "^1.49.0", "eslint-plugin-sonarjs": "^3.0.2", diff --git a/src/hooks/useViewportColumns.ts b/src/hooks/useViewportColumns.ts index 701b719ec6..23bafc1956 100644 --- a/src/hooks/useViewportColumns.ts +++ b/src/hooks/useViewportColumns.ts @@ -36,7 +36,7 @@ export function useViewportColumns({ const updateStartIdx = (colIdx: number, colSpan: number | undefined) => { if (colSpan !== undefined && colIdx + colSpan > colOverscanStartIdx) { - // eslint-disable-next-line react-compiler/react-compiler + // eslint-disable-next-line react-hooks/react-compiler startIdx = colIdx; return true; } diff --git a/vite.config.ts b/vite.config.ts index 7ec2496bf9..c09c5a4aa6 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,6 +1,5 @@ import { TanStackRouterVite } from '@tanstack/router-plugin/vite'; import react from '@vitejs/plugin-react'; -import wyw from '@wyw-in-js/vite'; import browserslist from 'browserslist'; import { defineConfig } from 'vite'; import type { BrowserCommand } from 'vitest/node'; @@ -62,7 +61,10 @@ export default defineConfig(({ command }) => ({ autoCodeSplitting: true }), react({ - exclude: ['./.cache/**/*'] + exclude: ['./.cache/**/*'], + babel: { + plugins: [['babel-plugin-react-compiler']] + } }), wyw({ exclude: ['./.cache/**/*'], From 790a2772a7b6417155311da6df763a5768de3df7 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Tue, 22 Apr 2025 13:12:07 -0500 Subject: [PATCH 2/3] Remove `memo` --- src/Cell.tsx | 6 ++---- src/GroupCell.tsx | 6 +----- src/GroupRow.tsx | 8 ++------ src/GroupedColumnHeaderRow.tsx | 8 +------- src/HeaderRow.tsx | 8 ++------ src/Row.tsx | 8 +++----- src/SummaryCell.tsx | 5 +---- src/SummaryRow.tsx | 5 +---- vite.config.ts | 1 + 9 files changed, 14 insertions(+), 41 deletions(-) diff --git a/src/Cell.tsx b/src/Cell.tsx index 3516ce920c..6e5423faa0 100644 --- a/src/Cell.tsx +++ b/src/Cell.tsx @@ -1,4 +1,4 @@ -import { memo, type MouseEvent } from 'react'; +import type { MouseEvent } from 'react'; import { css } from '@linaria/core'; import { useRovingTabIndex } from './hooks'; @@ -126,9 +126,7 @@ function Cell({ ); } -const CellComponent = memo(Cell) as (props: CellRendererProps) => React.JSX.Element; - -export default CellComponent; +export default Cell; export function defaultRenderCell(key: React.Key, props: CellRendererProps) { return ; diff --git a/src/GroupCell.tsx b/src/GroupCell.tsx index 95db0fab34..f1e9a6e923 100644 --- a/src/GroupCell.tsx +++ b/src/GroupCell.tsx @@ -1,5 +1,3 @@ -import { memo } from 'react'; - import { useRovingTabIndex } from './hooks'; import { getCellClassname, getCellStyle } from './utils'; import type { CalculatedColumn, GroupRow } from './types'; @@ -17,7 +15,7 @@ interface GroupCellProps { isGroupByColumn: boolean; } -function GroupCell({ +export default function GroupCell({ id, groupKey, childRows, @@ -70,5 +68,3 @@ function GroupCell({ ); } - -export default memo(GroupCell) as (props: GroupCellProps) => React.JSX.Element; diff --git a/src/GroupRow.tsx b/src/GroupRow.tsx index 58330651ab..844d42150c 100644 --- a/src/GroupRow.tsx +++ b/src/GroupRow.tsx @@ -1,4 +1,4 @@ -import { memo, useMemo } from 'react'; +import { useMemo } from 'react'; import { css } from '@linaria/core'; import clsx from 'clsx'; @@ -31,7 +31,7 @@ interface GroupRowRendererProps extends BaseRenderRowProps { toggleGroup: (expandedGroupId: unknown) => void; } -function GroupedRow({ +export default function GroupedRow({ className, row, rowIdx, @@ -95,7 +95,3 @@ function GroupedRow({ ); } - -export default memo(GroupedRow) as ( - props: GroupRowRendererProps -) => React.JSX.Element; diff --git a/src/GroupedColumnHeaderRow.tsx b/src/GroupedColumnHeaderRow.tsx index fc0ae064b5..29d210c18b 100644 --- a/src/GroupedColumnHeaderRow.tsx +++ b/src/GroupedColumnHeaderRow.tsx @@ -1,5 +1,3 @@ -import { memo } from 'react'; - import type { CalculatedColumn, CalculatedColumnParent, Position } from './types'; import GroupedColumnHeaderCell from './GroupedColumnHeaderCell'; import { headerRowClassname } from './HeaderRow'; @@ -12,7 +10,7 @@ export interface GroupedColumnHeaderRowProps { selectedCellIdx: number | undefined; } -function GroupedColumnHeaderRow({ +export default function GroupedColumnHeaderRow({ rowIdx, level, columns, @@ -57,7 +55,3 @@ function GroupedColumnHeaderRow({ ); } - -export default memo(GroupedColumnHeaderRow) as ( - props: GroupedColumnHeaderRowProps -) => React.JSX.Element; diff --git a/src/HeaderRow.tsx b/src/HeaderRow.tsx index e1e0ec0b18..df3350732c 100644 --- a/src/HeaderRow.tsx +++ b/src/HeaderRow.tsx @@ -1,4 +1,4 @@ -import { memo, useId } from 'react'; +import { useId } from 'react'; import { css } from '@linaria/core'; import clsx from 'clsx'; @@ -46,7 +46,7 @@ const headerRow = css` export const headerRowClassname = `rdg-header-row ${headerRow}`; -function HeaderRow({ +export default function HeaderRow({ headerRowClass, rowIdx, columns, @@ -105,7 +105,3 @@ function HeaderRow({ ); } - -export default memo(HeaderRow) as ( - props: HeaderRowProps -) => React.JSX.Element; diff --git a/src/Row.tsx b/src/Row.tsx index 6fa862e8f0..c3cc1161fa 100644 --- a/src/Row.tsx +++ b/src/Row.tsx @@ -1,4 +1,4 @@ -import { memo, useMemo } from 'react'; +import { useMemo } from 'react'; import clsx from 'clsx'; import { RowSelectionContext, useLatestFunc, type RowSelectionContextValue } from './hooks'; @@ -101,10 +101,8 @@ function Row({ ); } -const RowComponent = memo(Row) as (props: RenderRowProps) => React.JSX.Element; - -export default RowComponent; +export default Row; export function defaultRenderRow(key: React.Key, props: RenderRowProps) { - return ; + return ; } diff --git a/src/SummaryCell.tsx b/src/SummaryCell.tsx index 85bf7ae7f0..54a805ff8a 100644 --- a/src/SummaryCell.tsx +++ b/src/SummaryCell.tsx @@ -1,4 +1,3 @@ -import { memo } from 'react'; import { css } from '@linaria/core'; import { useRovingTabIndex } from './hooks'; @@ -21,7 +20,7 @@ interface SummaryCellProps extends SharedCellRendererProps { row: SR; } -function SummaryCell({ +export default function SummaryCell({ column, colSpan, row, @@ -57,5 +56,3 @@ function SummaryCell({ ); } - -export default memo(SummaryCell) as (props: SummaryCellProps) => React.JSX.Element; diff --git a/src/SummaryRow.tsx b/src/SummaryRow.tsx index 3856d7c6ce..7a8cc5a279 100644 --- a/src/SummaryRow.tsx +++ b/src/SummaryRow.tsx @@ -1,4 +1,3 @@ -import { memo } from 'react'; import { css } from '@linaria/core'; import clsx from 'clsx'; @@ -50,7 +49,7 @@ const topSummaryRow = css` const summaryRowClassname = `rdg-summary-row ${summaryRow}`; -function SummaryRow({ +export default function SummaryRow({ rowIdx, gridRowStart, row, @@ -112,5 +111,3 @@ function SummaryRow({ ); } - -export default memo(SummaryRow) as (props: SummaryRowProps) => React.JSX.Element; diff --git a/vite.config.ts b/vite.config.ts index c09c5a4aa6..f0cea55ca0 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,5 +1,6 @@ import { TanStackRouterVite } from '@tanstack/router-plugin/vite'; import react from '@vitejs/plugin-react'; +import wyw from '@wyw-in-js/vite'; import browserslist from 'browserslist'; import { defineConfig } from 'vite'; import type { BrowserCommand } from 'vitest/node'; From 14576c4f20057370222f032b8f1447909c38c6d8 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Fri, 9 May 2025 13:41:03 -0500 Subject: [PATCH 3/3] Fix plugin --- package.json | 2 +- rolldown.config.js | 6 ++++++ src/Cell.tsx | 2 +- vite.config.ts | 2 +- 4 files changed, 9 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 665f0e185e..f21d4e4def 100644 --- a/package.json +++ b/package.json @@ -78,7 +78,7 @@ "eslint": "^9.26.0", "eslint-plugin-jest-dom": "^5.5.0", "eslint-plugin-react": "^7.37.4", - "eslint-plugin-react-hooks": "^5.2.0", + "eslint-plugin-react-hooks": "^6.0.0-rc.1", "eslint-plugin-react-hooks-extra": "^1.49.0", "eslint-plugin-sonarjs": "^3.0.2", "eslint-plugin-testing-library": "^7.1.1", diff --git a/rolldown.config.js b/rolldown.config.js index f35de1e7e5..6631fcb1e4 100644 --- a/rolldown.config.js +++ b/rolldown.config.js @@ -2,6 +2,7 @@ import { isAbsolute } from 'node:path'; import wyw from '@wyw-in-js/rollup'; import pkg from './package.json' with { type: 'json' }; +import react from '@vitejs/plugin-react'; import { defineConfig } from 'rolldown'; export default defineConfig({ @@ -15,6 +16,11 @@ export default defineConfig({ platform: 'browser', external: (id) => !id.startsWith('.') && !isAbsolute(id), plugins: [ + react({ + babel: { + plugins: [['babel-plugin-react-compiler', { target: '19' }]] + } + }), // @ts-expect-error wyw({ preprocessor: 'none', diff --git a/src/Cell.tsx b/src/Cell.tsx index 6e5423faa0..0fb9e3fdcf 100644 --- a/src/Cell.tsx +++ b/src/Cell.tsx @@ -129,5 +129,5 @@ function Cell({ export default Cell; export function defaultRenderCell(key: React.Key, props: CellRendererProps) { - return ; + return ; } diff --git a/vite.config.ts b/vite.config.ts index f0cea55ca0..c92be173a2 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -64,7 +64,7 @@ export default defineConfig(({ command }) => ({ react({ exclude: ['./.cache/**/*'], babel: { - plugins: [['babel-plugin-react-compiler']] + plugins: [['babel-plugin-react-compiler', { target: '19' }]] } }), wyw({