@maptiler/sdk 3.3.0-rc2 → 3.4.0-rc1

package/e2e/tests/expected-results/animatedRouteLayer-1.json

@@ -0,0 +1,202 @@
+[
+  {
+    "frame": 0,
+    "center": [
+      -5.466042011463379,
+      55.4577906319048
+    ],
+    "zoom": 13.598461538461539,
+    "pitch": 31.96923076923077,
+    "bearing": 11.519999999999984
+  },
+  {
+    "frame": 1,
+    "center": [
+      -5.460399670970225,
+      55.4563116595035
+    ],
+    "zoom": 13.696923076923076,
+    "pitch": 33.93846153846154,
+    "bearing": 23.039999999999967
+  },
+  {
+    "frame": 2,
+    "center": [
+      -5.454680854842297,
+      55.454199187343335
+    ],
+    "zoom": 13.795384615384616,
+    "pitch": 35.90769230769231,
+    "bearing": 34.55999999999994
+  },
+  {
+    "frame": 3,
+    "center": [
+      -5.449154714432449,
+      55.45161563359928
+    ],
+    "zoom": 13.893846153846155,
+    "pitch": 37.87692307692308,
+    "bearing": 46.08000000000004
+  },
+  {
+    "frame": 4,
+    "center": [
+      -5.4440854476088205,
+      55.448695922972746
+    ],
+    "zoom": 13.992307692307692,
+    "pitch": 39.84615384615384,
+    "bearing": 57.5999999999999
+  },
+  {
+    "frame": 5,
+    "center": [
+      -5.439747931704942,
+      55.4455842681447
+    ],
+    "zoom": 14.09076923076923,
+    "pitch": 41.8153846153846,
+    "bearing": 69.11999999999988
+  },
+  {
+    "frame": 6,
+    "center": [
+      -5.436381601488342,
+      55.44242356593315
+    ],
+    "zoom": 14.189230769230766,
+    "pitch": 43.78461538461536,
+    "bearing": 80.63999999999987
+  },
+  {
+    "frame": 7,
+    "center": [
+      -5.434285966180362,
+      55.43932695213108
+    ],
+    "zoom": 14.287692307692307,
+    "pitch": 45.753846153846105,
+    "bearing": 92.15999999999974
+  },
+  {
+    "frame": 8,
+    "center": [
+      -5.433268915702869,
+      55.43589535070747
+    ],
+    "zoom": 14.386153846153844,
+    "pitch": 47.723076923076874,
+    "bearing": 103.67999999999961
+  },
+  {
+    "frame": 9,
+    "center": [
+      -5.433177455811488,
+      55.43198983159487
+    ],
+    "zoom": 14.484615384615381,
+    "pitch": 49.69230769230762,
+    "bearing": 115.19999999999958
+  },
+  {
+    "frame": 10,
+    "center": [
+      -5.433880699537133,
+      55.42784291729489
+    ],
+    "zoom": 14.577142857142853,
+    "pitch": 51.54285714285707,
+    "bearing": 126.71999999999957
+  },
+  {
+    "frame": 11,
+    "center": [
+      -5.435326079044055,
+      55.423654806187365
+    ],
+    "zoom": 14.668571428571424,
+    "pitch": 53.37142857142849,
+    "bearing": 138.23999999999944
+  },
+  {
+    "frame": 12,
+    "center": [
+      -5.437416792145254,
+      55.419638086917715
+    ],
+    "zoom": 14.759999999999996,
+    "pitch": 55.1999999999999,
+    "bearing": 149.75999999999942
+  },
+  {
+    "frame": 13,
+    "center": [
+      -5.440072094355931,
+      55.41599788270592
+    ],
+    "zoom": 14.851428571428567,
+    "pitch": 57.028571428571325,
+    "bearing": 161.2799999999993
+  },
+  {
+    "frame": 14,
+    "center": [
+      -5.4432174520051015,
+      55.412956866373364
+    ],
+    "zoom": 14.942857142857138,
+    "pitch": 58.85714285714275,
+    "bearing": 172.79999999999927
+  },
+  {
+    "frame": 15,
+    "center": [
+      -5.446829788111814,
+      55.41064796034502
+    ],
+    "zoom": 14.963076923076928,
+    "pitch": 59.26153846153856,
+    "bearing": -175.5692307692314
+  },
+  {
+    "frame": 16,
+    "center": [
+      -5.451519315760324,
+      55.40879433251729
+    ],
+    "zoom": 14.864615384615387,
+    "pitch": 57.292307692307745,
+    "bearing": -163.75384615384647
+  },
+  {
+    "frame": 17,
+    "center": [
+      -5.457134643435197,
+      55.407280629375585
+    ],
+    "zoom": 14.766153846153847,
+    "pitch": 55.32307692307692,
+    "bearing": -151.9384615384615
+  },
+  {
+    "frame": 18,
+    "center": [
+      -5.463405013806986,
+      55.40615466316898
+    ],
+    "zoom": 14.667692307692304,
+    "pitch": 53.3538461538461,
+    "bearing": -140.1230769230766
+  },
+  {
+    "frame": 19,
+    "center": [
+      -5.469987343492665,
+      55.405428197723374
+    ],
+    "zoom": 14.569230769230764,
+    "pitch": 51.38461538461526,
+    "bearing": -128.30769230769158
+  }
+]

