@tileflow/vue 0.1.0-alpha.16 → 0.1.0-alpha.18

package/README.md

@@ -28,6 +28,10 @@ Tileflow resolves from the map name, manifest, or explicit style props. Direct
 Tileflow props such as `center`, `zoom`, and `interactive` take priority when
 provided.
 
+Hosted maps automatically preflight a short-lived commercial session grant before eligible
+resources. Setting `analytics` with `enabled: false` disables the optional beacon only; it does not
+remove hosted authorization or override a user `mapOptions.transformRequest` callback.
+
 ## Headless capture readiness
 
 Pass `capture-id` when a page contains multiple copies of the same named map:

package/dist/index.js

@@ -12,20 +12,24 @@ import {
   watch
 } from "vue";
 import {
-  createTileflowSessionId,
+  createTileflowSessionController,
   defaultTileflowManifestUrl,
   loadTileflowManifest,
   mergeTileflowAnalytics,
   normalizeTileflowCaptureId,
   normalizeTileflowStaticImageSize,
-  resolveTileflowAnalyticsRequestUrl,
   resolveTileflowManifestMap,
   resolveTileflowMapMode,
   resolveTileflowRuntimeStyle,
   resolveTileflowStaticImageUrl,
-  shouldLoadTileflowManifest,
-  startTileflowSession
+  shouldLoadTileflowManifest
 } from "@tileflow/core";
