@tileflow/react 0.1.0-alpha.16 → 0.1.0-alpha.17

package/dist/index.js

@@ -16,14 +16,18 @@ import {
   mergeTileflowAnalytics,
   normalizeTileflowCaptureId,
   normalizeTileflowStaticImageSize,
-  resolveTileflowAnalyticsRequestUrl,
   resolveTileflowManifestMap,
   resolveTileflowMapMode,
   resolveTileflowRuntimeStyle,
   resolveTileflowStaticImageUrl,
-  shouldLoadTileflowManifest,
-  startTileflowSession
+  shouldLoadTileflowManifest
 } from "@tileflow/core";
+import {
+  attachTileflowMapLifecycle,
+  createTileflowMarkerController,
+  createTileflowSessionStarter,
+  createTileflowTransformRequest
+} from "@tileflow/core/browser";
 import { jsx } from "react/jsx-runtime";
 var defaultCenter = [0, 20];
 var defaultMarkers = [];
@@ -55,7 +59,6 @@ function Map({
   const containerRef = useRef(null);
   const imageRef = useRef(null);
   const mapRef = useRef(null);
-  const markerInstancesRef = useRef([]);
   const stableMapOptions = useStableMapOptions(mapOptions);
   const resolvedCenter = useStableMapOptionValue(
     center ?? stableMapOptions?.center ?? defaultCenter
@@ -68,9 +71,29 @@ function Map({
   const onLoadRef = useRef(onLoad);
   const mapNameRef = useRef(mapName);
   const resolvedAnalyticsRef = useRef(void 0);
-  const sessionStartsRef = useRef(/* @__PURE__ */ new Set());
   const readinessRunRef = useRef(0);
   const sessionId = useMemo(() => createTileflowSessionId(), []);
+  const sessionStarter = useMemo(
+    () => createTileflowSessionStarter({ sessionId, source: "react" }),
+    [sessionId]
+  );
+  const markerController = useMemo(
+    () => createTileflowMarkerController({
+      attach(markerInstance, map, marker) {
+        markerInstance.setLngLat(marker.coordinates).addTo(map);
+        markerInstance.getElement().title = marker.label ?? marker.id;
+      },
+      create(marker) {
+        return new maplibregl.Marker({
+          color: marker.color ?? "#C6A15B"
+        });
+      },
+      remove(markerInstance) {
+        markerInstance.remove();
+      }
+    }),
+    []
+  );
   const [manifestMap, setManifestMap] = useState(null);
   const [imageSize, setImageSize] = useState(null);
   const [captureState, setCaptureState] = useState("loading");
@@ -166,11 +189,13 @@ function Map({
     [imageSize, imageUrl, isImageMode, manifestMap, resolvedZoom, staticImageCenter]
   );
   const transformRequest = useMemo(
-    () => createTransformRequest(
-      () => resolvedAnalyticsRef.current,
+    () => createTileflowTransformRequest({
+      always: true,
+      asyncAnalyticsTiming: "resolution",
+      getAnalytics: () => resolvedAnalyticsRef.current,
       sessionId,
-      stableMapOptions?.transformRequest
-    ),
+      transformRequest: stableMapOptions?.transformRequest ?? void 0
+    }),
     [sessionId, stableMapOptions?.transformRequest]
   );
   useEffect(() => {
@@ -199,25 +224,8 @@ function Map({
     if (!containerRef.current || !runtimeStyle) {
       return;
     }
-    const setLoading = () => {
-      readinessRunRef.current += 1;
-      setCaptureState("loading");
-    };
-    const setError = () => {
-      readinessRunRef.current += 1;
-      setCaptureState("error");
-    };
-    const setIdleAfterFrames = () => {
-      const run = ++readinessRunRef.current;
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          if (readinessRunRef.current === run && mapRef.current === map) {
-            setCaptureState("idle");
-          }
-        });
-      });
-    };
-    setLoading();
+    readinessRunRef.current += 1;
+    setCaptureState("loading");
     const map = new maplibregl.Map({
       ...stableMapOptions,
       container: containerRef.current,
@@ -237,36 +245,57 @@ function Map({
       map.resize();
     });
     resizeObserver.observe(containerRef.current);
-    map.on("load", () => {
-      const analyticsForLoad = resolvedAnalyticsRef.current;
-      const styleId = analyticsForLoad?.styleId ?? (typeof runtimeStyle.style === "string" ? runtimeStyle.style : mapNameRef.current);
-      onLoadRef.current?.(map);
-      if (analyticsForLoad?.mapId) {
-        const sessionKey = `${sessionId}:${analyticsForLoad.mapId}:${styleId ?? ""}`;
-        if (!sessionStartsRef.current.has(sessionKey)) {
-          sessionStartsRef.current.add(sessionKey);
-          startTileflowSession(analyticsForLoad, {
-            mapId: analyticsForLoad.mapId,
-            sessionId,
-            source: "react",
-            styleId
-          });
-        }
+    const lifecycle = attachTileflowMapLifecycle({
+      getSession: () => {
+        const analyticsForLoad = resolvedAnalyticsRef.current;
+        return {
+          analytics: analyticsForLoad,
+          styleId: analyticsForLoad?.styleId ?? (typeof runtimeStyle.style === "string" ? runtimeStyle.style : mapNameRef.current)
+        };
+      },
+      map,
+      onLoad: (loadedMap) => {
+        onLoadRef.current?.(loadedMap);
+      },
+      scheduler: {
+        cancelFrame: (frame) => cancelAnimationFrame(frame),
+        requestFrame: (callback) => requestAnimationFrame(callback)
+      },
+      sessionStarter,
+      setState: setCaptureState,
+      subscribe: (subscribedMap, event, listener) => {
+        const subscription = subscribedMap.on(event, listener);
+        return () => subscription.unsubscribe();
       }
     });
-    map.on("dataloading", setLoading);
-    map.on("styledataloading", setLoading);
-    map.on("idle", setIdleAfterFrames);
-    map.on("error", setError);
     return () => {
       readinessRunRef.current += 1;
-      resizeObserver.disconnect();
-      clearMarkers(markerInstancesRef.current);
-      markerInstancesRef.current = [];
-      map.remove();
-      mapRef.current = null;
+      try {
+        lifecycle.dispose();
+      } finally {
+        try {
+          resizeObserver.disconnect();
+        } finally {
+          try {
+            markerController.clear();
+          } finally {
+            try {
+              map.remove();
+            } finally {
+              if (mapRef.current === map) mapRef.current = null;
+            }
+          }
+        }
+      }
     };
-  }, [resolvedInteractive, runtimeStyle, sessionId, stableMapOptions, transformRequest]);
+  }, [
+    markerController,
+    resolvedInteractive,
+    runtimeStyle,
+    sessionStarter,
+    stableMapOptions,
+    transformRequest
+  ]);
   useLayoutEffect(() => {
     if (!isImageMode) return;
     readinessRunRef.current += 1;
@@ -291,23 +320,15 @@ function Map({
   }
   useEffect(() => {
     const map = mapRef.current;
-    clearMarkers(markerInstancesRef.current);
-    markerInstancesRef.current = [];
+    markerController.clear();
     if (!map) {
       return;
     }
-    markerInstancesRef.current = markers.map((marker) => {
-      const markerInstance = new maplibregl.Marker({
-        color: marker.color ?? "#C6A15B"
-      }).setLngLat(marker.coordinates).addTo(map);
-      markerInstance.getElement().title = marker.label ?? marker.id;
-      return markerInstance;
-    });
+    markerController.replace(map, markers);
     return () => {
-      clearMarkers(markerInstancesRef.current);
-      markerInstancesRef.current = [];
+      markerController.clear();
     };
-  }, [markers, runtimeStyle]);
+  }, [markerController, markers, runtimeStyle]);
   const frameStyle = {
     height,
     minHeight: 240,
@@ -361,31 +382,6 @@ function Map({
     }
   );
 }
-function createTransformRequest(getAnalytics, sessionId, userTransformRequest) {
-  return (url, resourceType) => {
-    const request = userTransformRequest?.(url, resourceType);
-    if (isPromiseLike(request)) {
-      return request.then(
-        (resolvedRequest) => applyTileflowAnalyticsRequest(url, resolvedRequest, getAnalytics(), sessionId) ?? resolvedRequest
-      );
-    }
-    return applyTileflowAnalyticsRequest(url, request, getAnalytics(), 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 clearMarkers(markerInstances) {
-  markerInstances.forEach((marker) => marker.remove());
-}
 function useStableMapOptions(options) {
   return useStableMapOptionValue(options);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tileflow/react",
-  "version": "0.1.0-alpha.16",
+  "version": "0.1.0-alpha.17",
   "description": "React components for rendering Tileflow maps with MapLibre.",
   "type": "module",
   "sideEffects": false,
@@ -41,8 +41,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@tileflow/core": "0.1.0-alpha.16",
-    "@tileflow/static": "0.1.0-alpha.16"
+    "@tileflow/core": ">=0.1.0-alpha.17 <0.1.0-beta.0",
+    "@tileflow/static": ">=0.1.0-alpha.16 <0.1.0-beta.0"
   },
   "peerDependencies": {
     "maplibre-gl": ">=5",