package/e2e/tests/helpers/fetchGeojson.ts

@@ -0,0 +1,21 @@
+import { KeyframeableGeoJSONFeature } from "utils";
+
+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,86 @@
+import { Page, expect } from "@playwright/test";
+import path from "path";
+
+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 page.addInitScript((plt) => {
+    console.log(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/map-load.test.ts

@@ -0,0 +1,14 @@
+import { expect, test } from "@playwright/test";
+
+import getMapInstanceForFixture from "./helpers/getMapInstanceForFixture";
+
+test("Awaits until map ready and takes snapshot", async ({ page }) => {
+  await getMapInstanceForFixture({
+    fixture: "mapLoad",
+    page,
+  });
+
+  expect(await page.title()).toBe("MapTiler E2E Map Load");
+
+  await expect(page).toHaveScreenshot("mapLoad.png");
+});

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

@@ -0,0 +1,27 @@
+{
+  "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
+    }
+  ],
+  "metadata": {
+    "maptiler": {
+      "version": "1.0.0",
+      "attribution": "© MapTiler © OpenStreetMap contributors"
+    }
+  }
+}

package/e2e/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "types": ["./global.d.ts"],
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "moduleResolution": "node",
+    "resolveJsonModule": true
+  }
+}

package/eslint.config.mjs