+import {
+  attachTileflowMapLifecycle,
+  createTileflowMarkerController,
+  createTileflowSessionStarter,
+  createTileflowTransformRequest
+} from "@tileflow/core/browser";
 var defaultCenter = [0, 20];
 var defaultZoom = 2;
 var TileflowMap = defineComponent({
@@ -88,10 +92,18 @@ var TileflowMap = defineComponent({
     const imageSize = shallowRef(null);
     const mapRef = shallowRef(null);
     const captureState = ref("loading");
-    const sessionId = createTileflowSessionId();
-    const markerInstances = [];
-    const sessionStarts = /* @__PURE__ */ new Set();
+    const markerController = createTileflowMarkerController({
+      attach(markerInstance, map, marker) {
+        markerInstance.setLngLat(marker.coordinates).addTo(map);
+        markerInstance.getElement().title = marker.label ?? marker.id;
+      },
+      create: (marker) => new maplibregl.Marker({
+        color: marker.color ?? "#C6A15B"
+      }),
+      remove: (marker) => marker.remove()
+    });
     let imageResizeObserver = null;
+    let mapLifecycle = null;
     let mapResizeObserver = null;
     let manifestLoadId = 0;
     let readinessRunId = 0;
@@ -193,11 +205,25 @@ var TileflowMap = defineComponent({
     };
     const destroyMap = () => {
       readinessRunId += 1;
-      mapResizeObserver?.disconnect();
+      const lifecycle = mapLifecycle;
+      const resizeObserver = mapResizeObserver;
+      const map = mapRef.value;
+      mapLifecycle = null;
       mapResizeObserver = null;
-      clearMarkers(markerInstances);
-      mapRef.value?.remove();
       mapRef.value = null;
+      try {
+        lifecycle?.dispose();
+      } finally {
+        try {
+          resizeObserver?.disconnect();
+        } finally {
+          try {
+            markerController.clear();
+          } finally {
+            map?.remove();
+          }
+        }
+      }
     };
     const recreateMap = () => {
       destroyMap();
@@ -206,6 +232,13 @@ var TileflowMap = defineComponent({
         return;
       }
       const runtime = runtimeStyle.value;
+      const analyticsForMap = resolvedAnalytics.value;
+      const session = createTileflowSessionController({ source: "vue" });
+      const sessionStarter = createTileflowSessionStarter({
+        getSessionId: () => session.sessionId,
+        sessionId: session.sessionId,
+        source: "vue"
+      });
       const map = new maplibregl.Map({
         ...props.mapOptions,
         attributionControl: props.mapOptions?.attributionControl ?? { compact: true },
@@ -213,11 +246,12 @@ var TileflowMap = defineComponent({
         container: containerRef.value,
         interactive: resolvedInteractive.value,
         style: runtime.style,
-        transformRequest: createTransformRequest(
-          resolvedAnalytics.value,
-          sessionId,
-          props.mapOptions?.transformRequest
-        ),
+        transformRequest: createTileflowTransformRequest({
+          getAnalytics: () => analyticsForMap,
+          sessionController: session,
+          sessionId: session.sessionId,
+          transformRequest: props.mapOptions?.transformRequest ?? void 0
+        }),
         zoom: resolvedZoom.value
       });
       mapRef.value = map;
@@ -228,45 +262,29 @@ var TileflowMap = defineComponent({
         map.resize();
       });
       mapResizeObserver.observe(containerRef.value);
-      map.on("load", () => {
-        const analyticsForLoad = resolvedAnalytics.value;
-        const styleId = analyticsForLoad?.styleId ?? (typeof runtime.style === "string" ? runtime.style : props.map);
-        emit("load", map);
-        if (analyticsForLoad?.mapId) {
-          const sessionKey = `${sessionId}:${analyticsForLoad.mapId}:${styleId ?? ""}`;
-          if (!sessionStarts.has(sessionKey)) {
-            sessionStarts.add(sessionKey);
-            startTileflowSession(analyticsForLoad, {
-              mapId: analyticsForLoad.mapId,
-              sessionId,
-              source: "vue",
-              styleId
-            });
-          }
+      mapLifecycle = attachTileflowMapLifecycle({
+        getSession: () => {
+          const analyticsForLoad = resolvedAnalytics.value;
+          return {
+            analytics: analyticsForLoad,
+            styleId: analyticsForLoad?.styleId ?? (typeof runtime.style === "string" ? runtime.style : props.map)
+          };
+        },
+        map,
+        onLoad: (loadedMap) => emit("load", loadedMap),
+        scheduler: {
+          cancelFrame: (frame) => cancelAnimationFrame(frame),
+          requestFrame: (callback) => requestAnimationFrame(callback)
+        },
+        sessionStarter,
+        setState: (state) => {
+          captureState.value = state;
+        },
+        subscribe: (subscribedMap, event, listener) => {
+          const subscription = subscribedMap.on(event, listener);
+          return () => subscription.unsubscribe();
         }
       });
-      map.on("dataloading", () => {
-        readinessRunId += 1;
-        captureState.value = "loading";
-      });
-      map.on("styledataloading", () => {
-        readinessRunId += 1;
-        captureState.value = "loading";
-      });
-      map.on("idle", () => {
-        const runId = ++readinessRunId;
-        requestAnimationFrame(() => {
-          requestAnimationFrame(() => {
-            if (runId === readinessRunId && mapRef.value === map) {
-              captureState.value = "idle";
-            }
-          });
-        });
-      });
-      map.on("error", () => {
-        readinessRunId += 1;
-        captureState.value = "error";
-      });
       syncMarkers();
     };
     const syncView = () => {
@@ -277,17 +295,11 @@ var TileflowMap = defineComponent({
     };
     const syncMarkers = () => {
       const map = mapRef.value;
-      clearMarkers(markerInstances);
       if (!map) {
+        markerController.clear();
         return;
       }
-      for (const marker of props.markers) {
-        const markerInstance = new maplibregl.Marker({
-          color: marker.color ?? "#C6A15B"
-        }).setLngLat(marker.coordinates).addTo(map);
-        markerInstance.getElement().title = marker.label ?? marker.id;
-        markerInstances.push(markerInstance);
-      }
+      markerController.replace(map, props.markers);
     };
     const markImageReady = async (image) => {
       const runId = ++readinessRunId;
@@ -421,40 +433,9 @@ var TileflowMap = defineComponent({
   }
 });
 var index_default = TileflowMap;
-function createTransformRequest(analytics, sessionId, userTransformRequest) {
-  if ((!analytics || analytics.enabled === false) && !userTransformRequest) {
-    return void 0;
-  }
-  return (url, resourceType) => {
-    const request = userTransformRequest?.(url, resourceType);
-    if (isPromiseLike(request)) {
-      return request.then(
-        (resolvedRequest) => applyTileflowAnalyticsRequest(url, resolvedRequest, analytics, sessionId) ?? resolvedRequest
-      );
-    }
-    return applyTileflowAnalyticsRequest(url, request, analytics, sessionId);
-  };
-}
-function applyTileflowAnalyticsRequest(url, request, analytics, sessionId) {
-  const requestUrl = request?.url ?? url;
-  const nextUrl = resolveTileflowAnalyticsRequestUrl(requestUrl, analytics, sessionId);
-  if (!nextUrl) {
-    return request;
-  }
-  return request ? { ...request, url: nextUrl } : { url: nextUrl };
-}
-function isPromiseLike(value) {
-  return Boolean(value && typeof value.then === "function");
-}
 function formatHeight(height) {
   return typeof height === "number" ? `${height}px` : height;
 }
-function clearMarkers(markerInstances) {
-  for (const marker of markerInstances) {
-    marker.remove();
-  }
-  markerInstances.splice(0);
-}
 export {
   TileflowMap,
   index_default as default

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tileflow/vue",
-  "version": "0.1.0-alpha.16",
+  "version": "0.1.0-alpha.18",
   "description": "Vue component for rendering Tileflow maps with MapLibre.",
   "type": "module",
   "sideEffects": false,
@@ -36,7 +36,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@tileflow/core": "0.1.0-alpha.16"
+    "@tileflow/core": ">=0.1.0-alpha.18 <0.1.0-beta.0"
   },
   "peerDependencies": {
     "maplibre-gl": ">=5",