chore: migrate to ESLint 10

.npmrc

@@ -27,7 +27,6 @@ public-hoist-pattern[]=make-dir
 # public-hoist-pattern rule.
 public-hoist-pattern[]=*babel*
 public-hoist-pattern[]=big.js
-public-hoist-pattern[]=*cypress*
 public-hoist-pattern[]=*shelljs*
 public-hoist-pattern[]=*rollup*
 public-hoist-pattern[]=@types/node

automation/run-e2e/lib/dev.mjs

@@ -46,7 +46,7 @@ export async function dev() {
         }
     }
 
-    // We add local node_modules/.bin to PATH to make cypress bin is available for
+    // We add local node_modules/.bin to PATH to make playwright bin available for
     // any package in monorepo.
     const packageBinariesPath = fileURLToPath(new URL("../node_modules/.bin", import.meta.url));
     process.env.PATH += `${delimiter}${packageBinariesPath}`;

automation/run-e2e/package.json

@@ -34,7 +34,7 @@
     },
     "devDependencies": {
         "@axe-core/playwright": "^4.11.1",
-        "@eslint/js": "^9.39.4",
+        "@eslint/js": "^10.0.1",
         "@mendix/prettier-config-web-widgets": "workspace:*",
         "@playwright/test": "^1.60.0",
         "@types/node": "*",

automation/snapshot-generator/package.json

@@ -16,7 +16,7 @@
         "chance": "^1.1.12"
     },
     "devDependencies": {
-        "@eslint/js": "^9.32.0",
+        "@eslint/js": "^10.0.1",
         "@mendix/prettier-config-web-widgets": "workspace:*",
         "globals": "^17.3.0"
     }

automation/utils/src/fetch.ts

@@ -30,7 +30,8 @@ export async function fetch<T = unknown>(
         response = await nodefetch(url, httpsOptions);
     } catch (error) {
         throw new Error(
-            `An error occurred while retrieving data from ${url}. Technical error: ${(error as Error).message}`
+            `An error occurred while retrieving data from ${url}. Technical error: ${(error as Error).message}`,
+            { cause: error }
         );
     }
 

automation/utils/src/github.ts

@@ -260,7 +260,7 @@ export class GitHub {
             await exec(command);
             console.log(`Successfully triggered workflow '${workflowId}'`);
         } catch (error) {
-            throw new Error(`Failed to trigger workflow '${workflowId}': ${error}`);
+            throw new Error(`Failed to trigger workflow '${workflowId}': ${error}`, { cause: error });
         }
     }
 
@@ -313,7 +313,8 @@ export class GitHub {
             await pipeline(response.body, fileStream);
         } catch (error) {
             throw new Error(
-                `Failed to download release asset ${assetId}: ${error instanceof Error ? error.message : String(error)}`
+                `Failed to download release asset ${assetId}: ${error instanceof Error ? error.message : String(error)}`,
+                { cause: error }
             );
         }
     }

automation/utils/src/jira.ts

@@ -63,7 +63,7 @@ export class Jira {
         try {
             response = await nodefetch(url, httpsOptions);
         } catch (error) {
-            throw new Error(`API request failed: ${(error as Error).message}`);
+            throw new Error(`API request failed: ${(error as Error).message}`, { cause: error });
         }
 
         if (!response.ok) {

automation/utils/src/package-info.ts

@@ -123,9 +123,9 @@
     })
 });
 
 export interface PackageInfo extends z.infer<typeof PackageSchema> {}
 
 export interface PublishedInfo extends z.infer<typeof PublishedPackageSchema> {}
 
 export interface WidgetInfo extends z.infer<typeof WidgetPackageSchema> {
     mpkName: string;
@@ -136,7 +136,7 @@
     mpkName: string;
 }
 
 export interface JSActionsInfo extends z.infer<typeof JSActionsPackageSchema> {}
 
 export async function getPackageFileContent(dirPath: string): Promise<PackageJsonFileContent> {
     const pkgPath = join(dirPath, `package.json`);
@@ -149,7 +149,7 @@
     } catch (error) {
         console.log(error);
         console.error(`ERROR: Path does not exist: ${pkgPath}`);
-        throw new Error("Error while reading package info at " + dirPath);
+        throw new Error("Error while reading package info at " + dirPath, { cause: error });
     }
 }
 

