Merge pull request #6111 from bryceosterhaus/LPD-26040

chore: enable react-compiler eslint rule

Author: bryceosterhaus

.eslintrc.js

@@ -46,6 +46,7 @@ module.exports = {
 			},
 		],
 		'react/no-unescaped-entities': 'off',
+		'react-compiler/react-compiler': 'error',
 		'react-hooks/exhaustive-deps': 'off',
 		'sort-vars': 'error',
 	},

package.json

@@ -85,7 +85,7 @@
 		"css-loader": "^2.1.1",
 		"esbuild": "^0.25.6",
 		"eslint": "^7.1.0",
-		"eslint-plugin-react-compiler": "^19.0.0-beta-6fc168f-20241025",
+		"eslint-plugin-react-compiler": "^19.1.0-rc.2",
 		"fork-ts-checker-webpack-plugin": "^4.0.3",
 		"jest": "27.5.1",
 		"jest-fetch-mock": "^3.0.3",

packages/clay-charts/src/BillboardWrapper.tsx

@@ -58,6 +58,7 @@ const BillboardWrapper = ({
 				}
 			}
 
+			// eslint-disable-next-line react-compiler/react-compiler
 			forwardRef.current = null;
 		};
 	}, []);

packages/clay-charts/src/GeoMap.tsx

