@monkeyplus/flow 6.0.6 → 6.0.7

package/modules/images/runtime/image.mjs

@@ -0,0 +1,235 @@
+import { joinURL, encodeParam, encodePath } from "ufo";
+import { getNormalName, getPreset, guessExt, parseSize } from "./helpers.mjs";
+const modifierKeyMap = {
+  background: "b",
+  fit: "fit",
+  format: "f",
+  height: "h",
+  position: "pos",
+  quality: "q",
+  resize: "s",
+  width: "w"
+};
+function resolveIpxUrl(src, modifiers = {}, baseURL = "/_ipx") {
+  const normalizedModifiers = { ...modifiers };
+  if (normalizedModifiers.width && normalizedModifiers.height) {
+    normalizedModifiers.resize = `${normalizedModifiers.width}x${normalizedModifiers.height}`;
+    delete normalizedModifiers.width;
+    delete normalizedModifiers.height;
+  }
+  const params = Object.entries(normalizedModifiers).filter(([, value]) => value !== void 0 && value !== null && value !== "").map(([key, value]) => `${encodeParam(modifierKeyMap[key] || key)}_${encodeParam(String(value))}`).join(",") || "_";
+  const serializedModifiers = Object.entries(normalizedModifiers).filter(([, value]) => value !== void 0 && value !== null && value !== "").reduce((result, [key, value]) => {
+    result[key] = String(value);
+    return result;
+  }, {});
+  return {
+    modifiers: serializedModifiers,
+    url: joinURL(baseURL, params, encodePath(src))
+  };
+}
+function isRemoteUrl(value) {
+  return value.startsWith("http://") || value.startsWith("https://");
+}
+function normalizeDirImages(dirImages) {
+  return dirImages.replace(/^\/+/, "").split("/")[0] || "images";
+}
+function getPathname(value) {
+  if (isRemoteUrl(value)) {
+    return new URL(value).pathname;
+  }
+  return value;
+}
+function getBaseDir(value, dirImages) {
+  return getPathname(value).replace(/^\/+/, "").split("/")[0] || normalizeDirImages(dirImages);
+}
+function getDirectory(value) {
+  const pathname = getPathname(value).split(/[?#]/, 1)[0] || "";
+  const lastSlash = pathname.lastIndexOf("/");
+  return lastSlash >= 0 ? pathname.slice(0, lastSlash) : "";
+}
+function resolveRemoteRename(input, domains = {}) {
+  if (!isRemoteUrl(input)) {
+    return void 0;
+  }
+  const inputUrl = new URL(input);
+  for (const [base, target] of Object.entries(domains)) {
+    const normalizedBase = decodeURIComponent(base);
+    if (!normalizedBase) {
+      continue;
+    }
+    if (normalizedBase.startsWith("http://") || normalizedBase.startsWith("https://")) {
+      if (input.startsWith(normalizedBase)) {
+        return input.replace(normalizedBase, target);
+      }
+      const baseUrl = new URL(normalizedBase);
+      if (inputUrl.origin === baseUrl.origin && inputUrl.pathname.startsWith(baseUrl.pathname)) {
+        const suffix = inputUrl.pathname.slice(baseUrl.pathname.length).replace(/^\/+/, "");
+        return joinURL(target, suffix);
+      }
+      continue;
+    }
+    if (inputUrl.host === normalizedBase || inputUrl.hostname === normalizedBase) {
+      return joinURL(target, inputUrl.pathname);
+    }
+  }
+  return void 0;
+}
+function resolveRenamePath(path, rename) {
+  const normalizedRename = rename?.trim();
+  if (!normalizedRename) {
+    return path;
+  }
+  const directory = getDirectory(path);
+  let resolvedPath = normalizedRename.startsWith("/") ? normalizedRename : joinURL(directory || "/", normalizedRename);
+  const extension = guessExt(getPathname(path));
+  if (!guessExt(resolvedPath) && extension) {
+    resolvedPath += extension;
+  }
+  return resolvedPath;
+}
+export function createImageResolver(imagesOptions, stateImages, runtime = {}) {
+  const getImage = ((input, modifiers = {}, options = {}) => {
+    if (typeof input !== "string" || !input.length) {
+      throw new TypeError(`input must be a non-empty string (received ${typeof input})`);
+    }
+    const preset = getPreset({ options: imagesOptions }, options?.preset);
+    const resolvedOptions = {
+      ...options,
+      modifiers: {
+        ...preset?.modifiers,
+        ...modifiers
+      }
+    };
+    if (input.startsWith("data:")) {
+      return {
+        url: input
+      };
+    }
+    if (!input.startsWith("/") && !input.startsWith("https://") && !input.startsWith("http://")) {
+      input = joinURL(imagesOptions.dirImages, input);
+    }
+    const expectedFormat = resolvedOptions.modifiers?.format;
+    if (resolvedOptions.modifiers?.width) {
+      resolvedOptions.modifiers.width = parseSize(resolvedOptions.modifiers.width);
+    }
+    if (resolvedOptions.modifiers?.height) {
+      resolvedOptions.modifiers.height = parseSize(resolvedOptions.modifiers.height);
+    }
+    const image = resolveIpxUrl(input, resolvedOptions.modifiers || {}, imagesOptions.baseURL || "/_ipx");
+    image.format = image.format || expectedFormat || "";
+    image.src = input;
+    image.ext = image.format && `.${image.format}` || guessExt(input);
+    let baseDir = getBaseDir(input, imagesOptions.dirImages);
+    const originalExt = guessExt(input);
+    let renamedImage = stateImages.all[input]?.rename;
+    if (!renamedImage && imagesOptions.domains) {
+      renamedImage = resolveRemoteRename(input, imagesOptions.domains);
+    }
+    const replacedPath = decodeURIComponent(resolveRenamePath(renamedImage || input, resolvedOptions.rename));
+    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, "/");
+    }
+    if (originalExt) {
+      image.generate = image.generate.replace(originalExt, image.ext);
+    } else if (!image.generate.includes(".") && image.ext) {
+      image.generate += image.ext;
+    }
+    stateImages.generate[image.url] = image;
+    if (image.src && image.generate && image.modifiers) {
+      runtime.onGenerate?.({
+        ...image,
+        src: image.src,
+        generate: image.generate,
+        modifiers: image.modifiers
+      });
+    }
+    const src = runtime.generateOutput && image.generate ? image.generate : image.url;
+    if (resolvedOptions._meta) {
+      const meta = { ...stateImages.all[input] || { name: input, alt: void 0, title: void 0 } };
+      if (!meta.alt) {
+        meta.alt = getNormalName(meta.name);
+      }
+      if (!meta.title) {
+        meta.title = getNormalName(meta.name);
+      }
+      delete meta.name;
+      return { src, ...meta };
+    }
+    return src;
+  });
+  getImage.getSizes = (input, opts) => {
+    const width = parseSize(opts.modifiers?.width);
+    const height = parseSize(opts.modifiers?.height);
+    const hwRatio = width && height ? height / width : 0;
+    const variants = [];
+    const sizes = {};
+    if (typeof opts.sizes === "string") {
+      for (const entry of opts.sizes.split(/[\s,]+/).filter(Boolean)) {
+        const sizeEntry = entry.split(":");
+        if (sizeEntry.length !== 2) {
+          continue;
+        }
+        sizes[sizeEntry[0].trim()] = sizeEntry[1].trim();
+      }
+    } else {
+      Object.assign(sizes, opts.sizes);
+    }
+    for (const key in sizes) {
+      const screenMaxWidth = imagesOptions.screens?.[key] || parseInt(key, 10);
+      let size = String(sizes[key]);
+      const isFluid = size.endsWith("vw");
+      if (!isFluid && /^\d+$/.test(size)) {
+        size = `${size}px`;
+      }
+      if (!isFluid && !size.endsWith("px")) {
+        continue;
+      }
+      let calculatedWidth = parseInt(size, 10);
+      if (!screenMaxWidth || !calculatedWidth) {
+        continue;
+      }
+      if (isFluid) {
+        calculatedWidth = Math.round(calculatedWidth / 100 * screenMaxWidth);
+      }
+      const calculatedHeight = hwRatio ? Math.round(calculatedWidth * hwRatio) : height;
+      const resizeConfig = opts.modifiers?.resize;
+      const resize = resizeConfig?.[screenMaxWidth] || resizeConfig?.["*"];
+      const positionConfig = opts.modifiers?.position;
+      const position = positionConfig?.[screenMaxWidth] || positionConfig?.["*"] || positionConfig;
+      const currentModifiers = {
+        ...opts.modifiers,
+        width: calculatedWidth,
+        height: calculatedHeight,
+        resize,
+        position
+      };
+      if (resize) {
+        delete currentModifiers.width;
+      }
+      variants.push({
+        width: calculatedWidth,
+        size,
+        screenMaxWidth,
+        media: `(max-width: ${screenMaxWidth}px)`,
+        src: getImage(input, currentModifiers, opts)
+      });
+    }
+    variants.sort((left, right) => left.screenMaxWidth - right.screenMaxWidth);
+    const defaultVariant = variants[variants.length - 1];
+    if (defaultVariant) {
+      defaultVariant.media = "";
+    }
+    return {
+      sizes: variants.map((variant) => `${variant.media ? `${variant.media} ` : ""}${variant.size}`).join(", "),
+      srcset: variants.map((variant) => `${variant.src} ${variant.width}w`).join(", "),
+      src: defaultVariant?.src
+    };
+  };
+  return {
+    getImage
+  };
+}

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

