[MOO-2459]: Upgrade eslint and react-hooks

.eslintrc.js

@@ -10,6 +10,14 @@ module.exports = deepmerge(base, {
         "@typescript-eslint/ban-ts-ignore": "off",
         "no-unused-expressions": "off",
         "@typescript-eslint/no-unused-expressions": "error",
-        "no-undef": "off"
+        "no-undef": "off",
+        // ESLint 9: no-return-await removed (disabled, no replacement since type-aware linting is off for performance)
+        "no-return-await": "off",
+        // Remove deprecated @typescript-eslint rules (already off in base, but silencing warnings)
+        "@typescript-eslint/camelcase": "off",
+        "@typescript-eslint/class-name-casing": "off",
+        "@typescript-eslint/no-object-literal-type-assertion": "off",
+        "react-hooks/exhaustive-deps": "off",
+        "@typescript-eslint/no-var-requires": "off"
     }
 });

eslint.config.js

@@ -0,0 +1,23 @@
+const { FlatCompat } = require("@eslint/eslintrc");
+const js = require("@eslint/js");
+const path = require("path");
+
+const compat = new FlatCompat({
+    baseDirectory: __dirname,
+    recommendedConfig: js.configs.recommended
+});
+
+// Use FlatCompat to translate the legacy .eslintrc.js config to flat config
+module.exports = [
+    // First, load the ignore patterns (replaces .eslintignore)
+    {
+        ignores: [
+            "**/node_modules/**",
+            "**/dist/**",
+            "**/build/**",
+            "packages/pluggableWidgets/rich-text-web/src/assets/plugins/**/*.js"
+        ]
+    },
+    // Then extend from the legacy .eslintrc.js file
+    ...compat.extends(path.resolve(__dirname, ".eslintrc.js"))
+];

package.json

@@ -15,9 +15,9 @@
     "format": "pretty-quick --staged --config \"./prettier.config.js\" --pattern \"**/{src,script,typings,test,**}/**/*.{js,jsx,ts,tsx,scss,html,xml,md,json}\"",
     "clean-all-screenshots-mac": "find . -name 'screenshot-baseline' -type d -prune -exec rm -rf '{}' +",
     "lint": "pnpm lint:src && pnpm -r run lint",
-    "lint:src": "eslint --config .eslintrc.js --ext .jsx,.js,.ts,.tsx packages/*/*/src --no-error-on-unmatched-pattern",
-    "lint:scripts": "eslint --fix --config .eslintrc.js --ext .jsx,.js,.ts,.tsx scripts",
-    "lint:configs": "eslint --fix --config .eslintrc.js --ext .jsx,.js,.ts,.tsx configs",
+    "lint:src": "eslint --ext .jsx,.js,.ts,.tsx packages/*/*/src --no-error-on-unmatched-pattern",
+    "lint:scripts": "eslint --fix --ext .jsx,.js,.ts,.tsx scripts",
+    "lint:configs": "eslint --fix --ext .jsx,.js,.ts,.tsx configs",
     "test": "pnpm -r run test",
     "test:e2e:android": "pnpm -r run test:e2e:android",
     "test:e2e:ios": "pnpm -r run test:e2e:ios",
@@ -81,8 +81,7 @@
       "@mendix/pluggable-widgets-tools": "11.12.0",
       "@rollup/plugin-typescript": "12.3.0",
       "mendix": "11.8.0",
-      "eslint": "~8.57.0",
-      "eslint-plugin-react-hooks": "~5.1.0",
+      "eslint": "9.39.4",
       "react": "19.2.3",
       "react-dom": "19.2.3",
       "react-native": "0.84.1",

packages/jsActions/mobile-resources-native/package.json

@@ -23,7 +23,7 @@
     "start": "rollup --config ../../../configs/jsactions/rollup.config.mjs --watch --configProject nativemobileresources",
     "prebuild": "rimraf dist",
     "build": "rollup --config ../../../configs/jsactions/rollup.config.mjs --configProject nativemobileresources",
