Replace ESLint/typescript-eslint with oxlint + tsgolint for TypeScript 7

Co-authored-by: birkskyum <74932975+birkskyum@users.noreply.github.com>
Initial plan
2026-11-07 02:33:44 +00:00 · 2026-11-03 16:05:54 +00:00 · 2026-11-03 15:55:37 +00:00 · 2026-08-07 13:53:23 +00:00
20 changed files with 2475 additions and 3742 deletions
@@ -42,7 +42,7 @@ jobs:

    # Initializes the CodeQL tools for scanning.
    - name: Initialize CodeQL
-      uses: github/codeql-action/init@ff2f1c621b7f889edc0d3c761ac2e6a3f8cdb0dd # v4.37.7
+      uses: github/codeql-action/init@d1ba80a13dd99fba24a470575428917156a28b43 # v4.37.5
      with:
        languages: ${{ matrix.language }}
        # If you wish to specify custom queries, you can do so here or in a config file.
@@ -53,7 +53,7 @@ jobs:
    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
    # If this step fails, then you should remove it and run the build manually (see below)
    - name: Autobuild
-      uses: github/codeql-action/autobuild@ff2f1c621b7f889edc0d3c761ac2e6a3f8cdb0dd # v4.37.7
+      uses: github/codeql-action/autobuild@f205ea1c3313d32999d8d6a48b4f6530d4437b38 # v4.37.4

    # ℹ️ Command-line programs to run using the OS shell.
    # 📚 https://git.io/JvXDl
@@ -67,4 +67,4 @@ jobs:
    #   make release

    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@ff2f1c621b7f889edc0d3c761ac2e6a3f8cdb0dd # v4.37.7