@@ -0,0 +1,2 @@
+import type { FlowImageMeta } from './types.ts';
+export declare function loadImageRenames(sources: string[]): Record<string, FlowImageMeta>;

package/modules/images/runtime/renames.mjs

@@ -0,0 +1,79 @@
+import { existsSync, readFileSync, readdirSync } from "node:fs";
+import { basename, dirname, extname, join, relative, resolve, sep } from "node:path";
+import { joinURL } from "ufo";
+const RENAME_FILE = "_rename";
+function normalizePublicPath(path) {
+  return `/${path}`.replace(/\\/g, "/").replace(/\/+/g, "/");
+}
+function isHeaderLine(original, renamed) {
+  return original.toLowerCase().includes("nombre") && renamed.toLowerCase().includes("nuevo");
+}
+function walkRenameFiles(rootDir, currentDir = rootDir, files = []) {
+  if (!existsSync(currentDir)) {
+    return files;
+  }
+  for (const entry of readdirSync(currentDir, { withFileTypes: true })) {
+    const entryPath = join(currentDir, entry.name);
+    if (entry.isDirectory()) {
+      walkRenameFiles(rootDir, entryPath, files);
+      continue;
+    }
+    if (entry.isFile() && entry.name === RENAME_FILE) {
+      files.push(entryPath);
+    }
+  }
+  return files;
+}
+function toPublicImagePath(rootDir, manifestDir, fileName) {
+  const relativeDir = relative(rootDir, manifestDir).split(sep).join("/");
+  return normalizePublicPath(joinURL(relativeDir, fileName));
+}
+function parseRenameLine(rootDir, filePath, line) {
+  const trimmed = line.trim();
+  if (!trimmed || trimmed.startsWith("#") || trimmed.startsWith("//")) {
+    return void 0;
+  }
+  const [original, renamed, title, ...altParts] = trimmed.split(/\s+/);
+  if (!original || !renamed || isHeaderLine(original, renamed)) {
+    return void 0;
+  }
+  const sourceExt = extname(original);
+  const renamedWithExt = extname(renamed) ? renamed : `${renamed}${sourceExt}`;
+  const manifestDir = dirname(filePath);
+  const sourcePath = toPublicImagePath(rootDir, manifestDir, original);
+  const renamedPath = toPublicImagePath(rootDir, manifestDir, renamedWithExt);
+  return {
+    key: sourcePath,
+    value: {
+      rename: renamedPath,
+      name: basename(renamedWithExt, extname(renamedWithExt)),
+      title,
+      alt: altParts.length ? altParts.join(" ") : void 0
+    }
+  };
+}
+function readRenameDirectory(rootDir) {
+  const entries = {};
+  for (const filePath of walkRenameFiles(resolve(rootDir))) {
+    const raw = readFileSync(filePath, "utf8");
+    for (const line of raw.split(/\r?\n/)) {
+      const parsed = parseRenameLine(rootDir, filePath, line);
+      if (!parsed) {
+        continue;
+      }
+      entries[parsed.key] = parsed.value;
+    }
+  }
+  return entries;
+}
+export function loadImageRenames(sources) {
+  return sources.reduce((collection, source) => {
+    if (!source || !existsSync(source)) {
+      return collection;
+    }
+    return {
+      ...collection,
+      ...readRenameDirectory(source)
+    };
+  }, {});
+}

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

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