-    "lint": "eslint --config ../../../.eslintrc.js --ext .jsx,.js,.ts,.tsx src/",
+    "lint": "eslint --ext .jsx,.js,.ts,.tsx src/",
     "release": "pnpm build",
     "release:marketplace": "node ../../../scripts/release/marketplaceRelease.js"
   },

packages/jsActions/nanoflow-actions-native/package.json

@@ -21,7 +21,7 @@
   "scripts": {
     "start": "rollup --config ../../../configs/jsactions/rollup.config.mjs --watch --configProject nanoflowcommons",
     "build": "rollup --config ../../../configs/jsactions/rollup.config.mjs --configProject nanoflowcommons",
-    "lint": "eslint --config ../../../.eslintrc.js --ext .jsx,.js,.ts,.tsx src/",
+    "lint": "eslint --ext .jsx,.js,.ts,.tsx src/",
     "release": "pnpm build",
     "release:marketplace": "node ../../../scripts/release/marketplaceRelease.js"
   },

packages/jsActions/nanoflow-actions-native/src/geolocation/GetCurrentLocationMinimumAccuracy.ts

@@ -77,9 +77,8 @@ export async function GetCurrentLocationMinimumAccuracy(
         if (navigator && (!navigator.product || navigator.product !== "ReactNative")) {
             // This ensures the browser will not ignore the maximumAge https://stackoverflow.com/questions/3397585/navigator-geolocation-getcurrentposition-sometimes-works-sometimes-doesnt/31916631#31916631
             geolocationModule.getCurrentPosition(
-                // eslint-disable-next-line @typescript-eslint/no-empty-function
                 () => {},
-                // eslint-disable-next-line @typescript-eslint/no-empty-function
+
                 () => {},
                 {}
             );

packages/pluggableWidgets/accordion-native/package.json

@@ -14,7 +14,7 @@
     "build": "pluggable-widgets-tools build:native",
     "format": "pluggable-widgets-tools format",
     "release": "pluggable-widgets-tools release:native",
-    "lint": "eslint --config ../../../.eslintrc.js --ext .jsx,.js,.ts,.tsx src/",
+    "lint": "eslint --ext .jsx,.js,.ts,.tsx src/",
     "test": "pluggable-widgets-tools test:unit:native",
     "version": "pnpm release"
   },

packages/pluggableWidgets/accordion-native/src/components/GroupIcon.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, useRef, useEffect } from "react";
+import { ReactElement, useState, useEffect, useMemo } from "react";
 import { Animated, Easing, View } from "react-native";
 import { DynamicValue, NativeIcon } from "mendix";
 import { Icon } from "mendix/components/native/Icon";
