nuxt-og-image 6.7.2 → 6.7.4

package/dist/shared/{nuxt-og-image.Pfj5JkJd.mjs → nuxt-og-image.Bv8VSGTj.mjs}

@@ -3,19 +3,21 @@ import * as fs from 'node:fs';
 import { existsSync, mkdirSync, readdirSync, readFileSync, statSync, rmSync } from 'node:fs';
 import { readdir, readFile, writeFile, mkdir } from 'node:fs/promises';
 import { pathToFileURL } from 'node:url';
-import { useNuxt, resolvePath, updateTemplates, addTypeTemplate, addTemplate, defineNuxtModule, createResolver, addImports, hasNuxtModule, hasNuxtModuleCompatibility, getNuxtModuleVersion, addVitePlugin, addBuildPlugin, addServerHandler, addPlugin, addComponentsDir, addServerPlugin } from '@nuxt/kit';
+import { resolvePath, useNuxt, addTemplate, updateTemplates, addTypeTemplate, defineNuxtModule, createResolver, addImports, hasNuxtModule, hasNuxtModuleCompatibility, getNuxtModuleVersion, addVitePlugin, addBuildPlugin, addServerHandler, addPlugin, addComponentsDir, getNuxtVersion, addServerPlugin } from '@nuxt/kit';
 import { defu } from 'defu';
+import { fnv1a64Base36 } from 'fnv1a-64';
 import { installNuxtSiteConfig } from 'nuxt-site-config/kit';
-import { hash } from 'ohash';
-import { join, dirname, relative, isAbsolute, resolve, basename } from 'pathe';
+import { basename, join, dirname, relative, isAbsolute, resolve } from 'pathe';
 import { readPackageJSON } from 'pkg-types';
-import { isCI, isAgent } from 'std-env';
+import { isCI, isAgent, hasTTY } from 'std-env';
 import { parseAndWalk } from 'oxc-walker';
-import { c as applyNitroPresetCompatibility, r as resolveOgImagePreset, R as RE_LEGACY_SUFFIX, g as getPresetNitroPresetCompatibility, d as getRecommendedBinding, e as getMissingDependencies, f as RE_RENDERER_SUFFIX, h as RE_WHITESPACE, p as promptFontsMigration, i as getRendererFromFilename, v as validateProviderSetup, j as getInstalledProviders, T as TAKUMI_CORE_INSTALL_SPEC, k as canPromptInteractively, P as PROVIDER_DEPENDENCIES, l as getRecommendedBindingFromPreset, n as getMissingDependencyInstallSpecs, o as ensureProviderDependencies, q as getProviderDependencyInstallSpecs, s as hasResolvableDependency, t as getRegisteredBaseNames, u as ensureDependencies, w as checkLocalChrome, x as promptForRendererSelection, y as isUndefinedOrTruthy } from './nuxt-og-image.LgUGeaz-.mjs';
+import { resolveNitroPreset, getNuxtModuleOptions, isNuxtGenerate } from 'nuxtseo-shared/kit';
+import { logger } from '../../dist/runtime/logger.js';
+import { Launcher } from 'chrome-launcher';
+import { detectPackageManager, addDependency } from 'nypm';
 import { setupDevToolsUI as setupDevToolsUI$1, setupDevToolsRpc } from 'nuxtseo-shared/devtools';
 import { createStorage } from 'unstorage';
 import fsDriver from 'unstorage/drivers/fs-lite';
-import { logger } from '../../dist/runtime/logger.js';
 import { resolveColorMix, GRADIENT_COLOR_SPACE_RE, splitCssDeclarations } from '../../dist/runtime/server/og-image/utils/css.js';
 import MagicString from 'magic-string';
 import { stripLiteral } from 'strip-literal';
@@ -26,7 +28,277 @@ import { ofetch } from 'ofetch';
 import { parse as parse$1, walkSync, ELEMENT_NODE as ELEMENT_NODE$2, renderSync } from 'ultrahtml';
 import { RE_MATCH_EMOJIS, getEmojiCodePoint, getEmojiIconNames } from '../../dist/runtime/server/og-image/core/transforms/emojis/emoji-utils.js';
 import { resolveModulePath } from 'exsolve';