+      uses: github/codeql-action/analyze@5595ccaf912efad79be6eef63a5619ff05969be3 # v4.37.6
@@ -0,0 +1,148 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["typescript", "react"],
+  "jsPlugins": ["@stylistic/eslint-plugin"],
+  "categories": {
+    "correctness": "off"
+  },
+  "env": {
+    "builtin": true,
+    "es2024": true
+  },
+  "globals": {
+    "global": "readonly"
+  },
+  "ignorePatterns": ["dist/**"],
+  "options": {
+    "typeAware": true,
+    "reportUnusedDisableDirectives": "warn"
+  },
+  "rules": {
+    "constructor-super": "error",
+    "for-direction": "error",
+    "getter-return": "error",
+    "no-async-promise-executor": "error",
+    "no-case-declarations": "error",
+    "no-class-assign": "error",
+    "no-compare-neg-zero": "error",
+    "no-cond-assign": "error",
+    "no-const-assign": "error",
+    "no-constant-binary-expression": ["error", { "checkRelationalComparisons": false }],
+    "no-constant-condition": "error",
+    "no-control-regex": "error",
+    "no-debugger": "error",
+    "no-delete-var": "error",
+    "no-dupe-class-members": "error",
+    "no-dupe-else-if": "error",
+    "no-dupe-keys": "error",
+    "no-duplicate-case": "error",
+    "no-empty": "error",
+    "no-empty-character-class": "error",
+    "no-empty-pattern": "error",
+    "no-empty-static-block": "error",
+    "no-ex-assign": "error",
+    "no-extra-boolean-cast": "error",
+    "no-fallthrough": "error",
+    "no-func-assign": "error",
+    "no-global-assign": "error",
+    "no-import-assign": "error",
+    "no-invalid-regexp": "error",
+    "no-irregular-whitespace": ["error", {
+      "skipComments": false,
+      "skipJSXText": false,
+      "skipRegExps": false,
+      "skipStrings": true,
+      "skipTemplates": false
+    }],
+    "no-loss-of-precision": "error",
+    "no-misleading-character-class": "error",
+    "no-new-native-nonconstructor": "error",
+    "no-nonoctal-decimal-escape": "error",
+    "no-obj-calls": "error",
+    "no-prototype-builtins": "error",
+    "no-redeclare": "error",
+    "no-regex-spaces": "error",
+    "no-self-assign": "error",
+    "no-setter-return": "error",
+    "no-shadow-restricted-names": "error",
+    "no-sparse-arrays": "error",
+    "no-this-before-super": "error",
+    "no-unassigned-vars": "error",
+    "no-unexpected-multiline": "error",
+    "no-unreachable": "error",
+    "no-unsafe-finally": "error",
+    "no-unsafe-negation": "error",
+    "no-unsafe-optional-chaining": "error",
+    "no-unused-labels": "error",
+    "no-unused-private-class-members": "error",
+    "no-unused-vars": ["warn", {
+      "varsIgnorePattern": "^_",
+      "caughtErrors": "all",
+      "caughtErrorsIgnorePattern": "^_",
+      "argsIgnorePattern": "^_"
+    }],
+    "no-useless-assignment": "error",
+    "no-useless-backreference": "error",
+    "no-useless-catch": "error",
+    "no-useless-escape": "error",
+    "no-with": "error",
+    "preserve-caught-error": "error",
+    "require-yield": "error",
+    "use-isnan": "error",
+    "valid-typeof": "error",
+    "no-array-constructor": "error",
+    "no-unused-expressions": "error",
+    "typescript/ban-ts-comment": "off",
+    "typescript/no-duplicate-enum-values": "error",
+    "typescript/no-empty-object-type": "off",
+    "typescript/no-explicit-any": "off",
+    "typescript/no-extra-non-null-assertion": "error",
+    "typescript/no-misused-new": "error",
+    "typescript/no-namespace": "error",
+    "typescript/no-non-null-asserted-optional-chain": "off",
+    "typescript/no-require-imports": "error",
+    "typescript/no-this-alias": "error",
+    "typescript/no-unnecessary-type-constraint": "error",
+    "typescript/no-unsafe-declaration-merging": "error",
+    "typescript/no-unsafe-function-type": "error",
+    "typescript/no-wrapper-object-types": "error",
+    "typescript/prefer-as-const": "error",
+    "typescript/prefer-namespace-keyword": "error",
+    "typescript/triple-slash-reference": "error",
+    "typescript/consistent-type-imports": ["error", { "fixStyle": "inline-type-imports" }],
+    "react/only-export-components": ["warn", {
+      "allowConstantExport": true,
+      "customHOCs": ["withTranslation"]
+    }],
+    "@stylistic/indent": ["error", 2],
+    "@stylistic/semi": ["error", "always"],
+    "@stylistic/quotes": ["error", "double", { "avoidEscape": true }],
+    "no-var": "error"
+  },
+  "overrides": [
+    {
+      "files": ["**/*.ts", "**/*.tsx", "**/*.mts", "**/*.cts"],
+      "rules": {
+        "constructor-super": "off",
+        "getter-return": "off",
+        "no-class-assign": "off",
+        "no-const-assign": "off",
+        "no-dupe-class-members": "off",
+        "no-dupe-keys": "off",
+        "no-func-assign": "off",
+        "no-import-assign": "off",
+        "no-new-native-nonconstructor": "off",
+        "no-obj-calls": "off",
+        "no-redeclare": "off",
+        "no-setter-return": "off",
+        "no-this-before-super": "off",
+        "no-unreachable": "off",
+        "no-unsafe-negation": "off",
+        "no-with": "off",
+        "prefer-const": "error",
+        "prefer-rest-params": "error",
+        "prefer-spread": "error"
+      }
+    }
+  ]
+}
@@ -6,7 +6,7 @@ To get started, install all npm packages:
 npm install
 ```

-Verify code correctness by running ESLint:
+Verify code correctness by running Oxlint:

 ```
 npm run lint
@@ -2,13 +2,10 @@

 ### ✨ Features and improvements
 - Replace Cypress with Playwright for end-to-end tests and Vitest browser mode (Playwright provider) for component tests; drop the `@shellygo/cypress-test-utils` helper in favour of a `MaputnikDriver` page object
