chore: upgrade to eslint 9 🎉

Author: r0b1n

automation/run-e2e/.eslintrc.cjs

@@ -0,0 +1,25 @@
+import { defineConfig } from "eslint/config";
+import globals from "globals";
+import js from "@eslint/js";
+
+export default defineConfig([
+    {
+        files: ["**/*.js"],
+        languageOptions: {
+            globals: {
+                ...globals.node,
+                ...globals.es2021
+            },
+            ecmaVersion: 2021,
+            sourceType: "module"
+        }
+    },
+    {
+        files: ["**/*.js"],
+        plugins: { js },
+        extends: ["js/recommended"],
+        rules: {
+            "no-unused-vars": "warn"
+        }
+    }
+]);

automation/run-e2e/eslint.config.mjs

@@ -16,7 +16,7 @@
         "url": "https://github.com/mendix/web-widgets.git"
     },
     "scripts": {
-        "lint": "eslint --ext .mjs .",
+        "lint": "eslint .",
         "format": "prettier --write .",
         "report:merge": "pnpm dlx ctrf merge ctrf --output merged-report.json --keep-reports"
     },
@@ -32,9 +32,11 @@
         "yargs-parser": "^21.1.1"
     },
     "devDependencies": {
+        "globals": "^16.0.0",
+        "@eslint/js": "^9.24.0",
         "@axe-core/playwright": "^4.10.1",
         "@playwright/test": "^1.51.1",
-        "@types/node": "^20.12.7",
+        "@types/node": "*",
         "eslint-plugin-playwright": "^2.2.0",
         "playwright-ctrf-json-reporter": "^0.0.20"
     }

automation/run-e2e/package.json

@@ -1,4 +1,4 @@
-/* eslint-disable no-console */
+ 
 const readXlsxFile = require("read-excel-file/node");
 
 const readExcelFile = filename => {

automation/run-e2e/utils/read-excel.cjs

@@ -0,0 +1,22 @@
+import { defineConfig } from "eslint/config";
+import globals from "globals";
+import js from "@eslint/js";
+
+export default defineConfig([
+    {
+        files: ["**/*.js"],
+        languageOptions: {
+            globals: {
+                ...globals.node,
+                ...globals.es2021
+            },
+            ecmaVersion: 2021,
+            sourceType: "module"
+        }
+    },
+    {
+        files: ["**/*.js"],
+        plugins: { js },
+        extends: ["js/recommended"]
+    }
+]);

automation/snapshot-generator/.eslintrc.json

@@ -13,12 +13,14 @@
     "license": "MIT",
     "scripts": {
         "format": "prettier --write .",
-        "lint": "eslint --ext .js lib/ bin/"
+        "lint": "eslint lib/ bin/"
     },
     "dependencies": {
         "chance": "^1.1.12"
     },
     "devDependencies": {
+        "globals": "^16.0.0",
+        "@eslint/js": "^9.24.0",
         "@mendix/prettier-config-web-widgets": "workspace:*"
     }
 }

automation/snapshot-generator/eslint.config.mjs

@@ -0,0 +1,8 @@
+import config from "@mendix/eslint-config-web-widgets/widget-ts.mjs";
+
+export default [
+    ...config,
+    {
+        ignores: ["src/changelog-parser/parser/module/module.js", "src/changelog-parser/parser/widget/widget.js"]
+    }
+];

automation/snapshot-generator/package.json