package/modules/images/runtime/server.mjs

@@ -0,0 +1,68 @@
+import { appendFileSync, mkdirSync } from "node:fs";
+import { dirname } from "node:path";
+import { createRequire } from "node:module";
+import { loadImageRenames } from "./renames.mjs";
+import { createImageResolver } from "./image.mjs";
+let runtimeConfigRequire;
+let cachedKey;
+let cachedUtils;
+let generatedEntryKeys = /* @__PURE__ */ new Set();
+function getFlowImagesRuntimeConfig() {
+  try {
+    runtimeConfigRequire ??= createRequire(import.meta.url);
+    const runtime = runtimeConfigRequire("nitro/runtime-config");
+    return runtime.useRuntimeConfig?.().flow?.images;
+  } catch {
+    return void 0;
+  }
+}
+export function getFlowImageRuntimeUtils(config = getFlowImagesRuntimeConfig()) {
+  if (!config) {
+    return void 0;
+  }
+  const cacheKey = JSON.stringify(config);
+  const useCache = process.env.NODE_ENV === "production";
+  if (useCache && cachedKey === cacheKey && cachedUtils) {
+    return cachedUtils;
+  }
+  const renameSources = [config.dirRenames, config.publicDir].filter(Boolean);
+  const images = {
+    all: loadImageRenames(renameSources),
+    generate: {}
+  };
+  const resolver = createImageResolver(config.options, images, {
+    generateOutput: config.generate,
+    onGenerate(image) {
+      if (!config.generatedManifestPath) {
+        return;
+      }
+      const dedupeKey = `${image.url}:${image.generate}`;
+      if (generatedEntryKeys.has(dedupeKey)) {
+        return;
+      }
+      generatedEntryKeys.add(dedupeKey);
+      mkdirSync(dirname(config.generatedManifestPath), { recursive: true });
+      appendFileSync(config.generatedManifestPath, `${JSON.stringify(image)}
+`, "utf8");
+    }
+  });
+  const utils = {
+    getImage: resolver.getImage,
+    getImageMeta(src) {
+      return images.all[src];
+    },
+    getImageOptions() {
+      return { ...config.options };
+    }
+  };
+  if (useCache) {
+    cachedKey = cacheKey;
+    cachedUtils = utils;
+  }
+  return utils;
+}
+export function resetFlowImageRuntimeState() {
+  generatedEntryKeys = /* @__PURE__ */ new Set();
+  cachedKey = void 0;
+  cachedUtils = void 0;
+}

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