- Upgrade to MapLibre GL JS 6 and Vite 8, and update the remaining dependencies
- Serve the RTL text plugin from `@mapbox/mapbox-gl-rtl-text` instead of a pinned CDN URL, so its version is tracked in `package.json`
- Exported HTML now loads MapLibre GL JS as an ES module, since v6 no longer ships a UMD bundle
+- Upgrade to TypeScript 7 and replace ESLint/typescript-eslint with oxlint (type-aware via `oxlint-tsgolint`), keeping the same lint rules
 - _...Add new stuff here..._

 ### 🐞 Bug fixes
- The map's data listener now fires on tile loads again, so source and vector layer field autocompletion is populated
 - _...Add new stuff here..._

 ## 3.1.0
@@ -1,73 +0,0 @@
-import eslint from "@eslint/js";
-import {defineConfig} from "eslint/config";
-import stylisticTs from "@stylistic/eslint-plugin";
-import tseslint from "typescript-eslint";
-import reactPlugin from "eslint-plugin-react";
-import reactHooksPlugin from "eslint-plugin-react-hooks";
-import reactRefreshPlugin from "eslint-plugin-react-refresh";
-
-export default defineConfig({
-  extends: [
-    eslint.configs.recommended,
-    tseslint.configs.recommended,
-  ],
-  files: ["**/*.{js,jsx,ts,tsx}"],
-  ignores: [
-    "dist/**/*",
-    "public/**/*",
-  ],
-  languageOptions: {
-    ecmaVersion: 2024,
-    sourceType: "module",
-    globals: {
-      global: "readonly"
-    }
-  },
-  settings: {
-    react: { version: "18.2" }
-  },
-  plugins: {
-    "react": reactPlugin,
-    "react-hooks": reactHooksPlugin,
-    "react-refresh": reactRefreshPlugin,
-    "@stylistic": stylisticTs
-  },
-  rules: {
-    "react-refresh/only-export-components": [
-      "warn",
-      // Many components are exported as withTranslation()(Component); without
-      // this the rule cannot tell the HOC's result is still a component.
-      { allowConstantExport: true, extraHOCs: ["withTranslation"] }
-    ],
-    "@typescript-eslint/no-explicit-any": "off",
-    "@typescript-eslint/no-unused-vars": [
-      "warn",
-      {
-        varsIgnorePattern: "^_",
-        caughtErrors: "all",
-        caughtErrorsIgnorePattern: "^_",
-        argsIgnorePattern: "^_"
-      }
-    ],
-    "no-unused-vars": "off",
-    "react/prop-types": "off",
-    "no-undef": "off",
-    "indent": "off",
-    "@stylistic/indent": ["error", 2],
-    "semi": "off",
-    "@stylistic/semi": ["error", "always"],
-    "quotes": "off",
-    "@stylistic/quotes": ["error", "double", { avoidEscape: true }],
-    "no-var": "error",
-    "@typescript-eslint/no-non-null-asserted-optional-chain": "off",
-    "@typescript-eslint/ban-ts-comment": "off",
-    "@typescript-eslint/no-empty-object-type": "off",
-    "@typescript-eslint/consistent-type-imports": ["error", { "fixStyle": "inline-type-imports" }],
-
-  },
-  linterOptions: {
-    reportUnusedDisableDirectives: true,
-    noInlineConfig: false
-  }
-}
-);
@@ -5,13 +5,12 @@
  "type": "module",
  "main": "''",
  "scripts": {
-    "copy-rtl-text-plugin": "mkdir -p public && cp -p node_modules/@mapbox/mapbox-gl-rtl-text/dist/mapbox-gl-rtl-text.js public/",
-    "start": "npm run copy-rtl-text-plugin && vite",
-    "build": "npm run copy-rtl-text-plugin && tsc && vite build --mode=production",
-    "build-desktop": "npm run copy-rtl-text-plugin && tsc && vite build --mode=desktop && cd desktop && make",
-    "build-linux": "npm run copy-rtl-text-plugin && tsc && vite build --mode=desktop && cd desktop && make bin/linux/maputnik",
+    "start": "vite",
+    "build": "tsc && vite build --mode=production",
+    "build-desktop": "tsc && vite build --mode=desktop && cd desktop && make",
+    "build-linux": "tsc && vite build --mode=desktop && cd desktop && make bin/linux/maputnik",
    "i18n:extract": "npx i18next-cli extract",
-    "lint": "eslint",
+    "lint": "oxlint",
    "test": "playwright test",
    "test-e2e": "playwright test",
    "test-unit": "vitest",
@@ -31,13 +30,13 @@
    "@codemirror/lint": "^6.9.7",
    "@codemirror/state": "^6.7.1",
    "@codemirror/theme-one-dark": "^6.1.3",
-    "@codemirror/view": "^6.43.9",
+    "@codemirror/view": "^6.43.7",
    "@dnd-kit/core": "^6.3.1",
    "@dnd-kit/sortable": "^10.0.0",
    "@dnd-kit/utilities": "^3.2.2",
    "@mapbox/mapbox-gl-rtl-text": "^0.4.0",
    "@maplibre/maplibre-gl-geocoder": "^1.9.4",
-    "@maplibre/maplibre-gl-inspect": "^1.9.0",
+    "@maplibre/maplibre-gl-inspect": "^1.8.2",
    "@maplibre/maplibre-gl-style-spec": "^26.2.1",
    "array-move": "^4.0.0",
    "buffer": "^6.0.3",
@@ -60,20 +59,20 @@
    "lodash.get": "^4.4.2",
    "lodash.isequal": "^4.5.0",
    "lodash.throttle": "^4.1.1",
-    "maplibre-gl": "^6.4.1",
+    "maplibre-gl": "^5.24.0",
    "maputnik-design": "github:maputnik/design#172b06c",
    "ol": "^10.10.0",
    "ol-mapbox-style": "^13.4.2",
-    "pmtiles": "^4.5.0",
+    "pmtiles": "^4.4.1",
    "prop-types": "^15.8.1",
-    "react": "^19.2.8",
+    "react": "^19.2.7",
    "react-accessible-accordion": "^5.0.1",
    "react-aria-menubutton": "^8.0.0",
    "react-aria-modal": "^5.0.2",
    "react-collapse": "^5.1.1",
    "react-color": "^2.19.3",
-    "react-dom": "^19.2.8",
-    "react-i18next": "^17.0.11",
+    "react-dom": "^19.2.7",
+    "react-i18next": "^17.0.8",
    "react-icons": "^5.7.0",
    "react-markdown": "^10.1.0",
    "reconnecting-websocket": "^4.4.0",
@@ -99,7 +98,6 @@
    }
  },
  "devDependencies": {
-    "@eslint/js": "^10.0.1",
    "@istanbuljs/nyc-config-typescript": "^1.0.2",
    "@playwright/test": "^1.62.1",
    "@stylistic/eslint-plugin": "^5.10.0",
@@ -116,36 +114,33 @@
    "@types/lodash.isequal": "^4.5.8",
    "@types/lodash.throttle": "^4.1.9",
    "@types/randomcolor": "^0.5.9",
-    "@types/react": "^19.2.18",
+    "@types/react": "^19.2.17",
    "@types/react-aria-menubutton": "^6.2.14",
    "@types/react-aria-modal": "^5.0.0",
    "@types/react-collapse": "^5.0.4",
    "@types/react-color": "^3.0.13",
-    "@types/react-dom": "^19.2.4",
+    "@types/react-dom": "^19.2.3",
    "@types/string-hash": "^1.1.3",
    "@types/wicg-file-system-access": "^2023.10.7",
-    "@vitejs/plugin-react": "^6.0.5",
-    "@vitest/coverage-v8": "^4.1.11",
+    "@vitejs/plugin-react": "5.2",
+    "@vitest/coverage-v8": "^4.1.10",
    "cors": "^2.8.6",
-    "eslint": "^10.8.1",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^7.1.1",
-    "eslint-plugin-react-refresh": "^0.5.4",
-    "i18next-cli": "^1.71.0",
+    "i18next-cli": "^1.67.4",
    "istanbul": "^0.4.5",
    "istanbul-lib-coverage": "^3.2.2",
    "nyc": "^18.0.0",
-    "postcss": "^8.5.26",
+    "oxlint": "^1.91.0",
+    "oxlint-tsgolint": "^7.0.2005",
+    "postcss": "^8.5.25",
    "react-hot-loader": "^4.13.1",
    "sass": "^1.102.0",
    "stylelint": "^17.14.1",
    "stylelint-config-recommended-scss": "^17.0.1",
    "stylelint-scss": "^7.2.0",
-    "typescript": "^6.0.3",
-    "typescript-eslint": "^8.67.0",
-    "uuid": "^14.0.2",
-    "vite": "^8.2.1",
+    "typescript": "^7.0.2",
+    "uuid": "^14.0.1",
+    "vite": "^7.3.2",
    "vite-plugin-istanbul": "^9.0.1",
-    "vitest": "^4.1.11"
+    "vitest": "^4.1.10"
  }
 }
