[charts] Fix eslint for react compiler (#13444)

mui · Jun 13, 2024 · 06e4157 · 06e4157
1 parent 70c6612
commit 06e4157
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 20 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -5,8 +5,7 @@ const path = require('path');
 const ENABLE_REACT_COMPILER_PLUGIN = process.env.ENABLE_REACT_COMPILER_PLUGIN ?? false;
 
 // Enable React Compiler Plugin rules per package
-const ENABLE_REACT_COMPILER_PLUGIN_CHARTS =
-  process.env.ENABLE_REACT_COMPILER_PLUGIN_CHARTS ?? false;
+const ENABLE_REACT_COMPILER_PLUGIN_CHARTS = process.env.ENABLE_REACT_COMPILER_PLUGIN_CHARTS ?? true;
 const ENABLE_REACT_COMPILER_PLUGIN_DATA_GRID =
   process.env.ENABLE_REACT_COMPILER_PLUGIN_DATA_GRID ?? false;
 const ENABLE_REACT_COMPILER_PLUGIN_DATE_PICKERS =

diff --git a/packages/x-charts/src/ChartsReferenceLine/ChartsXReferenceLine.tsx b/packages/x-charts/src/ChartsReferenceLine/ChartsXReferenceLine.tsx
@@ -7,6 +7,7 @@ import {
   ChartsReferenceLineClasses,
   getReferenceLineUtilityClass,
 } from './chartsReferenceLineClasses';
+import { buildWarning } from '../internals/warning';
 
 export type ChartsXReferenceLineProps<
   TValue extends string | number | Date = string | number | Date,
@@ -72,7 +73,11 @@ export function getXReferenceLineClasses(classes?: Partial<ChartsReferenceLineCl
   );
 }
 
-let warnedOnce = false;
+const valueError = buildWarning(
+  (value, id) =>
+    `MUI X Charts: the value ${value} does not exist in the data of x axis with id ${id}.`,
+  'error',
+);
 
 function ChartsXReferenceLine(props: ChartsXReferenceLineProps) {
   const {
@@ -93,12 +98,7 @@ function ChartsXReferenceLine(props: ChartsXReferenceLineProps) {
 
   if (xPosition === undefined) {
     if (process.env.NODE_ENV !== 'production') {
-      if (!warnedOnce) {
-        warnedOnce = true;
-        console.error(
-          `MUI X Charts: the value ${x} does not exist in the data of x axis with id ${axisId}.`,
-        );
-      }
+      valueError(x, axisId);
     }
     return null;
   }

diff --git a/packages/x-charts/src/ChartsReferenceLine/ChartsYReferenceLine.tsx b/packages/x-charts/src/ChartsReferenceLine/ChartsYReferenceLine.tsx
@@ -7,6 +7,7 @@ import {
   ChartsReferenceLineClasses,
   getReferenceLineUtilityClass,
 } from './chartsReferenceLineClasses';
+import { buildWarning } from '../internals/warning';
 
 export type ChartsYReferenceLineProps<
   TValue extends string | number | Date = string | number | Date,
@@ -60,8 +61,6 @@ const getTextParams = ({
   }
 };
 
-let warnedOnce = false;
-
 export function getYReferenceLineClasses(classes?: Partial<ChartsReferenceLineClasses>) {
   return composeClasses(
     {
@@ -74,6 +73,12 @@ export function getYReferenceLineClasses(classes?: Partial<ChartsReferenceLineCl
   );
 }
 
+const valueError = buildWarning(
+  (value, id) =>
+    `MUI X Charts: the value ${value} does not exist in the data of y axis with id ${id}.`,
+  'error',
+);
+
 function ChartsYReferenceLine(props: ChartsYReferenceLineProps) {
   const {
     y,
@@ -93,12 +98,7 @@ function ChartsYReferenceLine(props: ChartsYReferenceLineProps) {
 
   if (yPosition === undefined) {
     if (process.env.NODE_ENV !== 'production') {
-      if (!warnedOnce) {
-        warnedOnce = true;
-        console.error(
-          `MUI X Charts: the value ${y} does not exist in the data of y axis with id ${axisId}.`,
-        );
-      }
+      valueError(y, axisId);
     }
     return null;
   }

diff --git a/packages/x-charts/src/ChartsText/ChartsText.tsx b/packages/x-charts/src/ChartsText/ChartsText.tsx
@@ -49,13 +49,11 @@ function ChartsText(props: ChartsTextProps) {
   if (angle) {
     transforms.push(`rotate(${angle}, ${x}, ${y})`);
   }
-  if (transforms.length) {
-    textProps.transform = transforms.join(' ');
-  }
 
   return (
     <text
       {...textProps}
+      transform={transforms.length > 0 ? transforms.join(' ') : undefined}
       x={x}
       y={y}
       textAnchor={textAnchor}

diff --git a/packages/x-charts/src/internals/warning.ts b/packages/x-charts/src/internals/warning.ts
@@ -0,0 +1,17 @@
+export function buildWarning(
+  message: (...args: any) => string,
+  gravity: 'warning' | 'error' = 'warning',
+) {
+  let alreadyWarned = false;
+
+  return (...args: any) => {
+    if (!alreadyWarned) {
+      alreadyWarned = true;
+      if (gravity === 'error') {
+        console.error(message(...args));
+      } else {
+        console.warn(message(...args));
+      }
+    }
+  };
+}