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

Co-authored-by: birkskyum <74932975+birkskyum@users.noreply.github.com>

.github/workflows/codeql-analysis.yml

@@ -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

.oxlintrc.json

@@ -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"
+      }
+    }
+  ]
+}

AGENTS.md

@@ -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

CHANGELOG.md

@@ -2,14 +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
-- The sidebar can now be resized, both as a whole and in the split between the layer list and the layer editor
+- 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

e2e/playwright-helper.ts

@@ -122,8 +122,6 @@ export class Assertable<T> {
   // Value assertions (auto-retrying for Query targets).
   shouldEqual = (value: any) => this.assertValue((actual) => expect(actual).toBe(value));
 
-  shouldBeGreaterThan = (value: number) => this.assertValue((actual) => expect(actual).toBeGreaterThan(value));
-
   shouldInclude = (value: any) =>
     this.assertValue((actual) => {
       if (typeof value === "object" && value !== null) {
@@ -351,15 +349,6 @@ export class PlaywrightHelper {
       await this.page.mouse.up();
     },
 
-    /** Presses at the centre of an element and drags it by the given offset. */
-    dragBy: async (testId: string, deltaX: number, deltaY = 0) => {
-      const { x, y } = await centerOf(this.testId(testId));
-      await this.page.mouse.move(x, y);
-      await this.page.mouse.down();
-      await this.page.mouse.move(x + deltaX, y + deltaY, { steps: 10 });
-      await this.page.mouse.up();
-    },
-
     clickCenter: async (testId: string) => {
       const { x, y } = await centerOf(this.testId(testId));
       await this.page.mouse.move(x, y);
@@ -457,13 +446,6 @@ export class PlaywrightHelper {
 
     inputValue: (testId: string) => new Query<string>(() => this.testId(testId).first().inputValue()),
 
-    elementWidth: (testId: string) =>
-      new Query<number>(async () => {
-        const box = await this.testId(testId).first().boundingBox();
-        if (!box) throw new Error(`Element "${testId}" has no bounding box`);
-        return box.width;
-      }),
-
     elementsText: (testId: string) => new Query<string>(() => this.testId(testId).first().innerText()),
 
     locationHash: () => new Query<string>(async () => new URL(this.page.url()).hash),

e2e/sidebar-resize.spec.ts

@@ -1,27 +0,0 @@
-import { beforeEach, describe, test } from "./utils/fixtures";
-import { MaputnikDriver } from "./maputnik-driver";
-
-describe("sidebar resize", () => {
-  const { given, get, when, then } = new MaputnikDriver();
-
-  beforeEach(async () => {
-    await given.setupMockBackedResponses();
-    await when.setStyle("layer");
-  });
-
-  test("dragging the outer handle widens the sidebar", async () => {
-    const initialWidth = await get.elementWidth("sidebar-panel").get();
-
-    await when.dragBy("sidebar-resize-handle", 100);
-
-    await then(get.elementWidth("sidebar-panel")).shouldBeGreaterThan(initialWidth + 50);
-  });
-
-  test("dragging the inner handle widens the layer list", async () => {
-    const initialWidth = await get.elementWidth("layer-list-panel").get();
-
-    await when.dragBy("inner-resize-handle", 50);
-
-    await then(get.elementWidth("layer-list-panel")).shouldBeGreaterThan(initialWidth + 20);
-  });
-});

eslint.config.js

@@ -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
-  }
-}
-);

package.json

@@ -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,23 +59,22 @@
     "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",
-    "react-resizable-panels": "^4.11.0",
     "reconnecting-websocket": "^4.4.0",
     "slugify": "^1.6.9",
     "string-hash": "^1.1.3",
@@ -100,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",
@@ -117,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"
   }
 }

src/components/AppLayout.tsx

@@ -1,23 +1,9 @@
-import React, { useEffect, useState } from "react";
-import { Group, Panel, Separator, useDefaultLayout } from "react-resizable-panels";
+import React from "react";
 import { ScrollContainer } from "./ScrollContainer";
-import { useTranslation } from "react-i18next";
+import { type WithTranslation, withTranslation } from "react-i18next";
 import { IconContext } from "react-icons";
 
-// Keep these in sync with $layout-list-width/$layout-editor-width in _vars.scss
-const DEFAULT_LIST_WIDTH = 200;
-const DEFAULT_DRAWER_WIDTH = 370;
-const DEFAULT_SIDEBAR_WIDTH = DEFAULT_LIST_WIDTH + DEFAULT_DRAWER_WIDTH;
-const PANEL_STYLE: React.CSSProperties = { overflow: "hidden" };
-
-const SIDEBAR_LAYOUT_ID = "maputnik:sidebar-layout";
-const SIDEBAR_INNER_LAYOUT_ID = "maputnik:sidebar-inner-layout";
-const SIDEBAR_PANEL_ID = "sidebar";
-const MAP_PANEL_ID = "map";
-const LIST_PANEL_ID = "list";
-const DRAWER_PANEL_ID = "drawer";
-
-type AppLayoutProps = {
+type AppLayoutInternalProps = {
   toolbar: React.ReactElement
   layerList: React.ReactElement
   layerEditor?: React.ReactElement
@@ -25,108 +11,43 @@ type AppLayoutProps = {
   map: React.ReactElement
   bottom?: React.ReactElement
   modals?: React.ReactNode
-};
+} & WithTranslation;
 
-export const AppLayout: React.FC<AppLayoutProps> = (props) => {
-  const { t, i18n } = useTranslation();
+class AppLayoutInternal extends React.Component<AppLayoutInternalProps> {
 
-  const sidebarLayout = useDefaultLayout({
-    id: SIDEBAR_LAYOUT_ID,
-    panelIds: [SIDEBAR_PANEL_ID, MAP_PANEL_ID],
-  });
-  const innerLayout = useDefaultLayout({
-    id: SIDEBAR_INNER_LAYOUT_ID,
-    panelIds: [LIST_PANEL_ID, DRAWER_PANEL_ID],
-  });
+  render() {
+    document.body.dir = this.props.i18n.dir();
 
-  // The bottom panel is position: fixed, so it can't be a flex sibling of the
-  // map panel; it follows the sidebar through this custom property instead.
-  const [sidebarWidth, setSidebarWidth] = useState(DEFAULT_SIDEBAR_WIDTH);
-
-  useEffect(() => {
-    document.body.dir = i18n.dir();
-  }, [i18n, i18n.language]);
-
-  return <IconContext.Provider value={{size: "14px"}}>
-    <div
-      className="maputnik-layout"
-      style={{"--sidebar-width": `${sidebarWidth}px`} as React.CSSProperties}
-    >
-      {props.toolbar}
-      <div className="maputnik-layout-main">
-        <Group
-          className="maputnik-layout-panels"
-          orientation="horizontal"
-          id={SIDEBAR_LAYOUT_ID}
-          defaultLayout={sidebarLayout.defaultLayout}
-          onLayoutChanged={sidebarLayout.onLayoutChanged}
-        >
-          <Panel
-            id={SIDEBAR_PANEL_ID}
-            data-wd-key="sidebar-panel"
-            className={props.codeEditor ? "maputnik-layout-code-editor" : "maputnik-layout-sidebar"}
-            style={PANEL_STYLE}
-            defaultSize={`${DEFAULT_SIDEBAR_WIDTH}px`}
-            minSize="280px"
-            onResize={({inPixels}) => setSidebarWidth(inPixels)}
-          >
-            {props.codeEditor && <ScrollContainer>
-              {props.codeEditor}
+    return <IconContext.Provider value={{size: "14px"}}>
+      <div className="maputnik-layout">
+        {this.props.toolbar}
+        <div className="maputnik-layout-main">
+          {this.props.codeEditor && <div className="maputnik-layout-code-editor">
+            <ScrollContainer>
+              {this.props.codeEditor}
             </ScrollContainer>
-            }
-            {!props.codeEditor && <Group
-              className="maputnik-layout-sidebar-panels"
-              orientation="horizontal"
-              id={SIDEBAR_INNER_LAYOUT_ID}
-              defaultLayout={innerLayout.defaultLayout}
-              onLayoutChanged={innerLayout.onLayoutChanged}
-            >
-              <Panel
-                id={LIST_PANEL_ID}
-                data-wd-key="layer-list-panel"
-                className="maputnik-layout-list"
-                style={PANEL_STYLE}
-                defaultSize={`${DEFAULT_LIST_WIDTH}px`}
-                minSize="100px"
-              >
-                {props.layerList}
-              </Panel>
-              <Separator
-                className="maputnik-layout-resize-handle"
-                data-wd-key="inner-resize-handle"
-                title={t("Drag to resize the layer list")}
-                aria-label={t("Drag to resize the layer list")}
-              />
-              <Panel
-                id={DRAWER_PANEL_ID}
-                className="maputnik-layout-drawer"
-                style={PANEL_STYLE}
-                defaultSize={`${DEFAULT_DRAWER_WIDTH}px`}
-                minSize="150px"
-              >
-                <ScrollContainer>
-                  {props.layerEditor}
-                </ScrollContainer>
-              </Panel>
-            </Group>
-            }
-          </Panel>
-          <Separator
-            className="maputnik-layout-resize-handle"
-            data-wd-key="sidebar-resize-handle"
-            title={t("Drag to resize the sidebar")}
-            aria-label={t("Drag to resize the sidebar")}
-          />
-          <Panel id={MAP_PANEL_ID} className="maputnik-layout-map" style={PANEL_STYLE} minSize="200px">
-            {props.map}
-          </Panel>
-        </Group>
+          </div>
+          }
+          {!this.props.codeEditor && <>
+            <div className="maputnik-layout-list">
+              {this.props.layerList}
+            </div>
+            <div className="maputnik-layout-drawer">
+              <ScrollContainer>
+                {this.props.layerEditor}
+              </ScrollContainer>
+            </div>
+          </>}
+          {this.props.map}
+        </div>
+        {this.props.bottom && <div className="maputnik-layout-bottom">
+          {this.props.bottom}
+        </div>
+        }
+        {this.props.modals}
       </div>
-      {props.bottom && <div className="maputnik-layout-bottom">
-        {props.bottom}
-      </div>
-      }
-      {props.modals}
-    </div>
-  </IconContext.Provider>;
-};
+    </IconContext.Provider>;
+  }
+}
+
+export const AppLayout = withTranslation()(AppLayoutInternal);

src/components/InputColor.tsx

@@ -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 {

src/components/MapMaplibreGl.tsx

@@ -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
       });

src/components/modals/ModalExport.tsx

@@ -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},
       });

