Update all dependencies

CHANGELOG.md

@@ -2,9 +2,13 @@
 
 ### ✨ 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
 - _...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

package.json

@@ -30,7 +30,7 @@
     "@codemirror/lint": "^6.9.7",
     "@codemirror/state": "^6.7.1",
     "@codemirror/theme-one-dark": "^6.1.3",
-    "@codemirror/view": "^6.43.8",
+    "@codemirror/view": "^6.43.9",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
@@ -59,20 +59,20 @@
     "lodash.get": "^4.4.2",
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
-    "maplibre-gl": "^5.24.0",
+    "maplibre-gl": "^6.4.1",
     "maputnik-design": "github:maputnik/design#172b06c",
     "ol": "^10.10.0",
     "ol-mapbox-style": "^13.4.2",
     "pmtiles": "^4.5.0",
     "prop-types": "^15.8.1",
-    "react": "^19.2.7",
+    "react": "^19.2.8",
     "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.7",
+    "react-dom": "^19.2.8",
-    "react-i18next": "^17.0.8",
+    "react-i18next": "^17.0.11",
     "react-icons": "^5.7.0",
     "react-markdown": "^10.1.0",
     "reconnecting-websocket": "^4.4.0",
@@ -115,22 +115,22 @@
     "@types/lodash.isequal": "^4.5.8",
     "@types/lodash.throttle": "^4.1.9",
     "@types/randomcolor": "^0.5.9",
-    "@types/react": "^19.2.17",
+    "@types/react": "^19.2.18",
     "@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.3",
+    "@types/react-dom": "^19.2.4",
     "@types/string-hash": "^1.1.3",
     "@types/wicg-file-system-access": "^2023.10.7",
-    "@vitejs/plugin-react": "5.2",
+    "@vitejs/plugin-react": "^6.0.5",
-    "@vitest/coverage-v8": "^4.1.10",
+    "@vitest/coverage-v8": "^4.1.11",
     "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.3",
+    "eslint-plugin-react-refresh": "^0.5.4",
-    "i18next-cli": "^1.69.0",
+    "i18next-cli": "^1.71.0",
     "istanbul": "^0.4.5",
     "istanbul-lib-coverage": "^3.2.2",
     "nyc": "^18.0.0",
@@ -142,9 +142,9 @@
     "stylelint-scss": "^7.2.0",
     "typescript": "^6.0.3",
     "typescript-eslint": "^8.67.0",
-    "uuid": "^14.0.1",
+    "uuid": "^14.0.2",
     "vite": "^8.2.1",
     "vite-plugin-istanbul": "^9.0.1",
-    "vitest": "^4.1.10"
+    "vitest": "^4.1.11"
   }
 }

src/components/InputColor.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import Color from "color";
-import ChromePicker from "react-color/lib/components/chrome/Chrome";
+import {ChromePicker, type ColorResult} from "react-color";
-import {type ColorResult} from "react-color";
 import lodash from "lodash";
 
 function formatColor(color: ColorResult): string {

src/components/MapMaplibreGl.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import {createRoot} from "react-dom/client";
-import MapLibreGl, {type LayerSpecification, type LngLat, type Map, type MapOptions, type SourceSpecification, type StyleSpecification} from "maplibre-gl";
+import * as MapLibreGl from "maplibre-gl";
+import {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";
@@ -10,7 +11,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-rtl";
+import "../libs/maplibre-init";
 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";
@@ -238,7 +239,7 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
     });
 
     map.on("data", e => {
-      if(e.dataType !== "tile") return;
+      if(e.dataType !== "source" || !e.tile) return;
       this.props.onDataChange!({
         map: this.state.map
       });

src/components/modals/ModalExport.tsx

@@ -59,7 +59,6 @@ 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; }
@@ -68,8 +67,9 @@ class ModalExportInternal extends React.Component<ModalExportInternalProps> {
 </head>
 <body>
   <div id="map"></div>
-  <script>
+  <script type="module">
-      const map = new maplibregl.Map({
+      import {Map} from 'https://unpkg.com/maplibre-gl@${MAPLIBRE_GL_VERSION}/dist/maplibre-gl.mjs';
+      const map = new Map({
          container: 'map',
          style: ${tokenStyle},
       });

src/libs/maplibre-init.ts

@@ -0,0 +1,15 @@
+import { setRTLTextPlugin, setWorkerUrl } from "maplibre-gl";
+// maplibre-gl v6 is ESM only and cannot locate its worker through a bundler's
+// module graph, so every consumer has to point it at the worker once.
+// `?worker&url` (rather than plain `?url`) routes the file through Vite's worker
+// pipeline, which emits a self-contained chunk including its `maplibre-gl-shared`
+// sibling. See https://maplibre.org/maplibre-gl-js/docs/#vite
+import workerUrl from "maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url";
+
+// Order matters: registering the RTL plugin spins up the worker pool, so the
+// worker URL has to be in place before it.
+setWorkerUrl(workerUrl);
+
+// Served out of @mapbox/mapbox-gl-rtl-text via `publicDir` in vite.config.ts, so
+// the version comes from package.json rather than a pinned CDN URL.
+setRTLTextPlugin(`${import.meta.env.BASE_URL}mapbox-gl-rtl-text.js`, false);

src/libs/maplibre-rtl.ts

@@ -1,3 +0,0 @@
-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,8 +32,6 @@ export class ZoomControl {
 
   addEventListeners (){
     this._map!.on("render", () => this.updateZoomLevel());
-    this._map!.on("zoomIn", () => this.updateZoomLevel());
-    this._map!.on("zoomOut", () => this.updateZoomLevel());
   }
 
   onRemove() {

tsconfig.json

@@ -3,7 +3,7 @@
       "target": "ES2020",
       "useDefineForClassFields": true,
       "lib": ["ES2020", "DOM", "DOM.Iterable"],
-      "types": ["geojson", "@types/wicg-file-system-access", "node"],
+      "types": ["geojson", "@types/wicg-file-system-access", "node", "vite/client"],
       "module": "ESNext",
       "skipLibCheck": true,
 

vite.config.ts

@@ -1,13 +1,29 @@
+import path from "node:path";
+import { createRequire } from "node:module";
 import react from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
 import istanbul from "vite-plugin-istanbul";
 
+// maplibre fetches the RTL text plugin from this URL inside its worker and evals
+// it. Serving @mapbox/mapbox-gl-rtl-text's dist directory (which holds just the
+// prebuilt UMD bundle) keeps the plugin's version in package.json rather than
+// pinned in a CDN link. Its ESM entry is not usable here: it imports a bare .wasm
+// file that Vite would emit as a URL instead of an init function.
+const require = createRequire(import.meta.url);
+const publicDir = path.join(
+  path.dirname(require.resolve("@mapbox/mapbox-gl-rtl-text")),
+  "../dist"
+);
+
 export default defineConfig(({ mode }) => ({
   server: {
     port: 8888,
   },
   build: {
-    sourcemap: true
+    sourcemap: true,
+    rolldownOptions: {
+      checks: { invalidAnnotation: false },
+    },
   },
   plugins: [
     react(),
@@ -17,8 +33,12 @@ export default defineConfig(({ mode }) => ({
       forceBuildInstrument: true, // Instrument the source so e2e runs can collect coverage
     }),
   ],
+  optimizeDeps: {
+    exclude: ["maplibre-gl/dist/maplibre-gl-worker.mjs"],
+  },
+  publicDir,
   base: mode === "desktop" ? "/" : "/maputnik/",
   define: {
-    global: "window"
+    global: "globalThis"
   },
 }));