@maptiler/sdk 3.10.2 → 3.11.0-rc.1

package/e2e/tests/helpers/fetchGeojson.ts

@@ -0,0 +1,21 @@
+import { KeyframeableGeoJSONFeature } from "../../../src";
+
+type GeoJSON = {
+  type: "FeatureCollection";
+  features: KeyframeableGeoJSONFeature[];
+};
+
+export default async function fetchGeoJSON(assetUrl: string): Promise<GeoJSON> {
+  try {
+    const response = await fetch(assetUrl);
+
+    if (!response.ok) {
+      throw new Error(`Failed to fetch GeoJSON: ${response.statusText}`);
+    }
+
+    const geojson = await response.json();
+    return geojson as GeoJSON;
+  } catch (e) {
+    throw e;
+  }
+}

package/e2e/tests/helpers/getMapInstanceForFixture.ts

@@ -0,0 +1,87 @@
+import { Page, expect } from "@playwright/test";
+import path from "path";
+import { injectGlobalVariables } from "./injectGlobalVariables";
+
+interface IgetMapInstanceForFixture {
+  fixture: string;
+  page: Page;
+  mockStyle?: boolean;
+  mockTiles?: boolean;
+  debug?: boolean;
+  timeout?: number;
+}
+
+export default async function getMapInstanceForFixture({ fixture, page, mockStyle = true, mockTiles = true, debug = false, timeout = 10000 }: IgetMapInstanceForFixture) {
+  await injectGlobalVariables(page);
+  await page.addInitScript((plt) => {
+    window.__pageLoadTimeout = plt;
+  }, timeout);
+
+  if (mockStyle) {
+    // mock style response
+    await page.route("https://api.maptiler.com/maps/*/*.json*", async (route) => {
+      if (debug) console.info(`ℹ️ Style intercepted at ${route.request().url()}`);
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        path: path.resolve(import.meta.dirname, "../mocks/maptiler-style.json"),
+      });
+    });
+  }
+
+  if (mockTiles) {
+    // mocks the tile response always returning the mock tile
+    await page.route("https://api.maptiler.com/tiles/*/*/*/*.jpg?key=*&*", (route) => {
+      if (debug) console.info(`ℹ️ Tile intercepted at ${route.request().url()}`);
+      return route.fulfill({
+        status: 200,
+        contentType: "image/png",
+        path: path.resolve(import.meta.dirname, "../mocks/tile.png"),
+      });
+    });
+  }
+
+  page.on("console", (msg) => {
+    console.log("FIXTURE LOG:", msg.text());
+    if (debug) {
+      console.log("DEBUG FIXTURE LOG:", msg.location(), msg.text());
+    }
+  });
+
+  page.addListener("requestfinished", async (request) => {
+    const response = await request.response();
+    if (response && response.status() >= 400) {
+      console.error(`\n\nFailed to load ${request.url()}\n status: ${response.status()}\n\n`);
+      expect(response.status()).toBeLessThan(400);
+    }
+  });
+
+  await page.goto(`http://localhost:5173/${fixture}.html`, {
+    waitUntil: "domcontentloaded",
+  });
+
+  try {
+    const map = await page.evaluateHandle(() => {
+      return Promise.race([
+        new Promise(async (resolve) => {
+          console.log("Window.__map", window.__map);
+          window.__map.on("idle", () => {;
+            resolve(window.__map);
+          });
+        }),
+        new Promise((_, reject) => {
+          setTimeout(() => {
+            reject(new Error("Map did not load in time"));
+          }, window.__pageLoadTimeout);
+        }),
+      ]);
+    });
+
+    return {
+      map,
+    };
+  } catch (e) {
+    console.error(e);
+    return {};
+  }
+}

package/e2e/tests/helpers/injectGlobalVariables.ts

@@ -0,0 +1,13 @@
+import { Page } from "@playwright/test";
+import packagejson from "../../../package.json" assert { type: "json" };
+
+export async function injectGlobalVariables(page: Page) {
+  console.log("injecting global variables");
+  await page.addInitScript(
+    ({ version, nodeEnv }) => {
+      window.__MT_SDK_VERSION__ = version;
+      window.__MT_NODE_ENV__ = nodeEnv;
+    },
+    { version: packagejson.version, nodeEnv: process.env.NODE_ENV },
+  );
+}

