@maptiler/sdk 3.10.2-rc.1 → 3.10.2-rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/maptiler-sdk.mjs +638 -628
  2. package/dist/maptiler-sdk.mjs.map +1 -1
  3. package/dist/src/Map.d.ts +5 -0
  4. package/e2e/public/rtlTextPlugin.html +24 -0
  5. package/e2e/snapshots/tests/rtlTextPlugin.test.ts-snapshots/rtlTextPlugin-active-chromium-linux.png +0 -0
  6. package/e2e/snapshots/tests/rtlTextPlugin.test.ts-snapshots/rtlTextPlugin-disabled-chromium-linux.png +0 -0
  7. package/e2e/tests/helpers/loadFixtureAndGetMapHandle.ts +44 -42
  8. package/e2e/tests/rtlTextPlugin.test.ts +31 -0
  9. package/package.json +1 -1
  10. package/test-results/tests-map-load-Awaits-until-map-ready-and-takes-snapshot-chromium/trace.zip +0 -0
package/dist/src/Map.d.ts CHANGED
@@ -148,6 +148,11 @@ export type MapOptions = Omit<MapOptionsML, "style" | "maplibreLogo"> & {
148
148
  * Default: Unless this is set explicitly to false, the SDK version will be logged to the console.
149
149
  */
150
150
  logSDKVersion?: boolean;
151
+ /**
152
+ * Whether to enable the RTL plugin or import a different one.
153
+ * Default is undefined, which means the plugin is enabled by default.
154
+ */
155
+ rtlTextPlugin?: boolean | string;
151
156
  };
152
157
  /**
153
158
  * The Map class can be instanciated to display a map in a `<div>`
package/e2e/public/rtlTextPlugin.html ADDED
@@ -0,0 +1,24 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>MapTiler E2E RTL Text Plugin</title>
7
+ <style>
8
+ #map {
9
+ width: 100vw;
10
+ height: 100vh;
11
+ border: 1px solid red;
12
+ }
13
+
14
+ body {
15
+ margin: 0;
16
+ padding: 0;
17
+ }
18
+ </style>
19
+ </head>
20
+ <body>
21
+ <div id="map"></div>
22
+ <script type="module" src="/src/rtlTextPlugin.ts"></script>
23
+ </body>
24
+ </html>
package/e2e/tests/helpers/loadFixtureAndGetMapHandle.ts CHANGED
@@ -9,6 +9,7 @@ interface IloadFixtureAndGetMapHandle {
9
9
  mockTiles?: boolean;
10
10
  debug?: boolean;
11
11
  waitUntil?: "load" | "domcontentloaded" | "networkidle";
12
+ queryParams?: Record<string, string>;
12
13
  }
13
14
 
14
15
  export default async function loadFixtureAndGetMapHandle({
@@ -17,81 +18,82 @@ export default async function loadFixtureAndGetMapHandle({
17
18
  mockStyle = true,
18
19
  mockTiles = true,
19
20
  debug = false,
20
- waitUntil = 'load',
21
+ waitUntil = "load",
22
+ queryParams,
21
23
  }: IloadFixtureAndGetMapHandle): Promise<{ mapHandle: JSHandle<Map | null> }> {
22
24
  if (mockStyle) {
23
25
  // mock style response
24
- await page.route('https://api.maptiler.com/maps/*/*.json*', async route => {
25
- if (debug) console.info(`ℹ️ Style intercepted at ${route.request().url()}`)
26
+ await page.route("https://api.maptiler.com/maps/*/*.json*", async (route) => {
27
+ if (debug) console.info(`ℹ️ Style intercepted at ${route.request().url()}`);
26
28
  await route.fulfill({
27
29
  status: 200,
28
- contentType: 'application/json',
29
- path: path.resolve(import.meta.dirname, '../mocks/maptiler-style.json'),
30
+ contentType: "application/json",
31
+ path: path.resolve(import.meta.dirname, "../mocks/maptiler-style.json"),
30
32
  });
31
33
  });
32
34
  }
33
35
 