package.json

@@ -54,6 +54,7 @@
             "@codemirror/state": "^6.5.2",
             "@codemirror/view": "^6.38.1",
             "@mendix/pluggable-widgets-tools": "11.13.0",
+            "@mendix/pluggable-widgets-tools>@babel/eslint-parser": "-",
             "@mendix/pluggable-widgets-tools>@testing-library/react-native": "-",
             "@mendix/pluggable-widgets-tools>eslint": "-",
             "@mendix/pluggable-widgets-tools>eslint-config-prettier": "-",

packages/modules/web-actions/package.json

@@ -35,7 +35,7 @@
         "verify": "rui-verify-package-format"
     },
     "devDependencies": {
-        "@eslint/js": "^9.32.0",
+        "@eslint/js": "^10.0.1",
         "@mendix/automation-utils": "workspace:*",
         "@mendix/prettier-config-web-widgets": "workspace:^",
         "globals": "^17.3.0"

packages/pluggableWidgets/datagrid-web/src/components/ColumnSelector.tsx

@@ -31,6 +31,7 @@ export function ColumnSelector(props: ColumnSelectorProps): ReactElement {
         middleware: [
             size({
                 apply({ availableHeight }) {
+                    // eslint-disable-next-line @eslint-react/dom-no-flush-sync -- pattern recommended by Floating UI's size middleware
                     flushSync(() => {
                         setMaxHeight(availableHeight);
                     });

packages/pluggableWidgets/google-tag-web/src/utils.ts

@@ -76,21 +76,19 @@ export function executeCommand(
 
 let checkedDojo = false;
 export function useDojoOnNavigation(cb: () => void): void {
-    if (!checkedDojo) {
+    useEffect(() => {
         if (!window.dojo) {
-            console.error("GoogleTagWidget: `window.dojo` is not found. Tracking page changes is disabled.");
+            if (!checkedDojo) {
+                console.error("GoogleTagWidget: `window.dojo` is not found. Tracking page changes is disabled.");
+                checkedDojo = true;
+            }
+            return;
         }
-        checkedDojo = true;
-    }
 
-    if (window.dojo) {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        useEffect(() => {
-            const handle = window.dojo.connect(window.mx.ui.getContentForm(), "onNavigation", cb);
+        const handle = window.dojo.connect(window.mx.ui.getContentForm(), "onNavigation", cb);
 
-            return () => {
-                window.dojo.disconnect(handle);
-            };
-        }, [cb]);
-    }
+        return () => {
+            window.dojo.disconnect(handle);
+        };
+    }, [cb]);
 }

packages/pluggableWidgets/html-element-web/src/utils/props-utils.ts

@@ -152,7 +152,8 @@ function parseSanitizationConfig(config?: string): Config {
     } catch (e) {
         console.error(e);
         throw new Error(
-            'Can not parse "Configuration for HTML sanitization" value. Please check your widget configuration.'
+            'Can not parse "Configuration for HTML sanitization" value. Please check your widget configuration.',
+            { cause: e }
         );
     }
 }

packages/pluggableWidgets/image-cropper-web/src/ImageCropper.editorPreview.tsx

@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import { ReactElement, createRef, useState } from "react";
+import { ReactElement, useRef, useState } from "react";
 import { type Crop } from "react-image-crop";
 import { parseStyle } from "@mendix/widget-plugin-platform/preview/parse-style";
 import { ImageCropperPreviewProps } from "../typings/ImageCropperProps";
@@ -19,7 +19,7 @@ const PREVIEW_BOUNDARY_HEIGHT = 170;
 function StaticCropPreview(props: { imageUrl: string; values: ImageCropperPreviewProps }): ReactElement {
     const { imageUrl, values } = props;
     const [crop, setCrop] = useState<Crop | undefined>(undefined);
-    const imageRef = createRef<HTMLImageElement>();
+    const imageRef = useRef<HTMLImageElement>(null);
 
     // Preview only has the expression *text* (no runtime data). Numeric literals render a real
     // ratio; an attribute/expression path can't be evaluated here, so it falls back to free aspect.

packages/pluggableWidgets/rich-text-web/src/components/toolbars/Toolbar.tsx

@@ -22,9 +22,9 @@ import {
 } from "./ToolbarConfig";
 import { PresetEnum, ToolbarConfigEnum, AdvancedConfigType, CustomFontsType } from "../../../typings/RichTextProps";
 import "./Toolbar.scss";
-// eslint-disable-next-line import/order
+// eslint-disable-next-line import-x/order
 import { ToolbarDropdown } from "./components/ToolbarDropdown";
-// eslint-disable-next-line import/order
+// eslint-disable-next-line import-x/order
 import { ToolbarSplitButton } from "./components/ToolbarSplitButton";
 
 interface ToolbarProps extends PropsWithChildren {

packages/pluggableWidgets/rich-text-web/src/extensions/Indent.ts

@@ -371,13 +371,10 @@ function updateIndentLevel(tr: Transaction, options: IndentOptions, direction: "
     doc.nodesBetween(from, to, (node, pos) => {
         if (options.types.includes(node.type.name)) {
             const currentIndent = node.attrs.indent || 0;
-            let newIndent = currentIndent;
-
-            if (direction === "increase") {
-                newIndent = Math.min(currentIndent + options.indentStep, options.maxIndent);
-            } else {
-                newIndent = Math.max(currentIndent - options.indentStep, options.minIndent);
-            }
+            const newIndent =
+                direction === "increase"
+                    ? Math.min(currentIndent + options.indentStep, options.maxIndent)
+                    : Math.max(currentIndent - options.indentStep, options.minIndent);
 
             if (newIndent !== currentIndent) {
                 tr.setNodeMarkup(pos, undefined, {

packages/shared/eslint-config-web-widgets/package.json

@@ -11,20 +11,19 @@
         "lint": "eslint . package.json"
     },
     "dependencies": {
-        "@eslint/js": "^9.39.3",
+        "@eslint-react/eslint-plugin": "~5.24.8",
+        "@eslint/js": "^10.0.1",
         "@mendix/prettier-config-web-widgets": "workspace:*",
-        "eslint": "^9.39.3",
+        "eslint": "^10.11.0",
         "eslint-config-prettier": "^9.0.0",
-        "eslint-plugin-cypress": "^5.1.1",
-        "eslint-plugin-import": "^2.32.0",
-        "eslint-plugin-jest": "^29.15.0",
+        "eslint-plugin-import-x": "^4.17.1",
+        "eslint-plugin-jest": "^29.16.6",
         "eslint-plugin-package-json": "^0.89.1",
         "eslint-plugin-prettier": "^5.5.5",
         "eslint-plugin-promise": "^7.2.1",
-        "eslint-plugin-react": "~7.37.5",
-        "eslint-plugin-react-hooks": "7.0.1",
-        "globals": "^17.3.0",
-        "prettier": "^3.8.1",
-        "typescript-eslint": "^8.57.0"
+        "eslint-plugin-react-hooks": "7.1.1",
+        "globals": "^17.12.0",
+        "prettier": "^3.9.9",
+        "typescript-eslint": "^8.70.1"
     }
 }

packages/shared/eslint-config-web-widgets/widget-ts.mjs

@@ -1,24 +1,24 @@
 import eslint from "@eslint/js";
 import tseslint from "typescript-eslint";
 import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
-import reactPlugin from "eslint-plugin-react";
+import eslintReact from "@eslint-react/eslint-plugin";
 import reactHooksPlugin from "eslint-plugin-react-hooks";
 import jestPlugin from "eslint-plugin-jest";
 import packageJson from "eslint-plugin-package-json";
 import packageJsonFieldsOrder from "@mendix/prettier-config-web-widgets/package-json-fields-order.js";
 import { defineConfig } from "eslint/config";
-import importPlugin from "eslint-plugin-import";
+import { importX } from "eslint-plugin-import-x";
 
 export default defineConfig(
     {
         ignores: ["typings/", "dist/"]
     },
     {
         name: "generic eslint",
-        extends: [eslint.configs.recommended, importPlugin.flatConfigs.recommended],
+        extends: [eslint.configs.recommended, importX.flatConfigs.recommended],
         settings: {
-            "import/internal-regex": "^@mendix/",
-            "import/parsers": {
+            "import-x/internal-regex": "^@mendix/",
+            "import-x/parsers": {
                 "@typescript-eslint/parser": [".ts", ".tsx"]
             }
         },
@@ -50,6 +50,10 @@ export default defineConfig(
                 {
                     selector: "TSTypeReference[typeName.left.name='React']",
                     message: "Do not use implicit React namespace."
+                },
+                {
+                    selector: "JSXAttribute > JSXExpressionContainer > Literal[value=true]",
+                    message: "Omit the value for true boolean attributes: use `prop` instead of `prop={true}`."
                 }
             ],
             "no-return-await": "error",
@@ -77,10 +81,10 @@ export default defineConfig(
             radix: "error",
             "spaced-comment": "error",
             "sort-imports": "off",
-            "import/no-unresolved": "off",
-            "import/namespace": "off",
-            "import/named": "off",
-            "import/order": [
+            "import-x/no-unresolved": "off",
+            "import-x/namespace": "off",
+            "import-x/named": "off",
+            "import-x/order": [
                 "warn",
                 {
                     alphabetize: {
@@ -100,27 +104,22 @@ export default defineConfig(
     },
     {
         name: "react",
-        files: ["**/*.tsx", "**/*.jsx"],
-        extends: [reactPlugin.configs.flat.recommended],
-        settings: {
-            react: {
-                createClass: "createReactClass",
-                pragma: "createElement",
-                version: "detect"
-            }
-        },
+        files: ["**/*.ts", "**/*.tsx"],
+        extends: [eslintReact.configs["recommended-typescript"]],
         rules: {
-            "react/display-name": "off",
-            "react/prop-types": "off",
-            "react/no-access-state-in-setstate": "error",
-            "react/no-did-mount-set-state": "error",
-            "react/no-find-dom-node": "off",
-            "react/no-will-update-set-state": "error",
-            "react/jsx-boolean-value": ["error", "never"],
-            "react/no-deprecated": "warn",
-            "react/jsx-uses-vars": "error",
-            "react/jsx-uses-react": "off",
-            "react/react-in-jsx-scope": "off"
+            "@eslint-react/no-set-state-in-component-did-mount": "error",
+            "@eslint-react/no-set-state-in-component-will-update": "error",
+            "@eslint-react/dom-no-find-dom-node": "off",
+            // hooks rules are covered by eslint-plugin-react-hooks
+            "@eslint-react/error-boundaries": "off",
+            "@eslint-react/exhaustive-deps": "off",
+            "@eslint-react/purity": "off",
+            "@eslint-react/rules-of-hooks": "off",
+            "@eslint-react/set-state-in-effect": "off",
+            "@eslint-react/set-state-in-render": "off",
+            "@eslint-react/static-components": "off",
+            "@eslint-react/unsupported-syntax": "off",
+            "@eslint-react/use-memo": "off"
         }
     },
     {