@@ -25,11 +25,18 @@ export function GroupIcon({ iconCollapsed, iconExpanded, isExpanded, style }: Gr
     const source = isExpanded ? customExpandedIconSource : customIconSource;
     const iconStyles = exclude(style, ["size", "color"]);
     const icon: GlyphIcon = { type: "glyph", iconClass: "glyphicon-chevron-down" };
-    const animatedValue = useRef(new Animated.Value(0)).current;
-    const animatedRotation = animatedValue.interpolate({
-        inputRange: [0, 1],
-        outputRange: ["0deg", "180deg"]
-    });
+
+    // Create stable Animated.Value using useState with lazy initializer (React Compiler compatible)
+    const [animatedValue] = useState(() => new Animated.Value(0));
+
+    const animatedRotation = useMemo(
+        () =>
+            animatedValue.interpolate({
+                inputRange: [0, 1],
+                outputRange: ["0deg", "180deg"]
+            }),
+        [animatedValue]
+    );
 
     useEffect(() => {
         Animated.timing(animatedValue, {

packages/pluggableWidgets/activity-indicator-native/package.json

@@ -14,7 +14,7 @@
     "build": "pluggable-widgets-tools build:native",
     "format": "pluggable-widgets-tools format",
     "release": "pluggable-widgets-tools release:native",
-    "lint": "eslint --config ../../../.eslintrc.js --ext .jsx,.js,.ts,.tsx src/",
+    "lint": "eslint --ext .jsx,.js,.ts,.tsx src/",
     "test": "pluggable-widgets-tools test:unit:native",
     "version": "pnpm release"
   },

packages/pluggableWidgets/animation-native/package.json

@@ -12,7 +12,7 @@
     "build": "pluggable-widgets-tools build:native",
     "format": "pluggable-widgets-tools format",
     "release": "pluggable-widgets-tools release:native",
-    "lint": "eslint --config ../../../.eslintrc.js --ext .jsx,.js,.ts,.tsx src/",
+    "lint": "eslint --ext .jsx,.js,.ts,.tsx src/",
     "test": "pluggable-widgets-tools test:unit:native",
     "version": "pnpm release"
   },

packages/pluggableWidgets/animation-native/src/Animation.tsx

@@ -71,7 +71,6 @@ export class Animation extends Component<Props> {
     }
 
     private log(message: string): void {
-        // eslint-disable-next-line no-console
         console.warn(message);
     }
 

packages/pluggableWidgets/app-events-native/package.json

@@ -14,7 +14,7 @@
     "build": "pluggable-widgets-tools build:native",
     "format": "pluggable-widgets-tools format",
     "release": "pluggable-widgets-tools release:native",
-    "lint": "eslint --config ../../../.eslintrc.js --ext .jsx,.js,.ts,.tsx src/",
+    "lint": "eslint --ext .jsx,.js,.ts,.tsx src/",
     "test": "pluggable-widgets-tools test:unit:native",
     "version": "pnpm release"
   },

packages/pluggableWidgets/background-gradient-native/package.json

@@ -12,7 +12,7 @@
   "scripts": {
     "start": "pluggable-widgets-tools start:native",
     "build": "pluggable-widgets-tools build:native",
-    "lint": "eslint --config ../../../.eslintrc.js --ext .jsx,.js,.ts,.tsx src/",
+    "lint": "eslint --ext .jsx,.js,.ts,.tsx src/",
     "lint:fix": "pluggable-widgets-tools lint:fix",
     "prerelease": "pnpm lint",
     "release": "pluggable-widgets-tools release:native",

packages/pluggableWidgets/background-image-native/package.json

@@ -14,7 +14,7 @@
     "build": "pluggable-widgets-tools build:native",
     "format": "pluggable-widgets-tools format",
     "release": "pluggable-widgets-tools release:native",
-    "lint": "eslint --config ../../../.eslintrc.js --ext .jsx,.js,.ts,.tsx src/",
+    "lint": "eslint --ext .jsx,.js,.ts,.tsx src/",
     "test": "pluggable-widgets-tools test:unit:native",
     "version": "pnpm release"
   },

packages/pluggableWidgets/badge-native/package.json

@@ -14,7 +14,7 @@
     "build": "pluggable-widgets-tools build:native",
     "format": "pluggable-widgets-tools format",
     "release": "pluggable-widgets-tools release:native",
-    "lint": "eslint --config ../../../.eslintrc.js --ext .jsx,.js,.ts,.tsx src/",
+    "lint": "eslint --ext .jsx,.js,.ts,.tsx src/",
     "test": "pluggable-widgets-tools test:unit:native",
     "version": "pnpm release"
   },

packages/pluggableWidgets/bar-chart-native/package.json

@@ -15,7 +15,7 @@
     "build": "pluggable-widgets-tools build:native",
     "format": "pluggable-widgets-tools format",
     "release": "pluggable-widgets-tools release:native",
-    "lint": "eslint --config ../../../.eslintrc.js --ext .jsx,.js,.ts,.tsx src/",
+    "lint": "eslint --ext .jsx,.js,.ts,.tsx src/",
     "test": "pluggable-widgets-tools test:unit:native",
     "version": "pnpm release"
   },

packages/pluggableWidgets/bar-chart-native/src/components/BarChart.tsx

