feat: upgrade maplibre-gl to v2 (aws-amplify#160)

BREAKING CHANGE: removed peer dep on maplibre-gl v1 * Bump maplibre to v2 * Update type names for v2 * Update tests to work with maplibre v2 * Make style property optional for createMap * Add workarounds for JSDOM tests * Cleanup spacing and single quotes
thaddmt · Jul 7, 2022 · 05a552c · 05a552c
1 parent fb4dfd0
commit 05a552c
Show file tree

Hide file tree

Showing 11 changed files with 83 additions and 112 deletions.
diff --git a/__tests__/AmplifyGeofenceControl.test.ts b/__tests__/AmplifyGeofenceControl.test.ts
@@ -72,7 +72,7 @@ describe("AmplifyGeofenceControl", () => {
     const control = new AmplifyGeofenceControl({
       geofenceCollectionId: "anyString",
     });
-    control._map = new maplibreMap();
+    control._map = new maplibreMap({ container: '', style: '' });
     control._ui = AmplifyGeofenceControlUI(
       control,
       {} as unknown as HTMLElement

diff --git a/__tests__/drawGeofences.test.ts b/__tests__/drawGeofences.test.ts
@@ -5,7 +5,7 @@ jest.mock("maplibre-gl");
 
 describe("drawGeofences", () => {
   test("drawPoints default options", () => {
-    const map = new maplibreMap();
+    const map = new maplibreMap({ container: '', style: '' });
     const data: any = [
       [
         [

diff --git a/__tests__/drawPoints.test.ts b/__tests__/drawPoints.test.ts
@@ -35,7 +35,7 @@ describe("drawPoints", () => {
   });
 
   test("drawPoints default options", () => {
-    const map = new maplibreMap();
+    const map = new maplibreMap({ container: '', style: '' });
     drawPoints(
       "foo",
       [
@@ -54,7 +54,7 @@ describe("drawPoints", () => {
   });
 
   test("drawPoints autoFit false", () => {
-    const map = new maplibreMap();
+    const map = new maplibreMap({ container: '', style: '' });
     drawPoints(
       "foo",
       [
@@ -78,7 +78,7 @@ describe("drawPoints", () => {
     const icon1 = "foobar";
     const icon2 = "barbaz";
 
-    const map = new maplibreMap();
+    const map = new maplibreMap({ container: '', style: '' });
     drawPoints(
       "foo",
       [
@@ -107,7 +107,7 @@ describe("drawPoints", () => {
   test("drawPoints custom markers, if active marker not passed used same as regular", () => {
     const icon = "foobar";
 
-    const map = new maplibreMap();
+    const map = new maplibreMap({ container: '', style: '' });
     drawPoints(
       "foo",
       [

diff --git a/jest.config.js b/jest.config.js
@@ -17,7 +17,7 @@ module.exports = {
     },
     {
       preset: "ts-jest",
-      setupFiles: ["./jest.setup.dom.ts", "jest-webgl-canvas-mock", "jsdom-worker-fix"], // workarounds for jsdom and node env conflicts
+      setupFiles: ["./jest.setup.dom.ts", "jest-webgl-canvas-mock"], // workarounds for jsdom and node env conflicts
       testEnvironment: "jsdom",
       testMatch: ["<rootDir>/__tests__/**/*.test.dom.ts"],
     },

diff --git a/jest.setup.dom.ts b/jest.setup.dom.ts
@@ -2,6 +2,26 @@
  * This is a workaround to the problem of the jsdom library not supporting
  * URL.createObjectURL. See https://github.com/jsdom/jsdom/issues/1721.
  */
-if (typeof window.URL.createObjectURL === 'undefined') {
+if (typeof window.URL.createObjectURL === "undefined") {
   window.URL.createObjectURL = jest.fn();
 }
+
+/**
+ * Below are polyfills to allow the JSDOM tests to run
+ */
+import FetchMock from "jest-fetch-mock";
+FetchMock.enableMocks();
+
+class MockWorker {
+  addEventListener = () => null;
+  dispatchEvent = () => null;
+  onerror = () => null;
+  onmessage = () => null;
+  onmessageerror = () => null;
+  postMessage = () => null;
+  removeEventListener = () => null;
+  terminate = () => null;
+}
+
+window.Worker = MockWorker;
+performance.mark = jest.fn();
diff --git a/package.json b/package.json
@@ -78,10 +78,10 @@
     "eslint-plugin-promise": "^5.1.0",
     "husky": "^7.0.4",
     "jest": "^27.0.3",
+    "jest-fetch-mock": "^3.0.3",
     "jest-transform-stub": "^2.0.0",
     "jest-webgl-canvas-mock": "^0.2.3",
-    "jsdom-worker-fix": "^0.1.8",
-    "maplibre-gl": "^1.14.0",
+    "maplibre-gl": "^2.1.9",
     "prettier": "^2.3.0",
     "rollup": "^2.55.1",
     "rollup-plugin-import-css": "^3.0.2",
@@ -94,7 +94,7 @@
   "peerDependencies": {
     "@aws-amplify/core": "^4.5.1",
     "@aws-amplify/geo": "^1.3.0",
-    "maplibre-gl": "^1.15.2"
+    "maplibre-gl": "^2.1.9"
   },
   "dependencies": {
     "@mapbox/mapbox-gl-draw": "^1.3.0",

diff --git a/src/AmplifyMapLibreRequest.ts b/src/AmplifyMapLibreRequest.ts
@@ -10,11 +10,16 @@ import { Geo, AmazonLocationServiceMapStyle } from "@aws-amplify/geo";
 import {
   Map as MaplibreMap,
   RequestParameters,
-  MapboxOptions,
+  MapOptions,
 } from "maplibre-gl";
 import { urlEncodePeriods } from "./utils";
 
-interface CreateMapOptions extends MapboxOptions {
+/**
+ * The upgrade from maplibre v1 to maplibre v2 changed the `style` property from optional to required.
+ * We keep the property optional here since we default to the map name for the maplibre style field and
+ * it maintains backwards compatibility with the upgrade to maplibre v2.
+ */
+interface CreateMapOptions extends Omit<MapOptions, 'style'>, Partial<Pick<MapOptions, 'style'>> {
   region?: string;
   mapConstructor?: typeof MaplibreMap;
 }

diff --git a/src/drawClusterLayer.ts b/src/drawClusterLayer.ts
@@ -1,16 +1,16 @@
 import { Geo } from "@aws-amplify/geo";
 import { Point } from "geojson";
-import {
-  CircleLayer,
-  CirclePaint,
+import type {
+  CircleLayerSpecification,
   LngLatLike,
   Map as maplibreMap,
-  SymbolLayer,
+  SymbolLayerSpecification,
 } from "maplibre-gl";
-import { ClusterOptions } from "./types";
+
 import { COLOR_WHITE, MARKER_COLOR } from "./constants";
 import { isGeoJsonSource } from "./utils";
 import { FONT_DEFAULT_BY_STYLE } from "./constants";
+import type { ClusterOptions } from "./types";
 
 export function drawClusterLayer(
   sourceName: string,
@@ -38,7 +38,7 @@ export function drawClusterLayer(
   const clusterSymbolLayerId = `${sourceName}-layer-cluster-count`;
 
   // Use step expressions for clusters (https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-step)
-  const paintOptions: CirclePaint = {
+  const paintOptions: CircleLayerSpecification["paint"] = {
     "circle-color": [
       "step",
       ["get", "point_count"],
@@ -65,7 +65,7 @@ export function drawClusterLayer(
     "circle-stroke-color": borderColor,
     ...clusterPaint,
   };
-  const defaultClusterLayer: CircleLayer = {
+  const defaultClusterLayer: CircleLayerSpecification = {
     id: clusterLayerId,
     type: "circle",
     source: sourceName,
@@ -120,7 +120,7 @@ export function drawClusterLayer(
     const paintOptions = {
       "text-color": fontColor,
     };
-    const defaultClusterCount: SymbolLayer = {
+    const defaultClusterCount: SymbolLayerSpecification = {
       id: clusterSymbolLayerId,
       type: "symbol",
       source: sourceName,

diff --git a/src/drawUnclusteredLayer.ts b/src/drawUnclusteredLayer.ts
@@ -1,10 +1,12 @@
 import { Point } from "geojson";
-import { Map as maplibreMap, Popup, SymbolLayer } from "maplibre-gl";
-import { Coordinates, UnclusteredOptions } from "./types";
+import { Popup } from 'maplibre-gl';
+import type { Map as maplibreMap, SymbolLayerSpecification } from "maplibre-gl";
+
 import { ACTIVE_MARKER_COLOR, COLOR_WHITE, MARKER_COLOR } from "./constants";
 import { createMarker } from "./createMarker";
 import { getPopupRenderFunction } from "./popupRender";
 import { isCoordinates } from "./utils";
+import type { Coordinates, UnclusteredOptions } from "./types";
 
 const HIDE_TIP = "amplify-tip";
 
@@ -33,7 +35,7 @@ export function drawUnclusteredLayer(
 
   addUnclusteredMarkerImages(map, options);
 
-  const defaultUnclusteredPoint: SymbolLayer = {
+  const defaultUnclusteredPoint: SymbolLayerSpecification = {
     id: unclusteredLayerId,
     type: "symbol",
     source: sourceName,

diff --git a/src/utils.ts b/src/utils.ts
@@ -1,6 +1,7 @@
 import { Feature } from "geojson";
-import { AnySourceImpl, GeoJSONSource } from "maplibre-gl";
-import { Coordinates, NamedLocation, Geofence, Polygon } from "./types";
+import type { GeoJSONSource, Source } from "maplibre-gl";
+
+import type { Coordinates, NamedLocation, Geofence, Polygon } from "./types";
 
 export function isCoordinates(array: unknown): array is Coordinates {
   return (
@@ -48,7 +49,7 @@ export function isPolygonArray(array: unknown): array is Polygon[] {
 }
 
 export function isGeoJsonSource(
-  source: AnySourceImpl
+  source: Source
 ): source is GeoJSONSource {
   return source.type === "geojson";
 }