build(deps): migrate location maps to MapLibre 6

CHANGELOG.md

@@ -23,6 +23,9 @@ The format is based on Keep a Changelog and the project follows Semantic Version
 
 ### Changed
 
+- Upgrade the location map to MapLibre GL JS 6 while keeping its worker bundled
+  locally for Chromium and Firefox extension pages. Maps now require WebGL2.
+
 - The interface language can be chosen in Settings. Automatic still follows the
   browser language. Popup, sidebar, and Settings update without a reload.
 - Language choices show the English name and the name from the active translation.

package.json

@@ -92,7 +92,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "maplibre-gl": "^5.24.0",
+    "maplibre-gl": "^6.4.1",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "sonner": "^2.0.8",

src/ui/options/components/map/ProfileDraftMap.tsx

@@ -1,6 +1,6 @@
 import "maplibre-gl/dist/maplibre-gl.css";
 
-import type maplibreglType from "maplibre-gl";
+import type * as maplibreglType from "maplibre-gl";
 import type { AddLayerObject, GeoJSONSource } from "maplibre-gl";
 import type { MutableRefObject, ReactNode } from "react";
 import { useEffect, useRef } from "react";

src/ui/options/components/map/maplibre-csp.test.ts

@@ -4,14 +4,12 @@ const { setWorkerUrl } = vi.hoisted(() => ({
   setWorkerUrl: vi.fn(),
 }));
 
-vi.mock("maplibre-gl/dist/maplibre-gl-csp.js", () => ({
-  default: {
-    setWorkerUrl,
-  },
+vi.mock("maplibre-gl", () => ({
+  setWorkerUrl,
 }));
 
-vi.mock("maplibre-gl/dist/maplibre-gl-csp-worker.js?url", () => ({
-  default: "/assets/maplibre-gl-csp-worker.js",
+vi.mock("maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url", () => ({
+  default: "/assets/maplibre-gl-worker.js",
 }));
 
 describe("maplibre-csp", () => {
@@ -21,17 +19,17 @@ describe("maplibre-csp", () => {
     vi.unstubAllGlobals();
   });
 
-  it("configures the CSP worker against the current extension page origin", async () => {
-    vi.stubGlobal(
-      "location",
-      new URL("chrome-extension://test/src/ui/options/index.html"),
-    );
+  it.each(["chrome-extension://test", "moz-extension://test"])(
+    "configures the bundled worker against the %s page origin",
+    async (origin) => {
+      vi.stubGlobal("location", new URL(`${origin}/src/ui/options/index.html`));
 
-    const module = await import("@/ui/options/components/map/maplibre-csp");
+      const module = await import("@/ui/options/components/map/maplibre-csp");
 
-    expect(setWorkerUrl).toHaveBeenCalledWith(
-      "chrome-extension://test/assets/maplibre-gl-csp-worker.js",
-    );
-    expect(module.default).toHaveProperty("setWorkerUrl", setWorkerUrl);
-  });
+      expect(setWorkerUrl).toHaveBeenCalledWith(
+        `${origin}/assets/maplibre-gl-worker.js`,
+      );
+      expect(module.default).toHaveProperty("setWorkerUrl", setWorkerUrl);
+    },
+  );
 });

src/ui/options/components/map/maplibre-csp.ts

@@ -1,8 +1,6 @@
-import type maplibreglType from "maplibre-gl";
-import maplibreWorkerUrl from "maplibre-gl/dist/maplibre-gl-csp-worker.js?url";
-import maplibreglRuntime from "maplibre-gl/dist/maplibre-gl-csp.js";
-
-const maplibregl = maplibreglRuntime as typeof maplibreglType;
+import * as maplibregl from "maplibre-gl";
+// Bundle the worker's shared ESM imports too; a plain ?url would leave them missing.
+import maplibreWorkerUrl from "maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url";
 
 const resolvedWorkerUrl =
   typeof globalThis.location?.href === "string"