@monkeyplus/flow 6.0.7 → 6.0.9

package/modules/images/ipx.d.ts

@@ -1,5 +1,2 @@
-export default function ipxHandler(event: any): Promise<string | void | Buffer<ArrayBufferLike> | {
-    error: {
-        message: string;
-    };
-}> | Response;
+declare const _default: any;
+export default _default;

package/modules/images/ipx.mjs

@@ -1,12 +1,28 @@
+import process from "node:process";
 import { createIPX, createIPXH3Handler, ipxFSStorage, ipxHttpStorage } from "ipx";
+import { defineHandler } from "nitro";
+import { getRequestURL } from "nitro/h3";
 import { useRuntimeConfig } from "nitro/runtime-config";
 let cachedDir = "";
 let cachedDomainsKey = "";
 let cachedHandler;
+function getEnvFlowImagesConfig() {
+  const raw = process.env.FLOW_IMAGES_RUNTIME_CONFIG;
+  if (!raw) {
+    return void 0;
+  }
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return void 0;
+  }
+}
 function resolveHandler() {
-  const config = useRuntimeConfig();
-  const publicDir = config.flow?.images?.publicDir;
-  const domains = Object.keys(config.flow?.images?.options?.domains || {});
+  const envConfig = getEnvFlowImagesConfig();
+  const runtimeConfig = useRuntimeConfig();
+  const config = runtimeConfig.flow?.images || envConfig;
+  const publicDir = config?.publicDir;
+  const domains = Object.keys(config?.options?.domains || {});
   const domainsKey = domains.join("|");
   if (!publicDir) {
     return void 0;
@@ -16,16 +32,24 @@ function resolveHandler() {
     cachedDomainsKey = domainsKey;
     const ipx = createIPX({
       storage: ipxFSStorage({ dir: publicDir }),
-      ...domains.length ? { httpStorage: ipxHttpStorage({ domains }) } : {}
+      ...domains.length ? {
+        httpStorage: ipxHttpStorage({ domains })
+      } : {}
     });
     cachedHandler = createIPXH3Handler(ipx);
   }
   return cachedHandler;
 }
-export default function ipxHandler(event) {
-  const handler = resolveHandler();
-  if (!handler) {
-    return new Response("Not Found", { status: 404 });
+export default defineHandler(async (event) => {
+  if (!getRequestURL(event)?.pathname.startsWith("/_ipx")) {
+    console.log("route", event.req.url.toString());
+    return;
   }
-  return handler(event);
-}
+  const handler = resolveHandler();
+  const path = event.path.replace(/^\/_ipx/, "") || "/";
+  return await handler?.({
+    ...event,
+    path,
+    node: event.runtime?.node
+  });
+});

package/modules/images/module.mjs

@@ -1,9 +1,12 @@
 import { rmSync } from "node:fs";
 import { resolve } from "node:path";
-import { joinURL } from "ufo";
+import process from "node:process";
+import { createIPX, createIPXNodeServer, ipxFSStorage, ipxHttpStorage } from "ipx";
 import { resolvePackageFile, resolvePackagePath } from "../../src/public/shared.mjs";
 import { defineFlowModule } from "../../src/runtime/config.mjs";
+import { materializeGeneratedImages } from "./runtime/build.mjs";
 import { screens } from "./runtime/helpers.mjs";
+import { resetFlowImageRuntimeState } from "./runtime/server.mjs";
 function withoutTrailingSlash(value) {
   return value.replace(/\/+$/, "");
 }
@@ -14,7 +17,7 @@ function resolveStrapiDomains(flowConfig, dirImages) {
   }
   try {
     const url = new URL(strapi.url);
-    const target = joinURL(dirImages, "strapi");
+    const target = dirImages;
     const values = /* @__PURE__ */ new Set([
       withoutTrailingSlash(url.origin),
       withoutTrailingSlash(url.toString())
@@ -32,6 +35,33 @@ function resolveStrapiDomains(flowConfig, dirImages) {
     return {};
   }
 }
+function createIpxDevServerPlugin(imagesRuntimeConfig) {
+  const domains = Object.keys(imagesRuntimeConfig.options.domains || {});
+  let middleware;
+  return {
+    name: "flow:images-ipx-dev",
+    apply: "serve",
+    configureServer(server) {
+      if (!middleware) {
+        const ipx = createIPX({
+          storage: ipxFSStorage({ dir: imagesRuntimeConfig.publicDir }),
+          ...domains.length ? { httpStorage: ipxHttpStorage({ domains }) } : {}
+        });
+        middleware = createIPXNodeServer(ipx);
+      }
+      server.middlewares.use("/_ipx", (req, res, next) => {
+        try {
+          const result = middleware?.(req, res);
+          if (result && typeof result.then === "function") {
+            void result.catch(next);
+          }
+        } catch (error) {
+          next(error);
+        }
+      });
+    }
+  };
+}
 export default defineFlowModule({
   meta: {
     name: "images",
@@ -40,6 +70,7 @@ export default defineFlowModule({
   defaults: {
     dirRenames: "shared/seo_images",
     dirFiles: ["images", "media"],
+    buildBatchSize: 8,
     lazy: true,
     screens,
     baseURL: "/_ipx",
@@ -53,6 +84,7 @@ export default defineFlowModule({
       ...options.domains || {}
     };
     const isSsg = context.flowConfig.build.preset === "ssg";
+    const shouldGenerateOutput = isSsg && process.env.NODE_ENV === "production";
     const isNetlify = !!process.env.NETLIFY;
     const publicDir = resolve(context.projectRoot, "public");
     const renameDir = resolve(context.projectRoot, options.dirRenames);
@@ -61,35 +93,53 @@ export default defineFlowModule({
     const generatedCacheDir = isNetlify ? resolve(imagesCacheRoot, "netlify") : void 0;
     const generatedCacheManifestPath = generatedCacheDir ? resolve(generatedCacheDir, "manifest.json") : void 0;
     const ipxHandlerPath = context.projectRoot === resolvePackagePath() ? resolve(context.projectRoot, "modules/images/ipx.ts") : resolvePackageFile("modules/images/ipx.ts", "modules/images/ipx.mjs", "modules/images/ipx.js");
-    const buildPluginPath = context.projectRoot === resolvePackagePath() ? resolve(context.projectRoot, "modules/images/plugin.ts") : resolvePackageFile("modules/images/plugin.ts", "modules/images/plugin.mjs", "modules/images/plugin.js");
-    if (isSsg) {
+    const imagesRuntimeConfig = {
+      dirRenames: renameDir,
+      dirFiles: options.dirFiles,
+      buildBatchSize: options.buildBatchSize,
+      publicDir,
+      outputDir: resolve(context.projectRoot, ".output/public"),
+      generatedManifestPath,
+      generatedCacheDir,
+      generatedCacheManifestPath,
+      generate: shouldGenerateOutput,
+      netlifyCache: isNetlify,
+      options: {
+        lazy: options.lazy,
+        screens: options.screens,
+        domains: resolvedDomains,
+        presets: options.presets,
+        baseURL: options.baseURL,
+        dirImages: options.dirImages
+      }
+    };
+    process.env.FLOW_IMAGES_RUNTIME_CONFIG = JSON.stringify(imagesRuntimeConfig);
+    if (shouldGenerateOutput) {
       rmSync(generatedManifestPath, { force: true });
-      context.nitro.plugins.push(buildPluginPath);
+      const existingPrerenderDone = context.nitro.hooks["prerender:done"];
+      context.nitro.hooks["prerender:done"] = async (...args) => {
+        if (typeof existingPrerenderDone === "function") {
+          await existingPrerenderDone(...args);
+        }
+        const result = await materializeGeneratedImages(imagesRuntimeConfig);
+        if (result.total > 0) {
+          console.log(
+            `[flow:images] materialized ${result.total} images (${result.generated} generated, ${result.cacheHits} cache hits${imagesRuntimeConfig.netlifyCache && process.env.NETLIFY ? ", netlify cache enabled" : ""})`
+          );
+        }
+        resetFlowImageRuntimeState();
+      };
     }
     context.nitro.handlers.push({
       route: "/_ipx/**",
       handler: ipxHandlerPath
+      // middleware: true,
     });
+    context.vite.plugins.push(createIpxDevServerPlugin(imagesRuntimeConfig));
     context.nitro.runtimeConfig.flow = {
       ...typeof context.nitro.runtimeConfig.flow === "object" && context.nitro.runtimeConfig.flow ? context.nitro.runtimeConfig.flow : {},
       images: {
-        dirRenames: renameDir,
-        dirFiles: options.dirFiles,
-        publicDir,
-        outputDir: resolve(context.projectRoot, ".output/public"),
-        generatedManifestPath,
-        generatedCacheDir,
-        generatedCacheManifestPath,
-        generate: isSsg,
-        netlifyCache: isNetlify,
-        options: {
-          lazy: options.lazy,
-          screens: options.screens,
-          domains: resolvedDomains,
-          presets: options.presets,
-          baseURL: options.baseURL,
-          dirImages: options.dirImages
-        }
+        ...imagesRuntimeConfig
       }
     };
   }

package/modules/images/runtime/build.mjs

@@ -1,8 +1,13 @@
 import { createHash } from "node:crypto";
-import { copyFile, mkdir, readFile, readdir, rm, stat, writeFile } from "node:fs/promises";
 import { existsSync } from "node:fs";
+import { copyFile, mkdir, readdir, readFile, rm, stat, writeFile } from "node:fs/promises";
 import { dirname, join, resolve } from "node:path";
+import process from "node:process";
 import { createIPX, ipxFSStorage, ipxHttpStorage } from "ipx";
+const DEFAULT_BUILD_BATCH_SIZE = 8;
+function getGeneratedImageKey(entry) {
+  return `${entry.url}:${entry.generate}`;
+}
 function sortRecord(value) {
   return Object.keys(value).sort().reduce((result, key) => {
     result[key] = value[key];
@@ -18,6 +23,26 @@ function normalizeOutputPath(path) {
 function outputFilePath(baseDir, path) {
   return resolve(baseDir, normalizeOutputPath(path));
 }
+function createBatches(items, batchSize) {
+  const batches = [];
+  for (let index = 0; index < items.length; index += batchSize) {
+    batches.push(items.slice(index, index + batchSize));
+  }
+  return batches;
+}
+function resolveBuildBatchSize() {
+  const configuredValue = Number(process.env.FLOW_IMAGES_BUILD_BATCH_SIZE);
+  if (!Number.isFinite(configuredValue) || configuredValue < 1) {
+    return DEFAULT_BUILD_BATCH_SIZE;
+  }
+  return Math.floor(configuredValue);
+}
+function resolveConfiguredBatchSize(configuredBatchSize) {
+  if (Number.isFinite(configuredBatchSize) && configuredBatchSize && configuredBatchSize > 0) {
+    return Math.floor(configuredBatchSize);
+  }
+  return resolveBuildBatchSize();
+}
 async function ensureParentDir(path) {
   await mkdir(dirname(path), { recursive: true });
 }
@@ -39,7 +64,7 @@ async function readGeneratedManifest(path) {
       continue;
     }
     const parsed = JSON.parse(line);
-    collection.set(parsed.url, parsed);
+    collection.set(getGeneratedImageKey(parsed), parsed);
   }
   return [...collection.values()];
 }
@@ -103,30 +128,37 @@ export async function materializeGeneratedImages(config) {
   const activeCacheFiles = /* @__PURE__ */ new Set();
   let cacheHits = 0;
   let generated = 0;
-  for (const image of images) {
-    const signature = await createSignature(image, config.publicDir);
-    nextManifest[image.url] = {
-      ...image,
-      signature
-    };
-    const outputPath = outputFilePath(config.outputDir, image.generate);
-    const cacheRelativePath = normalizeOutputPath(image.generate);
-    const cachePath = config.generatedCacheDir ? outputFilePath(config.generatedCacheDir, cacheRelativePath) : void 0;
-    activeCacheFiles.add(cacheRelativePath);
-    await ensureParentDir(outputPath);
-    if (config.netlifyCache && cachePath && previousManifest[image.url]?.signature === signature && existsSync(cachePath)) {
-      await copyFile(cachePath, outputPath);
-      cacheHits += 1;
-      continue;
-    }
-    const processed = await ipx(image.src, image.modifiers).process();
-    const data = typeof processed.data === "string" ? Buffer.from(processed.data) : processed.data;
-    await writeFile(outputPath, data);
-    if (config.netlifyCache && cachePath) {
-      await ensureParentDir(cachePath);
-      await writeFile(cachePath, data);
+  const batchSize = resolveConfiguredBatchSize(config.buildBatchSize);
+  for (const batch of createBatches(images, batchSize)) {
+    const results = await Promise.all(batch.map(async (image) => {
+      const signature = await createSignature(image, config.publicDir);
+      const imageKey = getGeneratedImageKey(image);
+      nextManifest[imageKey] = {
+        ...image,
+        signature
+      };
+      const outputPath = outputFilePath(config.outputDir, image.generate);
+      const cacheRelativePath = normalizeOutputPath(image.generate);
+      const cachePath = config.generatedCacheDir ? outputFilePath(config.generatedCacheDir, cacheRelativePath) : void 0;
+      activeCacheFiles.add(cacheRelativePath);
+      await ensureParentDir(outputPath);
+      if (config.netlifyCache && cachePath && previousManifest[imageKey]?.signature === signature && existsSync(cachePath)) {
+        await copyFile(cachePath, outputPath);
+        return { cacheHit: 1, generated: 0 };
+      }
+      const processed = await ipx(image.src, image.modifiers).process();
+      const data = typeof processed.data === "string" ? Buffer.from(processed.data) : processed.data;
+      await writeFile(outputPath, data);
+      if (config.netlifyCache && cachePath) {
+        await ensureParentDir(cachePath);
+        await writeFile(cachePath, data);
+      }
+      return { cacheHit: 0, generated: 1 };
+    }));
+    for (const result of results) {
+      cacheHits += result.cacheHit;
+      generated += result.generated;
     }
-    generated += 1;
   }
   if (config.netlifyCache && config.generatedCacheDir && config.generatedCacheManifestPath) {
     await mkdir(config.generatedCacheDir, { recursive: true });

package/modules/images/runtime/image.d.ts

@@ -1,4 +1,4 @@
-import type { FlowImagesState, FlowImageOptions, GeneratedImageEntry, GetImageFunction } from './types.ts';
+import type { FlowImageOptions, FlowImagesState, GeneratedImageEntry, GetImageFunction } from './types.ts';
 export declare function createImageResolver(imagesOptions: FlowImageOptions, stateImages: FlowImagesState, runtime?: {
     generateOutput?: boolean;
     onGenerate?: (image: GeneratedImageEntry) => void;

package/modules/images/runtime/image.mjs

@@ -1,4 +1,4 @@
-import { joinURL, encodeParam, encodePath } from "ufo";
+import { encodeParam, encodePath, joinURL } from "ufo";
 import { getNormalName, getPreset, guessExt, parseSize } from "./helpers.mjs";
 const modifierKeyMap = {
   background: "b",
@@ -47,6 +47,24 @@ function getDirectory(value) {
   const lastSlash = pathname.lastIndexOf("/");
   return lastSlash >= 0 ? pathname.slice(0, lastSlash) : "";
 }
+function getRelativePath(value, baseDir) {
+  const pathname = getPathname(value).split(/[?#]/, 1)[0] || "";
+  const normalizedBaseDir = baseDir.replace(/^\/+/, "").replace(/\/+$/, "");
+  const normalizedPath = pathname.replace(/^\/+/, "");
+  if (!normalizedBaseDir) {
+    return normalizedPath;
+  }
+  if (normalizedPath === normalizedBaseDir) {
+    return "";
+  }
+  if (normalizedPath.startsWith(`${normalizedBaseDir}/`)) {
+    return normalizedPath.slice(normalizedBaseDir.length + 1);
+  }
+  return normalizedPath;
+}
+function getModifierSegment(modifiers = {}) {
+  return Object.entries(modifiers).filter(([, value]) => value !== void 0 && value !== null && value !== "").map(([key, value]) => `${encodeParam(modifierKeyMap[key] || key)}_${encodeParam(String(value))}`).join(",") || "_";
+}
 function resolveRemoteRename(input, domains = {}) {
   if (!isRemoteUrl(input)) {
     return void 0;
@@ -129,10 +147,9 @@ export function createImageResolver(imagesOptions, stateImages, runtime = {}) {
     if (isRemoteUrl(input) && replacedPath.startsWith("/")) {
       baseDir = getBaseDir(replacedPath, imagesOptions.dirImages);
     }
-    image.generate = decodeURIComponent(image.url).replace(decodeURIComponent(input), replacedPath).replace(`/${baseDir}`, "").replace("_ipx", baseDir).split("?")[0];
-    if (image.generate.startsWith("/")) {
-      image.generate = image.generate.replace(/\/+/g, "/");
-    }
+    const modifierSegment = getModifierSegment(image.modifiers);
+    const relativePath = getRelativePath(replacedPath, baseDir);
+    image.generate = joinURL(`/${baseDir}`, modifierSegment === "_" ? "" : modifierSegment, relativePath);
     if (originalExt) {
       image.generate = image.generate.replace(originalExt, image.ext);
     } else if (!image.generate.includes(".") && image.ext) {
@@ -179,7 +196,7 @@ export function createImageResolver(imagesOptions, stateImages, runtime = {}) {
       Object.assign(sizes, opts.sizes);
     }
     for (const key in sizes) {
-      const screenMaxWidth = imagesOptions.screens?.[key] || parseInt(key, 10);
+      const screenMaxWidth = imagesOptions.screens?.[key] || Number.parseInt(key, 10);
       let size = String(sizes[key]);
       const isFluid = size.endsWith("vw");
       if (!isFluid && /^\d+$/.test(size)) {
@@ -188,7 +205,7 @@ export function createImageResolver(imagesOptions, stateImages, runtime = {}) {
       if (!isFluid && !size.endsWith("px")) {
         continue;
       }
-      let calculatedWidth = parseInt(size, 10);
+      let calculatedWidth = Number.parseInt(size, 10);
       if (!screenMaxWidth || !calculatedWidth) {
         continue;
       }

package/modules/images/runtime/server.d.ts

@@ -1,3 +1,5 @@
-import type { FlowImagesRuntimeConfig, FlowImageRuntimeUtils } from './types.ts';
+import type { FlowImageBootPayload } from '../../../src/runtime/boot.ts';
+import type { FlowImageRuntimeUtils, FlowImagesRuntimeConfig } from './types.ts';
+export declare function getFlowImageBootPayload(config?: FlowImagesRuntimeConfig | undefined): FlowImageBootPayload | undefined;
 export declare function getFlowImageRuntimeUtils(config?: FlowImagesRuntimeConfig | undefined): FlowImageRuntimeUtils | undefined;
 export declare function resetFlowImageRuntimeState(): void;

package/modules/images/runtime/server.mjs

@@ -1,20 +1,43 @@
 import { appendFileSync, mkdirSync } from "node:fs";
-import { dirname } from "node:path";
 import { createRequire } from "node:module";
-import { loadImageRenames } from "./renames.mjs";
+import { dirname } from "node:path";
+import process from "node:process";
 import { createImageResolver } from "./image.mjs";
+import { loadImageRenames } from "./renames.mjs";
 let runtimeConfigRequire;
 let cachedKey;
 let cachedUtils;
 let generatedEntryKeys = /* @__PURE__ */ new Set();
+function getEnvFlowImagesRuntimeConfig() {
+  const raw = process.env.FLOW_IMAGES_RUNTIME_CONFIG;
+  if (!raw) {
+    return void 0;
+  }
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return void 0;
+  }
+}
 function getFlowImagesRuntimeConfig() {
   try {
     runtimeConfigRequire ??= createRequire(import.meta.url);
     const runtime = runtimeConfigRequire("nitro/runtime-config");
-    return runtime.useRuntimeConfig?.().flow?.images;
+    return runtime.useRuntimeConfig?.().flow?.images || getEnvFlowImagesRuntimeConfig();
   } catch {
+    return getEnvFlowImagesRuntimeConfig();
+  }
+}
+export function getFlowImageBootPayload(config = getFlowImagesRuntimeConfig()) {
+  if (!config) {
     return void 0;
   }
+  const renameSources = [config.dirRenames, config.publicDir].filter(Boolean);
+  return {
+    all: loadImageRenames(renameSources),
+    options: { ...config.options },
+    generateOutput: !!config.generate
+  };
 }
 export function getFlowImageRuntimeUtils(config = getFlowImagesRuntimeConfig()) {
   if (!config) {

package/modules/images/runtime/types.d.ts

@@ -1,6 +1,7 @@
 export interface FlowImagesModuleOptions {
     dirRenames: string;
     dirFiles: string[];
+    buildBatchSize: number;
     lazy: boolean;
     screens: Record<string, number>;
     domains?: Record<string, string>;
@@ -8,7 +9,7 @@ export interface FlowImagesModuleOptions {
     baseURL: string;
     dirImages: string;
 }
-export type FlowImageOptions = Omit<FlowImagesModuleOptions, 'dirRenames' | 'dirFiles'>;
+export type FlowImageOptions = Omit<FlowImagesModuleOptions, 'dirRenames' | 'dirFiles' | 'buildBatchSize'>;
 export interface FlowImageMeta {
     rename?: string;
     name: string;
@@ -61,6 +62,7 @@ export interface FlowImagesState {
 export interface FlowImagesRuntimeConfig {
     dirRenames: string;
     dirFiles: string[];
+    buildBatchSize?: number;
     publicDir: string;
     outputDir: string;
     generatedManifestPath: string;

package/modules/sitemap/handler.mjs

@@ -1,17 +1,16 @@
 import { defineEventHandler, getRequestURL, setHeader } from "nitro/h3";
 import { useRuntimeConfig } from "nitro/runtime-config";
 import { getUrls } from "../../server/lib/pages.mjs";
-function escapeXml(value) {
-  return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&apos;");
-}
+import { buildSitemapXml } from "./xml.mjs";
 export default defineEventHandler(async (event) => {
   const urls = await getUrls(true, true);
   const runtimeConfig = useRuntimeConfig();
   const origin = runtimeConfig.flow?.siteUrl || getRequestURL(event).origin;
-  const xml = `<?xml version="1.0" encoding="UTF-8"?>
-<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
-${urls.map((entry) => typeof entry === "string" ? `  <url><loc>${escapeXml(new URL(entry, origin).toString())}</loc></url>` : `  <url><loc>${escapeXml(new URL(entry.url, origin).toString())}</loc><xhtml:link rel="alternate" hreflang="${escapeXml(entry.locale)}" href="${escapeXml(new URL(entry.url, origin).toString())}" xmlns:xhtml="http://www.w3.org/1999/xhtml" /></url>`).join("\n")}
-</urlset>`;
+  const xml = buildSitemapXml(urls, origin, {
+    locales: runtimeConfig.flow?.locale?.locales || ["es-ec"],
+    language: runtimeConfig.flow?.locale?.language || "es",
+    location: runtimeConfig.flow?.locale?.location || "ec"
+  });
   setHeader(event, "content-type", "application/xml; charset=utf-8");
   return xml;
 });

package/modules/sitemap/module.mjs

@@ -2,13 +2,14 @@ import { mkdirSync, writeFileSync } from "node:fs";
 import { dirname, resolve } from "node:path";
 import { resolvePackagePath } from "../../src/public/shared.mjs";
 import { defineFlowModule } from "../../src/runtime/config.mjs";
-function createGeneratedSitemapHandler(siteUrl, locales) {
+function createGeneratedSitemapHandler(siteUrl, localeConfig) {
   return `
 import pageDefinitions from 'virtual:flow/pages';
 
 const dynamicRouteCache = new Map();
 const configuredSiteUrl = ${JSON.stringify(siteUrl || "")};
-const enabledLocales = ${JSON.stringify(locales)};
+const localeConfig = ${JSON.stringify(localeConfig)};
+const enabledLocales = localeConfig.locales;
 
 function escapeXml(value) {
   return value
@@ -27,6 +28,26 @@ function normalizePath(value) {
   return value.length > 1 && value.endsWith('/') ? value.slice(0, -1) : value;
 }
 
+function ensureLeadingSlash(value) {
+  if (!value) {
+    return '/';
+  }
+
+  return value.startsWith('/') ? value : '/' + value;
+}
+
+function ensureTrailingSlash(value) {
+  if (value === '/' || value.endsWith('/')) {
+    return value;
+  }
+
+  return value + '/';
+}
+
+function preserveTrailingSlash(value, source) {
+  return source.endsWith('/') ? ensureTrailingSlash(value) : value;
+}
+
 function replacePath(pattern, url) {
   let resolved = pattern;
 
@@ -53,8 +74,198 @@ function toPublicRoutePattern(url) {
   return normalizePath(url.replaceAll('*', ''));
 }
 
+function trimLeadingSlash(value) {
+  let result = value;
+
+  while (result.startsWith('/')) {
+    result = result.slice(1);
+  }
+
+  return result;
+}
+
+function trimTrailingSlash(value) {
+  let result = value;
+
+  while (result.endsWith('/')) {
+    result = result.slice(0, -1);
+  }
+
+  return result;
+}
+
+function combineName(name, dynamicName) {
+  return trimTrailingSlash(name) + '/' + trimLeadingSlash(dynamicName);
+}
+
+function getLanguage(locale) {
+  const [language = localeConfig.language || 'es'] = locale.split('-');
+  return language;
+}
+
+function getLocation(locale) {
+  const [, location = localeConfig.location || 'ec'] = locale.split('-');
+  return location;
+}
+
+function getDefaultLocaleCode() {
+  return localeConfig.language + '-' + localeConfig.location;
+}
+
+function routeHasPrefix(route, prefix) {
+  return route === prefix || route === prefix + '/' || route.startsWith(prefix + '/');
+}
+
+function getLocalePrefixVariants(localeCode) {
+  const lang = getLanguage(localeCode);
+  const loc = getLocation(localeCode);
+  const prefixes = new Set();
+
+  if (loc === localeConfig.location) {
+    prefixes.add('/' + lang);
+    return [...prefixes];
+  }
+
+  prefixes.add('/' + lang + '-' + loc);
+  prefixes.add('/' + lang + '/' + loc);
+
+  return [...prefixes];
+}
+
+function getLocalePrefix(localeCode) {
+  if (localeConfig.prefixStrategy === 'manual') {
+    return '';
+  }
+
+  if (localeCode === getDefaultLocaleCode()) {
+    return '';
+  }
+
+  const lang = getLanguage(localeCode);
+  const loc = getLocation(localeCode);
+
+  if (loc === localeConfig.location) {
+    return '/' + lang;
+  }
+
+  if (localeConfig.prefixFormat === 'nested') {
+    return '/' + lang + '/' + loc;
+  }
+
+  return '/' + lang + '-' + loc;
+}
+
+function localizeRoutePattern(localeCode, route) {
+  const normalizedRoute = ensureLeadingSlash(route || '/');
+  const prefix = getLocalePrefix(localeCode);
+
+  if (!prefix) {
+    return normalizedRoute;
+  }
+
+  if (getLocalePrefixVariants(localeCode).some(candidate => routeHasPrefix(normalizedRoute, candidate))) {
+    return normalizedRoute;
+  }
+
+  if (normalizedRoute === '/') {
+    return ensureTrailingSlash(prefix);
+  }
+
+  return preserveTrailingSlash(normalizePath(prefix) + normalizedRoute, normalizedRoute);
+}
+
+function toPublicRoute(localeCode, route) {
+  const localizedRoute = localizeRoutePattern(localeCode, route);
+  const publicRoute = localizedRoute.replaceAll('*', '');
+
+  return preserveTrailingSlash(normalizePath(publicRoute), localizedRoute);
+}
+
+function toAbsoluteUrl(origin, url) {
+  return new URL(url, origin).toString();
+}
+
+function buildAlternateLink(hreflang, origin, url) {
+  return '<xhtml:link rel="alternate" hreflang="' + escapeXml(hreflang) + '" href="' + escapeXml(toAbsoluteUrl(origin, url)) + '"/>';
+}
+
+function buildUrl(origin, url, lastMod, alternates = []) {
+  return [
+    '  <url>',
+    '    <loc>' + escapeXml(toAbsoluteUrl(origin, url)) + '</loc>',
+    '    <lastmod>' + escapeXml(lastMod) + '</lastmod>',
+    ...alternates.map(alternate => '    ' + alternate),
+    '  </url>',
+  ].join('\\n');
+}
+
+function groupByName(entries) {
+  const grouped = new Map();
+
+  for (const entry of entries) {
+    const group = grouped.get(entry.name) || [];
+    group.push(entry);
+    grouped.set(entry.name, group);
+  }
+
+  return [...grouped.values()];
+}
+
+function buildLocalizedUrls(entries, origin, lastMod) {
+  const defaultLocale = getDefaultLocaleCode();
+
+  return groupByName(entries).map((pages) => {
+    const pagesByLanguage = pages.reduce((result, page) => {
+      const language = getLanguage(page.locale);
+      const group = result.get(language) || [];
+      group.push(page);
+      result.set(language, group);
+      return result;
+    }, new Map());
+    const defaultEntry = pages.find(page => page.locale === defaultLocale) || pages[0];
+    const alternates = [buildAlternateLink('x-default', origin, defaultEntry.url)];
+
+    for (const [language, localizedPages] of [...pagesByLanguage.entries()].sort(([left], [right]) => left.localeCompare(right))) {
+      const sortedPages = [...localizedPages].sort((left, right) => left.locale.localeCompare(right.locale));
+
+      if (sortedPages.length > 1) {
+        const languageDefault = sortedPages.find(page => getLocation(page.locale) === localeConfig.location) || sortedPages[0];
+        alternates.push(buildAlternateLink(language, origin, languageDefault.url));
+
+        for (const page of sortedPages) {
+          alternates.push(buildAlternateLink(page.locale, origin, page.url));
+        }
+
+        continue;
+      }
+
+      alternates.push(buildAlternateLink(language, origin, sortedPages[0].url));
+    }
+
+    return buildUrl(origin, defaultEntry.url, lastMod, alternates);
+  });
+}
+
+function buildSitemapXml(entries, origin) {
+  const normalizedEntries = entries
+    .map((entry) => typeof entry === 'string'
+      ? { url: entry, locale: localeConfig.language + '-' + localeConfig.location, name: entry }
+      : entry)
+    .sort((left, right) => left.url.localeCompare(right.url));
+  const lastMod = new Date().toISOString().split('T')[0];
+  const isMultiple = localeConfig.locales.length > 1;
+  const urls = isMultiple
+    ? buildLocalizedUrls(normalizedEntries, origin, lastMod)
+    : normalizedEntries.map(entry => buildUrl(origin, entry.url, lastMod));
+  const alternateNamespace = isMultiple
+    ? ' xmlns:xhtml="http://www.w3.org/1999/xhtml"'
+    : '';
+
+  return '<?xml version="1.0" encoding="UTF-8"?>\\n<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"' + alternateNamespace + '>\\n' + urls.join('\\n') + '\\n</urlset>';
+}
+
 function createLocale(code) {
-  const [lang = 'es', loc = 'ec'] = code.split('-');
+  const [lang = localeConfig.language || 'es', loc = localeConfig.location || 'ec'] = code.split('-');
 
   return {
     code,
@@ -91,7 +302,7 @@ async function getUrl(namePage, localeCode, options = {}) {
 
       if (localePage.dynamic && options.dynamicName) {
         const locale = createLocale(code);
-        const ctx = createContext(definition, locale, localePage, localePage.url, {});
+        const ctx = createContext(definition, locale, localePage, toPublicRoute(code, localePage.url), {});
         const entries = await getDynamicEntries(definition, code, ctx);
         const entry = entries.find(candidate => candidate.name === options.dynamicName);
 
@@ -99,10 +310,10 @@ async function getUrl(namePage, localeCode, options = {}) {
           return undefined;
         }
 
-        return replacePath(localePage.url, entry.url);
+        return replacePath(localizeRoutePattern(code, localePage.url), entry.url);
       }
 
-      return toPublicRoutePattern(localePage.url);
+      return toPublicRoute(code, localePage.url);
     }
   }
 
@@ -125,19 +336,19 @@ async function getUrls(withLocale = false, omitNoPublish = false) {
 
       if (localePage.dynamic) {
         const locale = createLocale(localeCode);
-        const ctx = createContext(definition, locale, localePage, localePage.url, {});
+        const ctx = createContext(definition, locale, localePage, toPublicRoute(localeCode, localePage.url), {});
         const entries = await getDynamicEntries(definition, localeCode, ctx);
 
         for (const entry of entries) {
-          const url = replacePath(localePage.url, entry.url);
-          urls.push(withLocale ? { url, locale: localeCode } : url);
+          const url = replacePath(localizeRoutePattern(localeCode, localePage.url), entry.url);
+          urls.push(withLocale ? { url, locale: localeCode, name: combineName(definition.name, entry.name) } : url);
         }
 
         continue;
       }
 
-      const url = toPublicRoutePattern(localePage.url);
-      urls.push(withLocale ? { url, locale: localeCode } : url);
+      const url = toPublicRoute(localeCode, localePage.url);
+      urls.push(withLocale ? { url, locale: localeCode, name: definition.name } : url);
     }
   }
 
@@ -201,12 +412,7 @@ export default async function sitemapHandler(event) {
     ? new URL(event.req.url, configuredSiteUrl || 'http://localhost')
     : new URL(configuredSiteUrl || 'http://localhost');
   const origin = configuredSiteUrl || requestUrl.origin;
-
-  const xml = '<?xml version="1.0" encoding="UTF-8"?>\\n<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">\\n' + urls
-    .map((entry) => typeof entry === 'string'
-      ? '  <url><loc>' + escapeXml(new URL(entry, origin).toString()) + '</loc></url>'
-      : '  <url><loc>' + escapeXml(new URL(entry.url, origin).toString()) + '</loc><xhtml:link rel="alternate" hreflang="' + escapeXml(entry.locale) + '" href="' + escapeXml(new URL(entry.url, origin).toString()) + '" xmlns:xhtml="http://www.w3.org/1999/xhtml" /></url>')
-    .join('\\n') + '\\n</urlset>';
+  const xml = buildSitemapXml(urls, origin);
 
   return new Response(xml, {
     headers: {
@@ -216,12 +422,18 @@ export default async function sitemapHandler(event) {
 }
 `;
 }
-function ensureGeneratedSitemapHandler(projectRoot, flowRuntimeConfig) {
+function ensureGeneratedSitemapHandler(projectRoot, flowConfig) {
   const handlerPath = resolve(projectRoot, ".flow/generated/modules/sitemap/handler.mjs");
   mkdirSync(dirname(handlerPath), { recursive: true });
   writeFileSync(handlerPath, createGeneratedSitemapHandler(
-    typeof flowRuntimeConfig.siteUrl === "string" ? flowRuntimeConfig.siteUrl : void 0,
-    Array.isArray(flowRuntimeConfig.locale?.locales) ? flowRuntimeConfig.locale.locales : []
+    typeof flowConfig.siteUrl === "string" ? flowConfig.siteUrl : void 0,
+    {
+      locales: Array.isArray(flowConfig.locale?.locales) ? flowConfig.locale.locales : ["es-ec"],
+      language: typeof flowConfig.locale?.language === "string" ? flowConfig.locale.language : "es",
+      location: typeof flowConfig.locale?.location === "string" ? flowConfig.locale.location : "ec",
+      prefixStrategy: flowConfig.locale?.prefixStrategy === "manual" ? "manual" : "auto",
+      prefixFormat: flowConfig.locale?.prefixFormat === "nested" ? "nested" : "compact"
+    }
   ), "utf8");
   return handlerPath;
 }
@@ -235,9 +447,11 @@ export default defineFlowModule({
     prerender: true
   },
   setup(options, context) {
-    const contextRuntimeConfig = typeof context.nitro.runtimeConfig.flow === "object" && context.nitro.runtimeConfig.flow ? context.nitro.runtimeConfig.flow : {};
     const localHandlerPath = resolve(context.projectRoot, "modules/sitemap/handler.ts");
-    const handlerPath = context.projectRoot === resolvePackagePath() ? localHandlerPath : ensureGeneratedSitemapHandler(context.projectRoot, contextRuntimeConfig);
+    const handlerPath = context.projectRoot === resolvePackagePath() ? localHandlerPath : ensureGeneratedSitemapHandler(context.projectRoot, {
+      siteUrl: context.flowConfig.siteUrl,
+      locale: context.flowConfig.locale
+    });
     context.nitro.handlers.push({
       method: "get",
       route: options.route,

package/modules/sitemap/xml.d.ts

@@ -0,0 +1,7 @@
+import type { PageUrlInfo } from '../../src/runtime/pages.ts';
+export interface SitemapLocaleConfig {
+    locales: string[];
+    language: string;
+    location: string;
+}
+export declare function buildSitemapXml(entries: Array<string | PageUrlInfo>, origin: string, locale: SitemapLocaleConfig): string;

package/modules/sitemap/xml.mjs

@@ -0,0 +1,87 @@
+function escapeXml(value) {
+  return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&apos;");
+}
+function getLanguage(locale) {
+  const [language = "es"] = locale.split("-");
+  return language;
+}
+function getLocation(locale) {
+  const [, location = "ec"] = locale.split("-");
+  return location;
+}
+function toAbsoluteUrl(origin, url) {
+  return new URL(url, origin).toString();
+}
+function buildAlternateLink(hreflang, origin, url) {
+  return `<xhtml:link rel="alternate" hreflang="${escapeXml(hreflang)}" href="${escapeXml(toAbsoluteUrl(origin, url))}"/>`;
+}
+function buildUrl(origin, url, lastMod, alternates = []) {
+  const lines = [
+    "  <url>",
+    `    <loc>${escapeXml(toAbsoluteUrl(origin, url))}</loc>`,
+    `    <lastmod>${escapeXml(lastMod)}</lastmod>`,
+    ...alternates.map((alternate) => `    ${alternate}`),
+    "  </url>"
+  ];
+  return lines.join("\n");
+}
+function normalizeEntries(entries, locale) {
+  const defaultLocale = `${locale.language}-${locale.location}`;
+  return entries.map((entry) => {
+    if (typeof entry === "string") {
+      return {
+        url: entry,
+        locale: defaultLocale,
+        name: entry
+      };
+    }
+    return entry;
+  }).sort((left, right) => left.url.localeCompare(right.url));
+}
+function groupByName(entries) {
+  const grouped = /* @__PURE__ */ new Map();
+  for (const entry of entries) {
+    const group = grouped.get(entry.name) || [];
+    group.push(entry);
+    grouped.set(entry.name, group);
+  }
+  return [...grouped.values()];
+}
+function buildLocalizedUrls(entries, origin, locale, lastMod) {
+  const defaultLocale = `${locale.language}-${locale.location}`;
+  return groupByName(entries).map((pages) => {
+    const pagesByLanguage = pages.reduce((result, page) => {
+      const language = getLanguage(page.locale);
+      const group = result.get(language) || [];
+      group.push(page);
+      result.set(language, group);
+      return result;
+    }, /* @__PURE__ */ new Map());
+    const defaultEntry = pages.find((page) => page.locale === defaultLocale) || pages[0];
+    const alternates = [buildAlternateLink("x-default", origin, defaultEntry.url)];
+    for (const [language, localizedPages] of [...pagesByLanguage.entries()].sort(([left], [right]) => left.localeCompare(right))) {
+      const sortedPages = [...localizedPages].sort((left, right) => left.locale.localeCompare(right.locale));
+      if (sortedPages.length > 1) {
+        const languageDefault = sortedPages.find((page) => getLocation(page.locale) === locale.location) || sortedPages[0];
+        alternates.push(buildAlternateLink(language, origin, languageDefault.url));
+        for (const page of sortedPages) {
+          alternates.push(buildAlternateLink(page.locale, origin, page.url));
+        }
+        continue;
+      }
+      alternates.push(buildAlternateLink(language, origin, sortedPages[0].url));
+    }
+    return buildUrl(origin, defaultEntry.url, lastMod, alternates);
+  });
+}
+export function buildSitemapXml(entries, origin, locale) {
+  const normalizedEntries = normalizeEntries(entries, locale);
+  const lastMod = (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
+  const isMultiple = locale.locales.length > 1;
+  const urls = isMultiple ? buildLocalizedUrls(normalizedEntries, origin, locale, lastMod) : normalizedEntries.map((entry) => buildUrl(origin, entry.url, lastMod));
+  const alternateNamespace = isMultiple ? ' xmlns:xhtml="http://www.w3.org/1999/xhtml"' : "";
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"${alternateNamespace}>
+${urls.join("\n")}
+</urlset>`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monkeyplus/flow",
-  "version": "6.0.7",
+  "version": "6.0.9",
   "description": "@monkeyplus/flow package-first runtime with Vite, Nitro, Vue and a workspace playground.",
   "license": "MIT",
   "publishConfig": {

package/server/lib/render.mjs

@@ -5,7 +5,7 @@ import bases from "virtual:flow/bases";
 import layouts from "virtual:flow/layouts";
 import templates from "virtual:flow/templates";
 import { createSSRApp, defineComponent, h } from "vue";
-import { getFlowImageRuntimeUtils } from "../../modules/images/runtime/server.mjs";
+import { getFlowImageBootPayload, getFlowImageRuntimeUtils } from "../../modules/images/runtime/server.mjs";
 import { installFlowVuePlugins } from "../../src/runtime/vue";
 import { getUrl, getUrls } from "./pages.mjs";
 function escapeHtml(value) {
@@ -152,7 +152,8 @@ export async function renderDocument(page, clientAssets) {
     template: page.definition.view.template,
     title: fallbackTitle,
     locale: page.locale,
-    mode
+    mode,
+    images: getFlowImageBootPayload()
   };
   const rendered = await renderBody(page);
   const body = stripVueFragmentMarkers(rendered.body);

package/src/public/nitro.mjs

@@ -16,7 +16,10 @@ export function createFlowNitroConfig(options = {}) {
   const flowConfig = resolveFlowConfig(options.userFlowConfig || {});
   const flowModules = loadFlowModules(projectRoot, flowConfig);
   const flowNitroConfig = { ...flowConfig.nitro || {} };
-  const flowNitroHooks = flowNitroConfig.hooks || {};
+  const flowNitroHooks = {
+    ...flowNitroConfig.hooks || {},
+    ...flowModules.nitro.hooks
+  };
   const configuredNoExternals = Array.isArray(flowNitroConfig.noExternals) ? flowNitroConfig.noExternals : [];
   const flowPackagePattern = /^@monkeyplus\/flow(?:\/.*)?$/;
   const flowRuntimeConfig = typeof flowModules.nitro.runtimeConfig.flow === "object" && flowModules.nitro.runtimeConfig.flow ? flowModules.nitro.runtimeConfig.flow : {};

package/src/public/query-content.mjs

@@ -82,6 +82,7 @@ async function fetchContent(route, path) {
   const localFetch = getGlobalFetch();
   const nitroFetch = await getNitroFetch();
   if (typeof window === "undefined" && localFetch) {
+    console.debug(`[Flow Content] Fetching content from ${joinUrl(apiBase, route)} using global fetch`);
     return await localFetch(joinUrl(apiBase, route), {
       headers: {
         accept: "application/json"
@@ -90,6 +91,7 @@ async function fetchContent(route, path) {
     });
   }
   if (typeof window === "undefined" && nitroFetch) {
+    console.debug(`[Flow Content] Fetching content from ${joinUrl(apiBase, route)} using Nitro fetch`);
     return await nitroFetch(joinUrl(apiBase, route), {
       headers: {
         accept: "application/json"
@@ -99,6 +101,7 @@ async function fetchContent(route, path) {
   }
   const absoluteBase = await resolveAbsoluteContentApiBase();
   const target = withQuery(joinUrl(absoluteBase, route), query);
+  console.debug(`[Flow Content] Fetching content from ${target}`);
   const response = await fetch(target, {
     headers: {
       accept: "application/json"

package/src/runtime/boot.d.ts

@@ -1,4 +1,10 @@
+import type { FlowImageMeta, FlowImageOptions } from '../../modules/images/runtime/types.ts';
 import type { FlowHydrationMode, FlowLocale } from './pages';
+export interface FlowImageBootPayload {
+    all: Record<string, FlowImageMeta>;
+    options: FlowImageOptions;
+    generateOutput: boolean;
+}
 export interface FlowBootPayload {
     path: string;
     bundle: string;
@@ -6,4 +12,5 @@ export interface FlowBootPayload {
     title: string;
     locale: FlowLocale;
     mode: FlowHydrationMode;
+    images?: FlowImageBootPayload;
 }

package/src/runtime/components/MkImage.d.ts

@@ -173,14 +173,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     preset: string;
     modifiers: Record<string, any>;
     sizes: string | Record<string, any>;
+    background: string;
+    quality: string | number;
     alt: string;
     referrerpolicy: string;
     usemap: string;
     longdesc: string;
     ismap: boolean;
     loading: string;
-    quality: string | number;
-    background: string;
     title: string;
     sync: boolean;
     thumbnail: string | boolean;

package/src/runtime/components/MkImage.mjs

@@ -1,6 +1,6 @@
 import { computed, defineComponent, h } from "vue";
 import { parseSize } from "../../../modules/images/runtime/helpers.mjs";
-import { useImage } from "./image-shared.mjs";
+import { useImage, useLazySizes } from "./image-shared.mjs";
 function resolveImageSource(value, fallback) {
   if (typeof value === "string" && value.length) {
     return value;
@@ -110,6 +110,7 @@ export default defineComponent({
         thumbnail
       };
     });
+    useLazySizes(() => !isRuntimeLambda() && !!nSrc.value.thumbnail);
     return () => {
       const compatibilityThumb = !isRuntimeLambda() && nSrc.value.thumbnail;
       return h("img", {

package/src/runtime/components/MkPicture.d.ts

@@ -183,14 +183,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     preset: string;
     modifiers: Record<string, any>;
     sizes: string | Record<string, any>;
+    background: string;
+    quality: string | number;
     alt: string;
     referrerpolicy: string;
     usemap: string;
     longdesc: string;
     ismap: boolean;
     loading: string;
-    quality: string | number;
-    background: string;
     title: string;
     sync: boolean;
     thumbnail: string | boolean;

package/src/runtime/components/MkPicture.mjs

@@ -1,6 +1,6 @@
 import { computed, defineComponent, h } from "vue";
 import { getFileExtension, screens } from "../../../modules/images/runtime/helpers.mjs";
-import { useImage } from "./image-shared.mjs";
+import { useImage, useLazySizes } from "./image-shared.mjs";
 function getLocalSource(src) {
   return src.startsWith("http") ? "" : src;
 }
@@ -118,16 +118,17 @@ export default defineComponent({
       }, nOption.value);
       return typeof thumbnail === "string" ? thumbnail : props.src;
     });
+    useLazySizes(() => !isRuntimeLambda() && !!nThumbnail.value);
     return () => {
       if (isRuntimeLambda()) {
         return h("img", {
           ...attrs,
           ...nImgAttrs.value,
-          src: props.src,
-          alt: props.alt || image.value.alt,
-          title: props.title || image.value.title,
-          width: props.eWidth || nImgAttrs.value.width,
-          height: props.eHeight || nImgAttrs.value.height,
+          "src": props.src,
+          "alt": props.alt || image.value.alt,
+          "title": props.title || image.value.title,
+          "width": props.eWidth || nImgAttrs.value.width,
+          "height": props.eHeight || nImgAttrs.value.height,
           "x-src": getLocalSource(props.src)
         });
       }
@@ -139,18 +140,18 @@ export default defineComponent({
       const imgAttrs = {
         ...attrs,
         ...nImgAttrs.value,
-        src: compatibilityThumb || primarySource.src,
-        srcset: compatibilityThumb ? void 0 : primarySource.srcset,
-        sizes: compatibilityThumb ? void 0 : primarySource.sizes,
+        "src": compatibilityThumb || primarySource.src,
+        "srcset": compatibilityThumb ? void 0 : primarySource.srcset,
+        "sizes": compatibilityThumb ? void 0 : primarySource.sizes,
         "data-src": compatibilityThumb ? primarySource.src : void 0,
         "data-srcset": compatibilityThumb ? primarySource.srcset : void 0,
         "data-sizes": compatibilityThumb ? primarySource.sizes : void 0,
         "data-thumb": compatibilityThumb,
-        alt: props.alt || image.value.alt,
-        title: props.title || image.value.title,
-        width: props.eWidth || nImgAttrs.value.width,
-        height: props.eHeight || nImgAttrs.value.height,
-        class: compatibilityThumb ? [attrs.class, "lazyload", props.classImg] : [attrs.class, props.classImg],
+        "alt": props.alt || image.value.alt,
+        "title": props.title || image.value.title,
+        "width": props.eWidth || nImgAttrs.value.width,
+        "height": props.eHeight || nImgAttrs.value.height,
+        "class": compatibilityThumb ? [attrs.class, "lazyload", props.classImg] : [attrs.class, props.classImg],
         "x-src": getLocalSource(props.src)
       };
       if (options.value.lazy && !props.sync && !imgAttrs.loading) {

package/src/runtime/components/image-shared.d.ts

@@ -1,10 +1,13 @@
 import type { FlowImageMeta, FlowImageOptions, GetImageFunction } from '../../../modules/images/runtime/types.ts';
+import type { FlowBootPayload } from '../boot.ts';
 export interface InjectedImageUtils {
     getImage?: GetImageFunction;
     getImageMeta?: (src: string) => FlowImageMeta | undefined;
     getImageOptions?: () => FlowImageOptions | undefined;
 }
 export declare function useInjectedImageUtils(): InjectedImageUtils;
+export declare function useLazySizes(enabled: () => unknown): void;
+export declare function createBootImageUtils(boot?: FlowBootPayload): InjectedImageUtils;
 export declare function useImage(props: Record<string, any>): {
     imageUtils: InjectedImageUtils;
     image: import("vue").ComputedRef<FlowImageMeta>;

package/src/runtime/components/image-shared.mjs

@@ -1,8 +1,47 @@
-import { computed, inject } from "vue";
+import { computed, inject, watchEffect } from "vue";
 import { getNormalName, parseSize } from "../../../modules/images/runtime/helpers.mjs";
+import { createImageResolver } from "../../../modules/images/runtime/image.mjs";
+let lazySizesLoadPromise;
+function loadLazySizes() {
+  if (lazySizesLoadPromise) {
+    return lazySizesLoadPromise;
+  }
+  lazySizesLoadPromise = import("lazysizes");
+  return lazySizesLoadPromise;
+}
 export function useInjectedImageUtils() {
   return inject("utils", {});
 }
+export function useLazySizes(enabled) {
+  watchEffect(() => {
+    if (typeof window === "undefined" || !enabled()) {
+      return;
+    }
+    void loadLazySizes();
+  });
+}
+export function createBootImageUtils(boot) {
+  const snapshot = boot?.images;
+  if (!snapshot) {
+    return {};
+  }
+  const stateImages = {
+    all: snapshot.all || {},
+    generate: {}
+  };
+  const resolver = createImageResolver(snapshot.options, stateImages, {
+    generateOutput: snapshot.generateOutput
+  });
+  return {
+    getImage: resolver.getImage,
+    getImageMeta(src) {
+      return stateImages.all[src];
+    },
+    getImageOptions() {
+      return { ...snapshot.options };
+    }
+  };
+}
 export function useImage(props) {
   const imageUtils = useInjectedImageUtils();
   const nImgAttrs = computed(() => ({

package/src/runtime/config.d.ts

@@ -1,5 +1,6 @@
 import type { Options as AutoimportOptions } from 'unplugin-auto-import/types';
 import type { Options as ComponentOptions } from 'unplugin-vue-components/types';
+import type { FlowImagesModuleOptions } from '../../modules/images/runtime/types.ts';
 export interface FlowDirEntry {
     dir: string;
 }
@@ -45,6 +46,7 @@ export interface FlowConfig {
     };
     build: FlowBuildConfig;
     locale: FlowLocaleConfig;
+    images?: Partial<FlowImagesModuleOptions>;
     server?: FlowServerConfig;
     siteUrl?: string;
     nitro?: Record<string, unknown>;
@@ -56,12 +58,14 @@ export type UserFlowConfig = Partial<FlowConfig> & Record<string, unknown> & {
         pages?: FlowDirEntry[];
     };
     locale?: Partial<FlowLocaleConfig>;
+    images?: Partial<FlowImagesModuleOptions>;
     server?: FlowServerConfig;
     siteUrl?: string;
     components?: Partial<ComponentOptions>;
     autoImport?: Partial<AutoimportOptions>;
 };
 export interface FlowModuleNitroConfig extends Record<string, unknown> {
+    hooks: Record<string, unknown>;
     plugins: string[];
     handlers: Array<Record<string, unknown>>;
     routeRules: Record<string, Record<string, unknown>>;

package/src/runtime/islands.mjs

@@ -1,5 +1,6 @@
 import islands from "virtual:flow/islands";
 import { createSSRApp } from "vue";
+import { createBootImageUtils } from "./components/image-shared.mjs";
 import { getClientHead } from "./head.mjs";
 import { installFlowVuePlugins } from "./vue.mjs";
 function parseIslandProps(value) {
@@ -39,7 +40,9 @@ async function hydrateIsland(element, boot) {
     return;
   }
   const app = createSSRApp(mod.default, props);
+  const imageUtils = createBootImageUtils(boot);
   app.use(getClientHead());
+  app.provide("utils", imageUtils);
   installFlowVuePlugins(app);
   app.mount(element);
   element.dataset.flowIslandHydrated = "true";

package/src/runtime/modules.mjs

@@ -2,6 +2,7 @@ import { dirname, resolve } from "node:path";
 import { createJiti } from "jiti";
 function createNitroConfig() {
   return {
+    hooks: {},
     plugins: [],
     handlers: [],
     routeRules: {},

package/modules/images/plugin.d.ts

@@ -1,2 +0,0 @@
-declare const _default: any;
-export default _default;

package/modules/images/plugin.mjs

@@ -1,19 +0,0 @@
-import process from "node:process";
-import { defineNitroPlugin } from "nitro/runtime";
-import { materializeGeneratedImages } from "./runtime/build.mjs";
-import { resetFlowImageRuntimeState } from "./runtime/server.mjs";
-export default defineNitroPlugin((nitro) => {
-  nitro.hooks.hook("prerender:done", async () => {
-    const imagesConfig = nitro.options.runtimeConfig.flow?.images;
-    if (!imagesConfig?.generate) {
-      return;
-    }
-    const result = await materializeGeneratedImages(imagesConfig);
-    if (result.total > 0) {
-      console.log(
-        `[flow:images] materialized ${result.total} images (${result.generated} generated, ${result.cacheHits} cache hits${imagesConfig.netlifyCache && process.env.NETLIFY ? ", netlify cache enabled" : ""})`
-      );
-    }
-    resetFlowImageRuntimeState();
-  });
-});