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

package/README.md

@@ -26,4 +26,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
+
+Use `captureId` to disambiguate repeated named maps:
+
+```svelte
+<TileflowMap map="madrid" captureId="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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tileflow/svelte",
-  "version": "0.1.0-alpha.13",
+  "version": "0.1.0-alpha.16",
   "description": "Svelte component for rendering Tileflow maps with MapLibre.",
   "type": "module",
   "sideEffects": false,
@@ -8,11 +8,11 @@
   "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/svelte"
   },
   "bugs": {
-    "url": "https://github.com/tileflow/tileflow/issues"
+    "url": "https://github.com/tileflow/tileflow-sdk/issues"
   },
   "keywords": [
     "tileflow",
@@ -42,7 +42,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@tileflow/core": "0.1.0-alpha.13"
+    "@tileflow/core": "0.1.0-alpha.16"
   },
   "peerDependencies": {
     "maplibre-gl": ">=5",
@@ -55,6 +55,8 @@
   },
   "scripts": {
     "build": "svelte-check --tsconfig ./tsconfig.json",
+    "test": "node --test test/*.test.js",
+    "verify": "pnpm run build && pnpm run test",
     "typecheck": "svelte-check --tsconfig ./tsconfig.json",
     "lint": "svelte-check --tsconfig ./tsconfig.json"
   }

package/src/TileflowMap.svelte

@@ -7,12 +7,13 @@
     type RequestTransformFunction,
     type StyleSpecification,
   } from 'maplibre-gl';
-  import {createEventDispatcher, onMount} from 'svelte';
+  import {createEventDispatcher, onMount, tick} from 'svelte';
   import {
     createTileflowSessionId,
     defaultTileflowManifestUrl,
     loadTileflowManifest,
     mergeTileflowAnalytics,
+    normalizeTileflowCaptureId,
     normalizeTileflowStaticImageSize,
     resolveTileflowAnalyticsRequestUrl,
     resolveTileflowManifestMap,
@@ -37,6 +38,7 @@
   const defaultZoom = 2;
 
   export let center: [number, number] | undefined = undefined;
+  export let captureId: string | undefined = undefined;
   export let className = '';
   export let config: TileflowConfig | undefined = undefined;
   export let height: number | string = 420;
@@ -57,6 +59,7 @@
   export let zoom: number | undefined = undefined;
 
   let container: HTMLDivElement;
+  let captureState: 'error' | 'idle' | 'loading' = 'loading';
   let imageSize: {height: number; width: number} | null = null;
   let imageResizeObserver: ResizeObserver | null = null;
   let mapInstance: MapLibreMap | null = null;
@@ -66,12 +69,14 @@
   let manifestLoadId = 0;
   let mounted = false;
   let refreshRunId = 0;
+  let readinessRunId = 0;
 
   const dispatch = createEventDispatcher<{load: MapLibreMap}>();
   const sessionId = createTileflowSessionId();
   const sessionStarts = new Set<string>();
 
   $: resolvedMode = resolveTileflowMapMode({imageUrl, mode, preferLocalDev});
+  $: resolvedCaptureId = normalizeTileflowCaptureId(captureId);
   $: isImageMode = resolvedMode === 'image';
   $: imageCenter = center ?? defaultCenter;
   $: imageZoom = zoom ?? defaultZoom;
@@ -134,6 +139,11 @@
     syncMarkers();
   }
 
+  $: if (mounted && isImageMode) {
+    runtimeImageUrl;
+    void markImageLoading();
+  }
+
   onMount(() => {
     mounted = true;
 
@@ -214,6 +224,7 @@
   }
 
   function destroyMap() {
+    readinessRunId += 1;
     mapResizeObserver?.disconnect();
     mapResizeObserver = null;
     clearMarkers();
@@ -223,6 +234,7 @@
 
   function recreateMap() {
     destroyMap();
+    captureState = 'loading';
 
     if (!container || !runtimeStyle || isImageMode) {
       return;
@@ -275,6 +287,28 @@
         }
       }
     });
+    maplibreMap.on('dataloading', () => {
+      readinessRunId += 1;
+      captureState = 'loading';
+    });
+    maplibreMap.on('styledataloading', () => {
+      readinessRunId += 1;
+      captureState = 'loading';
+    });
+    maplibreMap.on('idle', () => {
+      const runId = ++readinessRunId;
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          if (runId === readinessRunId && mapInstance === maplibreMap) {
+            captureState = 'idle';
+          }
+        });
+      });
+    });
+    maplibreMap.on('error', () => {
+      readinessRunId += 1;
+      captureState = 'error';
+    });
 
     syncMarkers();
   }
@@ -313,6 +347,42 @@
     markerInstances = [];
   }
 
+  async function handleImageLoad(event: Event) {
+    await markImageReady(event.currentTarget as HTMLImageElement);
+  }
+
+  async function markImageReady(image: HTMLImageElement) {
+    const runId = ++readinessRunId;
+    try {
+      if (typeof image.decode === 'function') await image.decode();
+    } catch {
+      if (!image.complete || image.naturalWidth === 0) {
+        if (runId === readinessRunId) captureState = 'error';
+        return;
+      }
+    }
+    if (runId === readinessRunId) captureState = 'idle';
+  }
+
+  async function markImageLoading() {
+    const runId = ++readinessRunId;
+    captureState = 'loading';
+    await tick();
+    if (!mounted || runId !== readinessRunId) return;
+    const image = container?.querySelector('img');
+    if (!image?.complete) return;
+    if (image.naturalWidth === 0) {
+      captureState = 'error';
+      return;
+    }
+    await markImageReady(image);
+  }
+
+  function handleImageError() {
+    readinessRunId += 1;
+    captureState = 'error';
+  }
+
   function createTransformRequest(
     getAnalytics: () => TileflowAnalytics | undefined,
     session: string,
@@ -358,12 +428,21 @@
   }
 </script>
 
-<div bind:this={container} class={className} style={frameStyle}>
+<div
+  bind:this={container}
+  class={className}
+  data-tileflow-capture-id={resolvedCaptureId}
+  data-tileflow-map={map}
+  data-tileflow-state={captureState}
+  style={frameStyle}
+>
   {#if isImageMode && runtimeImageUrl}
     <img
       {alt}
       decoding="async"
       loading={imageLoading}
+      on:error={handleImageError}
+      on:load={handleImageLoad}
       src={runtimeImageUrl}
       style="display: block; height: 100%; object-fit: cover; width: 100%;"
     />

package/src/TileflowMap.svelte.d.ts

@@ -1,5 +1,5 @@
-import type {SvelteComponentTyped} from 'svelte';
 import type {Map as MapLibreMap} from 'maplibre-gl';
+import type {SvelteComponentTyped} from 'svelte';
 import type {TileflowMapProps} from './index';
 
 export default class TileflowMap extends SvelteComponentTyped<

package/src/index.d.ts

@@ -15,6 +15,7 @@ export type TileflowMapProps = {
   alt?: string;
   analytics?: TileflowAnalytics;
   center?: [number, number];
+  captureId?: string;
   className?: string;
   config?: TileflowConfig;
   height?: number | string;