package/e2e/tests/helpers/loadFixtureAndGetMapHandle.ts

@@ -1,15 +1,17 @@
 import type { Map } from "../../../src/index";
 import { JSHandle, Page, expect } from "@playwright/test";
 import path from "path";
+import { injectGlobalVariables } from "./injectGlobalVariables";
 
-interface IloadFixtureAndGetMapHandle {
+export interface LoadFixtureAndGetMapHandleOptions {
   fixture: string;
   page: Page;
-  mockStyle?: boolean;
-  mockTiles?: boolean;
+  mockStyle?: boolean | string;
+  mockTiles?: boolean | string;
   debug?: boolean;
   waitUntil?: "load" | "domcontentloaded" | "networkidle";
   queryParams?: Record<string, string>;
+  lazy?: boolean;
 }
 
 export default async function loadFixtureAndGetMapHandle({
@@ -20,15 +22,18 @@ export default async function loadFixtureAndGetMapHandle({
   debug = false,
   waitUntil = "load",
   queryParams,
-}: IloadFixtureAndGetMapHandle): Promise<{ mapHandle: JSHandle<Map | null> }> {
+  lazy = false,
+}: LoadFixtureAndGetMapHandleOptions): Promise<{ mapHandle: JSHandle<Map | null> | null }> {
+  await injectGlobalVariables(page);
   if (mockStyle) {
     // mock style response
     await page.route("https://api.maptiler.com/maps/*/*.json*", async (route) => {
       if (debug) console.info(`ℹ️ Style intercepted at ${route.request().url()}`);
+      const mockFileName = typeof mockStyle === "string" ? mockStyle : "maptiler-style.json";
       await route.fulfill({
         status: 200,
         contentType: "application/json",
-        path: path.resolve(import.meta.dirname, "../mocks/maptiler-style.json"),
+        path: path.resolve(import.meta.dirname, `../mocks/${mockFileName}`),
       });
     });
   }
@@ -46,7 +51,6 @@ export default async function loadFixtureAndGetMapHandle({
   }
 
   page.on("console", (msg) => {
-    console.log("FIXTURE LOG:", msg.text());
     if (debug) {
       console.log("DEBUG FIXTURE LOG:", msg.location(), msg.text());
     }
@@ -64,36 +68,42 @@ export default async function loadFixtureAndGetMapHandle({
     waitUntil,
   });
 
-  try {
-    const mapHandle = await page.evaluateHandle<Map | null>(() => {
-      return Promise.race<Map | null>([
-        new Promise<Map | null>(async (resolve) => {
-          try {
-            window.__map.on("idle", () => {
-              resolve(window.__map as Map);
-            });
-          } catch (e) {
-            console.error("Error getting map instance", e);
-            resolve(null);
-          }
-        }),
-        new Promise<Map | null>((resolve) => {
-          setTimeout(() => {
-            console.error("Map did not load in time");
-            resolve(null);
-          }, 10000);
-        }),
-      ]);
-    });
+  if (!lazy) {
+    try {
+      const mapHandle = await page.evaluateHandle<Map | null>(() => {
+        return Promise.race<Map | null>([
+          new Promise<Map | null>(async (resolve) => {
+            try {
+              window.__map.on("idle", () => {
+                resolve(window.__map as Map);
+              });
+            } catch (e) {
+              console.error("Error getting map instance", e);
+              resolve(null);
+            }
+          }),
+          new Promise<Map | null>((resolve) => {
+            setTimeout(() => {
+              console.error("Map did not load in time");
+              resolve(null);
+            }, 10000);
+          }),
+        ]);
+      });
 
-    return {
-      mapHandle,
-    };
-  } catch (e) {
-    console.error(e);
-    const nullMap = await page.evaluateHandle(() => null);
-    return {
-      mapHandle: nullMap as JSHandle<Map | null>,
-    };
+      return {
+        mapHandle,
+      };
+    } catch (e) {
+      console.error(e);
+      const nullMap = await page.evaluateHandle(() => null);
+      return {
+        mapHandle: nullMap as JSHandle<Map | null>,
+      };
+    }
   }
+
+  return {
+    mapHandle: null,
+  };
 }

package/e2e/tests/mocks/maptiler-style-space-halo-invalid.json

@@ -0,0 +1,38 @@
+{
+  "version": 8,
+  "sources": {
+    "raster": {
+      "type": "raster",
+      "tiles": [
+        "https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=DOESNT_MATTER"
+      ],
+      "tileSize": 256
+    }
+  },
+  "layers": [
+    {
+      "id": "raster",
+      "type": "raster",
+      "source": "raster",
+      "minzoom": 0,
+      "maxzoom": 22
+    }
+  ],
+  "projection": { "type": "globe" },
+  "metadata": {
+    "maptiler": {
+      "version": "1.0.0",
+      "attribution": "© MapTiler © OpenStreetMap contributors",
+      "halo": {
+        "scale": "letter",
+        "stops": {
+          "is": "an object"
+        }
+      },
+      "space": {
+        "color": [1234,1234],
+        "preset": 3
+      }
+    }
+  }
+}

package/e2e/tests/mocks/maptiler-style-space-halo.json

@@ -0,0 +1,41 @@
+{
+  "version": 8,
+  "sources": {
+    "raster": {
+      "type": "raster",
+      "tiles": [
+        "https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=DOESNT_MATTER"
+      ],
+      "tileSize": 256
+    }
+  },
+  "layers": [
+    {
+      "id": "raster",
+      "type": "raster",
+      "source": "raster",
+      "minzoom": 0,
+      "maxzoom": 22
+    }
+  ],
+  "projection": { "type": "globe" },
+  "metadata": {
+    "maptiler": {
+      "version": "1.0.0",
+      "attribution": "© MapTiler © OpenStreetMap contributors",
+      "halo": {
+        "scale": 1.5,
+        "stops": [
+          [0.2, "transparent"],
+          [0.2, "red"],
+          [0.4, "red"],
+          [0.4, "transparent"]
+        ]
+      },
+      "space": {
+        "color": "green",
+        "preset": "space"
+      }
+    }
+  }
+}

package/e2e/tests/mocks/maptiler-style.json

@@ -9,6 +9,7 @@
       "tileSize": 256
     }
   },
+  "projection": { "type": "globe" },
   "layers": [
     {
       "id": "raster",

package/e2e/tests/rtlTextPlugin.test.ts

@@ -1,15 +1,10 @@
 import { expect, test } from "@playwright/test";
-import path from "path";
 import loadFixtureAndGetMapHandle from "./helpers/loadFixtureAndGetMapHandle";
 
 test("Renders RTL text correctly when RTL plugin is enabled and incorrectly when disabled", async ({ page }) => {
-  // Route handler for tiles.json
-  await page.route("https://api.maptiler.com/tiles/v3/tiles.json*", async (route) => {
-    await route.fulfill({
-      status: 200,
-      contentType: "application/json",
-      path: path.resolve(import.meta.dirname, "./mocks/rtl-tiles-json.json"),
-    });
+  await page.exposeFunction("notifyScreenshotStateReady", async (data: Record<string, TTestTransferData>) => {
+    const screenshotname = data.disabled ? "rtlTextPlugin-disabled.png" : "rtlTextPlugin-enabled.png";
+    await expect(page).toHaveScreenshot(screenshotname);
   });
 
   await loadFixtureAndGetMapHandle({
@@ -19,13 +14,9 @@ test("Renders RTL text correctly when RTL plugin is enabled and incorrectly when
 
   expect(await page.title()).toBe("MapTiler E2E RTL Text Plugin");
 
-  await expect(page).toHaveScreenshot("rtlTextPlugin-active.png");
-
   await loadFixtureAndGetMapHandle({
     fixture: "rtlTextPlugin",
     page,
     queryParams: { "disable-rtl": "true" },
   });
-
-  await expect(page).toHaveScreenshot("rtlTextPlugin-disabled.png");
 });

package/e2e/tsconfig.json

@@ -9,7 +9,7 @@
   },
   "include": [
     "./tests/**/*.test.ts",
-    "./global.d.ts",
+    "./tests/helpers/*.ts",
     "./src/**/*.ts",
     "../src/**/*.d.ts"
   ]

package/eslint.config.mjs

@@ -2,6 +2,7 @@
 
 import tseslint from "typescript-eslint";
 import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
+import eslintPluginCompat from "eslint-plugin-compat";
 
 export default tseslint.config(
   // https://typescript-eslint.io/getting-started/typed-linting/
@@ -11,6 +12,7 @@ export default tseslint.config(
   {
     // forked from https://www.npmjs.com/package/eslint-plugin-restrict-imports
     plugins: {
+      compat: eslintPluginCompat,
       import: {
         rules: {
           "default-imports-only": {
@@ -67,7 +69,12 @@ export default tseslint.config(
         },
       },
     },
+    settings: {
+      // eslint-plugin-compat polyfill
+      polyfills: ["requestIdleCallback"],
+    },
     rules: {
+      "compat/compat": "error",
       "import/default-imports-only": [
         "error",
         {
@@ -127,6 +134,7 @@ export default tseslint.config(
       "@typescript-eslint/related-getter-setter-pairs": "off",
       "@typescript-eslint/unbound-method": "warn",
       "@typescript-eslint/use-unknown-in-catch-callback-variable": "warn",
+      "@typescript-eslint/unified-signatures": ["error", { ignoreOverloadsWithDifferentJSDoc: true }],
     },
   },
   //

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maptiler/sdk",
-  "version": "3.10.2",
+  "version": "3.11.0-rc.1",
   "description": "The Javascript & TypeScript map SDK tailored for MapTiler Cloud",
   "author": "MapTiler",
   "module": "dist/maptiler-sdk.mjs",
@@ -20,6 +20,10 @@
       "import": "./dist/maptiler-sdk.css"
     }
   },
+  "browserslist": [
+    "defaults",
+    "not op_mini all"
+  ],
   "keywords": [
     "maptiler",
     "map",
@@ -65,6 +69,7 @@
   "devDependencies": {
     "@canvas/image-data": "^1.0.0",
     "@eslint/js": "^9.21.0",
+    "@maptiler/3d": "^3.1.0",
     "@playwright/test": "^1.51.0",
     "@types/color-convert": "^2.0.4",
     "@types/color-name": "^2.0.0",
@@ -92,12 +97,14 @@
     "vitest": "^3.0.9"
   },
   "dependencies": {
-    "@maplibre/maplibre-gl-style-spec": "~24.3.1",
-    "@maptiler/client": "~2.6.0",
+    "@maplibre/maplibre-gl-style-spec": "~24.4.1",
+    "@maptiler/client": "2.7.0-rc.1",
+    "eslint-plugin-compat": "^6.1.0",
     "events": "^3.3.0",
     "gl-matrix": "^3.4.4",
     "js-base64": "^3.7.7",
-    "maplibre-gl": "~5.14.0",
+    "maplibre-gl": "~5.16.0",
+    "requestidlecallback-polyfill": "^1.0.2",
     "uuid": "^11.0.5"
   }
 }

package/playwright.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig, devices } from '@playwright/test';
-
+import packagejson from './package.json' assert { type: 'json' };
 /**
  * Read environment variables from file.
  * https://github.com/motdotla/dotenv
@@ -33,8 +33,13 @@ export default defineConfig({
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
+    launchOptions: {
+      env: {
+        __MT_SDK_VERSION__: packagejson.version,
+        __MT_NODE_ENV__: process.env.NODE_ENV,
+      }
+    }
   },
-  
   snapshotDir: './e2e/snapshots',
   /* Configure projects for major browsers */
   projects: [

package/tsconfig.json

@@ -6,7 +6,7 @@
     "useDefineForClassFields": true,
     "module": "ESNext",
     "lib": [
-      "es2021",
+      "es2023",
       "DOM",
       "DOM.Iterable"
     ],

package/vitest-setup-tests.ts

@@ -1,3 +1,19 @@
+import { expect } from "vitest";
 import ImageData from "@canvas/image-data";
 // @ts-expect-error: Global type missing
 global.ImageData = ImageData;
+
+
+// this is to prevent tests failing because of floating point differences
+// between different CI and local
+expect.addSnapshotSerializer({
+  serialize(val, config, indentation, depth, refs, printer) {
+    if (typeof val === 'number') {
+      return val.toFixed(10)
+    }
+    return printer(val, config, indentation, depth, refs)
+  },
+  test(val) {
+    return typeof val === 'number'
+  },
+})