-import { getNuxtModuleOptions, isNuxtGenerate } from 'nuxtseo-shared/kit';
+import { p as promptFontsMigration } from './nuxt-og-image.CJa2KCie.mjs';
+
+const isUndefinedOrTruthy = (v) => typeof v === "undefined" || v !== false;
+function checkLocalChrome() {
+  if (isCI)
+    return false;
+  let hasChromeLocally = false;
+  try {
+    hasChromeLocally = !!Launcher.getFirstInstallation();
+  } catch {
+  }
+  return hasChromeLocally;
+}
+async function hasResolvableDependency(dep) {
+  return await resolvePath(dep, { fallbackToOriginal: true }).catch(() => null).then((r) => r && r !== dep);
+}
+const VALID_RENDERER_SUFFIXES = ["satori", "browser", "takumi"];
+const RE_RENDERER_SUFFIX_CI = /\.?(satori|browser|takumi)$/i;
+const RE_RENDERER_SUFFIX = /(Satori|Browser|Takumi)$/;
+const RE_LEGACY_SUFFIX = /-legacy$/;
+const RE_WHITESPACE = /\s+/;
+function getRendererFromFilename(filepath) {
+  const filename = basename(filepath).replace(".vue", "");
+  for (const suffix of VALID_RENDERER_SUFFIXES) {
+    if (filename.endsWith(`.${suffix}`))
+      return suffix;
+  }
+  return null;
+}
+const OGIMAGE_PREFIXES = [
+  { prefix: "OgImageCommunity", overlapWord: "Community" },
+  { prefix: "OgImageTemplate", overlapWord: "Template" },
+  { prefix: "OgImage", overlapWord: "Image" }
+];
+function getRegisteredBaseNames(registeredPascalName) {
+  const stripped = registeredPascalName.replace(RE_RENDERER_SUFFIX_CI, "").replace(RE_RENDERER_SUFFIX, "");
+  const names = [];
+  for (const { prefix, overlapWord } of OGIMAGE_PREFIXES) {
+    if (!stripped.startsWith(prefix))
+      continue;
+    const withoutPrefix = stripped.slice(prefix.length);
+    if (withoutPrefix) {
+      names.push(withoutPrefix);
+      if (withoutPrefix !== overlapWord)
+        names.push(overlapWord + withoutPrefix);
+    } else {
+      names.push(overlapWord);
+    }
+    break;
+  }
+  if (names.length === 0)
+    names.push(stripped);
+  return names;
+}
+
+const NodeRuntime = {
+  // node-server runtime
+  browser: "on-demand",
+  // this gets changed build start
+  resvg: "node",
+  satori: "node",
+  takumi: "node",
+  sharp: "node",
+  // will be disabled if they're missing the dependency
+  emoji: "local"
+  // can bundle icons, no size constraints
+};
+const NodeDevRuntime = {
+  ...NodeRuntime,
+  resvg: "node-dev",
+  // use worker to prevent crashes from killing process
+  takumi: "node-dev"
+  // use worker to prevent crashes from killing process
+};
+const NodePrerenderRuntime = {
+  ...NodeRuntime,
+  resvg: "node-dev",
+  // use worker to prevent crashes from killing prerender process
+  takumi: "node-dev"
+  // use worker to prevent crashes from killing prerender process
+};
+const cloudflare = {
+  browser: "cloudflare",
+  resvg: "wasm",
+  satori: "wasm",
+  takumi: "wasm",
+  sharp: false,
+  emoji: "fetch",
+  // edge size limits - use API instead of bundling 24MB icons
+  wasm: {
+    esmImport: true
+    // Do NOT set lazy here — Nitro's cloudflare preset uses lazy: false because
+    // CF Workers require WASM modules to be imported eagerly via top-level await
+  }
+};
+const awsLambda = {
+  browser: false,
+  resvg: "node",
+  satori: "node",
+  takumi: "node",
+  sharp: false,
+  // 0.33.x has issues
+  emoji: "local"
+  // serverless has larger size limits
+};
+const WebContainer = {
+  browser: false,
+  resvg: "wasm-fs",
+  satori: "wasm-fs",
+  takumi: "wasm",
+  sharp: false,
+  emoji: "fetch"
+  // webcontainer has size constraints
+};
+const RuntimeCompatibility = {
+  "nitro-dev": NodeDevRuntime,
+  "nitro-prerender": NodePrerenderRuntime,
+  "node-server": NodeRuntime,
+  "node-cluster": NodeRuntime,
+  "node-listener": NodeRuntime,
+  "bun": NodeRuntime,
+  "deno-server": NodeRuntime,
+  "deno-deploy": NodeRuntime,
+  // node-server extending presets
+  "alwaysdata": NodeRuntime,
+  "cleavr": NodeRuntime,
+  "digital-ocean": NodeRuntime,
+  "edgio": NodeRuntime,
+  "flight-control": NodeRuntime,
+  "heroku": NodeRuntime,
+  "iis-handler": NodeRuntime,
+  "iis-node": NodeRuntime,
+  "koyeb": NodeRuntime,
+  "platform-sh": NodeRuntime,
+  "render-com": NodeRuntime,
+  "zeabur": NodeRuntime,
+  "zerops": NodeRuntime,
+  "stackblitz": WebContainer,
+  "codesandbox": WebContainer,
+  "aws-amplify": awsLambda,
+  "aws-lambda": awsLambda,
+  "azure": awsLambda,
+  "azure-functions": awsLambda,
+  "azure-swa": awsLambda,
+  "netlify": awsLambda,
+  "netlify-edge": {
+    browser: false,
+    resvg: "wasm",
+    satori: "node",
+    takumi: "wasm",
+    sharp: false,
+    emoji: "fetch",
+    // edge size limits
+    wasm: {
+      rollup: {
+        targetEnv: "auto-inline",
+        sync: ["@resvg/resvg-wasm/index_bg.wasm"]
+      }
+    }
+  },
+  "firebase": awsLambda,
+  "firebase-app-hosting": awsLambda,
+  "genezio": awsLambda,
+  "stormkit": awsLambda,
+  "vercel": awsLambda,
+  "vercel-edge": {
+    browser: false,
+    resvg: "wasm",
+    satori: "wasm",
+    takumi: "wasm",
+    sharp: false,
+    emoji: "fetch",
+    // edge size limits - bundling 24MB icons not viable
+    wasm: {
+      // lowers workers kb size
+      esmImport: true,
+      lazy: true
+    }
+  },
+  "cloudflare-pages": cloudflare,
+  "cloudflare-pages-static": cloudflare,
+  "cloudflare": cloudflare,
+  "cloudflare-module": cloudflare,
+  "cloudflare-durable": cloudflare
+};
+function resolveOgImagePreset(nitroConfig) {
+  const nuxt = useNuxt();
+  if (nuxt.options.dev)
+    return "nitro-dev";
+  if (nuxt.options.nitro.static)
+    return "nitro-prerender";
+  return resolveNitroPreset(nitroConfig);
+}
+function getPresetNitroPresetCompatibility(target) {
+  const normalizedTarget = target.replace(RE_LEGACY_SUFFIX, "");
+  let compatibility = RuntimeCompatibility[normalizedTarget];
+  if (!compatibility) {
+    logger.warn(`Unknown Nitro preset "${target}" \u2014 falling back to node-server compatibility. Set ogImage.compatibility.runtime to override.`);
+    compatibility = NodeRuntime;
+  }
+  return compatibility;
+}
+async function applyNitroPresetCompatibility(nitroConfig, options) {
+  const target = resolveOgImagePreset(nitroConfig);
+  const compatibility = getPresetNitroPresetCompatibility(target);
+  const { resolve, detectedRenderers } = options;
+  const satoriEnabled = detectedRenderers.has("satori");
+  const browserEnabled = detectedRenderers.has("browser");
+  const takumiEnabled = detectedRenderers.has("takumi");
+  for (const renderer of detectedRenderers) {
+    if (!compatibility[renderer]) {
+      logger.warn(`Renderer "${renderer}" detected but not supported on "${target}" preset. OG images using .${renderer}.vue components may fail.`);
+    }
+  }
+  const emptyMock = await resolve.resolvePath("./runtime/mock/empty");
+  nitroConfig.alias["#og-image/renderers/satori"] = satoriEnabled ? await resolve.resolvePath("./runtime/server/og-image/satori/renderer") : emptyMock;
+  nitroConfig.alias["#og-image/renderers/browser"] = browserEnabled ? await resolve.resolvePath("./runtime/server/og-image/browser/renderer") : emptyMock;
+  nitroConfig.alias["#og-image/renderers/takumi"] = takumiEnabled ? await resolve.resolvePath("./runtime/server/og-image/takumi/renderer") : emptyMock;
+  const resolvedCompatibility = { ...options.metadata || {} };
+  async function applyBinding(key) {
+    let binding = options.compatibility?.[key];
+    if (typeof binding === "undefined")
+      binding = compatibility[key];
+    const isRendererBinding = key === "browser" || key === "satori" || key === "takumi";
+    if (isRendererBinding && !detectedRenderers.has(key)) {
+      binding = false;
+    }
+    resolvedCompatibility[key] = binding;
+    if (!binding && isRendererBinding) {
+      nitroConfig.alias[`#og-image/renderers/${key}`] = emptyMock;
+    }
+    return {
+      [`#og-image/bindings/${key}`]: !binding ? emptyMock : await resolve.resolvePath(`./runtime/server/og-image/bindings/${key}/${binding}`)
+    };
+  }
+  const satoriPkgDir = await resolve.resolvePath("satori/package.json").then((p) => p.replace("/package.json", ""));
+  const yogaWasmPath = `${satoriPkgDir}/yoga.wasm`;
+  nitroConfig.alias = defu(
+    { "#og-image/yoga-wasm": `${yogaWasmPath}?module` },
+    await applyBinding("browser"),
+    await applyBinding("satori"),
+    await applyBinding("takumi"),
+    await applyBinding("resvg"),
+    await applyBinding("sharp"),
+    nitroConfig.alias || {}
+  );
+  if (Object.values(resolvedCompatibility).includes("wasm")) {
+    nitroConfig.experimental = nitroConfig.experimental || {};
+    nitroConfig.experimental.wasm = true;
+  }
+  nitroConfig.rollupConfig = nitroConfig.rollupConfig || {};
+  nitroConfig.wasm = defu(compatibility.wasm, nitroConfig.wasm);
+  nitroConfig.virtual["#og-image/compatibility"] = () => `export default ${JSON.stringify(resolvedCompatibility)}`;
+  addTemplate({
+    filename: "nuxt-og-image/compatibility.mjs",
+    getContents() {
+      return `export default ${JSON.stringify(resolvedCompatibility)}`;
+    },
+    options: { mode: "server" }
+  });
+  return resolvedCompatibility;
+}
+async function ensureDependencies(dep, nuxt = useNuxt()) {
+  const { ensureDependencyInstalled } = await import('nypm');
+  return Promise.all(dep.map((d) => {
+    return ensureDependencyInstalled(d, {
+      cwd: nuxt.options.rootDir,
+      dev: true
+    });
+  }));
+}
 
 const RE_REFLECT_HAS_MINIFIED = /Reflect\.has\(([\w$]+),([\w$]+)\)\?Reflect\.get\(\1,\2,([\w$]+)\):Reflect\.get\(([\w$]+),\2,\3\)/g;
 const RE_WASM_IMPORT = /import\("(\.\/wasm\/[^"]+\.wasm)"\)/g;
