@tileflow/svelte 0.1.0-alpha.22 → 0.1.0-alpha.23

package/README.md

@@ -22,6 +22,23 @@ Install `maplibre-gl` alongside the package and import its CSS once in your app.
 />
 ```
 
+## MapLibre 6 worker
+
+With MapLibre GL JS 6, configure the application-owned worker once before mounting an interactive
+map. The worker URL must come from the same `maplibre-gl` package installed by the application.
+
+```ts
+// main.ts
+import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
+import {configureTileflowMapLibre} from '@tileflow/svelte';
+
+configureTileflowMapLibre({workerUrl});
+```
+
+This is the Vite setup. Run it before `mount(...)`; `mode="image"` remains MapLibre-free. MapLibre
+GL JS 6.4.1-6.x is supported. Use the `@tileflow/next` or `@tileflow/webpack` README for their
+worker-delivery recipes.
+
 `mapOptions` accepts native MapLibre options except `container` and `style`, which
 Tileflow resolves from `source`. Direct
 Tileflow props such as `center`, `zoom`, and `interactive` take priority when
@@ -186,9 +203,9 @@ present. Application capture selects exactly one ready target.
 
 ## Compatibility
 
-The supported peer window is Svelte 5.x and MapLibre GL JS 5-6. Compatibility smoke tests install
-Svelte 5.0.0 with the first release of both MapLibre majors from packed Tileflow tarballs, typecheck
-the public declarations, and compile real Svelte consumers. Future Svelte majors stay outside the
-peer range until that matrix passes.
+The supported peer window is Svelte 5.x and MapLibre GL JS 6.4.1-6.x. Compatibility smoke tests
+install Svelte 5.0.0 with the exact lower bound and selected current release from packed Tileflow
+tarballs, typecheck the public declarations, and compile real Svelte consumers. Future Svelte majors
+stay outside the peer range until that matrix passes.
 
 Docs: https://tileflow.dev/docs

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tileflow/svelte",
-  "version": "0.1.0-alpha.22",
+  "version": "0.1.0-alpha.23",
   "license": "Apache-2.0",
   "description": "Svelte component for rendering Tileflow maps with MapLibre.",
   "type": "module",
@@ -45,14 +45,14 @@
   },
   "dependencies": {
     "@tileflow/core": ">=0.1.0-alpha.24 <0.1.0-beta.0",
-    "@tileflow/interactions": ">=0.1.0-alpha.2 <0.1.0-beta.0"
+    "@tileflow/interactions": ">=0.1.0-alpha.3 <0.1.0-beta.0"
   },
   "peerDependencies": {
-    "maplibre-gl": ">=5 <7",
+    "maplibre-gl": ">=6.4.1 <7",
     "svelte": ">=5 <6"
   },
   "devDependencies": {
-    "maplibre-gl": "^5.24.0",
+    "maplibre-gl": "6.9.0",
     "svelte": "^5.43.17",
     "svelte-check": "^4.3.4"
   },

package/src/TileflowMap.svelte

@@ -1202,9 +1202,11 @@
   }
 
   function createTileflowMapLibrePoiMap(map: MapLibreMap): TileflowMapLibrePoiMap {
+    const poiMap = map as unknown as TileflowMapLibrePoiMap;
+
     return {
       getStyle: () => map.getStyle(),
-      on: (event, listener) => map.on(event, listener),
+      on: (event, listener) => poiMap.on(event, listener),
       queryRenderedFeatures(point, options) {
         return map
           .queryRenderedFeatures(point as PointLike, {layers: [...options.layers]})

package/src/index.d.ts

@@ -19,6 +19,10 @@ import type {
 export type TileflowMapMode = 'interactive' | 'image';
 export type TileflowMapOptions = Omit<MapLibreMapOptions, 'container' | 'style'>;
 export type TileflowMapSource = TileflowRuntimeSource;
+export type TileflowMapLibreConfiguration = Readonly<{workerUrl: string}>;
+
+/** Configure the application-owned worker before mounting an interactive Tileflow map. */
+export function configureTileflowMapLibre(configuration: TileflowMapLibreConfiguration): void;
 
 export type TileflowMapAnnotationSnippet<
   TAnnotation extends TileflowAnnotation = TileflowAnnotation,

package/src/index.js

@@ -1 +1,2 @@
 export {default, default as TileflowMap} from './TileflowMap.svelte';
+export {configureTileflowMapLibre} from './maplibre.js';

package/src/maplibre.js

@@ -1,14 +1,39 @@
 /** @typedef {typeof import('maplibre-gl')} TileflowMapLibre */
+/** @typedef {{workerUrl: string}} TileflowMapLibreConfiguration */
 
 /** @type {Promise<TileflowMapLibre> | undefined} */
 let mapLibrePromise;
+/** @type {TileflowMapLibre | undefined} */
+let mapLibre;
+/** @type {string | undefined} */
+let workerUrl;
+
+/** @param {TileflowMapLibreConfiguration} configuration */
+export function configureTileflowMapLibre(configuration) {
+  const nextWorkerUrl = configuration.workerUrl;
+
+  if (typeof nextWorkerUrl !== 'string' || nextWorkerUrl.trim().length === 0) {
+    throw new TypeError('Tileflow MapLibre workerUrl must be a non-empty string.');
+  }
+
+  if (workerUrl !== undefined && workerUrl !== nextWorkerUrl) {
+    throw new Error('Tileflow MapLibre workerUrl is already configured.');
+  }
+
+  workerUrl = nextWorkerUrl;
+  mapLibre?.setWorkerUrl(nextWorkerUrl);
+}
 
 /** Load the interactive renderer only after a browser map requests it. */
 export function loadTileflowMapLibre() {
-  mapLibrePromise ??= import('maplibre-gl').then(resolveMapLibreModule).catch((error) => {
-    mapLibrePromise = undefined;
-    throw error;
-  });
+  mapLibrePromise ??= import('maplibre-gl')
+    .then(resolveMapLibreModule)
+    .then(configureTileflowMapLibreModule)
+    .catch((error) => {
+      mapLibrePromise = undefined;
+      throw error;
+    });
+
   return mapLibrePromise;
 }
 
@@ -16,3 +41,10 @@ export function loadTileflowMapLibre() {
 function resolveMapLibreModule(module) {
   return /** @type {TileflowMapLibre & {default?: TileflowMapLibre}} */ (module).default ?? module;
 }
+
+/** @param {TileflowMapLibre} maplibregl */
+function configureTileflowMapLibreModule(maplibregl) {
+  if (workerUrl !== undefined) maplibregl.setWorkerUrl(workerUrl);
+  mapLibre = maplibregl;
+  return maplibregl;
+}