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

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,6 +16,7 @@ import {
   defaultTileflowManifestUrl,
   loadTileflowManifest,
   mergeTileflowAnalytics,
+  normalizeTileflowCaptureId,
   normalizeTileflowStaticImageSize,
   resolveTileflowAnalyticsRequestUrl,
   resolveTileflowManifestMap,
@@ -36,6 +38,7 @@ var TileflowMap = defineComponent({
     },
     analytics: Object,
     center: Array,
+    captureId: String,
     className: String,
     config: Object,
     height: {
@@ -84,12 +87,14 @@ 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();
     let imageResizeObserver = null;
     let mapResizeObserver = null;
     let manifestLoadId = 0;
+    let readinessRunId = 0;
     const resolvedMode = computed(
       () => resolveTileflowMapMode({
         imageUrl: props.imageUrl,
@@ -138,6 +143,7 @@ var TileflowMap = defineComponent({
       position: "relative",
       width: "100%"
     }));
+    const resolvedCaptureId = computed(() => normalizeTileflowCaptureId(props.captureId));
     const refreshManifest = async () => {
       const shouldLoad = shouldLoadTileflowManifest({
         config: props.config,
@@ -186,6 +192,7 @@ var TileflowMap = defineComponent({
       updateImageSize();
     };
     const destroyMap = () => {
+      readinessRunId += 1;
       mapResizeObserver?.disconnect();
       mapResizeObserver = null;
       clearMarkers(markerInstances);
@@ -194,6 +201,7 @@ var TileflowMap = defineComponent({
     };
     const recreateMap = () => {
       destroyMap();
+      captureState.value = "loading";
       if (!containerRef.value || !runtimeStyle.value || isImageMode.value) {
         return;
       }
@@ -237,6 +245,28 @@ var TileflowMap = defineComponent({
           }
         }
       });
+      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 = () => {
@@ -259,10 +289,37 @@ var TileflowMap = defineComponent({
         markerInstances.push(markerInstance);
       }
     };
+    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 +341,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 +393,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 +403,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",

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@tileflow/vue",
-  "version": "0.1.0-alpha.13",
+  "version": "0.1.0-alpha.16",
   "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.13"
+    "@tileflow/core": "0.1.0-alpha.16"
   },
   "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"
   }