@tileflow/vue 0.1.0-alpha.14 → 0.1.0-alpha.17

package/README.md

@@ -28,4 +28,17 @@ Tileflow resolves from the map name, manifest, or explicit style props. Direct
 Tileflow props such as `center`, `zoom`, and `interactive` take priority when
 provided.
 
+## Headless capture readiness
+
+Pass `capture-id` when a page contains multiple copies of the same named map:
+
+```vue
+<TileflowMap map="madrid" capture-id="checkout-map" />
+```
+
+The root exposes `data-tileflow-map`, optional `data-tileflow-capture-id`, and
+`data-tileflow-state="loading|idle|error"`. It becomes idle only after MapLibre idle plus two
+animation frames (or image decode/load in image mode), returns to loading for new style/data work,
+and marks terminal load errors. Application capture selects exactly one ready target.
+
 Docs: https://tileflow.dev/docs

package/dist/index.d.ts

@@ -9,6 +9,7 @@ type TileflowMapProps = {
     alt?: string;
     analytics?: TileflowAnalytics;
     center?: [number, number];
+    captureId?: string;
     className?: string;
     config?: TileflowConfig;
     height?: number | string;
@@ -35,6 +36,7 @@ declare const TileflowMap: vue.DefineComponent<vue.ExtractPropTypes<{
     };
     analytics: PropType<TileflowAnalytics>;
     center: PropType<[number, number]>;
+    captureId: StringConstructor;
     className: StringConstructor;
     config: PropType<TileflowConfig>;
     height: {
@@ -85,6 +87,7 @@ declare const TileflowMap: vue.DefineComponent<vue.ExtractPropTypes<{
     };
     analytics: PropType<TileflowAnalytics>;
     center: PropType<[number, number]>;
+    captureId: StringConstructor;
     className: StringConstructor;
     config: PropType<TileflowConfig>;
     height: {

package/dist/index.js

@@ -4,6 +4,7 @@ import {
   computed,
   defineComponent,
   h,
+  nextTick,
   onBeforeUnmount,
   onMounted,
   ref,
@@ -15,15 +16,20 @@ import {
   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({
@@ -36,6 +42,7 @@ var TileflowMap = defineComponent({
     },
     analytics: Object,
     center: Array,
+    captureId: String,
     className: String,
     config: Object,
     height: {
@@ -84,12 +91,27 @@ var TileflowMap = defineComponent({
     const manifestMap = shallowRef(null);
     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()
+    });
+    const sessionStarter = createTileflowSessionStarter({
+      sessionId,
+      source: "vue"
+    });
     let imageResizeObserver = null;
+    let mapLifecycle = null;
     let mapResizeObserver = null;
     let manifestLoadId = 0;
+    let readinessRunId = 0;
     const resolvedMode = computed(
       () => resolveTileflowMapMode({
         imageUrl: props.imageUrl,
@@ -138,6 +160,7 @@ var TileflowMap = defineComponent({
       position: "relative",
       width: "100%"
     }));
+    const resolvedCaptureId = computed(() => normalizeTileflowCaptureId(props.captureId));
     const refreshManifest = async () => {
       const shouldLoad = shouldLoadTileflowManifest({
         config: props.config,
@@ -186,18 +209,35 @@ var TileflowMap = defineComponent({
       updateImageSize();
     };
     const destroyMap = () => {
-      mapResizeObserver?.disconnect();
+      readinessRunId += 1;
+      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();
+      captureState.value = "loading";
       if (!containerRef.value || !runtimeStyle.value || isImageMode.value) {
         return;
       }
       const runtime = runtimeStyle.value;
+      const analyticsForMap = resolvedAnalytics.value;
       const map = new maplibregl.Map({
         ...props.mapOptions,
         attributionControl: props.mapOptions?.attributionControl ?? { compact: true },
@@ -205,11 +245,11 @@ var TileflowMap = defineComponent({
         container: containerRef.value,
         interactive: resolvedInteractive.value,
         style: runtime.style,
-        transformRequest: createTransformRequest(
-          resolvedAnalytics.value,
+        transformRequest: createTileflowTransformRequest({
+          getAnalytics: () => analyticsForMap,
           sessionId,
-          props.mapOptions?.transformRequest
-        ),
+          transformRequest: props.mapOptions?.transformRequest ?? void 0
+        }),
         zoom: resolvedZoom.value
       });
       mapRef.value = map;
@@ -220,21 +260,27 @@ 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();
         }
       });
       syncMarkers();
@@ -247,22 +293,43 @@ 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;
+      try {
+        if (typeof image.decode === "function") await image.decode();
+      } catch {
+        if (!image.complete || image.naturalWidth === 0) {
+          if (runId === readinessRunId) captureState.value = "error";
+          return;
+        }
+      }
+      if (runId === readinessRunId) captureState.value = "idle";
+    };
+    const resetImageReadiness = async () => {
+      if (!isImageMode.value) return;
+      const runId = ++readinessRunId;
+      captureState.value = "loading";
+      await nextTick();
+      if (runId !== readinessRunId) return;
+      const image = containerRef.value?.querySelector("img");
+      if (!image?.complete) return;
+      if (image.naturalWidth === 0) {
+        captureState.value = "error";
+        return;
       }
+      await markImageReady(image);
     };
     onMounted(() => {
       void refreshManifest();
       updateImageResizeObserver();
       recreateMap();
+      void resetImageReadiness();
     });
     onBeforeUnmount(() => {
       imageResizeObserver?.disconnect();
@@ -284,6 +351,13 @@ var TileflowMap = defineComponent({
         void refreshManifest();
       }
     );
+    watch(
+      () => [isImageMode.value, runtimeImageUrl.value],
+      () => {
+        void resetImageReadiness();
+      },
+      { flush: "post" }
+    );
     watch(
       () => [props.imageUrl, props.mode, props.preferLocalDev],
       () => updateImageResizeObserver(),
@@ -329,6 +403,9 @@ var TileflowMap = defineComponent({
         {
           ...rootAttrs,
           class: classValue,
+          "data-tileflow-capture-id": resolvedCaptureId.value,
+          "data-tileflow-map": props.map,
+          "data-tileflow-state": captureState.value,
           ref: containerRef,
           style: styleValue
         },
@@ -336,6 +413,11 @@ var TileflowMap = defineComponent({
           alt: props.alt,
           decoding: "async",
           loading: props.imageLoading,
+          onError: () => {
+            readinessRunId += 1;
+            captureState.value = "error";
+          },
+          onLoad: (event) => void markImageReady(event.currentTarget),
           src: runtimeImageUrl.value,
           style: {
             display: "block",
@@ -349,40 +431,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,17 +1,17 @@
 {
   "name": "@tileflow/vue",
-  "version": "0.1.0-alpha.14",
+  "version": "0.1.0-alpha.17",
   "description": "Vue component for rendering Tileflow maps with MapLibre.",
   "type": "module",
   "sideEffects": false,
   "homepage": "https://tileflow.dev",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/tileflow/tileflow.git",
+    "url": "git+https://github.com/tileflow/tileflow-sdk.git",
     "directory": "packages/vue"
   },
   "bugs": {
-    "url": "https://github.com/tileflow/tileflow/issues"
+    "url": "https://github.com/tileflow/tileflow-sdk/issues"
   },
   "keywords": [
     "tileflow",
@@ -36,18 +36,22 @@
     "access": "public"
   },
   "dependencies": {
-    "@tileflow/core": "0.1.0-alpha.14"
+    "@tileflow/core": ">=0.1.0-alpha.17 <0.1.0-beta.0"
   },
   "peerDependencies": {
     "maplibre-gl": ">=5",
     "vue": ">=3.3"
   },
   "devDependencies": {
+    "@vue/server-renderer": "3.5.39",
     "maplibre-gl": "^5.24.0",
+    "tsx": "^4.23.1",
     "vue": "^3.5.26"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm --dts --clean --external vue --external maplibre-gl",
+    "test": "tsx --test test/*.test.ts",
+    "verify": "pnpm run build && pnpm run test",
     "typecheck": "tsc -p tsconfig.json --noEmit",
     "lint": "tsc -p tsconfig.json --noEmit"
   }