@@ -183,6 +455,198 @@ function patchWebAssemblyInstantiate(code) {
   return code;
 }
 
+const TAKUMI_CORE_PACKAGE = "@takumi-rs/core";
+const TAKUMI_WASM_PACKAGE = "@takumi-rs/wasm";
+const PROVIDER_DEPENDENCIES = [
+  {
+    name: "satori",
+    description: "SVG-based renderer using Satori",
+    bindings: {
+      "node": [
+        { name: "satori", description: "HTML to SVG renderer" },
+        { name: "@resvg/resvg-js", description: "SVG to PNG converter (native)" }
+      ],
+      "wasm": [
+        { name: "satori", description: "HTML to SVG renderer" },
+        { name: "@resvg/resvg-wasm", description: "SVG to PNG converter (WASM)" }
+      ],
+      "wasm-fs": [
+        { name: "satori", description: "HTML to SVG renderer" },
+        { name: "@resvg/resvg-wasm", description: "SVG to PNG converter (WASM)" }
+      ]
+    }
+  },
+  {
+    name: "takumi",
+    description: "Rust-based high-performance renderer (recommended)",
+    bindings: {
+      "node": [
+        { name: TAKUMI_CORE_PACKAGE, description: "Native Takumi renderer" }
+      ],
+      "wasm": [
+        { name: TAKUMI_WASM_PACKAGE, description: "WASM Takumi renderer" }
+      ],
+      "wasm-fs": [
+        { name: TAKUMI_WASM_PACKAGE, description: "WASM Takumi renderer" }
+      ]
+    }
+  },
+  {
+    name: "browser",
+    description: "Browser-based screenshot renderer",
+    bindings: {
+      node: [
+        { name: "playwright-core", description: "Headless browser automation" }
+      ]
+    }
+  }
+];
+async function getInstalledProviders() {
+  const installed = [];
+  for (const provider of PROVIDER_DEPENDENCIES) {
+    if (provider.bindings.node) {
+      const allNodeInstalled = await Promise.all(
+        provider.bindings.node.map((dep) => hasResolvableDependency(dep.name))
+      );
+      if (allNodeInstalled.every(Boolean)) {
+        installed.push({ provider: provider.name, binding: "node" });
+        continue;
+      }
+    }
+    if (provider.bindings.wasm) {
+      const allWasmInstalled = await Promise.all(
+        provider.bindings.wasm.map((dep) => hasResolvableDependency(dep.name))
+      );
+      if (allWasmInstalled.every(Boolean)) {
+        installed.push({ provider: provider.name, binding: "wasm" });
+      }
+    }
+  }
+  return installed;
+}
+async function getMissingDependencies(provider, binding = "node") {
+  const missing = await getMissingProviderDependencyDefinitions(provider, binding);
+  return missing.map((d) => d.name);
+}
+async function getMissingProviderDependencyDefinitions(provider, binding = "node") {
+  const providerDef = PROVIDER_DEPENDENCIES.find((p) => p.name === provider);
+  if (!providerDef)
+    return [];
+  const deps = providerDef.bindings[binding] || providerDef.bindings.node || [];
+  const missing = [];
+  for (const dep of deps) {
+    if (!await hasResolvableDependency(dep.name))
+      missing.push(dep);
+  }
+  return missing;
+}
+function getDependencyDefinitions(provider, binding = "node") {
+  const providerDef = PROVIDER_DEPENDENCIES.find((p) => p.name === provider);
+  if (!providerDef)
+    return [];
+  return providerDef.bindings[binding] || providerDef.bindings.node || [];
+}
+function getDependencyInstallSpec(dep) {
+  return dep.installSpec || dep.name;
+}
+async function getMissingDependencyInstallSpecs(provider, binding = "node") {
+  const missing = await getMissingProviderDependencyDefinitions(provider, binding);
+  return missing.map(getDependencyInstallSpec);
+}
+function getProviderDependencyInstallSpecs(provider, binding = "node") {
+  return getDependencyDefinitions(provider, binding).map(getDependencyInstallSpec);
+}
+function getRecommendedBindingFromPreset(provider) {
+  const preset = resolveOgImagePreset();
+  const compatibility = getPresetNitroPresetCompatibility(preset);
+  return getRecommendedBinding(provider, compatibility);
+}
+function getRecommendedBinding(provider, compatibility) {
+  if (provider === "satori") {
+    const resvgBinding = compatibility.resvg;
+    if (resvgBinding === "wasm-fs")
+      return "wasm-fs";
+    if (resvgBinding === "wasm")
+      return "wasm";
+    return "node";
+  }
+  if (provider === "takumi") {
+    const takumiBinding = compatibility.takumi;
+    if (takumiBinding === "wasm")
+      return "wasm";
+    return "node";
+  }
+  if (provider === "browser") {
+    return "node";
+  }
+  return "node";
+}
+async function ensureProviderDependencies(provider, binding, nuxt) {
+  const missingDeps = await getMissingProviderDependencyDefinitions(provider, binding);
+  if (missingDeps.length === 0)
+    return { success: true, installed: [] };
+  const missingInstallSpecs = missingDeps.map(getDependencyInstallSpec);
+  const pm = await detectPackageManager(nuxt.options.rootDir);
+  const pmName = pm?.name || "npm";
+  logger.info(`Installing ${provider} dependencies: ${missingInstallSpecs.join(", ")}`);
+  const installed = [];
+  for (const dep of missingDeps) {
+    const installSpec = getDependencyInstallSpec(dep);
+    const success = await addDependency(installSpec, {
+      cwd: nuxt.options.rootDir,
+      dev: false
+    }).then(() => {
+      installed.push(installSpec);
+      return true;
+    }).catch(() => {
+      logger.error(`Failed to install ${installSpec}. Run manually: ${pmName} add ${installSpec}`);
+      return false;
+    });
+    if (!success)
+      return { success: false, installed };
+  }
+  return { success: true, installed };
+}
+function canPromptInteractively(env = {
+  hasTTY,
+  hasStdinTTY: Boolean(process.stdin?.isTTY),
+  isAgent,
+  isCI
+}) {
+  return env.hasTTY && env.hasStdinTTY && !env.isAgent && !env.isCI;
+}
+async function promptForRendererSelection() {
+  logger.info("Welcome to Nuxt OG Image! No renderer dependencies detected.");
+  const renderer = await logger.prompt("Which renderer would you like to use?", {
+    type: "select",
+    options: PROVIDER_DEPENDENCIES.map((p) => p.name),
+    initial: "takumi"
+  });
+  return renderer || "takumi";
+}
+async function validateProviderSetup(renderer, compatibility) {
+  const issues = [];
+  const binding = getRecommendedBinding(renderer, compatibility);
+  const missing = await getMissingDependencyInstallSpecs(renderer, binding);
+  if (missing.length > 0) {
+    issues.push(`Missing ${renderer} dependencies: ${missing.join(", ")}`);
+  }
+  if (renderer === "satori") {
+    const hasResvgNode = await hasResolvableDependency("@resvg/resvg-js");
+    const hasResvgWasm = await hasResolvableDependency("@resvg/resvg-wasm");
+    if (!hasResvgNode && !hasResvgWasm) {
+      issues.push("Satori requires either @resvg/resvg-js (node) or @resvg/resvg-wasm to render PNGs");
+    }
+  }
+  if (renderer === "browser") {
+    const hasPlaywright = await hasResolvableDependency("playwright-core");
+    if (!hasPlaywright && binding === "node") {
+      issues.push("Browser renderer requires playwright-core");
+    }
+  }
+  return { valid: issues.length === 0, issues };
+}
+
 function setupDevHandler(options, resolve, getDetectedRenderers, getCompatibilityMeta = () => ({}), nuxt = useNuxt()) {
   nuxt.hooks.hook("nitro:init", async (nitro) => {
     const detectedRenderers = new Set(getDetectedRenderers());
@@ -3760,7 +4224,7 @@ async function onInstall(nuxt) {
     if (installedProviders2.length === 0) {
       throw new Error(
         `[nuxt-og-image] No OG image provider dependencies found. Install a provider before running in CI:
-  npm add ${TAKUMI_CORE_INSTALL_SPEC}                # for takumi
+  npm add ${TAKUMI_CORE_PACKAGE}                # for takumi
   npm add @resvg/resvg-js satori yoga-wasm-web  # for satori
   npm add playwright-core                       # for browser
 See: https://nuxtseo.com/og-image/getting-started`
@@ -4074,6 +4538,15 @@ declare module '#og-image/font-requirements' {
   export const hasNuxtFonts: boolean
 }
 
+declare module '#og-image/island-hash' {
+  export function getIslandHash(input: {
+    name: string
+    props?: Record<string, any> | string | null
+    context?: Record<string, any>
+    source?: string
+  }): string
+}
+
 declare module '#og-image-virtual/unocss-config.mjs' {
   export const theme: Record<string, any>
 }
@@ -4852,7 +5325,7 @@ ${familyInfo}`);
         logger.debug(`Using ${renderer} renderer`);
       } else {
         ogImageComponentCtx.detectedRenderers.add("takumi");
-        logger.warn(`No OG image renderer dependency detected. Defaulting to \`takumi\` (non-interactive environment). Install \`${TAKUMI_CORE_INSTALL_SPEC}\`, or add a renderer component (e.g. components/OgImage/Default.satori.vue) to choose explicitly.`);
+        logger.warn(`No OG image renderer dependency detected. Defaulting to \`takumi\` (non-interactive environment). Install \`${TAKUMI_CORE_PACKAGE}\`, or add a renderer component (e.g. components/OgImage/Default.satori.vue) to choose explicitly.`);
       }
     }
     const availableRenderers = /* @__PURE__ */ new Set();
@@ -4958,7 +5431,7 @@ ${familyInfo}`);
           const credits = componentFile.split("\n").find((line) => line.startsWith(" * @credits"))?.replace("* @credits", "").trim();
           const propNames = extractPropNamesFromVue(componentFile);
           ogImageComponentCtx.components.push({
-            hash: hash(componentFile).replaceAll("_", "-"),
+            hash: fnv1a64Base36(componentFile),
             pascalName: component.pascalName,
             kebabName: component.kebabName,
             path: component.filePath,
@@ -5043,6 +5516,22 @@ Run: npx nuxt-og-image migrate v6`;
     nuxt.options.nitro.virtual["#og-image-virtual/component-names.mjs"] = () => {
       return `export const componentNames = ${JSON.stringify(ogImageComponentCtx.components)}`;
     };
+    nuxt.options.nitro.virtual["#og-image/island-hash"] = () => {
+      const islandHashFile = join(nuxt.options.appDir, "island-hash.js");
+      const [nuxtMajor = 0, nuxtMinor = 0] = getNuxtVersion(nuxt).split(".").map((v) => Number.parseInt(v));
+      if (nuxtMajor > 4 || nuxtMajor === 4 && nuxtMinor >= 5)
+        return `export { getIslandHash } from '${islandHashFile}'`;
+      if (existsSync(islandHashFile)) {
+        return `import { computeIslandHash } from '${islandHashFile}'
+export function getIslandHash({ name, props, context, source }) {
+  return computeIslandHash(name, props ?? {}, context ?? {}, source)
+}`;
+      }
+      return `import { hash } from 'ohash'
+export function getIslandHash({ name, props, context, source }) {
+  return hash([name, props ?? {}, context ?? {}, source]).replace(/[-_]/g, '')
+}`;
+    };
     nuxt.options.nitro.publicAssets ||= [];
     const staticFontsTtfDir = join(nuxt.options.buildDir, "cache", "og-image", "fonts-ttf");
     nuxt.options.nitro.publicAssets.push({