From df810897f28f5bdea2b155df052a2fe36028b39d Mon Sep 17 00:00:00 2001
From: alexandre <alex.fauquette@gmail.com>
Date: Tue, 11 Jun 2024 11:27:51 +0200
Subject: [PATCH] [charts] Fix eslint for react compiler

---
 .eslintrc.js                                    |  3 +--
 .../ChartsXReferenceLine.tsx                    | 15 ++++++++-------
 .../ChartsYReferenceLine.tsx                    | 16 ++++++++--------
 packages/x-charts/src/ChartsText/ChartsText.tsx |  4 +---
 packages/x-charts/src/internals/warning.ts      | 17 +++++++++++++++++
 5 files changed, 35 insertions(+), 20 deletions(-)
 create mode 100644 packages/x-charts/src/internals/warning.ts

diff --git a/.eslintrc.js b/.eslintrc.js
index b764cbf2b770..3afad759075e 100644
--- 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
index 6e668f814b13..e9c35b3c171b 100644
--- 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,12 @@ 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 +99,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
index 376f1c3bfd99..048c37c3459f 100644
--- 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
index 31c7a7a5a473..f113d36a1fd0 100644
--- 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
new file mode 100644
index 000000000000..412c7ed444dd
--- /dev/null
+++ 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));
+      }
+    }
+  };
+}