@@ -32,10 +32,10 @@ export default tseslint.config(
       "@typescript-eslint/no-inferrable-types": "off",
       "@typescript-eslint/no-misused-promises": "warn",
       "@typescript-eslint/no-unnecessary-boolean-literal-compare": "off",
-      "@typescript-eslint/no-unnecessary-condition": "warn",
+      "@typescript-eslint/no-unnecessary-condition": "off", // we have the potential for a lot of user input that is not validated
       "@typescript-eslint/no-unnecessary-type-arguments": "off",
       "@typescript-eslint/no-unnecessary-type-assertion": "off",
-      "@typescript-eslint/no-unnecessary-type-parameters": "off", // as we are a lib, types serve as documentation
+      "@typescript-eslint/no-unnecessary-type-parameters": "warn",
       "@typescript-eslint/no-unused-vars": "warn",
       "@typescript-eslint/no-unsafe-argument": "warn",
       "@typescript-eslint/no-unsafe-assignment": "warn",
@@ -44,7 +44,7 @@ export default tseslint.config(
       "@typescript-eslint/no-unsafe-member-access": "warn",
       "@typescript-eslint/no-unsafe-return": "warn",
       "@typescript-eslint/no-non-null-assertion": "warn",
-      "@typescript-eslint/non-nullable-type-assertion-style": "warn",
+      "@typescript-eslint/non-nullable-type-assertion-style": "off",
       "@typescript-eslint/prefer-for-of": "off",
       "@typescript-eslint/prefer-nullish-coalescing": "warn",
       "@typescript-eslint/prefer-optional-chain": "off",
@@ -53,6 +53,7 @@ export default tseslint.config(
       "@typescript-eslint/restrict-plus-operands": "warn",
       "@typescript-eslint/restrict-template-expressions": "warn",
       "@typescript-eslint/related-getter-setter-pairs": "off",
+      "@typescript-restrict-template-expressions": "off",
       "@typescript-eslint/unbound-method": "warn",
       "@typescript-eslint/use-unknown-in-catch-callback-variable": "warn",
     },

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@maptiler/sdk",
-  "version": "3.3.0-rc2",
+  "version": "3.4.0-rc1",
   "description": "The Javascript & TypeScript map SDK tailored for MapTiler Cloud",
   "author": "MapTiler",
   "module": "dist/maptiler-sdk.mjs",
   "types": "dist/maptiler-sdk.d.ts",
   "style": "dist/maptiler-sdk.css",
   "type": "module",
-  "main": "dist/maptiler-sdk.mjs",
   "exports": {
     ".": {
       "import": "./dist/maptiler-sdk.mjs",
@@ -37,7 +36,8 @@
   },
   "scripts": {
     "prepare": "husky",
-    "doc": "rm -rf docs/* && typedoc --out docs && cp -r images docs/",
+    "docs:md": "rm -rf docs/* && typedoc --plugin typedoc-plugin-markdown --out docs --readme none",
+    "docs:html": "rm -rf docs-html/* && typedoc --out docs-html",
     "ncu": "npx npm-check-updates",
     "lint": "eslint src",
     "lint:fix": "eslint src --fix",
@@ -50,19 +50,18 @@
     "build-umd": "tsc && NODE_ENV=production vite build -c vite.config-umd.ts",
     "build-es": "tsc && NODE_ENV=production vite build -c vite.config-es.ts",
     "build": "npm run build-es; npm run build-umd; npm run build-css",
-    "make": "npm run install:clean && npm run build"
+    "make": "npm run install:clean && npm run build",
+    "e2e:serve": "tsc --project ./e2e && NODE_ENV=development vite -c vite.config-e2e.ts",
+    "e2e:local": "npx playwright test --config=playwright.config.ts --ui",
+    "e2e:watch": "concurrently \"npm run e2e:serve\" \"npm run e2e:local\""
   },
   "lint-staged": {
     "*.ts": "npm run lint:fix"
   },
-  "ts-typecheck": {
-    "*.ts": "npm tsc --noEmit"
-  },
   "devDependencies": {
     "@canvas/image-data": "^1.0.0",
     "@eslint/js": "^9.21.0",
-    "@types/color-convert": "^2.0.4",
-    "@types/color-name": "^2.0.0",
+    "@playwright/test": "^1.52.0",
     "@types/uuid": "^10.0.0",
     "@types/xmldom": "^0.1.31",
     "@vitest/web-worker": "^3.0.9",
@@ -74,8 +73,10 @@
     "happy-dom": "^17.4.4",
     "husky": "^8.0.0",
     "lint-staged": "^15.4.3",
+    "playwright": "^1.52.0",
     "prettier": "3.5.2",
-    "typedoc": "^0.27.6",
+    "typedoc": "^0.28.3",
+    "typedoc-plugin-markdown": "^4.6.3",
     "typescript": "^5.7.3",
     "typescript-eslint": "^8.25.0",
     "vite": "^6.0.7",
@@ -84,11 +85,10 @@
   },
   "dependencies": {
     "@maplibre/maplibre-gl-style-spec": "^23.0.0",
-    "@maptiler/client": "^2.3.0",
+    "@maptiler/client": "^2.3.2",
     "events": "^3.3.0",
-    "gl-matrix": "^3.4.3",
     "js-base64": "^3.7.7",
-    "maplibre-gl": "^5.0.1",
+    "maplibre-gl": "^5.3.1",
     "uuid": "^11.0.5"
   }
 }

package/playwright.config.ts

@@ -0,0 +1,82 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// import path from 'path';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "e2e",
+  // testMatch: '**/*.test.ts',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: "html",
+  tsconfig: "./e2e/tsconfig.json",
+
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://127.0.0.1:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+  },
+
+  snapshotDir: "./e2e/snapshots",
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
+
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  // command: 'npm run e2e:serve',
+  // url: 'http://localhost:5173',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+});

package/tsconfig.json

@@ -26,9 +26,11 @@
   },
   "include": [
     "src",
+    "e2e",
     "./eslint.config.mjs",
-    "test",
     "./vite.config-test.ts",
+    "./vite.config-e2e.ts",
+    "./playwright.config.ts",
     "./vitest-setup-tests.ts"
   ],
 }

package/typedoc.json

@@ -1,7 +1,8 @@
 {
-  "entryPoints": ["./src/index.ts"],
+  "entryPoints": [
+    "./src/index.ts",
+  ],
   "name": "MapTiler SDK",
-  "out": "docs",
   "excludePrivate": true,
   "excludeProtected": true,
   "excludeExternals": true,

package/vite.config-e2e.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  build: {
+    rollupOptions: {
+      input: {
+        mapLoad: "public/mapLoad.html",
+        animatedRoutLayer: "public/animatedRouteLayer.html",
+      },
+    },
+  },
+  root: "./e2e",
+});

package/vite.config-es.ts

@@ -24,7 +24,7 @@ export default defineConfig({
       fileName: (format, entryName) => "maptiler-sdk.mjs",
       formats: ['es'],
     },
-    
+
     rollupOptions: {
       // make sure to externalize deps that shouldn't be bundled
       // into your library
@@ -45,7 +45,7 @@ export default defineConfig({
       },
     },
   },
-    define: {
+  define: {
     __MT_SDK_VERSION__: JSON.stringify(packagejson.version),
   },
   plugins,

package/dist/eslint.config.d.mts

@@ -1,2 +0,0 @@
-declare const _default: import("@typescript-eslint/utils/dist/ts-eslint").FlatConfig.ConfigArray;
-export default _default;

package/dist/maptiler-sdk.d.ts

@@ -1,2 +0,0 @@
-export * from './src/index'
-export {}