@maptiler/sdk 3.2.2 → 3.4.0-rc1

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

@@ -8,77 +8,6 @@ export default tseslint.config(
   tseslint.configs.strictTypeChecked,
   tseslint.configs.stylisticTypeChecked,
   tseslint.configs.recommendedTypeChecked,
-  {
-    // forked from https://www.npmjs.com/package/eslint-plugin-restrict-imports
-    plugins: {
-      import: {
-        rules: {
-          "default-imports-only": {
-            meta: {
-              type: "suggestion",
-              docs: {},
-              schema: [
-                {
-                  bannedImport: {
-                    locations: ["filePaths"],
-                    message: "string",
-                    fixedLocation: "string",
-                  },
-                },
-              ],
-            },
-            create: function (context) {
-              const filePath = context.getFilename();
-              const options = context.options[0] || {
-                "^/(.*)": {
-                  locations: ["(.*)"],
-                },
-              };
-
-              return {
-                ImportDeclaration: (node) => {
-                  Object.entries(options).forEach(([bannedImport, config]) => {
-                    const importLocationRegex = new RegExp(bannedImport);
-
-                    if (config.ignoreTypeImports && node.importKind === "type") return;
-
-                    if (importLocationRegex.test(node.source.value)) {
-                      config.locations.forEach((fp) => {
-                        const bannedLocationRegex = new RegExp(fp);
-
-                        if (bannedLocationRegex.test(filePath)) {
-                          node.specifiers.forEach((specifier) => {
-                            if (specifier.type !== "ImportDefaultSpecifier") {
-                              context.report({
-                                message: config.message ?? `Importing from '${bannedImport}' is banned in '${fp}'`,
-                                node,
-                              });
-                            }
-                          });
-                        }
-                      });
-                    }
-                  });
-                },
-              };
-            },
-          },
-        },
-      },
-    },
-    rules: {
-      "import/default-imports-only": [
-        "error",
-        {
-          "maplibre-gl$": {
-            locations: ["^(?!.*\.d\.ts$).*\.((ts|js))$"],
-            message: `Maplibre-gl uses CJS modules, only default imports are supported, named imports may fail on some setups.`,
-            ignoreTypeImports: true,
-          },
-        },
-      ],
-    },
-  },
   {
     languageOptions: {
       parserOptions: {
@@ -103,7 +32,7 @@ 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": "warn",
@@ -115,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",
@@ -124,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,6 +1,6 @@
 {
   "name": "@maptiler/sdk",
-  "version": "3.2.2",
+  "version": "3.4.0-rc1",
   "description": "The Javascript & TypeScript map SDK tailored for MapTiler Cloud",
   "author": "MapTiler",
   "module": "dist/maptiler-sdk.mjs",
@@ -36,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",
@@ -49,7 +50,10 @@
     "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"
@@ -57,6 +61,7 @@
   "devDependencies": {
     "@canvas/image-data": "^1.0.0",
     "@eslint/js": "^9.21.0",
+    "@playwright/test": "^1.52.0",
     "@types/uuid": "^10.0.0",
     "@types/xmldom": "^0.1.31",
     "@vitest/web-worker": "^3.0.9",
@@ -68,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",

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,8 +26,11 @@
   },
   "include": [
     "src",
-    "test",
+    "e2e",
+    "./eslint.config.mjs",
     "./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/maptiler-sdk.d.ts

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