@@ -0,0 +1,77 @@
+export interface FlowImagesModuleOptions {
+    dirRenames: string;
+    dirFiles: string[];
+    lazy: boolean;
+    screens: Record<string, number>;
+    domains?: Record<string, string>;
+    presets: Record<string, Record<string, unknown>>;
+    baseURL: string;
+    dirImages: string;
+}
+export type FlowImageOptions = Omit<FlowImagesModuleOptions, 'dirRenames' | 'dirFiles'>;
+export interface FlowImageMeta {
+    rename?: string;
+    name: string;
+    alt?: string;
+    title?: string;
+}
+export interface ImageModifiers {
+    width?: number;
+    height?: number;
+    fit?: string;
+    format?: string;
+    [key: string]: any;
+}
+export interface ImageOptions {
+    provider?: string;
+    preset?: string;
+    rename?: string;
+    modifiers?: Partial<ImageModifiers>;
+    _meta?: boolean;
+    [key: string]: any;
+}
+export interface ImageSizesOptions extends ImageOptions {
+    sizes: Record<string, string | number> | string;
+}
+export interface ImageSizes {
+    srcset: string;
+    sizes: string;
+    src?: string;
+}
+export interface ResolvedImage {
+    url: string;
+    format?: string;
+    src?: string;
+    ext?: string;
+    generate?: string;
+    modifiers?: Record<string, string>;
+}
+export interface GeneratedImageEntry extends ResolvedImage {
+    src: string;
+    generate: string;
+    modifiers: Record<string, string>;
+}
+export type GetImageFunction = ((input: string, modifiers?: Record<string, any>, options?: ImageOptions) => string | Record<string, unknown>) & {
+    getSizes: (input: string, options: ImageSizesOptions) => ImageSizes;
+};
+export interface FlowImagesState {
+    all: Record<string, FlowImageMeta>;
+    generate: Record<string, unknown>;
+}
+export interface FlowImagesRuntimeConfig {
+    dirRenames: string;
+    dirFiles: string[];
+    publicDir: string;
+    outputDir: string;
+    generatedManifestPath: string;
+    generatedCacheDir?: string;
+    generatedCacheManifestPath?: string;
+    generate: boolean;
+    netlifyCache: boolean;
+    options: FlowImageOptions;
+}
+export interface FlowImageRuntimeUtils {
+    getImage: GetImageFunction;
+    getImageMeta: (src: string) => FlowImageMeta | undefined;
+    getImageOptions: () => FlowImageOptions;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monkeyplus/flow",
-  "version": "6.0.6",
+  "version": "6.0.7",
   "description": "@monkeyplus/flow package-first runtime with Vite, Nitro, Vue and a workspace playground.",
   "license": "MIT",
   "publishConfig": {
@@ -40,6 +40,10 @@
       "types": "./modules/strapi/runtime/client.d.ts",
       "import": "./modules/strapi/runtime/client.mjs"
     },
+    "./modules/images": {
+      "types": "./src/public/modules/images.d.ts",
+      "import": "./src/public/modules/images.mjs"
+    },
     "./modules/sitemap": {
       "types": "./src/public/modules/sitemap.d.ts",
       "import": "./src/public/modules/sitemap.mjs"
@@ -72,8 +76,10 @@
     "@unhead/vue": "^3.1.0",
     "@vitejs/plugin-vue": "^6.0.5",
     "@vue/server-renderer": "^3.5.13",
+    "ipx": "^3.1.1",
     "nitro": "3.0.260429-beta",
     "std-env": "^4.0.0",
+    "ufo": "^1.6.1",
     "unhead": "^3.1.0",
     "unplugin-icons": "^23.0.1",
     "vite": "^8.0.5",

package/server/lib/pages.mjs

@@ -1,5 +1,7 @@
 import { createRequire } from "node:module";
 import pageDefinitions from "virtual:flow/pages";
+import { getFlowImageRuntimeUtils } from "../../modules/images/runtime/server.mjs";
+import { localizeRoutePattern, normalizePath, toPublicRoute } from "../../src/runtime/locale-routing.mjs";
 const dynamicRouteCache = /* @__PURE__ */ new Map();
 let runtimeConfigRequire;
 function getFlowRuntimeConfig() {
@@ -11,12 +13,6 @@ function getFlowRuntimeConfig() {
     return {};
   }
 }
-function normalizePath(value) {
-  if (!value || value === "/") {
-    return "/";
-  }
-  return value.length > 1 && value.endsWith("/") ? value.slice(0, -1) : value;
-}
 function scorePattern(pattern) {
   return normalizePath(pattern).split("/").filter(Boolean).reduce((score, segment) => {
     if (segment === "**") {
@@ -69,6 +65,7 @@ function createLocale(code) {
   };
 }
 function createContext(definition, locale, localePage, pathname, params, dynamic) {
+  const imageUtils = getFlowImageRuntimeUtils();
   return {
     dynamic,
     locale,
@@ -82,11 +79,12 @@ function createContext(definition, locale, localePage, pathname, params, dynamic
         return locale;
       },
       async getUrl(namePage, localeCode, options) {
-        return await getUrl(namePage, localeCode, options);
+        return await getUrl(namePage, localeCode || locale.code, options);
       },
       async getUrls(withLocale, omitNoPublish) {
         return await getUrls(withLocale, omitNoPublish);
-      }
+      },
+      ...imageUtils || {}
     }
   };
 }
@@ -109,9 +107,6 @@ function replacePath(pattern, url) {
   }
   return normalizePath(resolved.replaceAll("**", ""));
 }
-function toPublicRoutePattern(url) {
-  return normalizePath(url.replaceAll("*", ""));
-}
 function combineName(name, dynamicName) {
   return `${name.replace(/\/*$/, "")}/${dynamicName.replace(/^\/*/, "")}`;
 }
@@ -147,6 +142,7 @@ async function resolveDynamicEntry(definition, localeCode, localePage, ctx, path
 export async function getUrl(namePage, localeCode, options = {}) {
   const enabledLocales = getEnabledLocaleCodes();
   const targetLocale = localeCode || enabledLocales[0];
+  const runtimeConfig = getFlowRuntimeConfig();
   for (const definition of pageDefinitions) {
     if (definition.name !== namePage) {
       continue;
@@ -154,32 +150,34 @@ export async function getUrl(namePage, localeCode, options = {}) {
     const localeEntries = targetLocale ? [targetLocale] : Object.keys(definition.locales);
     for (const code of localeEntries) {
       const localePage = definition.locales[code];
+      const localizedRoute = localizeRoutePattern(runtimeConfig.flow, code, localePage?.url || "/");
       if (!localePage) {
         continue;
       }
       if (options.url) {
-        return replacePath(localePage.url, options.url);
+        return replacePath(localizedRoute, options.url);
       }
       if (options.params) {
-        return replacePath(localePage.url, options.params);
+        return replacePath(localizedRoute, options.params);
       }
       if (localePage.dynamic && options.dynamicName) {
         const locale = createLocale(code);
-        const ctx = createContext(definition, locale, localePage, localePage.url, {});
+        const ctx = createContext(definition, locale, localePage, toPublicRoute(runtimeConfig.flow, code, localePage.url), {});
         const entries = await getDynamicEntries(definition, code, ctx);
         const entry = entries.find((candidate) => candidate.name === options.dynamicName);
         if (!entry) {
           return void 0;
         }
-        return replacePath(localePage.url, entry.url);
+        return replacePath(localizedRoute, entry.url);
       }
-      return toPublicRoutePattern(localePage.url);
+      return toPublicRoute(runtimeConfig.flow, code, localePage.url);
     }
   }
   return void 0;
 }
 export async function getUrls(withLocale = false, omitNoPublish = false) {
   const enabledLocales = getEnabledLocaleCodes();
+  const runtimeConfig = getFlowRuntimeConfig();
   const urls = [];
   for (const definition of pageDefinitions) {
     if (omitNoPublish && definition.noPublish) {
@@ -191,15 +189,15 @@ export 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(runtimeConfig.flow, localeCode, localePage.url), {});
         const entries = await getDynamicEntries(definition, localeCode, ctx);
         for (const entry of entries) {
-          const url2 = replacePath(localePage.url, entry.url);
+          const url2 = replacePath(localizeRoutePattern(runtimeConfig.flow, localeCode, localePage.url), entry.url);
           urls.push(withLocale ? { url: url2, locale: localeCode, name: combineName(definition.name, entry.name) } : url2);
         }
         continue;
       }
-      const url = toPublicRoutePattern(localePage.url);
+      const url = toPublicRoute(runtimeConfig.flow, localeCode, localePage.url);
       urls.push(withLocale ? { url, locale: localeCode, name: definition.name } : url);
     }
   }
@@ -214,14 +212,15 @@ export async function resolvePage(pathname) {
       if (enabledLocales.length && !enabledLocales.includes(localeCode)) {
         continue;
       }
-      const params = matchPattern(localePage.url, pathname);
+      const localizedRoute = localizeRoutePattern(runtimeConfig.flow, localeCode, localePage.url);
+      const params = matchPattern(localizedRoute, pathname);
       if (params) {
         candidates.push({
           definition,
           localeCode,
           localePage,
           params,
-          score: scorePattern(localePage.url)
+          score: scorePattern(localizedRoute)
         });
       }
     }

package/server/lib/render.mjs

@@ -5,7 +5,9 @@ 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 { installFlowVuePlugins } from "../../src/runtime/vue";
+import { getUrl, getUrls } from "./pages.mjs";
 function escapeHtml(value) {
   return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
 }
@@ -104,6 +106,19 @@ async function renderBody(page) {
     params: page.params,
     path: page.pathname
   };
+  const imageUtils = getFlowImageRuntimeUtils();
+  const utils = {
+    getLocale() {
+      return page.locale;
+    },
+    async getUrl(namePage, localeCode, options) {
+      return await getUrl(namePage, localeCode || page.locale.code, options);
+    },
+    async getUrls(withLocale, omitNoPublish) {
+      return await getUrls(withLocale, omitNoPublish);
+    },
+    ...imageUtils || {}
+  };
   const TemplateRoot = defineComponent({
     render() {
       const viewNode = h(TemplateComponent, context);
@@ -117,6 +132,7 @@ async function renderBody(page) {
   });
   const app = createSSRApp(TemplateRoot);
   app.provide("context", context);
+  app.provide("utils", utils);
   const head = createHead();
   head.push(normalizeSeoToHead(page.head, fallbackTitle, fallbackDescription));
   app.use(head);

package/server/renderer.d.ts

@@ -1,3 +1,3 @@
 export default function renderPage(input: Request | {
     req?: Request;
-}): Promise<Response | undefined>;
+}): Promise<any>;