src/libs/maplibre-init.ts

@@ -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);

src/libs/maplibre-rtl.ts

@@ -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);

src/libs/zoomcontrol.ts

@@ -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() {

src/locales/de/translation.json

@@ -54,8 +54,6 @@
   "Delete expression": "Ausdruck löschen",
   "Delete filter block": "Filterblock löschen",
   "Deuteranopia filter": "Deuteranopie-Filter",
-  "Drag to resize the layer list": "Ziehen, um die Ebenenliste zu skalieren",
-  "Drag to resize the sidebar": "Ziehen, um die Seitenleiste zu skalieren",
   "Duplicate": "Duplizieren",
   "Encoding": "Kodierung",
   "Enter URL...": "URL eingeben...",

src/locales/fr/translation.json

@@ -54,8 +54,6 @@
   "Delete expression": "Supprimer l'expression",
   "Delete filter block": "Supprimer le bloc de filtre",
   "Deuteranopia filter": "Filtre Deutéranopie",
-  "Drag to resize the layer list": "Glisser pour redimensionner la liste des calques",
-  "Drag to resize the sidebar": "Glisser pour redimensionner la barre latérale",
   "Duplicate": "Dupliquer",
   "Encoding": "Encodage",
   "Enter URL...": "Entrez l'URL...",

src/locales/he/translation.json

@@ -54,8 +54,6 @@
   "Delete expression": "מחיקת ביטוי",
   "Delete filter block": "מחיקת גוש מסנן",
   "Deuteranopia filter": "Deuteranopia filter",
-  "Drag to resize the layer list": "יש לגרור כדי לשנות את גודל רשימת השכבות",
-  "Drag to resize the sidebar": "יש לגרור כדי לשנות את גודל סרגל הצד",
   "Duplicate": "שכפול",
   "Encoding": "קידוד",
   "Enter URL...": "הכנסו כתובת",

src/locales/it/translation.json

@@ -54,8 +54,6 @@
   "Delete expression": "Elimina espressione",
   "Delete filter block": "Elimina blocco filtro",
   "Deuteranopia filter": "Filtro deuteranopia",
-  "Drag to resize the layer list": "Trascina per ridimensionare l'elenco dei livelli",
-  "Drag to resize the sidebar": "Trascina per ridimensionare la barra laterale",
   "Duplicate": "Duplica",
   "Encoding": "Codifica",
   "Enter URL...": "Inserisci URL...",

src/locales/ja/translation.json

@@ -54,8 +54,6 @@
   "Delete expression": "式を削除",
   "Delete filter block": "フィルタブロックを削除",
   "Deuteranopia filter": "緑色盲フィルタ",
-  "Drag to resize the layer list": "ドラッグしてレイヤーリストのサイズを変更",
-  "Drag to resize the sidebar": "ドラッグしてサイドバーのサイズを変更",
   "Duplicate": "複製",
   "Encoding": "エンコーディング",
   "Enter URL...": "URLを入力",

src/locales/ko/translation.json

@@ -54,8 +54,6 @@
   "Delete expression": "표현식 삭제",
   "Delete filter block": "필터 블록 삭제",
   "Deuteranopia filter": "녹색맹 필터",
-  "Drag to resize the layer list": "드래그하여 레이어 목록 크기 조정",
-  "Drag to resize the sidebar": "드래그하여 사이드바 크기 조정",
   "Duplicate": "복제",
   "Encoding": "인코딩",
   "Enter URL...": "URL 입력...",

src/locales/tr/translation.json

@@ -55,8 +55,6 @@
   "Delete filter block": "Filtre bloğunu sil",
   "Deuteranopia filter": "Döteranopi filtresi",
   "Drag and drop a style JSON file here or click to browse": "Bir stil JSON dosyasını buraya sürükleyip bırakın veya göz atmak için tıklayın",
-  "Drag to resize the layer list": "Katman listesini yeniden boyutlandırmak için sürükleyin",
-  "Drag to resize the sidebar": "Kenar çubuğunu yeniden boyutlandırmak için sürükleyin",
   "Duplicate": "Kopyala",
   "Encoding": "Kodlama",
   "Enter URL...": "URL girin...",

src/locales/zh/translation.json

@@ -54,8 +54,6 @@
   "Delete expression": "删除表达式",
   "Delete filter block": "删除过滤器块",
   "Deuteranopia filter": "绿色盲滤镜",
-  "Drag to resize the layer list": "拖动以调整图层列表大小",
-  "Drag to resize the sidebar": "拖动以调整侧边栏大小",
   "Duplicate": "复制",
   "Encoding": "编码",
   "Enter URL...": "输入URL...",

src/styles/_components.scss

@@ -6,8 +6,7 @@
 .maputnik-map__container {
   background: white;
   display: flex;
-  width: 100%;
-  height: 100%;
+  width: vars.$layout-map-width;
 
   &--error {
     align-items: center;
@@ -215,7 +214,7 @@
 
 // SPACE HELPER
 .maputnik-space {
-  flex-grow: 1;
+  @include mixins.vendor-prefix(flex-grow, 1);
 }
 
 // MESSAGE PANEL

src/styles/_input.scss

@@ -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;

src/styles/_layer.scss

@@ -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 {

src/styles/_layout.scss

@@ -13,9 +13,6 @@
 
 //APP LAYOUT
 .maputnik-layout {
-  // Kept up to date by AppLayout as the sidebar is resized.
-  --sidebar-width: #{vars.$layout-list-width + vars.$layout-editor-width};
-
   font-family: vars.$font-family;
   color: vars.$color-white;
 
@@ -31,76 +28,31 @@
     display: flex;
   }
 
-  // The resizable panel group filling the main area.
-  &-panels {
-    flex: 1;
-    min-width: 0;
-    height: 100%;
+  &-list {
+    width: 200px;
+    background-color: vars.$color-black;
   }
 
-  &-sidebar-panels,
-  &-sidebar,
-  &-code-editor,
-  &-list,
-  &-drawer,
-  &-map {
-    height: 100%;
+  &-drawer {
+    width: 370px;
+    background-color: vars.$color-black;
     // scroll-container is position: absolute
     position: relative;
   }
 
-  &-sidebar,
-  &-code-editor,
-  &-list,
-  &-drawer {
+  &-code-editor {
+    width: 570px;
     background-color: vars.$color-black;
-  }
-
-  &-resize-handle {
-    width: 5px;
-    background-color: transparent;
+    // scroll-container is position: absolute
     position: relative;
-    z-index: 5;
-    transition: background-color 0.15s ease;
-
-    &:hover,
-    &:active,
-    &:focus-visible {
-      background-color: rgba(vars.$color-lowgray, 0.5);
-    }
-
-    // The separator is keyboard resizable, so it needs a visible focus ring.
-    &:focus-visible {
-      outline: #8e8e8e auto 1px;
-    }
-
-    &::after {
-      content: "";
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      width: 3px;
-      height: 30px;
-      border-radius: 2px;
-      background-color: vars.$color-lowgray;
-      opacity: 0;
-      transition: opacity 0.15s ease;
-    }
-
-    &:hover::after,
-    &:active::after,
-    &:focus-visible::after {
-      opacity: 0.7;
-    }
   }
 
   &-bottom {
     position: fixed;
     bottom: 0;
+    right: 0;
     z-index: 10;
-    inset-inline-start: var(--sidebar-width);
-    inset-inline-end: 0;
+    width: vars.$layout-map-width;
     background-color: vars.$color-black;
   }
 }

src/styles/_mixins.scss

@@ -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);
 }

src/styles/_scrollbar.scss

@@ -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;

src/styles/_vars.scss

@@ -23,6 +23,7 @@ $toolbar-offset: 0;
 
 $layout-list-width: 200px;
 $layout-editor-width: 370px;
+$layout-map-width: calc(100% - #{$layout-list-width + $layout-editor-width});
 
 // 'menu-down' from 'https://materialdesignicons.com/'
 // See <https://github.com/Templarian/MaterialDesign/blob/master/LICENSE>

tsconfig.json

@@ -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,
 

vite.config.ts

@@ -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"
   },
 }));