@@ -68,25 +68,34 @@ export function BarChart({
     // fallback to a colour from the palette.
     const normalizedBarColors: string[] = useMemo(() => {
         const barColorPalette = style.bars?.barColorPalette?.split(";");
-        let index = 0;
 
-        return series.map(_series => {
-            const configuredStyle = !_series.customBarStyle
-                ? null
-                : style.bars?.customBarStyles?.[_series.customBarStyle]?.bar?.barColor;
-
-            if (typeof configuredStyle !== "string") {
-                const barColor = barColorPalette?.[index] || "black";
-
-                if (barColorPalette) {
-                    index = index + 1 === barColorPalette.length ? 0 : index + 1;
+        const result = series.reduce<{ colors: string[]; paletteIndex: number }>(
+            (acc, _series) => {
+                const configuredStyle = !_series.customBarStyle
+                    ? null
+                    : style.bars?.customBarStyles?.[_series.customBarStyle]?.bar?.barColor;
+
+                if (typeof configuredStyle !== "string") {
+                    const barColor = barColorPalette?.[acc.paletteIndex] || "black";
+                    const nextIndex = barColorPalette
+                        ? (acc.paletteIndex + 1) % barColorPalette.length
+                        : acc.paletteIndex;
+
+                    return {
+                        colors: [...acc.colors, barColor],
+                        paletteIndex: nextIndex
+                    };
                 }
 
-                return barColor;
-            }
+                return {
+                    colors: [...acc.colors, configuredStyle],
+                    paletteIndex: acc.paletteIndex
+                };
+            },
+            { colors: [], paletteIndex: 0 }
+        );
 
-            return configuredStyle;
-        });
+        return result.colors;
     }, [series, style]);
 
     const sortProps = useMemo(() => ({ sortOrder, sortKey: "x" }), [sortOrder]);

packages/pluggableWidgets/bar-chart-native/src/utils/SeriesLoader.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useMemo } from "react";
 import { ensure } from "@mendix/pluggable-widgets-tools";
 import { Big } from "big.js";
 import { ObjectItem } from "mendix";
@@ -22,34 +22,30 @@ interface DataPointsExtraction {
 // todo: test this hook.
 // todo: make types generic as different chart will *hopefully* use this hook
 export function useSeries(series: BarSeriesType[]): BarChartSeries[] | null {
-    const [chartSeries, setChartSeries] = useState<BarChartSeries[] | null>(null);
-
-    useEffect(() => {
+    const chartSeries = useMemo(() => {
         const loadedSeries: BarChartSeries[] = [];
 
         for (const element of series) {
             if (element.dataSet === "static") {
                 const result = loadStaticSeries(element);
 
                 if (!result) {
-                    setChartSeries(null);
-                    return;
+                    return null;
                 }
 
                 loadedSeries.push(result);
             } else {
                 const result = loadDynamicSeries(element);
 
                 if (!result) {
-                    setChartSeries(null);
-                    return;
+                    return null;
                 }
 
                 loadedSeries.push(...result);
             }
         }
 
-        setChartSeries(loadedSeries);
+        return loadedSeries;
     }, [series]);
 
     return chartSeries;

packages/pluggableWidgets/barcode-scanner-native/package.json

@@ -14,7 +14,7 @@
     "build": "pluggable-widgets-tools build:native",
     "format": "pluggable-widgets-tools format",
     "release": "pluggable-widgets-tools release:native",
-    "lint": "eslint --config ../../../.eslintrc.js --ext .jsx,.js,.ts,.tsx src/",
+    "lint": "eslint --ext .jsx,.js,.ts,.tsx src/",
     "test": "pluggable-widgets-tools test:unit:native",
     "version": "pnpm release"
   },

packages/pluggableWidgets/barcode-scanner-native/src/components/BarcodeMask.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, useEffect, useRef } from "react";
+import { ReactElement, useEffect, useState } from "react";
 import { Animated, View } from "react-native";
 import Svg, { Line, Path } from "react-native-svg";
 import { barcodeMaskStyles as styles } from "../ui/styles";
@@ -29,8 +29,8 @@ export const BarcodeMask = (props: BarcodeMaskSvgProps): ReactElement => {
         backgroundColor = "rgba(0, 0, 0, 0.6)"
     } = props;
 
-    const lineY = useRef(new Animated.Value(0)).current;
-    const lineStrokeWidth = useRef(new Animated.Value(0)).current;
+    const [lineY] = useState(() => new Animated.Value(0));
+    const [lineStrokeWidth] = useState(() => new Animated.Value(0));
 
     useEffect(() => {
         lineY.setValue(0);

packages/pluggableWidgets/bottom-sheet-native/package.json

@@ -14,7 +14,7 @@
     "build": "pluggable-widgets-tools build:native",
     "format": "pluggable-widgets-tools format",
     "release": "pluggable-widgets-tools release:native",
-    "lint": "eslint --config ../../../.eslintrc.js --ext .jsx,.js,.ts,.tsx src/",
+    "lint": "eslint --ext .jsx,.js,.ts,.tsx src/",
     "test": "pluggable-widgets-tools test:unit:native",
     "version": "pnpm release"
   },

packages/pluggableWidgets/carousel-native/package.json

@@ -14,7 +14,7 @@
     "build": "pluggable-widgets-tools build:native",
     "format": "pluggable-widgets-tools format",
     "release": "pluggable-widgets-tools release:native",
-    "lint": "eslint --config ../../../.eslintrc.js --ext .jsx,.js,.ts,.tsx src/",
+    "lint": "eslint --ext .jsx,.js,.ts,.tsx src/",
     "test": "pluggable-widgets-tools test:unit:native",
     "version": "pnpm release"
   },

packages/pluggableWidgets/carousel-native/src/Carousel.tsx

@@ -27,6 +27,7 @@ export const Carousel = (props: CarouselProps<CarouselStyle>): ReactElement => {
 
     useEffect(() => {
         if (props.contentSource?.status === ValueStatus.Available) {
+            // eslint-disable-next-line react-hooks/set-state-in-effect -- Syncing external data source status to loading state
             setLoading(false);
         }
     }, [props.contentSource]);
@@ -36,10 +37,13 @@ export const Carousel = (props: CarouselProps<CarouselStyle>): ReactElement => {
     }, []);
 
     const renderItem = useCallback(({ item, index }: { item: ObjectItem; index: number }) => {
-        const viewStyle = layoutSpecificStyle.slideItem;
+        let viewStyle = layoutSpecificStyle.slideItem;
         if (viewStyle) {
-            // We don't want to pass the already processed height to the item container
-            delete viewStyle.width;
+            // We don't want to pass the already processed width to the item container
+            // Create new object without width property instead of mutating
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { width, ...styleWithoutWidth } = viewStyle;
+            viewStyle = styleWithoutWidth;
         }
 
         return (

packages/pluggableWidgets/color-picker-native/package.json

@@ -14,7 +14,7 @@
     "build": "pluggable-widgets-tools build:native",
     "format": "pluggable-widgets-tools format",
     "release": "pluggable-widgets-tools release:native",
-    "lint": "eslint --config ../../../.eslintrc.js --ext .jsx,.js,.ts,.tsx src/",
+    "lint": "eslint --ext .jsx,.js,.ts,.tsx src/",
     "test": "pluggable-widgets-tools test:unit:native",
     "version": "pnpm release"
   },

packages/pluggableWidgets/column-chart-native/package.json

@@ -15,7 +15,7 @@
     "build": "pluggable-widgets-tools build:native",
     "format": "pluggable-widgets-tools format",
     "release": "pluggable-widgets-tools release:native",
-    "lint": "eslint --config ../../../.eslintrc.js --ext .jsx,.js,.ts,.tsx src/",
+    "lint": "eslint --ext .jsx,.js,.ts,.tsx src/",
     "test": "pluggable-widgets-tools test:unit:native",
     "version": "pnpm release"
   },