@tileflow/capture 0.1.0-alpha.21 → 0.1.0-alpha.22

package/README.md

@@ -16,12 +16,12 @@ const result = await captureTileflowScenes({
 const [{png, receipt, sha256, networkDependent}] = result.captures;
 ```
 
-Standalone scenes compile through `@tileflow/dev`, inject the installed MapLibre JS and CSS into a
-pinned Playwright Chromium headless shell, fulfill generated local icon assets in memory, and wait
-for `load`, `idle`, and two animation frames. They never open a visible window or an HTTP listener.
-One call with multiple scenes uses one Browser and a fresh isolated context per scene. Capture
-installs the exact pinned shell automatically when `allowBrowserInstall` is true; the CLI enables
-that normal happy path by default.
+Standalone scenes compile through `@tileflow/dev`, fulfill the installed MapLibre main module,
+shared module, worker module, and CSS closure in a pinned Playwright Chromium headless shell,
+fulfill generated local icon assets in memory, and wait for `load`, `idle`, and two animation
+frames. They never open a visible window or an HTTP listener. One call with multiple scenes uses
+one Browser and a fresh isolated context per scene. Capture installs the exact pinned shell
+automatically when `allowBrowserInstall` is true; the CLI enables that normal happy path by default.
 
 For a warm integration, retain and close a session:
 

package/THIRD_PARTY_NOTICES.md

@@ -18,7 +18,7 @@ the platform-specific headless shell into its versioned per-user browser cache;
 distribution carries Chromium's license and credits. Chromium source and license information are
 available at https://www.chromium.org/chromium-projects/.
 
-## MapLibre GL JS 5.24.0
+## MapLibre GL JS 6.9.0
 
 Copyright (c) 2023 MapLibre contributors. Licensed under BSD-3-Clause. The installed `maplibre-gl`
 package includes `LICENSE.txt`, including notices for code derived from Mapbox GL JS and other

package/dist/index.js

@@ -320,8 +320,12 @@ import { getTileflowStyleFontFaces } from "@tileflow/core/runtime";
 import { assertValidTileflowStyle, TileflowStyleValidationError } from "@tileflow/dev/validation";
 var tileflowSyntheticAssetOrigin = "https://tileflow.local.invalid";
 var require3 = createRequire2(import.meta.url);
-var maplibreJsPath = require3.resolve("maplibre-gl/dist/maplibre-gl.js");
-var maplibreCssPath = require3.resolve("maplibre-gl/dist/maplibre-gl.css");
+var mapLibreRuntimePaths = Object.freeze({
+  css: require3.resolve("maplibre-gl/dist/maplibre-gl.css"),
+  main: require3.resolve("maplibre-gl/dist/maplibre-gl.mjs"),
+  shared: require3.resolve("maplibre-gl/dist/maplibre-gl-shared.mjs"),
+  worker: require3.resolve("maplibre-gl/dist/maplibre-gl-worker.mjs")
+});
 var tileflowCorePackagePath = require3.resolve("@tileflow/core/package.json");
 var tileflowBrowserModule = `${readFileSync2(
   join2(dirname2(tileflowCorePackagePath), "dist", "browser.js"),
@@ -351,6 +355,9 @@ async function captureStandaloneTileflowScene(input) {
     throw error;
   }
   const timeoutMs = input.timeoutMs ?? 3e4;
+  const mapLibreRuntimeUrls = createMapLibreRuntimeUrls(
+    resolveMapLibreRuntimeDocumentOrigin(input.style)
+  );
   let termination;
   let context;
   let phase = "browser-start";
@@ -407,6 +414,13 @@ async function captureStandaloneTileflowScene(input) {
     };
     await context.route("**/*", async (route) => {
       const url = new URL(route.request().url());
+      if (url.origin === mapLibreRuntimeUrls.origin) {
+        const runtime = getMapLibreRuntimeResponse(url.pathname, input.scene.viewport);
+        if (runtime) {
+          await route.fulfill(runtime);
+          return;
+        }
+      }
       if (url.origin === tileflowSyntheticAssetOrigin) {
         const fileName = decodeURIComponent(url.pathname.slice(1));
         const localTileset = url.search === "" ? localTilesets.get(fileName) : void 0;
@@ -415,7 +429,10 @@ async function captureStandaloneTileflowScene(input) {
             route.request().headers()["range"],
             localTileset
           );
-          await route.fulfill(response);
+          await route.fulfill({
+            ...response,
+            headers: { "Access-Control-Allow-Origin": "*", ...response.headers }
+          });
           return;
         }
         const asset = url.search === "" ? assets.get(fileName) : void 0;
@@ -428,6 +445,7 @@ async function captureStandaloneTileflowScene(input) {
         await route.fulfill({
           body: typeof source === "string" ? source : Buffer.from(source),
           contentType: asset.contentType,
+          headers: { "Access-Control-Allow-Origin": "*" },
           status: 200
         });
         return;
@@ -457,9 +475,17 @@ async function captureStandaloneTileflowScene(input) {
     });
     page.on("requestfailed", (request) => recordResourceFailure(request.url()));
     page.setDefaultTimeout(timeoutMs);
-    await page.setContent(renderHtml(input.scene.viewport), { waitUntil: "domcontentloaded" });
-    await page.addStyleTag({ path: maplibreCssPath });
-    await page.addScriptTag({ path: maplibreJsPath });
+    await page.goto(mapLibreRuntimeUrls.document, { waitUntil: "domcontentloaded" });
+    await page.addStyleTag({ url: mapLibreRuntimeUrls.css });
+    await page.addScriptTag({
+      content: `import * as maplibregl from ${JSON.stringify(mapLibreRuntimeUrls.main)};
+maplibregl.setWorkerUrl(${JSON.stringify(mapLibreRuntimeUrls.worker)});
+globalThis.maplibregl = maplibregl;`,
+      type: "module"
+    });
+    await page.waitForFunction(
+      () => Boolean(globalThis.maplibregl)
+    );
     await page.addScriptTag({ content: tileflowBrowserModule, type: "module" });
     await page.addScriptTag({ content: renderMapInPageScript });
     phase = "map-load";
@@ -559,6 +585,78 @@ async function captureStandaloneTileflowScene(input) {
     await context?.close().catch(() => void 0);
   }
 }
+function createMapLibreRuntimeUrls(origin) {
+  return Object.freeze({
+    css: `${origin}/__runtime/maplibre-gl.css`,
+    document: `${origin}/__runtime/document.html`,
+    main: `${origin}/__runtime/maplibre-gl.mjs`,
+    origin,
+    shared: `${origin}/__runtime/maplibre-gl-shared.mjs`,
+    worker: `${origin}/__runtime/maplibre-gl-worker.mjs`
+  });
+}
+function resolveMapLibreRuntimeDocumentOrigin(style) {
+  const origins = /* @__PURE__ */ new Set();
+  const loopbackOrigins = /* @__PURE__ */ new Set();
+  const addOrigin = (value) => {
+    if (typeof value !== "string") return;
+    try {
+      const url = new URL(value);
+      if ((url.protocol === "http:" || url.protocol === "https:") && url.username === "" && url.password === "") {
+        origins.add(url.origin);
+        if (isLoopbackUrl(url)) loopbackOrigins.add(url.origin);
+      }
+    } catch {
+    }
+  };
+  addOrigin(style.glyphs);
+  if (Array.isArray(style.sprite)) {
+    for (const sprite of style.sprite) {
+      if (sprite && typeof sprite === "object") {
+        addOrigin(sprite.url);
+      }
+    }
+  } else {
+    addOrigin(style.sprite);
+  }
+  const fontFaces = style.metadata?.["tileflow:fontFaces"];
+  if (Array.isArray(fontFaces)) {
+    for (const fontFace of fontFaces) {
+      if (fontFace && typeof fontFace === "object") {
+        addOrigin(fontFace.source);
+      }
+    }
+  }
+  for (const source of Object.values(style.sources)) {
+    const candidate = source;
+    addOrigin(candidate.data);
+    addOrigin(candidate.url);
+    if (Array.isArray(candidate.tiles)) {
+      for (const tile of candidate.tiles) addOrigin(tile);
+    }
+    if (Array.isArray(candidate.urls)) {
+      for (const url of candidate.urls) addOrigin(url);
+    }
+  }
+  const preferredOrigins = loopbackOrigins.size > 0 ? loopbackOrigins : origins;
+  return [...preferredOrigins].sort(compareCodeUnits)[0] ?? tileflowSyntheticAssetOrigin;
+}
+function getMapLibreRuntimeResponse(pathname, viewport) {
+  if (pathname === "/__runtime/document.html") {
+    return {
+      body: renderHtml(viewport),
+      contentType: "text/html; charset=utf-8",
+      status: 200
+    };
+  }
+  const asset = pathname === "/__runtime/maplibre-gl.mjs" ? mapLibreRuntimePaths.main : pathname === "/__runtime/maplibre-gl-shared.mjs" ? mapLibreRuntimePaths.shared : pathname === "/__runtime/maplibre-gl-worker.mjs" ? mapLibreRuntimePaths.worker : pathname === "/__runtime/maplibre-gl.css" ? mapLibreRuntimePaths.css : void 0;
+  if (!asset) return void 0;
+  return {
+    body: readFileSync2(asset, "utf8"),
+    contentType: pathname === "/__runtime/maplibre-gl.css" ? "text/css; charset=utf-8" : "text/javascript; charset=utf-8",
+    status: 200
+  };
+}
 async function localTilesetCaptureResponse(rangeHeader, file) {
   const match = rangeHeader?.match(/^bytes=(\d+)-(\d*)$/u);
   if (!match) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tileflow/capture",
-  "version": "0.1.0-alpha.21",
+  "version": "0.1.0-alpha.22",
   "license": "Apache-2.0",
   "description": "Deterministic local visual capture and comparison for Tileflow maps.",
   "engines": {
@@ -48,8 +48,8 @@
   },
   "dependencies": {
     "@tileflow/core": ">=0.1.0-alpha.24 <0.1.0-beta.0",
-    "@tileflow/dev": ">=0.1.0-alpha.22 <0.1.0-beta.0",
-    "maplibre-gl": "5.24.0",
+    "@tileflow/dev": ">=0.1.0-alpha.23 <0.1.0-beta.0",
+    "maplibre-gl": "6.9.0",
     "pixelmatch": "7.2.0",
     "playwright": "1.62.1",
     "pngjs": "7.0.0"
@@ -59,6 +59,7 @@
     "@types/node": "^25.9.2",
     "@types/pngjs": "6.0.5",
     "@vitejs/plugin-vue": "^6.0.8",
+    "maplibre-gl-min": "npm:maplibre-gl@6.4.1",
     "next": "16.3.3",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
@@ -66,13 +67,13 @@
     "vite": "^8.0.16",
     "vue": "^3.5.39",
     "webpack": "5.108.3",
-    "@tileflow/maps": "0.1.0-alpha.2",
-    "@tileflow/next": "0.1.0-alpha.20",
-    "@tileflow/svelte": "0.1.0-alpha.22",
-    "@tileflow/vite": "0.1.0-alpha.20",
-    "@tileflow/vue": "0.1.0-alpha.22",
-    "@tileflow/react": "0.1.0-alpha.23",
-    "@tileflow/webpack": "0.1.0-alpha.20"
+    "@tileflow/maps": "0.1.0-alpha.3",
+    "@tileflow/react": "0.1.0-alpha.24",
+    "@tileflow/vite": "0.1.0-alpha.21",
+    "@tileflow/next": "0.1.0-alpha.21",
+    "@tileflow/svelte": "0.1.0-alpha.23",
+    "@tileflow/webpack": "0.1.0-alpha.21",
+    "@tileflow/vue": "0.1.0-alpha.23"
   },
   "scripts": {
     "build": "tsup src/index.ts src/receipt.ts --format esm --dts --clean --platform node",