@@ -1,6 +1,7 @@
 import React from "react";
 import Color from "color";
-import {ChromePicker, type ColorResult} from "react-color";
+import ChromePicker from "react-color/lib/components/chrome/Chrome";
+import {type ColorResult} from "react-color";
 import lodash from "lodash";

 function formatColor(color: ColorResult): string {
@@ -1,7 +1,6 @@
 import React from "react";
 import {createRoot} from "react-dom/client";
-import * as MapLibreGl from "maplibre-gl";
-import {type LayerSpecification, type LngLat, type Map, type MapOptions, type SourceSpecification, type StyleSpecification} from "maplibre-gl";
+import MapLibreGl, {type LayerSpecification, type LngLat, type Map, type MapOptions, type SourceSpecification, type StyleSpecification} from "maplibre-gl";
 import MaplibreInspect from "@maplibre/maplibre-gl-inspect";
 import colors from "@maplibre/maplibre-gl-inspect/lib/colors";
 import { FeatureLayerPopup as MapMaplibreGlLayerPopup } from "./MapMaplibreGlLayerPopup";
@@ -11,7 +10,7 @@ import { ZoomControl } from "../libs/zoomcontrol";
 import { type HighlightedLayer, colorHighlightedLayer } from "../libs/highlight";
 import "maplibre-gl/dist/maplibre-gl.css";
 import "../maplibregl.css";
-import "../libs/maplibre-init";
+import "../libs/maplibre-rtl";
 import MaplibreGeocoder, { type MaplibreGeocoderApi, type MaplibreGeocoderApiConfig } from "@maplibre/maplibre-gl-geocoder";
 import "@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css";
 import { withTranslation, type WithTranslation } from "react-i18next";
@@ -239,7 +238,7 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
    });

    map.on("data", e => {
-      if(e.dataType !== "source" || !e.tile) return;
+      if(e.dataType !== "tile") return;
      this.props.onDataChange!({
        map: this.state.map
      });
@@ -59,6 +59,7 @@ class ModalExportInternal extends React.Component<ModalExportInternalProps> {
  <meta charset="utf-8" />
  <title>${htmlTitle}</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
+  <script src="https://unpkg.com/maplibre-gl@${MAPLIBRE_GL_VERSION}/dist/maplibre-gl.js"></script>
  <link href="https://unpkg.com/maplibre-gl@${MAPLIBRE_GL_VERSION}/dist/maplibre-gl.css" rel="stylesheet" />
  <style>
    body { margin: 0; padding: 0; }
@@ -67,9 +68,8 @@ class ModalExportInternal extends React.Component<ModalExportInternalProps> {
 </head>
 <body>
  <div id="map"></div>
-  <script type="module">
-      import {Map} from 'https://unpkg.com/maplibre-gl@${MAPLIBRE_GL_VERSION}/dist/maplibre-gl.mjs';
-      const map = new Map({
+  <script>
+      const map = new maplibregl.Map({
         container: 'map',
         style: ${tokenStyle},
      });
@@ -1,5 +0,0 @@
-import { setRTLTextPlugin, setWorkerUrl } from "maplibre-gl";
-import workerUrl from "maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url";
-
-setWorkerUrl(workerUrl);
-setRTLTextPlugin(`${import.meta.env.BASE_URL}mapbox-gl-rtl-text.js`, false);
@@ -0,0 +1,3 @@
+import MapLibreGl from "maplibre-gl";
+
+MapLibreGl.setRTLTextPlugin("https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.2.3/mapbox-gl-rtl-text.min.js", false);
@@ -32,6 +32,8 @@ export class ZoomControl {

  addEventListeners (){
    this._map!.on("render", () => this.updateZoomLevel());
+    this._map!.on("zoomIn", () => this.updateZoomLevel());
+    this._map!.on("zoomOut", () => this.updateZoomLevel());
  }

  onRemove() {
@@ -214,7 +214,7 @@

 // SPACE HELPER
 .maputnik-space {
-  flex-grow: 1;
+  @include mixins.vendor-prefix(flex-grow, 1);
 }

 // MESSAGE PANEL
@@ -101,7 +101,8 @@
 .maputnik-select {
  @extend .maputnik-input !optional; /* stylelint-disable-line */

-  appearance: none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
  background: vars.$color-gray url("#{vars.$icon-down-arrow}") right center no-repeat;
  color: vars.$color-white;
  background-position: calc(100% - 2px) center;
@@ -74,6 +74,7 @@
    line-height: 1.3;
    max-height: 50px;
    opacity: 1;
+    -webkit-transition: opacity 600ms, visibility 600ms;
    transition: opacity 600ms, visibility 600ms;

    &:focus-within {
@@ -1,9 +1,21 @@
+@mixin vendor-prefix($name, $argument) {
+  -webkit-#{$name}: #{$argument};
+  -ms-#{$name}: #{$argument};
+  -moz-#{$name}: #{$argument};
+  -o-#{$name}: #{$argument};
+  #{$name}: #{$argument};
+}
+
@mixin flex-row {
  display: flex;
-  flex-direction: row;
+  display: -ms-flexbox;
+
+  @include vendor-prefix(flex-direction, row);
 }

@mixin flex-column {
  display: flex;
-  flex-direction: column;
+  display: -ms-flexbox;
+
+  @include vendor-prefix(flex-direction, column);
 }
@@ -7,7 +7,7 @@

  &::-webkit-scrollbar-thumb {
    border-radius: 6px;
-    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #666;
    padding-left: 2px;
    padding-right: 2px;
@@ -3,7 +3,7 @@
      "target": "ES2020",
      "useDefineForClassFields": true,
      "lib": ["ES2020", "DOM", "DOM.Iterable"],
-      "types": ["geojson", "@types/wicg-file-system-access", "node", "vite/client"],
+      "types": ["geojson", "@types/wicg-file-system-access", "node"],
      "module": "ESNext",
      "skipLibCheck": true,

@@ -7,10 +7,7 @@ export default defineConfig(({ mode }) => ({
    port: 8888,
  },
  build: {
-    sourcemap: true,
-    rolldownOptions: {
-      checks: { invalidAnnotation: false },
-    },
+    sourcemap: true
  },
  plugins: [
    react(),
@@ -20,11 +17,8 @@ export default defineConfig(({ mode }) => ({
      forceBuildInstrument: true, // Instrument the source so e2e runs can collect coverage
    }),
  ],
-  optimizeDeps: {
-    exclude: ["maplibre-gl/dist/maplibre-gl-worker.mjs"],
-  },
  base: mode === "desktop" ? "/" : "/maputnik/",
  define: {
-    global: "globalThis"
+    global: "window"
  },
 }));