@@ -243,6 +243,7 @@ const Geomap = ({
 
 	React.useEffect(() => {
 		if (forwardRef) {
+			// eslint-disable-next-line react-compiler/react-compiler
 			forwardRef.current = new GeomapBase({
 				...otherProps,
 				data,

packages/clay-charts/src/index.tsx

@@ -47,16 +47,18 @@ const ClayChart = React.forwardRef<HTMLDivElement, IProps>(
 	({color, data, elementProps, grid, line, point, ...otherProps}, ref) => {
 		const defaultRef = React.useRef<any>();
 
+		const renderData = {...data};
+
 		let ChartComponent;
 
 		switch (data.type as Types) {
 			case 'geo-map':
-				delete data.type;
+				delete renderData.type;
 
 				ChartComponent = GeoMap;
 				break;
 			case 'predictive':
-				delete data.type;
+				delete renderData.type;
 
 				ChartComponent = Predictive;
 				break;
@@ -68,7 +70,7 @@ const ClayChart = React.forwardRef<HTMLDivElement, IProps>(
 			<ChartComponent
 				{...otherProps}
 				color={{pattern: DEFAULT_COLORS, ...color}}
-				data={data as Data}
+				data={renderData as Data}
 				elementProps={elementProps}
 				grid={Object.assign(DEFAULT_GRID_OBJECT, grid)}
 				line={{classes: DEFAULT_LINE_CLASSES, ...line}}

packages/clay-core/src/collection/useCollection.tsx

@@ -256,6 +256,8 @@ export function useCollection<
 		[performFilter, publicApi, itemIdKey]
 	);
 
+	const virtualizerItems = virtualizer?.getVirtualItems();
+
 	const performCollectionRender = useCallback(
 		({children, items}: ICollectionProps<T, P>) => {
 			if (children instanceof Function && items) {
@@ -370,7 +372,7 @@ export function useCollection<
 		[
 			performItemRender,
 			publicApi,
-			virtualizer?.getVirtualItems().length,
+			virtualizerItems?.length,
 			visibleKeys,
 			itemIdKey,
 		]

packages/clay-core/src/overlay-mask/OverlayMask.tsx

@@ -205,6 +205,7 @@ export function OverlayMask<T>({
 						if (typeof ref === 'function') {
 							ref(node);
 						} else if (ref !== null) {
+							// eslint-disable-next-line react-compiler/react-compiler
 							(ref as React.MutableRefObject<any>).current = node;
 						}
 					},

packages/clay-core/stories/TreeView.stories.tsx

@@ -647,8 +647,6 @@ export const PreSelectedItems = (args: any) => {
 	// Just to avoid TypeScript error with required props
 	const OptionalCheckbox = (props: any) => <Checkbox {...props} />;
 
-	OptionalCheckbox.displayName = 'ClayCheckbox';
-
 	return (
 		<TreeView
 			defaultItems={ITEMS_DRIVE}
@@ -695,8 +693,6 @@ export const Disabled = () => {
 	// Just to avoid TypeScript error with required props
 	const OptionalCheckbox = (props: any) => <Checkbox {...props} />;
 
-	OptionalCheckbox.displayName = 'ClayCheckbox';
-
 	return (
 		<TreeView
 			defaultItems={ITEMS_DRIVE}
@@ -734,8 +730,6 @@ export const MultipleSelection = (args: any) => {
 	// Just to avoid TypeScript error with required props
 	const OptionalCheckbox = (props: any) => <Checkbox {...props} />;
 
-	OptionalCheckbox.displayName = 'ClayCheckbox';
-
 	return (
 		<TreeView
 			defaultItems={ITEMS_DRIVE}
@@ -787,8 +781,6 @@ export const MultipleSelectionWithAsyncLoad = (args: any) => {
 	// Just to avoid TypeScript error with required props
 	const OptionalCheckbox = (props: any) => <Checkbox {...props} />;
 
-	OptionalCheckbox.displayName = 'ClayCheckbox';
-
 	return (
 		<TreeView
 			defaultItems={ITEMS_DRIVE}
@@ -915,8 +907,6 @@ export const ExpandOnCheck = (args: any) => {
 	// Just to avoid TypeScript error with required props
 	const OptionalCheckbox = (props: any) => <Checkbox {...props} />;
 
-	OptionalCheckbox.displayName = 'ClayCheckbox';
-
 	return (
 		<TreeView
 			defaultItems={ITEMS_DRIVE}
@@ -1238,8 +1228,6 @@ export const SelectionWithFilter = () => {
 
 	const OptionalCheckbox = (props: any) => <Checkbox {...props} />;
 
-	OptionalCheckbox.displayName = 'ClayCheckbox';
-
 	const itemsFiltered = useMemo<any>(() => {
 		if (!value) {
 			return items;
@@ -1305,8 +1293,6 @@ export const PerformanceTest = () => {
 	// Just to avoid TypeScript error with required props
 	const OptionalCheckbox = (props: any) => <Checkbox {...props} />;
 
-	OptionalCheckbox.displayName = 'ClayCheckbox';
-
 	const itemsFiltered = useMemo<Data>(() => {
 		if (!value) {
 			return items;
@@ -1522,8 +1508,6 @@ export const DemoCategoriesMultiple = () => {
 	// Just to avoid TypeScript error with required props
 	const OptionalCheckbox = (props: any) => <Checkbox {...props} />;
 
-	OptionalCheckbox.displayName = 'ClayCheckbox';
-
 	return (
 		<TreeView
 			defaultItems={[
@@ -1673,8 +1657,6 @@ export const DemoDocumentsMultiple = () => {
 	// Just to avoid TypeScript error with required props
 	const OptionalCheckbox = (props: any) => <Checkbox {...props} />;
 
-	OptionalCheckbox.displayName = 'ClayCheckbox';
-
 	const MAPPING_ICON = {
 		article: 'web-content',
 		documents: 'documents-and-media',

packages/clay-drop-down/src/Items.tsx

@@ -210,6 +210,7 @@ const Contextual = ({
 	});
 
 	const setThrottleVisible = useCallback(
+		// eslint-disable-next-line react-compiler/react-compiler
 		throttle((value: boolean) => setVisible(value), 100),
 		[]
 	);

packages/clay-shared/src/FocusScope.tsx

@@ -114,6 +114,7 @@ export const FocusScope = ({
 
 						if (ref) {
 							if (typeof ref === 'object') {
+								// eslint-disable-next-line react-compiler/react-compiler
 								ref.current = r;
 							} else if (typeof ref === 'function') {
 								ref(r);