34
36
  if (mockTiles) {
35
37
  // mocks the tile response always returning the mock tile
36
- await page.route('https://api.maptiler.com/tiles/*/*/*/*.jpg?key=*&*', route => {
37
- if (debug) console.info(`ℹ️ Tile intercepted at ${route.request().url()}`)
38
+ await page.route("https://api.maptiler.com/tiles/*/*/*/*.jpg?key=*&*", (route) => {
39
+ if (debug) console.info(`ℹ️ Tile intercepted at ${route.request().url()}`);
38
40
  return route.fulfill({
39
41
  status: 200,
40
- contentType: 'image/png',
42
+ contentType: "image/png",
41
43
  path: path.resolve(import.meta.dirname, `../mocks/tile.png`),
42
44
  });
43
45
  });
44
46
  }
45
-
46
- page.on('console', msg => {
47
- console.log('FIXTURE LOG:', msg.text());
47
+
48
+ page.on("console", (msg) => {
49
+ console.log("FIXTURE LOG:", msg.text());
48
50
  if (debug) {
49
- console.log('DEBUG FIXTURE LOG:', msg.location(), msg.text());
51
+ console.log("DEBUG FIXTURE LOG:", msg.location(), msg.text());
50
52
  }
51
- })
52
-
53
- page.addListener('requestfinished', async (request) => {
54
- const response = await request.response()
53
+ });
54
+
55
+ page.addListener("requestfinished", async (request) => {
56
+ const response = await request.response();
55
57
  if (response && response.status() >= 400) {
56
58
  console.error(`\n\nFailed to load ${request.url()}\n status: ${response.status()}\n\n`);
57
59
  expect(response.status()).toBeLessThan(400);
58
60
  }
59
- })
60
-
61
- await page.goto(`http://localhost:5173/${fixture}.html`, {
61
+ });
62
+
63
+ await page.goto([`http://localhost:5173/${fixture}.html`, queryParams && new URLSearchParams(queryParams).toString()].filter(Boolean).join("?"), {
62
64
  waitUntil,
63
65
  });
64
66
 
65
67
  try {
66
68
  const mapHandle = await page.evaluateHandle<Map | null>(() => {
67
69
  return Promise.race<Map | null>([
68
- new Promise<Map | null>(async (resolve) => {
69
- try {
70
- window.__map.on("idle", ()=> {
71
- resolve(window.__map as Map);
72
- })
73
- } catch (e) {
74
- console.error('Error getting map instance', e);
75
- resolve(null)
76
- }
77
- }),
78
- new Promise<Map | null>((resolve) => {
79
- setTimeout(() => {
80
- console.error('Map did not load in time');
81
- resolve(null);
82
- }, 10000);
83
- })
84
- ])
70
+ new Promise<Map | null>(async (resolve) => {
71
+ try {
72
+ window.__map.on("idle", () => {
73
+ resolve(window.__map as Map);
74
+ });
75
+ } catch (e) {
76
+ console.error("Error getting map instance", e);
77
+ resolve(null);
78
+ }
79
+ }),
80
+ new Promise<Map | null>((resolve) => {
81
+ setTimeout(() => {
82
+ console.error("Map did not load in time");
83
+ resolve(null);
84
+ }, 10000);
85
+ }),
86
+ ]);
85
87
  });
86
-
88
+
87
89
  return {
88
90
  mapHandle,
89
- }
90
- } catch(e) {
91
+ };
92
+ } catch (e) {
91
93
  console.error(e);
92
- const nullMap = await page.evaluateHandle(() => null)
94
+ const nullMap = await page.evaluateHandle(() => null);
93
95
  return {
94
96
  mapHandle: nullMap as JSHandle<Map | null>,
95
- }
97
+ };
96
98
  }
97
- }
99
+ }
package/e2e/tests/rtlTextPlugin.test.ts ADDED
@@ -0,0 +1,31 @@
1
+ import { expect, test } from "@playwright/test";
2
+ import path from "path";
3
+ import loadFixtureAndGetMapHandle from "./helpers/loadFixtureAndGetMapHandle";
4
+
5
+ test("Renders RTL text correctly when RTL plugin is enabled and incorrectly when disabled", async ({ page }) => {
6
+ // Route handler for tiles.json
7
+ await page.route("https://api.maptiler.com/tiles/v3/tiles.json*", async (route) => {
8
+ await route.fulfill({
9
+ status: 200,
10
+ contentType: "application/json",
11
+ path: path.resolve(import.meta.dirname, "./mocks/rtl-tiles-json.json"),
12
+ });
13
+ });
14
+
15
+ await loadFixtureAndGetMapHandle({
16
+ fixture: "rtlTextPlugin",
17
+ page,
18
+ });
19
+
20
+ expect(await page.title()).toBe("MapTiler E2E RTL Text Plugin");
21
+
22
+ await expect(page).toHaveScreenshot("rtlTextPlugin-active.png");
23
+
24
+ await loadFixtureAndGetMapHandle({
25
+ fixture: "rtlTextPlugin",
26
+ page,
27
+ queryParams: { "disable-rtl": "true" },
28
+ });
29
+
30
+ await expect(page).toHaveScreenshot("rtlTextPlugin-disabled.png");
31
+ });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@maptiler/sdk",
3
- "version": "3.10.2-rc.1",
3
+ "version": "3.10.2-rc.2",
4
4
  "description": "The Javascript & TypeScript map SDK tailored for MapTiler Cloud",
5
5
  "author": "MapTiler",
6
6
  "module": "dist/maptiler-sdk.mjs",