@@ -105,7 +105,10 @@ function mergeUnreleased<T extends UnreleasedVersionEntry>(unreleased: T, sectio
 export class WidgetChangelogFileWrapper {
     changelog: WidgetChangelogFile;
 
-    private constructor(changelog: WidgetChangelogFile, public changelogPath: string) {
+    private constructor(
+        changelog: WidgetChangelogFile,
+        public changelogPath: string
+    ) {
         this.changelog = Object.freeze(changelog);
     }
 
@@ -185,7 +188,10 @@ export class ModuleChangelogFileWrapper {
     changelog: ModuleChangelogFile;
     moduleName: string;
 
-    private constructor(changelog: ModuleChangelogFile, public changelogPath: string) {
+    private constructor(
+        changelog: ModuleChangelogFile,
+        public changelogPath: string
+    ) {
         this.changelog = Object.freeze(changelog);
         this.moduleName = changelog.moduleName;
     }

automation/utils/.eslintignore

@@ -41,7 +41,7 @@
             "@mendix/pluggable-widgets-tools": "10.18.2",
             "react": "^18.0.0",
             "react-dom": "^18.0.0",
-            "prettier": "~2.8.8",
+            "prettier": "3.5.3",
             "@types/node": "~22.14.0",
             "@types/react": ">=18.2.36",
             "@types/big.js": "^6.2.2",

automation/utils/.eslintrc.json

@@ -0,0 +1,3 @@
+import config from "@mendix/eslint-config-web-widgets/widget-ts.mjs";
+
+export default config;

automation/utils/eslint.config.mjs

@@ -29,7 +29,7 @@
         "build": "echo 'TODO: Fix calendar-web build script'",
         "create-gh-release": "rui-create-gh-release",
         "format": "prettier --write .",
-        "lint": "eslint --ext .jsx,.js,.ts,.tsx src/",
+        "lint": "eslint src",
         "publish-marketplace": "rui-publish-marketplace",
         "fixme_release": "ts-node --project scripts/tsconfig.json scripts/build.ts production",
         "release": "echo 'TODO: Fix calendar-web release script'",
@@ -48,6 +48,7 @@
         "babel-loader": "^8.3.0",
         "copy-webpack-plugin": "^11.0.0",
         "css-loader": "^6.7.3",
+        "eslint": "^9.24.0",
         "fork-ts-checker-webpack-plugin": "^7.3.0",
         "mendix-client": "^7.15.8",
         "sass": "^1.58.3",

automation/utils/src/changelog-parser/index.ts

@@ -0,0 +1,3 @@
+import config from "@mendix/eslint-config-web-widgets/widget-ts.mjs";
+
+export default config;

package.json

@@ -28,7 +28,7 @@
         "build": "ts-node --project scripts/tsconfig.json scripts/build.ts development",
         "release": "ts-node --project scripts/tsconfig.json scripts/build.ts production",
         "format": "prettier --write .",
-        "lint": "eslint --ext .jsx,.js,.ts,.tsx src/",
+        "lint": "eslint src/",
         "test": "pluggable-widgets-tools test:unit:web",
         "create-gh-release": "rui-create-gh-release",
         "publish-marketplace": "rui-publish-marketplace",

packages/customWidgets/calendar-web/.eslintrc.json

@@ -0,0 +1,31 @@
+import { defineConfig } from "eslint/config";
+import globals from "globals";
+import js from "@eslint/js";
+
+export default defineConfig([
+    {
+        files: ["**/*.js"],
+        languageOptions: {
+            globals: {
+                ...globals.browser,
+                mx: "readonly",
+            },
+            ecmaVersion: 2021,
+            sourceType: "module"
+        }
+    },
+    {
+        files: ["**/*.js"],
+        plugins: { js },
+        extends: ["js/recommended"],
+        rules: {
+            "no-unused-vars": ["error", {
+                vars: "all",
+                args: "after-used",
+                ignoreRestSiblings: false,
+                varsIgnorePattern: "Big",
+                caughtErrorsIgnorePattern: ".*",
+            }],
+        },
+    }
+]);

packages/customWidgets/calendar-web/eslint.config.mjs

@@ -35,6 +35,8 @@
         "publish-marketplace": "rui-publish-marketplace"
     },
     "devDependencies": {
+        "globals": "^16.0.0",
+        "@eslint/js": "^9.24.0",
         "@mendix/automation-utils": "workspace:*",
         "@mendix/prettier-config-web-widgets": "workspace:^"
     }

packages/customWidgets/calendar-web/package.json

@@ -0,0 +1,3 @@
+import config from "@mendix/eslint-config-web-widgets/widget-ts.mjs";
+
+export default config;

packages/customWidgets/signature-web/.eslintrc.json

@@ -30,7 +30,7 @@
         "dev": "pluggable-widgets-tools start:ts",
         "build": "pluggable-widgets-tools build:ts",
         "format": "prettier --write .",
-        "lint": "eslint --ext .jsx,.js,.ts,.tsx src/",
+        "lint": "eslint src/",
         "release": "pluggable-widgets-tools release:web",
         "create-gh-release": "rui-create-gh-release",
         "create-translation": "rui-create-translation",

packages/customWidgets/signature-web/eslint.config.mjs

@@ -0,0 +1,3 @@
+import config from "@mendix/eslint-config-web-widgets/widget-ts.mjs";
+
+export default config;

packages/customWidgets/signature-web/package.json

@@ -31,7 +31,7 @@
         "dev": "pluggable-widgets-tools start:web",
         "build": "pluggable-widgets-tools build:web",
         "format": "prettier --write .",
-        "lint": "eslint --ext .jsx,.js,.ts,.tsx src/",
+        "lint": "eslint src/",
         "test": "pluggable-widgets-tools test:unit:web",
         "release": "pluggable-widgets-tools release:web",
         "create-gh-release": "rui-create-gh-release",

packages/modules/web-actions/eslint.config.mjs

@@ -0,0 +1,3 @@
+import config from "@mendix/eslint-config-web-widgets/widget-ts.mjs";
+
+export default config;

packages/modules/web-actions/package.json

@@ -30,7 +30,7 @@
         "dev": "pluggable-widgets-tools start:web",
         "build": "pluggable-widgets-tools build:ts",
         "format": "prettier --write .",
-        "lint": "eslint --ext .jsx,.js,.ts,.tsx src/",
+        "lint": "eslint src/",
         "test": "pluggable-widgets-tools test:unit:web",
         "release": "pluggable-widgets-tools release:web",
         "verify": "rui-verify-package-format",

packages/pluggableWidgets/accessibility-helper-web/.eslintrc.json

@@ -31,7 +31,7 @@ const areaChartConfigOptions: ChartWidgetProps["configOptions"] = {
 const areaChartSeriesOptions: ChartWidgetProps["seriesOptions"] = {};
 
 // disable eslint rule to have nice component name in component tree at devtools
-// eslint-disable-next-line prefer-arrow-callback
+
 export const AreaChart = memo(function AreaChart(props: AreaChartContainerProps): ReactElement {
     const mapSeries = useCallback<SeriesMapper<SeriesType>>((line, dataPoints, { getExpressionValue }) => {
         const lineColorExpression = line.dataSet === "static" ? line.staticLineColor : line.dynamicLineColor;

packages/pluggableWidgets/accessibility-helper-web/eslint.config.mjs

@@ -0,0 +1,3 @@
+import config from "@mendix/eslint-config-web-widgets/widget-ts.mjs";
+
+export default config;

packages/pluggableWidgets/accessibility-helper-web/package.json

@@ -30,7 +30,7 @@
         "dev": "cross-env MPKOUTPUT=BadgeButton.mpk pluggable-widgets-tools start:ts",
         "build": "cross-env MPKOUTPUT=BadgeButton.mpk pluggable-widgets-tools build:ts",
         "format": "prettier --write .",
-        "lint": "eslint --ext .jsx,.js,.ts,.tsx src/",
+        "lint": "eslint src/",
         "test": "pluggable-widgets-tools test:unit:web",
         "release": "cross-env MPKOUTPUT=BadgeButton.mpk pluggable-widgets-tools release:web",
         "create-gh-release": "rui-create-gh-release",

packages/pluggableWidgets/accordion-web/.eslintrc.json

@@ -0,0 +1,8 @@
+import config from "@mendix/eslint-config-web-widgets/widget-ts.mjs";
+
+export default [
+    ...config,
+    {
+        ignores: ["playwright.config.js", "e2e/*.js"]
+    }
+];

packages/pluggableWidgets/accordion-web/eslint.config.mjs

@@ -30,7 +30,7 @@
         "dev": "cross-env MPKOUTPUT=Badge.mpk pluggable-widgets-tools start:web",
         "build": "cross-env MPKOUTPUT=Badge.mpk pluggable-widgets-tools build:web",
         "format": "prettier --write .",
-        "lint": "eslint --ext .jsx,.js,.ts,.tsx src/",
+        "lint": "eslint src/",
         "test": "pluggable-widgets-tools test:unit:web",
         "e2e": "run-e2e ci",
         "e2edev": "run-e2e dev --with-preps",

packages/pluggableWidgets/accordion-web/package.json

@@ -26,7 +26,7 @@ export default function Badge(props: BadgeContainerProps): ReactNode {
             onKeyDown={clickable ? onKeyDown : undefined}
             className={props.class}
             style={props.style}
-            tabIndex={clickable ? props.tabIndex ?? 0 : undefined}
+            tabIndex={clickable ? (props.tabIndex ?? 0) : undefined}
         />
     );
 }

packages/pluggableWidgets/area-chart-web/.eslintrc.json

@@ -0,0 +1,3 @@
+import config from "@mendix/eslint-config-web-widgets/widget-ts.mjs";
+
+export default config;

packages/pluggableWidgets/area-chart-web/eslint.config.mjs

@@ -30,7 +30,7 @@
         "dev": "pluggable-widgets-tools start:web",
         "build": "pluggable-widgets-tools build:ts",
         "format": "prettier --write .",
-        "lint": "eslint --ext .jsx,.js,.ts,.tsx src/",
+        "lint": "eslint src/",
         "test": "pluggable-widgets-tools test:unit:web",
         "release": "pluggable-widgets-tools release:web",
         "verify": "rui-verify-package-format",

packages/pluggableWidgets/area-chart-web/package.json

@@ -36,7 +36,7 @@ const barChartSeriesOptions: ChartWidgetProps["seriesOptions"] = {
 };
 
 // disable eslint rule to have nice component name in component tree at devtools
-// eslint-disable-next-line prefer-arrow-callback
+
 export const BarChart = memo(function BarChart(props: BarChartContainerProps): ReactElement | null {
     const layoutOptions = useMemo(
         () => ({